@extends('layouts/layoutMaster')

@php
  $companiesPayload = $companies->map(fn ($company) => [
      'id' => $company->id,
      'name' => $company->name,
  ])->values();
  $citiesPayload = $cities->map(fn ($city) => [
      'id' => $city->id,
      'name' => $city->name,
  ])->values();
@endphp

@section('title', 'Resumen semanal de horarios')

@section('page-style')
  <style>
    .overview-progress {
      height: 6px;
      border-radius: 999px;
      background: var(--bs-gray-200);
      overflow: hidden;
    }
    .overview-progress__bar {
      height: 100%;
      background: linear-gradient(90deg, rgba(34,197,94,1) 0%, rgba(16,185,129,1) 100%);
    }
    .overview-chip {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      gap: 0.35rem;
    }
    .overview-chip--ok { background: rgba(34,197,94,0.15); color: #047857; }
    .overview-chip--warn { background: rgba(234,179,8,0.18); color: #92400e; }
    .overview-chip--alert { background: rgba(248,113,113,0.18); color: #b91c1c; }
    .overview-avatar {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: var(--bs-gray-200);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: var(--bs-body-color);
    }
  </style>
@endsection

@section('page-script')
  <script>
    window.__scheduleOverviewConfig = {
      initialWeekStart: @json($weekStart->toDateString()),
      initialWeekLabel: @json($weekLabel),
      initialWeekNumber: @json($weekNumber),
      companies: @json($companiesPayload),
      cities: @json($citiesPayload),
      endpoints: {
        overview: @json(route('admin.api.schedule.overview.index')),
        blocks: @json(route('admin.api.schedule.overview.show', ['user' => '__ID__'])),
        userProfile: @json(route('admin.users.show', ['user' => '__ID__']))
      }
    };
  </script>
  @vite('resources/assets/js/admin-schedule-overview.js')
@endsection

@section('content')
  <div id="scheduleOverviewApp"
       data-week-start="{{ $weekStart->toDateString() }}"
       data-week-label="{{ $weekLabel }}"
       data-week-number="{{ $weekNumber }}">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4">
      <div>
        <h4 class="mb-0">
          <span class="text-muted fw-light">Planificación /</span> Resumen semanal
        </h4>
        <small class="text-muted d-block">Semana <span id="overviewWeekNumber">{{ $weekNumber }}</span> · <span id="overviewWeekRange">{{ $weekLabel }}</span></small>
      </div>
      <div class="d-flex flex-wrap align-items-center gap-2">
        <div class="btn-group btn-group-sm" role="group" aria-label="Navegación semanal">
          <button type="button" class="btn btn-outline-secondary" id="overviewWeekPrev"><i class="ti tabler-chevron-left"></i></button>
          <button type="button" class="btn btn-outline-secondary" id="overviewWeekToday">Semana actual</button>
          <button type="button" class="btn btn-outline-secondary" id="overviewWeekNext"><i class="ti tabler-chevron-right"></i></button>
        </div>
        <a class="btn btn-sm btn-outline-primary" href="{{ route('admin.horarios') }}">
          <i class="ti tabler-layout-grid-add me-1"></i>Ir al planificador
        </a>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-body">
        <div class="row g-3 align-items-end">
          <div class="col-xl-4 col-lg-6">
            <label class="form-label" for="overviewSearch">Buscar rider</label>
            <div class="input-group">
              <span class="input-group-text"><i class="ti tabler-search"></i></span>
              <input type="search" id="overviewSearch" class="form-control" placeholder="Nombre, correo o DNI" autocomplete="off">
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6">
            <label class="form-label" for="overviewCompany">Empresa</label>
            <select id="overviewCompany" class="form-select">
              <option value="">Todas</option>
            </select>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6">
            <label class="form-label" for="overviewCity">Ciudad</label>
            <select id="overviewCity" class="form-select">
              <option value="">Todas</option>
            </select>
          </div>
          <div class="col-xl-2 col-lg-4 col-md-6">
            <label class="form-label" for="overviewStatus">Cobertura</label>
            <select id="overviewStatus" class="form-select">
              <option value="">Todas</option>
              <option value="pendiente">Pendiente (&lt; contrato)</option>
              <option value="sin-horas">Sin horas</option>
              <option value="al-dia">Al día</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-body">
        <div class="row g-3 text-center" id="overviewSummary">
          <div class="col-sm-6 col-md-3">
            <h5 class="mb-0" id="overviewSummaryTotal">—</h5>
            <small class="text-muted">Riders</small>
          </div>
          <div class="col-sm-6 col-md-3">
            <h5 class="mb-0 text-warning" id="overviewSummaryPending">—</h5>
            <small class="text-muted">Pendientes</small>
          </div>
          <div class="col-sm-6 col-md-3">
            <h5 class="mb-0 text-success" id="overviewSummaryCovered">—</h5>
            <small class="text-muted">Al día</small>
          </div>
          <div class="col-sm-6 col-md-3">
            <h5 class="mb-0" id="overviewSummaryCoverage">—</h5>
            <small class="text-muted">Cobertura media</small>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Rider</th>
              <th>Empresas</th>
              <th>Ciudades</th>
              <th class="text-center">Contrato</th>
              <th class="text-center">Asignado</th>
              <th style="width: 220px;">Cobertura</th>
              <th>Último movimiento</th>
              <th class="text-end">Acciones</th>
            </tr>
          </thead>
          <tbody id="scheduleOverviewTableBody"></tbody>
        </table>
      </div>
      <div id="scheduleOverviewEmpty" class="text-center text-muted py-5 d-none">
        Ajusta los filtros o busca un rider para ver su progreso esta semana.
      </div>
    </div>
  </div>

  <div class="modal fade" id="scheduleOverviewExportModal" tabindex="-1" aria-labelledby="scheduleOverviewExportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="scheduleOverviewExportModalLabel">Copiar horarios Glovo</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <div class="row g-3 mb-3">
            <div class="col-md-6">
              <label class="form-label">Rider</label>
              <div id="overviewExportRiderName" class="fw-semibold">—</div>
              <small class="text-muted" id="overviewExportCoverage">Cobertura: —</small>
            </div>
            <div class="col-md-3">
              <label class="form-label" for="overviewExportCity">Código de ciudad</label>
              <input type="text" id="overviewExportCity" class="form-control text-uppercase" placeholder="Ej: GRO">
            </div>
            <div class="col-md-3">
              <label class="form-label" for="overviewExportCourier">Courier ID</label>
              <input type="text" id="overviewExportCourier" class="form-control" placeholder="ID de courier">
            </div>
            <div class="col-md-3">
              <label class="form-label" for="overviewExportRiderId">Rider ID Glovo</label>
              <input type="text" id="overviewExportRiderId" class="form-control" placeholder="ID de rider">
            </div>
          </div>

          <div id="overviewExportEmpty" class="alert alert-warning d-none">
            No hay bloques BOOK/UNBOOK para este periodo. Verifica si tiene horas asignadas esta semana.
          </div>

        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
          <div class="btn-group" role="group" aria-label="Filtro de bloques">
            <input type="radio" class="btn-check" name="overviewExportFilter" id="overviewExportFilterAll" value="all" checked>
            <label class="btn btn-sm btn-outline-primary" for="overviewExportFilterAll">BOOK + UNBOOK</label>
            <input type="radio" class="btn-check" name="overviewExportFilter" id="overviewExportFilterBook" value="book">
            <label class="btn btn-sm btn-outline-success" for="overviewExportFilterBook">Solo BOOK</label>
            <input type="radio" class="btn-check" name="overviewExportFilter" id="overviewExportFilterUnbook" value="unbook">
            <label class="btn btn-sm btn-outline-warning" for="overviewExportFilterUnbook">Solo UNBOOK</label>
          </div>
          <small class="text-muted" id="overviewExportWeekLabel">Semana actual</small>
        </div>
        <div class="table-responsive mb-3">
            <table class="table table-sm table-striped align-middle">
              <thead class="table-light">
                <tr>
                  <th>Ciudad</th>
                  <th>Día</th>
                  <th>Inicio</th>
                  <th>Fin</th>
                  <th>Acción</th>
                </tr>
              </thead>
              <tbody id="overviewExportTableBody"></tbody>
            </table>
          </div>

          <label for="overviewExportRaw" class="form-label">Texto listo para pegar</label>
          <textarea id="overviewExportRaw" class="form-control font-monospace" rows="6" readonly></textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button type="button" class="btn btn-primary" id="overviewExportCopy" disabled>
            <i class="ti tabler-clipboard-check me-1"></i>Copiar formato
          </button>
        </div>
      </div>
    </div>
  </div>
@endsection