{%extends 'base.html' %}
{%load static%}
{% load i18n %}
{%load helpers%}
{% get_current_language as LANGUAGE_CODE %}



{%block styles%}

<link rel="stylesheet" type="text/css" href="{% static 'css/jquery-ui.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/jquery.multiselect.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/jquery.multiselect.filter.css' %}">
<script src="{% static 'js/jquery-ui.min.js' %}"></script> 
<script src="{% static 'js/jquery.multiselect.js' %}"></script> 

{% if LANGUAGE_CODE == 'ar' %}
<!-- BEGIN: Custom CSS-->
<link rel="stylesheet" type="text/css" href="{%static 'css-rtl/custom-rtl.css'%}">
<link rel="stylesheet" type="text/css" href="{%static 'assets/css/style-rtl.css'%}">
custom-rtl.
<!-- END: Custom CSS-->
{%else%}
<!-- BEGIN: Custom CSS-->
<link rel="stylesheet" type="text/css" href="{%static 'assets/css/style.css'%}">
<!-- END: Custom CSS-->

{%endif%}


{%endblock%}

{%block content%}

<div class="content-wrapper container-xxl p-0 ">
  
    <div class="content-body">
      <div class="content-wrapper container-xxl p-0">

        <div class="content-header row">
            <div class="content-header-left col-md-12 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{% trans "أوامر الصيانة" %}</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                              <li class="breadcrumb-item"><a href="/">{% trans "الرئيسية" %}</a>
                              </li>
                              <li class="breadcrumb-item"><a href="#">{% trans "إدارة عمليات الصيانة" %}  </a>
                              </li>
                                <li class="breadcrumb-item active">{% trans "أوامر الصيانة" %}
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
          
        </div>

        <div class="content-body">
          <!-- Basic table -->

          <section id="basic-datatable" >
            <div class="row" class="collapse" id="collapseSection">
                <div class="col-12">
                    <div class="card  p-3 mb-3 border  rounded">
    
                      <div class="row">
    
                        <div class="col-md-3 col-12 {% get_show_or_not all_allowed_fields 'Company' %}">
                          <div class="form-group bmd-form-group">
                              <label for="organization"> {% trans "الشركات" %}  </label>
                              <select class="form-control multiselect_field" multiple value ="{{data_to_insert.organization.id}}" name="organization" id="organization">
                                  {% for item in organization_objs %}
                                  <option value="{{ item.id }}" >
                                      {{ item.name }}
                                  </option>
                                  {% endfor %}
                              </select>
                              <div class="invalid-feedback">
                                  {% trans "اختر الشركة" %}
                              </div>  
                          </div>
                        </div>
      
                        <div class="col-md-3 col-12 {% get_show_or_not all_allowed_fields 'Factory' %}">
                          <div class="form-group" >
                              <label for="factory">{% trans 'المصانع' %}  </label>
                              <select   class="form-control required  multiselect_field" multiple  name="factory" id="factory">
                                
                              </select>
                            
                            </div>
                        </div>
      
                        <div class="col-md-3 col-12 {% get_show_or_not all_allowed_fields 'Building' %}">
                          <div class="form-group" >
                              <label for="building">{% trans 'المباني' %}  </label>
                              <select   class="form-control required  multiselect_field" multiple  name="building" id="building">
                                
                              </select>
                            
                            </div>
                        </div>
      
                        <div class="col-md-3 col-12 {% get_show_or_not all_allowed_fields 'Floor' %}">
                          <div class="form-group" >
                              <label for="floor">{% trans 'الطوابق' %}  </label>
                              <select   class="form-control required  multiselect_field" multiple  name="floor" id="floor">
                              
                              </select>
                            
                            </div>
                        </div>

                        {% if TYPE %}
                        <div class="col-md-3 col-12 {% get_show_or_not all_allowed_fields 'Type of Asset' %}">
                          <div class="form-group" >
                              <label for="asset_type">{% trans 'انواع الاصول' %}  </label>
                              <select   class="form-control required  multiselect_field" multiple  name="asset_type" id="asset_type">
                                  {% for item in asset_types_objs %}
                                  <option value="{{ item.id }}" >
                                      {{ item.name }}
                                  </option>
                                  {% endfor %}
                              </select>
                            
                          </div>
                        </div>
      
                        <div class="col-md-3 col-12 {% get_show_or_not all_allowed_fields 'Asset' %}">
                          <div class="form-group" >
                              <label for="asset">{% trans 'الاصول' %}  </label>
                              <select   class="form-control required  multiselect_field" multiple  name="asset" id="asset">
                                
                              </select>
                          </div>
                        </div>

                        {% else %}
                          <div class="col-md-3 col-12 {% get_show_or_not all_allowed_fields 'Asset' %}">
                            <div class="form-group" >
                                <label for="asset">{% trans 'خطوط الإنتاج' %}  </label>
                                <select   class="form-control required  multiselect_field" multiple  name="asset" id="asset">
                                  {% for item in assets_objs %}
                                    <option value="{{ item.id }}" >
                                        {{ item.name }}
                                    </option>
                                  {% endfor %}

                                </select>
                            </div>
                          </div>

                        {% endif %}
      
                        <div class="col-md-3 col-12"  >
                          <div class="form-group">
                              <label for="maintenance_type">{% trans 'نوع الصيانة' %} </label>
                              <select  class="form-control  multiselect_field" multiple  name="maintenance_type" id="maintenance_type" >
                               
                                {%for item in maintainance_type_objs%}
                                <option value="{{item.id}}">
                                   {{item.name}}
                                </option>
                                {%endfor%}
                              </select>
                               
                          </div>
                        </div>                    
                       
                        <div class="col-md-3 col-12"  >
                          <div class="form-group">
                              <label for="priority">{% trans 'الأولوية' %} </label>
                              <select  class="form-control  multiselect_field" multiple  name="priority" id="priority" >
                               
                                {%for item in priorities_objs%}
                                <option value="{{item.id}}">
                                   {{item.name}}
                                </option>
                                {%endfor%}
                              </select>
                               
                          </div>
                        </div>   

                        <div class="col-md-3 col-12 {% get_show_or_not all_allowed_fields 'Item Type' %}">
                          <div class="form-group" >
                              <label for="item_type">{% trans 'نوع المعدة' %}  </label>
                              <select   class="form-control required  multiselect_field" multiple  name="item_type" id="item_type">
                                
                                {%for item in item_types_objs%}
                                <option value="{{item.id}}">
                                   {{item.name}}
                               </option>
                               {%endfor%}
      
                              </select>
                            
                            </div>
                        </div>
      
                        <div class="col-md-3 col-12 {% get_show_or_not all_allowed_fields 'Status' %}">
                          <div class="form-group" >
                              <label for="maintainance_order_status">{% trans 'الحالة' %}  </label>
                              <select   class="form-control required  multiselect_field" multiple  name="maintainance_order_status" id="maintainance_order_status">
                                
                                {%for item in status_objs%}
                                <option value="{{item.id}}">
                                   {{item.name}}
                               </option>
                               {%endfor%}
      
                              </select>
                            
                            </div>
                        </div>
                   
                        <div class="col-12 col-md-3">
                          <div class="form-group">
                              <label for="start_date_from"> {% trans 'تاريخ البداية من'%}  </label>
                              <input type="datetime-local"  class="form-control " id="start_date_from" name="start_date_from" data-placeholder="Date  " aria-invalid="false" >
                              <div  id="invalidId" class="invalid-feedback">
                              الرجاء إختيار تاريخ
                          </div>  
                          </div>
                        </div>
      
                        <div class="col-12 col-md-3"  >
                          <div class="form-group">
                          <label for="start_date_to"> {% trans 'تاريخ البداية الي'%}  </label>
                          <input type="datetime-local"  class="form-control " id="start_date_to" name="start_date_to" data-placeholder="Date" aria-invalid="false" >
                          <div  id="invalidId" class="invalid-feedback">
                              الرجاء إختيار تاريخ
                          </div> 
                              
                          </div>
                        </div> 

                        <div class="col-12 col-md-3">
                          <div class="form-group">
                              <label for="finished_date_from"> {% trans 'تاريخ الانتهاء من'%}  </label>
                              <input type="datetime-local"  class="form-control " id="finished_date_from" name="finished_date_from" data-placeholder="Date  " aria-invalid="false" >
                              <div  id="invalidId" class="invalid-feedback">
                              الرجاء إختيار تاريخ
                          </div>  
                          </div>
                        </div>
      
                        <div class="col-12 col-md-3"  >
                          <div class="form-group">
                          <label for="finished_date_to"> {% trans 'تاريخ الانتهاء الي'%}  </label>
                          <input type="datetime-local"  class="form-control " id="finished_date_to" name="finished_date_to" data-placeholder="Date" aria-invalid="false" >
                          <div  id="invalidId" class="invalid-feedback">
                              الرجاء إختيار تاريخ
                          </div> 
                              
                          </div>
                        </div> 

                        <br/>
    
                        <div class="col-md-3 col-12">
                          <button type="button" class="btn btn-primary pull-left waves-effect waves-float waves-light mt-2 mb-1 w-100" onclick="reload_table()">{% trans 'بحث'%}</button>
                    
                        </div>
                      </div>
    
                    </div>
                </div>
            </div>
          </section>
        </div>

        <div class="content-body">
      
            <!-- Basic table -->
            <section id="basic-datatable">
                <div class="row">
                    <div class="col-12">
                        <div class="card  p-3 mb-3 border  rounded">
                          
                          <table id="listTable" class="table table-responsive">
                            <thead>
                              <tr>
                                <th class=""><a href="#">{% trans "#" %}</a></th>
                                <th class=""><a href="#">{% trans "المعدة" %} </a></th>
                                <th class=""><a href="#">{% trans "نوع الصيانة" %}</a></th>
                                <th class=""><a href="#">{% trans "الحالة" %}</a></th>
                                <th class=""><a href="#">{% trans "الأولوية" %}</a></th>
                                <th class="{% get_show_or_not all_maintenance_costs_allowed_fields 'Spare Parts Cost' %}"><a href="#">{% trans "تكلفة قطع الغيار" %} ({% get_currency %})</a></th>
                                <th class="{% get_show_or_not all_maintenance_costs_allowed_fields 'Operations Cost' %}"><a href="#">{% trans "تكلفة المواد" %} ({% get_currency %})</a></th>
                                <th class="{% get_show_or_not all_maintenance_costs_allowed_fields 'Human Cost' %}"><a href="#">{% trans "تكلفة الأيدي العاملة" %} ({% get_currency %})</a></th>
                                <th class="{% get_show_or_not all_maintenance_costs_allowed_fields 'Other Cost' %}"><a href="#">{% trans "تكاليف اخري" %} ({% get_currency %})</a></th>
                                <th class=""><a href="#">{% trans "إجمالي التكلفة" %} ({% get_currency %})</a></th>
                                <th class=""><a href="#">{% trans "تاريخ البداية" %}</a></th>
                                <th class=""><a href="#">{% trans "تاريخ الانتهاء" %}</a></th>

                                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "عرض تفاصيل أوامر الصيانة" %}
                                <th class="exclude-column"><a href="#">{% trans "عرض التفاصيل" %} </a></th>
                                {% endif %}{% endfor %}

                                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "تحديث أوامر الصيانة" %}
                                <th class="exclude-column"><a href="#">{% trans "تحديث" %} </a></th>
                                {% endif %}{% endfor %}

                                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "حذف أوامر الصيانة" %}
                                <th class="exclude-column"><a href="#">{% trans "حذف" %} </a></th>
                                {% endif %}{% endfor %}
                            </tr>
                            </thead>
                            <tbody></tbody>
                          </table>

                        </div>
                    </div>
                </div>
                
            </section>

        </div>
      </div>

    </div>
