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

@section('style')
<style media="screen">
  .logDetail {
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 115px;
    overflow-y: scroll;
  }

  .logDetail>.table {
    margin: 0;
  }

  .logDetail>.table>thead>tr>th {
    padding: 0;
    font-weight: bold;
  }

  .logDetail>.table>tbody>tr>td {
    padding: 5px;
    vertical-align: middle;
  }

  .spanStateTest {
    padding: 5px;
    font-size: 15px;
  }
</style>
@endsection

@section('content')
<div class="content-wrapper" id="uploadTest">
  <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
    @if($errors->any())
    <div class="alert alert-danger">
      @foreach($errors->all() as $error)
      - {{$error}} <br>
      @endforeach
    </div>
    @endif
    <div class="row">
      <div class="col-12">
        <div class="box box-solid bg_dark mb-0">
          <div class="box-header with-border">
            <div class="row align-items-center">
              <div class="col-8">
                <h4 class="box-title"><b class="font-weight-bold">Busqueda de muestras</b></h4>
              </div>
              <div class="col-4 text-right">
                <form action="{{route('administrator.import.test.show')}}" method="get">
                  <div class="input-group input-sm">
                    <input type="text" name="code" class="form-control" placeholder="Ej: O-47, O-45" required>
                    <div class="input-group-append">
                      <button type="submit" class="btn btn-info">Buscar</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <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">{{$sample->code}}</b></h4>
              </div>
              <div class="col-6 text-right">
                <h4 class="box-title">Lote: <b class="font-weight-bold">{{$sample->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>{{$sample->getFleet->name}}</strong></h5>
              </div>
              <div class="col-md-6">
                <h4 class="font-weight-bold">Equipo</h4>
                <h5><strong>{{$sample->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>{{$sample->component}}</strong></h5>
              </div>
            </div>
            <div class="row mt-10">
              <div class="col-md-6">
                <h4 class="font-weight-bold">Lubricante</h4>
                <h5><strong>{{$sample->lubricant}}</strong></h5>
              </div>
              <div class="col-md-6">
                <h4 class="font-weight-bold">Tipo de sistema</h4>
                <h5><strong>{{$sample->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>{{$sample->oil_brand}}</strong></h5>
              </div>
              <div class="col-md-6">
                <h4 class="font-weight-bold">Peso del aceite</h4>
                <h5><strong>{{$sample->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>{{$sample->make}}</strong></h5>
              </div>
              <div class="col-md-6">
                <h4 class="font-weight-bold">Modelo</h4>
                <h5><strong>{{$sample->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>{{$sample->horometer}}</strong></h5>
              </div>
              <div class="col-md-6">
                <h4 class="font-weight-bold">Tiempo del aceite</h4>
                <h5><strong>{{$sample->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>{{$sample->oil_type}}</strong></h5>
              </div>
              <div class="col-md-6">
                <h4 class="font-weight-bold">Cambio de aceite</h4>
                @if ($sample->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">
                <h4 class="font-weight-bold">Cambio de filtro</h4>
                @if ($sample->filter_change)
                <h5><strong>SI</strong></h5>
                @else
                <h5><strong>NO</strong></h5>
                @endif
              </div>
              <div class="col-md-6">
                <h4 class="font-weight-bold">Relleno de lubricante</h4>
                @if ($sample->lubricant_refill)
                <h5><strong>SI</strong></h5>
                @else
                <h5><strong>NO</strong></h5>
                @endif
              </div>
            </div>
            @if ($sample->lubricant_refill)
            <div class="row mt-10">
              <div class="col-md-6">
                <h4 class="font-weight-bold">Cantidad de relleno</h4>
                <h5><strong>{{number_format($sample->refill_amount, 1)}} gal</strong></h5>
              </div>
              <div class="col-md-6">

              </div>
            </div>
            @endif
          </div>
        </div>
      </div>
      <div class="col-md-4">
        @if ($sample->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="row">
              <div class="col-6">
                <h4 class="font-weight-bold">Muestra</h4>
                <h5>{{date("d/m/Y", strtotime($sample->sample_date_taken))}}</h5>
              </div>
              <div class="col-6">
                <h4 class="font-weight-bold">Recibido</h4>
                <h5>{{date("d/m/Y", strtotime($sample->sample_date_received))}}</h5>
              </div>
              @if($sample->date_of_analysis!=null)
                <div class="col-6">
                  <h4 class="font-weight-bold">Análisis</h4>
                  <h5>{{date("d/m/Y", strtotime($sample->date_of_analysis))}}</h5>
                </div>
              @endif
            </div>
          </div>
        </div>
        <div class="box box-solid bg_dark">
          <div class="box-header with-border">
            <div class="row align-items-center">
              <div class="col-6">
                <span class="badge badge-{{Config::get('constants.states_samples_test')[$sampleTest->state]['type']}} spanStateTest">{{Config::get('constants.states_samples_test')[$sampleTest->state]['name']}}</span>
              </div>
              <div class="col-6 text-right">
                @if (in_array(session('labTest'), [8, 9]))
                  @if (in_array($sampleTest->state, [1, 4]))
                    <button class="btn btn_admin" data-toggle="modal" data-target="#modalUpload">Registrar resultado</button>
                  @endif
                @endif
              </div>
            </div>
          </div>
          <div class="box-body">
            <div class="logDetail">
              <table class="table table-hover table-responsive">
                <thead>
                  <tr>
                    <th class="text-center">Fecha</th>
                    <th class="text-center">Estado</th>
                    @if($sampleTest->lab_test_id == 8 || $sampleTest->lab_test_id == 9)
                    <th class="text-center">Valor</th>
                    @else
                    <th class="text-center">Archivo</th>
                    @endif
                  </tr>
                </thead>
                <tbody class="text-center">
                  @if (count($logs)>0)
                  @foreach ($logs as $log)
                    <tr>
                      <td>{{date("d/m/Y", strtotime($log->created_at))}}</td>
                      <td>
                        <span class="badge badge-{{Config::get('constants.states_samples_test')[$log->state]['type']}}">{{Config::get('constants.states_samples_test')[$log->state]['name']}}</span>
                      </td>
                      <td>
                        @if($sampleTest->lab_test_id == 8 || $sampleTest->lab_test_id == 9)
                          {{json_decode($log->value)[1][1]}} ppm
                        @else
                          <button type="button" class="btn btn-info btn-xs" onclick="infoView({{$log->sample_id}}, {{$log->id}})">
                            <i class="fa fa-file" aria-hidden="true"></i>
                          </button>
                        @endif
                      </td>
                    </tr>
                  @endforeach
                  @else
                  <tr>
                    <td colspan="3">No tienes registros</td>
                  </tr>
                  @endif
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="modal fade" id="modalUpload" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <form action="{{route('administrator.import.test.save')}}" method="post">
        <input type="hidden" id="sample_id" value="{{$sample->id}}">
        <input type="hidden" id="test_id" value="{{$sampleTest->lab_test_id}}">
        <div class="modal-content">
          <div class="modal-header">
            @if($sampleTest->lab_test_id == 8)
              <h5 class="modal-title" id="exampleModalLabel">Registrar valor de Ferrocheck</h5>
            @else
              <h5 class="modal-title" id="exampleModalLabel">Registrar valor de FDM</h5>
            @endif
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="form-group col">
                <label>Valor</label>
                <input type="number" v-model="value" class="form-control" placeholder="Valor">
              </div>
              <div v-if="test == 8" class="form-group col" style="padding-top: 10px;">
                <input type="checkbox" id="md_checkbox_37" class="filled-in chk-col-maroon" v-model="convert">
                <label for="md_checkbox_37" style="margin-top: 20px;">Convertir %W a ppm</label>
              </div>
            </div>
            <div class="form-group" v-if="test == 8">
              <label>Valor final</label>
              <div class="input-group">
                <input type="number" name="ferrValue" disabled :value="calculateValue" class="form-control">
                <div class="input-group-addon">ppm</div>
              </div>
            </div>
          </div>
          <div class="modal-footer text-right">
            <button type="button" @click="sendValue(false)" class="btn btn-danger">Rechazar</button>
            <button type="button" @click="sendValue(true)" class="btn btn-primary btn-success">Guardar</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="idModalInfoView" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
  <div class="modal-dialog" style="max-width: 100%; width: 90vw;">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="mySmallModalLabel">Información</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div style="overflow: auto;">
          <table class="table table-sm text-center table-bordered mb-0">
            <tbody class="text-center" id="idTableBody">

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>


@endsection

@section('js')


<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 type="text/javascript">
  function infoView(sampleId, logId) {
    $("#idTableBody").empty();
    $.ajax({
      type: 'POST',
      url: '/administrator/import/test/infoViewTest',
      data: {
        "sampleId": sampleId,
        "logId": logId
      },
      dataType: 'json',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      beforeSend: function() {$(".content_loading").fadeIn("slow");},
      success: function(response) {
        $(".content_loading").fadeOut("slow");

        if (response.state == 1) {

          $.each(response.data, function(x, row) {
            $("#idModalInfoView #idTableBody").append('<tr id="idTableBodyRow'+x+'"></tr>');
            $.each(row, function(y, column) {
              // Allow 0 as valid value, only replace empty strings, null, or undefined
              var col = (column !== "" && column !== null && column !== undefined) ? column : "--";

              if (x==0) {$("#idModalInfoView #idTableBodyRow"+x).append('<td class="font-weight-bold">'+col+'</td>');
              }else{$("#idModalInfoView #idTableBodyRow"+x).append('<td>'+col+'</td>');}
            });
          });

          $("#idModalInfoView").modal();
        }else if (response.state == 2) {
          Swal.fire('Oops!', response.message, 'warning');
        }else{
          Swal.fire('Oops!', 'Hemos tenido problemas, intenta nuevamente', 'warning');
        }
      },
      error: function(xhr, status, error) {
        $(".content_loading").fadeOut("slow");
        Swal.fire('Oops!', 'Hemos tenido problemas, intenta nuevamente', 'warning');
      }
    });
  }
</script>

<script>
  new Vue({
    el: '#uploadTest',
    data() {
      return {
        csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        value: 0,
        convertedValue: 0,
        sample_id: document.getElementById('sample_id').value,
        test: document.getElementById('test_id').value,
        convert: false
      }
    },
    computed: {
      calculateValue() {
        this.convertedValue = this.convert ? +this.value * 10000 : +this.value;;
        return this.convertedValue;
      }
    },
    methods: {
      async sendValue(state) {
        $(".content_loading").fadeIn("slow");
        let req = await fetch('/administrator/import/test/save', {
          method: 'post',
          headers: {
            'X-CSRF-TOKEN': this.csrf,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            sample_id: this.sample_id,
            value: this.test == 8 ? this.convertedValue : this.value,
            state: state ? 2 : 4
          })
        });
        let res = await req.json();
        if (req.ok) {
          Swal.fire('', 'Resultado guardado', 'success')
            .then(() => {
              $(".content_loading").fadeIn("slow");
              window.location.reload()
            });
        } else {
          Swal.fire('', 'Ocurrió un problema al guardar el resultado', 'error');
        }
        $(".content_loading").fadeOut("slow");
      }
    }
  })
</script>

<script type="text/javascript">
  const options = {
    margin: 0.4,
    filename: 'Sample-details',
    image: {
      type: 'jpeg',
      quality: 0.78
    },
    html2canvas: {
      scale: 2
    },
    jsPDF: {
      unit: 'in',
      format: 'letter',
      orientation: 'portrait'
    }
  }
  $('.btn-download').click(function(e) {
    e.preventDefault();
    const element = document.getElementById('demo');
    html2pdf().from(element).set(options).save();
  });
</script>
@endsection