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

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

    <!-- Box de filtros colapsable -->
    <div id="boxfilter" class="box box-solid bg_dark hide">
      <div class="box-header with-border">
        <div class="row align-items-center">
          <div class="col-12">
            <h4 class="box-title">Filtros de Búsqueda</h4>
          </div>
        </div>
      </div>
      <div class="box-body">
        <form id="filterForm" method="GET" action="{{route('administrator.import.test')}}">
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label for="idSampleIdFilter">Sample ID</label>
                <input type="text" class="form-control" id="idSampleIdFilter" name="sampleId" value="{{request('sampleId')}}" placeholder="Ej: O-47">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="idCustomerFilter">Super Cliente</label>
                <select class="form-control select2" id="idCustomerFilter" name="customer">
                  <option value="">TODOS</option>
                  @foreach($customers as $customer)
                    <option value="{{$customer->id}}" {{request('customer') == $customer->id ? 'selected' : ''}}>{{ $customer->company}}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="idAccountFilter">Account</label>
                <input type="text" class="form-control" id="idAccountFilter" name="account" value="{{request('account')}}" placeholder="Account">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="idUnitIdFilter">Unit ID</label>
                <input type="text" class="form-control" id="idUnitIdFilter" name="unitId" value="{{request('unitId')}}" placeholder="Unit ID">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label for="idModelFilter">Modelo</label>
                <input type="text" class="form-control" id="idModelFilter" name="model" value="{{request('model')}}" placeholder="Modelo">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="idComponentFilter">Component</label>
                <input type="text" class="form-control" id="idComponentFilter" name="component" value="{{request('component')}}" placeholder="Component">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="idSystemTypeFilter">System Type</label>
                <select class="form-control select2" id="idSystemTypeFilter" name="system_type">
                  <option value="">TODOS</option>
                  @foreach($systemTypes as $systemType)
                    <option value="{{$systemType->id}}" {{request('system_type') == $systemType->id ? 'selected' : ''}}>{{$systemType->name}}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="idSosFilter">SOS</label>
                <select class="form-control" id="idSosFilter" name="sos">
                  <option value="">TODOS</option>
                  <option value="true" {{request('sos') == 'true' ? 'selected' : ''}}>SOS</option>
                  <option value="false" {{request('sos') == 'false' ? 'selected' : ''}}>Estándar</option>
                </select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label for="idSampleDateTaken">Date Taken</label>
                <input type="text" class="form-control" id="idSampleDateTaken" name="sample_date_taken" value="{{request('sample_date_taken')}}" placeholder="Select date range">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="idSampleDateReceived">Date Received</label>
                <input type="text" class="form-control" id="idSampleDateReceived" name="sample_date_received" value="{{request('sample_date_received')}}" placeholder="Select date range">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 text-left">
              <button type="submit" class="btn btn-info"><i class="fa fa-search"></i> Buscar</button>
              <a href="{{route('administrator.import.test')}}" class="btn btn-danger"><i class="fa fa-refresh" aria-hidden="true"></i> Limpiar</a>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="box">
      <div class="box-header with-border">
        <div class="row align-items-center">
          <div class="col-2">
            <h4 class="box-title font-weight-bold">Samples</h4>
          </div>
          <div class="col-10">
            <div class="box-controls pull-right">
              <div class="box-header-actions" style="margin-right: 10px;">
                <button type="button" class="btn btn-sm btn-info" id="filtro"><i class="fa fa-filter"></i> Filtros</button>
              </div>
              <div class="box-header-actions" style="margin-right: 10px;">
                <form action="{{route('administrator.import.test.show')}}" method="get">
                  <div class="input-group input-group-sm">
                    <input type="text" name="code" class="form-control mr-2" placeholder="Ej: O-47, O-45" required>
                    <div class="input-group-append">
                      <button type="submit" class="btn btn-sm btn-success">Buscar</button>
                    </div>
                  </div>
                </form>
              </div>
              <div class="box-header-actions">
                <button type="button" class="btn btn-sm btn-primary" onclick="openAuditModal()" style="margin-right: 10px;"><i class="fa fa-history"></i> Auditoría</button>
                <button type="button" class="btn btn-sm btn-warning" onclick="openMovementHistoryModal()" style="margin-right: 10px;"><i class="fa fa-random"></i> Historial movimiento</button>
                <button type="button" class="btn btn-sm btn-success" id="btnOpenDownloadModal"><i class="fa fa-download"></i></button>
                <form id="formAcceptAll" action="{{route('administrator.import.test.applyRules')}}" method="GET">
                  @csrf
                  <input type="hidden" name="type" value="2">
                  <button class="btn btn-sm btn-success btnAcceptAll" style="margin-right: 10px;">Aplicar reglas</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-body">
        <table class="table table-sm table-hover table-responsive" id="tableHistory">
          <thead>
            <tr>
              <th class="text-center">
                <p>Marcar todo</p>
                <input type="checkbox" id="md_checkbox_all" class="filled-in chk-col-maroon checkAll">
                <label for="md_checkbox_all"></label>
              </th>
              <th class="text-center">Tipo de Fluido</th>
              <th class="text-center">Sample ID</th>
              <th class="text-center">Cliente</th>
              <th class="text-center">Account</th>
              <th class="text-center">Unit ID</th>
              <th class="text-center">Modelo</th>
              <th class="text-center">Component</th>
              <th class="text-center">Oil reference</th>
              <th class="text-center">Oil weight</th>
              <th class="text-center">Laboratory samples</th>
              <th class="text-center">Date take</th>
              <th class="text-center">Date received</th>
              <th class="text-center">State</th>
              <th class="text-center">SOS</th>
              <th class="text-center">Commentary</th>
            </tr>
          </thead>
          <tbody class="text-center">
            @if (count($samples)>0)
            @foreach ($samples as $sample)
            <tr>
              <td>
                <input type="checkbox" id="md_checkbox_{{$sample->id}}" class="filled-in chk-col-maroon tableCheck" data-sample="{{$sample->id}}" data-code="{{$sample->code}}">
                <label for="md_checkbox_{{$sample->id}}"></label>
              </td>
              <td>{{ data_get($sample, 'getLubricant.getCategory.name', 'N/A') }}</td>
              <td style="vertical-align:middle;" class="font-weight-bold">
                <a href="{{route('administrator.import.test.show', ['code' => $sample->code])}}">
                  #{{$sample->code}}
                </a>
              </td>
              <td>{{ data_get($sample, 'getCustomer.company', 'N/A') }}</td>
              <td>{{ data_get($sample, 'getFleet.name', 'N/A') }}</td>
              <td>{{$sample->getEquipment->unit_id ?? 'N/A'}}</td>
              <td>{{$sample->model}}</td>
              <td>{{$sample->component}}</td>
              <td>{{$sample->lubricant}}</td>
              <td>{{$sample->oil_weight}}</td>
              <td>
                @foreach (sortLaboratoryTests($sample->getTests) as $test)
                @if ($test->getTest)
                <span class="badge badge-{{Config::get('constants.states_samples_test')[$test->state]['type']}} cursor-default" data-toggle="tooltip" title="" data-original-title="{{Config::get('constants.states_samples_test')[$test->state]['name']}}">
                  <b>{{$test->getTest->name}}</b>
                </span>
                @endif
                @endforeach
              </td>
              <td>{{date("d/m/Y", strtotime($sample->sample_date_taken))}}</td>
              <td>{{date("d/m/Y", strtotime($sample->sample_date_received))}}</td>
              <td>
                @php
                $currentState = $sample->getCurrentState();
                @endphp
                <span data-toggle="tooltip" data-original-title="{{config('constants.states_current_sample')[$currentState]['description']}}" class="badge badge-{{config('constants.states_current_sample')[$currentState]['type']}}">{{config('constants.states_current_sample')[$currentState]["name"]}}</span>
              </td>
              <td>
                @if ($sample->sos=="true")
                <span class="badge badge-danger">SOS</span>
                @else
                <span class="badge badge-dark">Estandar</span>
                @endif
              </td>
              <td>
                <a href="javascript:;" class="btn btn-info btn-xs" onclick="btnCommentary({{$sample->id}})">
                  @if (!empty($sample->commentary))
                  <i class="fa fa-comment" aria-hidden="true"></i>
                  @else
                  <i class="fa fa-comment-o" aria-hidden="true"></i>
                  @endif
                </a>
                @checkAction('Samples', 'administrator.import.test.edit-results')
                <a href="javascript:;" class="btn btn-warning btn-xs" onclick="btnEditResults({{$sample->id}})" data-toggle="tooltip" title="Editar Resultados">
                  <i class="fa fa-pencil" aria-hidden="true"></i>
                </a>
                @endcheckAction
                @checkAction('Samples', 'administrator.import.test.delete')
                <a href="javascript:;" class="btn btn-danger btn-xs" onclick="openDelete({{$sample->id}})">
                  <i class="fa fa-trash" aria-hidden="true"></i>
                </a>
                @endcheckAction
              </td>
            </tr>
            @endforeach
            @else
            <tr>
              <td colspan="10">No se encontraron muestras</td>
            </tr>
            @endif
          </tbody>
        </table>
      </div>

      <div class="box-footer clearfix">
        <div class="row">
          <div class="col-md-4 mb-2 mb-md-0">
            <div class="form-inline">
              <label for="idPerPage" class="mr-2 mb-0">Mostrar</label>
              <select class="form-control form-control-sm" id="idPerPage" name="per_page" onchange="(function(sel){ var params = new URLSearchParams(window.location.search); params.set('per_page', sel.value); params.delete('page'); var query = params.toString(); window.location.href = window.location.pathname + (query ? '?' + query : ''); })(this)">
                <option value="100" {{request('per_page', 100) == 100 ? 'selected' : ''}}>100</option>
                <option value="300" {{request('per_page') == 300 ? 'selected' : ''}}>300</option>
              </select>
              <span class="ml-2">registros por página</span>
            </div>
          </div>
          <div class="col-md-8">
            @if (count($samples) > 0)
            {!! $samples->appends(Request::all())->render() !!}
            @endif
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<div class="modal fade" id="idModalPasswordValidation" tabindex="-1" role="dialog" aria-labelledby="passwordValidationLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header bg-warning">
        <h4 class="modal-title" id="idTitlePasswordValidation">
          <i class="fa fa-lock"></i> Validación de Seguridad
        </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 class="alert alert-warning">
          <i class="fa fa-exclamation-triangle"></i> Por seguridad, debe validar su identidad antes de editar resultados.
        </div>
        <form id="formPasswordValidation">
          <input type="hidden" id="validateSampleId" name="sample_id">
          <div class="row mb-10">
            <div class="col-12">
              <label for="validatePassword">Ingrese su contraseña</label>
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-key"></i></span>
                <input type="password" class="form-control" id="validatePassword" name="password" placeholder="Contraseña" required autocomplete="current-password">
              </div>
              <small class="text-muted">Esta validación es requerida para mantener la trazabilidad de los cambios.</small>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <button type="button" class="btn btn-secondary btn-block" data-dismiss="modal">Cancelar</button>
            </div>
            <div class="col-6">
              <button type="button" class="btn btn-warning btn-block" onclick="submitPasswordValidation()">
                <i class="fa fa-unlock-alt"></i> Validar
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="idModalEditResults" tabindex="-1" role="dialog" aria-labelledby="editResultsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="idTitleEditResults">Editar Resultados de Muestra</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 class="alert alert-info">
          <i class="fa fa-info-circle"></i> Los cambios realizados se registrarán con fines de auditoría y trazabilidad.
        </div>
        <form id="formEditResults">
          <input type="hidden" id="editSampleId" name="sample_id">
          <div class="row mb-10">
            <div class="col-12">
              <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                <table class="table table-bordered table-sm" id="tableEditResults">
                  <thead class="bg-primary" style="position: sticky; top: 0; z-index: 10;">
                    <tr class="bg-primary">
                      <th>Prueba</th>
                      <th>Valor Actual</th>
                      <th>Nuevo Valor</th>
                    </tr>
                  </thead>
                  <tbody id="resultsTableBody">
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="row mb-10">
            <div class="col-12">
              <label for="editComment">Motivo del cambio (requerido)</label>
              <textarea name="change_reason" rows="3" class="form-control" id="editComment" placeholder="Especifique el motivo de los cambios realizados..." required></textarea>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <button type="button" class="btn btn-secondary btn-block" data-dismiss="modal">Cancelar</button>
            </div>
            <div class="col-6">
              <button type="button" class="btn btn-success btn-block" onclick="saveEditedResults()">
                <i class="fa fa-save"></i> Guardar Cambios
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="idModalCommentary" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="idTitleCommentary"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <form id="formCommentary">
          <div class="row mb-10">
            <div class="col">
              <textarea name="commentary" rows="3" class="form-control" id="idInputCommentary" placeholder="Comentario"></textarea>
            </div>
          </div>
          <div class="row mb-10">
            <div class="form-group col">
              <label for="default_comments">Comentarios predeterminados</label>
              <select name="default_comments[]" id="default_comments" class="form-control" multiple>
              </select>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <button type="button" class="btn btn-info btn-block" onclick="sendCommentary()">Enviar</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="idModalAudit" tabindex="-1" role="dialog" aria-labelledby="auditModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header bg-info">
        <h4 class="modal-title" id="auditModalLabel">
          <i class="fa fa-history"></i> Auditoría de Cambios en Resultados
        </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 class="form-group">
          <label for="auditSampleCode">Seleccione una muestra:</label>
          <select id="auditSampleCode" class="form-control" onchange="loadAuditData()">
            <option value="">-- Seleccione una muestra --</option>
          </select>
        </div>
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-hover" id="tableAudit">
            <thead>
              <tr class="bg-secondary">
                <th>Fecha/Hora</th>
                <th>Usuario</th>
                <th>Prueba</th>
                <th>Valor Anterior</th>
                <th>Valor Nuevo</th>
                <th>Motivo del Cambio</th>
              </tr>
            </thead>
            <tbody id="auditTableBody">
              <tr>
                <td colspan="6" class="text-center text-muted">Seleccione una muestra para ver el historial</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" id="btnExportAuditSample">
          <i class="fa fa-file-excel-o"></i> Exportar muestra
        </button>
        <button type="button" class="btn btn-info" id="btnExportAuditAll">
          <i class="fa fa-file-excel-o"></i> Exportar todo
        </button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="idModalMovementHistory" tabindex="-1" role="dialog" aria-labelledby="movementHistoryModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered" role="document" style="width: 96%; max-width: 1700px;">
    <div class="modal-content">
      <div class="modal-header bg-warning">
        <h4 class="modal-title" id="movementHistoryModalLabel">
          <i class="fa fa-random"></i> Historial de Trazabilidad por Movimiento
        </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 class="row">
          <div class="col-md-4">
            <div class="form-group">
              <label for="movementEntityType">Tipo de entidad con cambios:</label>
              <select id="movementEntityType" class="form-control" onchange="renderMovementEntityOptions()">
                <option value="">-- Seleccione tipo --</option>
                <option value="equipment">Equipo</option>
                <option value="component">Componente</option>
                <option value="customer">Cliente</option>
              </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label for="movementEntityId">Entidad:</label>
              <select id="movementEntityId" class="form-control">
                <option value="">-- Seleccione una entidad --</option>
              </select>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group" style="margin-top: 25px;">
              <button type="button" class="btn btn-warning btn-block" onclick="loadMovementHistoryData()">
                <i class="fa fa-search"></i> Consultar
              </button>
            </div>
          </div>
        </div>

        <div id="movementSummary" class="alert alert-info" style="display: none;"></div>

        <h5 class="font-weight-bold mt-3"><i class="fa fa-list"></i> Muestras anteriores al movimiento</h5>
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-hover" id="tableMovementSamplesBefore">
            <thead>
              <tr class="bg-light">
                <th>Fecha de Toma</th>
                <th>Sample ID</th>
                <th>Cliente</th>
                <th>Account</th>
                <th>Unit ID</th>
                <th>Componente</th>
              </tr>
            </thead>
            <tbody id="movementSamplesBeforeTableBody">
              <tr>
                <td colspan="6" class="text-center text-muted">Seleccione equipo o componente con cambios</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="movementSamplesBeforePagination" class="d-flex justify-content-end mt-2"></div>

        <h5 class="font-weight-bold mt-3"><i class="fa fa-list"></i> Muestras posteriores al movimiento</h5>
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-hover" id="tableMovementSamplesAfter">
            <thead>
              <tr class="bg-light">
                <th>Fecha de Toma</th>
                <th>Sample ID</th>
                <th>Cliente</th>
                <th>Account</th>
                <th>Unit ID</th>
                <th>Componente</th>
              </tr>
            </thead>
            <tbody id="movementSamplesAfterTableBody">
              <tr>
                <td colspan="6" class="text-center text-muted">Seleccione equipo o componente con cambios</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="movementSamplesAfterPagination" class="d-flex justify-content-end mt-2"></div>

        <h5 class="font-weight-bold mt-3"><i class="fa fa-exchange"></i> Movimientos registrados</h5>
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-hover" id="tableMovementEvents">
            <thead>
              <tr class="bg-light">
                <th>Fecha/Hora</th>
                <th>Tipo de movimiento</th>
                <th>Valor anterior</th>
                <th>Valor nuevo</th>
                <th>Usuario</th>
                <th>Notas</th>
              </tr>
            </thead>
            <tbody id="movementEventsTableBody">
              <tr>
                <td colspan="6" class="text-center text-muted">No hay movimientos para mostrar</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="movementEventsPagination" class="d-flex justify-content-end mt-2"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" id="btnExportMovementHistory">
          <i class="fa fa-file-excel-o"></i> Exportar historial
        </button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal: Filtros de Descarga -->