</div>
{%endblock%}



{% block Extrajavascripts %}

<script>
  $('#maintenance-order-menu').addClass('open active')
  $('#list-of-maintenance-orders').addClass('active')
</script>

<script>
     var LANGUAGE_CODE = "{{ LANGUAGE_CODE }}";
            
     var   tableOfData = $('#listTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    "url": "/cmms/get-list-of-maintenance-orders",
                    "data": function ( d ) {
                      d.asset_type            = $('#asset_type').val();
                      d.organization          = $('#organization').val();
                      d.factory               = $('#factory').val();
                      d.building              = $('#building').val();
                      d.floor                 = $('#floor').val();
                      d.asset                 = $('#asset').val();
                      d.maintenance_type      = $('#maintenance_type').val();
                      d.item_type             = $('#item_type').val();
                      d.priority              = $('#priority').val();
                      
                      d.start_date_from       = $('#start_date_from').val();
                      d.start_date_to         = $('#start_date_to').val();
                      d.finished_date_from    = $('#finished_date_from').val();
                      d.finished_date_to      = $('#finished_date_to').val();
                      d.maintainance_order_status        = $('#maintainance_order_status').val();
 
                    }
                },
                aoColumns: [
                {
                className: "","mData": null, "sWidth": "5%", "mRender": function (item, type, row, meta) {
                    // Increment the counter for each row
                    var counter = meta.row + meta.settings._iDisplayStart + 1;
                          hideLoader();
                    return '<a>' + counter + '</a>';
                }

                },

                
                {
                  className: "","mData": null, "sWidth": "25%","mRender": function (item) { 
                      return '<a>'+ item.equipment.asset.name +' / '+ item.equipment.name+'</a>';
                    
                }
                },
                

                {
                  className: "",
                  "mData": null,
                  "sWidth": "25%",
                  "mRender": function (item) {
                      if (LANGUAGE_CODE === 'ar') {
                          return '<a>' + item.maintenance_type.name + '</a>';
                      } else if (LANGUAGE_CODE === 'en') {
                          return '<a>' + item.maintenance_type.en_name + '</a>';
                      } else {
                          return '<a>' + item.maintenance_type.name + '</a>'; // Default to Arabic if no match
                      }
                  }
              }
              

                ,
                {
                  className: "","mData": null, "sWidth": "25%","mRender": function (item) { 
                      return '<a>'+item.maintainance_order_status.name+'</a>';
                    
                }
                }


                ,
                {
                  className: "","mData": null, "sWidth": "25%","mRender": function (item) { 
                      return '<a>'+item.priority.name+'</a>';
                    
                }
                }

                ,
                {
                  className: "{% get_show_or_not all_maintenance_costs_allowed_fields 'Spare Parts Cost' %}","mData": null, "sWidth": "25%","mRender": function (item) { 
                      return '<a>'+item.total_cost_spare_parts+'</a>';
                    
                }
                }

                ,
                {
                  className: "{% get_show_or_not all_maintenance_costs_allowed_fields 'Operations Cost' %}","mData": null, "sWidth": "25%","mRender": function (item) { 
                      return '<a>'+item.total_cost_operations+'</a>';
                    
                }
                }

                ,
                {
                  className: "{% get_show_or_not all_maintenance_costs_allowed_fields 'Human Cost' %}","mData": null, "sWidth": "25%","mRender": function (item) { 
                      return '<a>'+item.total_cost_human_resource+'</a>';
                    
                }
                }

                ,
                {
                  className: "{% get_show_or_not all_maintenance_costs_allowed_fields 'Other Cost' %}","mData": null, "sWidth": "25%","mRender": function (item) { 
                      return '<a>'+item.total_cost_other_costs+'</a>';
                    
                }
                }

                ,
                {
                  className: "","mData": null, "sWidth": "25%","mRender": function (item) { 
                    let total = item.total_cost_other_costs + item.total_cost_human_resource + item.total_cost_operations + item.total_cost_spare_parts
                      return '<a>'+ total  +'</a>';
                    
                }
                }

                ,
                {
                  className: "",
                  "mData": null,
                  "sWidth": "25%",
                  "mRender": function (item) {
                      // Check if item.date is a valid date, and then format it
                      if (item.date) {
                          let date = new Date(item.date);
                          let formattedDate = date.getFullYear() + '-' +
                              ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
                              ('0' + date.getDate()).slice(-2) + ' ' +
                              ('0' + date.getHours()).slice(-2) + ':' +
                              ('0' + date.getMinutes()).slice(-2);
                          return '<a>' + formattedDate + '</a>';
                      }
                      return '<a>-</a>';  // In case there's no date
                  }
                },
                {
                    className: "",
                    "mData": null,
                    "sWidth": "25%",
                    "mRender": function (item) {
                        // Check if item.finished_date is a valid date, and then format it
                        if (item.finished_date) {
                            let finishedDate = new Date(item.finished_date);
                            let formattedFinishedDate = finishedDate.getFullYear() + '-' +
                                ('0' + (finishedDate.getMonth() + 1)).slice(-2) + '-' +
                                ('0' + finishedDate.getDate()).slice(-2) + ' ' +
                                ('0' + finishedDate.getHours()).slice(-2) + ':' +
                                ('0' + finishedDate.getMinutes()).slice(-2);
                            return '<a>' + formattedFinishedDate + '</a>';
                        }
                        return '<a>-</a>';  // In case there's no finished date
                    }
                }
                

                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "عرض تفاصيل أوامر الصيانة" %}
                ,
                {
                  className: "", "mData": null, "sWidth": "12.5%","mRender": function (item) { 
                    
                      return '<a class="ml-4 bluefont" href="/cmms/maintenance-order-details?id='+item.hash_id+'"><i class="fa fa-info"></i></a>';
    
                 } }                 
                {% endif %}{% endfor %}

                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "تحديث أوامر الصيانة" %}
                ,
                {
                  className: "", "mData": null, "sWidth": "12.5%","mRender": function (item) { 
                    
                    return '<a class="ml-4 bluefont" href="/cmms/update-maintenance-order/id='+item.hash_id+'"><i class="fa fa-edit"></i></a>';

                    }
                }                 
                {% endif %}{% endfor %}

                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "حذف أوامر الصيانة" %}
                ,
                {
                  className: "", "mData": null, "sWidth": "12.5%","mRender": function (item) { 
                    
                    
                    return '<a class="ml-4 bluefont"href="javascript:void(0)" nameOfItem="'+item.name+'"  idOfItem="'+item.id+'" onclick="askToDeleteItemWithId(this);"><i class="fa fa-trash"></i></a>';
                

                    }
                }              
                {% endif %}{% endfor %}
              
                
            ]
            ,
      dom:
        '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-right"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
      displayLength: 7,
      lengthMenu: [7, 10, 25, 50, 75, 100, 6000],
      
      buttons: [
      {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "تصدير بيانات أوامر الصيانة" %}
            
        {
          extend: 'collection',
          className: 'btn btn-outline-secondary dropdown-toggle mr-2',
          text: feather.icons['share'].toSvg({ class: 'font-small-4 mr-50' }) + '{% trans 'Exporting Data' %}',
          buttons: [
          {
            extend: 'print',
            text: feather.icons['printer'].toSvg({ class: 'font-small-4 mr-50' }) + 'Print',
            className: 'dropdown-item',
            exportOptions: {
              columns: ':not(.exclude-column)'
            },
            customize: function (win) {
              $(win.document.body).find('h1')
              .css('text-align', 'center')  // Align the header text in the center
              .text('فيما يلي بيان بأوامر الصيانة');
            },


          },

          {
            extend: 'excel',
            text: feather.icons['file'].toSvg({ class: 'font-small-4 mr-50' }) + 'Excel',
            className: 'dropdown-item',
            exportOptions: {
              columns: ':not(.exclude-column)'
            },
            customize: function (xlsx) {
              var sheet = xlsx.xl.worksheets['sheet1.xml'];
              var headerRow = $('row', sheet).eq(0);
              $('c', headerRow).each(function () {
                var headerText = 'فيما يلي بيان بأوامر الصيانة'; 
                $('is t', this).text(headerText);
              });
            }
          },
        
          {
            extend: 'copy',
            text: feather.icons['copy'].toSvg({ class: 'font-small-4 mr-50' }) + 'Copy',
            className: 'dropdown-item',
            exportOptions: {
              columns: ':not(.exclude-column)'
            },
            customize: function (data) {
              var headerText = 'فيما يلي بيان بأوامر الصيانة'; 
              return headerText  + ' ' + data; // Prepend the header text to the copied data
            }
          },
          ],
          init: function (api, node, config) {
            $(node).removeClass('btn-secondary');
            $(node).parent().removeClass('btn-group');
            setTimeout(function () {
              $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex');
            }, 50);
          }
        },
       
        {% endif %}{% endfor %}

        {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "إضافة أوامر الصيانة" %}
        {
          text: feather.icons['plus'].toSvg({ class: 'mr-50 font-small-4' }) + '{% trans "إضافة أمر صيانة" %}',
          className: 'create-new btn btn-primary',
          attr: {
            'data-toggle': 'modal',
            'data-target': '#modals-slide-in'
          },
          action: function (e, dt, node, config)
            {
                //This will send the page to the job specified
                window.location.href = '/cmms/add-new-maintenance-order?type=new';
            }
        }
        {% endif %}{% endfor %}

      ],
      language: {
        paginate: {
          // remove previous & next text from pagination
          previous: '&nbsp;',
          next: '&nbsp;'
        }
      }
                
            } );

          function askToDeleteItemWithId(element){
            Swal.fire({
              title: '<strong>{% trans "هل تريد حذف هذا العنصر" %} </strong>',
              icon: 'warning',
              html:
                '<div class="tD-responsive table-responsive">'+
                '<table class="tD table">'+
                    '<thead><tr><th colspan="2">{% trans "تفاصيل العنصر" %}</th></tr></thead>'+
                    '<tbody>'+
                        '<tr>'+
                            '<td width="20%"><strong>{% trans "أسم العنصر" %} </strong></td>'+
                            '<td>'+$(element).attr('nameOfItem')+'</td>'+
                        '</tr>'+
                    '</tbody>'+
                '</table>'+
            '</div>',
              showCloseButton: true,
              showCancelButton: true,
              focusConfirm: false,

              confirmButtonText:'<i class="fa fa-trash"></i> {% trans "حذف" %}',
              confirmButtonColor: '#d33',
              confirmButtonAriaLabel: 'Thumbs up, great!',
              cancelButtonText:'<i class="fa fa-times-circle-o"></i> {% trans "غلق" %}',
              cancelButtonAriaLabel: 'Thumbs down'
            }).then((result) => {
              if (result.value) {


                showLoader();
                $.ajax({
                  type: 'POST',
                  url: '/cmms/delete-asset',
                  dataType: 'json',
                  data: { 
                      'id': $(element).attr('idOfItem')
                  },
                  headers:{
                      "X-CSRFToken": csrftoken
                          },
                  cache: false,
                  success: function(result) {
                  hideLoader()
                    hideLoader();
                      if(result.Result == "Success"){
                        Swal.fire(
                          '{% trans "تم الحذف" %}',
                          '{% trans "حذف بنجاح" %}',

                          'success'
                        ).then((result) => {
                          if (result.value) {
                        location.reload();
                          }
                        });
                        }else{
                          Swal.fire(
                            '{% trans "خطأ" %}',
                            '{% trans "خطأ خلال الحذف" %}',
                            '{% trans "خطأ" %}'
                          )
                        }
                  
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                  hideLoader();
                  Swal.fire(
                    '{% trans "خطأ" %}',
                    '{% trans "خطأ خلال الحذف" %}',
                    '{% trans "خطأ" %}'
                  )
                  }
              });

                
              }
            });
          }


