@extends('layout.administrator.index')
@section('title', 'Historial')
@section('style')
   <style type="text/css">
   .bg-orange {
      background-color: #fd7e14
   }

   .font-small {
      font-size: 13px;
      color: #000000
   }

   .table>tbody>tr>td,
   .table>tbody>tr>th,
   .table>tfoot>tr>td,
   .table>tfoot>tr>th,
   .table>thead>tr>td,
   .table>thead>tr>th {
      border-top: 1px solid #f4f4f4;
      padding: .3rem;
   }

   .btn-download,
   btn-download:active {
      position: fixed;
      z-index: 999;
      bottom: 20px;
      right: 40px;
      padding: 15px 16px;
      font-size: 13px;
      border-radius: 50px;
      font-weight: bold;
   }

   .btn-download {
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
      transform: scale(1);
      animation: pulse 2s infinite;
   }

   @keyframes pulse {
      0% {
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
      }

      70% {
         box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
      }

      100% {
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      }
   }
</style>
@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"><a href="{{route('administrator.history.index')}}"> Historial</a></li>
            <li class="breadcrumb-item active">Detalle</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 class="row">
            <div class="col-md-8">
               <div class="box box-solid bg_dark">
                  <div class="box-header with-border">
                     <div class="row align-items-center">
                        <div class="col-6">
                           <h4 class="box-title">Sample: <b class="font-weight-bold">{{$history->code}}</b></h4>
                        </div>
                        <div class="col-6 text-right">
                           <h4 class="box-title">Lote: <b class="font-weight-bold">{{$history->lot}}</b></h4>
                        </div>
                     </div>
                  </div>
                  <div class="box-body">
                     <div class="row">
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Flota</h4>
                           <h5><strong>{{$history->getFleet->name}}</strong></h5>
                        </div>
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Equipo</h4>
                           <h5><strong>{{$history->getEquipment->unit_id}}</strong></h5>
                        </div>
                     </div>
                     <div class="row mt-10">
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Componente</h4>
                           <h5><strong>{{$history->component}}</strong></h5>
                        </div>
                     </div>
                     <div class="row mt-10">
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Lubricante</h4>
                           <h5><strong>{{$history->lubricant}}</strong></h5>
                        </div>
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Tipo de sistema</h4>
                           <h5><strong>{{$history->system_type}}</strong></h5>
                        </div>
                     </div>
                     <div class="row mt-10">
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Marca del aceite</h4>
                           <h5><strong>{{$history->oil_brand}}</strong></h5>
                        </div>
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Peso del aceite</h4>
                           <h5><strong>{{$history->oil_weight}}</strong></h5>
                        </div>
                     </div>
                     <div class="row mt-10">
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Marca</h4>
                           <h5><strong>{{$history->make}}</strong></h5>
                        </div>
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Modelo</h4>
                           <h5><strong>{{$history->model}}</strong></h5>
                        </div>
                     </div>
                     <div class="row mt-10">
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Horometro del componente</h4>
                           <h5><strong>{{$history->horometer}}</strong></h5>
                        </div>
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Tiempo del aceite</h4>
                           <h5><strong>{{$history->oil_time}}</strong></h5>
                        </div>
                     </div>
                     <div class="row mt-10">
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Tipo de aceite</h4>
                           <h5><strong>{{$history->oil_type}}</strong></h5>
                        </div>
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Cambio de aceite</h4>
                           @if ($history->oil_change == 'true')
                              <h5><strong>SI</strong></h5>
                           @else
                              <h5><strong>NO</strong></h5>
                           @endif
                        </div>
                     </div>
                     <div class="row mt-10">
                        <div class="col-md-6"></div>
                        <div class="col-md-6">
                           <h4 class="font-weight-bold">Cambio de filtro</h4>
                           @if ($history->filter_change)
                              <h5><strong>SI</strong></h5>
                           @else
                              <h5><strong>NO</strong></h5>
                           @endif
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-md-4">
               @if ($history->sos=="true")
                  <div class="row">
                     <div class="col-md-12 text-center">
                        <div class="contentSos">
                           <h1>SOS</h1>
                        </div>
                     </div>
                  </div>
               @endif
               <div class="box box-solid bg_dark">
                  <div class="box-header with-border">
                     <div class="row align-items-center">
                        <div class="col-12">
                           <h4 class="box-title">Fecha</h4>
                        </div>
                     </div>
                  </div>
                  <div class="box-body">
                     <div class="align-items-center">
                        <div class="col-6">
                           <h4 class="font-weight-bold">Muestra</h4>
                           <h5>{{date("d/m/Y", strtotime($history->sample_date_taken))}}</h5>
                        </div>
                        <div class="col-6">
                           <h4 class="font-weight-bold">Recibido</h4>
                           <h5>{{date("d/m/Y", strtotime($history->sample_date_received))}}</h5>
                        </div>
                        @if($history->date_of_analysis!=null)
                           <div class="col-6">
                              <h4 class="font-weight-bold">Análisis</h4>
                              <h5>{{date("d/m/Y", strtotime($history->date_of_analysis))}}</h5>
                           </div>
                        @endif
                     </div>
                  </div>
               </div>
               <div class="row mb-2">
                <div class="col-md-12">
                  <a href="{{route('administrator.samples.print', [$history->code])}}" target="_blank" class="btn btn_admin btn-block"><i class="fa fa-file-pdf-o"></i> Etiqueta PDF</a>
                </div>
              </div>
               <div class="row mb-2">
                  <div class="col-md-12">
                     <a href="{{route('administrator.history.allReport', ['code' => $history->code])}}" target="_blank" class="btn btn_admin btn-block"><i class="fa fa-sticky-note-o"></i> Historial completo</a>
                  </div>
               </div>
               <div class="row mb-2">
                  <div class="col-md-12">
                     <a href="{{route('administrator.history.report', [$history->code])}}" id="#btnPDF" class="btn btn_admin btn-block" target="_blank"><i class="fa fa-file-pdf-o"></i> Ultimo reporte</a>
                     {{-- <button type="button" id="#btnPDF" class="btn btn_admin btn-block"><i class="fa fa-file-pdf-o"></i> Ultimo reporte</button> --}}
                  </div>
               </div>
               {{-- <div class="row mb-2">
                  <div class="col-md-12">
                     <a href="{{route('administrator.history.report.excel', [$history->code])}}" target="_blank" class="btn btn_admin btn-block"><i class="fa fa-file-excel-o"></i> Ultimo reporte Excel</a>
                  </div>
               </div> --}}
               <div class="row">
                  <div class="col-md-12">
                     <button target="_blank" class="btn btn_admin btn-block" data-toggle="modal" data-target="#modalSendMail"><i class="fa fa-file-pdf-o"></i> Enviar reporte por correo</button>
                  </div>
               </div>
            </div>
         </div>
         {{-- enviar email --}}
         <div class="modal fade" id="modalSendMail" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-sm">
               <div class="modal-content">
                  <div class="modal-header">
                     <h4 class="modal-title" id="mySmallModalLabel">Enviar reporte</h4>
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  </div>
                  <div class="modal-body">
                     <div class="row mb-3">
                        <div class="col">
                           <div class="from-group">
                              <input type="text" class="form-control" id="matter" placeholder="Asunto">
                           </div>
                        </div>
                     </div>
                     <div class="row mb-3">
                        <div class="col">
                           <div class="from-group">
                              <input type="email" class="form-control imputDest" placeholder="Correo electrónico destino">
                           </div>
                        </div>
                     </div>
                     {{-- <div class="row">
                     <div class="col">
                     <input type="datetime-local" class="form-control" value="{{date("Y-m-d\TH:i")}}" min="{{date("Y-m-d\TH:i")}}" name="time" id="time">
                  </div>
               </div> --}}
               <div class="row mb-3">
                  <div class="col">
                     <div class="from-group">
                        <textarea placeholder="Escriba descripcion a enviar" id="description" class="form-control" id="" cols="30" rows="10"></textarea>
                     </div>
                  </div>
               </div>
            </div>
            <div class="modal-footer">
               <button class="btn btn-warning btn-block btnSendMail" data-dismiss="modal">Enviar</button>
            </div>
         </div>
         <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
   </div>

   @include('system.administrator.templates.reportView')

