@extends('layouts.theme_selector')

@section('content')
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12">

        @include('layouts.alerts.error')

        <div class="card glass-card border-0 shadow-lg overflow-hidden animate__animated animate__fadeIn">

          <div class="card-header py-3 border-0 d-flex align-items-center justify-content-between"
            style="background: var(--sp-brand-blue) !important;">
            <div class="d-flex align-items-center">
              <a href="{{ route('VerDatos', ['id' => $denuncia_id]) }}"
                class="btn btn-sm glass-brand-red rounded-circle me-3 shadow-sm border-0 d-flex align-items-center justify-content-center"
                style="width: 35px; height: 35px;" data-bs-toggle="tooltip" title="Volver a la Denuncia">
                <i class="bi bi-chevron-left text-white"></i>
              </a>
              <h5 class="mb-0 fw-bold tracking-tight shadow-text text-white">Inspecciones Asociadas - Póliza #{{ $poliza }}</h5>
            </div>
          </div>

          <div class="card-body p-4">
            @if (isset($inspecciones) && count($inspecciones) > 0)
              <div class="table-responsive">
                <table id="tabla_inspecciones" class="table table-sm table-hover border-light border-opacity-10">
                  <thead class="bg-light bg-opacity-50">
                    <tr class="text-center">
                      <th class="py-3 text-muted small fw-bold text-uppercase tracking-wider">Estado</th>
                      <th class="py-3 text-muted small fw-bold text-uppercase tracking-wider">Propuesta</th>
                      <th class="py-3 text-muted small fw-bold text-uppercase tracking-wider">Patente</th>
                      <th class="py-3 text-muted small fw-bold text-uppercase tracking-wider">Fecha Insp.</th>
                      <th class="py-3 text-muted small fw-bold text-uppercase tracking-wider">Acción</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($inspecciones as $inspeccion)
                      <tr class="text-center align-middle">
                        <td>
                          @if ($inspeccion['aprobada'] == 0)
                            <span class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-25 rounded-pill px-3 fw-normal">
                              <i class="bi bi-clock-history me-1"></i> Pendiente
                            </span>
                          @elseif ($inspeccion['aprobada'] == 1)
                            <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 rounded-pill px-3 fw-normal">
                              <i class="bi bi-check-circle me-1"></i> Aprobada
                            </span>
                          @elseif ($inspeccion['aprobada'] == 2)
                            <span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 rounded-pill px-3 fw-normal">
                              <i class="bi bi-x-octagon me-1"></i> Rechazada
                            </span>
                          @endif
                        </td>
                        <td class="text-muted">{{ $inspeccion['propuesta'] }}</td>
                        <td><span class="badge bg-dark bg-opacity-75 rounded-1">{{ $inspeccion['patente'] }}</span></td>
                        <td class="small fw-bold">{{ \Carbon\Carbon::parse($inspeccion['fecha'])->format('d/m/Y') }}</td>
                        <td>
                          <a class="btn btn-sm btn-outline-info rounded-pill px-3 fw-bold transition-all hover-up"
                            href="{{ route('DenunciaVerInspeccion', ['id' => $inspeccion['id'], 'denuncia_id' => $denuncia_id]) }}">
                            <i class="bi bi-eye me-1"></i> Ver Detalles
                          </a>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            @else
              <div class="py-5 text-center text-muted">
                <div class="mb-3 opacity-25">
                  <i class="bi bi-search" style="font-size: 4rem;"></i>
                </div>
                <h4 class="fw-bold">No se encontraron inspecciones</h4>
                <p class="lead mb-0">No hay registros de inspección disponibles para esta póliza.</p>
                <a href="{{ route('VerDatos', ['id' => $denuncia_id]) }}" class="btn btn-outline-secondary rounded-pill mt-4 px-4">
                  Volver a la Denuncia
                </a>
              </div>
            @endif
          </div>

        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    $(document).ready(function () {
      if (!$.fn.DataTable.isDataTable('#tabla_inspecciones')) {
        $('#tabla_inspecciones').DataTable({
          order: [[3, 'desc']], // Order by date
          lengthMenu: [10, 25, 50],
          pageLength: 10,
          dom: '<"row justify-content-between align-items-center mb-3"<"col-auto"l><"col-auto"f>>rt<"row mt-3 align-items-center"<"col-auto"i><"col-auto ms-auto"p>>',
          language: {
            url: "//cdn.datatables.net/plug-ins/1.11.4/i18n/es_es.json"
          }
        });
      }
    });
  </script>
@endpush

@include('layouts/datatable')