@extends('layouts.theme_selector')

@section('content')

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12 text-center">

        <div
          class="mb-5 d-inline-block px-4 py-2 rounded-pill bg-brand-blue bg-opacity-10 border border-brand-blue border-opacity-20 shadow-sm d-flex align-items-center mx-auto"
          style="width: fit-content;">
          <a href="{{ route('DenunciaInspecciones', ['poliza' => $inspeccion->poliza, 'denuncia_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 al listado de inspecciones">
            <i class="bi bi-chevron-left text-white"></i>
          </a>
          <h4 class="mb-0 fw-bold tracking-tight text-brand-blue">
            <i class="bi bi-shield-check me-2"></i>
            Detalle de Inspección Nº {{ $inspeccion->id }}
          </h4>
        </div>

        <div class="row justify-content-center text-start">

          <div class="col-12 col-lg-10">
            <div class="card glass-card border-0 shadow-lg overflow-hidden mb-4">
              <div class="card-header py-3 border-0 d-flex justify-content-between align-items-center" style="background: var(--sp-brand-blue) !important;">
                <h6 class="mb-0 fw-bold tracking-tight text-white shadow-text">DATOS GENERALES</h6>
                @if ($inspeccion->aprobada == 0)
                  <span class="badge bg-warning text-dark px-3 rounded-pill"><i class="bi bi-clock-history me-1"></i> Pendiente de Auditoría</span>
                @elseif ($inspeccion->aprobada == 1)
                  <span class="badge bg-success text-white px-3 rounded-pill"><i class="bi bi-check-circle me-1"></i> Aprobada</span>
                @elseif ($inspeccion->aprobada == 2)
                  <span class="badge bg-danger text-white px-3 rounded-pill"><i class="bi bi-x-octagon me-1"></i> Rechazada</span>
                @endif
              </div>
              <div class="card-body p-4 p-md-5">
                <div class="row row-cols-1 row-cols-md-2 g-4">
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Fecha de Inspección</label>
                    <p class="mb-0 fw-bold">{{ \Carbon\Carbon::parse($inspeccion->fecha)->format('d/m/Y') }}</p>
                  </div>
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Póliza Nº</label>
                    <p class="mb-0 fw-bold">{{ $inspeccion->poliza }}</p>
                  </div>
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Socio Documento Nº</label>
                    <p class="mb-0">{{ $inspeccion->documento }}</p>
                  </div>
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Propuesta Nº</label>
                    <p class="mb-0">{{ $inspeccion->propuesta }}</p>
                  </div>
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Patente</label>
                    <p class="mb-0"><span class="badge bg-dark bg-opacity-75 fs-6">{{ $inspeccion->patente }}</span></p>
                  </div>
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Kilometraje</label>
                    <p class="mb-0">{{ number_format($inspeccion->km, 0, ',', '.') }} km</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12 col-lg-10">
            <div class="card glass-card border-0 shadow-lg overflow-hidden mb-4">
              <div class="card-header py-3 border-0" style="background: var(--sp-brand-blue) !important;">
                <h6 class="mb-0 fw-bold tracking-tight text-white shadow-text">ESTADO DEL VEHÍCULO</h6>
              </div>
              <div class="card-body p-4 p-md-5">
                <div class="row row-cols-1 row-cols-md-2 g-4">
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Estado General</label>
                    <p class="mb-0 fw-bold">{{ $inspeccion->estado_general ?: 'No especificado' }}</p>
                  </div>
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Neumático Delantero</label>
                    <p class="mb-0">{{ $inspeccion->estado_neumatico_delantero ?: 'No especificado' }}</p>
                  </div>
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Neumático Trasero</label>
                    <p class="mb-0">{{ $inspeccion->estado_neumatico_trasero ?: 'No especificado' }}</p>
                  </div>
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Estado Motor</label>
                    <p class="mb-0">{{ $inspeccion->estado_motor ?: 'No especificado' }}</p>
                  </div>
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Estado Carrocería</label>
                    <p class="mb-0">{{ $inspeccion->estado_carroceria ?: 'No especificado' }}</p>
                  </div>
                  <div class="col">
                    <label class="text-muted small fw-bold text-uppercase">Estado Luces</label>
                    <p class="mb-0">{{ $inspeccion->estado_luces ?: 'No especificado' }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>


          @if (!empty($imagenes))
            <div class="col-12 col-lg-10">
              <div class="card glass-card border-0 shadow-lg overflow-hidden mb-4">
                <div class="card-header py-3 border-0" style="background: var(--sp-brand-blue) !important;">
                  <h6 class="mb-0 fw-bold tracking-tight text-white shadow-text">IMÁGENES DEL VEHÍCULO</h6>
                </div>
                <div class="card-body p-4 p-md-5">
                  <div class="row justify-content-center text-center">
                    
                    @if (isset($imagenes['left-front']))
                      <div class="col-md-6 mb-4">
                        <label class="text-muted small fw-bold text-uppercase mb-2">Lateral Izquierdo</label>
                        <div>
                          <a class="btn btn-outline-brand-blue rounded-pill px-4" target="popup" href="{{$imagenes['left-front']}}" onclick="window.open('{{$imagenes['left-front']}}', 'popup', 'width=780, height=700, top=200, scrollbars=no, resizable=no'); return false;">
                            <i class="bi bi-image me-1"></i> Ver Imagen
                          </a>
                        </div>
                      </div>
                    @endif

                    @if (isset($imagenes['right-side']))
                      <div class="col-md-6 mb-4">
                        <label class="text-muted small fw-bold text-uppercase mb-2">Lateral Derecho</label>
                        <div>
                          <a class="btn btn-outline-brand-blue rounded-pill px-4" target="popup" href="{{$imagenes['right-side']}}" onclick="window.open('{{$imagenes['right-side']}}', 'popup', 'width=780, height=700, top=200, scrollbars=no, resizable=no'); return false;">
                            <i class="bi bi-image me-1"></i> Ver Imagen
                          </a>
                        </div>
                      </div>
                    @endif

                    @if (isset($imagenes['chasis']))
                      <div class="col-md-6 mb-4">
                        <label class="text-muted small fw-bold text-uppercase mb-2">Chasis</label>
                        <div>
                          <a class="btn btn-outline-brand-blue rounded-pill px-4" target="popup" href="{{$imagenes['chasis']}}" onclick="window.open('{{$imagenes['chasis']}}', 'popup', 'width=780, height=700, top=200, scrollbars=no, resizable=no'); return false;">
                            <i class="bi bi-image me-1"></i> Ver Imagen
                          </a>
                        </div>
                      </div>
                    @endif

                    @if (isset($imagenes['motor']))
                      <div class="col-md-6 mb-4">
                        <label class="text-muted small fw-bold text-uppercase mb-2">Motor</label>
                        <div>
                          <a class="btn btn-outline-brand-blue rounded-pill px-4" target="popup" href="{{$imagenes['motor']}}" onclick="window.open('{{$imagenes['motor']}}', 'popup', 'width=780, height=700, top=200, scrollbars=no, resizable=no'); return false;">
                            <i class="bi bi-image me-1"></i> Ver Imagen
                          </a>
                        </div>
                      </div>
                    @endif

                  </div>
                </div>
              </div>
            </div>
          @endif

          <div class="col-12 col-lg-10 mt-2 mb-5 text-center">
             <a href="{{ route('VerDatos', ['id' => $denuncia_id]) }}" class="btn btn-brand-blue fw-extrabold px-5 py-3 hover-up transition-all rounded-pill shadow-lg">
                <i class="bi bi-box-arrow-left me-2"></i> VOLVER A LA DENUNCIA
             </a>
          </div>

        </div>

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