@extends('layouts/layoutMaster')

@section('title', 'Seguimiento mensual de horas')

@section('page-style')
  <style>
    :root {
      --bs-body-bg: #fff;
      --bs-body-bg-rgb: 255, 255, 255;
      --bs-paper-bg: #fff;
      --bs-paper-bg-rgb: 255, 255, 255;
    }

    body,
    .layout-wrapper,
    .layout-page,
    .content-wrapper,
    .content-wrapper > .container-p-y {
      background-color: #fff !important;
    }

    .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page::before {
      background: none !important;
    }

    .monthly-wrapper {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .monthly-filters .form-control,
    .monthly-filters .form-select {
      height: 42px;
    }

    .monthly-summary-grid {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      text-align: center;
    }

    .monthly-summary-grid h5 {
      margin-bottom: 0.15rem;
    }

    .monthly-summary-grid small {
      color: var(--bs-body-secondary-color);
    }

    @media (min-width: 768px) {
      .monthly-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 575.98px) {
      .monthly-filters .form-label {
        margin-bottom: .35rem;
      }
    }

    .monthly-detail-drawer {
      --bs-offcanvas-width: 100vw;
      width: var(--bs-offcanvas-width);
      max-width: 100vw;
    }

    .monthly-detail-drawer.offcanvas-end {
      width: var(--bs-offcanvas-width);
    }

    .monthly-detail-drawer .offcanvas-body {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .monthly-detail-drawer .offcanvas-footer {
      background-color: var(--bs-body-bg);
    }

    .detail-stat-card,
    .detail-card {
      background: var(--bs-paper-bg);
      border: 1px solid var(--bs-border-color);
      border-radius: 0.85rem;
      padding: 1.1rem 1.25rem;
      height: 100%;
    }

    .detail-stat-card small {
      display: block;
      color: var(--bs-body-secondary-color);
    }

    .detail-card__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }

    .detail-card__head h6 {
      margin-bottom: 0;
    }

    .detail-coverage-list .list-group-item,
    .detail-no-show-list .list-group-item {
      border-left: none;
      border-right: none;
      padding-inline: 0;
    }

    .detail-coverage-list .list-group-item:first-child,
    .detail-no-show-list .list-group-item:first-child {
      border-top: none;
      padding-top: 0;
    }

    .detail-coverage-list .list-group-item:last-child,
    .detail-no-show-list .list-group-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .detail-coverage-list .badge {
      min-width: 4.25rem;
      justify-content: center;
    }

    .detail-alert-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 0.35rem 0.7rem;
      font-size: 0.8rem;
      font-weight: 600;
    }

    @media (max-width: 575.98px) {
      .monthly-detail-drawer {
        width: 100%;
      }
    }
  </style>
@endsection

@section('page-script')
  @vite('resources/assets/js/admin-schedule-board.js')
@endsection

