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

@section('style')
  <style media="screen">
    .contentSos{
      text-align: center;
      padding: 5px;
      color: #fff;
      background-color: #de0101;
      border-radius: 4px;
      border: none;
    }

    .contentSos h4{
      margin: 0;
    }

    .stateSample{
      width: 100%;
      padding: 10px;
      font-size: 15px;
      margin-bottom: 10px;
    }
  </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">Editar</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-6">
          <div class="box box-solid bg_dark" id="idInfoSample">
            <div class="box-header with-border">
              <div class="row align-items-center">
                <div class="col-6">
                  <h4 class="box-title">Información</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">
              @if ($history->sos=="true")
                <div class="row">
                  <div class="col-md-12 text-center">
                    <div class="contentSos">
                      <h4>SOS</h4>
                    </div>
                  </div>
                </div>
              @endif
              <div class="row">
                <div class="col-md-6">
                  <h4 class="font-weight-bold">Cliente</h4>
                  <h5><strong> {{$history->getCustomer->name}}</strong></h5>
                </div>
                <div class="col-md-6">
                  <h4 class="font-weight-bold">Flota</h4>
                  <h5><strong>{{$history->getFleet->name}}</strong></h5>
                </div>
              </div>
              <div class="row mt-10">
                <div class="col-md-6">
                  <h4 class="font-weight-bold">Equipo</h4>
                  <h5><strong>{{$history->getEquipment->unit_id}}</strong></h5>
                </div>
                <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">
                  <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 class="col-md-6">
                  <h4 class="font-weight-bold">Relleno de lubricante</h4>
                  @if ($history->lubricant_refill)
                    <h5><strong>SI</strong></h5>
                  @else
                    <h5><strong>NO</strong></h5>
                  @endif
                </div>
              </div>
              @if ($history->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($history->refill_amount, 1)}} gal</strong></h5>
                </div>
                <div class="col-md-6"></div>
              </div>
              @endif
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="row">
            <div class="col-md-12">
              <span class="badge badge-{{Config::get('constants.states_samples')[$history->state]['type']}} stateSample">{{Config::get('constants.states_samples')[$history->state]['name']}}</span>
            </div>
          </div>
          <div class="box box-solid bg_dark">
            <div class="box-header with-border">
              <div class="row align-items-center">
                <div class="col">
                  <h4 class="box-title">Actualizar</h4>
                </div>
                <div class="col text-right">
                  <div class="dropdown">
                    @isAdmin
                      @if ($history->state == 3)
                        <a href="{{route('administrator.history.published', ['code' => $history->code, 'state' => 3])}}" class="btn btn-danger btn-sm">
                          <i class="fa fa-eye-slash" aria-hidden="true"></i> Despublicar
                        </a>
                      @endif
                    @endisAdmin
                  </div>
                </div>
              </div>
            </div>
            <div class="box-body">
              <form action="{{route('administrator.history.update', [$history->id])}}" method="post" files="true" enctype="multipart/form-data">
                @csrf
                @method('put')
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label for="idComponentLocation" class="control-label">Component Location</label>
                      <select class="form-control select2" id="idComponentLocation" name="component">
                        @foreach ($components as $component)
                          <option value="{{$component->component_location}}">{{$component->getComponentLocation->name}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idMake" class="control-label">Make</label>
                      <select class="form-control select2" id="idMake" name="make">
                        @foreach ($make as $listMake)
                          <option value="{{$listMake->id}}">{{$listMake->name}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idModel" class="control-label">Model</label>
                      <select class="form-control select2" id="idModel" name="model">
                        @foreach ($model as $listModel)
                          <option value="{{$listModel->id}}">{{$listModel->name}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="form-group">
                      <label for="idDateTaken" class="control-label">Date Taken</label>
                      <input type="date" name="date_taken" id="idDateTaken" class="form-control" max="{{date('Y-m-d')}}" autocomplete="off" value="{{date('Y-m-d', strtotime($history->sample_date_taken))}}">
                    </div>
                  </div>
                  <div class="col">
                    <div class="form-group">
                      <label for="idDateReceived" class="control-label">Date Received</label>
                      <input type="date" name="date_received" id="idDateReceived" class="form-control" max="{{date('Y-m-d')}}" autocomplete="off" value="{{date('Y-m-d', strtotime($history->sample_date_received))}}">
                    </div>
                  </div>
                  @if ($history->date_of_analysis!=null)
                    <div class="col">
                      <div class="form-group">
                        <label for="idDateAnalized" class="control-label">Date Analized</label>
                        <input type="date" name="date_analized" id="idDateAnalized" class="form-control" max="{{date('Y-m-d')}}" autocomplete="off" value="{{date('Y-m-d', strtotime($history->date_of_analysis))}}">
                      </div>
                    </div>
                  @endif
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idHoursSMU" class="control-label">Hours SMU</label>
                      <input type="number" name="hours_smu" id="idHoursSMU" class="form-control" autocomplete="off" value="{{$history->horometer}}">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idHoursOil" class="control-label">Hours Oil</label>
                      <input type="number" name="hours_oil" id="idHoursOil" class="form-control" autocomplete="off" value="{{$history->oil_time}}">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="idOilChanged" class="control-label">Oil Changed?</label>
                      <select class="form-control select2" id="idOilChanged" name="oil_changed">
                        <option value="true">SI</option>
                        <option value="false">NO</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="idFilterChanged" class="control-label">Filter Changed?</label>
                      <select class="form-control select2" id="idFilterChanged" name="filter_change">
                        <option value="1">SI</option>
                        <option value="0">NO</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="idSOS" class="control-label">SOS</label>
                      <select class="form-control select2" id="idSOS" name="sos">
                        <option value="true">SI</option>
                        <option value="false">NO</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idLubricantRefill" class="control-label">Lubricant Refill?</label>
                      <select class="form-control select2" id="idLubricantRefill" name="lubricant_refill" onchange="toggleRefillAmountEdit()">
                        <option value="0">NO</option>
                        <option value="1">SI</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idRefillAmount" class="control-label">Refill Amount (gal)</label>
                      <input type="number" step="0.1" min="0.1" name="refill_amount" id="idRefillAmount" class="form-control" autocomplete="off" value="{{$history->refill_amount}}" placeholder="0.0">
                    </div>
                  </div>
                  <div class="col-md-12 mt-4">
                    <h5 class="mb-3">Ensayos y Resultados</h5>

                    <div class="table-responsive">
                      <table class="table table-bordered table-striped">
                        <thead class="thead-light">
                          <tr>
                            <th style="width: 50%">Ensayo</th>
                            <th style="width: 30%">Resultado</th>
                          </tr>
                        </thead>
                        <tbody>
                          @foreach ($results as $result)
                            <tr>
                              <td>
                                {{ $result->getTest->name ?? 'N/A' }}

                                {{-- ID oculto para saber qué resultado se edita --}}
                                <input type="hidden" name="results[{{ $result->id }}][id]" value="{{ $result->id }}">
                              </td>

                              <td>
                                <input
                                  type="text"
                                  name="results[{{ $result->id }}][value]"
                                  class="form-control"
                                  value="{{ $result->value }}"
                                  autocomplete="off"
                                >
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  </div>

                </div>
                <div class="row">
                  <div class="col-md-12">
                    <button type="submit" class="btn btn_admin btn-block">Guardar cambios</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      @isAdmin
        @if ($history->state != 5)
          <div class="row">
            <div class="col-md-12">
              <a href="{{route('administrator.history.remove', ['code' => $history->code])}}" class="btn btn-danger btn-block"><i class="fa fa-trash" aria-hidden="true"></i> Delete Report</a>
            </div>
          </div>
        @endif
      @endisAdmin
    </section>
  </div>
@endsection

@section('js')
  <script type="text/javascript">
    $(function() {
      var component = '{{$history->component_id}}';
      if (component != null) {$("#idComponentLocation").val(component).trigger('change.select2');}

      var make = '{{$history->make_id}}';
      if (make != null) {$("#idMake").val(make).trigger('change.select2');}

      var model = '{{$history->model_id}}';
      if (model != null) {$("#idModel").val(model).trigger('change.select2');}

      var oilChange = '{{$history->oil_change}}';
      if (oilChange != null) {$("#idOilChanged").val(oilChange).trigger('change.select2');}

      var filterChange = '{{$history->filter_change}}';
      if (filterChange != null) {$("#idFilterChanged").val(filterChange).trigger('change.select2');}

      var sos = '{{$history->sos}}';
      if (sos != null) {$("#idSOS").val(sos).trigger('change.select2');}

      var lubricantRefill = '{{$history->lubricant_refill}}';
      if (lubricantRefill != null) {$("#idLubricantRefill").val(lubricantRefill).trigger('change.select2');}
      
      toggleRefillAmountEdit();

      // Evento change para cuando se modifica el select de lubricant refill
      $("#idLubricantRefill").on('change', function() {
        toggleRefillAmountEdit();
      });
    });

    function toggleRefillAmountEdit() {
      var refillValue = $("#idLubricantRefill").val();
      if (refillValue == "1") {
        $("#idRefillAmount").prop('disabled', false);
        $("#idRefillAmount").prop('required', true);
        
        // Agregar eventos de redondeo
        $("#idRefillAmount").off('blur keypress').on('blur', function() {
          roundRefillAmountEdit();
        }).on('keypress', function(e) {
          if (e.which === 13) { // Enter key
            e.preventDefault();
            roundRefillAmountEdit();
          }
        });
      } else {
        $("#idRefillAmount").prop('disabled', true);
        $("#idRefillAmount").prop('required', false);
        $("#idRefillAmount").val('0');
      }
    }

    function roundRefillAmountEdit() {
      var value = parseFloat($("#idRefillAmount").val());
      if (!isNaN(value) && value > 0) {
        $("#idRefillAmount").val(value.toFixed(1));
      }
    }

    $('.select2').select2({
      placeholder: "Selecciona una opción",
      language: {
        noResults: function () {
          return "No se encontraron resultados";
        }
      }
    });

    $('#idMake').on('change', function() {
      var value = $(this).val();

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

      $.ajax({
        type: 'POST',
        url: '/options/model',
        data: {
          "id": value
        },
        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");

          $.each(response, function( index, model ){
            $("#idModel").append('<option value="'+model.id+'">'+model.name+'</option>');
          });
        },
        error: function(xhr){
          $(".content_loading").fadeOut("slow");
          swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
        }
      });
    });
  </script>
@endsection