<div class="modal fade" id="downloadOptionsModal" tabindex="-1" role="dialog" aria-labelledby="downloadOptionsModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="downloadOptionsModalLabel">Opciones de Descarga</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h6><strong>Seleccione el tipo de descarga</strong></h6>
        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="download_type" id="download_all" value="all" checked>
            <label class="form-check-label" for="download_all">Descargar todo</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="download_type" id="download_component" value="component">
            <label class="form-check-label" for="download_component">Filtrar por Componente</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="download_type" id="download_fleet" value="fleet">
            <label class="form-check-label" for="download_fleet">Filtrar por Flota (Account)</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="download_type" id="download_sampleid" value="sampleid">
            <label class="form-check-label" for="download_sampleid">Filtrar por Sample ID</label>
          </div>
        </div>

        <!-- Filtro por Componente -->
        <div id="filter_component" class="filter-section" style="display: none;">
          <div class="form-group">
            <label for="component_select">Componente:</label>
            <select class="form-control select2" id="component_select" style="width: 100%;">
              <option value="">Seleccione un componente</option>
            </select>
          </div>
        </div>

        <!-- Filtro por Flota -->
        <div id="filter_fleet" class="filter-section" style="display: none;">
          <div class="form-group">
            <label for="fleet_select">Account (Flota):</label>
            <select class="form-control select2" id="fleet_select" style="width: 100%;">
              <option value="">Seleccione una flota</option>
            </select>
          </div>
        </div>

        <!-- Filtro por Sample ID -->
        <div id="filter_sampleid" class="filter-section" style="display: none;">
          <div class="form-group">
            <label for="sampleid_select">Sample ID(s):</label>
            <select class="form-control select2" id="sampleid_select" multiple style="width: 100%;">
              @foreach($samples as $sample)
                <option value="{{$sample->code}}">{{$sample->code}}</option>
              @endforeach
            </select>
            <small class="form-text text-muted">Seleccione una o varias muestras de la lista</small>
          </div>
        </div>

        <!-- Filtro adicional por Date Received -->
        <div id="filter_date_received" class="filter-section" style="display: none;">
          <hr class="my-2">
          <div class="form-group mb-0">
            <label for="download_date_received">Date Received <small class="text-muted">(opcional)</small></label>
            <input type="text" class="form-control" id="download_date_received" placeholder="Seleccione rango de fechas" autocomplete="off" readonly>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-success" id="btnExecuteDownload"><i class="fa fa-download"></i> Descargar</button>
      </div>
    </div>
  </div>
