@extends('layouts/layoutMaster')

@php
  use Carbon\Carbon;
  $weekStart = Carbon::now()->startOfWeek(Carbon::MONDAY);
  $days = collect(range(0, 6))->map(fn ($offset) => $weekStart->copy()->addDays($offset));
  $timeSlots = collect(range(0, 47))->map(function ($slot) {
      $minutes = $slot * 30;
      $hour = intdiv($minutes, 60);
      $minute = $minutes % 60;
      return sprintf('%02d:%02d', $hour, $minute);
  });
@endphp

@section('title', 'Planificador de Horarios')

@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;
    }

    .schedule-wrapper { display: flex; flex-direction: column; gap: 1.5rem; }
    .schedule-controls .form-control, .schedule-controls .form-select { height: 42px; }
    .schedule-controls .btn-icon { width: 42px; height: 42px; padding: 0; }

    .schedule-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; }
    .schedule-legend__item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--bs-body-color); }
    .schedule-legend__bullet { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

    .schedule-grid { border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: var(--bs-box-shadow-sm); }
    .schedule-grid__header { display: grid; grid-template-columns: 120px repeat(7, minmax(160px, 1fr)); background: var(--bs-gray-100); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 5; }
    .schedule-grid__header-cell { padding: 1rem; font-weight: 600; display: flex; flex-direction: column; gap: 0.15rem; border-right: 1px solid var(--bs-border-color); background: inherit; }
    .schedule-grid__header-cell:last-child { border-right: none; }
    .schedule-grid__header-cell small { color: var(--bs-body-secondary-color); font-weight: 500; }
    .schedule-grid__header-cell--time { align-items: center; justify-content: center; font-weight: 500; }

    .schedule-grid__body-wrapper { max-height: calc(48 * 32px + 1px); overflow: auto; }
    .schedule-grid__row { display: grid; grid-template-columns: 120px repeat(7, minmax(160px, 1fr)); min-height: 32px; border-bottom: 1px solid rgba(0,0,0,0.04); }
    .schedule-grid__row:last-child { border-bottom: none; }

    .schedule-grid__time { position: sticky; left: 0; background: var(--bs-gray-100); padding: 0.35rem 0.75rem; font-size: 0.85rem; color: var(--bs-body-secondary-color); display: flex; align-items: center; border-right: 1px solid rgba(0,0,0,0.06); z-index: 4; }

    .schedule-cell { border-right: 1px solid rgba(0,0,0,0.03); padding: 0.2rem 0.4rem; position: relative; cursor: pointer; transition: background-color .2s ease; }
    .schedule-cell:last-child { border-right: none; }
    .schedule-cell::after { content: ''; position: absolute; inset: 4px 6px; border-radius: 6px; background: transparent; transition: background-color .2s ease, border .2s ease; }
    .schedule-cell.is-selected::after { background: rgba(16,185,129,0.18); border: 1px solid rgba(5,150,105,0.55); }
    .schedule-cell:hover::after { background: rgba(105,108,255,0.08); }
    .schedule-cell--book::after { background: rgba(16,185,129,0.2); border: 1px solid rgba(5,150,105,0.45); }
    .schedule-cell--unbook::after { background: rgba(251,191,36,0.2); border: 1px dashed rgba(217,119,6,0.6); }
    .schedule-cell--filled:not(.schedule-cell--book):not(.schedule-cell--unbook)::after { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.25); }

    .schedule-rider-list { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; }
    .schedule-rider { min-width: 180px; border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 0.75rem 1rem; background: #fff; box-shadow: var(--bs-box-shadow-sm); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; cursor: pointer; }
    .schedule-rider:hover { transform: translateY(-2px); box-shadow: var(--bs-box-shadow); }
    .schedule-rider--active { background: rgba(105,108,255,0.14); border-color: rgba(105,108,255,0.45); box-shadow: var(--bs-box-shadow); }
    .schedule-rider__name { font-weight: 600; margin-bottom: 0.25rem; }
    .schedule-rider__tag { font-size: 0.8rem; color: var(--bs-body-secondary-color); }

    @media (max-width: 992px) {
      .schedule-grid__header, .schedule-grid__row { grid-template-columns: 90px repeat(7, minmax(140px, 1fr)); }
      .schedule-grid__body-wrapper { max-height: 440px; }
    }
  </style>
@endsection

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

@section('content')
  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4">
    <h4 class="mb-0">
      <span class="text-muted fw-light">Planificación /</span> Horarios
    </h4>
    <div class="d-flex align-items-center gap-2">
      <button class="btn btn-label-secondary" id="schedulePrevWeek"><i class="ti tabler-chevron-left me-1"></i> Semana anterior</button>
      <button class="btn btn-label-secondary" id="scheduleNextWeek">Siguiente semana <i class="ti tabler-chevron-right ms-1"></i></button>
    </div>
  </div>

  <div class="schedule-wrapper" id="schedulePlannerWrapper">
    <div class="card">
      <div class="card-body">
        <div class="row g-3 schedule-controls">
          <div class="col-md-4 col-lg-3">
            <label class="form-label" for="scheduleSearch">Buscar rider</label>
            <input type="search" id="scheduleSearch" class="form-control" placeholder="Nombre, correo o ID">
          </div>
          <div class="col-md-4 col-lg-3">
            <label class="form-label" for="scheduleCompany">Empresa</label>
            <select id="scheduleCompany" class="form-select">
              <option value="">Todas</option>
            </select>
          </div>
          <div class="col-md-4 col-lg-3">
            <label class="form-label" for="scheduleCity">Ciudad</label>
            <select id="scheduleCity" class="form-select">
              <option value="">Todas</option>
            </select>
          </div>
          <div class="col-md-12 col-lg-3 d-flex gap-2 align-items-end">
            <button class="btn btn-label-primary" id="scheduleReset">Limpiar filtros</button>
            <button class="btn btn-primary" id="schedulePublish">Publicar</button>
            <button class="btn btn-outline-secondary" id="scheduleTemplates">Plantillas</button>
          </div>
        </div>

        <hr class="my-4">

        <div class="schedule-legend">
          <div class="schedule-legend__item"><span class="schedule-legend__bullet bg-success"></span> BOOK</div>
          <div class="schedule-legend__item"><span class="schedule-legend__bullet bg-warning"></span> UNBOOK</div>
          <div class="schedule-legend__item"><span class="schedule-legend__bullet bg-secondary"></span> Disponible</div>
        </div>

        <div class="schedule-rider-list" id="scheduleRiderList">
          <div class="text-muted">Selecciona filtros o usa la búsqueda para cargar riders…</div>
        </div>
      </div>
    </div>

    <div class="schedule-grid" id="scheduleBoard" aria-label="Cuadrante semanal" data-week-start="{{ $weekStart->toDateString() }}">
      <div class="schedule-grid__header">
        <div class="schedule-grid__header-cell schedule-grid__header-cell--time">Hora</div>
        @foreach($days as $day)
          <div class="schedule-grid__header-cell">
            <span>{{ $day->translatedFormat('l d') }}</span>
            <small>{{ $day->translatedFormat('F Y') }}</small>
          </div>
        @endforeach
      </div>
      <div class="schedule-grid__body-wrapper">
        @foreach($timeSlots as $slotLabel)
          <div class="schedule-grid__row" data-slot="{{ $slotLabel }}">
            <div class="schedule-grid__time">{{ $slotLabel }}</div>
            @foreach($days as $day)
              <div class="schedule-cell" data-day="{{ $day->format('Y-m-d') }}" data-time="{{ $slotLabel }}"></div>
            @endforeach
          </div>
        @endforeach
      </div>
    </div>
  </div>
@endsection

@push('modals')
  <div class="modal fade" id="scheduleExportModal" tabindex="-1" aria-labelledby="scheduleExportModalLabel" 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="scheduleExportModalLabel">Subir horarios a Glovo</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-info mb-4">
            El formato debe respetar la estructura oficial:
            <br>
            <code>codigo_ciudad, courier_ID, dia, hora_inicio, hora_final, accion, rider_id</code>.
            Al copiar, los horarios se agrupan en bloques continuos de 30 minutos.
          </div>
          <div class="row g-3 mb-4">
            <div class="col-md-4">
              <label for="scheduleExportCity" class="form-label">Código de ciudad</label>
              <input type="text" id="scheduleExportCity" class="form-control text-uppercase" placeholder="Ej: GRO">
            </div>
            <div class="col-md-4">
              <label for="scheduleExportCourier" class="form-label">Courier ID</label>
              <input type="text" id="scheduleExportCourier" class="form-control" placeholder="ID de courier">
            </div>
            <div class="col-md-4">
              <label for="scheduleExportRider" class="form-label">Rider ID Glovo</label>
              <input type="text" id="scheduleExportRider" class="form-control" placeholder="ID de rider">
            </div>
          </div>
          <div id="scheduleExportNoRider" class="alert alert-warning d-none">
            Selecciona un rider en el planificador para ver sus horarios.
          </div>
          <div id="scheduleExportEmpty" class="alert alert-warning d-none">
            No hay turnos confirmados para el rider seleccionado en esta semana.
          </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>Courier ID</th>
                  <th>Día</th>
                  <th>Inicio</th>
                  <th>Fin</th>
                  <th>Acción</th>
                  <th>Rider ID</th>
                </tr>
              </thead>
              <tbody id="scheduleExportTableBody"></tbody>
            </table>
          </div>
          <label for="scheduleExportRaw" class="form-label">Texto listo para pegar</label>
          <textarea id="scheduleExportRaw" 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="scheduleExportCopy" disabled>
            <i class="ti tabler-clipboard-check me-1"></i> Copiar horarios
          </button>
        </div>
      </div>
    </div>
  </div>
@endpush