@extends('layouts.theme_selector')

@section('content')
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12">
        <div class="card glass-card border-0 shadow-lg mb-4">

          <div class="card-header py-3 border-0 d-flex align-items-center"
            style="background: var(--sp-brand-blue) !important;">
            <a href="{{ url()->previous() }}"
              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;">
              <i class="bi bi-chevron-left text-white"></i>
            </a>
            <div>
              <h5 class="mb-0 fw-bold shadow-text text-white">Agencias Activas</h5>
              <small class="text-white opacity-75">Cartera de agencias registradas</small>
            </div>
          </div>

          @php $agencias = session('agencias') ?? $agencias; @endphp

          @if ($errors->any())
            <div class="px-4 pt-3">
              <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ $errors->first() }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
              </div>
            </div>
          @endif

          @if (isset($agencias) and count($agencias) > 0)
            <div class="card-body p-0 my-2">
              <div class="table-responsive">
                <table id="tablaAgenciasActivas" class="table table-hover table-sm align-middle mb-0">
                  <thead class="table-dark text-center">
                    <tr>
                      <th>ID</th>
                      <th>Cód. Equis</th>
                      <th>Nombre</th>
                      <th>Nombre Comercial</th>
                      <th class="text-center" style="white-space:nowrap;width:1%;"></th>
                      <th class="text-center" style="white-space:nowrap;width:1%;"></th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($agencias as $agencia)
                      <tr class="text-center">
                        <td><span class="badge bg-secondary">{{ $agencia->id }}</span></td>
                        <td>
                          @if($agencia->codigoProdEquis)
                            <span class="badge bg-primary">{{ $agencia->codigoProdEquis }}</span>
                          @else
                            <span class="badge bg-warning text-dark">—</span>
                          @endif
                        </td>
                        <td class="text-center">
                          {{ $agencia->nombre ? $agencia->nombre . ' ' . $agencia->apellido : '—' }}
                        </td>
                        <td class="text-center">{{ $agencia->nombreComercial ?: '—' }}</td>
                        <td style="white-space:nowrap;">
                          <a class="btn btn-sm btn-primary" href="{{ route('AuditarAgencia', ['id' => $agencia->id]) }}">
                            <i class="bi bi-pencil-square me-1"></i>Auditar
                          </a>
                        </td>
                        <td style="white-space:nowrap;">
                          <form action="{{ route('QuitarRegistro') }}" method="POST">
                            @csrf
                            <input type="hidden" name="database" value="agencia">
                            <input type="hidden" name="agencia_id" value="{{ $agencia->id }}">
                            <input type="hidden" name="cod_prod_equis" value="{{ $agencia->codigoProdEquis }}">
                            <button class="btn btn-sm btn-outline-danger" type="submit"
                              onclick="return confirm('¿Confirma que desea quitar este registro?')">
                              <i class="bi bi-x-circle me-1"></i>Quitar
                            </button>
                          </form>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          @else
            <div class="card-body text-center py-5 text-muted">
              <i class="bi bi-building fs-1 d-block mb-2 opacity-50"></i>
              No se encontraron agencias activas.
            </div>
          @endif

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

@push('scripts')
  <script>
    $(document).ready(function () {
      $('#tablaAgenciasActivas').DataTable({
        order: [[0, 'desc']],
        lengthMenu: [[15]],
        dom: '<"row"<"col-3 p-0 mx-auto tableFinder"f>> t <"row mt-2"<"col-md-5 mx-auto"p>>',
        language: { url: "//cdn.datatables.net/plug-ins/1.11.4/i18n/es_es.json" }
      });
    });
  </script>
@endpush

@include('layouts/datatable')