</div>

@endsection

@section('js')
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>

<script type="text/javascript">
  var idSample = null;

  function btnCommentary(id) {
    $('#formCommentary')[0].reset();
    $.ajax({
      type: 'POST',
      url: '/administrator/import/test/get/commentary',
      data: {
        "sample_id": id
      },
      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) {

          idSample = id;

          $("#idTitleCommentary").html('Sample: ' + response.data.title);
          $("#idInputCommentary").html(response.data.message);

          $("#idModalCommentary").modal();
        } else if (response.state == 2) {
          swal("Oops!", response.message, "warning");
        } else {
          swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
        }
      },
      error: function(xhr) {
        $(".content_loading").fadeOut("slow");
        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
      }
    });
  }

  function sendCommentary() {
    var commentary = $("#idInputCommentary").val();
    var defaultComments = $("#default_comments").val();
    $.ajax({
      type: 'POST',
      url: '/administrator/import/test/post/commentary',
      data: {
        "id": idSample,
        "commentary": commentary,
        "default_comments": defaultComments
      },
      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) {
          $("#idModalCommentary").modal('hide');
          swal("Bien!", response.message, "success");
        } else if (response.state == 2) {
          swal("Oops!", response.message, "warning");
        } else {
          swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
        }
      },
      error: function(xhr) {
        $(".content_loading").fadeOut("slow");
        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
      }
    });
  }

  function openDelete(id) {
    swal({
      title: "Estás seguro?",
      text: "El sample sera eliminado!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Si, Eliminar!",
      closeOnConfirm: false
    }, function() {
      deleteSample(id);
    });
  }

  function deleteSample(id) {
    $.ajax({
      type: 'POST',
      url: '/administrator/import/test/delete',
      data: {
        "sample_id": id
      },
      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.code == 200) {
          swal("Bien!", "Sample eliminado correctamente", "success");
          window.location.reload();
          $(".content_loading").fadeIn("slow");
        }
      },
      error: function(xhr) {
        $(".content_loading").fadeOut("slow");
        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
      }
    });
  }

  // Función para abrir el modal de validación de contraseña antes de editar
  function btnEditResults(sampleId) {
    $("#validateSampleId").val(sampleId);
    $("#validatePassword").val('');

    $("#idModalPasswordValidation").modal('show');
  }

  // Función para validar la contraseña
  function submitPasswordValidation() {
    var password = $("#validatePassword").val().trim();
    var sampleId = $("#validateSampleId").val();

    if (!password) {
      swal("Advertencia", "Debe ingresar su contraseña", "warning");
      return;
    }

    $.ajax({
      type: 'POST',
      url: '/administrator/import/test/validate-password',
      data: {
        "password": password
      },
      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) {
          $("#idModalPasswordValidation").modal('hide');

          loadSampleResults(sampleId);
        } else {
          swal("Error de Validación", response.message, "error");
          $("#validatePassword").val('').focus();
        }
      },
      error: function(xhr) {
        $(".content_loading").fadeOut("slow");
        swal("Error", "No se pudo validar la contraseña", "error");
      }
    });
  }

  // Función para cargar los resultados de la muestra
  function loadSampleResults(sampleId) {
    $.ajax({
      type: 'POST',
      url: '/administrator/import/test/get-results',
      data: {
        "sample_id": sampleId
      },
      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) {
          $("#editSampleId").val(response.data.sample_id);

          $("#idTitleEditResults").html('Editar Resultados - Sample #' + response.data.sample_code);

          $("#resultsTableBody").empty();
          $("#editComment").val('');

          if (response.data.results.length > 0) {
            response.data.results.forEach(function(result) {
              var row = '<tr data-result-id="' + result.id + '">' +
                '<td>' + result.test_name + '</td>' +
                '<td class="text-center">' + (result.value || 'N/A') + '</td>' +
                '<td><input type="text" class="form-control form-control-sm result-value-input" ' +
                'data-result-id="' + result.id + '" ' +
                'data-old-value="' + (result.value || '') + '" ' +
                'value="' + (result.value || '') + '"></td>' +
                '<td class="text-center">' + (result.unit || '') + '</td>' +
                '</tr>';
              $("#resultsTableBody").append(row);
            });

            $("#idModalEditResults").modal();
          } else {
            swal("Información", "Esta muestra no tiene resultados para editar", "info");
          }
        } else {
          swal("Error", response.message, "error");
        }
      },
      error: function(xhr) {
        $(".content_loading").fadeOut("slow");
        swal("Error", "No se pudieron cargar los resultados", "error");
      }
    });
  }

  // Función para guardar los resultados editados
  function saveEditedResults() {
    var sampleId = $("#editSampleId").val();
    var changeReason = $("#editComment").val().trim();

    if (!changeReason) {
      swal("Advertencia", "Debe especificar el motivo del cambio", "warning");
      return;
    }

    var results = [];
    var hasChanges = false;

    $(".result-value-input").each(function() {
      var resultId = $(this).data('result-id');
      var oldValue = $(this).data('old-value');
      var newValue = $(this).val();

      results.push({
        id: resultId,
        value: newValue
      });

      if (oldValue != newValue) {
        hasChanges = true;
      }
    });

    if (!hasChanges) {
      swal("Información", "No se detectaron cambios en los valores", "info");
      return;
    }

    swal({
      title: "¿Confirmar cambios?",
      text: "Los cambios se registrarán en el historial de auditoría",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#28a745",
      confirmButtonText: "Sí, guardar cambios",
      cancelButtonText: "Cancelar",
      closeOnConfirm: false
    }, function() {
      $.ajax({
        type: 'POST',
        url: '/administrator/import/test/update-results',
        data: {
          "sample_id": sampleId,
          "results": results,
          "change_reason": changeReason
        },
        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) {
            $("#idModalEditResults").modal('hide');
            swal({
              title: "Éxito",
              text: response.message,
              type: "success"
            }, function() {
              window.location.reload();
            });
          } else {
            swal("Advertencia", response.message, "warning");
          }
        },
        error: function(xhr) {
          $(".content_loading").fadeOut("slow");
          swal("Error", "No se pudieron guardar los cambios", "error");
        }
      });
    });
  }

  $('#idModalPasswordValidation').on('hidden.bs.modal', function() {
    $("#validatePassword").val('');
  });

  $('#validatePassword').on('keypress', function(e) {
    if (e.which === 13) {
      e.preventDefault();
      submitPasswordValidation();
    }
  });