</script>
  
<script>
  $('#organization').on('change', function() {
    var organization_ids = $(this).val(); // Get selected IDs // This will be an array of selected IDs

      $.ajax({
        type : "POST",
        url  : "/cmms/get-factories-of-organization",
        data : {

          'organization_id': organization_ids,
          'csrfmiddlewaretoken': '{{ csrf_token }}' // Include CSRF token
        },

        success : function (data) {
          $('#factory')
          .find('option')
          .remove()
          .end()
          .val('')
          ;

          $.each(JSON.parse(data['factories_list']), function(index,element) {
            $('#factory').append($("<option />").val(element.pk).text(element.fields.name));
        });
        // Reinitialize the multiselect after adding new options
        $('#factory').multiselect('refresh'); // Use the appropriate method for your multiselect library


        },

        errror : function(xrh, status, error){
            alert("errrrrr", error)
        }
    })

  });
</script>


<script>
  $('#factory').on('change', function() {
    var factory_ids = $(this).val(); // Get selected IDs // This will be an array of selected IDs

      $.ajax({
        type : "POST",
        url  : "/cmms/get-building-by-factory",
        data : {

          'factory_id': factory_ids,
          'csrfmiddlewaretoken': '{{ csrf_token }}' // Include CSRF token
        },

        success : function (data) {
          $('#building')
          .find('option')
          .remove()
          .end()
          .val('')
          ;

          $.each(JSON.parse(data['buildings_list']), function(index,element) {
            $('#building').append($("<option />").val(element.pk).text(element.fields.name));
        });
        // Reinitialize the multiselect after adding new options
        $('#building').multiselect('refresh'); // Use the appropriate method for your multiselect library


        },

        errror : function(xrh, status, error){
            alert("errrrrr", error)
        }
    })

  });

