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

@php
  $fluidCategoryName = strtolower((string) optional(optional($history->getLubricant)->getCategory)->name);
  $isGreaseSample = strpos($fluidCategoryName, 'grasa') !== false || strpos($fluidCategoryName, 'grease') !== false;
@endphp

@section('style')
<style media="screen">
  .contentReport {
    padding: 20px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  }

  .table-responsive {
    overflow-x: scroll;
  }

  .wrapper {
    position: relative;
    overflow: auto;
    border: 1px solid black;
    white-space: nowrap;
  }

  .sticky-col {
    position: sticky;
    position: -webkit-sticky;
    background-color: white;
  }

  .first-col {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    left: 0px;
  }

  #modalSend2 {
    z-index: 1051;
  }

  .oculto {
    display: none !important;
  }

  .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: 3px;
  }

  .table-sample-data>tbody>tr>td> {
    padding: 0;
  }

  .table-sample-data>tbody>tr>td>h6,
  .table-sample-data>tbody>tr>td>p {
    margin: 0px;
  }

  .dynamic-chart-container {
    height: 300px;
    min-height: 300px;
    width: 100%;
    position: relative;
  }

  .dynamic-chart-canvas {
    height: 100% !important;
    width: 100% !important;
  }

  .chart-main-title {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 10px;
  }

  .chart-section-help,
  .comparison-help-text {
    font-size: clamp(12px, 1.1vw, 14px);
    line-height: 1.5;
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%;
  }

  .multi-axis-tests-container {
    max-height: 130px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ddd;
    padding: 4px 6px;
    border-radius: 4px;
    max-width: 380px;
  }

  .multi-axis-header,
  .multi-axis-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  .multi-axis-header {
    margin-bottom: 4px;
  }

  .multi-axis-row {
    margin-bottom: 3px;
    padding: 0;
  }

  .multi-axis-col-variable {
    flex: 0 0 170px;
    min-width: 0;
  }

  .multi-axis-col-axis {
    flex: 0 0 150px;
  }

  .multi-axis-row .form-check {
    margin: 0;
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .multi-axis-row .form-check-input {
    margin-top: 0;
    margin-right: 5px;
    position: static;
    flex-shrink: 0;
  }

  .multi-axis-row .form-check-label {
    font-size: 10px;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .multi-axis-row .y-axis-selector {
    font-size: 10px;
    height: 22px;
    padding: 0 4px;
  }

  .multi-axis-panel-title {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 3px;
  }

  .multi-axis-date-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
  }

  .multi-axis-date-col {
    flex: 1 1 50%;
    min-width: 0;
  }

  .multi-axis-actions-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
  }

  .multi-axis-actions-row .btn {
    flex: 1 1 50%;
  }

  .comparison-config-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }

  .comparison-config-left {
    flex: 1 1 620px;
    min-width: 0;
    max-width: none;
    text-align: left;
  }

  .comparison-config-left > label,
  .comparison-config-left > p {
    display: block;
    text-align: left;
    max-width: none !important;
  }

  .comparison-selection-text {
    margin-bottom: 8px;
  }

  .comparison-selection-table {
    margin-top: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .comparison-selection-table-main {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 10px;
  }

  .comparison-config-right {
    flex: 0 0 360px;
    max-width: 360px;
    padding-left: 0;
    margin-top: 0;
    margin-left: -2px;
  }

  .comparison-builder-section {
    margin-bottom: 14px;
  }

  .comparison-charts-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
  }

  @media (max-width: 768px) {
    .comparison-config-row {
      display: block;
    }

    .comparison-config-left,
    .comparison-config-right {
      max-width: 100%;
      margin-top: 0;
    }

    .comparison-selection-table {
      display: block;
    }

    .multi-axis-tests-container {
      max-width: 100%;
    }

    .multi-axis-col-variable {
      flex: 1 1 auto;
    }

    .multi-axis-col-axis {
      flex: 0 0 130px;
    }
  }
</style>
<style type="text/css" media="print">
  .no-print {
    display: none;
  }

  .non-printable {
    display: none;
  }

  .printable {
    display: block !important;
  }
</style>
@endsection

