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

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

      <section class="content">
         @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
               {{session('success')}}
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>
         @endif
         @if(session('danger'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
               {{session('danger')}}
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>
         @endif

         <div id="boxfilter" class="box box-solid bg_dark hide">
            <div class="box-header with-border">
               <div class="row align-items-center">
                  <div class="col-12">
                     <h4 class="box-title">Busqueda</h4>
                  </div>
               </div>
            </div>
            <div class="box-body">
               <form id="idSearchFilter">
                  <div class="row">
                     <div class="col-md-3">
                        <div class="form-group">
                           <label for="sampleID" class="control-label">Sample ID</label>
                           <input type="text" class="form-control pull-right" id="sampleID" name="sampleID" autocomplete="off">
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group">
                           <label for="idFluidType" class="control-label">Tipo de Fluido</label>
                           <select class="form-control select2" id="idFluidType" name="fluid_type">
                              <option value="">TODOS</option>
                              @foreach ($fluidTypes as $fluidType)
                                 <option value="{{$fluidType->id}}">{{$fluidType->name}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group">
                           <label for="idCustomer" class="control-label">Customer</label>
                           <select class="form-control select2" id="idCustomer" name="customer">
                              <option value="">Todos</option>
                              @foreach ($customers as $item)
                                 <option {{request()->customer==$item->id?'selected ':' '}} value="{{$item->id}}">{{$item->company}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group">
                           <label for="idAccount" class="control-label">Account</label>
                           <select class="form-control select2 selectAccount" id="idAccount" name="account">
                              <option value="">Todos</option>
                              @foreach ($accounts as $account)
                                 <option value="{{$account->id}}">{{$account->name}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="unitId" class="control-label">Unit ID</label>
                           <select class="form-control select2" id="unitId" name="unitId">
                              <option value="">Todos</option>
                           </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">
                              <option value="">Todos</option>
                              @foreach ($components as $component)
                                 <option value="{{$component->id}}">{{$component->name}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group">
                           <label for="idSos" class="control-label">SOS</label>
                           <select class="form-control select2" id="idSos" name="sos">
                              <option value="">Todos</option>
                              <option value="true">SOS</option>
                              <option value="false">Estandar</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6">
                        <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-6">
                        <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>
                  <div class="row">
                     <div class="col-md-6 text-left">
                        <a href="{{route('administrator.history.index')}}" class="btn btn-danger"><i class="fa fa-refresh" aria-hidden="true"></i> Limpiar</a>
                     </div>
                     <div class="col-md-6 text-right">
                        <button type="button" id="idBtnSearchData" class="btn btn-info"><i class="fa fa-search" aria-hidden="true"></i> Buscar</button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
         <div class="box">
            <div class="box-header with-border">
               <div class="row align-items-center">
                  <div class="col-6">
                     <h4 class="box-title">Historial</h4>
                  </div>
                  <div class="col-6">
                     <div class="box-controls pull-right">
                        <div class="box-header-actions">
                           {{-- <button type="button" class="btn btn-sm btn-success" onclick="exportInfo()"><i class="fa fa-download"></i> Exportar</button> --}}
                           <button type="button" class="btn btn-sm btn-info" id="filtro"><i class="fa fa-filter"></i> Filtro</button>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="box-body">
               <div class="table-responsive">
                  <table class="table table-sm table-hover" id="tableHistory">
                     <thead>
                        <tr>
                           <th class="text-center">Tipo de Fluido</th>
                           <th class="text-center">Sample ID</th>
                           <th class="text-center">Cliente</th>
                           <th class="text-center">Account</th>
                           <th class="text-center">Unit ID</th>
                           <th class="text-center">Modelo</th>
                           <th class="text-center">Component</th>
                           <th class="text-center">Date Taken</th>
                           <th class="text-center">Date Received</th>
                           <th class="text-center">Data Analyze</th>
                           <th class="text-center">General Condition</th>
                           <th class="text-center">Wear Condition</th>
                           <th class="text-center">Contamination Cond</th>
                           <th class="text-center">Lube Health Cond</th>
                        </tr>
                     </thead>
                  </table>
               </div>
            </div>


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

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

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

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

      tableData.ajax.reload();
   });

</script>
@endsection