</script>

<script>
  var auditExportUrl = '{{route("administrator.import.test.export.audit")}}';
  var movementExportUrl = '{{route("administrator.import.test.export.movement-history")}}';
  var movementEntitiesCache = { equipments: [], components: [], customers: [] };
  var movementRowsPerPage = 10;
  var movementTableStates = {
    before: { items: [], currentPage: 1 },
    after: { items: [], currentPage: 1 },
    events: { items: [], currentPage: 1 }
  };

  function clearMovementPaginations() {
    $('#movementSamplesBeforePagination').html('');
    $('#movementSamplesAfterPagination').html('');
    $('#movementEventsPagination').html('');
  }

  function getMovementTableMeta(tableKey) {
    if (tableKey === 'before') {
      return {
        tbodyId: '#movementSamplesBeforeTableBody',
        paginationId: '#movementSamplesBeforePagination',
        colspan: 6,
        emptyMessage: 'No hay muestras anteriores al movimiento'
      };
    }

    if (tableKey === 'after') {
      return {
        tbodyId: '#movementSamplesAfterTableBody',
        paginationId: '#movementSamplesAfterPagination',
        colspan: 6,
        emptyMessage: 'No hay muestras posteriores al movimiento'
      };
    }

    return {
      tbodyId: '#movementEventsTableBody',
      paginationId: '#movementEventsPagination',
      colspan: 6,
      emptyMessage: 'No hay movimientos registrados para esta entidad'
    };
  }

  function getMovementRowHtml(tableKey, item) {
    if (tableKey === 'before' || tableKey === 'after') {
      var sampleCode = item.code || 'N/A';
      var sampleCodeHtml = sampleCode !== 'N/A'
        ? '<a href="/administrator/import/test/show?code=' + encodeURIComponent(sampleCode) + '">#' + sampleCode + '</a>'
        : 'N/A';

      return '<tr>' +
        '<td>' + (item.date_taken || item.created_at || 'N/A') + '</td>' +
        '<td>' + sampleCodeHtml + '</td>' +
        '<td>' + (item.customer || 'N/A') + '</td>' +
        '<td>' + (item.fleet || 'N/A') + '</td>' +
        '<td>' + (item.unit_id || 'N/A') + '</td>' +
        '<td>' + (item.component || 'N/A') + '</td>' +
      '</tr>';
    }

    return '<tr>' +
      '<td>' + (item.date || 'N/A') + '</td>' +
      '<td>' + (item.type || 'N/A') + '</td>' +
      '<td>' + (item.old_value || 'N/A') + '</td>' +
      '<td>' + (item.new_value || 'N/A') + '</td>' +
      '<td>' + (item.user || 'N/A') + '</td>' +
      '<td>' + (item.notes || item.note || '') + '</td>' +
    '</tr>';
  }

  function renderMovementPagination(tableKey, totalPages) {
    var state = movementTableStates[tableKey];
    var meta = getMovementTableMeta(tableKey);
    var $pagination = $(meta.paginationId);

    if (totalPages <= 1) {
      $pagination.html('');
      return;
    }

    var currentPage = state.currentPage;
    var paginationHtml = '<ul class="pagination pagination-sm mb-0">';

    paginationHtml += '<li class="page-item ' + (currentPage === 1 ? 'disabled' : '') + '">' +
      '<a class="page-link" href="javascript:;" onclick="changeMovementTablePage(\'' + tableKey + '\', ' + (currentPage - 1) + ')">Anterior</a>' +
    '</li>';

    var windowSize = 10;
    var startPage = Math.max(1, currentPage - Math.floor(windowSize / 2));
    var endPage = Math.min(totalPages, startPage + windowSize - 1);
    if (endPage - startPage + 1 < windowSize) {
      startPage = Math.max(1, endPage - windowSize + 1);
    }

    if (startPage > 1) {
      paginationHtml += '<li class="page-item"><a class="page-link" href="javascript:;" onclick="changeMovementTablePage(\'' + tableKey + '\', 1)">1</a></li>';
      if (startPage > 2) {
        paginationHtml += '<li class="page-item disabled"><span class="page-link">...</span></li>';
      }
    }

    for (var page = startPage; page <= endPage; page++) {
      paginationHtml += '<li class="page-item ' + (page === currentPage ? 'active' : '') + '">' +
        '<a class="page-link" href="javascript:;" onclick="changeMovementTablePage(\'' + tableKey + '\', ' + page + ')">' + page + '</a>' +
      '</li>';
    }

    if (endPage < totalPages) {
      if (endPage < totalPages - 1) {
        paginationHtml += '<li class="page-item disabled"><span class="page-link">...</span></li>';
      }
      paginationHtml += '<li class="page-item"><a class="page-link" href="javascript:;" onclick="changeMovementTablePage(\'' + tableKey + '\', ' + totalPages + ')">' + totalPages + '</a></li>';
    }

    paginationHtml += '<li class="page-item ' + (currentPage === totalPages ? 'disabled' : '') + '">' +
      '<a class="page-link" href="javascript:;" onclick="changeMovementTablePage(\'' + tableKey + '\', ' + (currentPage + 1) + ')">Siguiente</a>' +
    '</li>';

    paginationHtml += '</ul>';
    $pagination.html(paginationHtml);
  }

  function renderMovementTablePage(tableKey) {
    var state = movementTableStates[tableKey];
    var meta = getMovementTableMeta(tableKey);
    var items = state.items || [];

    if (items.length === 0) {
      $(meta.tbodyId).html('<tr><td colspan="' + meta.colspan + '" class="text-center text-muted">' + meta.emptyMessage + '</td></tr>');
      $(meta.paginationId).html('');
      return;
    }

    var totalPages = Math.ceil(items.length / movementRowsPerPage);
    if (state.currentPage > totalPages) {
      state.currentPage = totalPages;
    }
    if (state.currentPage < 1) {
      state.currentPage = 1;
    }

    var startIndex = (state.currentPage - 1) * movementRowsPerPage;
    var endIndex = startIndex + movementRowsPerPage;
    var pageItems = items.slice(startIndex, endIndex);
    var html = '';

    pageItems.forEach(function(item) {
      html += getMovementRowHtml(tableKey, item);
    });

    $(meta.tbodyId).html(html);
    renderMovementPagination(tableKey, totalPages);
  }

  function changeMovementTablePage(tableKey, page) {
    var state = movementTableStates[tableKey];
    var totalPages = Math.ceil((state.items || []).length / movementRowsPerPage);

    if (page < 1 || page > totalPages) {
      return;
    }

    state.currentPage = page;
    renderMovementTablePage(tableKey);
  }

  function setMovementTableData(tableKey, items) {
    movementTableStates[tableKey].items = items || [];
    movementTableStates[tableKey].currentPage = 1;
    renderMovementTablePage(tableKey);
  }

  // Toggle de filtros
  $('#filtro').click(function(){
    $("#boxfilter").slideToggle("slow");
  });

  // Populate audit dropdown from table data
  function populateAuditDropdown() {
    var $select = $('#auditSampleCode');
    $select.empty().append('<option value="">-- Seleccione una muestra --</option>');
    
    $('.tableCheck').each(function() {
      var id = $(this).data('sample');
      var code = $(this).data('code');
      if (id && code) {
        $select.append('<option value="' + id + '">' + code + '</option>');
      }
    });
  }

  // Populate on modal open
  $('#idModalAudit').on('show.bs.modal', function () {
    populateAuditDropdown();
  });

  $('#btnOpenDownloadModal').click(function() {
    loadFilterOptions();
    $('#downloadOptionsModal').modal('show');
  });

  function syncCheckedSamplesToDownloadFilter() {
    var checkedCodes = [];

    $('.tableCheck:checked').each(function() {
      var code = $(this).attr('data-code');
      if (code) {
        checkedCodes.push(code);
      }
    });

    if (checkedCodes.length > 0) {
      $('#sampleid_select').val(checkedCodes).trigger('change');
      $('input[name="download_type"]').prop('checked', false);
      $('#download_sampleid').prop('checked', true);
      $('.filter-section').hide();
      $('#filter_sampleid').show();
    }
  }

  $('#downloadOptionsModal').on('shown.bs.modal', function () {
    $('#component_select, #fleet_select, #sampleid_select').select2({
      dropdownParent: $('#downloadOptionsModal'),
      placeholder: 'Buscar...',
      allowClear: true,
      width: '100%'
    });

    $('#download_date_received').daterangepicker({
      autoUpdateInput: false,
      opens: 'left',
      locale: { cancelLabel: 'Limpiar', format: 'MM/DD/YYYY' }
    }).on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
    }).on('cancel.daterangepicker', function() {
      $(this).val('');
    });

    // Mostrar filtro de fecha por defecto
    $('#filter_date_received').show();

    syncCheckedSamplesToDownloadFilter();
  });

  $('#downloadOptionsModal').on('hidden.bs.modal', function () {
    $('#component_select, #fleet_select, #sampleid_select').select2('destroy');
    resetDownloadModal();
  });

  // Cargar opciones dinámicas para los filtros
  function loadFilterOptions() {
    $.ajax({
      url: '{{route("administrator.import.test.get.filter.options")}}',
      type: 'GET',
      data: { type: 'component' },
      success: function(response) {
        if (response.state === 1) {
          $('#component_select').empty().append('<option value="">Seleccione un componente</option>');
          if (response.data && response.data.length > 0) {
            response.data.forEach(function(item) {
              $('#component_select').append(`<option value="${item}">${item}</option>`);
            });
          }
        }
      },
      error: function(xhr) {
        console.error('Error cargando componentes:', xhr);
        swal('Error', 'No se pudieron cargar los componentes disponibles', 'error');
      }
    });

    $.ajax({
      url: '{{route("administrator.import.test.get.filter.options")}}',
      type: 'GET',
      data: { type: 'fleet' },
      success: function(response) {
        if (response.state === 1) {
          $('#fleet_select').empty().append('<option value="">Seleccione una flota</option>');
          if (response.data && response.data.length > 0) {
            response.data.forEach(function(item) {
              $('#fleet_select').append(`<option value="${item}">${item}</option>`);
            });
          }
        }
      },
      error: function(xhr) {
        console.error('Error cargando flotas:', xhr);
        swal('Error', 'No se pudieron cargar las flotas disponibles', 'error');
      }
    });
  }

  $('input[name="download_type"]').change(function() {
    $('.filter-section').hide();
    var selectedType = $(this).val();
    if (selectedType === 'all') {
      $('#filter_date_received').slideDown();
    } else if (selectedType !== 'sampleid') {
      $('#filter_' + selectedType).slideDown();
      $('#filter_date_received').slideDown();
    } else {
      $('#filter_' + selectedType).slideDown();
    }
  });

  $('#btnExecuteDownload').click(function() {
    var downloadType = $('input[name="download_type"]:checked').val();
    var baseUrl = '{{route("administrator.import.test.export.list")}}';
    var url = baseUrl;

    if (downloadType === 'component') {
      var component = $('#component_select').val();
      if (!component) {
        swal('Atención', 'Debe seleccionar un componente para filtrar', 'warning');
        return;
      }
      url += '?filter_type=component&filter_value=' + encodeURIComponent(component);
    } else if (downloadType === 'fleet') {
      var fleet = $('#fleet_select').val();
      if (!fleet) {
        swal('Atención', 'Debe seleccionar una flota para filtrar', 'warning');
        return;
      }
      url += '?filter_type=fleet&filter_value=' + encodeURIComponent(fleet);
    } else if (downloadType === 'sampleid') {
      var selectedSampleIds = $('#sampleid_select').val();
      if (!selectedSampleIds || selectedSampleIds.length === 0) {
        swal('Atención', 'Debe seleccionar al menos un Sample ID para filtrar', 'warning');
        return;
      }
      var sampleId = selectedSampleIds.join(',');
      url += '?filter_type=sampleid&filter_value=' + encodeURIComponent(sampleId);
    }

    // Filtro adicional por Date Received
    if (downloadType !== 'sampleid') {
      var dateReceived = $('#download_date_received').val().trim();
      if (dateReceived) {
        var drParts = dateReceived.split(' - ');
        if (drParts.length === 2) {
          var drFrom = moment(drParts[0].trim(), 'MM/DD/YYYY').format('YYYY-MM-DD');
          var drTo   = moment(drParts[1].trim(), 'MM/DD/YYYY').format('YYYY-MM-DD');
          url += (url.indexOf('?') !== -1 ? '&' : '?') + 'date_received=' + encodeURIComponent(drFrom + '|' + drTo);
        }
      }
    }

    if (downloadType !== 'all') {
      $.ajax({
        url: url,
        type: 'GET',
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        },
        success: function(response) {
          if (typeof response === 'object' && response.state === 2) {
            swal('Atención', response.message, 'warning');
          } else {
            window.open(url, '_blank');
            $('#downloadOptionsModal').modal('hide');
            resetDownloadModal();
          }
        },
        error: function() {
          window.open(url, '_blank');
          $('#downloadOptionsModal').modal('hide');
          resetDownloadModal();
        }
      });
    } else {
      window.open(url, '_blank');
      $('#downloadOptionsModal').modal('hide');
      resetDownloadModal();
    }
  });

  function resetDownloadModal() {
    $('#component_select, #fleet_select, #sampleid_select').val('').trigger('change');
    $('#download_date_received').val('');
    $('input[name="download_type"]').prop('checked', false);
    $('#download_all').prop('checked', true);
    $('.filter-section').hide();
  }

  // Date range pickers
  $('#idSampleDateTaken').daterangepicker({
    autoUpdateInput: false,
    locale: {
      cancelLabel: 'Clear'
    }
  });

  $('#idSampleDateTaken').on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  });

  $('#idSampleDateTaken').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
  });

  $('#idSampleDateReceived').daterangepicker({
    autoUpdateInput: false,
    locale: {
      cancelLabel: 'Clear'
    }
  });

  $('#idSampleDateReceived').on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  });

  $('#idSampleDateReceived').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
  });

  $.fn.dataTable.moment('DD/MM/YYYY');
  $('#tableHistory').DataTable({
    "bPaginate": false,
    "bFilter": false,
  });

  $('.checkAll').on('click', function() {
    if ($(this).prop('checked')) {
      $('.tableCheck').prop('checked', true)
    } else {
      $('.tableCheck').prop('checked', false)
    }
  })

  $('.btnAcceptAll').on('click', function(e) {
    e.preventDefault()
    let checks = $('.tableCheck:checked')

    if (checks.length === 0) {
      swal("Advertencia", "Debe seleccionar al menos una muestra", "warning");
      return;
    }

    // Recopilar IDs de muestras seleccionadas
    let sampleIds = [];
    checks.each(function() {
      sampleIds.push($(this).attr('data-sample'));
    });

    // Verificar muestras sin resultados
    $.ajax({
      type: 'POST',
      url: '/administrator/import/test/checkSamplesBeforeApplyRules',
      data: {
        "samples": sampleIds
      },
      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) {
          let messageText = "Se aplicarán las reglas a las " + response.total_samples + " muestra(s) seleccionada(s)";

          // Agregar información de muestras sin resultados
          if (Object.keys(response.missing_results).length > 0) {
            messageText += "\n\n MUESTRAS SIN RESULTADOS:";

            for (let testName in response.missing_results) {
              let samples = response.missing_results[testName];
              messageText += "\n\n" + testName + " (" + samples.length + "):";
              messageText += "\n" + samples.join(', ');
            }
          }

          swal({
            title: "¿Estás seguro?",
            text: messageText,
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Sí, aplicar reglas",
            cancelButtonText: "Cancelar",
            closeOnConfirm: false
          }, function() {
            $('.checkFormInput').remove()
            checks.each(function() {
              $('#formAcceptAll').append(`<input class="checkFormInput" type="hidden" name="samples[]" value="${$(this).attr('data-sample')}">`)
            })
            $('#formAcceptAll').submit()
          });
        } else {
          swal("Error", response.message, "error");
        }
      },
      error: function(xhr) {
        $(".content_loading").fadeOut("slow");
        swal("Error", "No se pudo verificar las muestras", "error");
      }
    });
  })

  // Función para abrir el modal de auditoría
  function openAuditModal() {
    $('#auditSampleCode').val('');
    $('#auditTableBody').html('<tr><td colspan="6" class="text-center text-muted">Seleccione una muestra para ver el historial</td></tr>');
    $('#idModalAudit').modal('show');
  }

  $('#btnExportMovementHistory').on('click', function() {
    var entityType = $('#movementEntityType').val();
    var entityId = $('#movementEntityId').val();

    if (!entityType || !entityId) {
      swal("Información", "Seleccione tipo y entidad para exportar el historial", "warning");
      return;
    }

    var url = movementExportUrl + '?entity_type=' + encodeURIComponent(entityType) + '&entity_id=' + encodeURIComponent(entityId);
    window.open(url, '_blank');
  });

  // Función para abrir el modal de trazabilidad por movimiento
  function openMovementHistoryModal() {
    $('#movementEntityType').val('');
    $('#movementEntityId').html('<option value="">-- Seleccione una entidad --</option>').prop('disabled', true);
    $('#movementSummary').hide().html('');
    $('#movementSamplesBeforeTableBody').html('<tr><td colspan="6" class="text-center text-muted">Seleccione equipo, componente o cliente con cambios</td></tr>');
    $('#movementSamplesAfterTableBody').html('<tr><td colspan="6" class="text-center text-muted">Seleccione equipo, componente o cliente con cambios</td></tr>');
    $('#movementEventsTableBody').html('<tr><td colspan="6" class="text-center text-muted">No hay movimientos para mostrar</td></tr>');
    clearMovementPaginations();
    $('#idModalMovementHistory').modal('show');
    loadMovementEntities();
  }

  function loadMovementEntities() {
    $.ajax({
      type: 'POST',
      url: '/administrator/import/test/get-movement-entities',
      dataType: 'json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function() {
        $('#movementSummary').show().html('<i class="fa fa-spinner fa-spin"></i> Cargando entidades con cambios...');
      },
      success: function(response) {
        if (response.state == 1) {
          movementEntitiesCache.equipments = (response.data && response.data.equipments) ? response.data.equipments : [];
          movementEntitiesCache.components = (response.data && response.data.components) ? response.data.components : [];
          movementEntitiesCache.customers = (response.data && response.data.customers) ? response.data.customers : [];
          $('#movementSummary').hide().html('');
        } else {
          movementEntitiesCache = { equipments: [], components: [], customers: [] };
          $('#movementSummary').show().html('<strong>Error:</strong> ' + (response.message || 'No se pudieron cargar entidades'));
        }
      },
      error: function() {
        movementEntitiesCache = { equipments: [], components: [], customers: [] };
        $('#movementSummary').show().html('<strong>Error:</strong> No se pudieron cargar las entidades con cambios.');
      }
    });
  }

  function renderMovementEntityOptions() {
    var entityType = $('#movementEntityType').val();
    var html = '<option value="">-- Seleccione una entidad --</option>';

    if (!entityType) {
      $('#movementEntityId').html(html).prop('disabled', true);
      return;
    }

    var entities = [];
    if (entityType === 'equipment') {
      entities = movementEntitiesCache.equipments;
    } else if (entityType === 'component') {
      entities = movementEntitiesCache.components;
    } else if (entityType === 'customer') {
      entities = movementEntitiesCache.customers;
    }

    if (entities.length > 0) {
      entities.forEach(function(item) {
        html += '<option value="' + item.entity_id + '">' + item.label + ' - ' + (item.detail || '') + '</option>';
      });
    }

    $('#movementEntityId').html(html).prop('disabled', false);

    if (entities.length === 0) {
      var entityLabel = entityType === 'equipment' ? 'equipos' : (entityType === 'component' ? 'componentes' : 'clientes');
      $('#movementSummary').show().html('<strong>Información:</strong> No hay ' + entityLabel + ' con movimientos registrados.');
    } else {
      $('#movementSummary').hide().html('');
    }
  }

  // Función para cargar historial de trazabilidad por movimiento
  function loadMovementHistoryData() {
    var entityType = $('#movementEntityType').val();
    var entityId = $('#movementEntityId').val();

    if (!entityType || !entityId) {
      $('#movementSummary').hide().html('');
      $('#movementSamplesBeforeTableBody').html('<tr><td colspan="6" class="text-center text-muted">Seleccione equipo, componente o cliente con cambios</td></tr>');
      $('#movementSamplesAfterTableBody').html('<tr><td colspan="6" class="text-center text-muted">Seleccione equipo, componente o cliente con cambios</td></tr>');
      $('#movementEventsTableBody').html('<tr><td colspan="6" class="text-center text-muted">No hay movimientos para mostrar</td></tr>');
      clearMovementPaginations();
      return;
    }

    $.ajax({
      type: 'POST',
      url: '/administrator/import/test/get-movement-history',
      data: {
        "entity_type": entityType,
        "entity_id": entityId
      },
      dataType: 'json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function() {
        $('#movementSummary').show().html('<i class="fa fa-spinner fa-spin"></i> Cargando trazabilidad...');
        $('#movementSamplesBeforeTableBody').html('<tr><td colspan="6" class="text-center"><i class="fa fa-spinner fa-spin"></i> Cargando...</td></tr>');
        $('#movementSamplesAfterTableBody').html('<tr><td colspan="6" class="text-center"><i class="fa fa-spinner fa-spin"></i> Cargando...</td></tr>');
        $('#movementEventsTableBody').html('<tr><td colspan="6" class="text-center"><i class="fa fa-spinner fa-spin"></i> Cargando...</td></tr>');
        clearMovementPaginations();
      },
      success: function(response) {
        if (response.state == 1) {
          var summary = response.data.summary || {};
          var summaryHtml = '<strong>Entidad:</strong> ' + (summary.entity_label || 'N/A') +
            ' | <strong>Muestras asociadas:</strong> ' + (summary.samples_count || 0) +
            ' | <strong>Movimientos de cuenta:</strong> ' + (summary.equipment_movements_count || 0) +
            ' | <strong>Movimientos de componente:</strong> ' + (summary.component_movements_count || 0) +
            ' | <strong>Movimientos de cliente:</strong> ' + (summary.customer_movements_count || 0) +
            (summary.reference_movement_date ? ' | <strong>Movimiento de referencia:</strong> ' + summary.reference_movement_date + ' (' + (summary.reference_movement_type || 'N/A') + ')' : '');
          $('#movementSummary').show().html(summaryHtml);

          setMovementTableData('before', response.data.samples_before_movement || []);
          setMovementTableData('after', response.data.samples_after_movement || []);
          setMovementTableData('events', response.data.movements || []);
        } else {
          swal("Error", response.message, "error");
          $('#movementSummary').hide().html('');
          $('#movementSamplesBeforeTableBody').html('<tr><td colspan="6" class="text-center text-danger">Error al cargar los datos</td></tr>');
          $('#movementSamplesAfterTableBody').html('<tr><td colspan="6" class="text-center text-danger">Error al cargar los datos</td></tr>');
          $('#movementEventsTableBody').html('<tr><td colspan="6" class="text-center text-danger">Error al cargar los datos</td></tr>');
          clearMovementPaginations();
        }
      },
      error: function(xhr) {
        swal("Error", "No se pudo cargar el historial de trazabilidad", "error");
        $('#movementSummary').hide().html('');
        $('#movementSamplesBeforeTableBody').html('<tr><td colspan="6" class="text-center text-danger">Error al cargar los datos</td></tr>');
        $('#movementSamplesAfterTableBody').html('<tr><td colspan="6" class="text-center text-danger">Error al cargar los datos</td></tr>');
        $('#movementEventsTableBody').html('<tr><td colspan="6" class="text-center text-danger">Error al cargar los datos</td></tr>');
        clearMovementPaginations();
      }
    });
  }

  // Función para cargar los datos de auditoría
  function loadAuditData() {
    var sampleId = $('#auditSampleCode').val();

    if (!sampleId) {
      $('#auditTableBody').html('<tr><td colspan="6" class="text-center text-muted">Seleccione una muestra para ver el historial</td></tr>');
      return;
    }

    $.ajax({
      type: 'POST',
      url: '/administrator/import/test/get-audit',
      data: {
        "sample_id": sampleId
      },
      dataType: 'json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function() {
        $('#auditTableBody').html('<tr><td colspan="6" class="text-center"><i class="fa fa-spinner fa-spin"></i> Cargando...</td></tr>');
      },
      success: function(response) {
        if (response.state == 1) {
          var html = '';
          if (response.data.length > 0) {
            response.data.forEach(function(audit) {
              html += '<tr>';
              html += '<td>' + audit.created_at + '</td>';
              html += '<td>' + audit.user_name + '</td>';
              html += '<td>' + audit.test_name + '</td>';
              html += '<td><strong>' + audit.old_value + '</strong></td>';
              html += '<td><strong class="text-success">' + audit.new_value + '</strong></td>';
              html += '<td>' + (audit.change_reason || 'N/A') + '</td>';
              html += '</tr>';
            });
          } else {
            html = '<tr><td colspan="6" class="text-center text-muted">No hay cambios registrados en esta muestra</td></tr>';
          }
          $('#auditTableBody').html(html);
        } else {
          swal("Error", response.message, "error");
          $('#auditTableBody').html('<tr><td colspan="6" class="text-center text-danger">Error al cargar los datos</td></tr>');
        }
      },
      error: function(xhr) {
        swal("Error", "No se pudo cargar la auditoría", "error");
        $('#auditTableBody').html('<tr><td colspan="6" class="text-center text-danger">Error al cargar los datos</td></tr>');
      }
    });
  }

  $('#btnExportAuditSample').on('click', function() {
    var sampleId = $('#auditSampleCode').val();
    if (!sampleId) {
      swal('Atencion', 'Seleccione una muestra para exportar', 'warning');
      return;
    }
    var url = auditExportUrl + '?sample_id=' + encodeURIComponent(sampleId);
    window.open(url, '_blank');
  });

  $('#btnExportAuditAll').on('click', function() {
    window.open(auditExportUrl, '_blank');
  });

  $('#idModalCommentary').on('shown.bs.modal', function () {
  $('#default_comments').select2({
      dropdownParent: $('#idModalCommentary'),
      minimumInputLength: 2,
      ajax: {
        url: '/comments/search',
        dataType: 'json',
        delay: 300,
        data: function(params) {
          return { search: params.term };
        },
        processResults: function(data) {
          return {
            results: data.map(item => ({
              id: item.id.toString(),
              text: item.comment_text
            }))
          };
        }
      },
      placeholder: 'Escribe al menos 2 caracteres...',
      language: {
        inputTooShort: () => 'Escribe al menos 2 caracteres'
      }
    });
  });
</script>

@endsection