@section('content')
<div class="content-wrapper">
  <section class="content-header  no-print">
    {{-- <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 non-printable">
    @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  no-print">
      <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 del componente</h4>
                <h5><strong>{{$history->make}}</strong></h5>
              </div>
              <div class="col-md-6">
                <h4 class="font-weight-bold">Modelo del componente</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">{{ $isGreaseSample ? 'Cambio de grasa' : '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  no-print">
        @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-12">
                <h4 class="font-weight-bold">Muestra</h4>
                <h5>{{date("d/m/Y", strtotime($history->sample_date_taken))}}</h5>
              </div>
            </div>
            <div class="align-items-center">
              <div class="col-12">
                <h4 class="font-weight-bold">Recibido</h4>
                <h5>{{date("d/m/Y", strtotime($history->sample_date_received))}}</h5>
              </div>
            </div>
          </div>
          <div class="box-footer">
            <div class="row">
              <div class="col-md-12">
                <button class="btn btn_admin btn-block" id="btnPDF"><i class="fa fa-file-pdf-o"></i> Generar reporte</button>
              </div>
              <div class="col-md-12" style="margin-top: 10px;">
                <button class="btn btn_admin btn-block" data-toggle="modal" data-target="#modalSend"><i class="fa fa-file-pdf-o"></i> Enviar por correo electrónico</button>
              </div>
              <div class="col-md-12" style="margin-top: 10px;">
                <button class="btn btn_admin btn-block" data-toggle="modal" data-target="#graphModal"><i class="fa fa-bar-chart"></i> Graficas</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade  no-print" id="modalSend" 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" name="subject" placeholder="Asunto">
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <div class="col">
                <div class="from-group">
                  <input type="email" class="form-control" id="email" name="email" placeholder="Correo electrónico destino">
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <div class="col">
                <div class="from-group">
                  <textarea placeholder="Descripcion a enviar" id="description" name="description" class="form-control" id="" cols="30" rows="10"></textarea>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button id="btnSendEmail" class="btn btn-warning btn-block">Enviar</button>
          </div>
        </div>

        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modalSend2" 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="matter2" name="subject" placeholder="Asunto">
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <div class="col">
                <div class="from-group">
                  <input type="email" class="form-control imputDest" name="email" placeholder="Correo electrónico destino">
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <div class="col">
                <div class="from-group">
                  <textarea placeholder="Escriba descripcion a enviar" id="description2" class="form-control" id="" cols="30" rows="10"></textarea>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button id="btnSend" class="btn btn-warning btn-block">Enviar</button>
          </div>
        </div>

        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

    {{-- modal graficas --}}


    <div class="contentReport non-printable">
      <div class="row">
        <div class="col-12">

          <div class="row">
            <div class="col form-inline justify-content-end mb-2">
              <div class="form-group">
                <label for="" class="mr-1">Inicial</label>
                <input type="date" class="form-control" name="" id="initDate" aria-describedby="helpId" placeholder="">
              </div>
              <div class="form-group">
                <label for="" class="mr-1">Final</label>
                <input type="date" class="form-control" name="" id="finalDate" aria-describedby="helpId" placeholder="">
              </div>
              <div class="btn-group" role="group">
                <button class="btn btn-warning" id="btnFilter">Filtrar</button>
                <button class="btn btn-danger" id="btnClear">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            </div>
          </div>

          <div class="table-responsive">
            <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">Newest</th>
                  <th class="text-center font-small border" colspan="3">Sample Data &amp; Trend</th>
                  <th class="text-center font-small border" id="olderCols">Older</th>
                </tr>
                <tr id="sampleId">
                  <td class="font-weight-bold text-center font-small bg-dark text-white sticky-col">Sample ID</td>
                  <td class="text-center font-small border-right item_1" id="item_1">0</td>
                  <td class="text-center font-small item_2" id="item_2">0</td>
                  <td class="text-center font-small item_3" id="item_3">0</td>
                  <td class="text-center font-small item_4" id="item_4">0</td>
                  <td class="text-center font-small border-left item_5" id="item_5">0</td>
                </tr>
                <tr id="sampleDateTaken">
                  <td class="font-weight-bold text-center font-small bg-dark text-white sticky-col">Date Taken</td>
                  <td class="text-center font-small border-right item_1" id="item_1">0</td>
                  <td class="text-center font-small item_2" id="item_2">0</td>
                  <td class="text-center font-small item_3" id="item_3">0</td>
                  <td class="text-center font-small item_4" id="item_4">0</td>
                  <td class="text-center font-small border-left item_5" id="item_5">0</td>
                </tr>
                <tr id="sampleDateReceived">
                  <td class="font-weight-bold text-center font-small bg-dark text-white sticky-col">Date Delivered</td>
                  <td class="text-center font-small border-right item_1" id="item_1">0</td>
                  <td class="text-center font-small item_2" id="item_2">0</td>
                  <td class="text-center font-small item_3" id="item_3">0</td>
                  <td class="text-center font-small item_4" id="item_4">0</td>
                  <td class="text-center font-small border-left item_5" id="item_5">0</td>
                </tr>
                <tr id="dateOfAnalysis">
                  <td class="font-weight-bold text-center font-small bg-dark text-white sticky-col">Date Analized</td>
                  <td class="text-center font-small border-right item_1" id="item_1">0</td>
                  <td class="text-center font-small item_2" id="item_2">0</td>
                  <td class="text-center font-small item_3" id="item_3">0</td>
                  <td class="text-center font-small item_4" id="item_4">0</td>
                  <td class="text-center font-small border-left item_5" id="item_5">0</td>
                </tr>
                <tr id="horometer">
                  <td class="font-weight-bold text-center font-small bg-dark text-white sticky-col">Hours SMU</td>
                  <td class="text-center font-small border-right item_1" id="item_1">0</td>
                  <td class="text-center font-small item_2" id="item_2">0</td>
                  <td class="text-center font-small item_3" id="item_3">0</td>
                  <td class="text-center font-small item_4" id="item_4">0</td>
                  <td class="text-center font-small border-left item_5" id="item_5">0</td>
                </tr>
                <tr id="horometer_component">
                  <td class="font-weight-bold text-center font-small bg-dark text-white sticky-col">Horometer Component</td>
                  <td class="text-center font-small border-right item_1" id="item_1">0</td>
                  <td class="text-center font-small item_2" id="item_2">0</td>
                  <td class="text-center font-small item_3" id="item_3">0</td>
                  <td class="text-center font-small item_4" id="item_4">0</td>
                  <td class="text-center font-small border-left item_5" id="item_5">0</td>
                </tr>
                <tr id="oilTime">
                  <td class="font-weight-bold text-center font-small bg-dark text-white sticky-col">Hours Oil</td>
                  <td class="text-center font-small border-right item_1" id="item_1">0</td>
                  <td class="text-center font-small item_2" id="item_2">0</td>
                  <td class="text-center font-small item_3" id="item_3">0</td>
                  <td class="text-center font-small item_4" id="item_4">0</td>
                  <td class="text-center font-small border-left item_5" id="item_5">0</td>
                </tr>
                <tr id="oilChange">
                  <td class="font-weight-bold text-center font-small bg-dark text-white sticky-col">{{ $isGreaseSample ? 'Grease Changed?' : 'Oil Changed?' }}</td>
                  <td class="text-center font-small border-right item_1" id="item_1">0</td>
                  <td class="text-center font-small item_2" id="item_2">0</td>
                  <td class="text-center font-small item_3" id="item_3">0</td>
                  <td class="text-center font-small item_4" id="item_4">0</td>
                  <td class="text-center font-small border-left item_5" id="item_5">0</td>
                </tr>
                <tr id="filterChange">
                  <td class="font-weight-bold text-center font-small bg-dark text-white sticky-col">Filter Changed?</td>
                  <td class="text-center font-small border-right item_1" id="item_1">--</td>
                  <td class="text-center font-small item_2" id="item_2">--</td>
                  <td class="text-center font-small item_3" id="item_3">--</td>
                  <td class="text-center font-small item_4" id="item_4">--</td>
                  <td class="text-center font-small border-left item_5" id="item_5">--</td>
                </tr>
                <tr id="oilWeight">
                  <td class="font-weight-bold text-center font-small bg-dark text-white sticky-col">Oil Weight</td>
                  <td class="text-center font-small border-right item_1" id="item_1">0</td>
                  <td class="text-center font-small item_2" id="item_2">0</td>
                  <td class="text-center font-small item_3" id="item_3">0</td>
                  <td class="text-center font-small item_4" id="item_4">0</td>
                  <td class="text-center font-small border-left item_5" id="item_5">0</td>
                </tr>
                <tr id="generalCondition">
                  <td class="font-weight-bold text-center font-small text-white sticky-col" style="background-color:#dc3545;">General Condition</td>
                  <td class="text-center font-small border-right item_1" id="item_1">--</td>
                  <td class="text-center font-small item_2" id="item_2">--</td>
                  <td class="text-center font-small item_3" id="item_3">--</td>
                  <td class="text-center font-small item_4" id="item_4">--</td>
                  <td class="text-center font-small border-left item_5" id="item_5">--</td>
                </tr>
                <tr id="wearOutCondition">
                  <td class="font-weight-bold text-center font-small text-white sticky-col" style="background-color:#dc3545;">Wear Condition</td>
                  <td class="text-center font-small border-right item_1" id="item_1">--</td>
                  <td class="text-center font-small item_2" id="item_2">--</td>
                  <td class="text-center font-small item_3" id="item_3">--</td>
                  <td class="text-center font-small item_4" id="item_4">--</td>
                  <td class="text-center font-small border-left item_5" id="item_5">--</td>
                </tr>
                @if(!$isGreaseSample)
                <tr id="contaminationCond">
                  <td class="font-weight-bold text-center font-small text-white sticky-col" style="background-color:#dc3545;">Contamination Cond</td>
                  <td class="text-center font-small border-right item_1" id="item_1">--</td>
                  <td class="text-center font-small item_2" id="item_2">--</td>
                  <td class="text-center font-small item_3" id="item_3">--</td>
                  <td class="text-center font-small item_4" id="item_4">--</td>
                  <td class="text-center font-small border-left item_5" id="item_5">--</td>
                </tr>
                <tr id="lubeHelathCond">
                  <td class="font-weight-bold text-center font-small text-white sticky-col" style="background-color:#dc3545;">Lube Helath Cond</td>
                  <td class="text-center font-small border-right item_1" id="item_1">--</td>
                  <td class="text-center font-small item_2" id="item_2">--</td>
                  <td class="text-center font-small item_3" id="item_3">--</td>
                  <td class="text-center font-small item_4" id="item_4">--</td>
                  <td class="text-center font-small border-left item_5" id="item_5">--</td>
                </tr>
                @endif
                @foreach ($tests as $test)
                <tr class="element" id="testSample_{{$test->id}}">
                  <td class="font-weight-bold text-center font-small text-white sticky-col" style="background-color:{{Str::startsWith($test->reference, 'CDiamIso') ? '#ffc107' : $test->getTest->color}};">{{$test->name}}</td>
                  {{--
                  <td class="text-center font-small border-right item_1" id="item_1">0</td>
                  <td class="text-center font-small item_2" id="item_2">0</td>
                  <td class="text-center font-small item_3" id="item_3">0</td>
                  <td class="text-center font-small item_4" id="item_4">0</td>
                  <td class="text-center font-small border-left item_5" id="item_5">0</td>
                  --}}
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<div class="printable">
  <div class="modal fade printable" id="graphModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" style="min-width: 80% !important;">
      <div class="modal-content  " style="min-width: 80% !important;">
        <div class="modal-header">
          <div class="row">
            <div class="col">
              <h4 class="modal-title" id="mySmallModalLabel">Sample: <b class="font-weight-bold">{{$history->code}}</b></h4>
            </div>
            <div class="col">
              <h4>Viendo resultados de: <span id="msgModalGraficos">Historico completo</span></h4>
            </div>
          </div>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div>
        <div class="modal-body" id="modalPrint">
          <div class="row mb-3 no-print">
            <div class="col-12">
              <button id="btnToggleFilters" class="btn btn-info btn-sm">
                <i class="fa fa-filter"></i> Mostrar Filtros
              </button>
            </div>
          </div>

          <div class="row mb-3 no-print" id="chartFiltersContainer" style="display: none;">
            <div class="col-12">
              <div class="box box-solid">
                <div class="box-header with-border">
                  <h4 class="box-title">Filtros de Gráficas</h4>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-md-3">
                      <div class="form-group">
                        <label for="filterOilChange">{{ $isGreaseSample ? 'Cambio de Grasa:' : 'Cambio de Aceite:' }}</label>
                        <select id="filterOilChange" class="form-control">
                          <option value="">-- Todos --</option>
                          <option value="1">Sí</option>
                          <option value="0">No</option>
                        </select>
                      </div>
                    </div>

                    <div class="col-md-3">
                      <div class="form-group">
                        <label for="filterFilterChange">Filtro Cambiado:</label>
                        <select id="filterFilterChange" class="form-control">
                          <option value="">-- Todos --</option>
                          <option value="1">Sí</option>
                          <option value="0">No</option>
                        </select>
                      </div>
                    </div>

                    <div class="col-md-3">
                      <div class="form-group">
                        <label for="filterDateFrom">Fecha Desde (Sample Date):</label>
                        <input type="date" id="filterDateFrom" class="form-control">
                      </div>
                    </div>

                    <div class="col-md-3">
                      <div class="form-group">
                        <label for="filterDateTo">Fecha Hasta (Sample Date):</label>
                        <input type="date" id="filterDateTo" class="form-control">
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-md-12">
                      <button id="btnApplyChartFilters" class="btn btn-success btn-sm">
                        <i class="fa fa-filter"></i> Aplicar Filtros
                      </button>
                      <button id="btnClearChartFilters" class="btn btn-secondary btn-sm">
                        <i class="fa fa-times"></i> Limpiar Filtros
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row mb-3" id="testPrint">
            <div class="col-md-8" style="padding-right: 2px;">
              <h4 class="chart-main-title">Gráfica de Comparación Simple</h4>
              <p class="text-muted chart-section-help">Visualiza la tendencia de una variable en el tiempo para comparar rápidamente los resultados del historial.</p>
              <div id="oes_legends"></div>
              <div id="grap1" class="chart">
                <canvas id="line_chart"></canvas>
              </div>
              <div id="grap2" class="chart">
                <canvas id="bar_chart"></canvas>
              </div>
            </div>
            <div class="col-md-4 no-print" style="padding-left: 2px;">
              <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">Opciones</h4>
                    </div>
                  </div>
                </div>
                <div class="box-body">
                  <div class="form-group">
                    <label for="">Selecione grafica</label>
                    <select id="selectGrahp" class="form-control" name="" id="">
                      <option value="2">Barra</option>
                      <option value="1" selected>Linea</option>
                    </select>
                  </div>
                </div>
                <div class="box-footer">
                  <div class="row">
                    <div class="col-md-12" style="margin-top: 10px;">
                      <button id="btnDownload" type="button" class="btn btn_admin btn-block"><i class="fa fa-file-pdf-o"></i> Descargar</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="box" id="ftir_legends_container">
                <div class="box-body">
                  <div id="ftir_fdm_legends"></div>
                </div>
              </div>
              <div class="box" id="visc_legends_container">
                <div class="box-body">
                  <div id="visc_pc_legends"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="row mb-3 no-print" id="comparisonControls">
            <div class="col-12">
              <div class="box box-solid">
                <div class="box-header with-border" data-toggle="collapse" data-target="#comparisonBody" aria-expanded="false" aria-controls="comparisonBody" style="cursor:pointer;">
                  <h4 class="box-title">
                    Gráficas comparativas (Multi-eje Y)
                    <span id="chartCountBadge" class="badge" style="background:#337ab7; color:white; margin-left:8px; display:none;">0</span>
                    <i class="fa fa-chevron-down pull-right" id="comparisonToggleIcon" style="margin-top:3px; transition: transform 0.2s;"></i>
                  </h4>
                  <p class="text-muted comparison-help-text" style="margin: 4px 0 0;">
                    Compare varias variables en una sola gráfica. Cada variable puede usar su propio eje Y para mantener una lectura clara, incluso cuando tienen unidades o escalas diferentes.
                  </p>
                </div>
                <div class="collapse" id="comparisonBody">
                  <div class="box-body">
                    <div class="row mb-1">
                      <div class="col-12">
                        <p class="text-muted comparison-help-text" style="margin: 0;">
                          <i class="fa fa-info-circle"></i>
                          <strong>Eje X superior:</strong> active una segunda referencia para ver horas de equipo, horas de componente u horas del fluido.<br>
                          <strong>Unidades en Y:</strong> asigne unidades por eje para interpretar correctamente cada variable.
                        </p>
                      </div>
                    </div>
                    <div class="row mb-2">
                      <div class="col-md-3">
                        <div class="form-group">
                          <label><strong>Eje X superior:</strong></label>
                          <select id="topXAxisSelect" class="form-control form-control-sm">
                            <option value="none">-- Ninguno --</option>
                            <option value="horometer_component">Horas del Componente</option>
                            <option value="horometer">SMU (Horas Equipo)</option>
                            <option value="oil_time">Horas del Fluido</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                          <label style="font-size:11px; color:#333333; font-weight:bold;">Unidad Eje Y1 (Izq.)</label>
                          <select id="unitY1" class="form-control form-control-sm">
                            <option value="">-- Sin unidad --</option>
                            <option value="ppm">ppm</option>
                            <option value="%">%</option>
                            <option value="%wt">%wt</option>
                            <option value="abs/0.1mm">abs/0.1mm</option>
                            <option value="abs/cm">abs/cm</option>
                            <option value="mgKOH/g">mgKOH/g</option>
                            <option value="cSt">cSt</option>
                            <option value="índice">índice (sin unidad)</option>
                            <option value="conteo (#)">conteo (#)</option>
                            <option value="µm">µm</option>
                            <option value="mg">mg</option>
                            <option value="condición/cualitativo">condición/cualitativo</option>
                            <option value="código ISO/clasificación">código ISO/clasificación</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                          <label style="font-size:11px; color:#c0392b; font-weight:bold;">Unidad Eje Y2 (Der.)</label>
                          <select id="unitY2" class="form-control form-control-sm">
                            <option value="">-- Sin unidad --</option>
                            <option value="ppm">ppm</option>
                            <option value="%">%</option>
                            <option value="%wt">%wt</option>
                            <option value="abs/0.1mm">abs/0.1mm</option>
                            <option value="abs/cm">abs/cm</option>
                            <option value="mgKOH/g">mgKOH/g</option>
                            <option value="cSt">cSt</option>
                            <option value="índice">índice (sin unidad)</option>
                            <option value="conteo (#)">conteo (#)</option>
                            <option value="µm">µm</option>
                            <option value="mg">mg</option>
                            <option value="condición/cualitativo">condición/cualitativo</option>
                            <option value="código ISO/clasificación">código ISO/clasificación</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                          <label style="font-size:11px; color:#27ae60; font-weight:bold;">Unidad Eje Y3 (Der.2)</label>
                          <select id="unitY3" class="form-control form-control-sm">
                            <option value="">-- Sin unidad --</option>
                            <option value="ppm">ppm</option>
                            <option value="%">%</option>
                            <option value="%wt">%wt</option>
                            <option value="abs/0.1mm">abs/0.1mm</option>
                            <option value="abs/cm">abs/cm</option>
                            <option value="mgKOH/g">mgKOH/g</option>
                            <option value="cSt">cSt</option>
                            <option value="índice">índice (sin unidad)</option>
                            <option value="conteo (#)">conteo (#)</option>
                            <option value="µm">µm</option>
                            <option value="mg">mg</option>
                            <option value="condición/cualitativo">condición/cualitativo</option>
                            <option value="código ISO/clasificación">código ISO/clasificación</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="row comparison-config-row comparison-builder-section">
                      <div class="comparison-config-left">
                        <div class="comparison-selection-text">
                          <label>Seleccione resultados y asigne el eje Y:</label>
                          <p class="text-muted" style="font-size: 0.8rem; margin: 2px 0 6px; white-space: normal; word-wrap: break-word; max-width: 100%;">
                            <i class="fa fa-info-circle"></i>
                            Marque las variables a graficar y asigne a cada una el eje Y correspondiente (Y1 izq., Y2 der. o Y3 der.2) según la escala que requiera. Puede seleccionar múltiples variables a la vez.
                          </p>
                        </div>
                        <div class="comparison-selection-table">
                          <div class="comparison-selection-table-main">
                            <div class="multi-axis-header">
                              <div class="multi-axis-col-variable"><small><strong>Variable</strong></small></div>
                              <div class="multi-axis-col-axis"><small><strong>Eje Y</strong></small></div>
                            </div>
                            <div id="testsCheckboxContainer" class="multi-axis-tests-container">
                            </div>
                          </div>
                          <div class="comparison-config-right">
                            <div class="box box-default" style="margin-bottom: 0;">
                              <div class="box-body" style="padding: 8px;">
                                <div class="multi-axis-panel-title"><i class="fa fa-calendar"></i> Filtro por fecha</div>
                                <div class="multi-axis-date-row">
                                  <div class="multi-axis-date-col">
                                    <label style="font-size:11px; font-weight:bold; margin-bottom:2px;">Desde:</label>
                                    <input type="date" id="compDateFrom" class="form-control form-control-sm">
                                  </div>
                                  <div class="multi-axis-date-col">
                                    <label style="font-size:11px; font-weight:bold; margin-bottom:2px;">Hasta:</label>
                                    <input type="date" id="compDateTo" class="form-control form-control-sm">
                                  </div>
                                </div>
                                <div class="multi-axis-actions-row">
                                  <button class="btn btn-info btn-sm" id="btnApplyCompFilter">
                                    <i class="fa fa-filter"></i> Aplicar
                                  </button>
                                  <button class="btn btn-default btn-sm" id="btnClearCompFilter">
                                    <i class="fa fa-times"></i> Limpiar
                                  </button>
                                </div>
                                <small id="compFilterStatus" class="text-muted" style="display:none;">
                                  <i class="fa fa-filter text-info"></i> Filtro activo
                                </small>
                                <button class="btn btn-primary btn-block" id="btnAddChart" style="margin-top: 10px;">
                                  <i class="fa fa-plus"></i> Agregar Gráfica
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="comparison-charts-section">
            <div class="row mb-2">
              <div class="col-12 text-right">
                <button type="button" id="btnRemoveAllCharts" class="btn btn-danger btn-sm" style="display:none;" onclick="removeAllComparisonCharts(event)">
                  <i class="fa fa-trash"></i> Eliminar todas las gráficas
                </button>
              </div>
            </div>
            <div id="dynamicChartsContainer" class="row mb-3"></div>
          </div>
        </div>
        <!-- <div class="modal-footer no-print">
          <button class="btn btn-warning btn-block" id="btnPrint">IMPRIMIR</button>
        </div> -->
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
</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@9"></script>

<script type="text/javascript">
  let datesFilter = [];
  let elementData = [];
  let elementDataCopy = [];
  let filtered = [];
  let filteredPositions = [];
  let dataLabels = [];
  let dataLabelsCopy = [];
  let topXData = { horometer_component: [], horometer: [], oil_time: [] };

  function copyElements(elements) {
    let elementsCopy = [];
    elements.map(element => {
      el = {
        label: element.label,
        data: JSON.parse(JSON.stringify(element.data)),
        fill: element.fill,
        borderColor: element.borderColor,
        backgroundColor: element.backgroundColor,
        hidden: element.hidden
      }
      elementsCopy.push(el)
    })
    return elementsCopy;
  }

  function filter(initDate, finalDate) {
    dataLabelsCopy = [...dataLabels];
    elementDataCopy = copyElements(elementData);

    $('#msgModalGraficos').text(`${initDate} - ${finalDate}`)

    initDate = new Date(initDate + 'T00:00');
    finalDate = new Date(finalDate + 'T00:00');
    console.log(initDate, finalDate)
    datesFilter.map((item) => {
      $('.item_' + item.id).hide();
    })

    filtered = datesFilter.filter((item) => {
      // console.log(initDate.getTime(), item.date.getTime(), finalDate.getTime());
      return initDate.getTime() <= item.date.getTime() && item.date.getTime() <= finalDate.getTime()
    })

    filteredPositions = [];
    filtered.map((item) => {
      $('.item_' + item.id).show();
      filteredPositions.push(item.id - 1);
    })

    dataLabelsCopy = dataLabelsCopy.filter((name, i) => {
      return filteredPositions.includes(i);
    })
    dataLabelsCopy.reverse();

    elementDataCopy.map(element => {
      let elementValues = element.data.filter((el, i) => {
        return filteredPositions.includes(i);
      })
      element.data = elementValues;
    })

    revertDataset(elementDataCopy)

    firstChart.data.labels = dataLabelsCopy;
    firstChart.data.datasets = elementDataCopy;
    firstChart.update();

    second_chart.data.labels = dataLabelsCopy;
    second_chart.data.datasets = elementDataCopy;
    second_chart.update();

    updateDynamicCharts();
  }

  function revertDataset(dataset) {
    dataset.map(data => {
      data.data.reverse();
    })
  }

  function generateChartLabels(chart) {
    let legends = chart.generateLegend();
    $('#oes_legends').html(legends.oes)
    $('#ftir_fdm_legends').html(legends.ftir_fdm)
    $('#visc_pc_legends').html(legends.visc_pc)
  }

  function sanitizeChartDatasets(datasets) {
    if (!Array.isArray(datasets)) {
      return [];
    }
    return datasets.map(function(ds) {
      return {
        label: ds.label,
        data: Array.isArray(ds.data) ? ds.data.slice() : [],
        borderColor: ds.borderColor,
        backgroundColor: ds.backgroundColor,
        fill: ds.fill,
        borderWidth: ds.borderWidth,
        pointRadius: ds.pointRadius,
        pointHoverRadius: ds.pointHoverRadius,
        hidden: ds.hidden,
        yAxisID: ds.yAxisID
      };
    });
  }

  function sanitizeChartOptions(options) {
    if (!options || typeof options !== 'object') {
      return {};
    }

    const safeOptions = {
      responsive: options.responsive,
      maintainAspectRatio: options.maintainAspectRatio,
      legend: {
        display: options.legend && typeof options.legend.display !== 'undefined' ? options.legend.display : true,
        position: options.legend && options.legend.position ? options.legend.position : 'bottom'
      },
      tooltips: options.tooltips ? {
        mode: options.tooltips.mode,
        intersect: options.tooltips.intersect
      } : undefined,
      elements: options.elements ? {
        line: options.elements.line ? {
          tension: options.elements.line.tension
        } : undefined
      } : undefined,
      scales: {
        xAxes: [],
        yAxes: []
      }
    };

    if (options.scales && Array.isArray(options.scales.xAxes)) {
      safeOptions.scales.xAxes = options.scales.xAxes.map(function(axis) {
        return {
          id: axis.id,
          type: axis.type,
          position: axis.position,
          labels: Array.isArray(axis.labels) ? axis.labels.slice() : undefined,
          scaleLabel: axis.scaleLabel ? {
            display: axis.scaleLabel.display,
            labelString: axis.scaleLabel.labelString,
            fontColor: axis.scaleLabel.fontColor
          } : undefined,
          gridLines: axis.gridLines ? {
            drawOnChartArea: axis.gridLines.drawOnChartArea
          } : undefined,
          ticks: axis.ticks ? {
            autoSkip: axis.ticks.autoSkip,
            beginAtZero: axis.ticks.beginAtZero,
            fontColor: axis.ticks.fontColor
          } : undefined
        };
      });
    }

    if (options.scales && Array.isArray(options.scales.yAxes)) {
      safeOptions.scales.yAxes = options.scales.yAxes.map(function(axis) {
        return {
          id: axis.id,
          type: axis.type,
          position: axis.position,
          scaleLabel: axis.scaleLabel ? {
            display: axis.scaleLabel.display,
            labelString: axis.scaleLabel.labelString,
            fontColor: axis.scaleLabel.fontColor
          } : undefined,
          gridLines: axis.gridLines ? {
            drawOnChartArea: axis.gridLines.drawOnChartArea
          } : undefined,
          ticks: axis.ticks ? {
            beginAtZero: axis.ticks.beginAtZero,
            fontColor: axis.ticks.fontColor
          } : undefined
        };
      });
    }

    return safeOptions;
  }

  $('#btnFilter').click(function() {
    if ($('#initDate').val() && $('#finalDate').val()) {
      let init = $('#initDate').val();
      let final = $('#finalDate').val();
      filter(init, final);
    }
  });

  $('#btnClear').click(function() {
    $('#msgModalGraficos').text('Historico completo')

    datesFilter.map((item) => {
      $('.item_' + item.id).show();
    })

    firstChart.data.labels = dataLabels;
    firstChart.data.datasets = elementData;
    firstChart.update();

    second_chart.data.labels = dataLabels;
    second_chart.data.datasets = elementData;
    second_chart.update();

    updateDynamicCharts();
  })

  $('#btnToggleFilters').click(function() {
    let filterContainer = $('#chartFiltersContainer');
    if (filterContainer.is(':visible')) {
      filterContainer.slideUp(300);
      $(this).html('<i class="fa fa-filter"></i> Mostrar Filtros');
    } else {
      filterContainer.slideDown(300);
      $(this).html('<i class="fa fa-filter"></i> Ocultar Filtros');
    }
  });

  $('#btnApplyChartFilters').click(function() {
    let oilChange = $('#filterOilChange').val();
    let filterChange = $('#filterFilterChange').val();
    let dateFrom = $('#filterDateFrom').val();
    let dateTo = $('#filterDateTo').val();

    applyChartFilters(oilChange, filterChange, dateFrom, dateTo);
  });

  $('#btnClearChartFilters').click(function() {
    $('#filterOilChange').val('');
    $('#filterFilterChange').val('');
    $('#filterDateFrom').val('');
    $('#filterDateTo').val('');
    
    datesFilter.map((item) => {
      $('.item_' + item.id).show();
    });

    firstChart.data.labels = dataLabels;
    firstChart.data.datasets = elementData;
    firstChart.update();

    second_chart.data.labels = dataLabels;
    second_chart.data.datasets = elementData;
    second_chart.update();

    updateDynamicCharts();
  });

  function applyChartFilters(oilChange, filterChange, dateFrom, dateTo) {
    dataLabelsCopy = [...dataLabels];
    elementDataCopy = copyElements(elementData);

    let dateFromObj = dateFrom ? new Date(dateFrom + 'T00:00') : null;
    let dateToObj = dateTo ? new Date(dateTo + 'T23:59') : null;

    let filterMsg = 'Filtros activos: ';
    let filterCount = 0;
    if (oilChange !== '') filterCount++;
    if (filterChange !== '') filterCount++;
    if (dateFrom !== '') filterCount++;
    if (dateTo !== '') filterCount++;
    
    if (filterCount === 0) {
      filterMsg = 'Histórico completo';
    } else {
      if (oilChange !== '') filterMsg += `Aceite: ${oilChange === '1' ? 'Sí' : 'No'} | `;
      if (filterChange !== '') filterMsg += `Filtro: ${filterChange === '1' ? 'Sí' : 'No'} | `;
      if (dateFrom !== '') filterMsg += `Desde: ${dateFrom} | `;
      if (dateTo !== '') filterMsg += `Hasta: ${dateTo}`;
      filterMsg = filterMsg.replace(/\s\|\s$/, '');
    }

    $('#msgModalGraficos').text(filterMsg);

    datesFilter.map((item) => {
      $('.item_' + item.id).hide();
    });

    let filteredItems = datesFilter.filter((item) => {
      if (oilChange !== '' && parseInt(item.oil_change) !== parseInt(oilChange)) {
        return false;
      }

      if (filterChange !== '' && parseInt(item.filter_change) !== parseInt(filterChange)) {
        return false;
      }

      if (dateFromObj && item.date < dateFromObj) {
        return false;
      }

      if (dateToObj && item.date > dateToObj) {
        return false;
      }

      return true;
    });

    if (filteredItems.length === 0) {
      Swal.fire(
        'Sin resultados',
        'No hay datos que coincidan con los filtros seleccionados',
        'info'
      );
      return;
    }

    filteredPositions = [];
    filteredItems.map((item) => {
      $('.item_' + item.id).show();
      filteredPositions.push(item.id - 1);
    });

    dataLabelsCopy = dataLabelsCopy.filter((name, i) => {
      return filteredPositions.includes(i);
    });
    dataLabelsCopy.reverse();

    elementDataCopy.map(element => {
      let elementValues = element.data.filter((el, i) => {
        return filteredPositions.includes(i);
      });
      element.data = elementValues;
    });

    revertDataset(elementDataCopy);

    firstChart.data.labels = dataLabelsCopy;
    firstChart.data.datasets = elementDataCopy;
    firstChart.update();

    second_chart.data.labels = dataLabelsCopy;
    second_chart.data.datasets = elementDataCopy;
    second_chart.update();

    updateDynamicCharts();
  }

  $('#grap2').css('display', 'none');

  $('#selectGrahp').change(function() {
    if ($('#selectGrahp').val() == "1") {
      $('#grap1').css('display', 'block');
      $('#grap2').css('display', 'none');
    } else {
      $('#grap2').css('display', 'block');
      $('#grap1').css('display', 'none');
    }
  })

  $('#btnPrint').click(function() {
    window.print();
  })

  $('#btnSendEmail').on('click', async function() {
    let dest = $('#email').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.sendAllReport', [$history->code])}}",
        data: {
          email: dest,
          subject: matter,
          des: description,
          _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('')
          $('#description2').val('')
          $('#matter2').val('')
          // $('#modalSendMail').modal('hide')
          Swal.fire(
            'Enviado',
            'El reporte ha sido enviado satisfactoriamente al destinatario',
            'success'
          )
        },
        error: function(xhr, status, error) {
          Swal.fire(
            'Error',
            'Hemos tenido problemas, intente mas tarde',
            'error'
          )
        }
      });
    }
  })

  $('#btnDownload').click(function() {
    let current_labels = dataLabelsCopy;
    let current_samples = copyElements(elementDataCopy);
    let current_sample = '<br />
<b>Notice</b>:  Undefined variable: sample in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\accounts\customers\reports\history.blade.php</b> on line <b>1457</b><br />
null';
    let type = $('#selectGrahp').val();
    let dynamicChartsPayload = [];

    Object.keys(dynamicCharts).forEach(function(chartId) {
      const chartInfo = dynamicCharts[chartId];
      if (!chartInfo || !chartInfo.instance) {
        return;
      }
      // Omitir gráficas sin datos en el rango de fecha seleccionado
      const $noDataMsg = $('#' + chartId + ' .comp-no-data-msg');
      if ($noDataMsg.length && $noDataMsg.is(':visible')) {
        return;
      }
      const chartInstance = chartInfo.instance;
      dynamicChartsPayload.push({
        id: chartId,
        title: $('#' + chartId + ' .box-title').text().trim(),
        chartType: chartInstance.config && chartInstance.config.type ? chartInstance.config.type : 'line',
        labels: Array.isArray(chartInstance.data.labels) ? chartInstance.data.labels.slice() : [],
        datasets: sanitizeChartDatasets(chartInstance.data.datasets),
        options: sanitizeChartOptions(chartInstance.options)
      });
    });
    $.ajax({
      type: "post",
      url: "{{route('administrator.report.graph.reportView')}}",
      contentType: 'application/json',
      dataType: "json",
      // processData: false,
      data: JSON.stringify({
        samples: current_samples,
        labels: current_labels,
        sample: current_sample,
        dynamicCharts: dynamicChartsPayload,
        chartType: type,
        _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) {
        console.log(response)
        Swal.close()
        let newWindow = window.open(" ", 'PRINT', `height=${window.outerHeight*0.9},width=${window.outerWidth*0.7},scrollbars=yes,resizable=yes`);
        newWindow.document.write(response.view)
        newWindow.document.close();
        newWindow.focus();

        try {
          const applyScrollStyles = function() {
            if (!newWindow || !newWindow.document) {
              return;
            }
            newWindow.document.documentElement.style.height = 'auto';
            newWindow.document.documentElement.style.overflowY = 'auto';
            newWindow.document.documentElement.style.overflowX = 'auto';
            if (newWindow.document.body) {
              newWindow.document.body.style.height = 'auto';
              newWindow.document.body.style.minHeight = '100vh';
              newWindow.document.body.style.overflowY = 'auto';
              newWindow.document.body.style.overflowX = 'auto';
            }
          };

          if (newWindow.document.readyState === 'complete') {
            applyScrollStyles();
          } else {
            newWindow.addEventListener('load', applyScrollStyles);
            setTimeout(applyScrollStyles, 150);
          }
        } catch (e) {
          console.warn('No se pudo forzar estilos de scroll en la ventana de previsualizacion', e);
        }
      },
      error: function(xhr, status, error) {
        Swal.fire(
          'Error',
          'Hemos tenido problemas, intente mas tarde',
          'error'
        )
      }
    });
  })
</script>

<script type="text/javascript">
  var samples = <br />
<b>Notice</b>:  Undefined variable: samples in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\accounts\customers\reports\history.blade.php</b> on line <b>1552</b><br />
null;
  // samples = samples.reverse();

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

  grafData.valuesAg = Array(samples.length).fill(0);
  grafData.valuesPb = Array(samples.length).fill(0);
  grafData.valuesCu = Array(samples.length).fill(0);
  grafData.valuesSn = Array(samples.length).fill(0);

  grafData.valuesV = Array(samples.length).fill(0);
  grafData.valuesSi = Array(samples.length).fill(0);
  grafData.valuesNa = Array(samples.length).fill(0);
  grafData.valuesK = Array(samples.length).fill(0);
  grafData.valuesMo = Array(samples.length).fill(0);

  grafData.valuesFe = Array(samples.length).fill(0);
  grafData.valuesLPWFe = Array(samples.length).fill(0);

  grafData.valuesAl = Array(samples.length).fill(0);
  grafData.valuesCr = Array(samples.length).fill(0);
  grafData.valuesNi = Array(samples.length).fill(0);
  grafData.valuesTi = Array(samples.length).fill(0);

  grafData.valuesOXI = Array(samples.length).fill(0);
  grafData.valuesNIT = Array(samples.length).fill(0);
  grafData.valuesTAN = Array(samples.length).fill(0);
  grafData.valuesTBN = Array(samples.length).fill(0);

  grafData.valuesSoot = Array(samples.length).fill(0);
  grafData.valuesSulf = Array(samples.length).fill(0);
  grafData.valuesBio = Array(samples.length).fill(0);
  grafData.valuesFuel = Array(samples.length).fill(0);
  grafData.valuesGlycol = Array(samples.length).fill(0);

  grafData.valuesVisc = Array(samples.length).fill(0);

  grafData.valuesWaterPpm = Array(samples.length).fill(0);
  grafData.valuesWaterAbs = Array(samples.length).fill(0);

  grafData.valuesISO4 = Array(samples.length).fill(0);
  grafData.valuesISO6 = Array(samples.length).fill(0);
  grafData.valuesISO14 = Array(samples.length).fill(0);

  grafData.valuesB = Array(samples.length).fill(0);
  grafData.valuesBa = Array(samples.length).fill(0);
  grafData.valuesCa = Array(samples.length).fill(0);
  grafData.valuesMg = Array(samples.length).fill(0);
  grafData.valuesMn = Array(samples.length).fill(0);
  grafData.valuesP = Array(samples.length).fill(0);
  grafData.valuesZn = Array(samples.length).fill(0);
  grafData.valuesLi = Array(samples.length).fill(0);
  grafData.valuesSb = Array(samples.length).fill(0);

  grafData.valuesWaterindex = Array(samples.length).fill(0);

  grafData.valuesAW = Array(samples.length).fill(0);
  grafData.valuesFluid = Array(samples.length).fill(0);
  grafData.valuesAoDeflex = Array(samples.length).fill(0); //new

  let samplesList = [];

  $('#olderCols').attr('colspan', samples.length)
  $.each(samples, function(y, sample) {
    index = y + 1;

    $('.element').each(function() {
      $(this).append(`<td class="text-center font-small border-right item_${index}" id="item_${index}">0</td>`)
    })

    if (index >= 6) {
      var colSpan = parseInt(index) - parseInt(4);
      $("#idThOlder").attr('colspan', colSpan);

      $("#sampleId").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">0</td>');
      $("#sampleDateTaken").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">0</td>');
      $("#sampleDateReceived").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">0</td>');
      $("#dateOfAnalysis").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">0</td>');
      $("#horometer_component").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">0</td>');
      $("#horometer").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">0</td>');
      $("#oilTime").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">0</td>');
      $("#oilChange").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">0</td>');
      $("#filterChange").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">--</td>');
      $("#oilWeight").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">0</td>');

      $("#generalCondition").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">NORMAL</td>');
      $("#wearOutCondition").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">NORMAL</td>');
      if (!@json($isGreaseSample)) {
        $("#contaminationCond").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">NORMAL</td>');
        $("#lubeHelathCond").append('<td class="text-center font-small item_' + index + '" id="item_' + index + '">NORMAL</td>');
      }
    }

    /*Sample Id*/
    $("#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('/');

    grafData.names.push(sampleDateTaken);
    topXData.horometer_component.push(sample.horometer_component || '');
    topXData.horometer.push(sample.horometer || '');
    topXData.oil_time.push(sample.oil_time || '');

    $("#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);
      var oilChangeValue = sample.oil_change === "true" ? 1 : 0;
      var filterChangeValue = sample.filter_change === 1 ? 1 : 0;
      datesFilter.push({
        date: dateTaken,
        id: index,
        code: sample.code,
        oil_change: oilChangeValue,
        filter_change: filterChangeValue
      });
      dateOfAnalysis = dateAnalysis.toLocaleDateString();
    } else {
      dateOfAnalysis = "";
    }
    $("#horometer_component #item_" + index).html(sample.horometer_component);
    $("#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);
    var filterChange = sample.filter_change === 1 ? "SI" : "NO";
    $("#filterChange #item_" + index).html(filterChange);
    /*Oil Weight*/
    $("#oilWeight #item_" + index).html(sample.oil_weight);

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