@extends('layout.administrator.index')
@section('title', 'Historial')
@section('style')
 {{-- <style>
     table tbody tr:hover {
         cursor:pointer;
     }
 </style> --}}
 {{-- <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" /> --}}
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
@endsection
@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="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 class="col-md-3">
                        <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>
                  <div class="row">
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="idUnitMakeFt" class="control-label">Unit Make</label>
                           <select name="unit_make_ft" class="form-control select2" id="idUnitMakeFt">
                              <option value="">TODOS</option>
                              @foreach ($unitMake as $key => $condition)
                                 <option value="{{$condition['id']}}">{{$condition['name']}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="mdIdUnitModelFt" class="control-label">Unit Model</label>
                           <select name="unit_model_ft" class="form-control select2" id="idUnitModelFt">

                           </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>
                  <div class="row">
                     <div class="col-md-6">
                        <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 class="col-md-6">
                        <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>
                  <div class="row">
                    <div class="col-md-4">
                       <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-4">
                       <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-4">
                       <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-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-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-primary" id="btnMultiPrint"><i class="fa fa-download"></i> MultiPDF</button>
                           <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" style="overflow: auto;">
               <div class="table-responsive">
                  <table class="table table-sm table-hover" class="display" cellspacing="0" id="tableHistory">
                     <thead>
                        <tr>
                           <th class="text-center"><i class="fa fa-file-pdf-o"></i></th>
                           <th class="text-center">Tipo de Fluido</th>
                           <th class="text-center">Sample ID</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>
      </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 method="post" id="idFormHistoryExport">
                  @csrf
                  <div class="row">
                     <div class="col-md-6">
                        <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-6">
                        <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-4">
                        <div class="form-group">
                           <label for="mdIdUnitMake" class="control-label">Unit Make</label>
                           <select name="unit_make" class="form-control select2" id="mdIdUnitMake">
                              <option value="">TODOS</option>
                              @foreach ($unitMake as $key => $condition)
                                 <option value="{{$condition['id']}}">{{$condition['name']}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="mdIdUnitModel" class="control-label">Unit Model</label>
                           <select name="unit_model" class="form-control select2" id="mdIdUnitModel">
                           </select>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="mdIdComponent" class="control-label">Components</label>
                           <select class="form-control select2" id="mdIdComponent" name="component[]" multiple>
                              @foreach ($components as $item)
                                 <option value="{{$item->id}}">{{$item->name}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <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 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>
                  <div class="row">
                     <div class="col-md-4">
                        <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 class="col-md-4">
                        <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-4">
                        <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-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>
                  <hr>
                  <div class="row">
                     <div class="col">
                        <p>Limite maximo para descarga: 5000 resultados</p>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col">
                        <button type="submit" name="button" class="btn btn-dark btn-block" value="excel" id="btnSendSample">
                           <i class="fa fa-file-excel-o" aria-hidden="true"></i> EXCEL
                        </button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
   <form action="{{ route('history.multiple.reports') }}" method="POST" target="_blank">
        @csrf
        <input type="hidden" id="allReportsSelected" name="data">
        <button type="submit" style="opacity: 0;" id="btnSendReportsSelected"></button>
    </form>

    <!-- Modal: PDF Options -->
    <div class="modal fade" id="pdfOptionsModal" tabindex="-1" role="dialog" aria-labelledby="pdfOptionsModalLabel" aria-hidden="true">
       <div class="modal-dialog" role="document">
          <div class="modal-content">
             <div class="modal-header">
                <h5 class="modal-title" id="pdfOptionsModalLabel">Opciones de PDF</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
                </button>
             </div>
             <div class="modal-body">
                <h6><strong>Tipo de reporte</strong></h6>
                <div class="form-group">
                   <div class="form-check">
                      <input class="form-check-input" type="radio" name="report_type" id="opt_single_report" value="single" checked>
                      <label class="form-check-label" for="opt_single_report">Reporte individual (solo los registros seleccionados)</label>
                   </div>
                   <div class="form-check">
                      <input class="form-check-input" type="radio" name="report_type" id="opt_package_report" value="package">
                      <label class="form-check-label" for="opt_package_report">Paquete de reportes (incluir registros anteriores)</label>
                   </div>
                </div>

                <div id="package_options" style="display: none;">
                   <div class="form-group">
                      <label for="opt_previous_count">Cantidad de registros anteriores a incluir:</label>
                      <select class="form-control" id="opt_previous_count">
                         <option value="1">1 registro anterior</option>
                         <option value="2">2 registros anteriores</option>
                         <option value="3">3 registros anteriores</option>
                         <option value="4">4 registros anteriores</option>
                      </select>
                   </div>
                </div>

                <hr>
                <h6><strong>Contenido del PDF</strong></h6>
                <p>Seleccione los elementos que desea incluir:</p>
                <div class="form-check">
                   <input class="form-check-input" type="checkbox" value="1" id="opt_include_graphs" checked>
                   <label class="form-check-label" for="opt_include_graphs">Gráficas</label>
                </div>
                <div class="form-check">
                   <input class="form-check-input" type="checkbox" value="1" id="opt_include_numeric" checked>
                   <label class="form-check-label" for="opt_include_numeric">Resultados numéricos</label>
                </div>
                <div class="form-check">
                   <input class="form-check-input" type="checkbox" value="1" id="opt_include_refrig" checked>
                   <label class="form-check-label" for="opt_include_refrig">Sección de refrigerantes</label>
                </div>
                <div class="form-check">
                   <input class="form-check-input" type="checkbox" value="1" id="opt_include_other" checked>
                   <label class="form-check-label" for="opt_include_other">Otros elementos del historial</label>
                </div>
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="btnGenerateMultiPdf">Generar PDF</button>
             </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" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script> --}}
   <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
   <script type="text/javascript">
   $(function() {
      var tableData = $('#tableHistory').DataTable({
         processing: true,
         serverSide: true,
         searching: false,
         info: true,
         pageLength: 50,
         order: [[8, "desc"]],
         ajax: {
            type: 'POST',
            url: "{{route('administrator.history.data')}}",
            data: function(d) {
               d.sampleID = $("#sampleID").val();
               d.fluid_type = $("#idFluidType").val();
               d.account = $("#idAccount").val();
               d.unitId = $("#unitId").val();
               d.unitMake = $("#idUnitMakeFt").val();
               d.unitModel = $("#idUnitModelFt").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')
            },
         },
         columnDefs: [{
                orderable: false,
                className: 'select-checkbox',
                targets: 0
        }],
        select: {
            style: 'multi',
            selector: 'td:first-child'
        },
         columns: [
            { data: 'checkbox',              name:'checkbox' },
            { data: 'fluid_type',            name:'fluid_type' },
            { data: 'id',                    name:'code' },
            { 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 <small>(presione valor de columna Sample ID para visualizar reporte)</small>",
            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..."
         }
      });

         $('#btnMultiPrint').click(function(event) {
            let rows = tableData.rows({selected: true}).data().toArray();
            if(rows.length == 0) { alert("No se ha seleccionado ningun registro"); return 0;}
            let codes = [];
            $.each(rows, function( index, value ) {
                  codes.push(value.sample_code);
            });
            $('#pdfOptionsModal').data('codes', codes.join(','));
            $('#pdfOptionsModal').modal('show');
         })

         // Manejar cambio de tipo de reporte PDF
         $('input[name="report_type"]').change(function() {
            if($(this).val() === 'package') {
               $('#package_options').slideDown();
            } else {
               $('#package_options').slideUp();
            }
         });

         $('#btnGenerateMultiPdf').on('click', function() {
            let codes = $('#pdfOptionsModal').data('codes');
            if(!codes) { alert('No hay códigos seleccionados'); return; }

            let report_type = $('input[name="report_type"]:checked').val();
            let previous_count = $('#opt_previous_count').val();
            let include_graphs = $('#opt_include_graphs').is(':checked') ? 1 : 0;
            let include_numeric = $('#opt_include_numeric').is(':checked') ? 1 : 0;
            let include_refrig = $('#opt_include_refrig').is(':checked') ? 1 : 0;
            let include_other = $('#opt_include_other').is(':checked') ? 1 : 0;

            if (include_graphs === 0 && include_numeric === 0 && include_refrig === 0 && include_other === 0) {
               $('#pdfOptionsModal').modal('hide');
               swal('Atención', 'Debe seleccionar al menos un elemento para generar el reporte.', 'warning');
               return;
            }

            $('#pdfOptionsModal').modal('hide');

            const form = $('<form>', {
               method: 'POST',
               action: '{{ route("history.multiple.reports") }}',
               target: '_blank'
            });
            form.append($('<input>', { type: 'hidden', name: '_token', value: $('meta[name="csrf-token"]').attr('content') }));
            form.append($('<input>', { type: 'hidden', name: 'codes', value: codes }));
            form.append($('<input>', { type: 'hidden', name: 'include_graphs', value: include_graphs }));
            form.append($('<input>', { type: 'hidden', name: 'include_numeric_results', value: include_numeric }));
            form.append($('<input>', { type: 'hidden', name: 'include_refrigerants', value: include_refrig }));
            form.append($('<input>', { type: 'hidden', name: 'include_other', value: include_other }));
            form.append($('<input>', { type: 'hidden', name: 'report_type', value: report_type }));
            form.append($('<input>', { type: 'hidden', name: 'previous_count', value: previous_count }));
            $('body').append(form);
            form.trigger('submit');
            form.remove();
         })

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

    //   $('#tableHistory tbody').on( 'click', 'tr', function () {
    //     //   console.log(tableData.row(this).data().url_detail);
    //   });

      tableData.ajax.reload();
     $('.dataTables_length').addClass('bs-select');

   });
   $('td:first-child').css('z-index', '1000');

   $(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', '.selectAccount', function() {
         var value = $(this).val();
         if ("{{Auth::user()->id_role}}" == 5) {
            // let models = null;
         }

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

         $.ajax({
            type: 'POST',
            url: '/options/customers/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");
               // if ("{{Auth::user()->id_role}}" == 5) {
               //    response = response.filter(u => {
               //       return models.includes(+u.unit_model)
               //    })
               // }
               // $.each(response, function(index, dataUnit) {
               //    $("#unitId").append('<option value="' + dataUnit.id + '">' + dataUnit.unit_id + '</option>');
               // });

               $.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");
   });
</script>
<script type="text/javascript">

//    Button send samples AJAX ...
$('#btnSendSample').click(function(e) {
    e.preventDefault();
    let data = $('#idFormHistoryExport').serialize();
    $.ajax({
            type: 'POST',
            url: "{{route('administrator.history.samples')}}",
            data: data,
            // 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");
                location.href = "{{asset('excel-files') . '/Sample_Reports.xlsx'}}";
            },
            error: function(xhr){
            $(".content_loading").fadeOut("slow");
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
    });
})



$(function() {
   $("#btnSampleDateTakenConsult").on("click", function() {
      $('#idSampleDateTakenConsult').val('');
   });

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

   $("#btnSampleDateAnalysisConsult").on("click", function() {
      $('#idSampleDateAnalysisConsult').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('');
   });


   /*=====================================*/
   $('#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('');
   });

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

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

      $.ajax({
         type: 'POST',
         url: '/options/customers/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");
         }
      });
   });
});

   function exportInfo() {
      document.getElementById("idFormHistoryExport").reset();
      $("#idFormHistoryExport .select2").val("").trigger("change");
      $("#idModalExport").modal();
   }
   // AJAX FUNCTION FROM FILTER
   $('body').on('change', '#idUnitMakeFt', function() {
      var id_mark = $(this).val();
      var token = $('meta[name="csrf-token"]').attr('content');
      $.ajax( {
         url:'{{route("options.model")}}',
         headers: {'X-CSRF-TOKEN': token},
         type:'POST',
         data: {id:id_mark, filter: 1},
         dataType:'JSON',
         beforeSend: function() {
            $(".content_loading").fadeIn("slow");
         },
         success: function(response) {
            $(".content_loading").fadeOut("slow");
            if(response.data !== "") {
               $('select[name=unit_model_ft]').html(response.data);
               $('select[name=unit_model_ft]').prepend('<option>TODOS</option>');
            } else {
               $('select[name=unit_model_ft]').html('<option></option>');
            }
         },
         error: function(xhr, error) {
            console.log('Hubo un error interno', xhr);
         }
      })
   })


   // AJAX FUNCTION FROM MODAL
   $('#mdIdUnitMake').change(function() {
         var id_mark = $(this).val();
         var token = $('meta[name="csrf-token"]').attr('content');
         $.ajax( {
            url:'{{route("options.model")}}',
            headers: {'X-CSRF-TOKEN': token},
            type:'POST',
            data: {id:id_mark, filter: 0},
            dataType:'JSON',
            beforeSend: function() {
               $(".content_loading").fadeIn("slow");
            },
            success: function(response) {
               $(".content_loading").fadeOut("slow");
               if(response.data !== "") {
                  $('select[name=unit_model]').html(response.data);
                  $('select[name=unit_model]').prepend('<option>TODOS</option>');
               } else {
                  $('select[name=unit_model]').html('<option></option>');
               }
            },
            error: function(xhr, error) {
               console.log('Hubo un error interno', xhr);
            }
         })
   })
</script>
@endsection