@extends('layout.administrator.index')
@section('title', 'Historial')

@section('content')
   <div class="content-wrapper">
      <section class="content-header">
         {{-- <h1>Historial</h1> --}}
         <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('administrator.dashboard')}}"><i class="fa fa-dashboard"></i> Inicio</a></li>
            <li class="breadcrumb-item active">Historial</li>
         </ol>
      </section>

      <section class="content">
         @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
               {{session('success')}}
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>
         @endif
         @if(session('danger'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
               {{session('danger')}}
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>
         @endif
         <div id="boxfilter" class="box box-solid bg_dark hide">
            <div class="box-header with-border">
               <div class="row align-items-center">
                  <div class="col-12">
                     <h4 class="box-title">Busqueda</h4>
                  </div>
               </div>
            </div>
            <div class="box-body">
               <form id="idSearchFilter">
                  <div class="row">
                     <div class="col-md-3">
                        <div class="form-group">
                           <label for="sampleID" class="control-label">Sample ID</label>
                           <input type="text" class="form-control pull-right" id="sampleID" name="sampleID" autocomplete="off">
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group">
                           <label for="idFluidType" class="control-label">Tipo de Fluido</label>
                           <select class="form-control select2" id="idFluidType" name="fluid_type">
                              <option value="">TODOS</option>
                              @foreach ($fluidTypes as $fluidType)
                                 <option value="{{$fluidType->id}}">{{$fluidType->name}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group">
                           <label for="idCustomer" class="control-label">Customer</label>
                           <select class="form-control select2" id="idCustomer" name="customer">
                              <option value="">TODOS</option>
                              @foreach ($customers as $item)
                                 <option {{request()->customer==$item->id?'selected ':' '}} value="{{$item->id}}">{{$item->company}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group">
                           <label for="idAccount" class="control-label">Account</label>
                           <select class="form-control select2 selectAccount" id="idAccount" name="account">
                              <option value="">TODOS</option>
                              @foreach ($accounts as $account)
                                 <option value="{{$account->id}}">{{$account->name}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="unitId" class="control-label">Unit ID</label>
                           <select class="form-control select2" id="unitId" name="unitId[]" multiple></select>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="idComponent" class="control-label">Component</label>
                           <select class="form-control select2" id="idComponent" name="component[]" multiple></select>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="idSos" class="control-label">SOS</label>
                           <select class="form-control select2" id="idSos" name="sos[]" multiple>
                              <option value="true">SOS</option>
                              <option value="false">Estandar</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="idSampleDateTaken" class="control-label">Date Taken</label>
                           <div class="input-group">
                              <input type="text" class="form-control pull-right" id="idSampleDateTaken" name="sample_date_taken" autocomplete="off">
                              <span class="input-group-btn">
                                 <button type="button" class="btn btn-danger" id="btnSampleDateTaken"><i class="fa fa-times"></i></button>
                              </span>
                           </div>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="idSampleDateReceived" class="control-label">Date Received</label>
                           <div class="input-group">
                              <input type="text" class="form-control pull-right" id="idSampleDateReceived" name="sample_date_received" autocomplete="off">
                              <span class="input-group-btn">
                                 <button type="button" class="btn btn-danger" id="btnSampleDateReceived"><i class="fa fa-times"></i></button>
                              </span>
                           </div>
                        </div>
                     </div>
                     <div class="col-md-4">
                       <div class="form-group">
                          <label for="idSampleDateAnalysis" class="control-label">Date Analysis</label>
                          <div class="input-group">
                             <input type="text" class="form-control pull-right" id="idSampleDateAnalysis" name="sample_date_analysis" autocomplete="off">
                             <span class="input-group-btn">
                                <button type="button" class="btn btn-danger" id="btnSampleDateAnalysis"><i class="fa fa-times"></i></button>
                             </span>
                          </div>
                       </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-3">
                       <div class="form-group">
                          <label for="idGeneralCondition" class="control-label">General Condition</label>
                          <select name="general_condition[]" class="form-control select2" id="idGeneralCondition" multiple>
                             @foreach (Config::get('constants.semaphore') as $key => $condition)
                                <option value="{{$key}}">{{$condition['name']}}</option>
                             @endforeach
                          </select>
                       </div>
                    </div>
                    <div class="col-md-3">
                       <div class="form-group">
                          <label for="idWearOutCondition" class="control-label">Wear Condition</label>
                          <select name="wearout_condition[]" class="form-control select2" id="idWearOutCondition" multiple>
                             @foreach (Config::get('constants.semaphore') as $key => $condition)
                                <option value="{{$key}}">{{$condition['name']}}</option>
                             @endforeach
                          </select>
                       </div>
                    </div>
                    <div class="col-md-3">
                       <div class="form-group">
                          <label for="idContaminationCond" class="control-label">Contamination Cond</label>
                          <select name="contamination_cond[]" class="form-control select2" id="idContaminationCond" multiple>
                             @foreach (Config::get('constants.semaphore') as $key => $condition)
                                <option value="{{$key}}">{{$condition['name']}}</option>
                             @endforeach
                          </select>
                       </div>
                    </div>
                    <div class="col-md-3">
                       <div class="form-group">
                          <label for="idLubeHealthCond" class="control-label">Lube Health Cond</label>
                          <select name="lube_health_cond[]" class="form-control select2" id="idLubeHealthCond" multiple>
                             @foreach (Config::get('constants.semaphore') as $key => $condition)
                                <option value="{{$key}}">{{$condition['name']}}</option>
                             @endforeach
                          </select>
                       </div>
                    </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6 text-left">
                        <a href="{{route('administrator.history.index')}}" class="btn btn-danger"><i class="fa fa-refresh" aria-hidden="true"></i> Limpiar</a>
                     </div>
                     <div class="col-md-6 text-right">
                        <button type="button" id="idBtnSearchData" class="btn btn-info"><i class="fa fa-search" aria-hidden="true"></i> Buscar</button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
         <div class="box">
            <div class="box-header with-border">
               <div class="row align-items-center">
                  <div class="col-6">
                     <h4 class="box-title">Historial</h4>
                  </div>
                  <div class="col-6">
                     <div class="box-controls pull-right">
                        <div class="box-header-actions">
                           {{-- <button type="button" class="btn btn-sm btn-success" onclick="exportInfo()"><i class="fa fa-download"></i> Exportar</button> --}}
                           <button type="button" class="btn btn-sm btn-info" id="filtro"><i class="fa fa-filter"></i> Filtro</button>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="box-body">
               <div class="table-responsive">
                  <table class="table table-sm table-hover" id="customTable">
                     <thead>
                        <tr>
                           <th class="text-center">Tipo de Fluido</th>
                           <th class="text-center">Sample ID</th>
                           <th class="text-center">Cliente</th>
                           <th class="text-center">Account</th>
                           <th class="text-center">Unit ID</th>
                           <th class="text-center">Modelo</th>
                           <th class="text-center">Component</th>
                           <th class="text-center">Date Taken</th>
                           <th class="text-center">Date Received</th>
                           <th class="text-center">Data Analyze</th>
                           <th class="text-center">General Condition</th>
                           <th class="text-center">Wear Condition</th>
                           <th class="text-center">Contamination Cond</th>
                           <th class="text-center">Lube Health Cond</th>
                           <th class="text-center">Action</th>
                        </tr>
                     </thead>
                  </table>
               </div>
            </div>

            <div class="box-footer clearfix">
               <div class="row">
                  <div class="col-md-12">

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

   {{-- MODAL --}}
   {{-- <div class="modal fade" id="idModalExport" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <h4 class="modal-title" id="myModalLabel">Datos a exportar</h4>
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  <i class="fa fa-times"></i>
               </button>
            </div>
            <div class="modal-body">
               <form action="{{route('administrator.history.samples')}}" method="post" target="_blank">
                  @csrf
                  <div class="row">
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="mdIdCustomer" class="control-label">Customers</label>
                           <select class="form-control select2" id="mdIdCustomer" name="customer">
                              <option value="">TODOS</option>
                              @foreach ($customers as $item)
                                 <option {{request()->customer==$item->id?'selected ':' '}} value="{{$item->id}}">{{$item->company}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="mdIdAccount" class="control-label">Accounts</label>
                           <select class="form-control select2" id="mdIdAccount" name="account">
                              <option value="">TODOS</option>
                              @foreach ($accounts as $account)
                                 <option value="{{$account->id}}">{{$account->name}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="mdUnitId" class="control-label">Unit ID</label>
                           <select class="form-control select2" id="mdUnitId" name="unitId[]" multiple></select>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6">
                        <div class="form-group">
                           <label for="mdIdComponent" class="control-label">Components</label>
                           <select class="form-control select2" id="mdIdComponent" name="component[]" multiple></select>
                        </div>
                     </div>
                     <div class="col-md-6">
                        <div class="form-group">
                           <label for="mdIdSos" class="control-label">SOS</label>
                           <select class="form-control select2" id="mdIdSos" name="sos[]" multiple>
                              <option value="true">SOS</option>
                              <option value="false">ESTANDAR</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="idSampleDateTakenConsult" class="control-label">Date Taken</label>
                           <div class="input-group">
                              <input type="text" class="form-control pull-right" id="idSampleDateTakenConsult" name="sample_date_taken" autocomplete="off">
                              <span class="input-group-btn">
                                 <button type="button" class="btn btn-danger" id="btnSampleDateTakenConsult"><i class="fa fa-times"></i></button>
                              </span>
                           </div>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="idSampleDateReceivedConsult" class="control-label">Date Received</label>
                           <div class="input-group">
                              <input type="text" class="form-control pull-right" id="idSampleDateReceivedConsult" name="sample_date_received" autocomplete="off">
                              <span class="input-group-btn">
                                 <button type="button" class="btn btn-danger" id="btnSampleDateReceivedConsult"><i class="fa fa-times"></i></button>
                              </span>
                           </div>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="idSampleDateAnalysisConsult" class="control-label">Date Analysis</label>
                           <div class="input-group">
                              <input type="text" class="form-control pull-right" id="idSampleDateAnalysisConsult" name="sample_date_analysis" autocomplete="off">
                              <span class="input-group-btn">
                                 <button type="button" class="btn btn-danger" id="btnSampleDateAnalysisConsult"><i class="fa fa-times"></i></button>
                              </span>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6">
                        <div class="form-group">
                           <label for="mdIdGeneralCondition" class="control-label">General Condition</label>
                           <select name="general_condition[]" class="form-control select2" id="mdIdGeneralCondition" multiple>
                              @foreach (Config::get('constants.semaphore') as $key => $condition)
                                 <option value="{{$key}}">{{$condition['name']}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-6">
                        <div class="form-group">
                           <label for="mdIdWearOutCondition" class="control-label">Wear Condition</label>
                           <select name="wearout_condition[]" class="form-control select2" id="mdIdWearOutCondition" multiple>
                              @foreach (Config::get('constants.semaphore') as $key => $condition)
                                 <option value="{{$key}}">{{$condition['name']}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6">
                        <div class="form-group">
                           <label for="mdIdContaminationCond" class="control-label">Contamination Cond</label>
                           <select name="contamination_cond[]" class="form-control select2" id="mdIdContaminationCond" multiple>
                              @foreach (Config::get('constants.semaphore') as $key => $condition)
                                 <option value="{{$key}}">{{$condition['name']}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-6">
                        <div class="form-group">
                           <label for="mdIdLubeHealthCond" class="control-label">Lube Health Cond</label>
                           <select name="lube_health_cond[]" class="form-control select2" id="mdIdLubeHealthCond" multiple>
                              @foreach (Config::get('constants.semaphore') as $key => $condition)
                                 <option value="{{$key}}">{{$condition['name']}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col">
                        <button type="submit" name="button" class="btn btn-dark btn-block" value="excel">
                           <i class="fa fa-file-excel-o" aria-hidden="true"></i> EXCEL
                        </button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div> --}}
@endsection

@section('js')
   <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
   <script type="text/javascript">
   $(function() {
      var tableData = $('#customTable').DataTable({
         processing: true,
         serverSide: true,
         searching: false,
         info: true,
         pageLength: 50,
         order: [[ 9, "desc" ]],
         ajax: {
            type: 'POST',
            url : "{{route('administrator.history.data')}}",
            data : function(d){
               d.sampleID = $("#sampleID").val();
               d.fluid_type = $("#idFluidType").val();
               d.customer = $("#idCustomer").val();
               d.account = $("#idAccount").val();
               d.unitId = $("#unitId").val();
               d.component = $("#idComponent").val();
               d.sos = $("#idSos").val();
               d.sample_date_taken = $("#idSampleDateTaken").val();
               d.sample_date_received = $("#idSampleDateReceived").val();
               d.sample_date_analysis = $("#idSampleDateAnalysis").val();
               d.general_condition = $("#idGeneralCondition").val();
               d.wearout_condition = $("#idWearOutCondition").val();
               d.contamination_cond = $("#idContaminationCond").val();
               d.lube_health_cond = $("#idLubeHealthCond").val();
            },
            headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
         },
         columns: [
            { data: 'fluid_type',           name:'fluid_type' },
            { data: 'id',                   name:'code' },
            { data: 'customer',             name:'company'},
            { data: 'account',              name:'fleet_name' },
            { data: 'unitId',               name:'unit_id' },
            { data: 'model',                name:'model' },
            { data: 'component',            name:'component' },
            { data: 'sample_date_taken',    name:'sample_date_taken' },
            { data: 'sample_date_received', name:'sample_date_received' },
            { data: 'date_of_analysis',     name:'date_of_analysis' },
            { data: 'status_report',        name:'status_report', "autoWidth": true },
            { data: 'wearout_condition',    name:'wearout_condition', "autoWidth": true },
            { data: 'contamination_cond',   name:'contamination_cond', "autoWidth": true },
            { data: 'lube_health_cond',     name:'lube_health_cond', "autoWidth": true },
            { data: 'action', orderable: false },
         ],
         language: {
            lengthMenu: "Mostrar _MENU_ registros",
            zeroRecords: "No se encontró nada - lo siento",
            info: "Mostrando la página _PAGE_ de _PAGES_",
            infoEmpty: "No hay registros disponibles",
            infoFiltered: "(filtrado de _MAX_ registros totales)",
            processing: "Procesando..."
         }
      });

      $("#idBtnSearchData").on('click', function(){
         tableData.ajax.reload();
      });

      $('#customTable tbody').on( 'click', 'tr', function () {
          window.location= tableData.row(this).data().url_detail;
      });

      tableData.ajax.reload();
   });

   $ (function() {
      /*=====================================*/
      $('#idSampleDateTaken').daterangepicker({
         autoUpdateInput: false,
         locale: {
            cancelLabel: 'Clear'
         }
      });

      $('#idSampleDateTaken').on('apply.daterangepicker', function(ev, picker) {
         $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      $('#idSampleDateTaken').on('cancel.daterangepicker', function(ev, picker) {
         $(this).val('');
      });

      /*=====================================*/
      $('#idSampleDateReceived').daterangepicker({
         autoUpdateInput: false,
         locale: {
            cancelLabel: 'Clear'
         }
      });

      $('#idSampleDateReceived').on('apply.daterangepicker', function(ev, picker) {
         $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      $('#idSampleDateReceived').on('cancel.daterangepicker', function(ev, picker) {
         $(this).val('');
      });

      /*=====================================*/
      $('#idSampleDateAnalysis').daterangepicker({
         autoUpdateInput: false,
         locale: {
            cancelLabel: 'Clear'
         }
      });

      $('#idSampleDateAnalysis').on('apply.daterangepicker', function(ev, picker) {
         $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      $('#idSampleDateAnalysis').on('cancel.daterangepicker', function(ev, picker) {
         $(this).val('');
      });

      $('body').on('change','#idCustomer',function() {
         var value = $(this).val();

         $("#idAccount").empty();
         $("#idAccount").append('<option value="">TODOS</option>');

         $("#unitId").empty();
         $("#idComponent").empty();

         $.ajax({
            type: 'POST',
            url: '/options/customers/all',
            data: {
               "id": value
            },
            dataType: 'json',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            beforeSend:function(){
               $(".content_loading").fadeIn("slow");
            },
            success:function(response){
               $(".content_loading").fadeOut("slow");

               $.each(response.data.accounts, function( index, account ){
                  $("#idAccount").append('<option value="'+account.id+'">'+account.name+'</option>');
               });
            },
            error: function(xhr){
               $(".content_loading").fadeOut("slow");
               swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
         });
      });

      $('body').on('change','.selectAccount',function() {
         var value = $(this).val();

         $("#unitId").empty();
         $("#idComponent").empty();

         $.ajax({
            type: 'POST',
            url: '/options/unitId',
            data: {
               "id": value
            },
            dataType: 'json',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            beforeSend:function(){
               $(".content_loading").fadeIn("slow");
            },
            success:function(response){
               $(".content_loading").fadeOut("slow");

               $.each(response.equipments, function( index, unitData ){
                  $("#unitId").append('<option value="'+unitData.id+'">'+unitData.unit_id+'</option>');
               });

               $.each(response.components, function( index, componentData ){
                  $("#idComponent").append('<option value="'+componentData.component_id+'">'+componentData.components.name+'</option>');
               });
            },
            error: function(xhr){
               $(".content_loading").fadeOut("slow");
               swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
         });
      });
   });

   $("#btnSampleDateTaken").on("click", function(){
      $('#idSampleDateTaken').val('');
   });

   $("#btnSampleDateReceived").on("click", function(){
      $('#idSampleDateReceived').val('');
   });

   $("#btnSampleDateAnalysis").on("click", function(){
      $('#idSampleDateAnalysis').val('');
   });

   $('#filtro').click(()=>{
      $( "#boxfilter" ).slideToggle("slow");
   });

   function openValidate(id, code) {
      swal({
         title: "Estás seguro?",
         text: "La muestra con el Sample ID: " + code + " sera eliminada!",
         type: "warning",
         showCancelButton: true,
         confirmButtonColor: "#DD6B55",
         confirmButtonText: "Si, Eliminar!",
         closeOnConfirm: false
      }, function(){
         deleteHistory(id);
      });
   }

   function deleteHistory(id) {
      var urlPath = urlHost + "/administrator/history/delete";
      $.ajax({
         type: 'POST',
         url: urlPath,
         data: {
            "id": id
         },
         dataType: 'json',
         headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
         beforeSend:function(){
            // $('#loader_content').removeClass('hidden');
         },
         success:function(response){
            if (response.state == 1) {
               swal({
                  title: "Eliminado!",
                  text: response.message,
                  type: "success",
               }, function(){
                  location.reload();
               });
            }else if (response.state == 2) {
               swal("Oops!", response.message, "warning");
            }else{
               swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
         },
         error: function(xhr){
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
         }
      });
   }
   </script>
   <script type="text/javascript">
   $(function() {
      $("#btnSampleDateTakenConsult").on("click", function(){
         $('#idSampleDateTakenConsult').val('');
      });

      $("#btnSampleDateReceivedConsult").on("click", function(){
         $('#idSampleDateReceivedConsult').val('');
      });

      $("#btnSampleDateAnalysisConsult").on("click", function(){
         $('#idSampleDateAnalysisConsult').val('');
      });

      /*=====================================*/
      $('#idSampleDateTakenConsult').daterangepicker({
         autoUpdateInput: false,
         locale: {
            cancelLabel: 'Clear'
         }
      });

      $('#idSampleDateTakenConsult').on('apply.daterangepicker', function(ev, picker) {
         $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      $('#idSampleDateTakenConsult').on('cancel.daterangepicker', function(ev, picker) {
         $(this).val('');
      });

      /*=====================================*/
      $('#idSampleDateReceivedConsult').daterangepicker({
         autoUpdateInput: false,
         locale: {
            cancelLabel: 'Clear'
         }
      });

      $('#idSampleDateReceivedConsult').on('apply.daterangepicker', function(ev, picker) {
         $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      $('#idSampleDateReceivedConsult').on('cancel.daterangepicker', function(ev, picker) {
         $(this).val('');
      });

      /*=====================================*/
      $('#idSampleDateAnalysisConsult').daterangepicker({
         autoUpdateInput: false,
         locale: {
            cancelLabel: 'Clear'
         }
      });

      $('#idSampleDateAnalysisConsult').on('apply.daterangepicker', function(ev, picker) {
         $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      $('#idSampleDateAnalysisConsult').on('cancel.daterangepicker', function(ev, picker) {
         $(this).val('');
      });

      $('body').on('change','#mdIdAccount',function() {
         var value = $(this).val();

         $("#mdUnitId").empty();
         $("#mdIdComponent").empty();

         $.ajax({
            type: 'POST',
            url: '/options/unitId',
            data: {
               "id": value
            },
            dataType: 'json',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            beforeSend:function(){
               $(".content_loading").fadeIn("slow");
            },
            success:function(response){
               $(".content_loading").fadeOut("slow");

               $.each(response.equipments, function( index, unitData ){
                  $("#mdUnitId").append('<option value="'+unitData.id+'">'+unitData.unit_id+'</option>');
               });

               $.each(response.components, function( index, componentData ){
                  $("#mdIdComponent").append('<option value="'+componentData.component_id+'">'+componentData.components.name+'</option>');
               });
            },
            error: function(xhr){
               $(".content_loading").fadeOut("slow");
               swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
         });
      });

      $('body').on('change','#mdIdCustomer',function() {
         var value = $(this).val();

         $("#mdIdAccount").empty();
         $("#mdIdAccount").append('<option value="">TODOS</option>');

         $("#mdUnitId").empty();
         $("#mdIdComponent").empty();

         $.ajax({
            type: 'POST',
            url: '/options/customers/all',
            data: {
               "id": value
            },
            dataType: 'json',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            beforeSend:function(){
               $(".content_loading").fadeIn("slow");
            },
            success:function(response){
               $(".content_loading").fadeOut("slow");

               $.each(response.data.accounts, function( index, account ){
                  $("#mdIdAccount").append('<option value="'+account.id+'">'+account.name+'</option>');
               });
            },
            error: function(xhr){
               $(".content_loading").fadeOut("slow");
               swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
         });
      });
   });

   function exportInfo() {
      $("#idModalExport").modal();
   }



   </script>
@endsection