</section>

</div>
@endsection

@section('js')

   <script src="{{ asset('assets/minimalpro/js/jquery.min.js')}}"></script>
   <script src="{{ asset('assets/plugins/html2pdf/dist/html2pdf.bundle.min.js')}}"></script>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
   <script>
   $('.btnSendMail').on('click', function() {
      let dest = $('.imputDest').val()
      let matter = $('#matter').val()
      let description = $('#description').val()
      if (dest.length == 0) {
         Swal.fire(
            'Error',
            'Debe ingresar un correo',
            'error'
         )
         return
      } else {
         $.ajax({
            type: "post",
            url: "{{route('administrator.history.sendMail')}}",
            data: {
               code: "{{$history->code}}",
               dest: dest,
               subject: matter,
               des: description,
               time: $('#time').val(),
               _token: $('meta[name="csrf-token"]').attr('content')
            },
            dataType: "json",
            beforeSend: function() {
               Swal.fire({
                  title: 'Cargando...',
                  allowEscapeKey: false,
                  allowOutsideClick: false,
                  onOpen: () => {
                     Swal.showLoading();
                  }
               })
            },
            success: function(response) {
               $('.imputDest').val('')
               $('#description').val('')
               $('#matter').val('')
               // $('#modalSendMail').modal('hide')
               Swal.fire(
                  'Exito!',
                  'El reporte ha sido enviado satisfactoriamente al destinatario',
                  'success'
               )
            },
            error: function(xhr, status, error) {
               Swal.fire(
                  'Error',
                  'Hemos tenido problemas, intente mas tarde',
                  'error'
               )
            }
         });
      }
   })