</script>


<script>
  $('#building').on('change', function() {
    var building_ids = $(this).val(); // Get selected IDs // This will be an array of selected IDs

      $.ajax({
        type : "POST",
        url  : "/cmms/get-floors-by-building",
        data : {

          'building_id': building_ids,
          'csrfmiddlewaretoken': '{{ csrf_token }}' // Include CSRF token
        },

        success : function (data) {
          $('#floor')
          .find('option')
          .remove()
          .end()
          .val('')
          ;

          $.each(JSON.parse(data['floors_list']), function(index,element) {
            $('#floor').append($("<option />").val(element.pk).text(element.fields.name));
        });
        // Reinitialize the multiselect after adding new options
        $('#floor').multiselect('refresh'); // Use the appropriate method for your multiselect library


        },

        errror : function(xrh, status, error){
            alert("errrrrr", error)
        }
    })

  });

</script>


<script>
  $('#asset_type').on('change', function() {
    var asset_type_ids = $(this).val(); // Get selected IDs // This will be an array of selected IDs

      $.ajax({
        type : "POST",
        url  : "/cmms/get-assets-of-assets-types",
        data : {

          'asset_type_id': asset_type_ids,
          'csrfmiddlewaretoken': '{{ csrf_token }}' // Include CSRF token
        },

        success : function (data) {
          $('#asset')
          .find('option')
          .remove()
          .end()
          .val('')
          ;

          $.each(JSON.parse(data['asset_list']), function(index,element) {
            $('#asset').append($("<option />").val(element.pk).text(element.fields.name));
        });
        // Reinitialize the multiselect after adding new options
        $('#asset').multiselect('refresh'); // Use the appropriate method for your multiselect library


        },

        errror : function(xrh, status, error){
            alert("errrrrr", error)
        }
    })

  });

</script>

    
<script>
  function reload_table(){     
    tableOfData.ajax.reload();
  }
</script>   

<script>
  $('.multiselect_field').multiselect();
</script>
            

   
{% endblock %}