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

@section('style')
  <link rel="stylesheet" href="{{asset('assets/minimalpro/css/jquery-ui.css')}}">
@endsection

@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      {{-- <h1>Reception</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">Reception</li>
      </ol>
    </section>

    <section class="content">
      <div class="box box-solid bg_dark" id="idStepsOne">
        <div class="box-header with-border">
          <h3 class="box-title">Reception</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body wizard-content">
          <form action="#" class="wizard-circle wizardSteps">
            <h6>Reception<br><small></small></h6>
            <section>
              <div class="row mb-4 mx-auto">
                <div class="col-md-6 col-12 mx-auto">
                  <div class="input-group">
                    <span class="input-group-btn">
                      <button class="btn btn-info dropdown-toggle dropContainer" id="" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Seleccione un cliente</button>
                      <div class="dropdown-menu">
                        @foreach($customers as $customer)
                          <a class="dropdown-item customerItem" id="{{$customer->id}}" href="#">{{ $customer->company}}</a>
                        @endforeach
                      </div>
                    </span>
                    <input type="text" class="form-control" id="idUnitId" placeholder="Search UNIT ID" value="" disabled>
                    <span class="input-group-btn">
                      <button type="button" onclick="search()" class="btn btn-info"><i class="fa fa-search"></i> Buscar</button>
                    </span>
                  </div>
                </div>
              </div>
              <div class="box" id="idInfoHead" style="display: none;">
                <div class="box-body">
                  <div class="media-list media-list-hover media-list-divided ">
                    <div class="media media-single">
                      <div class="media-body">
                        <div class="row align-items-center">
                          <div class="col-md-6">
                            <h4 class="mb-1 text-nowrap box-title">UNIT ID: <b class="font-weight-bold" id="idOneUnitId"></b></h4>
                            <h5 class="mb-1 text-nowrap" id="customerBussinessName">Make: <b class="font-weight-bold" id="idOneMake"></b></h5>
                            <h5 class="mb-1 text-nowrap" id="customerNIT">Model: <b class="font-weight-bold" id="idOneModel"></b></h5>
                          </div>
                          <div class="col-md-6">
                            <h4 class="mb-1 text-nowrap box-title" id="customerContactName">Customer: <b class="font-weight-bold" id="idOneCustomer"></b></h4>
                            <h5 class="mb-1 text-nowrap" id="customerCellphoneName">Account: <b class="font-weight-bold" id="idOneAccount"></b></h5>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="idInputSampleDateTaken">Sample date taken</label>
                    <input type="date" class="form-control" id="idInputSampleDateTaken" max="{{date('Y-m-d')}}" value="{{date('Y-m-d')}}">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="idInputSampleDateReceivedAtLab">Sample date received at lab</label>
                    <input type="date" class="form-control" id="idInputSampleDateReceivedAtLab" max="{{date('Y-m-d')}}" value="{{date('Y-m-d')}}">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label><b>Modo de captura de horómetro</b></label>
                    <div class="d-flex">
                      <div class="custom-control custom-radio mr-3">
                        <input type="radio" id="idHorometerModeGeneral" name="horometerMode" class="custom-control-input" value="general" checked>
                        <label class="custom-control-label" for="idHorometerModeGeneral">General (aplica a todos)</label>
                      </div>
                      <div class="custom-control custom-radio">
                        <input type="radio" id="idHorometerModeIndividual" name="horometerMode" class="custom-control-input" value="individual">
                        <label class="custom-control-label" for="idHorometerModeIndividual">Individual (por componente)</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row" id="idGeneralHorometerSection">
                <div class="col-md-6">
                  <label for="idInputHorometer">Horometer Machine</label>
                  <div class="input-group">
                    <input type="text" class="form-control input-number" autocomplete="off" id="idInputHorometer">
                    <div class="input-group-addon">
                      <input type="checkbox" id="idChangeHorometer">
                      <label for="idChangeHorometer" class="p-0 m-0" style="height: 20px !important;"> <b class="ml-20">Change Horometer</b> </label>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <label for="idInputHorometer">UNIT MODEL</label>
                  <div class="input-group">
                    <input type="text" class="form-control" id="serialComponent" autocomplete="off">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="lastName1">Filter By</label>
                    @if($categories->count() > 0)
                      <select class="form-control select2" style="width: 100%;" id="idFilterSelected" onchange="filterLubricant(this.value)">
                        <option></option>
                        @foreach ($categories as $key => $category)
                          <option value="{{$category->id}}">{{$category->name}}</option>
                        @endforeach
                      </select>
                    @else
                      <div class="alert alert-warning" style="margin-bottom: 0;">
                        <i class="fa fa-exclamation-triangle"></i>
                        No hay tipos de producto configurados. Por favor, registre al menos uno en el módulo de Parámetros.
                      </div>
                    @endif
                  </div>
                </div>
              </div>
              <div class="row hide" id="idIndividualHorometerSection">
                <div class="col-md-6">
                  <label>Aplicar el mismo horómetro a todos</label>
                  <div class="input-group">
                    <input type="text" class="form-control input-number" autocomplete="off" id="idBulkHorometer" placeholder="Ingrese valor">
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-info" onclick="applyBulkHorometer()"><i class="fa fa-copy"></i> Aplicar a todos</button>
                    </span>
                  </div>
                </div>
                <div class="col-md-3">
                  <label for="serialComponent">UNIT MODEL</label>
                  <div class="input-group">
                    <input type="text" class="form-control" id="serialComponent" autocomplete="off">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="lastName1">Filter By</label>
                    @if($categories->count() > 0)
                      <select class="form-control select2" style="width: 100%;" id="idFilterSelected2" onchange="filterLubricant(this.value)">
                        <option></option>
                        @foreach ($categories as $key => $category)
                          <option value="{{$category->id}}">{{$category->name}}</option>
                        @endforeach
                      </select>
                    @else
                      <div class="alert alert-warning" style="margin-bottom: 0;">
                        <i class="fa fa-exclamation-triangle"></i>
                        No hay tipos de producto configurados. Por favor, registre al menos uno en el módulo de Parámetros.
                      </div>
                    @endif
                  </div>
                </div>
              </div>
              <h4>Component Locations<br><small></small></h4>
              <div class="row">
                <!-- /.col -->
                <div class="col-md-12 col-lg-12">
                  <div class="box">
                    <!-- /.box-header -->
                    <div class="box-body">
                      <table class="table table-hover table-sm table-responsive centerRow" >
                        <thead>
                          <th style="width: 10px">#</th>
                          <th>Component</th>
                          <th class="text-center">
                            <input type="checkbox" id="checkAll" disabled>
                            <label for="checkAll" class="checkLabel"></label> Select</th>
                          <th class="hide" id="thHorometerIndividual">Horometer</th>
                          <th>Lubricant</th>
                          <th>Lub Weight</th>
                          <th>Last Information</th>
                          <th>Lub. Time</th>
                          <th>Laboratory tests</th>
                          <th>Lub. Change</th>
                          <th>Filter Change</th>
                          <th>Refill</th>
                          <th>Refill Amount</th>
                          <th style="width: 40px">SOS</th>
                        </thead>
                        <tbody id="idTableOneReception">

                        </tbody>
                      </table>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box -->
                </div>
              </div>
            </section>
            <!-- Step 2 -->
            <h6>Review <br><small>Sample</small></h6>
            <section>
              <div class="box">
                <div class="box-body">
                  <div class="media-list media-list-hover media-list-divided ">
                    <div class="media media-single">
                      <input type="hidden" id="idCustomer" name="customerID">
                      {{-- <img class="avatar avatar-xl" id="customerImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Caterpillar-shortened.svg/1200px-Caterpillar-shortened.svg.png" alt="..."> --}}
                      <div class="media-body">
                        <div class="row align-items-center">
                          <div class="col-md-6">
                            <h4 class="mb-0 box-title text-nowrap">UNIT ID:  <b class="font-weight-bold" id="idTwoUnitId"></b></h4>
                            <h5 class="mb-1 text-nowrap" id="customerBussinessName">Make: <b class="font-weight-bold" id="idTwoMake"></b></h5>
                            <h5 class="mb-1 text-nowrap" id="customerNIT">Model: <b class="font-weight-bold" id="idTwoModel"></b></h5>
                          </div>
                          <div class="col-md-6">
                            <h4 class="mb-1 text-nowrap box-title" id="customerContactName">Customer: <b class="font-weight-bold" id="idTwoCustomer"></b></h4>
                            <h5 class="mb-1 text-nowrap" id="customerCellphoneName">Account: <b class="font-weight-bold" id="idTwoAccount"></b></h5>
                          </div>
                          <div class="col-md-6">
                            {{-- <h5 class="mb-0">Lot: L7895</h5> --}}
                            <h5 class="mb-1 text-nowrap">Horometer Machine: <b class="font-weight-bold" id="idTwoHorometerMachine"></b></h5>
                            <h5 class="mb-1 text-nowrap">Sample Date Received: <b class="font-weight-bold" id="idTwoSampleDateReceived"></b></h5>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div class="row">
                  <div class="col-12">
                    <div class="box">
                      <div class="box-header">
                        <h4 class="box-title"><strong>Listado </strong> Components Locations</h4>
                      </div>
                      <div class="box-body">
                        <div class="row">
                          <div class="col-12">
                            <div class="table-responsive">
                              <table id="mainTable" class="table table-bordered table-striped m-b-0 centerRow">
                                <thead>
                                  <tr>
                                    <th>Component</th>
                                    <th>Lubricant</th>
                                    <th>Sample Taken</th>
                                    <th>Sample Received</th>
                                    <th>Horometer Component</th>
                                    <th>Oil Time</th>
                                    <th>Oil Change</th>
                                    <th>Filter Change</th>
                                    <th>Refill</th>
                                    <th>Refill Amount</th>
                                  </tr>
                                </thead>
                                <tbody id="idTableTwoReception">

                                </tbody>
                              </table>
                              <input style="position: absolute; top: 49px; left: 15px; padding: 14px; text-align: start; font: 400 13px / 19.5px Poppins, sans-serif; border: 1px solid rgb(244, 244, 244); width: 328px; height: 48px; display: none;">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

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

      <div class="box box-solid bg_dark hide" id="idStepsTwo">
        <div class="box-header with-border">
          <div class="row align-items-center">
            <div class="col-6">
              <h4 class="box-title">Samples</h4>
            </div>
            <div class="col-6 text-right" id="idSampleBtnPrintAll">
            </div>
          </div>
        </div>
        <div class="box-body">
          <div class="row" id="idGenerateStikers">

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

    <div class="modal fade" id="idModalSelectedLubricant" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Select lubricant</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 id="formLubricant">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="idSelectedLubricant" class="control-label">Lubricant *</label>
                    <select class="form-control hg_select select2" id="idSelectedLubricant">
                      <option value="">Select an lubricant</option>
                      @foreach ($lubricants as $lubricant)
                        <option value="{{$lubricant->id}}">{{$lubricant->name}} ({{$lubricant->getLubWeight->name}})</option>
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>
            </form>
            <div class="row">
              <div class="col-md-12">
                <button type="button" class="btn btn_admin btn-block" onclick="sendLubricant()">
                  <i class="fa fa-floppy-o"></i> Guardar cambios
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="idInfoPreviousSample" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="mySmallModalLabel">Last Information</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6">
                <h5>H. Machine</h5>
              </div>
              <div class="col-md-6">
                <h5><b class="font-weight-bold" id="idInfoOilMachine"></b></h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <h5>Oil Time</h5>
              </div>
              <div class="col-md-6">
                <h5><b class="font-weight-bold" id="idInfoOilTime"></b></h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <h5>Oil Change</h5>
              </div>
              <div class="col-md-6">
                <h5><b class="font-weight-bold" id="idInfoOilChange"></b></h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <h5>Sample Date</h5>
              </div>
              <div class="col-md-6">
                <h5><b class="font-weight-bold" id="idSampleDate"></b></h5>
              </div>
            </div>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
    </div>

    <div class="modal fade" id="idLabTestSample" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="idNameSystemType"></h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              <i class="fa fa-times"></i>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label class="control-label">Muestras *</label>
                  <div class="testSystemType">
                    <div class="row" id="idListLabTests">

                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <button type="button" onclick="updateLabTest()" class="btn btn_admin btn-block"><i class="fa fa-floppy-o"></i> Guardar</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="idModalSample" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
  					<h4 class="modal-title" id="myModalLabel">Sample</h4>
  					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              <i class="fa fa-times"></i>
            </button>
  				</div>
          <div class="modal-body">
            <div class="box">
              <div class="col-12">
                <div class="row border" id="idContentSampleSOS">
                    <h2 class="text-center mx-auto">ID SAMPLE: <b id="idModalSampleOneSampleId"></b></h2>
                  <div class="col-9">
                    <table class="table mt-4" style="border: 7px solid #c90114;">
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Customer</b></th>
                        <td class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleOneCustomer"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Unit ID</b></th>
                        <td class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleOneUnitId"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Component</b></th>
                        <td class="m-1 p-1" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleOneComponent"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Date Received</b></th>
                        <td class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleOneDateReceived"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Lubricant</b></th>
                        <td class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleOneLubricant"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Lub Weight</b></th>
                        <td class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleOneOilWeight"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Items</b></th>
                        <td class="m-1 p-1 text-nowrap" id="idModalSampleOneTest" style="font-size: 15px; font-family: 'Arial Black'; color: black">
                        </td>
                      </tr>
                    </table>
                  </div>
                  <div class="col-3 my-auto mx-auto">
                    {{-- <img src="{{ asset('assets/images/etiquetasos.jpg')}}"> --}}
                    <div id="idSampleQrSos"></div>
                  </div>
                </div>
                <div class="row border" id="idContentSample">
                    <h2 class="text-center mx-auto">ID SAMPLE: <b id="idModalSampleTwoSampleId"></b></h2>
                  <div class="col-9">
                    <table class="table mt-4" style="border: 7px solid #000;">
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Customer</b></th>
                        <td class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleTwoCustomer"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Unit ID</b></th>
                        <td class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleTwoUnitId"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Component</b></th>
                        <td class="m-1 p-1" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleTwoComponent"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Date Received</b></th>
                        <td class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleTwoDateReceived"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Lubricant</b></th>
                        <td class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleTwoLubricant"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Lub Weight</b></th>
                        <td class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b class="font-weight-bold" id="idModalSampleTwoOilWeight"></b></td>
                      </tr>
                      <tr>
                        <th class="m-1 p-1 text-nowrap" style="font-size: 15px; font-family: 'Arial Black'; color: black" ><b>Items</b></th>
                        <td class="m-1 p-1 text-nowrap" id="idModalSampleTwoTest" style="font-size: 15px; font-family: 'Arial Black'; color: black" >
                        </td>
                      </tr>
                    </table>
                  </div>
                  <div class="col-3 my-auto mx-auto">
                    {{-- <img src="{{ asset('assets/images/etiqueta.jpg')}}"> --}}
                    <div id="idSampleQr"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div id="idSampleBtnPrint">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  @endsection

  @section('js')
    <script src="{{asset('assets/minimalpro/js/jquery-ui.js')}}"></script>
    <script src="{{asset('assets/plugins/JsBarcode/dist/JsBarcode.all.min.js')}}"></script>
    <script src="{{asset('assets/plugins/JsBarcode/dist/barcodes/JsBarcode.code128.min.js')}}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

    <script type="text/javascript">
      var valueUnitId = null;

      var horometer = 0;
      var serialComponent = null;
      var sampleDateTaken = '{{date("Y-m-d")}}';
      var sampleDateReceived = '{{date("Y-m-d")}}';

      var components = [];
      var componentsSelected = [];

      var componentsArr = [];

      var tests = [];

      $(document).ready(function() {

        $('.customerItem').on('click', function(){
          $('.dropContainer').text($(this).text())
          $('.dropContainer').attr('id', $(this).attr('id'))
          $('#idUnitId').attr('disabled', false)
        })

        $('.select2').select2({
          placeholder: "Select an option",
          language: {
            noResults: function (params) {
              return "No se encontraron resultados";
            }
          }
        });

        $("#idInputHorometer").prop('disabled', true);
        $("#idFilterSelected").prop('disabled', true);
        
        // Manejar cambio de modo de horómetro
        $('input[name="horometerMode"]').on('change', function() {
          var mode = $(this).val();
          if (mode === 'general') {
            // Modo general
            $('#idGeneralHorometerSection').removeClass('hide');
            $('#idIndividualHorometerSection').addClass('hide');
            $('#thHorometerIndividual').addClass('hide');
            $('.td-horometer-individual').addClass('hide');
            $('#idInputHorometer').prop('disabled', false);
          } else {
            // Modo individual
            $('#idGeneralHorometerSection').addClass('hide');
            $('#idIndividualHorometerSection').removeClass('hide');
            $('#thHorometerIndividual').removeClass('hide');
            $('.td-horometer-individual').removeClass('hide');
            $('#idInputHorometer').prop('disabled', true);
            $('#idInputHorometer').val('');
            horometer = 0;
          }
        });
      });
      $(".wizardSteps").steps({
        headerTag: "h6",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        titleTemplate: '<span class="step">#index#</span> #title#',
        labels: {
          previous: "Anterior",
          next: "Siguiente",
          finish: "Enviar muestras"
        },
        onStepChanging: function (event, currentIndex, newIndex) {
          switch (newIndex) {
            case 0:
              return true;
              break;
            case 1:
              var vldtOne = validateOne();
              if (vldtOne) {return true;}else{return false;}
              break;
            default:
              return false;
          }
          return true;
        },
        onFinished: function (event, currentIndex) {
          if ($.isEmptyObject(componentsArr)) {
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            return false;
          }

          $.each(componentsArr, function( y, itemCp){
            var cpSampleDateTaken = $("#idSampleDateTaken_"+y).val();
            var cpHorometerComp = $("#idHorometerComp_"+y).val();
            var cpOilTime = $("#idOilTime_"+y).val();
            itemCp['sampleDateTaken'] = cpSampleDateTaken;
            itemCp['horometerComponent'] = cpHorometerComp;
            itemCp['oilTime'] = cpOilTime;
          });

          sendInfo();
        }
      });
    </script>
    <script type="text/javascript">

      $('#idUnitId').on('keyup', function(e){
        if (e.keyCode == 13) {
          search()
        }
      })

        // Seleccionar / deseleccionar todos
        $('#checkAll').on('change', function () {
            $('.chk-select').prop('checked', this.checked).trigger('change');
        });
        // Cuando se marca/desmarca un checkbox individual
        $(document).on('change', '.chk-select', function () {
            const total = $('.chk-select').length;
            const checked = $('.chk-select:checked').length;

            // Si todos están seleccionados → marcar "Seleccionar todo"
            // Si falta al menos uno → desmarcarlo
            $('#checkAll').prop('checked', total > 0 && total === checked);
        });


      function search(unit) {
        $('#checkAll').prop('disabled', true).prop('checked', false);
        var unitId = unit || $("#idUnitId").val();
        components = [];
        componentsSelected = [];
        tests = [];

        valueUnitId = null;
        $("#idInfoHead").fadeOut();
        $("#idTableOneReception").empty();

        var urlPath = urlHost + "/administrator/samples/search";
        $.ajax({
          type: 'POST',
          url: urlPath,
          data: {
            "unit_id": unitId
          },
          dataType: 'json',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          beforeSend:function(){
            // $('#loader_content').removeClass('hidden');
            $(".content_loading").fadeIn("slow");
          },
          success:function(response){
            $(".content_loading").fadeOut("slow");
            if (response.state == 1) {

              $("#idInputHorometer").prop('disabled', false);
              $("#idInputHorometer").val(null);
              $("#idFilterSelected").prop('disabled', false);
              $("#idFilterSelected").val(null).trigger('change.select2');

              valueUnitId = response.data.head.unit_id;

              $("#idOneAccount").html(response.data.head.fleet);
              $("#idOneUnitId").html(response.data.head.unit_id);
              $("#idOneMake").html(response.data.head.make);
              $("#idOneModel").html(response.data.head.model);
              $("#serialComponent").val(response.data.head.model);
              $("#idOneCustomer").html(response.data.head.name);

              $("#idTwoAccount").html(response.data.head.fleet);
              $("#idTwoUnitId").html(response.data.head.unit_id);
              $("#idTwoMake").html(response.data.head.make);
              $("#idTwoModel").html(response.data.head.model);
              $("#idTwoCustomer").html(response.data.head.name);

              components = response.data.components;

              $.each(response.data.components, function(index, component){
                $("#idTableOneReception").append('<tr class="filterAll filterLubricant_'+component.get_lubricant.category+'">'+
                  '<td>'+(index+parseInt(1))+'</td>'+
                  '<td>'+component.get_component_location.name+'</td>'+
                  '<td class="text-center">'+
                    '<input type="checkbox" class="chk-select" onchange="checkedComponent(this)" data-id="'+index+'" id="basic_checkbox_'+index+'"><label for="basic_checkbox_'+index+'" class="checkLabel"></label>'+
                  '</td>'+
                  '<td class="text-center td-horometer-individual hide">'+
                    '<input type="text" id="idInputHorometerIndividual_'+index+'" class="form-control input-number" placeholder="Horometer" onkeyup="calculateIndividualOilTime('+index+')">'+
                  '</td>'+
                  '<td class="text-nowrap">'+
                    '<a href="javascript:;" onclick="openListLubricant('+index+')"><b id="idOneReceptionReference_'+index+'" class="font-weight-bold">' + component.get_lubricant.name + '</b></a>'+
                  '</td>'+
                  '<td id="idOneReceptionWeight_'+index+'">' + component.get_lubricant.get_lub_weight.name + '</td>'+
                  '<td class="text-center">'+
                    '<a class="btn btn-info btn-sm" onclick="infoPreviousSample('+index+')"><i class="fa fa-eye text-white"></i></a>'+
                  '</td>'+
                  '<td>'+
                    '<input type="text" id="idInputOilTime_'+index+'" class="form-control input-number" value="0" disabled>'+
                  '</td>'+
                  '<td class="text-center">'+
                    '<a class="btn btn-info btn-sm text-white" onclick="laboratoryTest('+index+')"><i class="fa fa-list"></i> Tests</a>'+
                  '</td>'+
                  '<td class="text-center">'+
                    '<input type="checkbox" id="idOilChange_'+index+'" class="chk-col-deep-blue mycheck">'+
                    '<label for="idOilChange_'+index+'" class="checkLabel"></label>'+
                  '</td>'+
                  '<td class="text-center">'+
                    '<input type="checkbox" id="idFilterChange_'+index+'" class="chk-col-deep-blue mycheck">'+
                    '<label for="idFilterChange_'+index+'" class="checkLabel"></label>'+
                  '</td>'+
                  '<td class="text-center">'+
                    '<input type="checkbox" id="idLubricantRefill_'+index+'" class="chk-col-deep-blue mycheck" onchange="toggleRefillAmount('+index+')">'+
                    '<label for="idLubricantRefill_'+index+'" class="checkLabel"></label>'+
                  '</td>'+
                  '<td class="text-center">'+
                    '<input type="number" step="0.1" min="0.1" id="idRefillAmount_'+index+'" class="form-control" placeholder="0.0 gal" disabled>'+
                  '</td>'+
                  '<td class="text-center">'+
                    '<button type="button" class="btn btn-toggle btn-danger" id="idSos_'+index+'" data-toggle="button" aria-pressed="true" style="margin-left: 0px;margin-right: 0px;">'+
                      '<div class="handle"></div>'+
                    '</button>'+
                  '</td>'+
                '</tr>');

                testArray = [];
                $.each(component.get_system_type.get_test_system_type, function( index, labTests ){
                  testArray.push(labTests.id_test_method);
                });
                tests[index] = testArray;
              });

              // Habilitar o deshabilitar "Seleccionar todo"
                if (response.data.components.length > 0) {
                $('#checkAll').prop('disabled', false).prop('checked', false);
                } else {
                $('#checkAll').prop('disabled', true).prop('checked', false);
                }

              console.log(tests);

              $("#idInfoHead").fadeIn();
            }else if (response.state == 2) {
              swal("Oops!", response.message, "warning");
            }else{
              swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
          },
          error: function(xhr){
            $(".content_loading").fadeOut("slow");
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        });
      }

      function sampleDate(varDate){
        return varDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/g,'$3/$2/$1');
      }

      function filterLubricant(value) {
          console.log(value);

        if (value!="") {
          $(".filterAll").fadeOut();
          $(".filterLubricant_"+value).fadeIn();
          if(value=="13"){
                console.log('hola');
            $('.mycheck').attr('disabled',true);
          }
        }else{
          $(".filterAll").fadeIn();
        }
      }

      // Función para aplicar el mismo horómetro a todos los componentes (modo individual)
      function applyBulkHorometer() {
        var bulkValue = $("#idBulkHorometer").val();
        if (!bulkValue || bulkValue <= 0) {
          swal("Oops!", "Debe ingresar un valor válido de horómetro", "warning");
          return false;
        }
        
        $.each(components, function(index, component){
          $("#idInputHorometerIndividual_"+index).val(bulkValue);
          calculateIndividualOilTime(index);
        });
        
        swal("Éxito!", "Se aplicó el horómetro a todos los componentes", "success");
      }

      // Función para calcular Oil Time individual cuando se ingresa horómetro por componente
      function calculateIndividualOilTime(index) {
        var individualHorometer = $("#idInputHorometerIndividual_"+index).val();
        if (!individualHorometer || individualHorometer == '') {
          $("#idInputOilTime_"+index).val(0);
          return;
        }
        
        var component = components[index];
        var infoComp = component.info;
        
        if (infoComp.first) {
          $("#idInputOilTime_"+index).val(individualHorometer);
        } else {
          if (infoComp.oil_change=="true") {
            var varOilTime = parseInt(individualHorometer) - parseInt(infoComp.horometer);
            $("#idInputOilTime_"+index).val(varOilTime);
          } else {
            var varOilTime = parseInt(individualHorometer) - parseInt(infoComp.horometer);
            var varOilTimePlus = parseInt(varOilTime) + parseInt(infoComp.oil_time);
            $("#idInputOilTime_"+index).val(varOilTimePlus);
          }
        }
      }

      $("#idInputHorometer").keyup(function() {
        $("#idTwoHorometerMachine").html(this.value + ' H');
        horometer = this.value;
        $.each(components, function(index, component){
          console.log(component);
          var infoComp = component.info;
          if (infoComp.first) {
            $("#idInputOilTime_"+index).val(horometer);
          }else{
            if (infoComp.oil_change=="true") {
              var varOilTime = (horometer - infoComp.horometer);
              $("#idInputOilTime_"+index).val(varOilTime);
            }else{
              var varOilTime = infoComp.oil_time + (horometer - infoComp.horometer);
              $("#idInputOilTime_"+index).val(varOilTime);
            }
          }
        });
      });

      //calculate component horometer
      function calculateCH(horometer, prevHorometer, horometerComponent) {
        var valH = parseInt(horometer) - parseInt(prevHorometer);
        if (parseInt(valH)>0) {
          var result = parseInt(valH) + parseInt(horometerComponent);
        }else {
          var result = parseInt(horometerComponent);
        }
        return result;
      }

      $("#idInputSampleDateTaken").change(function() {
        sampleDateTaken = this.value;
      });

      $("#idInputSampleDateReceivedAtLab").change(function() {
        $("#idTwoSampleDateReceived").html(sampleDate(this.value));
        sampleDateReceived = this.value;
      });

      function checkedComponent(ind) {
        var index = $(ind).data("id");

        if ($(ind).is(':checked')) {
            if (!componentsSelected.includes(index)) {
                componentsSelected.push(index);
            }
        } else {
            componentsSelected = componentsSelected.filter(function (i) {
                return i !== index;
            });
        }
        componentsSelected.sort(function (a, b) {
            return a - b;
        });
        console.log(componentsSelected);
     }


      function toggleRefillAmount(index) {
        var refillCheckbox = $("#idLubricantRefill_" + index);
        var refillAmountInput = $("#idRefillAmount_" + index);

        if (refillCheckbox.is(':checked')) {
          refillAmountInput.prop('disabled', false);
          refillAmountInput.prop('required', true);
          refillAmountInput.focus();
        } else {
          refillAmountInput.prop('disabled', true);
          refillAmountInput.prop('required', false);
          refillAmountInput.val('');
        }
      }

      function toggleRefillAmount(index) {
        var refillCheckbox = $("#idLubricantRefill_" + index);
        var refillAmountInput = $("#idRefillAmount_" + index);
        
        if (refillCheckbox.is(':checked')) {
          refillAmountInput.prop('disabled', false);
          refillAmountInput.prop('required', true);
          refillAmountInput.focus();
          
          // Agregar eventos de redondeo
          refillAmountInput.off('blur keypress').on('blur', function() {
            roundRefillAmount($(this));
          }).on('keypress', function(e) {
            if (e.which === 13) { // Enter key
              e.preventDefault();
              roundRefillAmount($(this));
            }
          });
        } else {
          refillAmountInput.prop('disabled', true);
          refillAmountInput.prop('required', false);
          refillAmountInput.val('');
        }
      }

      function roundRefillAmount(input) {
        var value = parseFloat(input.val());
        if (!isNaN(value) && value > 0) {
          input.val(value.toFixed(1));
        }
      }

      var selectLubricant = null;
      function openListLubricant(id) {
        selectLubricant = id;
        $("#formLubricant")[0].reset();
        $("#idModalSelectedLubricant").modal();
      }

      function sendLubricant() {
        var lubricantId = $("#idSelectedLubricant").val();
        var componentId = components[selectLubricant]['id'];

        $.ajax({
          type: 'POST',
          url: '/administrator/samples/lubricant',
          data: {
            "id": lubricantId,
            "component_id": componentId
          },
          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 (response.state == 1) {
              componentsSelected = [];

              components[selectLubricant]['get_lubricant'] = response.data.lubricant;
              components[selectLubricant]['lubricant'] = response.data.lubricant.id;

              $("#idOneReceptionReference_"+selectLubricant).html(response.data.lubricant.name);
              $("#idOneReceptionWeight_"+selectLubricant).html(response.data.lubricant.get_lub_weight.name);

              $("#idModalSelectedLubricant").modal("hide");
            }else if (response.state == 2) {
              swal("Oops!", response.message, "warning");
            }else{
              swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
          },
          error: function(xhr){
            $(".content_loading").fadeOut("slow");
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        });
      }

      function infoPreviousSample(index) {
        var data = components[index];
        if (!data.info.first) {
          if (data.info.oil_change=="true") {$("#idInfoOilChange").html("SI");}else{$("#idInfoOilChange").html("NO");}

          $("#idInfoOilMachine").html(data.info.horometer);
          $("#idInfoOilTime").html(data.info.oil_time);
          $("#idSampleDate").html(sampleDate(data.info.sample_date));


          $("#idInfoPreviousSample").modal();
        }else{
          swal("Oops!", "Este component location no tiene muestras anteriores", "warning");
        }
      }

      var componentPositionTest = null;
      function laboratoryTest(index) {
        var data = components[index];
        componentPositionTest = index;
        $("#idListLabTests").empty();

        var nameSystemType = data.get_system_type.name;
        $("#idNameSystemType").html(nameSystemType);

        $.each(data.get_system_type.get_test_system_type, function(index, listTest){
          $("#idListLabTests").append('<div class="col-md-6">'+
            '<input type="checkbox" value="'+listTest.id_test_method+'" id="checkedTest_'+listTest.id_test_method+'"><label for="checkedTest_'+listTest.id_test_method+'">'+listTest.get_test_method.name+'</label>'+
          '</div>');
        });

        var listTestChecked = tests[index];
        console.log(listTestChecked);
        $.each(listTestChecked, function(index, testCheck){
          $("#checkedTest_"+testCheck).prop('checked', true);
        });

        $("#idLabTestSample").modal();
      }

      function updateLabTest() {
        var data = components[componentPositionTest];

        var testArray = [];
        $.each(data.get_system_type.get_test_system_type, function( index, testCheck ){
          if ($("#checkedTest_"+testCheck.id_test_method).is(':checked')) {
            testArray.push(testCheck.id_test_method);
          }
        });

        tests[componentPositionTest] = testArray;
        $("#idLabTestSample").modal('hide');
      }

      function validateOne() {
        console.log(components);
        console.log(componentsSelected);
        console.log(componentsArr);
        componentsArr = [];
        serialComponent = $('#serialComponent').val();
        
        if (valueUnitId==null) {
          swal("Oops!", "Debe buscar un equipo", "warning");
          return false;
        }

        // Validar según el modo de horómetro
        var horometerMode = $('input[name="horometerMode"]:checked').val();
        
        if (horometerMode === 'general') {
          // Validación modo general
          if (horometer==0 || sampleDateTaken==null || sampleDateReceived==null) {
            swal("Oops!", "Debe enviar los datos correctamente", "warning");
            return false;
          }
        } else {
          // Validación modo individual
          if (sampleDateTaken==null || sampleDateReceived==null) {
            swal("Oops!", "Debe enviar las fechas correctamente", "warning");
            return false;
          }
          
          // Validar que cada componente seleccionado tenga horómetro
          var missingHorometer = false;
          var missingComponents = [];
          $.each(componentsSelected, function(p, item){
            var individualHorometer = $("#idInputHorometerIndividual_"+item).val();
            if (!individualHorometer || individualHorometer == '' || individualHorometer <= 0) {
              missingHorometer = true;
              missingComponents.push(components[item].get_component_location.name);
            }
          });
          
          if (missingHorometer) {
            swal("Oops!", "Debe ingresar un horómetro válido para: " + missingComponents.join(', '), "warning");
            return false;
          }
        }

        if ($.isEmptyObject(componentsSelected)) {
          swal("Oops!", "Debe escoger por lo menos un component location", "warning");
          return false;
        }

        $("#idTwoSampleDateReceived").html(sampleDateReceived);

        $("#idTableTwoReception").empty();

        var dateMax = "{{date('Y-m-d')}}";

        var compSelected = true;
        var nameSelected = "";
        
        if (horometerMode === 'general' && !$("#idChangeHorometer").is(':checked')) {
          $.each(componentsSelected, function(p, item){
            var data = components[item];
            var itemOilTime = $("#idInputOilTime_"+item).val();
            if (itemOilTime<0) {
              if (compSelected) {
                nameSelected = data.get_component_location.name;
              }else{
                nameSelected = nameSelected + ', ' + data.get_component_location.name;
              }
              compSelected = false;
            }
          });
          
          if (!compSelected) {
            swal("Oops!", "El horometro es incorrecto para el componente "+nameSelected, "warning");
            return false;
          }
        }

        // Validar rellenos de lubricante antes de procesar
        var refillError = false;
        var refillErrorMessage = "";
        $.each(componentsSelected, function(p, item){
          var data = components[item];
          if($("#idLubricantRefill_"+item).is(':checked')) {
            var refillAmount = $("#idRefillAmount_"+item).val();
            if (!refillAmount || parseFloat(refillAmount) <= 0) {
              refillErrorMessage = "Debe ingresar una cantidad válida de lubricante para el relleno en " + data.get_component_location.name;
              refillError = true;
              return false;
            }
          }
        });

        if (refillError) {
          swal("Oops!", refillErrorMessage, "warning");
          return false;
        }

        // Validar rellenos de lubricante antes de procesar
        var refillError = false;
        var refillErrorMessage = "";
        $.each(componentsSelected, function(p, item){
          var data = components[item];
          if($("#idLubricantRefill_"+item).is(':checked')) {
            var refillAmount = $("#idRefillAmount_"+item).val();
            if (!refillAmount || parseFloat(refillAmount) <= 0) {
              refillErrorMessage = "Debe ingresar una cantidad válida de lubricante para el relleno en " + data.get_component_location.name;
              refillError = true;
              return false;
            }
          }
        });

        if (refillError) {
          swal("Oops!", refillErrorMessage, "warning");
          return false;
        }

        $.each(componentsSelected, function( i, item){
          var data = components[item];
          var testsData = tests[item];

          // Obtener el horómetro según el modo seleccionado
          var horometerMode = $('input[name="horometerMode"]:checked').val();
          var itemHorometer = horometer; // Por defecto, modo general
          if (horometerMode === 'individual') {
            itemHorometer = $("#idInputHorometerIndividual_"+item).val();
          }

          var itemOilTime = $("#idInputOilTime_"+item).val();
          if($("#idFilterChange_"+item).is(':checked')) {var itemFilterChange = true;}else{var itemFilterChange = false;}
          if($("#idOilChange_"+item).is(':checked')) {var itemOilChange = true;}else{var itemOilChange = false;}
          if($("#idSos_"+item).hasClass("active")) {var itemSos = true;}else{var itemSos = false;}
          if($("#idLubricantRefill_"+item).is(':checked')) {var itemLubricantRefill = true;}else{var itemLubricantRefill = false;}
          var itemRefillAmount = itemLubricantRefill ? $("#idRefillAmount_"+item).val() : 0;
          console.log('----------COMPONENT----------');
          console.log(data);
          var itemComponent = {
            "componentId": data.component_location,
            "componentName": data.get_component_location.name,
            "lubricantId": data.lubricant,
            "lubricantName": data.get_lubricant.name,
            "sampleDateTaken": sampleDateTaken,
            "sampleDateReceived": sampleDateReceived,
            "horometer": itemHorometer,
            "serialComponent": serialComponent,
            "oilTime": itemOilTime,
            "oilChange": itemOilChange,
            "filterChange": itemFilterChange,
            "lubricantRefill": itemLubricantRefill,
            "refillAmount": itemRefillAmount,
            "sos": itemSos,
            "info": data.info,
            "tests": testsData
          };
          componentsArr.push(itemComponent);

          var horometerComp = calculateCH(itemHorometer, data.info.horometer, data.info.horometer_component);

          var itemDateReceived = sampleDate(sampleDateReceived);
          if (itemOilChange) {var txtOilChange = "SI"}else{var txtOilChange = "NO"}
          if (itemFilterChange) {var itemFilterChange = "SI"}else{var itemFilterChange = "NO"}
          if (itemLubricantRefill) {var txtLubricantRefill = "SI"}else{var txtLubricantRefill = "NO"}
          var txtRefillAmount = itemLubricantRefill ? parseFloat(itemRefillAmount).toFixed(1) + " gal" : "N/A";
          console.log("FECHA SDT: " + sampleDateTaken);

          $("#idTableTwoReception").append('<tr>'+
            '<td tabindex="1">'+data.get_component_location.name+'</td>'+
            '<td tabindex="1">'+data.get_lubricant.name+'</td>'+
            '<td tabindex="1"><input type="date" max="'+dateMax+'" value="'+sampleDateTaken+'" id="idSampleDateTaken_'+i+'"></td>'+
            '<td tabindex="1">'+itemDateReceived+'</td>'+
            '<td tabindex="1"><input type="text" value="'+horometerComp+'" id="idHorometerComp_'+i+'" class="input-number wth-100"></td>'+
            '<td tabindex="1"><input type="text" value="'+itemOilTime+'" id="idOilTime_'+i+'" class="input-number wth-100"></td>'+
            '<td tabindex="1">'+txtOilChange+'</td>'+
            '<td tabindex="1">'+itemFilterChange+'</td>'+
            '<td tabindex="1">'+txtLubricantRefill+'</td>'+
            '<td tabindex="1">'+txtRefillAmount+'</td>'+
          '</tr>');
        });

        return true;
      }

      function sendInfo() {
        var urlPath = urlHost + "/administrator/samples/send";
        $.ajax({
          type: 'POST',
          url: urlPath,
          data: {
            "unit_id": valueUnitId,
            "components": componentsArr
          },
          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 (response.state == 1) {
              swal({
                  title: "Bien!",
                  text: response.message,
                  type: "success",
              }, function(){
                generateStikers(response.data.samples);
              });
            }else if (response.state == 2) {
              swal("Oops!", response.message, "warning");
            }else{
              swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
          },
          error: function(xhr){
            $(".content_loading").fadeOut("slow");
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        });
      }

      var samples = [];
      function generateStikers(data) {
        samples = [];
        samples = data;
        console.log('-----------------........................--------------------');
        console.log(data);
        console.log('-----------------........................--------------------');
        var route = "/administrator/samples/download/"+data[0].lot;
        $("#idSampleBtnPrintAll").html('<a href="'+route+'" target="_blank" class="btn btn-info"><i class="fa fa-download"></i> Imprimir todos</a>');

        $("#idGenerateStikers").empty();
        $.each(data, function( y, itemCp){

          var itemSampleDateTaken = new Date(itemCp.sample_date_taken);
          var twoSampleDateTaken = itemSampleDateTaken.toLocaleDateString();

          var itemSampleDateReceived = new Date(itemCp.sample_date_received);
          var twoSampleDateReceived = itemSampleDateReceived.toLocaleDateString();

          if (itemCp.oil_change=="true") {var twoOilChange = "SI";}else{var twoOilChange = "NO";}
          if (itemCp.sos=="true") {var twoSOS = "SI";}else{var twoSOS = "NO";}

          $("#idGenerateStikers").append('<div class="col-md-6 col-lg-4">'+
            '<div class="box box-slided-up">'+
              '<div class="box-header with-border">'+
                '<h5 class="box-title"><strong>'+itemCp.component+'</strong></h5>'+
                '<ul class="box-controls pull-right">'+
                  '<li><a class="box-btn-slide" href="#"></a></li>'+
                '</ul>'+
              '</div>'+
              '<div class="box-content">'+
                '<div class="box-deck">'+
                  '<div class="box">'+
                    '<table class="table table-sm">'+
                      '<tr>'+
                        '<th>Customer</th>'+
                        '<td>'+itemCp.get_customer.company+'</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<th>Unit ID</th>'+
                        '<td>'+itemCp.code+'</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<th>Component</th>'+
                        '<td>'+itemCp.component+'</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<th>Date Received</th>'+
                        '<td>'+twoSampleDateReceived+'</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<th>Lubricant</th>'+
                        '<td>'+itemCp.lubricant+'</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<th>Lub Weight</th>'+
                        '<td>'+itemCp.oil_weight+'</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<th>SOS</th>'+
                        '<td>'+twoSOS+'</td>'+
                      '</tr>'+
                    '</table>'+
                    '<div class="mx-auto text-center">'+
                      '<ul class="list-inline" id="idListTest_'+y+'">'+
                      '</ul>'+
                    '</div>'+
                    '<a href="javascript:;" onclick="openModalSample('+y+')">'+
                      '<div class="box-body">'+
                        '<div class="col-12 text-center">'+
                          '<div id="idStiker_'+y+'"></div>'+
                        '</div>'+
                      '</div>'+
                    '</a>'+
                  '</div>'+
                '</div>'+
              '</div>'+
            '</div>'+
          '</div>');

          $("#idListTest_"+y).empty();
          $.each(itemCp.get_tests, function( x, getTest){
            $("#idListTest_"+y).append('<li class="list-inline-item">'+
              '<input type="checkbox" id="basic_checkbox_'+y+'">'+
              '<label for="basic_checkbox_'+y+'">'+getTest.get_test.name+'</label>'+
            '</li>');
          });

            $("#idStiker_" + y).empty();

            var qrcode = new QRCode(document.getElementById("idStiker_"+y), {
                text: itemCp.code,
                width: 128,
                height: 128,
                colorDark : "#000000",
                colorLight : "#ffffff",
                correctLevel : QRCode.CorrectLevel.H
            });
            console.log(qrcode);
        });

        $("#idStepsOne").hide();
        $("#idStepsTwo").fadeIn();
      }

      function openModalSample(index) {
        var data = samples[index];
        $("#idContentSampleSOS").hide();
        $("#idContentSample").hide();

        var indexSampleDateReceived = new Date(data.sample_date_received);
        var modalDateReceived = indexSampleDateReceived.toLocaleDateString();

        if (data.sos=="true") {
          var contentIdTest = "idModalSampleOneTest";
          $("#idContentSampleSOS").show();

          $("#idModalSampleOneCustomer").html(data.get_customer.company);
          $("#idModalSampleOneSampleId").html(data.code);
          $("#idModalSampleOneUnitId").html(valueUnitId);
          $("#idModalSampleOneComponent").html(data.component);
          $("#idModalSampleOneDateReceived").html(modalDateReceived);
          $("#idModalSampleOneLubricant").html(data.lubricant);
          // $("#idModalSampleOneOilReference").html(data.oil_reference);
          $("#idModalSampleOneOilWeight").html(data.oil_weight);

          const qrContainerSos = document.getElementById("idSampleQrSos");
            qrContainerSos.innerHTML = "";
            new QRCode(qrContainerSos, {
                text: String(data.code),
                width: 150,
                height: 150,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        }else{
          var contentIdTest = "idModalSampleTwoTest";
          $("#idContentSample").show();

          $("#idModalSampleTwoCustomer").html(data.get_customer.company);
          $("#idModalSampleTwoSampleId").html(data.code);
          $("#idModalSampleTwoUnitId").html(valueUnitId);
          $("#idModalSampleTwoComponent").html(data.component);
          $("#idModalSampleTwoDateReceived").html(modalDateReceived);
          $("#idModalSampleTwoLubricant").html(data.lubricant);
          // $("#idModalSampleTwoOilReference").html(data.oil_reference);
          $("#idModalSampleTwoOilWeight").html(data.oil_weight);

            const qrContainer = document.getElementById("idSampleQr");
            qrContainer.innerHTML = "";
            new QRCode(qrContainer, {
                text: String(data.code),
                width: 150,
                height: 150,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        }

        $("#"+contentIdTest).empty();
        $.each(data.get_tests, function( y, getTest){
          $("#"+contentIdTest).append('<input type="checkbox" id="basic_checkbox_'+y+'">'+
            '<label for="basic_checkbox_'+y+'" class="pddChecked">'+getTest.get_test.name+'</label>');
        });

        var route = "/administrator/samples/print/"+data.code;
        $("#idSampleBtnPrint").html('<a href="'+route+'" target="_blank" class="btn btn-info btn-block"><i class="fa fa-print"></i> Imprimir PDF</a>');

        $("#idModalSample").modal();
      }

    </script>
    <script>
      $(document).ready(function() {
        $( "#idUnitId" ).autocomplete({

          source: function(request, response) {
            $.ajax({
              url: "{{route('autocomplete')}}",
              data: {
                customer_id : $('.dropContainer').attr('id'),
                term : request.term
              },
              dataType: "json",
              success: function(data){
                var resp = $.map(data,function(obj){
                  //console.log(obj);
                  return obj.unit_id;
                });
                //console.log(resp);
                response(resp);
              }
            });
          },
          minLength: 1,
          select:  function(ev, ui){
            search(ui.item.value)
          }
        });
      });
    </script>
  @endsection