</script>

<script type="text/javascript">
$('.btn-download').click(function(e) {
   e.preventDefault();
   const element = document.getElementById('demo');
   html2pdf().from(element).set(options).save();
});
$('#btnPDF').click(function(e) {
   let html = `
   <html lang="es">

   <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sample PDF</title>
   <link rel="stylesheet" href="{{asset('assets/minimalpro/vendor_components/bootstrap/dist/css/bootstrap.min.css')}}">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   <style type="text/css">
   html {
       overflow-y:auto;
       overflow-x:hidden;
   }
   .bg-orange {
      background-color: #fd7e14
   }

   .font-small {
      font-size: 10px;
      color: #000000
   }

   .table>tbody>tr>td,
   .table>tbody>tr>th,
   .table>tfoot>tr>td,
   .table>tfoot>tr>th,
   .table>thead>tr>td,
   .table>thead>tr>th {
      border-top: 1px solid #f4f4f4;
      padding: 0.5px;
   }

   .btn-download,
   btn-download:active {
      position: fixed;
      z-index: 999;
      bottom: 20px;
      right: 40px;
      padding: 15px 16px;
      font-size: 13px;
      border-radius: 50px;
      font-weight: bold;
   }

   .btn-download {
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
      transform: scale(1);
      animation: pulse 2s infinite;
   }

   @keyframes pulse {
      0% {
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
      }

      70% {
         box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
      }

      100% {
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      }
   }

   @media all {
      div.pageBreak{
         display: none;
      }
   }

   @media print{
      div.pageBreak{
         display:block;
         page-break-before:always;
      }
      .btn-download{
         display: none !important;
      }
   }

   .chart_styles {
      width: 100% !important;
      height: 150px !important;
   }

   .chart_styles2 {
      width: 100% !important;
      height: 180px !important;
   }

   .chart_titles {
      font-size: 0.6em;
   }

   .table-titles {
      font-size: 0.7em;
      font-weight: bold;
   }

   .side-table-data {
      width: 150px;
   }
   </style>
   </head>
   <a href="javascript:void(0)" class="btn btn-download btn-light"> <i class="fa fa-download fa-2x" aria-hidden="true"></i></a>

   <body style="background-color: #5f6368">
   <div class="container shadow-lg bg-white" style="min-width: 650px;  max-width: 850px">
   <section id="demo">

   <section id="page1" class="p-2 border border-dark">
   <div class="row">
   <div class="col-2 p-0 m-0"><img src="{{ asset('assets/images/logo-mobil.jpg')}}" width="80%" class="ml-3"></div>
   <div class="col-8 p-0 pl-3">
   <h5 class="text-uppercase text-center font-weight-bold" style="color: #000000">
   IN-SERVICE FLUIDS ANALYSIS REPORT
   </h5>
   <h6 class="text-center" style="font-size: 13px; color: #000000;">
   On site Lubricant Laboratory - Mine Drummond pribbenow - Cesar, Co.<br>
   Kilometro 31, Via San Roque - Bosconia (Cesar), Contact Cel: 322-7466589
   </h6>
   </div>
   <div class="col-2 p-0 m-0"><img src="{{ asset('assets/images/logo-lubricant.jpg')}}" width="60%"></div>
   </div>
   <div class="row mt-1">
   <div class="col-7 pr-1">
   <table class="table table-striped table-custom border">
   <tbody>
   <tr>
   <th class="text-center font-small border"></th>
   <th class="text-center font-small border">Older</th>
   <th class="text-center font-small border" colspan="3">Sample Data &amp; Trend</th>
   <th class="text-center font-small border">Newest</th>
   </tr>
   <tr id="sampleId">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Sample ID</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="sampleDateTaken">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Date Taken</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="sampleDateReceived">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Date Delivered</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="dateOfAnalysis">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Date Analized</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="horometer">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Hours SMU</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="oilTime">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Hours Oil</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="oilChange">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Oil Changed?</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr>
   <td class="font-weight-bold text-center font-small bg-dark text-white">Filter Changed?</td>
   <td class="text-center font-small border-right">0</td>
   <td class="text-center font-small">0</td>
   <td class="text-center font-small">0</td>
   <td class="text-center font-small">0</td>
   <td class="text-center font-small border-left">0</td>
   </tr>
   <tr id="oilWeight">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Oil Weight</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="generalCondition">
   <td class="font-weight-bold text-center font-small text-white" style="background-color:#dc3545;">General Condition</td>
   <td class="text-center font-small border-right" id="item_1">--</td>
   <td class="text-center font-small" id="item_2">--</td>
   <td class="text-center font-small" id="item_3">--</td>
   <td class="text-center font-small" id="item_4">--</td>
   <td class="text-center font-small border-left" id="item_5">--</td>
   </tr>
   <tr id="wearOutCondition">
   <td class="font-weight-bold text-center font-small text-white" style="background-color:#dc3545;">Wear Condition</td>
   <td class="text-center font-small border-right" id="item_1">--</td>
   <td class="text-center font-small" id="item_2">--</td>
   <td class="text-center font-small" id="item_3">--</td>
   <td class="text-center font-small" id="item_4">--</td>
   <td class="text-center font-small border-left" id="item_5">--</td>
   </tr>
   <tr id="contaminationCond">
   <td class="font-weight-bold text-center font-small text-white" style="background-color:#dc3545;">Contamination Cond</td>
   <td class="text-center font-small border-right" id="item_1">--</td>
   <td class="text-center font-small" id="item_2">--</td>
   <td class="text-center font-small" id="item_3">--</td>
   <td class="text-center font-small" id="item_4">--</td>
   <td class="text-center font-small border-left" id="item_5">--</td>
   </tr>
   <tr id="lubeHelathCond">
   <td class="font-weight-bold text-center font-small text-white" style="background-color:#dc3545;">Lube Helath Cond</td>
   <td class="text-center font-small border-right" id="item_1">--</td>
   <td class="text-center font-small" id="item_2">--</td>
   <td class="text-center font-small" id="item_3">--</td>
   <td class="text-center font-small" id="item_4">--</td>
   <td class="text-center font-small border-left" id="item_5">--</td>
   </tr>
   @foreach ($tests as $test)
   <tr id="testSample_{{$test->id}}">
   <td class="font-weight-bold text-center font-small text-white" style="background-color:{{$test->getTest->color}};">{{$test->name}}</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   @endforeach
   </tbody>
   </table>
   </div>
   <div class="col-5 pl-1">
   <table class="table table-striped border table-custom mb-2">
   <tbody>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">ACCOUNT ID</th>
   <td class="text-center font-small font-weight-bold text-uppercase">{{$sample->getFleet->name}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">UNIT ID</th>
   <td class="text-center font-small font-weight-bold text-uppercase">{{$sample->getEquipment->unit_id}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">COMPONENT LOCATION</th>
   <td class="text-center font-small text-uppercase">{{$sample->component}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">UNIT MAKE</th>
   <td class="text-center font-small text-uppercase">{{$sample->make}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">UNIT MODEL</th>
   <td class="text-center font-small text-uppercase">{{$sample->model}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">SYSTEM TYPE</th>
   <td class="text-center font-small text-uppercase">{{$sample->system_type}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">OIL BRAND</th>
   <td class="text-center font-small">{{$sample->oil_brand}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">LUBRICANT</th>
   <td class="text-center font-small text-uppercase">{{$sample->lubricant}}</td>
   </tr>
   </tbody>
   </table>

   <div class="row">
   <div class="col-12">
   <div class="box">
   <div class="box-header with-border text-right">
   <!-- <label class="box-title text-bold text-uppercase chart_titles">Desgaste de hierro (ppm)</label> -->
   </div>
   <div class="box-body">
   <canvas class="chart_styles" id="first_chart"></canvas>
   </div>
   </div>
   </div>

   <div class="col-12">
   <div class="box">
   <div class="box-header with-border text-right">
   <!-- <label class="box-title box-title-bold text-uppercase chart_titles">Desgaste de elementos (ppm)</label> -->
   </div>
   <div class="box-body">
   <canvas class="chart_styles" id="second_chart_g"></canvas>
   </div>
   </div>
   </div>

   <div class="col-12">
   <div class="box">
   <div class="box-header with-border text-right">
   <!-- <label class="box-title box-title-bold text-uppercase chart_titles">Contaminacion elementos (ppm)</label> -->
   </div>
   <div class="box-body">
   <canvas class="chart_styles" id="second_chart"></canvas>
   </div>
   </div>
   </div>

   <div class="col-12">
   <div class="box">
   <div class="box-header with-border text-right">
   <!-- <label class="box-title box-title-bold text-uppercase chart_titles">Propiedades físicas</label> -->
   </div>
   <div class="box-body">
   <canvas class="chart_styles" id="third_chart"></canvas>
   </div>
   </div>
   </div>

   <div class="col-12">
   <div class="box">
   <div class="box-header with-border text-right">
   <!-- <label class="box-title box-title-bold text-uppercase chart_titles">Contaminacion moleculas (ppm)</label> -->
   </div>
   <div class="box-body">
   <canvas class="chart_styles" id="fourth_chart"></canvas>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
   </section>

   <div class="pageBreak"></div>

   <section id="page2" class="p-2 mt-2 border border-dark">
   <div class="row">
   <div class="col-2 p-0 m-0"><img src="{{ asset('assets/images/logo-mobil.jpg')}}" width="80%" class="ml-3"></div>
   <div class="col-8 p-0 pl-3">
   <h5 class="text-uppercase text-center font-weight-bold" style="color: #000000">
   IN-SERVICE FLUIDS ANALYSIS REPORT
   </h5>
   <h6 class="text-center" style="font-size: 13px; color: #000000;">
   On site Lubricant Laboratory - Mine Drummond pribbenow - Cesar, Co.<br>
   Kilometro 31, Via San Roque - Bosconia (Cesar), Contact Cel: 322-7466589
   </h6>
   </div>
   <div class="col-2 p-0 m-0"><img src="{{ asset('assets/images/logo-lubricant.jpg')}}" width="60%"></div>
   </div>
   <div class="row mt-1">
   <div class="col-7 pr-1">
   <table class="table table-striped table-custom border">
   <tbody>
   <tr>
   <th class="text-center font-small border"></th>
   <th class="text-center font-small border">Older</th>
   <th class="text-center font-small border" colspan="3">Sample Data &amp; Trend</th>
   <th class="text-center font-small border">Newest</th>
   </tr>
   <tr id="sampleId">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Sample ID</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="sampleDateTaken">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Date Taken</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="sampleDateReceived">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Date Delivered</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="dateOfAnalysis">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Date Analized</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="horometer">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Hours SMU</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="oilTime">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Hours Oil</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="oilChange">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Oil Changed?</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr>
   <td class="font-weight-bold text-center font-small bg-dark text-white">Filter Changed?</td>
   <td class="text-center font-small border-right">0</td>
   <td class="text-center font-small">0</td>
   <td class="text-center font-small">0</td>
   <td class="text-center font-small">0</td>
   <td class="text-center font-small border-left">0</td>
   </tr>
   <tr id="oilWeight">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Oil Weight</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="generalCondition">
   <td class="font-weight-bold text-center font-small text-white" style="background-color:#dc3545;">General Condition</td>
   <td class="text-center font-small border-right" id="item_1">--</td>
   <td class="text-center font-small" id="item_2">--</td>
   <td class="text-center font-small" id="item_3">--</td>
   <td class="text-center font-small" id="item_4">--</td>
   <td class="text-center font-small border-left" id="item_5">--</td>
   </tr>
   <tr id="wearOutCondition">
   <td class="font-weight-bold text-center font-small text-white" style="background-color:#dc3545;">Wear Condition</td>
   <td class="text-center font-small border-right" id="item_1">--</td>
   <td class="text-center font-small" id="item_2">--</td>
   <td class="text-center font-small" id="item_3">--</td>
   <td class="text-center font-small" id="item_4">--</td>
   <td class="text-center font-small border-left" id="item_5">--</td>
   </tr>
   <tr id="contaminationCond">
   <td class="font-weight-bold text-center font-small text-white" style="background-color:#dc3545;">Contamination Cond</td>
   <td class="text-center font-small border-right" id="item_1">--</td>
   <td class="text-center font-small" id="item_2">--</td>
   <td class="text-center font-small" id="item_3">--</td>
   <td class="text-center font-small" id="item_4">--</td>
   <td class="text-center font-small border-left" id="item_5">--</td>
   </tr>
   <tr id="lubeHelathCond">
   <td class="font-weight-bold text-center font-small text-white" style="background-color:#dc3545;">Lube Helath Cond</td>
   <td class="text-center font-small border-right" id="item_1">--</td>
   <td class="text-center font-small" id="item_2">--</td>
   <td class="text-center font-small" id="item_3">--</td>
   <td class="text-center font-small" id="item_4">--</td>
   <td class="text-center font-small border-left" id="item_5">--</td>
   </tr>
   </tbody>
   </table>
   </div>
   <div class="col-5 pl-1">
   <table class="table table-striped border table-custom mb-2">
   <tbody>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">ACCOUNT ID</th>
   <td class="text-center font-small font-weight-bold text-uppercase">{{$sample->getFleet->name}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">UNIT ID</th>
   <td class="text-center font-small font-weight-bold text-uppercase">{{$sample->getEquipment->unit_id}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">COMPONENT LOCATION</th>
   <td class="text-center font-small text-uppercase">{{$sample->component}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">UNIT MAKE</th>
   <td class="text-center font-small text-uppercase">{{$sample->make}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">UNIT MODEL</th>
   <td class="text-center font-small text-uppercase">{{$sample->model}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">SYSTEM TYPE</th>
   <td class="text-center font-small text-uppercase">{{$sample->system_type}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">OIL BRAND</th>
   <td class="text-center font-small">{{$sample->oil_brand}}</td>
   </tr>
   <tr>
   <th class="font-weight-bold font-small text-uppercase">LUBRICANT</th>
   <td class="text-center font-small text-uppercase">{{$sample->lubricant}}</td>
   </tr>
   </tbody>
   </table>
   </div>
   </div>
   <div class="row">
   <div class="col-4">
   <div class="box">
   <div class="box-header with-border text-right">
   <!-- <label class="box-title box-title-bold text-uppercase chart_titles">Viscosidad (Cst)</label> -->
   </div>
   <div class="box-body">
   <canvas class="chart_styles2" id="visc_chart"></canvas>
   </div>
   </div>
   </div>
   <div class="col-4">
   <div class="box">
   <div class="box-header with-border text-right">
   <!-- <label class="box-title box-title-bold text-uppercase chart_titles">ISO CODE 4406: RANGOS</label> -->
   </div>
   <div class="box-body">
   <canvas class="chart_styles2" id="iso_chart"></canvas>
   </div>
   </div>
   </div>
   <div class="col-4">
   <div class="box">
   <div class="box-header with-border text-right">
   <!-- <label class="box-title box-title-bold text-uppercase chart_titles">Water content (ppm o Abs)</label> -->
   </div>
   <div class="box-body">
   <canvas class="chart_styles2" id="water_chart"></canvas>
   </div>
   </div>
   </div>
   </div>
   <div class="row">
   <div class="col-6">
   <div class="box">
   <div class="box-header with-border text-right">
   <!-- <label class="box-title box-title-bold text-uppercase chart_titles">Aditivos elementos (ppm)</label> -->
   </div>
   <div class="box-body">
   <canvas class="chart_styles2" id="aditives_chart"></canvas>
   </div>
   </div>
   </div>
   <div class="col-6">
   <div class="box">
   <div class="box-header with-border text-right">
   <!-- <label class="box-title box-title-bold text-uppercase chart_titles">Propiedad quimica</label> -->
   </div>
   <div class="box-body">
   <canvas class="chart_styles2" id="props_chart"></canvas>
   </div>
   </div>
   </div>
   </div>
   <div class="row">
   <div class="col-12">
   <table class="table table-striped table-custom border">
   <thead class="thead-dark">
   <tr>
   <th>Resultado reciente - Comentario/Recomendaciones</th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>
   @include('system.administrator.history.partials.recent-comment-recommendations')
   </td>
   </tr>
   </tbody>
   </table>
   </div>
   <div class="col-12">
   <table class="table table-striped table-custom border">
   <thead class="thead-dark">
   <tr>
   <th>Resultado de reglas</th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>

   </td>
   </tr>
   </tbody>
   </table>
   </div>
   </div>
   </section>
   @if (Auth::user()->reportType==2)
   <div class="pageBreak"></div>
   <section id="page3" class="p-2 mt-2 border border-dark">
   <div class="row">
   <div class="col-2 p-0 m-0"><img src="{{ asset('assets/images/logo-mobil.jpg')}}" width="80%" class="ml-3"></div>
   <div class="col-8 p-0 pl-3">
   <h5 class="text-uppercase text-center font-weight-bold" style="color: #000000">
   IN-SERVICE FLUIDS ANALYSIS REPORT
   </h5>
   <h6 class="text-center" style="font-size: 13px; color: #000000;">
   On site Lubricant Laboratory - Mine Drummond pribbenow - Cesar, Co.<br>
   Kilometro 31, Via San Roque - Bosconia (Cesar), Contact Cel: 322-7466589
   </h6>
   </div>
   <div class="col-2 p-0 m-0"><img src="{{ asset('assets/images/logo-lubricant.jpg')}}" width="60%"></div>
   </div>
   <div class="row">
   <div class="col-7 pr-1">
   <table class="table table-striped table-custom border">
   <tbody>
   <tr>
   <th class="text-center font-small border"></th>
   <th class="text-center font-small border">Older</th>
   <th class="text-center font-small border" colspan="3">Sample Data &amp; Trend</th>
   <th class="text-center font-small border">Newest</th>
   </tr>
   <tr id="sampleId">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Sample ID</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_44">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Code ISO 4406</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_45">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">4um</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_46">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">6um</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_47">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">14um</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_70">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">20um</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_71">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">38um</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_72">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">50um</td>
   <td class="text-center font-small border-right">0</td>
   <td class="text-center font-small">0</td>
   <td class="text-center font-small">0</td>
   <td class="text-center font-small">0</td>
   <td class="text-center font-small border-left">0</td>
   </tr>
   <tr id="testSample_73">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">70um</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   </tbody>
   </table>
   <h6 class="table-titles m-0 text-center">Particle Wear Analysis Laboratory</h6>
   <table class="table table-striped table-custom border mb-0">
   <tbody>
   <tr id="testSample_107">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Part Wgt (mg/L)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_100">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Total Wear Part./ml </td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_104">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Max Diameter Wear</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_105">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Avg Diameter Wear</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_106">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">StDev Diam Wear</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   </tbody>
   </table>
   <h6 class="table-titles m-0 text-center">Classifier and Counter Wear Particles (>20um)</h6>
   <table class="table table-striped table-custom border mb-0">
   <tbody>
   <tr id="testSample_79">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Severe Sliding (>20um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_74">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Cutting (>20um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_84">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Fatigue (>20um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_89">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">NonMetalic (>20um) </td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_94">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">UnClassified</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_99">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Fibers</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_108">
   <td class="font-weight-bold text-center font-small bg-dark text-white">Free Water (ppm)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   </tbody>
   </table>
   <h6 class="table-titles m-0 text-center">Maximum size diameter(um) of Wear Particles</h6>
   <table class="table table-striped table-custom border mb-0">
   <tbody>
   <tr id="testSample_83">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Severe Sliding (um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_78">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Cutting (um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_93">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">NonMetalic (um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_98">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">UnClassified (um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   </tbody>
   </table>
   <h6 class="table-titles m-0">Counter Severe Sliding Wear Particles per Sizes</h6>
   <table class="table table-striped table-custom border mb-0">
   <tbody>
   <tr id="testSample_80">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Severe Sliding (25um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_81">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Severe Sliding (50um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_82">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Severe Sliding (100um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   </tbody>
   </table>
   <h6 class="table-titles m-0">Counter Cutting Wear Particles per Sizes</h6>
   <table class="table table-striped table-custom border mb-0">
   <tbody>
   <tr id="testSample_75">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Cutting (25um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_76">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Cutting (50um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_77">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Cutting (100um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   </tbody>
   </table>
   <h6 class="table-titles m-0">Counter Fatigue Wear Particles per Sizes</h6>
   <table class="table table-striped table-custom border mb-0">
   <tbody>
   <tr id="testSample_85">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Fatigue (25um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_86">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Fatigue (50um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_87">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">Fatigue (100um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   </tbody>
   </table>
   <h6 class="table-titles m-0">Counter NonMetalic Particles per Sizes</h6>
   <table class="table table-striped table-custom border mb-0">
   <tbody>
   <tr id="testSample_90">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">NonMetalic (25um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_91">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">NonMetalic (50um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_92">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">NonMetalic (100um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   </tbody>
   </table>
   <h6 class="table-titles m-0">Counter UnClassfied Particles per Sizes</h6>
   <table class="table table-striped table-custom border mb-0">
   <tbody>
   <tr id="testSample_95">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">UnClassified (25um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_96">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">UnClassified (50um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_97">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">UnClassified (100um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   </tbody>
   </table>
   <h6 class="table-titles m-0">Counter MDiamterC Wear Particles per Sizes</h6>
   <table class="table table-striped table-custom border mb-0">
   <tbody>
   <tr id="testSample_101">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">MDiameterC (25um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_102">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">MDiameterC (50um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   <tr id="testSample_103">
   <td class="font-weight-bold text-center font-small bg-dark text-white side-table-data">MDiameterC (100um)</td>
   <td class="text-center font-small border-right" id="item_1">0</td>
   <td class="text-center font-small" id="item_2">0</td>
   <td class="text-center font-small" id="item_3">0</td>
   <td class="text-center font-small" id="item_4">0</td>
   <td class="text-center font-small border-left" id="item_5">0</td>
   </tr>
   </tbody>
   </table>
   </div>
   <div class="col-5 pl-1">
   <h4 align="center">WEAR PARTICLE LABORATORY REPORT</h4>
   <div class="row">
   <div class="col-12">
   <canvas class="chart_styles2" id="pc_graph1"></canvas>
   </div>
   <div class="col-12">
   <canvas class="chart_styles2" id="pc_graph2"></canvas>
   </div>
   <div class="col-12">
   <canvas class="chart_styles2" id="pc_graph3"></canvas>
   </div>
   <div class="col-12">
   <canvas class="chart_styles2" id="pc_graph4"></canvas>
   </div>
   </div>
   </div>
   </div>
   <div class="row">
   <div class="col-12">
   <table class="table table-striped table-custom border">
   <thead class="thead-dark">
   <tr>
   <th>Resultado reciente - Comentario/Recomendaciones</th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>
   @include('system.administrator.history.partials.recent-comment-recommendations')
   </td>
   </tr>
   </tbody>
   </table>
   </div>
   </div>
   </section>
   @endif
   </section>
   </div>
   `
   let todo = html + document.getElementById('js').innerHTML + " </body></html>";
   let newWindow = window.open(" ", 'PRINT', 'height=${window.outerHeight*0.7},width=${window.outerWidth*0.9}, scrollbars=yes,target=blank');
   newWindow.document.write(todo)
})
</script>
<div id="js">
   <script src="{{ asset('assets/minimalpro/js/jquery.min.js')}}"></script>
   <script src="{{ asset('assets/plugins/html2pdf/dist/html2pdf.bundle.min.js')}}"></script>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
   <script type="text/javascript">
   const options = {
      margin: 0.4,
      filename: 'Sample-details',
      pagebreak: {
         mode: 'avoid-all',
         after: ['#page1', '#page2']
      },
      image: {
         type: 'jpeg',
         quality: 0.78
      },
      html2canvas: {
         scale: 2
      },
      jsPDF: {
         unit: 'in',
         format: 'letter',
         orientation: 'portrait'
      }
   }
   var opt = {
      margin: 0.4,
      filename: 'Sample-details',
      pagebreak: {
         mode: 'avoid-all',
         after: ['#page1', '#page2', '#page3']
      },
      image: {
         type: 'jpeg',
         quality: 0.78
      },
      html2canvas: {
         scale: 2
      },
      jsPDF: {
         unit: 'in',
         format: 'A4',
         orientation: 'portrait'
      }
   };
   $('.btn-download').click(function(e) {
      e.preventDefault();
      const element = document.getElementById('demo');
      html2pdf().from(element).set(opt).save();
   });
   </script>
   <script type="text/javascript">
   var samples = <br />