@section('content')
  <div class="monthly-wrapper">
    <div class="d-flex align-items-start justify-content-between flex-wrap gap-2">
      <div>
        <h4 class="mb-1">Seguimiento mensual de horas</h4>
        <small class="text-muted" id="monthlyProgressSummary">Selecciona un mes para ver los resultados.</small>
      </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 class="card monthly-filters">
      <div class="card-body">
        <div class="row g-3 align-items-end">
          <div class="col-sm-6 col-lg-3">
            <label class="form-label" for="monthlyProgressMonth">Mes</label>
            <input type="month" class="form-control" id="monthlyProgressMonth" value="{{ now()->format('Y-m') }}">
          </div>
          <div class="col-sm-6 col-lg-3">
            <label class="form-label" for="monthlyProgressSearch">Buscar rider</label>
            <input type="search" class="form-control" id="monthlyProgressSearch" placeholder="Nombre, correo o ID">
          </div>
          <div class="col-sm-6 col-lg-3">
            <label class="form-label" for="monthlyProgressCompany">Empresa</label>
            <select id="monthlyProgressCompany" class="form-select" disabled>
              <option value="">Todas</option>
            </select>
          </div>
          <div class="col-sm-6 col-lg-3">
            <label class="form-label" for="monthlyProgressCity">Ciudad</label>
            <select id="monthlyProgressCity" class="form-select" disabled>
              <option value="">Todas</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <div class="monthly-summary-grid">
          <div>
            <h5 class="mb-0" id="monthlyMetricTotal" data-bs-toggle="tooltip" data-bs-placement="top" title="Riders con métricas registradas durante el periodo seleccionado">—</h5>
            <small>Riders evaluados</small>
          </div>
          <div>
            <h5 class="mb-0 text-success" id="monthlyMetricOnTarget" data-bs-toggle="tooltip" data-bs-placement="top" title="Riders cuya cobertura mensual alcanza o supera el 100 % del objetivo contractual">—</h5>
            <small>En objetivo</small>
          </div>
          <div>
            <h5 class="mb-0 text-danger" id="monthlyMetricPending" data-bs-toggle="tooltip" data-bs-placement="top" title="Riders que requieren seguimiento por déficit de horas, ausencia de datos o no show elevado">—</h5>
            <small>En alerta</small>
          </div>
          <div>
            <h5 class="mb-0" id="monthlyMetricCoverage" data-bs-toggle="tooltip" data-bs-placement="top" title="Promedio de cobertura mensual (horas acumuladas vs. objetivo) para los riders del listado">—</h5>
            <small>Cobertura media</small>
          </div>
        </div>
      </div>
    </div>

    <div class="card" id="monthlyProgressCard">
      <div class="table-responsive d-none" id="monthlyProgressTableWrapper">
        <table class="table table-hover align-middle mb-0" id="monthlyProgressTable">
          <thead class="table-light">
            <tr>
              <th>Rider</th>
              <th class="text-nowrap">Delegación</th>
              <th class="text-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Horas totales reportadas por Glovo para el mes en curso">Horas acumuladas</th>
              <th class="text-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Objetivo mensual estimado a partir de las horas semanales de contrato">Objetivo</th>
              <th class="text-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Diferencia entre horas acumuladas y objetivo mensual">Diferencia</th>
              <th class="text-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Cobertura mensual (horas acumuladas / objetivo)">Cumplimiento</th>
              <th class="text-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Resumen del peor desempeño semanal frente al objetivo contractual">Cobertura semanal</th>
              <th class="text-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Motivos que requieren seguimiento: baja cobertura, ausencia de horas o no show elevado">Alertas</th>
              <th class="text-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Promedio de No Show reportado por Glovo para el mes">No Show</th>
              <th class="text-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Estado de la última semana registrada en Glovo">Estado semanal</th>
              <th class="text-end">Acciones</th>
            </tr>
          </thead>
          <tbody id="monthlyProgressTableBody"></tbody>
        </table>
      </div>
      <div id="monthlyProgressEmpty" class="text-center text-muted py-5 d-none">No hay registros para el mes seleccionado.</div>
      <div id="monthlyProgressLoading" class="text-center text-muted py-5">Cargando seguimiento...</div>
      <div class="d-flex justify-content-between align-items-center px-4 py-3 border-top" id="monthlyProgressPagination" hidden>
        <div class="text-muted small" id="monthlyProgressTotals"></div>
        <div class="btn-group btn-group-sm" role="group">
          <button type="button" class="btn btn-outline-secondary" id="monthlyProgressPrev">Anterior</button>
          <button type="button" class="btn btn-outline-secondary" id="monthlyProgressNext">Siguiente</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('modals')
  <div class="offcanvas offcanvas-end monthly-detail-drawer" tabindex="-1" id="monthlyDetailModal" aria-labelledby="monthlyDetailTitle">
    <div class="offcanvas-header border-bottom">
      <div>
        <h5 class="offcanvas-title mb-0" id="monthlyDetailTitle">Detalle mensual</h5>
        <small class="text-muted" id="monthlyDetailSubtitle"></small>
      </div>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
    </div>
    <div class="offcanvas-body">
      <div id="monthlyDetailLoading" class="text-center text-muted py-4">Cargando detalle…</div>
      <div id="monthlyDetailContent" class="d-none">
        <div class="row g-3">
          <div class="col-6 col-lg-3">
            <div class="detail-stat-card">
              <small>Horas acumuladas</small>
              <h5 class="mb-0" id="monthlyDetailHours">—</h5>
            </div>
          </div>
          <div class="col-6 col-lg-3">
            <div class="detail-stat-card">
              <small>Objetivo</small>
              <h5 class="mb-0" id="monthlyDetailTarget">—</h5>
            </div>
          </div>
          <div class="col-6 col-lg-3">
            <div class="detail-stat-card">
              <small>Diferencia</small>
              <h5 class="mb-0" id="monthlyDetailDelta">—</h5>
            </div>
          </div>
          <div class="col-6 col-lg-3">
            <div class="detail-stat-card">
              <small>No Show promedio</small>
              <h5 class="mb-0" id="monthlyDetailNoShow">—</h5>
            </div>
          </div>
          <div class="col-6 col-lg-3">
            <div class="detail-stat-card">
              <small>Días con horas</small>
              <h5 class="mb-0" id="monthlyDetailWorkedDays">—</h5>
            </div>
          </div>
          <div class="col-6 col-lg-3">
            <div class="detail-stat-card">
              <small>Días activos</small>
              <h5 class="mb-0" id="monthlyDetailActiveDays">—</h5>
            </div>
          </div>
        </div>

        <div class="row g-4">
          <div class="col-xl-6">
            <div class="detail-card h-100">
              <div class="detail-card__head">
                <h6>
                  Estado contractual
                  <i class="ti tabler-info-circle ms-1 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title="Cobertura semanal frente al objetivo contractual. Se destaca la peor semana para priorizar seguimiento."></i>
                </h6>
                <div id="monthlyDetailCoverageBadge"><span class="badge bg-label-secondary">—</span></div>
              </div>
              <p class="text-muted small mb-3" id="monthlyDetailCoverageDetail">Selecciona un rider para ver la cobertura.</p>
              <ul class="list-group list-group-flush detail-coverage-list d-none" id="monthlyDetailCoverageList"></ul>
              <div class="text-muted small" id="monthlyDetailCoverageEmpty">Sin semanas con objetivo registrado.</div>
            </div>
          </div>
          <div class="col-xl-6">
            <div class="detail-card h-100">
              <div class="detail-card__head">
                <h6>
                  Resumen semanal
                  <i class="ti tabler-info-circle ms-1 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title="Detalle semanal de horas trabajadas, objetivo y cobertura."></i>
                </h6>
              </div>
              <div class="table-responsive">
                <table class="table table-sm align-middle mb-0">
                  <thead class="table-light">
                    <tr>
                      <th>Semana</th>
                      <th class="text-center">Horas</th>
                      <th class="text-center">Objetivo</th>
                      <th class="text-center">Δ</th>
                      <th class="text-center">Cobertura</th>
                      <th class="text-end">Estado</th>
                    </tr>
                  </thead>
                  <tbody id="monthlyDetailWeeksBody"></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <div class="row g-4">
          <div class="col-xl-6">
            <div class="detail-card h-100">
              <div class="detail-card__head">
                <h6>
                  Días con No Show
                  <i class="ti tabler-info-circle ms-1 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title="Listado de días donde Glovo reporta No Show y las horas afectadas."></i>
                </h6>
              </div>
              <div id="monthlyDetailNoShowEmpty" class="text-muted small">Sin incidencias de No Show en el periodo.</div>
              <ul class="list-group list-group-flush detail-no-show-list d-none" id="monthlyDetailNoShowList"></ul>
            </div>
          </div>
          <div class="col-xl-6">
            <div class="detail-card h-100">
              <div class="detail-card__head">
                <h6>
                  Alertas
                  <i class="ti tabler-info-circle ms-1 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title="Motivos por los que el rider requiere seguimiento: baja cobertura, ausencia de horas o No Show elevado."></i>
                </h6>
              </div>
              <div id="monthlyDetailAlertEmpty" class="text-muted small">Sin alertas registradas.</div>
              <div id="monthlyDetailAlertList" class="d-flex flex-wrap gap-2 d-none"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="offcanvas-footer border-top p-3 d-flex align-items-center justify-content-between">
      <a id="monthlyDetailProfileLink" class="btn btn-link px-0" target="_blank" rel="noopener">Ver ficha del rider</a>
      <button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cerrar</button>
    </div>
  </div>
@endpush