<b>Notice</b>:  Undefined variable: samples in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\history\customers\show.blade.php</b> on line <b>1500</b><br />
null;
   samples = samples.reverse();

   var graf1 = new Object();
   graf1.names = [];

   graf1.valuesAg = [];
   graf1.valuesPb = [];
   graf1.valuesCu = [];
   graf1.valuesSn = [];

   graf1.valuesV = [];
   graf1.valuesSi = [];
   graf1.valuesNa = [];
   graf1.valuesK = [];

   graf1.valuesFe = [];
   graf1.valuesLPWFe = [];

   graf1.valuesAl = [];
   graf1.valuesCr = [];
   graf1.valuesNi = [];

   graf1.valuesOXI = [];
   graf1.valuesNIT = [];
   graf1.valuesTAN = [];
   graf1.valuesTBN = [];

   graf1.valuesSoot = [];
   graf1.valuesSulf = [];
   graf1.valuesBio = [];
   graf1.valuesFuel = [];
   graf1.valuesGlycol = [];

   graf1.valuesVisc = [];
   graf1.valuesViscM = [];

   graf1.valuesWaterPpm = [];
   graf1.valuesWaterAbs = [];

   graf1.valuesISO4 = [];
   graf1.valuesISO6 = [];
   graf1.valuesISO14 = [];

   graf1.valuesB = [];
   graf1.valuesBa = [];
   graf1.valuesCa = [];
   graf1.valuesMg = [];
   graf1.valuesMn = [];
   graf1.valuesP = [];
   graf1.valuesZn = [];
   graf1.valuesLi = [];

   graf1.valuesAW = [];
   graf1.valuesFluid = [];

   graf1.sliding20 = [];
   graf1.cutting20 = [];
   graf1.fatigue20 = [];
   graf1.nonMetalic20 = [];
   graf1.unclasified20 = [];
   graf1.fibers = [];

   graf1.sliding25 = [];
   graf1.cutting25 = [];
   graf1.fatigue25 = [];
   graf1.nonMetalic25 = [];
   graf1.unclasified25 = [];
   graf1.mdiameter25 = [];

   graf1.sliding50 = [];
   graf1.cutting50 = [];
   graf1.fatigue50 = [];
   graf1.nonMetalic50 = [];
   graf1.unclasified50 = [];
   graf1.mdiameter50 = [];

   graf1.sliding100 = [];
   graf1.cutting100 = [];
   graf1.fatigue100 = [];
   graf1.nonMetalic100 = [];
   graf1.unclasified100 = [];
   graf1.mdiameter100 = [];

   let samplesList = [];
   $.each(samples, function(y, sample) {
      index = y + 1;
      console.log("-------------------------");
      console.log(sample);
      /*Sample Id*/
      samplesList.push(sample.code);
      $("#sampleId #item_" + index).html(sample.code);
      /*Sample Date Taken*/
      var dateTaken = new Date(sample.sample_date_taken);
      sampleDateTaken = dateTaken.toLocaleDateString();
      dividedDate = sampleDateTaken.split('/');
      dividedDate[2] = dividedDate[2].slice(-2);
      sampleDateTaken = dividedDate.join('/');

      graf1.names.push(sampleDateTaken);

      $("#sampleDateTaken #item_" + index).html(sampleDateTaken);
      /*Sample Date Received*/
      var dateReceived = new Date(sample.sample_date_received);
      sampleDateReceived = dateReceived.toLocaleDateString();
      $("#sampleDateReceived #item_" + index).html(sampleDateReceived);
      /*Date Of Analysis*/
      if (sample.date_of_analysis != null) {
         var dateAnalysis = new Date(sample.date_of_analysis);
         dateOfAnalysis = dateAnalysis.toLocaleDateString();
      } else {
         dateOfAnalysis = "";
      }
      $("#dateOfAnalysis #item_" + index).html(dateOfAnalysis);
      /*Horometer*/
      $("#horometer #item_" + index).html(sample.horometer);
      /*Oil Time*/
      $("#oilTime #item_" + index).html(sample.oil_time);
      /*Oil Change*/
      var oilChange = sample.oil_change == "true" ? "SI" : "NO";
      $("#oilChange #item_" + index).html(oilChange);
      /*Oil Weight*/
      $("#oilWeight #item_" + index).html(sample.oil_weight.substring(0,7));

      var semaphore = <br />
<b>Fatal error</b>:  Uncaught Error: Class 'Config' not found in D:\laragon2\www\Terpel\resources\views\system\administrator\history\customers\show.blade.php:1624
Stack trace:
#0 {main}
  thrown in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\history\customers\show.blade.php</b> on line <b>1624</b><br />