@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Detalle de usuario')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
  'resources/assets/vendor/libs/animate-css/animate.scss',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
@endsection

@section('page-style')
@vite('resources/assets/vendor/scss/pages/page-user-view.scss')
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
  'resources/assets/vendor/libs/cleave-zen/cleave-zen.js',
  'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/@form-validation/popular.js',
  'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
  'resources/assets/vendor/libs/@form-validation/auto-focus.js'
])
@endsection

@section('page-script')
@vite(['resources/assets/js/modal-edit-user.js', 'resources/assets/js/app-user-view.js', 'resources/assets/js/app-user-view-account.js'])
@endsection

<!-- Forecast legend modal -->
<div class="modal fade" id="forecastLegendModal" tabindex="-1" aria-labelledby="forecastLegendModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="forecastLegendModalLabel"><i class="ti tabler-bulb me-1"></i>¿Cómo leer los indicadores?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <p class="mb-2 small">Cada bloque horario muestra una pastilla con el formato <span class="fw-semibold">propios / demanda / otras flotas</span>:</p>
        <ul class="small ps-3 mb-3">
          <li><span class="badge bg-label-success me-1">Propios</span>Riders asignados manualmente por tu equipo.</li>
          <li><span class="badge bg-label-primary me-1">Demanda</span>Total de riders que el forecast recomienda para esa franja.</li>
          <li><span class="badge bg-label-warning me-1">Otras flotas</span>Capacidad que ya han tomado otras empresas de la ciudad (no tus riders).</li>
        </ul>
        <p class="small mb-0">Cuando la suma de <em>Propios + Otras flotas</em> alcanza la Demanda, el slot se marca como cubierto.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Entendido</button>
      </div>
    </div>
  </div>
</div>

<!-- Forecast summary offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="forecastSummaryOffcanvas" aria-labelledby="forecastSummaryTitle">
  <div class="offcanvas-header">
    <div>
      <h5 class="offcanvas-title mb-0" id="forecastSummaryTitle">Detalle forecast</h5>
      <small class="text-muted" id="forecastSummarySubtitle">Selecciona un día para ver el detalle.</small>
    </div>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
  </div>
  <div class="offcanvas-body d-flex flex-column">
    <div class="mb-3">
      <label for="forecastSummaryDay" class="form-label small text-muted mb-1">Día</label>
      <select id="forecastSummaryDay" class="form-select form-select-sm">
        <option value="">Sin forecast disponible</option>
      </select>
    </div>
    <div class="table-responsive">
      <table class="table table-sm table-hover mb-0">
        <thead>
          <tr>
            <th>Franja</th>
            <th class="text-center">Pedidos</th>
            <th class="text-center">Demanda total</th>
            <th class="text-center">Consumo propio</th>
            <th class="text-center">Consumo otras flotas</th>
            <th class="text-center">Restante</th>
          </tr>
        </thead>
        <tbody id="forecastSummaryBody"></tbody>
      </table>
    </div>
    <div id="forecastSummaryEmpty" class="text-muted small text-center py-3 d-none">No hay forecast disponible para este día.</div>
    <div id="forecastSummaryTotals" class="mt-3 small text-muted fw-semibold"></div>
  </div>
</div>

@section('content')
@php
  $from = request()->query('from');
  $prev = url()->previous();
  $backUrl = $from === 'riders' || \Illuminate\Support\Str::contains($prev, '/admin/riders')
    ? route('admin.riders')
    : route('admin.users.index');
  $vehicleHistory = collect($vehicleAssignments ?? []);
  $activeVehicleAssignment = $vehicleHistory->firstWhere('returned_at', null);
  $primaryRole = optional($user->roles->first());
  $roleName = $primaryRole->name ?? 'Sin asignar';
  $roleSlug = $primaryRole->slug ?? '';
  $isAdmin = method_exists($user, 'isAdmin') ? $user->isAdmin() : false;
  $isRider = str_contains(strtolower($roleSlug), 'rider')
    || str_contains(strtolower($roleSlug), 'repart')
    || str_contains(strtolower($roleSlug), 'courier');
  $roleIcon = $isAdmin
    ? 'ti tabler-settings-cog'
    : ($isRider ? 'ti tabler-bike' : 'ti tabler-user-circle');
  $badgeTone = $isAdmin ? 'bg-label-danger' : ($isRider ? 'bg-label-success' : 'bg-label-info');
  $statusBadgeClass = $user->active ? 'bg-label-success' : 'bg-label-secondary';
  $statusLabel = $user->active ? 'Activo' : 'Inactivo';
  $manualHoursWeek = number_format((float)($scheduleTotals['manual_hours_week'] ?? 0), 2, ',', '.');
  $manualHoursTotal = number_format((float)($scheduleTotals['manual_hours_total'] ?? 0), 2, ',', '.');
  $forecastHoursWeek = number_format((float)($scheduleTotals['forecast_hours_week'] ?? 0), 2, ',', '.');
  $forecastHoursTotal = number_format((float)($scheduleTotals['forecast_hours_total'] ?? 0), 2, ',', '.');
  $avatarColorPalette = [
    'bg-label-primary',
    'bg-label-success',
    'bg-label-info',
    'bg-label-warning',
    'bg-label-danger',
    'bg-label-secondary',
    'bg-label-dark',
  ];
  $nameParts = preg_split('/\s+/', trim($user->name ?? ''), -1, PREG_SPLIT_NO_EMPTY);
  $avatarInitials = collect($nameParts)
    ->map(fn ($part) => mb_strtoupper(mb_substr($part, 0, 1)))
    ->filter()
    ->take(2)
    ->implode('');
  if ($avatarInitials === '') {
    $identifier = $user->email ?? $user->dni ?? 'Rider';
    $avatarInitials = strtoupper(mb_substr($identifier, 0, 2));
  }
  $avatarSeed = $user->id ?? crc32($user->email ?? $user->name ?? 'seed');
  $avatarColor = $avatarColorPalette[$avatarSeed % count($avatarColorPalette)] ?? $avatarColorPalette[0];
  $vehicleSummary = 'Sin vehículo asignado';
  if ($activeVehicleAssignment) {
    $vehicleParts = [];
    $vehicleParts[] = optional($activeVehicleAssignment->vehicle)->name ?? '—';
    if (($activeVehicleAssignment->vehicle_source ?? null) === 'company') {
      $vehicleParts[] = 'Empresa' . (optional($activeVehicleAssignment->company)->name ? ': ' . optional($activeVehicleAssignment->company)->name : '');
    } elseif (($activeVehicleAssignment->vehicle_source ?? null) === 'personal') {
      $vehicleParts[] = 'Personal';
    }
    if ($activeVehicleAssignment->vehicle_monthly_cost) {
      $vehicleParts[] = number_format((float) $activeVehicleAssignment->vehicle_monthly_cost, 2, ',', '.') . ' € / mes';
    }
    if ($activeVehicleAssignment->assigned_at) {
      $vehicleParts[] = 'Desde ' . $activeVehicleAssignment->assigned_at->format('d/m/Y');
    }
    $vehicleSummary = implode(' · ', array_filter($vehicleParts));
  }
  $credentialsCollection = $glovoCredentials instanceof \Illuminate\Support\Collection
    ? $glovoCredentials
    : collect($glovoCredentials);
  $riderIds = $credentialsCollection->pluck('rider_id')->filter()->unique()->values();
  $primaryRiderId = $riderIds->first();
  $additionalRiderIds = $riderIds->skip(1);
  $scheduleBoardWeekStart = \Illuminate\Support\Carbon::now()->startOfWeek(\Illuminate\Support\Carbon::MONDAY);
  $scheduleBoardDays = collect(range(0, 6))->map(fn ($offset) => $scheduleBoardWeekStart->copy()->addDays($offset));
  $scheduleBoardSlots = collect(range(0, 47))->map(function ($slot) {
    $minutes = $slot * 30;
    $hour = intdiv($minutes, 60);
    $minute = $minutes % 60;
    return sprintf('%02d:%02d', $hour, $minute);
  });
  $scheduleBoardWeekEnd = $scheduleBoardWeekStart->copy()->addDays(6);
  $scheduleBoardWeekLabel = $scheduleBoardWeekStart->translatedFormat('d \de F') . ' – ' . $scheduleBoardWeekEnd->translatedFormat('d \de F Y');
  $manualSchedule = $manualScheduleState ?? [
    'available' => true,
    'enabled' => false,
    'raw_flag' => false,
    'week_start' => $scheduleBoardWeekStart->toDateString(),
    'week_label' => $scheduleBoardWeekLabel,
    'week' => null,
    'manual_week_label' => null,
    'eligible' => true,
    'has_forecast' => false,
    'active_other_week' => false,
  ];

  $manualHoursValue = round((float)($scheduleTotals['manual_hours_total'] ?? 0), 2);
  $forecastHoursValue = round((float)($scheduleTotals['forecast_hours_total'] ?? 0), 2);
  $totalHoursValue = max($manualHoursValue + $forecastHoursValue, 0);
  $manualShare = $totalHoursValue > 0 ? round(($manualHoursValue / $totalHoursValue) * 100) : 0;
  $forecastShare = $totalHoursValue > 0 ? round(($forecastHoursValue / $totalHoursValue) * 100) : 0;
  $totalHoursPretty = number_format($totalHoursValue, 2, ',', '.');
  $manualHoursPretty = number_format($manualHoursValue, 2, ',', '.');
  $forecastHoursPretty = number_format($forecastHoursValue, 2, ',', '.');

  $lastShift = $scheduleHistory->first();
  $lastShiftDateLabel = $lastShift && $lastShift->slot_date
    ? \Illuminate\Support\Carbon::parse($lastShift->slot_date)->translatedFormat('d M Y')
    : 'Sin registros';
  $lastShiftTimeLabel = $lastShift && $lastShift->slot_time ? substr((string) $lastShift->slot_time, 0, 5) : '—';
  $lastShiftSource = $lastShift ? ($lastShift->source === 'manual' ? 'Manual' : ucfirst($lastShift->source ?? 'Forecast')) : null;
  $lastShiftSourceBadge = 'bg-label-secondary';
  if ($lastShiftSource === 'Manual') {
    $lastShiftSourceBadge = 'bg-label-success';
  } elseif ($lastShiftSource === 'Forecast') {
    $lastShiftSourceBadge = 'bg-label-info';
  }
  $lastShiftAssignedBy = $lastShift && ($lastShift->relationLoaded('assignedBy') || isset($lastShift->assignedBy))
    ? (optional($lastShift->assignedBy)->name ?? '—')
    : '—';

  $companiesCount = $user->companies->count();
  $citiesCount = $user->cities->count();
  $zonesCount = $user->zones->count();
  $accountAgeLabel = optional($user->created_at)?->diffForHumans() ?? '—';

  $manualScheduleStatusLabel = 'No disponible';
  $manualScheduleStatusBadge = 'bg-label-secondary';
  if ($manualSchedule['available']) {
    if ($manualSchedule['enabled']) {
      $manualScheduleStatusLabel = 'Activo esta semana';
      $manualScheduleStatusBadge = 'bg-label-success';
    } elseif (!empty($manualSchedule['raw_flag'])) {
      $manualScheduleStatusLabel = 'Programado';
      $manualScheduleStatusBadge = 'bg-label-warning';
    } else {
      $manualScheduleStatusLabel = 'Desactivado';
      $manualScheduleStatusBadge = 'bg-label-secondary';
    }
  }
  $manualScheduleWeekLabel = $manualSchedule['manual_week_label'] ?? ($manualSchedule['week_label'] ?? null);

  $vehicleNameLabel = optional(optional($activeVehicleAssignment)->vehicle)->name ?? 'Sin vehículo asignado';
  $vehicleStatusBadge = $activeVehicleAssignment ? 'bg-label-success' : 'bg-label-secondary';
  $vehicleLastChange = $vehicleHistory->first();
  if ($vehicleLastChange) {
    $vehicleChangeDate = optional($vehicleLastChange->assigned_at) ?: optional($vehicleLastChange->created_at);
    $vehicleLastChangeLabel = $vehicleChangeDate ? $vehicleChangeDate->format('d/m/Y') : '—';
  } else {
    $vehicleLastChangeLabel = '—';
  }
  $primaryCompanyName = optional($user->companies->first())->name ?? 'Sin empresa principal';
  $primaryCityName = optional($user->cities->first())->name ?? null;
  $userPhone = $user->phone ?? trim(($user->phone_prefix ?? '') . ' ' . ($user->phone_number ?? ''));
  $userPhone = $userPhone !== '' ? $userPhone : null;
@endphp

<style>
  .user-hero-surface {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--bs-card-bg);
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.08);
  }
  .user-hero-banner {
    height: 160px;
    background: linear-gradient(120deg, rgba(108, 92, 231, 0.9), rgba(67, 206, 162, 0.85));
  }
  .user-hero-body {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1.5rem 2.25rem 2.25rem;
    margin-top: -72px;
  }
  .user-hero-meta {
    display: flex;
    align-items: flex-end;
    gap: 1.75rem;
  }
  .user-hero-avatar .avatar {
    width: 130px;
    height: 130px;
    border-radius: 999px;
    border: 6px solid var(--bs-card-bg);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
    display: grid;
    place-items: center;
    font-size: 2.75rem;
    font-weight: 700;
    text-transform: uppercase;
  }
  .user-hero-avatar .avatar.user-avatar-initial {
    color: var(--bs-heading-color);
  }
  .user-hero-info {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    color: var(--bs-body-color);
  }
  .user-hero-title {
    font-size: 2.15rem;
    font-weight: 700;
    margin-bottom: 0;
  }
  .user-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
  }
  .user-hero-status {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
  .user-hero-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
  }
  .user-hero-details i {
    margin-right: 0.35rem;
    color: var(--bs-primary);
  }
  .user-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }
  .user-hero-tags span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: var(--bs-gray-100);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--bs-body-color);
  }
  .user-hero-tags span i { color: var(--bs-primary); }
  .user-hero-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-left: auto; }
  .btn-pill { border-radius: 999px; padding-inline: 1.1rem; }
  .btn-label-light { background: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.75); color: var(--bs-primary); }
  .btn-label-light:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.95); }
  .user-tabs-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bs-card-bg);
    border-radius: 1rem;
    padding: 0.75rem;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  }
  .user-tabs-card .nav-link {
    border-radius: 999px;
    background: transparent;
    color: var(--bs-body-color);
    font-weight: 600;
    padding: 0.45rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
  }
  .user-tabs-card .nav-link i { font-size: 1rem; color: var(--bs-secondary-color); }
  .user-tabs-card .nav-link.active {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    box-shadow: 0 6px 18px rgba(var(--bs-primary-rgb), 0.15);
  }
  .user-tabs-card .nav-link.active i { color: var(--bs-primary); }
  .user-highlight-card {
    background: var(--bs-card-bg);
    border-radius: 1.2rem;
    padding: 1.4rem;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border: 1px solid rgba(98, 105, 118, 0.08);
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .user-highlight-card:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12); }
  .user-highlight-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 0.9rem;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
  }
  .user-highlight-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary-color); font-weight: 600; }
  .user-highlight-value { font-size: 1.6rem; font-weight: 700; color: var(--bs-body-color); }
  .user-highlight-meta { font-size: 0.85rem; color: var(--bs-secondary-color); }
  .user-highlight-list { margin: 0; padding-left: 1rem; color: var(--bs-secondary-color); font-size: 0.85rem; }
  @media (max-width: 991.98px) {
    .user-hero-body { padding: 1.5rem; }
    .user-hero-meta { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    .user-hero-avatar .avatar { width: 110px; height: 110px; }
    .user-hero-actions { width: 100%; align-items: flex-start; }
  }
  @media (max-width: 767.98px) {
    .user-hero-details { flex-direction: column; gap: 0.65rem; }
    .user-tabs-card { flex-direction: column; align-items: flex-start; }
    .user-tabs-card .nav { width: 100%; gap: 0.5rem; }
    .user-tabs-card .nav-link { width: 100%; justify-content: center; }
    .user-highlight-card { padding: 1.2rem; }
  }
  .user-sidebar-sticky { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.5rem; }
  @media (max-width: 991.98px) {
    .user-sidebar-sticky { position: static; }
  }
  .user-content-tabs .nav-link {
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    transition: all 0.2s ease;
    background: var(--bs-gray-100);
    color: var(--bs-body-color);
    font-weight: 600;
  }
  .user-content-tabs .nav-link i { color: var(--bs-secondary-color); transition: color 0.2s ease; }
  .user-content-tabs .nav-link.active {
    background: rgba(var(--bs-primary-rgb), 0.16);
    color: var(--bs-primary);
    box-shadow: 0 10px 28px rgba(var(--bs-primary-rgb), 0.18);
  }
  .user-content-tabs .nav-link.active i { color: var(--bs-primary); }
  .user-detail-item + .user-detail-item { border-top: 1px dashed var(--bs-border-color); }
  .user-detail-item { padding: 0.9rem 0; }
  .contract-history-item { border-left: 2px solid var(--bs-border-color); margin-left: 0.75rem; padding-left: 1rem; position: relative; }
  .contract-history-item::before { content: ''; position: absolute; left: -9px; top: 0.85rem; width: 10px; height: 10px; border-radius: 999px; background: var(--bs-primary); }
  .contract-history-empty { color: var(--bs-secondary-color); font-size: 0.875rem; }
  .assign-table-wrapper { border: 1px solid var(--bs-border-color); border-radius: 0.85rem; }
  .calendar-grid-wrapper { border: 1px dashed var(--bs-border-color); border-radius: 0.85rem; padding: 1rem; background: var(--bs-body-bg); }
  .vehicle-timeline .timeline-event { border: 1px solid var(--bs-border-color); border-radius: 1rem; }
  .vehicle-timeline .timeline-event small { color: var(--bs-secondary-color); }

  /* Per-rider schedule planner */
  .user-schedule-card { border: 0; box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08); }
  .user-schedule-header { display: flex; flex-direction: column; gap: 0.35rem; }
  .user-schedule-view-toggle { display: inline-flex; border-radius: 999px; padding: 0.2rem; background: var(--bs-gray-100); }
  .user-schedule-view-toggle .btn { border-radius: 999px; border: none; font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.9rem; color: var(--bs-body-color); background: transparent; transition: background-color 0.2s ease, color 0.2s ease; }
  .user-schedule-view-toggle .btn-active { background: var(--bs-white); color: var(--bs-primary); box-shadow: 0 6px 16px rgba(105, 108, 255, 0.14); }

  .user-schedule-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .user-schedule-legend__item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--bs-secondary-color); }
  .user-schedule-legend__bullet { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1px solid transparent; }
  .user-schedule-legend__bullet--book { background: #34d399; border-color: rgba(5, 150, 105, 0.6); }
  .user-schedule-legend__bullet--unbook { background: #facc15; border-color: rgba(217, 119, 6, 0.65); }
  .user-schedule-legend__bullet--forecast { background: rgba(37, 99, 235, 0.12); border: 1px dashed rgba(37, 99, 235, 0.65); }
  .user-schedule-legend__bullet--forecast-mine { background: rgba(37, 99, 235, 0.45); border-color: rgba(37, 99, 235, 0.8); }
  .btn-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0.35rem; width: 34px; height: 34px; }
  .btn-icon.btn-sm { width: 30px; height: 30px; padding: 0.25rem; }

  .user-schedule-board { position: relative; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-body-bg); overflow: hidden; }
  .user-schedule-board.is-loading::after { content: 'Cargando...'; position: absolute; inset: 0; background: rgba(255,255,255,0.72); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--bs-primary); z-index: 5; }

  /* Week grid */
  .user-schedule-week-view.d-none { display: none !important; }
  .user-schedule-grid__header { display: grid; grid-template-columns: 110px repeat(7, minmax(150px, 1fr)); background: var(--bs-gray-100); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 4; }
  .user-schedule-grid__header-cell { padding: 0.85rem 1rem; font-weight: 600; display: flex; flex-direction: column; gap: 0.2rem; border-right: 1px solid rgba(15,23,42,0.05); text-transform: capitalize; }
  .user-schedule-grid__header-cell small { color: var(--bs-secondary-color); font-weight: 500; }
  .user-schedule-grid__forecast-indicator { margin-top: 0.35rem; font-size: 0.72rem; font-weight: 600; color: rgba(37, 99, 235, 0.9); display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(37, 99, 235, 0.08); }
  .user-schedule-grid__forecast-indicator.is-empty { color: var(--bs-secondary-color); opacity: 0.65; background: transparent; padding: 0; }
  .user-schedule-grid__forecast-indicator .ti { font-size: 0.85rem; }
  .user-schedule-grid__header-cell:last-child { border-right: none; }
  .user-schedule-grid__header-cell--time { align-items: center; justify-content: center; font-weight: 500; text-transform: none; }
  .user-schedule-body { max-height: 480px; overflow: auto; }
  .user-schedule-row { display: grid; grid-template-columns: 110px repeat(7, minmax(150px, 1fr)); min-height: 32px; border-bottom: 1px solid rgba(15,23,42,0.05); }
  .user-schedule-row:last-child { border-bottom: none; }
  .user-schedule-time { position: sticky; left: 0; background: var(--bs-gray-100); padding: 0.3rem 0.65rem; font-size: 0.78rem; color: var(--bs-secondary-color); display: flex; align-items: center; border-right: 1px solid rgba(15,23,42,0.06); z-index: 3; }

  /* Shared slot styles */
  .user-schedule-cell { position: relative; padding: 0.15rem 0.4rem; border-right: 1px solid rgba(15,23,42,0.04); cursor: pointer; transition: background-color 0.2s ease; }
  .user-schedule-cell:last-child { border-right: none; }
  .user-schedule-cell::after { content: ''; position: absolute; inset: 4px 6px; border-radius: 8px; background: transparent; transition: background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease; }
  .user-schedule-cell:hover::after { background: rgba(34, 197, 94, 0.08); }
  .user-schedule-cell--forecast::after { background: rgba(37, 99, 235, 0.12); border: 1px dashed rgba(37, 99, 235, 0.45); }
  .user-schedule-cell--forecast-mine::after { border-style: solid; border-color: rgba(37, 99, 235, 0.55); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18); }
  .user-schedule-cell--forecast-full::after { background: rgba(148, 163, 184, 0.18); border-color: rgba(100, 116, 139, 0.45); }
  .user-schedule-cell--book::after { background: rgba(16, 185, 129, 0.22); border: 1px solid rgba(5, 150, 105, 0.55); }
  .user-schedule-cell--unbook::after { background: rgba(250, 204, 21, 0.2); border: 1px dashed rgba(217, 119, 6, 0.6); }
  .user-schedule-cell--blocked::after { background: rgba(248,113,113,0.18); border: 1px solid rgba(248,113,113,0.48); }
  .user-schedule-cell--selected::after { background: rgba(16, 185, 129, 0.26) !important; border: 1px solid rgba(16, 185, 129, 0.6) !important; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.18); }
  .user-schedule-cell[data-status-label]:not([data-status-label=""])::before { content: attr(data-status-label); position: absolute; bottom: 6px; right: 10px; font-size: 0.65rem; font-weight: 600; color: rgba(15, 23, 42, 0.45); text-transform: uppercase; letter-spacing: 0.05em; }
  .user-schedule-cell__forecast { position: absolute; top: 6px; left: 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 18px; padding: 0 6px; font-size: 0.63rem; font-weight: 600; border-radius: 999px; color: #1d4ed8; background: rgba(37, 99, 235, 0.18); pointer-events: none; z-index: 2; gap: 2px; font-variant-numeric: tabular-nums; }
  .user-schedule-cell__forecast span { line-height: 1; }
  .user-schedule-cell__forecast-consumed { font-weight: 700; color: #0f766e; }
  .user-schedule-cell__forecast-capacity { opacity: 0.85; color: #1d4ed8; }
  .user-schedule-cell__forecast-external { font-weight: 700; color: #7c3aed; }
  .user-schedule-cell__forecast-divider { opacity: 0.4; color: inherit; }
  .user-schedule-cell__forecast.is-mine { background: rgba(37, 99, 235, 0.28); }
  .user-schedule-cell--forecast-full .user-schedule-cell__forecast { color: #0f172a; background: rgba(148, 163, 184, 0.4); }
  .user-schedule-cell--forecast-full .user-schedule-cell__forecast-consumed,
  .user-schedule-cell--forecast-full .user-schedule-cell__forecast-external { color: #0f172a; }

  /* Day view */
  .user-schedule-day-view { padding: 1rem; }
  .user-schedule-day-view.d-none { display: none !important; }
  .user-schedule-day-header { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  .user-schedule-day-header small { color: var(--bs-secondary-color); }
  .user-schedule-day-body { max-height: 480px; overflow: auto; border-top: 1px solid rgba(15,23,42,0.05); }
  .user-schedule-day-row { display: grid; grid-template-columns: 110px 1fr; min-height: 32px; border-bottom: 1px solid rgba(15,23,42,0.05); }
  .user-schedule-day-row:last-child { border-bottom: none; }
  .user-schedule-day-row .user-schedule-time { position: sticky; left: 0; background: var(--bs-gray-100); border-right: 1px solid rgba(15,23,42,0.06); }

  /* Month view */
  .user-schedule-month-view { padding: 1.25rem; }
  .user-schedule-month-view.d-none { display: none !important; }
  .user-schedule-month-grid { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 0.75rem; }
  .user-schedule-month-cell { border: 1px solid var(--bs-border-color); border-radius: 0.9rem; padding: 0.8rem; min-height: 120px; background: var(--bs-white); position: relative; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .user-schedule-month-cell:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); }
  .user-schedule-month-cell.is-muted { opacity: 0.35; cursor: default; box-shadow: none; transform: none; }
  .user-schedule-month-cell.is-book { border-color: rgba(16, 185, 129, 0.6); background: rgba(16, 185, 129, 0.12); }
  .user-schedule-month-cell.is-unbook { border-color: rgba(217, 119, 6, 0.6); background: rgba(250, 204, 21, 0.14); }
  .user-schedule-month-cell.is-blocked { border-color: rgba(248,113,113,0.5); background: rgba(248,113,113,0.1); }
  .user-schedule-month-cell__date { font-weight: 600; font-size: 0.92rem; }
  .user-schedule-month-cell__hours { font-size: 0.85rem; font-weight: 600; margin-top: 0.35rem; }
  .user-schedule-month-cell__meta { font-size: 0.75rem; color: var(--bs-secondary-color); margin-top: 0.2rem; }
  .badge#userScheduleDayTotal[data-has-forecast="true"] { background-color: rgba(37, 99, 235, 0.14); color: #1d4ed8; border: 1px solid rgba(37, 99, 235, 0.35); }

  /* Wallet management */
  .wallet-admin-balance-card {
    background: linear-gradient(140deg, rgba(105, 108, 255, 0.92), rgba(67, 206, 162, 0.92));
    color: #fff;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
  }
  .wallet-admin-balance-card .badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: none;
  }
  .wallet-admin-balance-value {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
  }
  .wallet-admin-meta {
    color: rgba(255, 255, 255, 0.85);
  }
  .wallet-admin-actions .btn {
    border-radius: 999px;
  }
  .wallet-admin-form .form-label {
    font-weight: 600;
  }
  .wallet-type-group .btn {
    flex: 1 1 auto;
  }
  .wallet-amount-credit {
    color: var(--bs-success);
    font-weight: 600;
  }
  .wallet-amount-debit {
    color: var(--bs-danger);
    font-weight: 600;
  }
  .wallet-transactions-table tbody td {
    vertical-align: middle;
  }
  .wallet-transactions-table .wallet-transaction-desc {
    max-width: 320px;
    white-space: normal;
  }

  @media (max-width: 1200px) {
    .user-schedule-grid__header, .user-schedule-row { grid-template-columns: 90px repeat(7, minmax(130px, 1fr)); }
    .user-schedule-body { max-height: 420px; }
    .user-schedule-month-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  }
</style>

<div class="d-flex justify-content-between align-items-center gap-2 flex-wrap mb-4">
  <a href="{{ $backUrl }}" class="btn btn-label-secondary">
    <i class="ti tabler-arrow-left me-2"></i>
    Volver
  </a>
</div>

<div class="user-hero-surface mb-4">
  <div class="user-hero-banner"></div>
  <div class="user-hero-body">
  <div class="user-hero-meta">
    <div class="user-hero-avatar">
      <div class="avatar avatar-xl user-avatar-initial {{ $avatarColor }} text-heading">
        {{ $avatarInitials }}
      </div>
    </div>
    <div class="user-hero-info">
        <div class="d-flex align-items-center flex-wrap gap-2">
          <h1 class="user-hero-title">{{ $user->name }}</h1>
          <span class="user-hero-badge">{{ $roleName }}</span>
          <span class="user-hero-status badge {{ $statusBadgeClass }}">{{ $statusLabel }}</span>
        </div>
        <ul class="user-hero-details list-inline mt-3 mb-0">
          <li class="list-inline-item">
            <i class="ti tabler-at"></i>{{ $user->email ?: 'Sin correo' }}
          </li>
          <li class="list-inline-item">
            <i class="ti tabler-id"></i>{{ $user->dni ?: 'Sin documento' }}
          </li>
          <li class="list-inline-item">
            <i class="ti tabler-calendar-event"></i>{{ $accountAgeLabel }}
          </li>
          @if($user->sesame_employee_id)
            <li class="list-inline-item">
              <i class="ti tabler-id"></i>Sesame {{ $user->sesame_employee_id }}
            </li>
          @endif
          @if($primaryCityName)
            <li class="list-inline-item">
              <i class="ti tabler-map-pin"></i>{{ $primaryCityName }}
            </li>
          @endif
        </ul>
        <div class="user-hero-tags mt-3">
          @if($primaryRiderId)
            <span><i class="ti tabler-id-badge-2"></i>Rider ID {{ $primaryRiderId }}</span>
          @endif
          <span><i class="ti tabler-building-skyscraper"></i>{{ $primaryCompanyName }}</span>
          <span><i class="ti tabler-clock"></i>{{ $manualHoursPretty }}h manual / {{ $forecastHoursPretty }}h forecast</span>
          <span><i class="ti tabler-car"></i><span id="vehicleHeroLabel">{{ $vehicleNameLabel }}</span></span>
        </div>
      </div>
    </div>
    <div class="user-hero-actions">
      <div class="d-flex flex-wrap gap-2">
        <a href="{{ route('admin.users.edit', $user) }}" class="btn btn-primary btn-pill">
          <i class="ti tabler-edit me-1"></i> Editar perfil
        </a>
        <a href="javascript:;" class="btn btn-label-light btn-pill suspend-user" data-user-id="{{ $user->id }}" data-user-active="{{ $user->active ? 1 : 0 }}">
          <i class="ti {{ $user->active ? 'tabler-user-off' : 'tabler-user-check' }} me-1"></i> {{ $user->active ? 'Suspender' : 'Activar' }}
        </a>
        @if($userPhone)
          <a href="tel:{{ preg_replace('/\s+/', '', $userPhone) }}" class="btn btn-label-light btn-pill">
            <i class="ti tabler-phone me-1"></i> Llamar
          </a>
        @endif
        @if($user->email)
          <a href="mailto:{{ $user->email }}" class="btn btn-label-light btn-pill">
            <i class="ti tabler-mail me-1"></i> Enviar email
          </a>
        @endif
        @if(auth()->check() && method_exists(auth()->user(), 'isAdmin') && auth()->user()->isAdmin() && auth()->id() !== $user->id)
          <form method="POST" action="{{ route('admin.users.impersonate', $user) }}">
            @csrf
            <button type="submit" class="btn btn-label-warning btn-pill">
              <i class="ti tabler-mask me-1"></i> Navegar como rider
            </button>
          </form>
        @endif
      </div>
    </div>
  </div>
</div>

<div class="user-tabs-card mb-4">
  <ul class="nav nav-pills user-content-tabs flex-wrap gap-2" id="userDetailTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="tab-dashboard" data-bs-toggle="pill" data-bs-target="#pane-dashboard" type="button" role="tab" aria-controls="pane-dashboard" aria-selected="true">
        <i class="ti tabler-layout-dashboard me-1"></i> Dashboard
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab-schedule" data-bs-toggle="pill" data-bs-target="#pane-schedule" type="button" role="tab" aria-controls="pane-schedule" aria-selected="false">
        <i class="ti tabler-calendar-week me-1"></i> Planificación
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab-metrics" data-bs-toggle="pill" data-bs-target="#pane-metrics" type="button" role="tab" aria-controls="pane-metrics" aria-selected="false">
        <i class="ti tabler-chart-line me-1"></i> Métricas
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab-assignments" data-bs-toggle="pill" data-bs-target="#pane-assignments" type="button" role="tab" aria-controls="pane-assignments" aria-selected="false">
        <i class="ti tabler-users me-1"></i> Asignaciones
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab-calendar" data-bs-toggle="pill" data-bs-target="#pane-calendar" type="button" role="tab" aria-controls="pane-calendar" aria-selected="false">
        <i class="ti tabler-calendar-month me-1"></i> Seguimiento de horas
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab-wallet" data-bs-toggle="pill" data-bs-target="#pane-wallet" type="button" role="tab" aria-controls="pane-wallet" aria-selected="false">
        <i class="ti tabler-wallet me-1"></i> Monedero
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab-vehicles" data-bs-toggle="pill" data-bs-target="#pane-vehicles" type="button" role="tab" aria-controls="pane-vehicles" aria-selected="false">
        <i class="ti tabler-truck me-1"></i> Vehículos
      </button>
    </li>
  </ul>
</div>

<div id="userMain" data-role="user-main" class="card border-0 shadow-sm">
  <div class="card-body">
        <div class="tab-content" id="userTabContent">
          <div class="tab-pane fade show active" id="pane-dashboard" role="tabpanel" aria-labelledby="tab-dashboard">
            <div class="row g-3 g-lg-4 mb-4">
              <div class="col-md-6 col-xl-3">
                <div class="user-highlight-card">
                  <div class="user-highlight-icon bg-primary-subtle text-primary"><i class="ti tabler-bolt"></i></div>
                  <div class="user-highlight-title">Horas totales</div>
                  <div class="user-highlight-value">{{ $totalHoursPretty }} h</div>
                  <div class="user-highlight-meta">Manual {{ $manualShare }}% · Forecast {{ $forecastShare }}%</div>
                  <div class="progress mt-2" style="height: 4px;">
                    <div class="progress-bar bg-primary" style="width: {{ $manualShare }}%" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ $manualShare }}"></div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-xl-3">
                <div class="user-highlight-card">
                  <div class="user-highlight-icon bg-success-subtle text-success"><i class="ti tabler-clock-hour-8"></i></div>
                  <div class="user-highlight-title">Último turno</div>
                  <div class="user-highlight-value">{{ $lastShiftDateLabel }}</div>
                  <div class="user-highlight-meta d-flex align-items-center gap-2">
                    <span>Inicio {{ $lastShiftTimeLabel }}</span>
                    <span class="badge {{ $lastShiftSourceBadge }}">{{ $lastShiftSource ?? '—' }}</span>
                  </div>
                  <small class="text-muted">Asignado por {{ $lastShiftAssignedBy }}</small>
                </div>
              </div>
              <div class="col-md-6 col-xl-3">
                <div class="user-highlight-card">
                  <div class="user-highlight-icon bg-info-subtle text-info"><i class="ti tabler-current-location"></i></div>
                  <div class="user-highlight-title">Cobertura activa</div>
                  <div class="user-highlight-value">{{ $companiesCount + $citiesCount + $zonesCount }}</div>
                  <ul class="user-highlight-list">
                    <li>{{ $companiesCount }} empresas</li>
                    <li>{{ $citiesCount }} ciudades</li>
                    <li>{{ $zonesCount }} zonas</li>
                  </ul>
                </div>
              </div>
              <div class="col-md-6 col-xl-3">
                <div class="user-highlight-card">
                  <div class="user-highlight-icon bg-warning-subtle text-warning"><i class="ti tabler-steering-wheel"></i></div>
                  <div class="user-highlight-title">Operativa</div>
                  <div class="user-highlight-value" id="vehicleSummaryName">{{ $vehicleNameLabel }}</div>
                  <div class="user-highlight-meta d-flex align-items-center gap-2">
                    <span class="badge {{ $vehicleStatusBadge }}" id="vehicleSummaryBadge">{{ $activeVehicleAssignment ? 'Asignado' : 'Sin asignar' }}</span>
                    <small id="vehicleSummaryUpdated">Actualizado {{ $vehicleLastChangeLabel }}</small>
                  </div>
                  <small class="text-muted">Horario manual: {{ $manualScheduleStatusLabel }}</small>
                </div>
              </div>
            </div>
            <div class="row g-4">
              <div class="col-xl-4 col-lg-6">
                <div class="card border-0 shadow-sm h-100">
                  <div class="card-header border-0 pb-0">
                    <h5 class="card-title mb-1">Información general</h5>
                    <small class="text-muted">Datos clave y estado operativo</small>
                  </div>
                  <div class="card-body pt-3">
                    <div class="user-detail-item d-flex align-items-center gap-3">
                      <i class="ti tabler-at text-primary fs-5"></i>
                      <div>
                        <small class="text-muted d-block">Correo</small>
                        <span class="fw-semibold">{{ $user->email ?: 'Sin información' }}</span>
                      </div>
                    </div>
                    @if($userPhone)
                      <div class="user-detail-item d-flex align-items-center gap-3">
                        <i class="ti tabler-phone-call text-primary fs-5"></i>
                        <div>
                          <small class="text-muted d-block">Teléfono</small>
                          <span class="fw-semibold">{{ $userPhone }}</span>
                        </div>
                      </div>
                    @endif
                    <div class="user-detail-item d-flex align-items-center gap-3">
                      <i class="ti tabler-id-badge text-primary fs-5"></i>
                      <div>
                        <small class="text-muted d-block">DNI / NIE</small>
                        <span class="fw-semibold">{{ $user->dni ?: 'Sin información' }}</span>
                      </div>
                    </div>
                    <div class="user-detail-item d-flex align-items-center gap-3">
                      <i class="ti tabler-id-badge-2 text-primary fs-5"></i>
                      <div>
                        <small class="text-muted d-block">Rider ID Glovo</small>
                        <span class="fw-semibold">{{ $primaryRiderId ?? 'Sin rider ID' }}</span>
                        @if($additionalRiderIds->isNotEmpty())
                          <div class="text-muted small">Otros: {{ $additionalRiderIds->implode(', ') }}</div>
                        @endif
                      </div>
                    </div>
                    <div class="user-detail-item d-flex align-items-center gap-3">
                      <i class="ti tabler-shield-check text-primary fs-5"></i>
                      <div>
                        <small class="text-muted d-block">Estado</small>
                        <span class="badge {{ $statusBadgeClass }}">{{ $statusLabel }}</span>
                      </div>
                    </div>
                    <div class="user-detail-item d-flex align-items-center gap-3">
                      <i class="ti tabler-user-star text-primary fs-5"></i>
                      <div>
                        <small class="text-muted d-block">Rol principal</small>
                        <span class="fw-semibold">{{ $roleName }}</span>
                      </div>
                    </div>
                    <div class="user-detail-item d-flex align-items-center gap-3">
                      <i class="ti tabler-currency-euro text-primary fs-5"></i>
                      <div>
                        <small class="text-muted d-block">Costo por pedido</small>
                        <span class="fw-semibold">{{ $user->cost_per_order !== null ? number_format((float) $user->cost_per_order, 2, ',', '.') . ' €' : '—' }}</span>
                      </div>
                    </div>
                    <div class="user-detail-item d-flex align-items-center gap-3">
                      <i class="ti tabler-clock-hour-5 text-primary fs-5"></i>
                      <div>
                        <small class="text-muted d-block">Costo por hora</small>
                        <span class="fw-semibold">{{ $user->cost_per_hour !== null ? number_format((float) $user->cost_per_hour, 2, ',', '.') . ' €' : '—' }}</span>
                      </div>
                    </div>
                    <div class="user-detail-item d-flex align-items-start gap-3">
                      <i class="ti tabler-car text-primary fs-5 mt-1"></i>
                      <div>
                        <small class="text-muted d-block">Vehículo actual</small>
                        <span class="fw-semibold">{{ $vehicleSummary }}</span>
                      </div>
                    </div>
                    <div class="user-detail-item d-flex align-items-center gap-3">
                      <i class="ti tabler-calendar-stats text-primary fs-5"></i>
                      <div>
                        <small class="text-muted d-block">Registrado el</small>
                        <span class="fw-semibold">{{ optional($user->created_at)->format('d/m/Y H:i') ?? '—' }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-6">
                <div class="card border-0 shadow-sm h-100">
                  <div class="card-header border-0 pb-0">
                    <h5 class="card-title mb-1">Cobertura operativa</h5>
                    <small class="text-muted">Empresas, ciudades y zonas asignadas</small>
                  </div>
                  <div class="card-body pt-3">
                    <div class="mb-3">
                      <small class="text-muted text-uppercase fw-semibold d-block mb-1">Empresas</small>
                      @forelse($user->companies as $company)
                        <span class="badge bg-label-primary me-1 mb-1">{{ $company->name }}</span>
                      @empty
                        <span class="text-muted">Sin asignar</span>
                      @endforelse
                    </div>
                    <div class="mb-3">
                      <small class="text-muted text-uppercase fw-semibold d-block mb-1">Ciudades</small>
                      @forelse($user->cities as $city)
                        <span class="badge bg-label-info me-1 mb-1">{{ $city->name }}</span>
                      @empty
                        <span class="text-muted">Sin asignar</span>
                      @endforelse
                    </div>
                    <div>
                      <small class="text-muted text-uppercase fw-semibold d-block mb-1">Zonas</small>
                      @forelse($user->zones as $zone)
                        <span class="badge bg-label-secondary me-1 mb-1">{{ $zone->name }}</span>
                      @empty
                        <span class="text-muted">Sin asignar</span>
                      @endforelse
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                  <div class="card-header border-0 pb-0">
                    <h5 class="card-title mb-1">Contrato de horas</h5>
                    <small class="text-muted">Gestiona las horas semanales pactadas</small>
                  </div>
                  <div class="card-body pt-3">
                    <div class="mb-4">
                      <small class="text-muted text-uppercase fw-semibold d-block mb-2">Contrato vigente</small>
                      <div class="border rounded-3 p-3 bg-body-tertiary" id="contract_current_summary">
                        <span class="text-muted small">Se actualizará al cargar el historial.</span>
                      </div>
                    </div>
                    <form id="contractForm" class="row g-3" onsubmit="return false;">
                      <input type="hidden" id="contract_id" value="">
                      <div class="col-sm-6">
                        <label for="contract_hours" class="form-label">Horas por semana</label>
                        <input type="number" step="0.5" min="0" max="80" id="contract_hours" class="form-control" value="{{ number_format((float)($user->weekly_contract_hours ?? 0), 1, '.', '') }}" />
                      </div>
                      <div class="col-sm-6">
                        <label for="contract_from" class="form-label">Vigente desde</label>
                        <input type="date" id="contract_from" class="form-control" value="{{ now()->toDateString() }}" />
                      </div>
                      <div class="col-sm-6 d-none" id="contract_until_group">
                        <label for="contract_until" class="form-label">Vigente hasta</label>
                        <input type="date" id="contract_until" class="form-control" />
                      </div>
                      <div class="col-12">
                        <label for="contract_notes" class="form-label">Notas (opcional)</label>
                        <textarea id="contract_notes" class="form-control" rows="2" placeholder="Añade contexto, acuerdos o incidencias relevantes."></textarea>
                        <div class="form-text">El equipo administrativo verá estas notas en el historial.</div>
                      </div>
                      <div class="col-12" id="contract_close_previous_wrapper">
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" id="contract_close_previous" checked>
                          <label class="form-check-label" for="contract_close_previous">Cerrar contrato vigente automáticamente</label>
                        </div>
                        <div class="form-text">Se marcará como finalizado el contrato anterior un día antes de la nueva vigencia.</div>
                      </div>
                      <div class="col-12 d-flex justify-content-between align-items-center">
                        <div class="small text-muted" id="contract_form_status"></div>
                        <div class="d-flex gap-2">
                          <button type="button" class="btn btn-label-secondary btn-sm d-none" id="contract_cancel_edit">
                            <i class="ti tabler-x me-1"></i>Cancelar
                          </button>
                          <button class="btn btn-primary" id="contract_submit">
                            <i class="ti tabler-device-floppy me-1"></i>Guardar contrato
                          </button>
                        </div>
                      </div>
                    </form>
                    <div class="mt-4">
                      <h6 class="text-uppercase text-muted small mb-3">Historial</h6>
                      <div id="contract_history" class="d-flex flex-column gap-3">
                        <div class="contract-history-empty">Sin registros</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="pane-schedule" role="tabpanel" aria-labelledby="tab-schedule">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
              <div>
                <h5 class="mb-1">Planificación reciente</h5>
                <small class="text-muted">Se muestran los últimos 300 turnos registrados</small>
              </div>
              <div class="d-flex flex-wrap gap-2">
                <span class="badge bg-label-primary schedule-hours-badge" data-bs-toggle="tooltip" data-bs-placement="top" title="Horas manuales asignadas esta semana" data-badge-type="manual-week" data-label="h manual (sem.)">{{ $manualHoursWeek }} h manual (sem.)</span>
                <span class="badge bg-label-secondary schedule-hours-badge" data-bs-toggle="tooltip" data-bs-placement="top" title="Horas manuales acumuladas en toda la historia" data-badge-type="manual-total" data-label="h manual (hist.)">{{ $manualHoursTotal }} h manual (hist.)</span>
                <span class="badge bg-label-info schedule-hours-badge" data-bs-toggle="tooltip" data-bs-placement="top" title="Horas forecast asignadas esta semana" data-badge-type="forecast-week" data-label="h forecast (sem.)">{{ $forecastHoursWeek }} h forecast (sem.)</span>
                <span class="badge bg-label-light schedule-hours-badge" data-bs-toggle="tooltip" data-bs-placement="top" title="Horas forecast acumuladas en toda la historia" data-badge-type="forecast-total" data-label="h forecast (hist.)">{{ $forecastHoursTotal }} h forecast (hist.)</span>
              </div>
            </div>
            <div class="card user-schedule-card">
              <div class="card-header d-flex flex-wrap align-items-center gap-3">
                <div class="user-schedule-header">
                  <div class="d-flex flex-wrap align-items-center gap-2">
                    <h5 class="mb-0">Planificador</h5>
                    <div class="user-schedule-view-toggle" role="group">
                      <button type="button" class="btn btn-sm btn-outline-primary btn-active" data-user-schedule-view="week">Semana</button>
                      <button type="button" class="btn btn-sm btn-outline-primary" data-user-schedule-view="day">Día</button>
                      <button type="button" class="btn btn-sm btn-outline-primary" data-user-schedule-view="month">Mes</button>
                    </div>
                  </div>
                  <small class="text-muted">Gestiona la disponibilidad del rider por día, semana o mes.</small>
                </div>
                <div class="ms-auto d-flex align-items-center gap-2">
                  <button type="button" class="btn btn-sm btn-label-secondary" id="userSchedulePrev" title="Periodo anterior"><i class="ti tabler-chevron-left"></i></button>
                  <span class="badge bg-label-success text-capitalize" id="userSchedulePeriodLabel">{{ $scheduleBoardWeekLabel }}</span>
                  <button type="button" class="btn btn-sm btn-label-secondary" id="userScheduleNext" title="Periodo siguiente"><i class="ti tabler-chevron-right"></i></button>
                </div>
              </div>
              <div class="card-body">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3" id="manualScheduleControls">
                  <div class="d-flex flex-wrap align-items-center gap-2">
                    @if ($manualSchedule['available'] && ($manualSchedule['eligible'] || $manualSchedule['enabled'] || $manualSchedule['active_other_week'] || $manualSchedule['locked']))
                      <button type="button"
                        class="btn btn-sm {{ $manualSchedule['enabled'] ? 'btn-success' : 'btn-outline-primary' }}"
                        id="userManualScheduleToggle"
                        data-enabled="{{ $manualSchedule['enabled'] ? 'true' : 'false' }}"
                        data-available="true"
                        data-week="{{ $manualSchedule['week_start'] }}"
                        data-eligible="{{ $manualSchedule['eligible'] ? 'true' : 'false' }}"
                        data-eligible-base="{{ $manualSchedule['eligible'] ? 'true' : 'false' }}"
                        data-has-forecast="{{ $manualSchedule['has_forecast'] ? 'true' : 'false' }}"
                        data-label-enable="Habilitar selección manual"
                        data-label-disable="Deshabilitar selección manual"
                        data-week-label="{{ $manualSchedule['week_label'] }}"
                        data-manual-week-label="{{ $manualSchedule['manual_week_label'] ?? '' }}">
                        <i class="ti {{ $manualSchedule['enabled'] ? 'tabler-hand-stop' : 'tabler-hand-click' }} me-1"></i>
                        {{ $manualSchedule['enabled'] ? 'Deshabilitar selección manual' : 'Habilitar selección manual' }}
                      </button>
                    @endif
                    @if ($manualSchedule['available'])
                      <button type="button"
                        class="btn btn-sm {{ $manualSchedule['locked'] ? 'btn-danger' : 'btn-outline-secondary' }}"
                        id="userScheduleLockToggle"
                        data-locked="{{ $manualSchedule['locked'] ? 'true' : 'false' }}"
                        data-label-lock="Bloquear edición del rider"
                        data-label-unlock="Permitir edición del rider">
                        <i class="ti {{ $manualSchedule['locked'] ? 'tabler-lock' : 'tabler-lock-open' }} me-1"></i>
                        {{ $manualSchedule['locked'] ? 'Desbloquear rider' : 'Bloquear rider' }}
                      </button>
                    @endif
                    <span class="badge {{ $manualSchedule['available'] ? ($manualSchedule['locked'] ? 'bg-label-dark' : ($manualSchedule['enabled'] ? 'bg-label-success' : ($manualSchedule['active_other_week'] ? 'bg-label-info' : ($manualSchedule['eligible'] ? 'bg-label-secondary' : 'bg-label-warning')))) : 'bg-label-dark' }}"
                      id="manualScheduleStatus">
                      @if (!$manualSchedule['available'])
                        Configura la base de datos para habilitar modo manual
                      @elseif($manualSchedule['locked'])
                        Horario bloqueado para el rider
                      @elseif ($manualSchedule['enabled'])
                        Modo manual activo
                      @elseif($manualSchedule['active_other_week'])
                        Manual programado para {{ $manualSchedule['manual_week_label'] ?? 'otra semana' }}
                      @elseif(!$manualSchedule['eligible'])
                        Forecast publicado para esta semana
                      @else
                        Manual deshabilitado
                      @endif
                    </span>
                    @if (!$manualSchedule['available'])
                      <small class="text-muted">Ejecuta las migraciones pendientes para usar la planificación manual.</small>
                    @endif
                  </div>
                  <small class="text-muted" id="manualScheduleWeekLabel">{{ $manualSchedule['week_label'] }}</small>
                </div>
                <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                  <div class="d-flex flex-wrap align-items-center gap-2">
                    <div class="user-schedule-legend">
                      <span class="user-schedule-legend__item">
                        <span class="user-schedule-legend__bullet user-schedule-legend__bullet--book"></span> BOOK
                      </span>
                      <span class="user-schedule-legend__item">
                        <span class="user-schedule-legend__bullet user-schedule-legend__bullet--unbook"></span> UNBOOK
                      </span>
                      <span class="user-schedule-legend__item">
                        <span class="user-schedule-legend__bullet user-schedule-legend__bullet--forecast"></span> Forecast
                      </span>
                      <span class="user-schedule-legend__item">
                        <span class="user-schedule-legend__bullet user-schedule-legend__bullet--forecast-mine"></span> Forecast (este rider)
                      </span>
                    </div>
                    <button type="button" class="btn btn-sm btn-icon btn-outline-secondary" id="forecastLegendButton" data-bs-toggle="tooltip" data-bs-placement="bottom" title="¿Qué significan los indicadores?">
                      <i class="ti tabler-bulb"></i>
                    </button>
                  </div>
                  <div class="ms-auto d-flex flex-wrap align-items-center gap-2">
                    <button type="button" class="btn btn-sm btn-primary" id="userScheduleSesameSync">
                      <i class="ti tabler-cloud-upload me-1"></i>Subir a Sesame
                    </button>
                    <button type="button" class="btn btn-sm btn-label-secondary" id="userScheduleHistoryToggle">
                      <i class="ti tabler-history me-1"></i>Historial
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="userScheduleCopy">
                      <i class="ti tabler-copy me-1"></i>Copiar horarios
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="userScheduleExport">
                      <i class="ti tabler-clipboard-text me-1"></i>Copiar horarios Glovo
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger" id="userScheduleClearWeek">
                      <i class="ti tabler-trash me-1"></i>Limpiar semana
                    </button>
                  </div>
                </div>
                <div class="user-schedule-board" id="userScheduleBoard" data-user-id="{{ $user->id }}" data-week-start="{{ $scheduleBoardWeekStart->toDateString() }}" data-view="week" data-sesame-id="{{ $user->sesame_employee_id }}">
                  <div class="user-schedule-week-view" id="userScheduleWeekView">
                    <div class="user-schedule-grid__header">
                      <div class="user-schedule-grid__header-cell user-schedule-grid__header-cell--time">Hora</div>
                      @foreach($scheduleBoardDays as $day)
                        @php $dateKey = $day->format('Y-m-d'); @endphp
                        <div class="user-schedule-grid__header-cell" data-day="{{ $dateKey }}">
                          <span>{{ $day->translatedFormat('l d') }}</span>
                          <small>{{ $day->translatedFormat('F Y') }}</small>
                          <div class="user-schedule-grid__forecast-indicator is-empty" data-forecast-day="{{ $dateKey }}">
                            <button type="button" class="btn btn-sm btn-icon btn-outline-primary forecast-summary-trigger disabled" data-forecast-day="{{ $dateKey }}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Sin forecast disponible">
                              <i class="ti tabler-clipboard-data"></i>
                            </button>
                          </div>
                        </div>
                      @endforeach
                    </div>
                    <div class="user-schedule-body">
                      @foreach($scheduleBoardSlots as $slotLabel)
                        <div class="user-schedule-row" data-slot="{{ $slotLabel }}">
                          <div class="user-schedule-time">{{ $slotLabel }}</div>
                          @foreach($scheduleBoardDays as $day)
                            @php $dateKey = $day->format('Y-m-d'); @endphp
                            <div class="user-schedule-cell" data-day="{{ $dateKey }}" data-time="{{ $slotLabel }}" data-key="{{ $dateKey }}_{{ $slotLabel }}" aria-pressed="false"></div>
                          @endforeach
                        </div>
                      @endforeach
                </div>
              </div>
              <div class="user-schedule-day-view d-none" id="userScheduleDayView">
                <div class="user-schedule-day-header">
                  <div>
                    <h6 class="mb-0 text-capitalize" id="userScheduleDayTitle">—</h6>
                        <small id="userScheduleDaySubtitle">Selecciona un día</small>
                      </div>
                      <span class="badge bg-label-primary" id="userScheduleDayTotal">0 h</span>
                    </div>
                    <div class="user-schedule-day-body">
                      @foreach($scheduleBoardSlots as $slotLabel)
                        <div class="user-schedule-day-row" data-slot="{{ $slotLabel }}">
                          <div class="user-schedule-time">{{ $slotLabel }}</div>
                          <div class="user-schedule-cell" data-day="" data-time="{{ $slotLabel }}" data-key="" aria-pressed="false"></div>
                        </div>
                      @endforeach
                    </div>
                  </div>
                  <div class="user-schedule-month-view d-none" id="userScheduleMonthView">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                      <div>
                        <h6 class="mb-0 text-capitalize" id="userScheduleMonthLabel">Mes actual</h6>
                        <small class="text-muted" id="userScheduleMonthSubtitle">Resumen de horas y estado</small>
                      </div>
                      <span class="badge bg-label-secondary" id="userScheduleMonthMeta"></span>
                    </div>
                    <div class="user-schedule-month-grid" id="userScheduleMonthBody"></div>
                  </div>
                </div>
              </div>
            </div>
            @if($scheduleHistory->isEmpty())
              <div class="alert alert-info mt-3 mb-0">
                Este rider aún no tiene turnos registrados. Usa el planificador para crear su primera planificación.
              </div>
            @endif
          </div>

          <div class="tab-pane fade" id="pane-metrics" role="tabpanel" aria-labelledby="tab-metrics">
            <div class="d-flex flex-wrap align-items-center gap-3">
              <div class="d-flex flex-wrap gap-2">
                <div>
                  <label for="um_group" class="form-label mb-0 small text-muted">Agrupar por</label>
                  <select id="um_group" class="form-select form-select-sm">
                    <option value="day">Diario</option>
                    <option value="week" selected>Semanal</option>
                    <option value="month">Mensual</option>
                  </select>
                </div>
                <div>
                  <label for="um_from" class="form-label mb-0 small text-muted">Desde</label>
                  <input type="date" id="um_from" class="form-control form-control-sm" />
                </div>
                <div>
                  <label for="um_to" class="form-label mb-0 small text-muted">Hasta</label>
                  <input type="date" id="um_to" class="form-control form-control-sm" />
                </div>
                <div>
                  <label for="um_transport" class="form-label mb-0 small text-muted">Vehículo</label>
                  <select id="um_transport" class="form-select form-select-sm" style="min-width: 160px">
                    <option value="">Todos</option>
                  </select>
                </div>
              </div>
              <div class="ms-auto d-flex gap-2">
                <button id="um_apply" class="btn btn-sm btn-primary"><i class="ti tabler-filter me-1"></i>Aplicar</button>
                <button id="um_reset" class="btn btn-sm btn-label-secondary"><i class="ti tabler-refresh me-1"></i>Reset</button>
              </div>
            </div>
            <div class="row g-3 mt-2" id="um_kpis">
              <div class="col-sm-6 col-lg-3">
                <div class="card card-border-shadow-primary h-100">
                  <div class="card-body d-flex align-items-center">
                    <span class="avatar-initial rounded bg-label-primary me-3"><i class="ti tabler-package ti-md"></i></span>
                    <div>
                      <div class="h5 mb-0" id="um_kpi_orders">--</div>
                      <small>Pedidos</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-lg-3">
                <div class="card card-border-shadow-warning h-100">
                  <div class="card-body d-flex align-items-center">
                    <span class="avatar-initial rounded bg-label-warning me-3"><i class="ti tabler-clock ti-md"></i></span>
                    <div>
                      <div class="h5 mb-0" id="um_kpi_hours">--</div>
                      <small>Horas</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-lg-3">
                <div class="card card-border-shadow-success h-100">
                  <div class="card-body d-flex align-items-center">
                    <span class="avatar-initial rounded bg-label-success me-3"><i class="ti tabler-rocket ti-md"></i></span>
                    <div>
                      <div class="h5 mb-0" id="um_kpi_ratio">--</div>
                      <small>Eficiencia</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-lg-3">
                <div class="card card-border-shadow-info h-100">
                  <div class="card-body d-flex align-items-center">
                    <span class="avatar-initial rounded bg-label-info me-3"><i class="ti tabler-hourglass-low ti-md"></i></span>
                    <div>
                      <div class="h5 mb-0" id="um_kpi_cdt">--</div>
                      <small>CDT Promedio</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-lg-3">
                <div class="card card-border-shadow-secondary h-100">
                  <div class="card-body d-flex align-items-center">
                    <span class="avatar-initial rounded bg-label-secondary me-3"><i class="ti tabler-shield-x ti-md"></i></span>
                    <div>
                      <div class="h5 mb-0" id="um_kpi_ineligible">--</div>
                      <small>% Ineligible</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-lg-3">
                <div class="card card-border-shadow-danger h-100">
                  <div class="card-body d-flex align-items-center">
                    <span class="avatar-initial rounded bg-label-danger me-3"><i class="ti tabler-cash ti-md"></i></span>
                    <div>
                      <div class="h5 mb-0" id="um_kpi_cash">--</div>
                      <small>Cash Total</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-lg-3">
                <div class="card card-border-shadow-primary h-100">
                  <div class="card-body d-flex align-items-center">
                    <span class="avatar-initial rounded bg-label-primary me-3"><i class="ti tabler-wallet ti-md"></i></span>
                    <div>
                      <div class="h5 mb-0" id="um_kpi_vehicle_allowance">--</div>
                      <small>Asignación vehículo</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="table-responsive mt-4">
              <table class="table table-sm mb-0">
                <thead>
                  <tr>
                    <th>Periodo</th>
                    <th class="text-center">Día</th>
                    <th class="text-center">Pedidos</th>
                    <th class="text-center">Horas</th>
                    <th class="text-center">No Show (tiempo)</th>
                    <th class="text-center">Eficiencia</th>
                    <th class="text-center">Cancelados</th>
                    <th class="text-center">Reasign.</th>
                    <th class="text-center">No Show</th>
                    <th class="text-center">Ineligible</th>
                    <th class="text-center">CDT</th>
                    <th class="text-center">Asignación vehículo (€)</th>
                    <th class="text-center">Cash (€)</th>
                  </tr>
                </thead>
                <tbody id="um_body">
                  <tr>
                    <td colspan="13" class="text-center p-3 text-muted">Cargando...</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mt-3">
              <div class="small text-muted" id="um_pagination_info">Página 1 de 1</div>
              <div class="d-flex align-items-center gap-2 ms-auto">
                <div class="btn-group" role="group" aria-label="Scroll horizontal">
                  <button type="button" id="um_scroll_left" class="btn btn-sm btn-label-secondary" title="Desplazar a la izquierda"><i class="ti tabler-chevron-left"></i></button>
                  <button type="button" id="um_scroll_right" class="btn btn-sm btn-label-secondary" title="Desplazar a la derecha"><i class="ti tabler-chevron-right"></i></button>
                </div>
                <div class="btn-group" role="group" aria-label="Paginación">
                  <button type="button" id="um_prev" class="btn btn-sm btn-label-secondary" disabled>Anterior</button>
                  <button type="button" id="um_next" class="btn btn-sm btn-label-secondary" disabled>Siguiente</button>
                </div>
              </div>
            </div>
          </div>

          <div class="tab-pane fade" id="pane-assignments" role="tabpanel" aria-labelledby="tab-assignments">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
              <div>
                <h5 class="mb-1">Historial de asignaciones</h5>
                <small class="text-muted">Credenciales Glovo y otros accesos</small>
              </div>
              <button id="ua_refresh" class="btn btn-sm btn-label-secondary">
                <i class="ti tabler-refresh me-1_5"></i>
                Actualizar
              </button>
            </div>
            <div class="assign-table-wrapper">
              <div class="table-responsive mb-0">
                <table class="table table-sm mb-0">
                  <thead>
                    <tr>
                      <th>Rider ID</th>
                      <th>Asignada</th>
                      <th>Hasta</th>
                      <th>Por</th>
                      <th>Motivo</th>
                      <th>Estado</th>
                    </tr>
                  </thead>
                  <tbody id="ua_body">
                    <tr><td colspan="6" class="text-center p-3 text-muted">Selecciona "Actualizar" para obtener los registros.</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="tab-pane fade" id="pane-calendar" role="tabpanel" aria-labelledby="tab-calendar">
            <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
              <div class="btn-group" role="group">
                <button class="btn btn-sm btn-label-secondary" id="cal_prev"><i class="ti tabler-chevron-left"></i></button>
                <button class="btn btn-sm btn-label-secondary" id="cal_next"><i class="ti tabler-chevron-right"></i></button>
              </div>
              <h5 class="mb-0 ms-1" id="cal_title">Seguimiento mensual</h5>
              @php
                $calendarWeeklyTarget = (float) ($user->weekly_contract_hours ?? 0);
                if ($calendarWeeklyTarget <= 0) {
                  $calendarWeeklyTarget = 40.0;
                }
              @endphp
              <div class="ms-auto d-flex align-items-center gap-2">
                <label for="cal_target" class="form-label mb-0">Objetivo semanal (h)</label>
                <input type="number"
                  min="1"
                  max="80"
                  step="0.5"
                  id="cal_target"
                  class="form-control form-control-sm"
                  style="width: 110px"
                  value="{{ number_format($calendarWeeklyTarget, 1, '.', '') }}"
                  data-default-target="{{ number_format($calendarWeeklyTarget, 1, '.', '') }}">
                <button id="cal_refresh" class="btn btn-sm btn-primary">Actualizar</button>
              </div>
            </div>
            <div class="calendar-grid-wrapper" id="cal_grid">Selecciona un mes para visualizar el detalle.</div>
            <hr class="my-4" />
            <div id="cal_weeks" class="row g-3"></div>
          </div>

          <div class="tab-pane fade" id="pane-wallet" role="tabpanel" aria-labelledby="tab-wallet">
            <div class="row g-3 g-lg-4 align-items-stretch mb-4">
              <div class="col-lg-4">
                <div class="card h-100 wallet-admin-balance-card shadow-sm border-0">
                  <div class="card-body d-flex flex-column gap-3">
                    <div class="d-flex justify-content-between align-items-start">
                      <div>
                        <h5 class="mb-1">Saldo disponible</h5>
                        <div class="wallet-admin-balance-value" id="wallet_balance_value">—</div>
                      </div>
                      <span class="badge" id="wallet_currency_badge">EUR</span>
                    </div>
                    <div class="wallet-admin-meta small">
                      Último movimiento:<br>
                      <span id="wallet_last_movement">Sin registros</span>
                    </div>
                    <div class="wallet-admin-actions d-flex flex-wrap gap-2">
                      <button type="button" class="btn btn-sm btn-label-light text-white" id="wallet_refresh_btn">
                        <i class="ti tabler-refresh me-1"></i> Actualizar
                      </button>
                      <button type="button" class="btn btn-sm btn-label-light text-white" id="wallet_load_more_btn">
                        <i class="ti tabler-list-details me-1"></i> Más registros
                      </button>
                    </div>
                    <div class="alert alert-danger d-none mb-0" id="wallet_error_alert"></div>
                    <div class="alert alert-success d-none mb-0" id="wallet_success_alert"></div>
                  </div>
                </div>
              </div>
              <div class="col-lg-8">
                <div class="card h-100 border-0 shadow-sm">
                  <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Registrar movimiento</h5>
                    <span class="badge bg-label-info" id="wallet_form_hint">Saldo seguro · Validación automática</span>
                  </div>
                  <div class="card-body">
                    <form id="wallet_transaction_form" class="wallet-admin-form">
                      <div class="row g-3">
                        <div class="col-sm-4">
                          <label class="form-label" for="wallet_amount">Importe</label>
                          <div class="input-group">
                            <span class="input-group-text" id="wallet_currency_prefix">€</span>
                            <input type="number" step="0.01" min="0.01" class="form-control" id="wallet_amount" placeholder="0,00" required>
                          </div>
                        </div>
                        <div class="col-sm-4">
                          <label class="form-label d-block">Tipo</label>
                          <div class="btn-group w-100 wallet-type-group" role="group" aria-label="Tipo de movimiento">
                            <input type="radio" class="btn-check" name="wallet_type" id="wallet_type_credit" value="credit" checked>
                            <label class="btn btn-outline-success" for="wallet_type_credit"><i class="ti tabler-arrow-bar-up me-1"></i>Ingreso</label>
                            <input type="radio" class="btn-check" name="wallet_type" id="wallet_type_debit" value="debit">
                            <label class="btn btn-outline-danger" for="wallet_type_debit"><i class="ti tabler-arrow-bar-down me-1"></i>Cargo</label>
                          </div>
                        </div>
                        <div class="col-sm-4">
                          <label class="form-label" for="wallet_reference">Referencia</label>
                          <input type="text" class="form-control" id="wallet_reference" maxlength="120" placeholder="Opcional">
                        </div>
                        <div class="col-12">
                          <label class="form-label" for="wallet_description">Descripción</label>
                          <textarea class="form-control" id="wallet_description" rows="2" maxlength="255" placeholder="Ej. Ajuste de bono, regularización de efectivo…"></textarea>
                        </div>
                      </div>
                      <div class="d-flex align-items-center gap-2 mt-3">
                        <button type="submit" class="btn btn-primary" id="wallet_submit_btn">
                          <span class="default-label"><i class="ti tabler-circle-plus me-1"></i> Registrar movimiento</span>
                          <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                        </button>
                        <span class="text-muted small" id="wallet_form_status"></span>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div class="card border-0 shadow-sm">
              <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                  <h5 class="mb-0">Historial del monedero</h5>
                  <small class="text-muted">Mostrando hasta <span id="wallet_limit_label">20</span> movimientos recientes.</small>
                </div>
                <span class="badge bg-label-secondary" id="wallet_last_updated_badge">Sin actualizar</span>
              </div>
              <div class="card-body p-0">
                <div class="table-responsive">
                  <table class="table table-sm table-striped mb-0 wallet-transactions-table">
                    <thead>
                      <tr>
                        <th>Fecha</th>
                        <th>Tipo</th>
                        <th class="text-end">Importe</th>
                        <th class="text-end">Saldo tras movimiento</th>
                        <th>Descripción</th>
                        <th>Autor</th>
                      </tr>
                    </thead>
                    <tbody id="wallet_transactions_body">
                      <tr><td colspan="6" class="text-center p-3 text-muted">Carga inicial pendiente…</td></tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <div class="tab-pane fade" id="pane-vehicles" role="tabpanel" aria-labelledby="tab-vehicles">
            <div class="row g-3 g-xl-4 mb-4">
              <div class="col-xl-5">
                <div class="card border-0 shadow-sm h-100">
                  <div class="card-header pb-0">
                    <h5 class="card-title mb-1">Vehículo activo</h5>
                    <small class="text-muted">Estado operativo del rider</small>
                  </div>
                  <div class="card-body pt-3 d-flex flex-column gap-3" id="vehicleActiveBody">
                    <p class="text-muted mb-0">Asigna un vehículo para ver aquí los detalles del actual.</p>
                  </div>
                </div>
              </div>
              <div class="col-xl-7">
                <div class="card border-0 shadow-sm h-100">
                  <div class="card-header pb-0">
                    <h5 class="card-title mb-1">Asignar nuevo vehículo</h5>
                    <small class="text-muted">Registra el vehículo operativo y sus condiciones.</small>
                  </div>
                  <div class="card-body pt-3">
                    <form id="vehicleAssignForm" class="row g-3" autocomplete="off">
                      <div class="col-lg-6">
                        <label class="form-label" for="vehicle_assign_vehicle">Vehículo</label>
                        <select id="vehicle_assign_vehicle" class="form-select" required></select>
                      </div>
                      <div class="col-lg-6">
                        <label class="form-label" for="vehicle_assign_source">Propiedad</label>
                        <select id="vehicle_assign_source" class="form-select" required>
                          <option value="">Selecciona una opción</option>
                          <option value="company">Vehículo de empresa</option>
                          <option value="personal">Vehículo personal</option>
                        </select>
                      </div>
                      <div class="col-lg-6 d-none" id="vehicle_assign_company_wrapper">
                        <label class="form-label" for="vehicle_assign_company">Empresa proveedora</label>
                        <select id="vehicle_assign_company" class="form-select"></select>
                        <div class="form-text">Solo aplica si el vehículo es de empresa.</div>
                      </div>
                      <div class="col-lg-6">
                        <label class="form-label" for="vehicle_assign_date">Fecha de entrega</label>
                        <input type="date" class="form-control" id="vehicle_assign_date" required>
                      </div>
                      <div class="col-lg-6">
                        <label class="form-label" for="vehicle_assign_cost">Coste mensual (€)</label>
                        <input type="number" class="form-control" id="vehicle_assign_cost" step="0.01" min="0" placeholder="Ej. 120">
                      </div>
                      <div class="col-12">
                        <label class="form-label" for="vehicle_assign_notes">Notas (opcional)</label>
                        <input type="text" class="form-control" id="vehicle_assign_notes" placeholder="Matrícula, extras...">
                      </div>
                      <div class="col-12 d-flex justify-content-between align-items-center">
                        <small class="text-muted" id="vehicleFormStatus"></small>
                        <button type="submit" class="btn btn-primary" id="vehicle_assign_submit">
                          <i class="ti tabler-steering-wheel me-1"></i>Asignar vehículo
                        </button>
                      </div>
                    </form>
                    <div class="alert alert-danger d-none mt-3" id="vehicleFormError"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card border-0 shadow-sm">
              <div class="card-header pb-0 d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                  <h5 class="card-title mb-1">Historial de vehículos</h5>
                  <small class="text-muted">Seguimiento de asignaciones y devoluciones</small>
                </div>
                <span class="badge bg-label-success d-none" id="vehicleActiveBadge">Asignación activa</span>
              </div>
              <div class="card-body pt-3">
                <div id="vehicleTimeline" class="vehicle-timeline timeline"></div>
                <div id="vehicleEmpty" class="alert alert-secondary mb-0 d-none">
                  Aún no se registran asignaciones de vehículos para este usuario.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
@include('_partials/_modals/modal-edit-user')
@include('_partials/_modals/modal-upgrade-plan')

@php
  $glovoCredentialsPayload = ($glovoCredentials ?? collect())->map(function ($cred) {
      return [
          'id' => $cred->id,
          'courier_id' => $cred->courier_id,
          'city_code' => $cred->city_code,
          'rider_id' => $cred->rider_id,
          'login_email' => $cred->login_email,
          'status' => $cred->status,
          'provided_at' => optional($cred->provided_at)->format('Y-m-d H:i:s'),
      ];
  })->values();
  $vehicleAssignmentsPayload = $vehicleHistory->map(function ($assignment) {
      return [
          'id' => $assignment->id,
          'vehicle_id' => $assignment->vehicle_id,
          'vehicle_name' => optional($assignment->vehicle)->name,
          'vehicle_code' => optional($assignment->vehicle)->code,
          'vehicle_source' => $assignment->vehicle_source,
          'vehicle_company_id' => $assignment->vehicle_company_id,
          'vehicle_company_name' => optional($assignment->company)->name,
          'vehicle_monthly_cost' => $assignment->vehicle_monthly_cost !== null ? (float) $assignment->vehicle_monthly_cost : null,
          'assigned_at' => optional($assignment->assigned_at)->toDateString(),
          'returned_at' => optional($assignment->returned_at)->toDateString(),
          'vehicle_notes' => $assignment->vehicle_notes,
          'created_by' => optional($assignment->creator)->name,
      ];
  })->values();
  $vehicleOptionsPayload = ($glovoVehicles ?? collect())->map(function ($vehicle) {
      return [
          'id' => $vehicle->id,
          'name' => $vehicle->name,
          'code' => $vehicle->code,
      ];
  })->values();
  $vehicleCompaniesPayload = ($vehicleCompanies ?? collect())->map(function ($company) {
      return [
          'id' => $company->id,
          'name' => $company->name,
      ];
  })->values();
@endphp

<div class="modal fade" id="scheduleExportModal" tabindex="-1" aria-labelledby="scheduleExportModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="scheduleExportModalLabel">Copiar horarios para 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">
          Selecciona la credencial y revisa los bloques generados por día. El formato respeta los requisitos de Glovo y utiliza la semana actualmente visible en el planificador.
          <br>
          <code>codigo_ciudad, courier_ID, dia, hora_inicio, hora_final, accion, rider_id</code>. Usa el botón <strong>Copiar</strong> para llevar el contenido al portapapeles.
        </div>
        <div class="row g-3 mb-4">
          <div class="col-md-4">
            <label for="scheduleExportCredential" class="form-label">Credencial Glovo</label>
            <select id="scheduleExportCredential" class="form-select">
              <option value="">Selecciona credencial</option>
            </select>
            <div class="form-text">Autocompleta los campos con los datos oficiales del rider.</div>
          </div>
          <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="scheduleExportEmpty" class="alert alert-warning d-none">
          No hay turnos confirmados en el periodo actual. Cambia de semana o asigna horarios manuales antes de exportar.
        </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="Tipo de bloque">
            <input type="radio" class="btn-check" name="scheduleExportFilter" id="scheduleExportFilterAll" value="all" checked>
            <label class="btn btn-sm btn-outline-primary" for="scheduleExportFilterAll">BOOK + UNBOOK</label>
            <input type="radio" class="btn-check" name="scheduleExportFilter" id="scheduleExportFilterBook" value="book">
            <label class="btn btn-sm btn-outline-success" for="scheduleExportFilterBook">Solo BOOK</label>
            <input type="radio" class="btn-check" name="scheduleExportFilter" id="scheduleExportFilterUnbook" value="unbook">
            <label class="btn btn-sm btn-outline-warning" for="scheduleExportFilterUnbook">Solo UNBOOK</label>
          </div>
          <small class="text-muted">El filtro afecta tanto a la tabla como al texto exportado.</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>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 al portapapeles
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="scheduleCopyModal" tabindex="-1" aria-labelledby="scheduleCopyModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="scheduleCopyModalLabel">Copiar horarios manuales</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 small mb-3">
          Copia los slots manuales de otra semana al periodo visible. Puedes elegir la semana destino y decidir si reemplazar los horarios existentes.
        </div>
        <div class="mb-3">
          <label for="scheduleCopySourceWeek" class="form-label">Semana origen</label>
          <input type="date" class="form-control" id="scheduleCopySourceWeek">
          <div class="form-text" id="scheduleCopySourceHint">Selecciona cualquier día de la semana a copiar; se usará el lunes de esa semana. Si no eliges una fecha se usará la semana anterior al periodo actual.</div>
        </div>
        <div class="mb-3">
          <label for="scheduleCopyTarget" class="form-label">Semana destino</label>
          <select id="scheduleCopyTarget" class="form-select">
            <option value="current" selected>Semana actual</option>
            <option value="next">Semana siguiente</option>
          </select>
          <div class="form-text" id="scheduleCopyTargetHint">Se toma como referencia la semana que ves en el planificador.</div>
        </div>
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" id="scheduleCopyReplace" checked>
          <label class="form-check-label" for="scheduleCopyReplace">Reemplazar horarios existentes en la semana destino</label>
        </div>
        <div class="small text-muted mb-3" id="scheduleCopySummary"></div>
        <div class="alert alert-danger d-none" id="scheduleCopyError"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" id="scheduleCopySubmit">
          <i class="ti tabler-copy me-1"></i>Copiar horarios
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="scheduleHistoryModal" tabindex="-1" aria-labelledby="scheduleHistoryModalLabel" 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="scheduleHistoryModalLabel">Historial de movimientos</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 small mb-3">
          Revisa las acciones más recientes sobre los slots manuales de este rider. El historial refleja quién realizó cada cambio y a qué hora.
        </div>
        <div id="scheduleHistoryError" class="alert alert-danger d-none"></div>
        <div id="scheduleHistoryEmpty" class="text-muted text-center py-4">Aún no hay movimientos registrados en el horario.</div>
        <ul class="list-group list-group-flush" id="scheduleHistoryList"></ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function(){
  if (window.RSS_Basic_Detect && typeof window.RSS_Basic_Detect.detect === 'function') {
    const originalRssDetect = window.RSS_Basic_Detect.detect;
    window.RSS_Basic_Detect.detect = function (...args) {
      try {
        return originalRssDetect.apply(this, args);
      } catch (error) {
        console.warn('RSS detector suppressed error:', error);
        return null;
      }
    };
  }
  function formatHours(val){
    let num = Number(val) || 0;
    const neg = num < 0 ? '-' : '';
    num = Math.abs(num);
    const baseH = Math.floor(num);
    let mins = Math.round((num - baseH) * 100);
    const carry = Math.floor(mins / 60);
    mins = mins % 60;
    const hours = baseH + carry;
    return `${neg}${hours} h${mins ? ' ' + String(mins).padStart(2,'0') + ' min' : ''}`;
  }
  function fmtCash(v){
    if (v === null || v === undefined || v === '') return '—';
    const num = Number(v);
    if (!Number.isFinite(num)) return '—';
    try { return new Intl.NumberFormat('es-ES', { style:'currency', currency:'EUR', minimumFractionDigits:2 }).format(num); }
    catch(e){ return `€${num.toFixed(2)}`; }
  }
  function fmtMinSec(val){
    if (val === null || val === undefined || val === '') return '--';
    let num = Number(val);
    if (!Number.isFinite(num)) return '--';
    const neg = num < 0 ? '-' : '';
    num = Math.abs(num);
    let mins = Math.floor(num);
    let secs = Math.round((num - mins) * 100);
    if (secs >= 60) { secs -= 60; mins += 1; }
    return `${neg}${mins} min ${secs} s`;
  }
  function weekdayName(dateStr){
    if (!dateStr) return '—';
    const parts = (dateStr+'').split('-');
    if (parts.length !== 3) return '—';
    const y = parseInt(parts[0],10), m = parseInt(parts[1],10), d = parseInt(parts[2],10);
    if (!y || !m || !d) return '—';
    const dt = new Date(y, m-1, d);
    const DAYS = ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'];
    return DAYS[dt.getDay()] || '—';
  }
  function efficiencyPill(ratio){
    const val = Number(ratio)||0;
    let cls = 'badge bg-label-danger';
    if (val >= 2.5) cls = 'badge bg-label-success';
    else if (val >= 2.0) cls = 'badge bg-label-warning';
    return `<span class="${cls}">${val.toFixed(2)}</span>`;
  }
  function cancelPill(pct){
    const n = Number(pct)||0; let cls='badge bg-label-danger';
    if (n <= 0) cls='badge bg-label-success'; else if (n <= 5) cls='badge bg-label-warning';
    return `<span class="${cls}">${n.toFixed(1)}%</span>`;
  }
  function reassignPill(pct){
    const n = Number(pct)||0; let cls='badge bg-label-danger';
    if (n < 10) cls='badge bg-label-success'; else if (n <= 15) cls='badge bg-label-warning';
    return `<span class="${cls}">${n.toFixed(1)}%</span>`;
  }
  function noShowPill(pct){
    const n = Number(pct)||0; return n > 0
      ? `<span class="badge bg-label-danger">${n.toFixed(1)}%</span>`
      : `<span class="badge bg-label-success">${n.toFixed(1)}%</span>`;
  }
  const scheduleExportCredentials = @json($glovoCredentialsPayload);
  window.__scheduleExportCredentials = scheduleExportCredentials;
  const vehicleConfig = {
    userId: @json($user->id),
    assignments: @json($vehicleAssignmentsPayload),
    vehicles: @json($vehicleOptionsPayload),
    companies: @json($vehicleCompaniesPayload),
    endpoints: {
      list: @json(route('admin.api.users.vehicles.index', $user)),
      store: @json(route('admin.api.users.vehicles.store', $user)),
      close: @json(route('admin.api.users.vehicles.close', ['user' => $user->id, 'assignment' => '__ID__'])),
    }
  };
  window.__userVehicleConfig = vehicleConfig;
  function escapeHtml(value) {
    if (value === null || value === undefined) return '';
    return String(value).replace(/[&<>"']/g, function (char) {
      return ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;',
      })[char];
    });
  }

  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

  const manualToggleBtn = document.getElementById('userManualScheduleToggle');
  const manualStatusBadge = document.getElementById('manualScheduleStatus');
  const manualWeekLabel = document.getElementById('manualScheduleWeekLabel');
  const manualLockBtn = document.getElementById('userScheduleLockToggle');
  const manualLockApiUrl = manualLockBtn ? `{{ url('/admin/api/users/'.$user->id.'/schedule-lock') }}` : null;
  const manualLockLabelLock = manualLockBtn?.dataset.labelLock || 'Bloquear edición del rider';
  const manualLockLabelUnlock = manualLockBtn?.dataset.labelUnlock || 'Permitir edición del rider';
  let manualIsLocked = manualLockBtn ? manualLockBtn.dataset.locked === 'true' : false;

  const refreshManualLockButton = () => {
    if (!manualLockBtn) return;
    manualLockBtn.dataset.locked = manualIsLocked ? 'true' : 'false';
    manualLockBtn.classList.toggle('btn-danger', manualIsLocked);
    manualLockBtn.classList.toggle('btn-outline-secondary', !manualIsLocked);
    manualLockBtn.innerHTML = `<i class="ti ${manualIsLocked ? 'tabler-lock' : 'tabler-lock-open'} me-1"></i>${manualIsLocked ? manualLockLabelUnlock : manualLockLabelLock}`;
  };

  if (manualToggleBtn) {
    const manualApiUrl = `{{ url('/admin/api/users/'.$user->id.'/manual-schedule') }}`;
    const labelEnable = manualToggleBtn.dataset.labelEnable || 'Habilitar selección manual';
    const labelDisable = manualToggleBtn.dataset.labelDisable || 'Deshabilitar selección manual';

    const applyManualStatus = (enabled, manualWeekText = null, eligible = true, hasForecast = false) => {
      manualToggleBtn.dataset.enabled = enabled ? 'true' : 'false';
      manualToggleBtn.dataset.eligibleBase = eligible ? 'true' : 'false';
      manualToggleBtn.dataset.hasForecast = hasForecast ? 'true' : 'false';
      const effectiveEligible = manualIsLocked ? false : eligible;
      manualToggleBtn.dataset.eligible = effectiveEligible ? 'true' : 'false';
      manualToggleBtn.classList.toggle('btn-success', enabled);
      manualToggleBtn.classList.toggle('btn-outline-primary', !enabled);
      manualToggleBtn.innerHTML = `<i class="ti ${enabled ? 'tabler-hand-stop' : 'tabler-hand-click'} me-1"></i>${enabled ? labelDisable : labelEnable}`;

      if (manualStatusBadge) {
        manualStatusBadge.classList.remove('bg-label-success', 'bg-label-info', 'bg-label-secondary', 'bg-label-warning', 'bg-label-dark');
        if (manualIsLocked) {
          manualStatusBadge.classList.add('bg-label-dark');
          manualStatusBadge.textContent = 'Horario bloqueado para el rider';
        } else if (enabled) {
          manualStatusBadge.classList.add('bg-label-success');
          manualStatusBadge.textContent = hasForecast
            ? 'Modo manual activo (forecast también publicado)'
            : 'Modo manual activo';
        } else if (!eligible) {
          manualStatusBadge.classList.add('bg-label-warning');
          manualStatusBadge.textContent = 'Forecast publicado para esta semana';
        } else if (manualWeekText) {
          manualStatusBadge.classList.add('bg-label-info');
          manualStatusBadge.textContent = `Manual programado para ${manualWeekText}`;
        } else {
          manualStatusBadge.classList.add('bg-label-secondary');
          manualStatusBadge.textContent = 'Manual deshabilitado';
        }
      }

      const shouldDisable = manualIsLocked || (!eligible && !enabled);
      manualToggleBtn.disabled = shouldDisable;
    };

    refreshManualLockButton();

    applyManualStatus(
      manualToggleBtn.dataset.enabled === 'true',
      manualToggleBtn.dataset.manualWeekLabel || null,
      manualToggleBtn.dataset.eligibleBase === 'true',
      manualToggleBtn.dataset.hasForecast === 'true'
    );

    manualToggleBtn.addEventListener('click', async () => {
      const nextEnabled = manualToggleBtn.dataset.enabled !== 'true';
      manualToggleBtn.disabled = true;
      try {
        const payload = { enabled: nextEnabled, week: manualToggleBtn.dataset.week };
        const res = await fetch(manualApiUrl, {
          method: 'PATCH',
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            'X-CSRF-TOKEN': csrfToken || ''
          },
          body: JSON.stringify(payload)
        });
        const data = await res.json();
        if (!res.ok) {
          toast(data.message || 'No se pudo actualizar la planificación manual', 'error');
          return;
        }
        manualToggleBtn.dataset.manualWeekLabel = data.manual_week_label || '';
        applyManualStatus(
          Boolean(data.manual_schedule_enabled),
          data.manual_week_label || null,
          'eligible' in data ? Boolean(data.eligible) : manualToggleBtn.dataset.eligibleBase === 'true',
          Boolean(data.has_forecast)
        );
        if (manualWeekLabel && manualToggleBtn.dataset.weekLabel) {
          manualWeekLabel.textContent = manualToggleBtn.dataset.weekLabel;
        }
        toast(data.message || (data.manual_schedule_enabled ? 'Modo manual habilitado' : 'Modo manual deshabilitado'));
      } catch (error) {
        console.error(error);
        toast('Error al actualizar la planificación manual', 'error');
      } finally {
        const baseEligible = manualToggleBtn.dataset.eligibleBase === 'true';
        const shouldDisable = manualIsLocked || (!baseEligible && manualToggleBtn.dataset.enabled !== 'true');
        manualToggleBtn.disabled = shouldDisable;
      }
    });

    if (manualLockBtn && manualLockApiUrl) {
      manualLockBtn.addEventListener('click', async () => {
        const nextLocked = !manualIsLocked;
        manualLockBtn.disabled = true;
        try {
          const res = await fetch(manualLockApiUrl, {
            method: 'PATCH',
            headers: {
              'Content-Type': 'application/json',
              Accept: 'application/json',
              'X-CSRF-TOKEN': csrfToken || ''
            },
            body: JSON.stringify({ locked: nextLocked })
          });
          const data = await res.json();
          if (!res.ok) {
            toast(data.message || 'No se pudo actualizar el estado de bloqueo', 'error');
            return;
          }
          manualIsLocked = Boolean(data.locked);
          refreshManualLockButton();
          const baseEligible = 'eligible' in data
            ? Boolean(data.eligible)
            : manualToggleBtn.dataset.eligibleBase === 'true';
          applyManualStatus(
            manualToggleBtn.dataset.enabled === 'true',
            manualToggleBtn.dataset.manualWeekLabel || null,
            baseEligible,
            manualToggleBtn.dataset.hasForecast === 'true'
          );
          toast(data.message || (manualIsLocked ? 'Horario bloqueado para el rider.' : 'Horario desbloqueado.'));
        } catch (error) {
          console.error(error);
          toast('Error al actualizar el bloqueo del horario', 'error');
        } finally {
          manualLockBtn.disabled = false;
        }
      });
    }
  } else {
    refreshManualLockButton();
  }

  const userScheduleBoard = document.getElementById('userScheduleBoard');
  if (userScheduleBoard) {
    const riderId = Number(userScheduleBoard.dataset.userId);
    let userWeekStart = userScheduleBoard.dataset.weekStart;
    let viewMode = userScheduleBoard.dataset.view || 'week';
    let currentDay = userWeekStart;
    let currentMonth = (userWeekStart || '').slice(0, 7);
    let latestAssignments = [];
    let forecastSlots = new Map();
    let forecastDailyTotals = new Map();
    let forecastSummary = null;
    let forecastMineSlots = 0;
    let forecastDemandRaw = new Map();

    const selection = new Set();

    const periodLabel = document.getElementById('userSchedulePeriodLabel');
    const prevBtn = document.getElementById('userSchedulePrev');
    const nextBtn = document.getElementById('userScheduleNext');
    const viewButtons = document.querySelectorAll('[data-user-schedule-view]');
    const weekView = document.getElementById('userScheduleWeekView');
    const dayView = document.getElementById('userScheduleDayView');
    const monthView = document.getElementById('userScheduleMonthView');
    const dayTitle = document.getElementById('userScheduleDayTitle');
    const daySubtitle = document.getElementById('userScheduleDaySubtitle');
    const dayTotal = document.getElementById('userScheduleDayTotal');
    const monthLabel = document.getElementById('userScheduleMonthLabel');
    const monthSubtitle = document.getElementById('userScheduleMonthSubtitle');
    const monthMeta = document.getElementById('userScheduleMonthMeta');
    const monthBody = document.getElementById('userScheduleMonthBody');
    const sesameSyncButton = document.getElementById('userScheduleSesameSync');
    const sesameSyncEndpoint = @json(url('/admin/api/schedule/sesame-sync'));
    const exportButton = document.getElementById('userScheduleExport');
    const exportModalEl = document.getElementById('scheduleExportModal');
    const exportCredentialSelect = document.getElementById('scheduleExportCredential');
    const exportCityInput = document.getElementById('scheduleExportCity');
    const exportCourierInput = document.getElementById('scheduleExportCourier');
    const exportRiderInput = document.getElementById('scheduleExportRider');
    const exportTableBody = document.getElementById('scheduleExportTableBody');
    const exportRawTextarea = document.getElementById('scheduleExportRaw');
    const exportCopyBtn = document.getElementById('scheduleExportCopy');
    const exportEmptyState = document.getElementById('scheduleExportEmpty');
    const exportModal = exportModalEl && window.bootstrap?.Modal
      ? window.bootstrap.Modal.getOrCreateInstance(exportModalEl)
      : null;
    const clearWeekButton = document.getElementById('userScheduleClearWeek');
    const copyButton = document.getElementById('userScheduleCopy');
    const copyModalEl = document.getElementById('scheduleCopyModal');
    const copyModal = copyModalEl && window.bootstrap?.Modal
      ? window.bootstrap.Modal.getOrCreateInstance(copyModalEl)
      : null;
    const copySourceInput = document.getElementById('scheduleCopySourceWeek');
    const copyTargetSelect = document.getElementById('scheduleCopyTarget');
    const copyReplaceInput = document.getElementById('scheduleCopyReplace');
    const copySummary = document.getElementById('scheduleCopySummary');
    const copyError = document.getElementById('scheduleCopyError');
    const copySubmit = document.getElementById('scheduleCopySubmit');
    const copySourceHint = document.getElementById('scheduleCopySourceHint');
    const copyTargetHint = document.getElementById('scheduleCopyTargetHint');
    const exportFilterInputs = document.querySelectorAll('input[name="scheduleExportFilter"]');
    let exportFilter = 'all';
    const exportCredentials = Array.isArray(scheduleExportCredentials) ? scheduleExportCredentials : [];
    const historyModalEl = document.getElementById('scheduleHistoryModal');
    const historyModal = historyModalEl && window.bootstrap?.Modal
      ? window.bootstrap.Modal.getOrCreateInstance(historyModalEl)
      : null;
    const historyList = document.getElementById('scheduleHistoryList');
    const historyEmpty = document.getElementById('scheduleHistoryEmpty');
    const historyError = document.getElementById('scheduleHistoryError');
    const historyToggle = document.getElementById('userScheduleHistoryToggle');
    const historyEndpoint = @json(url('/admin/api/schedule/history'));
    let historyLoaded = false;
    let historyLoading = false;
    const hoursFormatter = new Intl.NumberFormat('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    const forecastSummaryOffcanvasEl = document.getElementById('forecastSummaryOffcanvas');
    const forecastSummaryOffcanvas = forecastSummaryOffcanvasEl && window.bootstrap?.Offcanvas
      ? window.bootstrap.Offcanvas.getOrCreateInstance(forecastSummaryOffcanvasEl)
      : null;
    const forecastSummaryTitle = document.getElementById('forecastSummaryTitle');
    const forecastSummarySubtitle = document.getElementById('forecastSummarySubtitle');
    const forecastSummaryDay = document.getElementById('forecastSummaryDay');
    const forecastSummaryBody = document.getElementById('forecastSummaryBody');
    const forecastSummaryEmpty = document.getElementById('forecastSummaryEmpty');
    const forecastSummaryTotals = document.getElementById('forecastSummaryTotals');
    const forecastLegendButton = document.getElementById('forecastLegendButton');
    const forecastLegendModalEl = document.getElementById('forecastLegendModal');
    const forecastLegendModal = forecastLegendModalEl && window.bootstrap?.Modal
      ? window.bootstrap.Modal.getOrCreateInstance(forecastLegendModalEl)
      : null;

    const CLASS_BOOK = 'user-schedule-cell--book';
    const CLASS_UNBOOK = 'user-schedule-cell--unbook';
    const CLASS_BLOCKED = 'user-schedule-cell--blocked';
    const CLASS_SELECTED = 'user-schedule-cell--selected';
    const CLASS_FORECAST = 'user-schedule-cell--forecast';
    const CLASS_FORECAST_MINE = 'user-schedule-cell--forecast-mine';
    const CLASS_FORECAST_FULL = 'user-schedule-cell--forecast-full';
    let isDraggingSelection = false;
    let bulkAction = null; // 'book' | 'unbook'

    function forecastSlotMinutes() {
      const minutes = Number(forecastSummary?.slot_minutes || 30);
      if (!Number.isFinite(minutes) || minutes <= 0 || minutes > 180) {
        return 30;
      }
      return minutes;
    }

    function renderForecastSummaryDayOptions(preferredDate) {
      if (!forecastSummaryDay) return;
      const entries = Array.from(forecastDemandRaw.entries()).sort((a, b) => a[0].localeCompare(b[0]));
      forecastSummaryDay.innerHTML = '';
      entries.forEach(([dateKey, meta]) => {
        const option = document.createElement('option');
        option.value = dateKey;
        option.textContent = capitalize(meta?.label || dateKey);
        if (dateKey === preferredDate) {
          option.selected = true;
        }
        forecastSummaryDay.appendChild(option);
      });
    }

    function ensureForecastIndicatorButton(indicator, dayKey) {
      if (!indicator) return null;
      indicator.dataset.forecastDay = dayKey;
      let trigger = indicator.querySelector('.forecast-summary-trigger');
      if (!trigger) {
        trigger = document.createElement('button');
        trigger.type = 'button';
        trigger.className = 'btn btn-sm btn-icon btn-outline-primary forecast-summary-trigger';
        trigger.innerHTML = '<i class="ti tabler-clipboard-data"></i>';
        trigger.setAttribute('data-bs-toggle', 'tooltip');
        trigger.setAttribute('data-bs-placement', 'bottom');
        trigger.setAttribute('title', 'Ver detalle de forecast');
        indicator.innerHTML = '';
        indicator.appendChild(trigger);
      }
      trigger.dataset.forecastDay = dayKey;
      return trigger;
    }

    function updateForecastSummaryTable(dayKey) {
      if (!forecastSummaryBody || !forecastSummaryEmpty) return;
      const meta = forecastDemandRaw.get(dayKey);
      const dayMeta = forecastDailyTotals.get(dayKey);
      const label = meta?.label || dayKey || 'Detalle forecast';
      if (forecastSummaryTitle) {
        forecastSummaryTitle.textContent = `Detalle forecast · ${capitalize(label)}`;
      }
      if (!meta || !Array.isArray(meta.slots) || !meta.slots.length) {
        forecastSummaryBody.innerHTML = '';
        forecastSummaryEmpty.classList.remove('d-none');
        if (forecastSummaryTotals) forecastSummaryTotals.textContent = '';
        if (forecastSummarySubtitle) forecastSummarySubtitle.textContent = 'Sin datos disponibles para este día.';
        if (forecastSummaryDay) forecastSummaryDay.value = '';
        return;
      }

      forecastSummaryEmpty.classList.add('d-none');
      forecastSummaryBody.innerHTML = '';

      if (forecastSummaryDay) {
        forecastSummaryDay.value = dayKey;
      }

      let totalOrders = 0;
      let totalCapacity = 0;
      let totalReserved = 0;
      let totalExternal = 0;

      meta.slots.forEach(slot => {
        const tr = document.createElement('tr');
        const ordersValue = Number(slot.orders || 0);
        const capacityValue = Number(slot.ridersTotal ?? (slot.capacity ?? 0));
        const reservedValue = Number(slot.reserved || 0);
        const externalValue = Number(slot.external || 0);
        const remaining = Number(slot.remaining ?? (capacityValue - reservedValue - externalValue));
        totalOrders += ordersValue;
        totalCapacity += capacityValue;
        totalReserved += reservedValue;
        totalExternal += externalValue;

        const rangeCell = document.createElement('td');
        rangeCell.textContent = slot.range || `${slot.time} - ${slot.time}`;

        const ordersCell = document.createElement('td');
        ordersCell.className = 'text-center';
        ordersCell.textContent = String(ordersValue);

        const capacityCell = document.createElement('td');
        capacityCell.className = 'text-center';
        capacityCell.textContent = String(capacityValue);

        const reservedCell = document.createElement('td');
        reservedCell.className = 'text-center';
        reservedCell.textContent = String(reservedValue);

        const externalCell = document.createElement('td');
        externalCell.className = 'text-center';
        externalCell.textContent = String(externalValue);
        if (externalValue > 0) {
          externalCell.classList.add('text-primary');
        }

        const remainingCell = document.createElement('td');
        remainingCell.className = 'text-center';
        remainingCell.textContent = String(remaining);
        if (remaining < 0) {
          remainingCell.classList.add('text-danger');
        } else if (remaining > 0) {
          remainingCell.classList.add('text-success');
        }
        tr.append(rangeCell, ordersCell, capacityCell, reservedCell, externalCell, remainingCell);
        forecastSummaryBody.appendChild(tr);
      });

      if (forecastSummaryTotals || forecastSummarySubtitle) {
        const totalRemaining = totalCapacity - totalReserved - totalExternal;
        const hourFactor = forecastSlotHourFactor();
        const capacityHours = totalCapacity * hourFactor;
        const reservedHours = totalReserved * hourFactor;
        const externalHours = totalExternal * hourFactor;
        const remainingHours = totalRemaining * hourFactor;
        const totalsText = `Pedidos estimados: ${totalOrders} · Demanda total: ${totalCapacity} riders (${hoursFormatter.format(capacityHours)} h) · Consumo propio: ${totalReserved} (${hoursFormatter.format(reservedHours)} h) · Consumo otras flotas: ${totalExternal} (${hoursFormatter.format(externalHours)} h) · Restante: ${totalRemaining} (${hoursFormatter.format(remainingHours)} h)`;
        if (forecastSummaryTotals) {
          forecastSummaryTotals.textContent = totalsText;
        }
        if (forecastSummarySubtitle) {
          const peakLabel = dayMeta ? Math.max(0, dayMeta.peak || 0) : 0;
          forecastSummarySubtitle.textContent = `Propio ${hoursFormatter.format(reservedHours)} h · Otras ${hoursFormatter.format(externalHours)} h · Demanda ${hoursFormatter.format(capacityHours)} h · Pico ${peakLabel}`;
        }
      }
    }

    function openForecastSummary(dayKey) {
      if (!forecastSummaryOffcanvas) return;
      const targetDay = dayKey && forecastDemandRaw.has(dayKey) ? dayKey : currentDay;
      updateForecastSummaryUI(targetDay);
      if (targetDay && forecastDemandRaw.has(targetDay)) {
        updateForecastSummaryTable(targetDay);
      }
      forecastSummaryOffcanvas.show();
    }

    function updateForecastSummaryUI(preferredDate = null) {
      if (!forecastSummaryDay) return;
      if (!forecastDemandRaw.size) {
        forecastSummaryDay.innerHTML = '<option value="">Sin forecast disponible</option>';
        if (forecastSummaryBody) forecastSummaryBody.innerHTML = '';
        if (forecastSummaryTotals) forecastSummaryTotals.textContent = '';
        if (forecastSummarySubtitle) forecastSummarySubtitle.textContent = 'Sin datos disponibles.';
        return;
      }
      const defaultDate =
        (preferredDate && forecastDemandRaw.has(preferredDate))
          ? preferredDate
          : (forecastDemandRaw.has(currentDay)
              ? currentDay
              : (forecastSummaryDay.value && forecastDemandRaw.has(forecastSummaryDay.value)
                  ? forecastSummaryDay.value
                  : Array.from(forecastDemandRaw.keys())[0]));
      renderForecastSummaryDayOptions(defaultDate);
      updateForecastSummaryTable(defaultDate);
    }

    function syncForecastSummarySelection(targetDate = currentDay) {
      if (!forecastSummaryOffcanvasEl || !forecastSummaryOffcanvasEl.classList.contains('show')) return;
      if (targetDate && forecastDemandRaw.has(targetDate)) {
        updateForecastSummaryTable(targetDate);
      }
    }

    function forecastSlotHourFactor() {
      return forecastSlotMinutes() / 60;
    }

    function resetForecastData() {
      forecastSlots = new Map();
      forecastDailyTotals = new Map();
      forecastSummary = null;
      forecastMineSlots = 0;
      forecastDemandRaw = new Map();
      allScheduleCells().forEach(cell => {
        cell.classList.remove(CLASS_FORECAST, CLASS_FORECAST_MINE, CLASS_FORECAST_FULL);
        delete cell.dataset.forecast;
        delete cell.dataset.forecastReserved;
        delete cell.dataset.forecastDiff;
        const indicator = cell.querySelector('.user-schedule-cell__forecast');
        if (indicator) indicator.remove();
      });
      document.querySelectorAll('[data-forecast-day]').forEach(indicator => {
        const button = ensureForecastIndicatorButton(indicator, indicator.dataset.forecastDay || '');
        indicator.classList.add('is-empty');
        if (button) {
          button.disabled = true;
          button.classList.add('disabled');
          button.setAttribute('title', 'Sin forecast disponible');
          button.dataset.bsOriginalTitle = 'Sin forecast disponible';
        }
      });
      initializeTooltips(userScheduleBoard);
      if (forecastSummaryOffcanvas && forecastSummaryOffcanvasEl?.classList.contains('show')) {
        forecastSummaryOffcanvas.hide();
      }
      if (forecastSummaryBody) {
        forecastSummaryBody.innerHTML = '';
      }
      if (forecastSummaryEmpty) {
        forecastSummaryEmpty.classList.remove('d-none');
      }
      if (forecastSummaryTotals) {
        forecastSummaryTotals.textContent = '';
      }
      if (forecastSummarySubtitle) {
        forecastSummarySubtitle.textContent = 'Selecciona un día para ver el detalle.';
      }
      if (forecastSummaryDay) {
        forecastSummaryDay.innerHTML = '<option value="">Sin forecast disponible</option>';
      }
    }

    function hydrateForecast(payload) {
      resetForecastData();
      if (!payload || typeof payload !== 'object') {
        return;
      }
      forecastSummary = payload;
      const demand = payload.demand || {};
      forecastDemandRaw = new Map();
      Object.values(demand).forEach(day => {
        if (!day || !day.date) return;
        const dateKey = day.date;
        const totals = day.totals || {};
        const capacityTotal = Number(totals.capacity) || 0;
        const reservedTotal = Number(totals.reserved) || 0;
        const externalTotal = Number(totals.external) || 0;
        const peakValue = Number(totals.peak) || 0;
        forecastDailyTotals.set(dateKey, {
          capacity: capacityTotal,
          peak: peakValue,
          reserved: reservedTotal,
          external: externalTotal,
        });
        const slots = day.slots || {};
        const slotEntries = Object.entries(slots).map(([time, info]) => {
          const capacity = Number(info?.capacity) || 0;
          const reserved = Number(info?.reserved) || 0;
          const mine = Boolean(info?.mine);
          const orders = Number(info?.orders) || 0;
          const external = Number(info?.consumed_other || 0);
          const remaining = Number(info?.remaining ?? (capacity - reserved - external));
          const ridersTotal = Number(info?.riders_total ?? capacity);
          const range = String(info?.range || `${time} - ${time}`);
          const key = `${dateKey}_${time}`;
          forecastSlots.set(key, { capacity, reserved, mine, orders, remaining, ridersTotal, range, external });
          if (mine && capacity > 0) {
            forecastMineSlots += 1;
          }
          return {
            time,
            range,
            capacity,
            reserved,
            orders,
            remaining,
            ridersTotal,
            external,
          };
        });
        slotEntries.sort((a, b) => a.time.localeCompare(b.time));
        forecastDemandRaw.set(dateKey, {
          label: day.label || dateKey,
          slots: slotEntries,
        });
      });
      updateForecastSummaryUI();
    }

    function computeForecastMineHours() {
      if (!forecastSummary) return 0;
      return Math.max(0, forecastMineSlots * forecastSlotHourFactor());
    }

    function applyForecastToCells() {
      const cells = allScheduleCells();
      cells.forEach(cell => {
        cell.classList.remove(CLASS_FORECAST, CLASS_FORECAST_MINE, CLASS_FORECAST_FULL);
        delete cell.dataset.forecast;
        delete cell.dataset.forecastReserved;
        delete cell.dataset.forecastDiff;
        const key = cell.dataset.key;
        if (!key) return;
        const info = forecastSlots.get(key);
        const indicator = cell.querySelector('.user-schedule-cell__forecast');
        if (!info || info.capacity <= 0) {
          if (indicator) {
            indicator.remove();
          }
          return;
        }
        let badge = indicator;
        if (!badge) {
          badge = document.createElement('span');
          badge.className = 'user-schedule-cell__forecast';
          cell.appendChild(badge);
        }
        const capacity = Math.max(0, info.capacity || 0);
        const reserved = Math.max(0, info.reserved || 0);
        const orders = Math.max(0, Number(info.orders || 0));
        const external = Math.max(0, Number(info.external || 0));
        const remainingRaw = Number(info.remaining ?? (capacity - reserved - external));
        const remaining = Number.isFinite(remainingRaw) ? remainingRaw : (capacity - reserved - external);
        const mine = Boolean(info.mine);
        cell.classList.add(CLASS_FORECAST);
        cell.dataset.forecast = String(capacity);
        cell.dataset.forecastReserved = String(reserved);
        cell.dataset.forecastDiff = String(remaining);
        badge.innerHTML = `<span class="user-schedule-cell__forecast-consumed">${reserved}</span><span class="user-schedule-cell__forecast-divider">/</span><span class="user-schedule-cell__forecast-capacity">${capacity}</span><span class="user-schedule-cell__forecast-divider">/</span><span class="user-schedule-cell__forecast-external">${external}</span>`;
        badge.dataset.reserved = String(reserved);
        badge.dataset.remaining = String(remaining);
        badge.dataset.external = String(external);
        badge.classList.toggle('is-mine', mine);
        badge.title = `Pedidos estimados ${orders} · Consumo propio ${reserved} · Consumo otras flotas ${external} · Demanda ${capacity} · Disponible ${remaining}`;
        if (mine) {
          cell.classList.add(CLASS_FORECAST_MINE);
        }
        if ((reserved + external) >= capacity && capacity > 0) {
          cell.classList.add(CLASS_FORECAST_FULL);
        }
      });
    }

    function updateForecastBadges() {
      const hourFactor = forecastSlotHourFactor();
      const myHours = computeForecastMineHours();
      updateHoursBadge('forecast-week', myHours);
      const indicators = document.querySelectorAll('[data-forecast-day]');
      indicators.forEach(el => {
        const dayKey = el.dataset.forecastDay;
        const button = ensureForecastIndicatorButton(el, dayKey);
        const meta = forecastDailyTotals.get(dayKey);
        if (!button) return;
        if (!meta || (!meta.capacity && !meta.peak && !meta.reserved && !meta.external)) {
          el.classList.add('is-empty');
          button.disabled = true;
          button.classList.add('disabled');
          button.setAttribute('title', 'Sin forecast disponible');
          button.dataset.bsOriginalTitle = 'Sin forecast disponible';
          return;
        }
        el.classList.remove('is-empty');
        button.disabled = false;
        button.classList.remove('disabled');
        const capacityHours = Math.max(0, meta.capacity * hourFactor);
        const reservedHours = Math.max(0, (meta.reserved || 0) * hourFactor);
        const externalHours = Math.max(0, (meta.external || 0) * hourFactor);
        const peak = Math.max(0, meta.peak || 0);
        const summary = `Consumo propio ${hoursFormatter.format(reservedHours)} h · Otras flotas ${hoursFormatter.format(externalHours)} h · Demanda ${hoursFormatter.format(capacityHours)} h · Pico ${peak}`;
        button.setAttribute('title', summary);
        button.dataset.bsOriginalTitle = summary;
      });
      initializeTooltips(userScheduleBoard);
    }

    function parseDate(str) {
      if (!str) return new Date();
      const parts = str.split('-').map(Number);
      return new Date(parts[0], (parts[1] || 1) - 1, parts[2] || 1);
    }

    function startOfWeek(date) {
      const base = date instanceof Date ? new Date(date) : parseDate(date);
      const day = (base.getDay() + 6) % 7;
      base.setHours(0, 0, 0, 0);
      base.setDate(base.getDate() - day);
      return base;
    }

    function isoDate(dateObj) {
      const local = new Date(dateObj.getTime() - dateObj.getTimezoneOffset() * 60000);
      return local.toISOString().slice(0, 10);
    }

    function addDays(input, offset) {
      const base = input instanceof Date ? new Date(input) : parseDate(input);
      base.setDate(base.getDate() + offset);
      return base;
    }

    function shiftMonth(monthStr, offset) {
      const parts = (monthStr || '').split('-').map(Number);
      const date = new Date(parts[0] || new Date().getFullYear(), (parts[1] || 1) - 1 + offset, 1);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
    }

    function monthStartFromStr(monthStr) {
      const parts = (monthStr || '').split('-').map(Number);
      return new Date(parts[0] || new Date().getFullYear(), (parts[1] || 1) - 1, 1);
    }

    function initializeTooltips(root = document) {
      if (!window.bootstrap || !root) return;
      const elements = Array.from(root.querySelectorAll('[data-bs-toggle="tooltip"]'));
      elements.forEach(el => {
        const instance = window.bootstrap.Tooltip.getInstance(el);
        if (instance) {
          instance.dispose();
        }
        window.bootstrap.Tooltip.getOrCreateInstance(el);
      });
    }

    function capitalize(text) {
      if (!text) return text;
      return text.charAt(0).toUpperCase() + text.slice(1);
    }

    function formatHoursLabel(hours) {
      const value = Number(hours) || 0;
      return `${value.toFixed(1)} h`;
    }

    function timeToMinutes(timeStr) {
      if (!timeStr) return 0;
      const [h, m] = timeStr.split(':').map(Number);
      return (Number.isFinite(h) ? h : 0) * 60 + (Number.isFinite(m) ? m : 0);
    }

    function minutesToTime(minutes) {
      const total = Math.max(0, Number(minutes) || 0);
      const hrs = Math.floor(total / 60);
      const mins = total % 60;
      return `${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
    }

    function normalizeStatus(status) {
      const value = (status || '').toString().toLowerCase();
      if (value === 'book' || value === 'confirmed' || value === 'ok' || value === 'busy' || value === 'partial') return 'book';
      if (value === 'unbook' || value === 'unbooked') return 'unbook';
      if (value === 'blocked') return 'blocked';
      return value;
    }

    function toast(message, type = 'success') {
      if (!message) return;
      if (window.Swal) {
        window.Swal.fire({ icon: type, title: message, timer: 1600, showConfirmButton: false });
      } else {
        console.info('[Planificador]', message);
      }
    }

    function allScheduleCells() {
      return Array.from(userScheduleBoard.querySelectorAll('.user-schedule-cell'));
    }

    function getCellByKey(key) {
      return userScheduleBoard.querySelector(`.user-schedule-cell[data-key="${key}"]`);
    }

    function attachCellListeners() {
      allScheduleCells().forEach(cell => {
        cell.removeEventListener('click', handleCellClick);
        cell.removeEventListener('mousedown', handleCellMouseDown);
        cell.removeEventListener('mouseenter', handleCellMouseEnter);
        cell.addEventListener('click', handleCellClick);
        cell.addEventListener('mousedown', handleCellMouseDown);
        cell.addEventListener('mouseenter', handleCellMouseEnter);
        cell.addEventListener('touchstart', handleCellTouchStart, { passive: true });
      });
    }

    function addCellToSelection(cell) {
      if (!cell) return false;
      const key = cell.dataset.key;
      if (!key || selection.has(key)) return false;
      selection.add(key);
      cell.classList.add(CLASS_SELECTED);
      cell.setAttribute('aria-pressed', 'true');
      return true;
    }

    function handleCellClick() {
      // Processing handled via mouse interactions (mousedown + mouseup).
    }

    function handleCellMouseDown(event) {
      if (viewMode === 'month') return;
      if (event.button !== 0) return;
      const cell = event.currentTarget;
      event.preventDefault();
      const status = normalizeStatus(cell.dataset.status);
      if (status === 'blocked') {
        toast('Este slot está bloqueado.', 'warning');
        return;
      }
      selection.clear();
      allScheduleCells().forEach(item => {
        item.classList.remove(CLASS_SELECTED);
        item.setAttribute('aria-pressed', 'false');
      });
      addCellToSelection(cell);
      bulkAction = status === 'book' ? 'unbook' : 'book';
      isDraggingSelection = true;
    }

    function handleCellMouseEnter(event) {
      if (!isDraggingSelection || viewMode === 'month') return;
      addCellToSelection(event.currentTarget);
    }

    function handleCellTouchStart(event) {
      if (viewMode === 'month') return;
      event.preventDefault();
      const cell = event.currentTarget;
      const status = normalizeStatus(cell.dataset.status);
      if (status === 'blocked') {
        toast('Este slot está bloqueado.', 'warning');
        return;
      }
      processCells([cell], status === 'book' ? 'unbook' : 'book');
    }

    async function mutateSlots(slotPayloads, method) {
      if (!Array.isArray(slotPayloads) || !slotPayloads.length) return;
      const url = `{{ url('/admin/api/schedule/board') }}`;
      const options = {
        method,
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
          'X-CSRF-TOKEN': csrfToken || '',
        },
        body: JSON.stringify({
          rider_id: riderId,
          ...(method === 'POST' ? { status: 'book' } : {}),
          slots: slotPayloads,
        }),
      };
      const res = await fetch(url, options);
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.message || (method === 'POST' ? 'No se pudo marcar como BOOK.' : 'No se pudo marcar como UNBOOK.'));
      }
    }

    async function processCells(cells, action) {
      const list = (cells || []).map(cell => {
        if (!cell) return null;
        return {
          cell,
          payload: {
            date: cell.dataset.day,
            time: `${cell.dataset.time}:00`,
          },
        };
      }).filter(item => item && item.payload.date && item.payload.time);

      if (!list.length) return;

      try {
        if (action === 'unbook') {
          await mutateSlots(list.map(item => item.payload), 'DELETE');
        } else {
          await mutateSlots(list.map(item => item.payload), 'POST');
        }
        await loadWeek(userWeekStart);
      } catch (error) {
        console.error(error);
        toast(error.message || 'No se pudo actualizar el slot', 'error');
      }
    }

    function normalizeCityCode(value, fallback = '') {
      const base = (value ?? '').toString().trim();
      if (base) return base.toUpperCase();
      const fb = (fallback ?? '').toString().trim();
      return fb ? fb.toUpperCase() : '';
    }

    function formatSlotTimeLabel(timeStr) {
      if (!timeStr) return '--:--';
      return String(timeStr).slice(0, 5);
    }

    function formatSlotDateLabel(dateStr) {
      if (!dateStr) return '—';
      try {
        const dt = new Date(`${dateStr}T00:00:00`);
        return dt.toLocaleDateString('es-ES', { weekday: 'short', day: '2-digit', month: '2-digit' });
      } catch (error) {
        return dateStr;
      }
    }

    function formatDateTimeLabel(value) {
      if (!value) return '';
      try {
        const dt = new Date(value);
        if (Number.isNaN(dt.getTime())) return '';
        return dt.toLocaleString('es-ES', { dateStyle: 'short', timeStyle: 'short' });
      } catch (error) {
        return '';
      }
    }

    async function loadHistory() {
      if (!historyList || historyLoading) return;
      historyLoading = true;
      try {
        historyError?.classList.add('d-none');
        const url = new URL(historyEndpoint);
        url.searchParams.set('rider_id', String(riderId));
        url.searchParams.set('limit', '50');
        const response = await fetch(url.toString(), { headers: { Accept: 'application/json' } });
        if (!response.ok) throw new Error('No se pudo cargar el historial de movimientos.');
        const payload = await response.json().catch(() => ({ data: [] }));
        const entries = Array.isArray(payload.data) ? payload.data : [];
        renderHistory(entries);
        historyLoaded = true;
      } catch (error) {
        console.error(error);
        if (historyError) {
          historyError.textContent = error.message || 'No se pudo cargar el historial.';
          historyError.classList.remove('d-none');
        }
      } finally {
        historyLoading = false;
      }
    }

    function renderHistory(entries) {
      if (!historyList) return;
      historyList.innerHTML = '';

      if (!entries.length) {
        historyEmpty?.classList.remove('d-none');
        return;
      }

      historyEmpty?.classList.add('d-none');

      entries.forEach(entry => {
        const li = document.createElement('li');
        li.className = 'list-group-item px-3 py-2';
        const action = (entry?.action || '').toLowerCase();
        const actionLabel = action ? action.toUpperCase() : '—';
        let badgeClass = 'badge bg-label-secondary';
        if (action === 'book') badgeClass = 'badge bg-label-success';
        else if (action === 'unbook') badgeClass = 'badge bg-label-warning';

        const slotDate = formatSlotDateLabel(entry?.slot_date);
        const slotTime = formatSlotTimeLabel(entry?.slot_time);
        const actorName = entry?.actor?.name || 'Sistema';
        const occurredAt = formatDateTimeLabel(entry?.occurred_at);
        const cityLabel = entry?.city ? ` • ${entry.city}` : '';
        const statusChanged = entry?.previous_status && entry?.new_status && entry.previous_status !== entry.new_status
          ? `<div class="small text-muted">Estado: ${String(entry.previous_status).toUpperCase()} → ${String(entry.new_status).toUpperCase()}</div>`
          : '';

        li.innerHTML = `
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <span class="${badgeClass} me-2">${actionLabel}</span>
              <strong>${slotTime}</strong>
              <span class="text-muted"> · ${slotDate}${cityLabel}</span>
            </div>
            ${occurredAt ? `<small class="text-muted">${occurredAt}</small>` : ''}
          </div>
          <div class="small text-muted">${actorName}</div>
          ${statusChanged}
        `;

        historyList.appendChild(li);
      });
    }

    function formatDateForExport(dateStr) {
      const dt = parseDate(dateStr);
      const day = String(dt.getDate()).padStart(2, '0');
      const month = String(dt.getMonth() + 1).padStart(2, '0');
      const year = dt.getFullYear();
      return `${day}/${month}/${year}`;
    }

    function buildExportBlocks(filter = exportFilter) {
      const groupedByStatus = {
        book: new Map(),
        unbook: new Map(),
      };

      latestAssignments.forEach(slot => {
        if (!slot || !slot.slot_date || !slot.slot_time) return;
        const status = normalizeStatus(slot.status);
        if (status !== 'book' && status !== 'unbook') return;
        const bucket = groupedByStatus[status];
        const entries = bucket.get(slot.slot_date) || [];
        entries.push(slot);
        bucket.set(slot.slot_date, entries);
      });

      const blocks = [];

      ['book', 'unbook'].forEach(status => {
        const bucket = groupedByStatus[status];
        bucket.forEach((entries, dateKey) => {
          const orderedTimes = Array.from(new Set(entries.map(entry => entry.slot_time)))
            .sort((a, b) => timeToMinutes(a) - timeToMinutes(b));

          if (!orderedTimes.length) return;

          let start = orderedTimes[0];
          let prev = orderedTimes[0];
          let blockCity = entries.find(entry => entry.slot_time === start)?.city || entries[0]?.city || '';

          for (let i = 1; i < orderedTimes.length; i += 1) {
            const current = orderedTimes[i];
            if (timeToMinutes(current) - timeToMinutes(prev) === 30) {
              prev = current;
              continue;
            }
            blocks.push({
              status,
              date: dateKey,
              start,
              end: minutesToTime(timeToMinutes(prev) + 30),
              city: blockCity,
            });
            start = current;
            prev = current;
            blockCity = entries.find(entry => entry.slot_time === start)?.city || entries[i]?.city || blockCity;
          }

        blocks.push({
          status,
          date: dateKey,
          start,
          end: minutesToTime(timeToMinutes(prev) + 30),
          city: blockCity,
        });
      });
    });

    blocks.sort((a, b) => {
      if (a.date === b.date) {
          if (timeToMinutes(a.start) === timeToMinutes(b.start)) {
            if (a.status === b.status) return 0;
            return a.status === 'book' ? -1 : 1;
          }
          return timeToMinutes(a.start) - timeToMinutes(b.start);
        }
      return a.date < b.date ? -1 : 1;
    });

    if (filter === 'book') {
      return blocks.filter(block => block.status === 'book');
    }
    if (filter === 'unbook') {
      return blocks.filter(block => block.status === 'unbook');
    }
    return blocks;
    }

    function applyCredentialDefaults(credential, { force = false } = {}) {
      if (!credential) return;
      if (exportCredentialSelect && (force || !exportCredentialSelect.value)) {
        exportCredentialSelect.value = String(credential.id);
      }
      if (exportCityInput && (force || !exportCityInput.value)) {
        exportCityInput.value = normalizeCityCode(credential.city_code, exportCityInput.value);
      }
      if (exportCourierInput && (force || !exportCourierInput.value) && credential.courier_id) {
        exportCourierInput.value = credential.courier_id;
      }
      if (exportRiderInput && (force || !exportRiderInput.value) && credential.rider_id) {
        exportRiderInput.value = credential.rider_id;
      }
    }

    function collectExportRows() {
      const blocks = buildExportBlocks();
      const baseCity = normalizeCityCode(exportCityInput?.value || '');
      const courierId = (exportCourierInput?.value || '').trim();
      const riderExternalId = (exportRiderInput?.value || '').trim();
      return blocks.map(block => {
        const city = normalizeCityCode(block.city, baseCity);
        return {
          city,
          courier: courierId,
          day: formatDateForExport(block.date),
          start: block.start,
          end: block.end,
          action: block.status === 'unbook' ? 'UNBOOK' : 'BOOK',
          rider: riderExternalId,
        };
      });
    }

    function updateExportPreview() {
      if (!exportTableBody || !exportRawTextarea) return;
      const rows = collectExportRows();
      exportTableBody.innerHTML = '';
      if (!rows.length) {
        exportEmptyState?.classList.remove('d-none');
        exportRawTextarea.value = '';
        if (exportCopyBtn) exportCopyBtn.disabled = true;
        return;
      }

      exportEmptyState?.classList.add('d-none');
      const courierId = (exportCourierInput?.value || '').trim();
      const riderExternalId = (exportRiderInput?.value || '').trim();

      rows.forEach(row => {
        const tr = document.createElement('tr');
        const actionBadge = row.action === 'UNBOOK'
          ? '<span class="badge bg-label-warning">UNBOOK</span>'
          : '<span class="badge bg-label-success">BOOK</span>';
        tr.innerHTML = `
          <td>${row.city || '<span class="text-danger">—</span>'}</td>
          <td>${row.courier || '<span class="text-danger">—</span>'}</td>
          <td>${row.day}</td>
          <td>${row.start}</td>
          <td>${row.end}</td>
          <td>${actionBadge}</td>
          <td>${row.rider || '<span class="text-danger">—</span>'}</td>
        `;
        exportTableBody.appendChild(tr);
      });

      const header = ['codigo_ciudad', 'courier_ID', 'dia', 'hora_inicio', 'hora_final', 'accion', 'rider_id'];
      const lines = [header.join('\t')];
      rows.forEach(row => {
        lines.push([row.city, row.courier, row.day, row.start, row.end, row.action, row.rider].join('\t'));
      });
      exportRawTextarea.value = lines.join('\n');

      if (exportCopyBtn) {
        const canCopy = rows.length > 0 && courierId && riderExternalId;
        exportCopyBtn.disabled = !canCopy;
        if (!canCopy) {
          exportCopyBtn.setAttribute('title', 'Completa Courier ID y Rider ID para habilitar la copia');
        } else {
          exportCopyBtn.removeAttribute('title');
        }
      }
    }

    if (exportCredentialSelect && exportCredentials.length) {
      exportCredentials.forEach(cred => {
        const option = document.createElement('option');
        option.value = String(cred.id);
        const pieces = [];
        if (cred.courier_id) pieces.push(cred.courier_id);
        else if (cred.login_email) pieces.push(cred.login_email);
        if (cred.city_code) pieces.push(cred.city_code);
        option.textContent = pieces.join(' · ') || `Credencial ${cred.id}`;
        exportCredentialSelect.appendChild(option);
      });
      if (!exportCredentialSelect.value && exportCredentials[0]) {
        applyCredentialDefaults(exportCredentials[0], { force: true });
      }
      exportCredentialSelect.addEventListener('change', () => {
        const selected = exportCredentials.find(cred => String(cred.id) === exportCredentialSelect.value);
        if (selected) applyCredentialDefaults(selected, { force: true });
        updateExportPreview();
      });
    } else if (exportCredentialSelect) {
      exportCredentialSelect.innerHTML = '<option value="">Sin credenciales disponibles</option>';
      exportCredentialSelect.disabled = true;
    }

    [exportCityInput, exportCourierInput, exportRiderInput].forEach(input => {
      if (!input) return;
      input.addEventListener('input', () => {
        if (input === exportCityInput) {
          input.value = input.value.toUpperCase();
        }
        updateExportPreview();
      });
    });

    if (exportCopyBtn) {
      exportCopyBtn.addEventListener('click', async () => {
        const text = exportRawTextarea?.value || '';
        if (!text) {
          toast('No hay horarios para copiar', 'warning');
          return;
        }
        try {
          if (navigator.clipboard?.writeText) {
            await navigator.clipboard.writeText(text);
            toast('Horarios copiados al portapapeles');
          } else {
            throw new Error('Clipboard API no disponible');
          }
        } catch (error) {
          if (exportRawTextarea) {
            exportRawTextarea.focus();
            exportRawTextarea.select();
            const success = document.execCommand('copy');
            toast(success ? 'Horarios copiados al portapapeles' : 'No se pudo copiar. Selecciona y copia manualmente.', success ? 'success' : 'warning');
            exportRawTextarea.setSelectionRange(exportRawTextarea.value.length, exportRawTextarea.value.length);
          } else {
            toast('No se pudo copiar. Selecciona y copia manualmente.', 'warning');
          }
        }
      });
    }

    if (exportButton && exportModal) {
      exportButton.addEventListener('click', () => {
        if (exportCredentials.length) {
          const selected = exportCredentials.find(cred => String(cred.id) === exportCredentialSelect?.value) || exportCredentials[0];
          applyCredentialDefaults(selected);
        } else if (exportCityInput && !exportCityInput.value) {
          const blocks = buildExportBlocks();
          if (blocks.length && blocks[0].city) {
            exportCityInput.value = normalizeCityCode(blocks[0].city);
          }
        }
        updateExportPreview();
        exportModal.show();
      });
    }

    if (exportModalEl) {
      exportModalEl.addEventListener('shown.bs.modal', () => updateExportPreview());
    }
    if (exportFilterInputs.length) {
      exportFilterInputs.forEach(input => {
        input.addEventListener('change', () => {
          if (input.checked) {
            exportFilter = input.value;
            updateExportPreview();
          }
        });
      });
    }

    if (sesameSyncButton) {
      sesameSyncButton.addEventListener('click', async () => {
        if (!userScheduleBoard) {
          toast('No se pudo encontrar el planificador para este rider.', 'error');
          return;
        }

        const sesameId = (userScheduleBoard.dataset.sesameId || '').trim();
        if (!sesameId) {
          toast('Configura el Sesame Employee ID antes de sincronizar.', 'warning');
          return;
        }

        if (!userWeekStart) {
          toast('Selecciona primero una semana válida.', 'warning');
          return;
        }

        const blocks = buildExportBlocks('book')
          .map(block => ({
            date: block.date,
            start: block.start,
            end: block.end,
            status: 'book',
            city: block.city || null,
          }))
          .filter(block => block.date && block.start && block.end);

        if (!blocks.length) {
          toast('No hay turnos BOOK que enviar a Sesame.', 'warning');
          return;
        }

        const payload = {
          rider_id: riderId,
          week_start: userWeekStart,
          blocks,
        };

        const originalLabel = sesameSyncButton.innerHTML;
        sesameSyncButton.disabled = true;
        sesameSyncButton.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Subiendo...';

        try {
          const response = await fetch(sesameSyncEndpoint, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              Accept: 'application/json',
              'X-CSRF-TOKEN': csrfToken || '',
            },
            body: JSON.stringify(payload),
          });

          const data = await response.json().catch(() => ({}));

          if (!response.ok || data.success === false) {
            const message = data?.message || 'No se pudo sincronizar con Sesame.';
            throw new Error(message);
          }

          const summarySegments = [];
          if (typeof data.created === 'number') summarySegments.push(`${data.created} creados`);
          if (typeof data.skipped === 'number' && data.skipped > 0) summarySegments.push(`${data.skipped} duplicados`);
          if (typeof data.failed === 'number' && data.failed > 0) summarySegments.push(`${data.failed} con error`);
          const summary = summarySegments.length ? ` (${summarySegments.join(', ')})` : '';
          toast((data.message || 'Sesame sincronizado correctamente.') + summary);
        } catch (error) {
          const message = error instanceof Error ? error.message : 'No se pudo sincronizar con Sesame.';
          toast(message, 'error');
        } finally {
          sesameSyncButton.disabled = false;
          sesameSyncButton.innerHTML = originalLabel;
        }
      });
    }

    function clearSelection() {
      selection.forEach(key => {
        const cell = getCellByKey(key);
        if (cell) {
          cell.classList.remove(CLASS_SELECTED);
          cell.setAttribute('aria-pressed', 'false');
        }
      });
      selection.clear();
      bulkAction = null;
    }

    document.addEventListener('mouseup', async () => {
      if (!isDraggingSelection) return;
      isDraggingSelection = false;
      const cells = Array.from(selection).map(getCellByKey).filter(Boolean);
      if (cells.length && bulkAction) {
        await processCells(cells, bulkAction);
      }
      clearSelection();
    });

    historyToggle?.addEventListener('click', () => {
      if (historyModal) {
        historyModal.show();
      }
    });

    historyModalEl?.addEventListener('shown.bs.modal', () => {
      if (!historyLoaded) {
        if (historyList) historyList.innerHTML = '';
        historyEmpty?.classList.remove('d-none');
        loadHistory();
      }
    });

    historyModalEl?.addEventListener('hidden.bs.modal', () => {
      historyLoaded = false;
    });

    copySourceInput?.addEventListener('change', () => {
      if (copySourceInput.value) {
        copySourceInput.value = isoDate(startOfWeek(copySourceInput.value));
      }
      resetCopyModalState();
      updateCopySummary();
    });

    copyTargetSelect?.addEventListener('change', () => {
      updateCopyLabels();
      updateCopySummary();
    });

    copyReplaceInput?.addEventListener('change', () => {
      updateCopySummary();
    });

    copyModalEl?.addEventListener('show.bs.modal', () => {
      setCopyModalDefaults();
    });

    copyModalEl?.addEventListener('hidden.bs.modal', () => {
      resetCopyModalState();
    });

    copyButton?.addEventListener('click', () => {
      if (!copyModal) return;
      setCopyModalDefaults();
      copyModal.show();
    });

    clearWeekButton?.addEventListener('click', async () => {
      const manualSlots = latestAssignments.filter(slot => {
        const status = normalizeStatus(slot.status);
        return status === 'book' || status === 'unbook';
      });
      if (!manualSlots.length) {
        toast('No hay horarios manuales para limpiar esta semana.', 'info');
        return;
      }

      let confirmed = true;
      if (window.Swal) {
        const result = await Swal.fire({
          title: '¿Limpiar todos los horarios manuales?',
          text: 'Se eliminarán los turnos manuales de la semana en curso para este rider.',
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: 'Sí, limpiar',
          cancelButtonText: 'Cancelar',
          customClass: {
            confirmButton: 'btn btn-danger me-2',
            cancelButton: 'btn btn-label-secondary'
          },
          buttonsStyling: false
        });
        confirmed = Boolean(result.value);
      } else {
        confirmed = window.confirm('Se eliminarán todos los turnos manuales de la semana actual. ¿Continuar?');
      }
      if (!confirmed) return;

      const payload = manualSlots.map(slot => {
        const time = String(slot.slot_time || '00:00');
        const formattedTime = time.length === 5 ? `${time}:00` : time;
        return {
          date: slot.slot_date,
          time: formattedTime
        };
      });

      if (!payload.length) {
        toast('No se encontraron turnos manuales válidos para eliminar.', 'info');
        return;
      }

      const originalHTML = clearWeekButton.innerHTML;
      clearWeekButton.disabled = true;
      clearWeekButton.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Limpiando';

      try {
        await mutateSlots(payload, 'DELETE');
        await loadWeek(userWeekStart);
        toast('Todos los horarios manuales de la semana fueron eliminados.', 'success');
      } catch (error) {
        console.error(error);
        toast('No se pudieron eliminar los horarios de la semana.', 'error');
      } finally {
        clearWeekButton.disabled = false;
        clearWeekButton.innerHTML = originalHTML;
      }
    });

    copySubmit?.addEventListener('click', async () => {
      if (!copySubmit) return;
      resetCopyModalState();
      const sourceWeekStart = getCopySourceWeekStart();
      const targetWeekStart = getCopyTargetWeekStart();
      if (!sourceWeekStart || !targetWeekStart) {
        const message = 'Selecciona una semana válida para copiar.';
        if (copyError) {
          copyError.textContent = message;
          copyError.classList.remove('d-none');
        } else {
          toast(message, 'error');
        }
        return;
      }

      const payload = {
        rider_id: riderId,
        source_week_start: sourceWeekStart,
        target_week_start: targetWeekStart,
        mode: copyReplaceInput && copyReplaceInput.checked === false ? 'append' : 'replace',
      };

      const originalLabel = copySubmit.innerHTML;
      copySubmit.disabled = true;
      copySubmit.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Copiando...';

      try {
        const response = await fetch(`{{ url('/admin/api/schedule/board/copy') }}`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            'X-CSRF-TOKEN': csrfToken || '',
          },
          body: JSON.stringify(payload),
        });
        const data = await response.json().catch(() => ({}));
        if (!response.ok || data.success === false) {
          const message = data?.message || 'No se pudo copiar la semana seleccionada.';
          throw new Error(message);
        }
        const summaryParts = [];
        if (typeof data.copied === 'number') summaryParts.push(`${data.copied} slots copiados`);
        if (payload.mode === 'replace' && typeof data.cleared === 'number' && data.cleared > 0) {
          summaryParts.push(`${data.cleared} liberados`);
        }
        const baseMessage = data.message || 'Horarios copiados correctamente.';
        const finalMessage = summaryParts.length ? `${baseMessage} (${summaryParts.join(', ')})` : baseMessage;
        toast(finalMessage);

        let responseTargetStart = targetWeekStart;
        if (data?.target_week?.start) {
          try {
            responseTargetStart = isoDate(startOfWeek(data.target_week.start));
          } catch (error) {
            responseTargetStart = data.target_week.start;
          }
        }
        let normalizedCurrent = userWeekStart;
        try {
          normalizedCurrent = isoDate(startOfWeek(userWeekStart));
        } catch (error) {
          normalizedCurrent = userWeekStart;
        }
        if (responseTargetStart === normalizedCurrent) {
          await loadWeek(userWeekStart);
        }
        copyModal?.hide();
      } catch (error) {
        const message = error instanceof Error ? error.message : 'No se pudo copiar la semana seleccionada.';
        if (copyError) {
          copyError.textContent = message;
          copyError.classList.remove('d-none');
        } else {
          toast(message, 'error');
        }
      } finally {
        copySubmit.disabled = false;
        copySubmit.innerHTML = originalLabel;
      }
    });

    function updateWeekColumns(startStr) {
      const headerCells = weekView?.querySelectorAll('.user-schedule-grid__header-cell:not(.user-schedule-grid__header-cell--time)') || [];
      headerCells.forEach((cell, index) => {
        const dayDate = addDays(startStr, index);
        const dayLabel = dayDate.toLocaleDateString('es-ES', { weekday: 'long', day: 'numeric' });
        const monthLabel = dayDate.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' });
        const span = cell.querySelector('span');
        const small = cell.querySelector('small');
        if (span) span.textContent = capitalize(dayLabel);
        if (small) small.textContent = capitalize(monthLabel);
        const indicator = cell.querySelector('[data-forecast-day]');
        if (indicator) {
          const iso = isoDate(dayDate);
          const button = ensureForecastIndicatorButton(indicator, iso);
          if (button) {
            button.disabled = true;
            button.classList.add('disabled');
            button.setAttribute('title', 'Sin forecast disponible');
            button.dataset.bsOriginalTitle = 'Sin forecast disponible';
          }
        }
      });
      initializeTooltips(weekView);

      const rows = weekView?.querySelectorAll('.user-schedule-row') || [];
      rows.forEach(row => {
        const rowCells = row.querySelectorAll('.user-schedule-cell');
        rowCells.forEach((cell, index) => {
          const dayDate = addDays(startStr, index);
          const iso = isoDate(dayDate);
          cell.dataset.day = iso;
          cell.dataset.key = `${iso}_${cell.dataset.time}`;
        });
      });
    }

    function updateDayCells() {
      const dayCells = dayView?.querySelectorAll('.user-schedule-cell') || [];
      dayCells.forEach(cell => {
        cell.dataset.day = currentDay;
        cell.dataset.key = `${currentDay}_${cell.dataset.time}`;
      });
    }

    function updateDayTotals() {
      if (!dayTotal) return;
      const bookedCount = latestAssignments.filter(slot => slot.slot_date === currentDay && normalizeStatus(slot.status) === 'book').length;
      const manualHours = bookedCount * 0.5;
      let label = `${formatHoursLabel(manualHours)} manual`;
      const meta = forecastDailyTotals.get(currentDay);
      if (meta && (meta.capacity || meta.peak)) {
        const hourFactor = forecastSlotHourFactor();
        const forecastHours = Math.max(0, meta.capacity * hourFactor);
        const reservedHours = Math.max(0, (meta.reserved || 0) * hourFactor);
        const externalHours = Math.max(0, (meta.external || 0) * hourFactor);
        const peak = Math.max(0, meta.peak || 0);
        const forecastLabel = hoursFormatter.format(forecastHours);
        const reservedLabel = hoursFormatter.format(reservedHours);
        const externalLabel = hoursFormatter.format(externalHours);
        label += ` · Cons. propia ${reservedLabel} h · Otras ${externalLabel} h / Dem. ${forecastLabel} h (pico ${peak})`;
        dayTotal.dataset.hasForecast = 'true';
      } else {
        delete dayTotal.dataset.hasForecast;
      }
      dayTotal.textContent = label;
    }

    function updatePeriodLabel() {
      if (!periodLabel) return;
      if (viewMode === 'week') {
        const start = addDays(userWeekStart, 0);
        const end = addDays(userWeekStart, 6);
        const formatterStart = new Intl.DateTimeFormat('es-ES', { day: '2-digit', month: 'short' });
        const formatterEnd = new Intl.DateTimeFormat('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });
        periodLabel.textContent = `${formatterStart.format(start)} — ${formatterEnd.format(end)}`;
      } else if (viewMode === 'day') {
        const dayDate = parseDate(currentDay);
        periodLabel.textContent = capitalize(dayDate.toLocaleDateString('es-ES', { weekday: 'long', day: 'numeric', month: 'short', year: 'numeric' }));
      } else {
        const monthDate = monthStartFromStr(currentMonth);
        periodLabel.textContent = capitalize(monthDate.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' }));
      }
    }

    function buildWeekLabel(startStr) {
      const start = addDays(startStr, 0);
      const end = addDays(startStr, 6);
      const formatterStart = new Intl.DateTimeFormat('es-ES', { day: '2-digit', month: 'long' });
      const formatterEnd = new Intl.DateTimeFormat('es-ES', { day: '2-digit', month: 'long', year: 'numeric' });
      return `${capitalize(formatterStart.format(start))} – ${capitalize(formatterEnd.format(end))}`;
    }

    function safeWeekLabel(startStr) {
      if (!startStr) return '—';
      try {
        return buildWeekLabel(startStr);
      } catch (error) {
        return '—';
      }
    }

    function getDefaultSourceWeekStart() {
      return isoDate(addDays(startOfWeek(userWeekStart), -7));
    }

    function getNextWeekStart() {
      return isoDate(addDays(userWeekStart, 7));
    }

    function getCopySourceWeekStart() {
      if (copySourceInput && copySourceInput.value) {
        return isoDate(startOfWeek(copySourceInput.value));
      }
      return getDefaultSourceWeekStart();
    }

    function getCopyTargetWeekStart() {
      if (copyTargetSelect && copyTargetSelect.value === 'next') {
        return getNextWeekStart();
      }
      return userWeekStart;
    }

    function updateCopyLabels() {
      if (!copyTargetSelect) return;
      const currentOption = copyTargetSelect.querySelector('option[value="current"]');
      const nextOption = copyTargetSelect.querySelector('option[value="next"]');
      if (currentOption) currentOption.textContent = `Semana actual · ${safeWeekLabel(userWeekStart)}`;
      if (nextOption) nextOption.textContent = `Semana siguiente · ${safeWeekLabel(getNextWeekStart())}`;
      if (copySourceHint) {
        copySourceHint.textContent = `Por defecto: ${safeWeekLabel(getDefaultSourceWeekStart())}`;
      }
      if (copyTargetHint) {
        copyTargetHint.textContent = `Periodo visible: ${safeWeekLabel(userWeekStart)}`;
      }
    }

    function updateCopySummary() {
      if (!copySummary) return;
      const sourceStart = getCopySourceWeekStart();
      const targetStart = getCopyTargetWeekStart();
      const replaceMode = copyReplaceInput ? copyReplaceInput.checked !== false : true;
      const modeLabel = replaceMode ? 'reemplazando horarios existentes' : 'añadiendo a la semana destino';
      copySummary.textContent = `Semana origen: ${safeWeekLabel(sourceStart)} → Semana destino: ${safeWeekLabel(targetStart)} (${modeLabel}).`;
    }

    function resetCopyModalState() {
      if (copyError) {
        copyError.textContent = '';
        copyError.classList.add('d-none');
      }
    }

    function setCopyModalDefaults() {
      if (copySourceInput) {
        copySourceInput.value = getDefaultSourceWeekStart();
      }
      if (copyTargetSelect) {
        copyTargetSelect.value = 'current';
      }
      if (copyReplaceInput) {
        copyReplaceInput.checked = true;
      }
      resetCopyModalState();
      updateCopyLabels();
      updateCopySummary();
    }

    function updateHoursBadge(type, value) {
      const badges = document.querySelectorAll(`.schedule-hours-badge[data-badge-type="${type}"]`);
      badges.forEach(el => {
        const label = el.dataset.label ? ` ${el.dataset.label}` : '';
        const parsed = Number(value) || 0;
        el.textContent = `${hoursFormatter.format(Math.max(parsed, 0))}${label}`;
      });
    }

    function renderAssignments(assignments) {
      latestAssignments = assignments || [];
      const map = new Map();
      latestAssignments.forEach(slot => {
        const key = `${slot.slot_date}_${slot.slot_time}`;
        map.set(key, slot);
      });
      allScheduleCells().forEach(cell => {
        const key = `${cell.dataset.day}_${cell.dataset.time}`;
        const slot = map.get(key);
        cell.classList.remove(CLASS_BOOK, CLASS_UNBOOK, CLASS_BLOCKED, CLASS_SELECTED);
        cell.dataset.active = 'false';
        cell.dataset.status = slot?.status || '';
        cell.dataset.statusLabel = '';
        cell.setAttribute('aria-pressed', 'false');
        if (slot) {
          const status = normalizeStatus(slot.status);
          if (status === 'book') {
            cell.classList.add(CLASS_BOOK);
            cell.dataset.active = 'true';
            cell.dataset.statusLabel = 'BOOK';
          } else if (status === 'unbook') {
            cell.classList.add(CLASS_UNBOOK);
            cell.dataset.statusLabel = 'UNB';
          } else if (status === 'blocked') {
            cell.classList.add(CLASS_BLOCKED);
            cell.dataset.statusLabel = 'BLOQ';
          }
        } else {
          cell.dataset.statusLabel = '';
        }
      });
      applyForecastToCells();
      clearSelection();
      updateDayTotals();
      updateForecastBadges();
      if (exportModalEl && exportModalEl.classList.contains('show')) {
        updateExportPreview();
      }
    }

    async function loadWeek(targetStart = userWeekStart) {
      try {
        userScheduleBoard.classList.add('is-loading');
        const params = new URLSearchParams({ start: targetStart });
        if (Number.isFinite(riderId) && riderId > 0) {
          params.set('rider_id', String(riderId));
        }
        const response = await fetch(`{{ url('/admin/api/schedule/board') }}?${params.toString()}`, {
          headers: { Accept: 'application/json' }
        });
        if (!response.ok) throw new Error('No se pudo cargar la planificación.');
        const data = await response.json();
        userWeekStart = data.week?.start || targetStart;
        userScheduleBoard.dataset.weekStart = userWeekStart;
        hydrateForecast(data.forecast || null);
        updateCopyLabels();
        updateCopySummary();
        updateWeekColumns(userWeekStart);
        if (viewMode === 'day') {
          const expectedWeek = isoDate(startOfWeek(parseDate(currentDay)));
          if (expectedWeek !== userWeekStart) currentDay = userWeekStart;
          updateDayCells();
        }
        const assignments = (data.assignments || []).filter(slot => Number(slot.rider_id) === Number(riderId));
        renderAssignments(assignments);
        const weekLabelText = buildWeekLabel(userWeekStart);
        if (manualWeekLabel) manualWeekLabel.textContent = weekLabelText;
        if (manualToggleBtn) {
          manualToggleBtn.dataset.week = userWeekStart;
          manualToggleBtn.dataset.weekLabel = weekLabelText;
          manualToggleBtn.dataset.manualWeekLabel = weekLabelText;
        }
        const manualWeekHours = assignments.filter(slot => normalizeStatus(slot.status) === 'book').length * 0.5;
        updateHoursBadge('manual-week', manualWeekHours);
        updateHoursBadge('forecast-week', computeForecastMineHours());
        if (viewMode === 'day') {
          updateDayView(false);
        } else {
          updatePeriodLabel();
        }
        if (historyModalEl && historyModalEl.classList.contains('show')) {
          await loadHistory();
        } else {
          historyLoaded = false;
        }
      } catch (error) {
        console.error(error);
        toast(error.message || 'Error cargando planificación', 'error');
      } finally {
        userScheduleBoard.classList.remove('is-loading');
      }
    }

    async function loadMonth(targetMonth = currentMonth) {
      try {
        userScheduleBoard.classList.add('is-loading');
        const url = new URL(`{{ url('/admin/api/users') }}/${riderId}/calendar-hours`, window.location.origin);
        url.searchParams.set('month', targetMonth);
        url.searchParams.set('target_per_week', '40');
        const res = await fetch(url, { headers: { Accept: 'application/json' } });
        if (!res.ok) throw new Error('No se pudo cargar el calendario mensual.');
        const data = await res.json();
        currentMonth = targetMonth;
        renderMonth(data, currentMonth);
        updatePeriodLabel();
      } catch (error) {
        console.error(error);
        toast(error.message || 'Error cargando el mes', 'error');
      } finally {
        userScheduleBoard.classList.remove('is-loading');
      }
    }

    function renderMonth(data, monthStr) {
      if (!monthBody) return;
      monthBody.innerHTML = '';
      const monthDate = monthStartFromStr(monthStr);
      if (monthLabel) monthLabel.textContent = capitalize(monthDate.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' }));
      if (monthSubtitle) monthSubtitle.textContent = 'Horas asignadas por día';
      if (monthMeta) {
        const totalHours = (data.days || []).reduce((acc, day) => acc + Number(day.hours || 0), 0);
        monthMeta.textContent = `Total ${formatHoursLabel(totalHours)}`;
      }

      const start = startOfWeek(monthDate);
      const dayMap = new Map();
      (data.days || []).forEach(day => dayMap.set(day.date, day));

      for (let i = 0; i < 42; i++) {
        const cellDate = addDays(start, i);
        const iso = isoDate(cellDate);
        const isCurrentMonth = cellDate.getMonth() === monthDate.getMonth();
        const cell = document.createElement('div');
        cell.className = 'user-schedule-month-cell';
        if (!isCurrentMonth) cell.classList.add('is-muted');

        const dayData = dayMap.get(iso);
        if (dayData) {
          const status = normalizeStatus(dayData.status || dayData.bucket);
          if (status === 'blocked') cell.classList.add('is-blocked');
          else if (status === 'unbook') cell.classList.add('is-unbook');
          else if (status === 'book') cell.classList.add('is-book');
        }

        cell.innerHTML = `<div class="user-schedule-month-cell__date">${cellDate.getDate()}</div>`;
        const hours = Number(dayData?.hours || 0);
        cell.innerHTML += `<div class="user-schedule-month-cell__hours">${formatHoursLabel(hours)}</div>`;
        if (dayData) {
          const stats = [];
          if (dayData.no_show_pct !== undefined) stats.push(`No show ${Number(dayData.no_show_pct).toFixed(1)}%`);
          if (dayData.ineligible_pct !== undefined) stats.push(`Ineligible ${Number(dayData.ineligible_pct).toFixed(1)}%`);
          if (stats.length) cell.innerHTML += `<div class="user-schedule-month-cell__meta">${stats.join(' · ')}</div>`;
        }

        if (isCurrentMonth) {
          cell.addEventListener('click', () => {
            currentDay = iso;
            setView('day');
            const neededWeek = isoDate(startOfWeek(cellDate));
          if (neededWeek !== userWeekStart) {
              loadWeek(neededWeek);
            } else {
              updateDayView(true);
            }
          });
        }

        monthBody.appendChild(cell);
      }
    }

    function updateDayView(refreshAssignments = true) {
      updateDayCells();
      const dayDate = parseDate(currentDay);
      if (dayTitle) dayTitle.textContent = capitalize(dayDate.toLocaleDateString('es-ES', { weekday: 'long', day: 'numeric' }));
      if (daySubtitle) daySubtitle.textContent = capitalize(dayDate.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' }));
      if (refreshAssignments) renderAssignments(latestAssignments);
      updateDayTotals();
      updatePeriodLabel();
      syncForecastSummarySelection(currentDay);
    }

    function changePeriod(step) {
      if (viewMode === 'week') {
        const target = isoDate(addDays(userWeekStart, step * 7));
        loadWeek(target);
      } else if (viewMode === 'day') {
        const target = isoDate(addDays(currentDay, step));
        currentDay = target;
        const expectedWeek = isoDate(startOfWeek(parseDate(currentDay)));
        if (expectedWeek !== userWeekStart) {
          loadWeek(expectedWeek);
        } else {
          updateDayView(true);
        }
      } else {
        currentMonth = shiftMonth(currentMonth, step);
        loadMonth(currentMonth);
      }
    }

    function setView(mode, force = false) {
      if (!force && viewMode === mode) return;
      viewMode = mode;
      userScheduleBoard.dataset.view = mode;
      viewButtons.forEach(btn => {
        const active = btn.dataset.userScheduleView === mode;
        btn.classList.toggle('btn-active', active);
      });
      if (weekView) weekView.classList.toggle('d-none', mode !== 'week');
      if (dayView) dayView.classList.toggle('d-none', mode !== 'day');
      if (monthView) monthView.classList.toggle('d-none', mode !== 'month');
      clearSelection();
      if (mode === 'day') {
        if (!currentDay) currentDay = userWeekStart;
        updateDayView(true);
      } else if (mode === 'week') {
        updatePeriodLabel();
        syncForecastSummarySelection(userWeekStart);
      } else {
        loadMonth(currentMonth);
      }
    }

    viewButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        const mode = btn.dataset.userScheduleView;
        setView(mode);
      });
    });

    prevBtn?.addEventListener('click', () => changePeriod(-1));
    nextBtn?.addEventListener('click', () => changePeriod(1));
    forecastSummaryDay?.addEventListener('change', () => {
      updateForecastSummaryTable(forecastSummaryDay.value);
    });
    document.addEventListener('click', event => {
      const trigger = event.target.closest('.forecast-summary-trigger');
      if (trigger) {
        event.preventDefault();
        const targetDay = trigger.dataset.forecastDay;
        openForecastSummary(targetDay || currentDay);
      }
    });
    forecastLegendButton?.addEventListener('click', () => {
      forecastLegendModal?.show();
    });

    updateCopyLabels();
    updateCopySummary();
    attachCellListeners();
    setView(viewMode, true);
    loadWeek(userWeekStart);
  }
  // Contratos
  const contractsBaseUrl = @json(url('/admin/api/users/'.$user->id.'/contracts'));
  const contractElements = {
    history: document.getElementById('contract_history'),
    summary: document.getElementById('contract_current_summary'),
    hours: document.getElementById('contract_hours'),
    from: document.getElementById('contract_from'),
    until: document.getElementById('contract_until'),
    untilGroup: document.getElementById('contract_until_group'),
    notes: document.getElementById('contract_notes'),
    closePrevious: document.getElementById('contract_close_previous'),
    closePreviousWrapper: document.getElementById('contract_close_previous_wrapper'),
    submit: document.getElementById('contract_submit'),
    cancel: document.getElementById('contract_cancel_edit'),
    status: document.getElementById('contract_form_status'),
    id: document.getElementById('contract_id'),
    form: document.getElementById('contractForm'),
  };
  const contractState = {
    cache: [],
    mode: 'create',
    editingId: null,
  };

  function setContractStatus(message = '', tone = 'muted') {
    if (!contractElements.status) return;
    contractElements.status.textContent = message || '';
    contractElements.status.classList.remove('text-danger', 'text-success', 'text-muted');
    contractElements.status.classList.add(message ? `text-${tone}` : 'text-muted');
  }

  function updateContractSummary(rows) {
    if (!contractElements.summary) return;
    if (!rows.length) {
      contractElements.summary.innerHTML = '<span class="text-muted small">No hay un contrato vigente. Registra uno nuevo para fijar las horas pactadas.</span>';
      return;
    }
    const current = rows.find(r => !r.effective_to) || rows[0];
    const hours = Number(current.hours || 0).toFixed(1);
    const from = current.effective_from || '—';
    const to = current.effective_to ? ` hasta ${current.effective_to}` : '';
    const notes = current.notes ? `<span class="badge bg-label-info">${escapeHtml(current.notes)}</span>` : '<span class="text-muted small">Sin notas registradas.</span>';
    const badge = current.effective_to ? '<span class="badge bg-label-secondary">Histórico</span>' : '<span class="badge bg-label-success">Vigente</span>';
    contractElements.summary.innerHTML = `
      <div class="d-flex flex-column flex-lg-row align-items-lg-center gap-2">
        <div class="d-flex align-items-center gap-2">
          ${badge}
          <span class="fw-semibold">${hours} h / semana</span>
        </div>
        <span class="text-muted small">Desde ${from}${to}</span>
        ${notes}
      </div>
    `;
  }

  function renderContracts(rows) {
    const wrap = contractElements.history;
    if (!wrap) return;
    wrap.innerHTML = '';
    if (!rows.length) {
      wrap.innerHTML = '<div class="contract-history-empty">Sin registros</div>';
    } else {
      rows.forEach(r => {
        const item = document.createElement('div');
        item.className = 'contract-history-item';
        const from = r.effective_from || '—';
        const to = r.effective_to || 'Actual';
        const hours = Number(r.hours || 0).toFixed(1);
        const notes = r.notes ? escapeHtml(r.notes) : 'Sin notas';
        const currentBadge = r.effective_to ? '<span class="badge bg-label-secondary">Histórico</span>' : '<span class="badge bg-label-success">Vigente</span>';
        item.innerHTML = `
          <div class="d-flex justify-content-between align-items-start gap-3">
            <div>
              <div class="d-flex align-items-center gap-2">
                <span class="fw-semibold">${from} &rarr; ${to}</span>
                ${currentBadge}
              </div>
              <div class="small text-muted">${hours} h · ${notes}</div>
            </div>
            <div class="d-flex gap-2">
              <button type="button" class="btn btn-sm btn-outline-primary contract-edit-btn" data-contract-id="${r.id}">
                <i class="ti tabler-edit me-1"></i>Editar
              </button>
            </div>
          </div>
        `;
        wrap.appendChild(item);
      });
    }
    updateContractSummary(rows);
    if (contractState.mode === 'edit') {
      const stillExists = rows.some(r => String(r.id) === String(contractState.editingId));
      if (!stillExists) {
        resetContractForm();
      }
    }
  }

  async function loadContracts() {
    const wrap = contractElements.history;
    if (!wrap) return;
    wrap.innerHTML = '<div class="contract-history-empty">Cargando...</div>';
    try {
      const res = await fetch(contractsBaseUrl, { headers: { Accept: 'application/json' } });
      if (!res.ok) throw new Error('Error');
      const j = await res.json();
      const rows = Array.isArray(j.data) ? j.data : [];
      contractState.cache = rows;
      renderContracts(rows);
    } catch (error) {
      wrap.innerHTML = '<div class="contract-history-empty text-danger">No se pudo cargar el historial.</div>';
      if (contractElements.summary) {
        contractElements.summary.innerHTML = '<span class="text-danger small">No se pudo cargar el contrato vigente.</span>';
      }
    }
  }

  function resetContractForm() {
    contractState.mode = 'create';
    contractState.editingId = null;
    if (contractElements.id) contractElements.id.value = '';
    if (contractElements.hours) {
      contractElements.hours.value = contractElements.hours.defaultValue || '';
    }
    if (contractElements.from) {
      contractElements.from.value = contractElements.from.defaultValue || new Date().toISOString().slice(0, 10);
    }
    if (contractElements.until) {
      contractElements.until.value = '';
    }
    contractElements.untilGroup?.classList.add('d-none');
    contractElements.closePreviousWrapper?.classList.remove('d-none');
    if (contractElements.closePrevious) {
      contractElements.closePrevious.checked = true;
    }
    if (contractElements.notes) {
      contractElements.notes.value = '';
    }
    if (contractElements.submit) {
      contractElements.submit.disabled = false;
      contractElements.submit.innerHTML = '<i class="ti tabler-device-floppy me-1"></i>Guardar contrato';
    }
    contractElements.cancel?.classList.add('d-none');
    setContractStatus('');
  }

  function enterContractEditMode(contractId) {
    const contract = contractState.cache.find(r => String(r.id) === String(contractId));
    if (!contract) return;
    contractState.mode = 'edit';
    contractState.editingId = contract.id;
    if (contractElements.id) contractElements.id.value = contract.id;
    if (contractElements.hours) {
      contractElements.hours.value = Number(contract.hours || 0).toFixed(1);
    }
    if (contractElements.from && contract.effective_from) {
      contractElements.from.value = contract.effective_from;
    }
    if (contractElements.until) {
      contractElements.until.value = contract.effective_to || '';
    }
    contractElements.untilGroup?.classList.remove('d-none');
    contractElements.closePreviousWrapper?.classList.add('d-none');
    if (contractElements.notes) {
      contractElements.notes.value = contract.notes || '';
    }
    if (contractElements.submit) {
      contractElements.submit.disabled = false;
      contractElements.submit.innerHTML = '<i class="ti tabler-device-floppy me-1"></i>Actualizar contrato';
    }
    contractElements.cancel?.classList.remove('d-none');
    setContractStatus(`Editando el contrato vigente desde ${contract.effective_from || '—'}`, 'info');
  }

  loadContracts();

  contractElements.history?.addEventListener('click', event => {
    const btn = event.target.closest('.contract-edit-btn');
    if (!btn) return;
    enterContractEditMode(btn.dataset.contractId);
  });

  contractElements.cancel?.addEventListener('click', () => {
    resetContractForm();
  });

  contractElements.submit?.addEventListener('click', async function () {
    if (!contractElements.hours || !contractElements.from) return;
    const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    const hoursValue = Number(contractElements.hours.value);
    const fromValue = contractElements.from.value;
    const notesValue = contractElements.notes?.value.trim() || '';
    const untilValue = contractElements.until?.value || '';
    const closePrevious = contractElements.closePrevious?.checked ?? true;

    if (!Number.isFinite(hoursValue)) {
      setContractStatus('Introduce un número válido de horas.', 'danger');
      return;
    }
    if (!fromValue) {
      setContractStatus('Selecciona una fecha de inicio válida.', 'danger');
      return;
    }

    const payload = {
      hours: hoursValue,
      effective_from: fromValue,
      notes: notesValue || null,
    };

    let url = contractsBaseUrl;
    let method = 'POST';

    if (contractState.mode === 'edit' && contractState.editingId) {
      url = `${contractsBaseUrl}/${contractState.editingId}`;
      method = 'PATCH';
      payload.effective_to = untilValue || null;
    } else {
      payload.close_previous = closePrevious;
    }

    if (contractElements.submit) {
      contractElements.submit.disabled = true;
      contractElements.submit.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Guardando...';
    }
    setContractStatus('Guardando cambios...', 'info');

    try {
      const res = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': csrf,
          Accept: 'application/json',
        },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        const message = data?.message || 'No se pudo guardar el contrato.';
        throw new Error(message);
      }
      resetContractForm();
      await loadContracts();
      toast(data?.message || 'Contrato guardado correctamente.');
    } catch (error) {
      setContractStatus(error.message || 'Error al guardar el contrato.', 'danger');
    } finally {
      if (contractState.mode !== 'edit') {
        resetContractForm();
      }
      if (contractElements.submit) {
        contractElements.submit.disabled = false;
        contractElements.submit.innerHTML = contractState.mode === 'edit'
          ? '<i class="ti tabler-device-floppy me-1"></i>Actualizar contrato'
          : '<i class="ti tabler-device-floppy me-1"></i>Guardar contrato';
      }
    }
  });

  // Monedero
  const walletSummaryUrl = @json(url('/admin/api/users/'.$user->id.'/wallet'));
  const walletTransactionUrl = @json(url('/admin/api/users/'.$user->id.'/wallet/transactions'));
  const walletElements = {
    balance: document.getElementById('wallet_balance_value'),
    currencyBadge: document.getElementById('wallet_currency_badge'),
    lastMovement: document.getElementById('wallet_last_movement'),
    loadMoreBtn: document.getElementById('wallet_load_more_btn'),
    refreshBtn: document.getElementById('wallet_refresh_btn'),
    errorAlert: document.getElementById('wallet_error_alert'),
    successAlert: document.getElementById('wallet_success_alert'),
    tableBody: document.getElementById('wallet_transactions_body'),
    limitLabel: document.getElementById('wallet_limit_label'),
    lastUpdatedBadge: document.getElementById('wallet_last_updated_badge'),
    form: document.getElementById('wallet_transaction_form'),
    submitBtn: document.getElementById('wallet_submit_btn'),
    submitSpinner: document.querySelector('#wallet_submit_btn .spinner-border'),
    submitLabel: document.querySelector('#wallet_submit_btn .default-label'),
    amountInput: document.getElementById('wallet_amount'),
    descriptionInput: document.getElementById('wallet_description'),
    referenceInput: document.getElementById('wallet_reference'),
    formStatus: document.getElementById('wallet_form_status'),
    currencyPrefix: document.getElementById('wallet_currency_prefix'),
  };
  const walletNumberFormatter = new Intl.NumberFormat('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const walletState = {
    limit: 20,
    loading: false,
    loaded: false,
  };
  if (walletElements.loadMoreBtn) walletElements.loadMoreBtn.disabled = true;

  function showWalletMessage(type = null, message = '') {
    if (walletElements.errorAlert) {
      walletElements.errorAlert.classList.add('d-none');
      walletElements.errorAlert.textContent = '';
    }
    if (walletElements.successAlert) {
      walletElements.successAlert.classList.add('d-none');
      walletElements.successAlert.textContent = '';
    }
    if (!type || !message) return;
    if (type === 'error' && walletElements.errorAlert) {
      walletElements.errorAlert.textContent = message;
      walletElements.errorAlert.classList.remove('d-none');
    } else if (type === 'success' && walletElements.successAlert) {
      walletElements.successAlert.textContent = message;
      walletElements.successAlert.classList.remove('d-none');
      setTimeout(() => {
        walletElements.successAlert?.classList.add('d-none');
      }, 4000);
    }
  }

  function setWalletLoading(isLoading) {
    walletState.loading = isLoading;
    if (walletElements.refreshBtn) walletElements.refreshBtn.disabled = isLoading;
    if (walletElements.loadMoreBtn && isLoading) walletElements.loadMoreBtn.disabled = true;
  }

  function setWalletFormBusy(isBusy) {
    if (!walletElements.submitBtn) return;
    walletElements.submitBtn.disabled = isBusy;
    walletElements.submitSpinner?.classList.toggle('d-none', !isBusy);
    walletElements.submitLabel?.classList.toggle('d-none', isBusy);
    if (walletElements.formStatus && isBusy) {
      walletElements.formStatus.textContent = 'Registrando movimiento…';
    }
  }

  function resetWalletForm() {
    if (!walletElements.form) return;
    if (walletElements.amountInput) walletElements.amountInput.value = '';
    if (walletElements.descriptionInput) walletElements.descriptionInput.value = '';
    if (walletElements.referenceInput) walletElements.referenceInput.value = '';
    document.getElementById('wallet_type_credit')?.click();
  }

  async function loadWallet(force = false) {
    if (!walletElements.balance) return;
    if (walletState.loading) return;
    if (!force && walletState.loaded) return;

    setWalletLoading(true);
    showWalletMessage();

    if (walletElements.tableBody) {
      walletElements.tableBody.innerHTML = '<tr><td colspan="6" class="text-center p-3 text-muted">Cargando movimientos…</td></tr>';
    }

    try {
      const url = new URL(walletSummaryUrl);
      url.searchParams.set('limit', walletState.limit);
      const response = await fetch(url.toString(), { headers: { 'Accept': 'application/json' } });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok) {
        const err = payload?.message || 'No se pudo obtener el monedero del rider.';
        throw new Error(err);
      }

      const data = payload?.data || {};
      const currency = data.currency || 'EUR';
      const transactions = Array.isArray(data.transactions) ? data.transactions : [];

      walletElements.balance.textContent = data.balance_formatted ?? walletNumberFormatter.format(Number(data.balance || 0));
      walletElements.currencyBadge.textContent = currency;
      if (walletElements.currencyPrefix) {
        walletElements.currencyPrefix.textContent = currency === 'EUR' ? '€' : currency;
      }
      if (walletElements.limitLabel) {
        walletElements.limitLabel.textContent = walletState.limit;
      }
      if (walletElements.lastUpdatedBadge) {
        walletElements.lastUpdatedBadge.textContent = `Actualizado ${new Date().toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' })}`;
      }

      if (walletElements.lastMovement) {
        if (transactions.length) {
          const tx = transactions[0];
          const dateLabel = tx.created_at_label || tx.created_at || '—';
          const prefixSign = tx.type === 'credit' ? '+' : '-';
          const description = tx.description || (tx.type === 'credit' ? 'Ingreso a monedero' : 'Cargo en monedero');
          walletElements.lastMovement.textContent = `${dateLabel} · ${prefixSign}${walletNumberFormatter.format(Number(tx.amount || 0))} ${currency} · ${description}`;
        } else {
          walletElements.lastMovement.textContent = 'Sin registros';
        }
      }

      if (walletElements.tableBody) {
        walletElements.tableBody.innerHTML = '';
        if (!transactions.length) {
          walletElements.tableBody.innerHTML = '<tr><td colspan="6" class="text-center p-3 text-muted">No se registran movimientos en el monedero.</td></tr>';
        } else {
          transactions.forEach((tx) => {
            const amountValue = walletNumberFormatter.format(Number(tx.amount || 0));
            const balanceAfterValue = walletNumberFormatter.format(Number(tx.balance_after || 0));
            const amountPrefix = tx.type === 'credit' ? '+' : '-';
            const amountClass = tx.type === 'credit' ? 'wallet-amount-credit' : 'wallet-amount-debit';
            const typeLabel = tx.type === 'credit' ? 'Ingreso' : 'Cargo';
            const typeBadgeClass = tx.type === 'credit' ? 'bg-label-success' : 'bg-label-danger';
            const description = tx.description || (tx.type === 'credit' ? 'Ingreso a monedero' : 'Cargo en monedero');
            const authorName = tx.author?.name ? escapeHtml(tx.author.name) : null;
            const authorEmail = tx.author?.email ? escapeHtml(tx.author.email) : null;
            const authorHtml = authorName
              ? (authorEmail && authorEmail !== authorName
                  ? `${authorName}<div class="text-muted small">${authorEmail}</div>`
                  : authorName)
              : (authorEmail || '—');

            const row = document.createElement('tr');
            row.innerHTML = `
              <td>${escapeHtml(tx.created_at_label || tx.created_at || '—')}</td>
              <td><span class="badge ${typeBadgeClass}">${typeLabel}</span></td>
              <td class="text-end"><span class="${amountClass}">${escapeHtml(`${amountPrefix}${amountValue}`)}</span> ${escapeHtml(currency)}</td>
              <td class="text-end">${escapeHtml(`${balanceAfterValue} ${currency}`)}</td>
              <td class="wallet-transaction-desc">${escapeHtml(description)}</td>
              <td>${authorHtml}</td>`;
            walletElements.tableBody.appendChild(row);
          });
        }
      }

      walletState.loaded = true;
      if (walletElements.loadMoreBtn) {
        walletElements.loadMoreBtn.disabled = transactions.length < walletState.limit;
      }
    } catch (error) {
      showWalletMessage('error', error.message || 'No se pudo cargar el monedero.');
      if (walletElements.tableBody) {
        walletElements.tableBody.innerHTML = '<tr><td colspan="6" class="text-center p-3 text-danger">Error al cargar el monedero.</td></tr>';
      }
      if (walletElements.loadMoreBtn) walletElements.loadMoreBtn.disabled = true;
    } finally {
      setWalletLoading(false);
    }
  }

  walletElements.loadMoreBtn?.addEventListener('click', () => {
    if (walletState.loading) return;
    walletState.limit += 20;
    walletState.loaded = false;
    loadWallet(true);
  });

  walletElements.refreshBtn?.addEventListener('click', () => {
    if (walletState.loading) return;
    walletState.loaded = false;
    loadWallet(true);
  });

  walletElements.form?.addEventListener('submit', async (event) => {
    event.preventDefault();
    if (!walletElements.amountInput) return;

    const amount = Number(walletElements.amountInput.value);
    if (!Number.isFinite(amount) || amount <= 0) {
      showWalletMessage('error', 'Indica un importe válido mayor a 0.');
      return;
    }

    const type = document.querySelector('input[name="wallet_type"]:checked')?.value || 'credit';
    const description = walletElements.descriptionInput?.value?.trim();
    const reference = walletElements.referenceInput?.value?.trim();
    const token = csrfToken || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (!token) {
      showWalletMessage('error', 'No se pudo obtener el token CSRF para registrar el movimiento.');
      return;
    }

    setWalletFormBusy(true);
    showWalletMessage();

    try {
      const response = await fetch(walletTransactionUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': token,
        },
        body: JSON.stringify({
          amount,
          type,
          description: description || null,
          reference: reference || null,
        }),
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok) {
        const err = payload?.message || 'No se pudo registrar el movimiento en el monedero.';
        throw new Error(err);
      }
      showWalletMessage('success', 'Movimiento registrado correctamente.');
      resetWalletForm();
      walletState.loaded = false;
      await loadWallet(true);
      if (walletElements.formStatus) {
        walletElements.formStatus.textContent = 'Movimiento registrado correctamente.';
        setTimeout(() => {
          if (walletElements.formStatus) walletElements.formStatus.textContent = '';
        }, 4000);
      }
    } catch (error) {
      showWalletMessage('error', error.message || 'No se pudo registrar el movimiento.');
    } finally {
      setWalletFormBusy(false);
    }
  });

  // Métricas
  let umPage = 1;
  let umTotalPages = 1;
  let umSelectedKey = null;
  async function loadUserMetrics(){
    const uid = {{ $user->id }};
    const url = new URL(`{{ url('/admin/api/users') }}/${uid}/metrics`, window.location.origin);
    const f = document.getElementById('um_from').value;
    const t = document.getElementById('um_to').value;
    const g = document.getElementById('um_group')?.value || 'week';
    const trSel = document.getElementById('um_transport')?.value || '';
    if (g) url.searchParams.set('group', g);
    if (f && t) { url.searchParams.set('from', f); url.searchParams.set('to', t); }
    if (trSel) url.searchParams.set('transport', trSel);
    url.searchParams.set('page', String(umPage));
    const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
    const j = await res.json().catch(()=>({data:[]}));
    const tbody = document.getElementById('um_body');
    tbody.innerHTML = '';
    const rows = (j.data||[]);
    const summary = j.summary || {};
    const metaGroup = (j.meta && j.meta.group) ? j.meta.group : (g || 'day');
    let sumOrders=0, sumHours=0, sumCdt=0, sumCash=0, sumIneligible=0, sumAllowance=0; let count=0;
    rows.forEach(r=>{
      const period = r.period_label || r.period || '--';
      const weekday = r.weekday ? weekdayName(r.weekday) : (r.weekday_label || '--');
      const hours = Number(r.hours)||0;
      const eff = Number(r.efficiency)||0;
      const canc = Number(r.cancelled_pct)||0;
      const reas = Number(r.reassigned_pct)||0;
      const nos = Number(r.no_show_pct)||0;
      const inel = Number(r.ineligible_pct)||0;
      const cdt = Number(r.cdt_minutes)||0;
      const allowance = Number(r.vehicle_allowance)||0;
      const cash = Number(r.cash)||0;
      sumOrders += Number(r.orders)||0;
      sumHours += hours;
      sumCdt += cdt;
      sumCash += cash;
      sumIneligible += inel;
      sumAllowance += allowance;
      count += 1;
      const tr = document.createElement('tr');
      tr.dataset.key = r.key || `${period}-${weekday}`;
      tr.innerHTML = `
        <td>${period}</td>
        <td class="text-center">${weekday}</td>
        <td class="text-center">${r.orders ?? '--'}</td>
        <td class="text-center">${r.hours ? formatHours(r.hours) : '--'}</td>
        <td class="text-center">${fmtMinSec(r.no_show_minutes)}</td>
        <td class="text-center">${efficiencyPill(eff)}</td>
        <td class="text-center">${cancelPill(canc)}</td>
        <td class="text-center">${reassignPill(reas)}</td>
        <td class="text-center">${noShowPill(nos)}</td>
        <td class="text-center">${noShowPill(inel)}</td>
        <td class="text-center">${fmtMinSec(cdt)}</td>
        <td class="text-center">${fmtCash(allowance)}</td>
        <td class="text-center">${fmtCash(cash)}</td>`;
      tbody.appendChild(tr);
    });
    if (!rows.length) {
      tbody.innerHTML = '<tr><td colspan="13" class="text-center p-3 text-muted">Sin información disponible para el periodo seleccionado.</td></tr>';
    }
    const fOrders = document.getElementById('um_kpi_orders');
    const fHours = document.getElementById('um_kpi_hours');
    const fRatio = document.getElementById('um_kpi_ratio');
    const fCdt = document.getElementById('um_kpi_cdt');
    const fIneligible = document.getElementById('um_kpi_ineligible');
    const fCash = document.getElementById('um_kpi_cash');
    const fAllowance = document.getElementById('um_kpi_vehicle_allowance');
    const numberFmt = new Intl.NumberFormat('es-ES');

    const summaryOrders = Number(summary.orders);
    if (Number.isFinite(summaryOrders)) {
      fOrders.textContent = numberFmt.format(Math.round(summaryOrders));
    } else if (rows.length) {
      fOrders.textContent = numberFmt.format(Math.round(sumOrders));
    } else {
      fOrders.textContent = '--';
    }

    const summaryHours = Number(summary.hours);
    if (Number.isFinite(summaryHours)) {
      fHours.textContent = formatHours(summaryHours);
    } else if (rows.length) {
      fHours.textContent = formatHours(sumHours);
    } else {
      fHours.textContent = '--';
    }

    const summaryRatio = Number(summary.ratio);
    if (Number.isFinite(summaryRatio)) {
      fRatio.textContent = summaryRatio.toFixed(2);
    } else if (rows.length && sumHours > 0) {
      fRatio.textContent = (sumOrders / sumHours).toFixed(2);
    } else {
      fRatio.textContent = '--';
    }

    const summaryCdt = Number(summary.avg_cdt);
    if (Number.isFinite(summaryCdt)) {
      fCdt.textContent = fmtMinSec(summaryCdt);
    } else if (rows.length) {
      fCdt.textContent = fmtMinSec(sumCdt / rows.length);
    } else {
      fCdt.textContent = '--';
    }

    const summaryIneligible = Number(summary.avg_ineligible);
    if (Number.isFinite(summaryIneligible)) {
      fIneligible.textContent = `${summaryIneligible.toFixed(1)}%`;
    } else if (rows.length) {
      fIneligible.textContent = `${(sumIneligible / rows.length).toFixed(1)}%`;
    } else {
      fIneligible.textContent = '--';
    }

    const summaryCash = Number(summary.cash);
    if (Number.isFinite(summaryCash)) {
      fCash.textContent = fmtCash(summaryCash);
    } else if (rows.length) {
      fCash.textContent = fmtCash(sumCash);
    } else {
      fCash.textContent = fmtCash(null);
    }

    const summaryAllowance = Number(summary.vehicle_allowance);
    if (Number.isFinite(summaryAllowance)) {
      fAllowance.textContent = fmtCash(summaryAllowance);
    } else if (rows.length) {
      fAllowance.textContent = fmtCash(sumAllowance);
    } else {
      fAllowance.textContent = fmtCash(null);
    }

    umTotalPages = j.meta?.pagination?.last_page || j.meta?.total_pages || j.last_page || 1;
    const currentPage = j.meta?.pagination?.current_page || j.meta?.page || j.current_page || umPage;
    umPage = currentPage;
    document.getElementById('um_prev').toggleAttribute('disabled', currentPage <= 1);
    document.getElementById('um_next').toggleAttribute('disabled', currentPage >= umTotalPages);
    const totalRecords = j.meta?.pagination?.total ?? j.meta?.total ?? null;
    document.getElementById('um_pagination_info').textContent = `Página ${currentPage} de ${umTotalPages}` + (totalRecords !== null ? ` · ${totalRecords} registros` : '');
  }
  document.getElementById('um_apply')?.addEventListener('click', function(){ umPage = 1; loadUserMetrics(); });
  document.getElementById('um_reset')?.addEventListener('click', function(){
    const gSel = document.getElementById('um_group');
    const tSel = document.getElementById('um_transport');
    document.getElementById('um_from').value = '';
    document.getElementById('um_to').value = '';
    if (gSel) gSel.value = 'day';
    if (tSel) tSel.value = '';
    umPage = 1; loadUserMetrics();
  });
  document.getElementById('um_prev')?.addEventListener('click', function(){ if (umPage > 1) { umPage -= 1; loadUserMetrics(); } });
  document.getElementById('um_next')?.addEventListener('click', function(){ if (umPage < umTotalPages) { umPage += 1; loadUserMetrics(); } });
  const metricsTable = document.querySelector('#pane-metrics table');
  metricsTable?.addEventListener('click', function(e){
    const tr = e.target.closest('tbody tr');
    if (!tr || !metricsTable.contains(tr)) return;
    metricsTable.querySelectorAll('tbody tr.table-active').forEach(r => r.classList.remove('table-active'));
    tr.classList.add('table-active');
    umSelectedKey = tr.dataset.key || null;
  });
  const wrap = document.querySelector('#pane-metrics .table-responsive');
  document.getElementById('um_scroll_left')?.addEventListener('click', function(){ wrap?.scrollBy({ left: -360, behavior: 'smooth' }); });
  document.getElementById('um_scroll_right')?.addEventListener('click', function(){ wrap?.scrollBy({ left: 360, behavior: 'smooth' }); });
  (async function(){
    try{
      const url = new URL(`{{ url('/admin/api/metrics/transports') }}`, window.location.origin);
      const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
      const j = await res.json();
      const sel = document.getElementById('um_transport');
      sel.innerHTML = '<option value="">Todos</option>';
      (j.data||[]).forEach(v => { const o = document.createElement('option'); o.value=v; o.textContent=v; sel.appendChild(o); });
    }catch(e){/* ignore */}
  })();

  // Asignaciones
  async function loadUserAssignments(){
    const tbody = document.getElementById('ua_body');
    if (!tbody) return;
    tbody.innerHTML = '<tr><td colspan="6" class="text-center p-3 text-muted">Cargando...</td></tr>';
    const uid = {{ $user->id }};
    const url = new URL(`{{ url('/admin/api/users') }}/${uid}/credential-history`, window.location.origin);
    const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
    const j = await res.json().catch(()=>({data:[]}));
    const rows = j.data || [];
    tbody.innerHTML = '';
    rows.forEach(r => {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${r.credential || '--'}</td>
        <td>${r.assigned_at || '--'}</td>
        <td>${r.unassigned_at || 'Actual'}</td>
        <td>${r.actor || '--'}</td>
        <td>${r.reason || '--'}</td>
        <td><span class="badge ${r.status === 'Activa' ? 'bg-label-success' : 'bg-label-secondary'}">${r.status}</span></td>`;
      tbody.appendChild(tr);
    });
    if (!rows.length) {
      tbody.innerHTML = '<tr><td colspan="6" class="text-center p-3 text-muted">Sin historial registrado.</td></tr>';
    }
  }
  document.getElementById('ua_refresh')?.addEventListener('click', loadUserAssignments);

  // Vehículos
  const vehicleConfigState = window.__userVehicleConfig || {};
  const vehicleElements = {
    form: document.getElementById('vehicleAssignForm'),
    vehicleSelect: document.getElementById('vehicle_assign_vehicle'),
    sourceSelect: document.getElementById('vehicle_assign_source'),
    companyWrapper: document.getElementById('vehicle_assign_company_wrapper'),
    companySelect: document.getElementById('vehicle_assign_company'),
    costInput: document.getElementById('vehicle_assign_cost'),
    dateInput: document.getElementById('vehicle_assign_date'),
    notesInput: document.getElementById('vehicle_assign_notes'),
    submitBtn: document.getElementById('vehicle_assign_submit'),
    status: document.getElementById('vehicleFormStatus'),
    error: document.getElementById('vehicleFormError'),
    activeBody: document.getElementById('vehicleActiveBody'),
    timeline: document.getElementById('vehicleTimeline'),
    empty: document.getElementById('vehicleEmpty'),
    activeBadge: document.getElementById('vehicleActiveBadge'),
  };

  const vehicleState = {
    assignments: Array.isArray(vehicleConfigState.assignments) ? [...vehicleConfigState.assignments] : [],
    initialized: false,
    loading: false,
    saving: false,
    closing: false,
  };

  function todayDate() {
    return new Date().toISOString().slice(0, 10);
  }

  function populateVehicleOptions() {
    if (!vehicleElements.vehicleSelect) return;
    const vehicles = Array.isArray(vehicleConfigState.vehicles) ? vehicleConfigState.vehicles : [];
    let html = '<option value="">Selecciona vehículo</option>';
    vehicles.forEach(vehicle => {
      const labelParts = [];
      if (vehicle?.name) labelParts.push(vehicle.name);
      if (vehicle?.code) labelParts.push(`(${vehicle.code})`);
      html += `<option value="${vehicle.id}">${escapeHtml(labelParts.join(' ').trim() || `Vehículo ${vehicle.id}`)}</option>`;
    });
    vehicleElements.vehicleSelect.innerHTML = html;
  }

  function populateVehicleCompanies() {
    if (!vehicleElements.companySelect) return;
    const companies = Array.isArray(vehicleConfigState.companies) ? vehicleConfigState.companies : [];
    let html = '<option value="">Selecciona empresa</option>';
    companies.forEach(company => {
      html += `<option value="${company.id}">${escapeHtml(company.name || `Empresa ${company.id}`)}</option>`;
    });
    vehicleElements.companySelect.innerHTML = html;
  }

  function vehicleCompanyToggle() {
    const isCompany = vehicleElements.sourceSelect?.value === 'company';
    if (vehicleElements.companyWrapper) {
      vehicleElements.companyWrapper.classList.toggle('d-none', !isCompany);
    }
    if (vehicleElements.companySelect) {
      vehicleElements.companySelect.disabled = !isCompany;
      if (!isCompany) {
        vehicleElements.companySelect.value = '';
      }
    }
  }

  function vehicleSourceLabel(item) {
    if (item?.vehicle_source === 'company') return 'Empresa';
    if (item?.vehicle_source === 'personal') return 'Personal';
    return '—';
  }

  function formatVehicleDate(value) {
    if (!value) return '—';
    try {
      return new Date(`${value}T00:00:00`).toLocaleDateString('es-ES');
    } catch (error) {
      return value;
    }
  }

  function renderVehicleAssignments(assignments) {
    vehicleState.assignments = Array.isArray(assignments) ? assignments.slice() : [];
    renderVehicleActive(vehicleState.assignments);
    renderVehicleTimeline(vehicleState.assignments);
  }

  function updateVehicleSummary(active) {
    const heroLabel = document.getElementById('vehicleHeroLabel');
    const summaryName = document.getElementById('vehicleSummaryName');
    const summaryBadge = document.getElementById('vehicleSummaryBadge');
    const summaryUpdated = document.getElementById('vehicleSummaryUpdated');
    const name = active?.vehicle_name || 'Sin vehículo asignado';
    if (heroLabel) heroLabel.textContent = name;
    if (summaryName) summaryName.textContent = name;
    if (summaryBadge) {
      summaryBadge.textContent = active ? 'Asignado' : 'Sin asignar';
      summaryBadge.classList.toggle('bg-label-success', !!active);
      summaryBadge.classList.toggle('bg-label-secondary', !active);
    }
    if (summaryUpdated) {
      const label = active ? formatVehicleDate(active.assigned_at) : '—';
      summaryUpdated.textContent = `Actualizado ${label}`;
    }
  }

  function renderVehicleActive(assignments) {
    if (!vehicleElements.activeBody) return;
    const active = Array.from(assignments || []).find(item => !item.returned_at);
    vehicleElements.activeBadge?.classList.toggle('d-none', !active);

    if (!active) {
      vehicleElements.activeBody.innerHTML = '<p class="text-muted mb-0">No hay un vehículo activo asignado.</p>';
      updateVehicleSummary(null);
      return;
    }

    const source = vehicleSourceLabel(active);
    const companyName = active.vehicle_company_name ? ` · ${escapeHtml(active.vehicle_company_name)}` : '';
    const costLabel = active.vehicle_monthly_cost !== null ? fmtCash(active.vehicle_monthly_cost) : '—';
    const notesLabel = active.vehicle_notes ? escapeHtml(active.vehicle_notes) : '—';
    const defaultReturn = todayDate();

    vehicleElements.activeBody.innerHTML = `
      <div class="d-flex justify-content-between align-items-start gap-2">
        <div>
          <h6 class="mb-1">${escapeHtml(active.vehicle_name || '—')}</h6>
          <div class="small text-muted">${escapeHtml(source)}${companyName}</div>
        </div>
        <span class="badge bg-label-success">Activa</span>
      </div>
      <dl class="row small mb-3">
        <dt class="col-sm-5">Desde</dt>
        <dd class="col-sm-7">${formatVehicleDate(active.assigned_at)}</dd>
        <dt class="col-sm-5">Coste mensual</dt>
        <dd class="col-sm-7">${costLabel}</dd>
        <dt class="col-sm-5">Notas</dt>
        <dd class="col-sm-7">${notesLabel}</dd>
      </dl>
      <div class="row g-3 align-items-end">
        <div class="col-sm-6">
          <label class="form-label" for="vehicleReturnDate">Fecha de devolución</label>
          <input type="date" class="form-control" id="vehicleReturnDate" value="${defaultReturn}" />
        </div>
        <div class="col-sm-6">
          <label class="form-label" for="vehicleReturnNotes">Notas (opcional)</label>
          <input type="text" class="form-control" id="vehicleReturnNotes" value="${active.vehicle_notes ? escapeHtml(active.vehicle_notes) : ''}" placeholder="Ej. revisión, cambio de vehículo" />
        </div>
        <div class="col-12 d-flex justify-content-between align-items-center">
          <small class="text-muted" id="vehicleCloseStatus"></small>
          <button type="button" class="btn btn-sm btn-outline-danger" id="vehicleCloseBtn">
            <i class="ti tabler-parking-off me-1"></i>Marcar como devuelto
          </button>
        </div>
      </div>
    `;

    bindVehicleClose(active);
    updateVehicleSummary(active);
  }

  function renderVehicleTimeline(assignments) {
    if (!vehicleElements.timeline || !vehicleElements.empty) return;
    const rows = Array.from(assignments || []);
    if (!rows.length) {
      vehicleElements.timeline.innerHTML = '';
      vehicleElements.empty.classList.remove('d-none');
      return;
    }
    vehicleElements.empty.classList.add('d-none');

    const items = rows.map(item => {
      const isActive = !item.returned_at;
      const assignedLabel = formatVehicleDate(item.assigned_at);
      const returnedLabel = isActive ? 'Actual' : formatVehicleDate(item.returned_at);
      const source = vehicleSourceLabel(item);
      const companyLabel = item.vehicle_company_name ? ` · ${escapeHtml(item.vehicle_company_name)}` : '';
      const costLabel = item.vehicle_monthly_cost !== null ? fmtCash(item.vehicle_monthly_cost) : '—';
      const creator = item.created_by ? escapeHtml(item.created_by) : '—';
      const notes = item.vehicle_notes ? escapeHtml(item.vehicle_notes) : '—';
      return `
        <li class="timeline-item timeline-item-transparent">
          <span class="timeline-point ${isActive ? 'timeline-point-success' : 'timeline-point-secondary'}"></span>
          <div class="timeline-event shadow-sm">
            <div class="timeline-header mb-2 d-flex justify-content-between align-items-center">
              <h6 class="mb-0">${escapeHtml(item.vehicle_name || '—')}</h6>
              <span class="badge ${isActive ? 'bg-label-success' : 'bg-label-secondary'}">${isActive ? 'Activa' : 'Finalizada'}</span>
            </div>
            <div class="row g-2 small">
              <div class="col-sm-6"><strong>Periodo:</strong> ${assignedLabel} – ${returnedLabel}</div>
              <div class="col-sm-6"><strong>Origen:</strong> ${escapeHtml(source)}${companyLabel}</div>
              <div class="col-sm-6"><strong>Coste mensual:</strong> ${costLabel}</div>
              <div class="col-sm-6"><strong>Registrado por:</strong> ${creator}</div>
              <div class="col-12"><strong>Notas:</strong> ${notes}</div>
            </div>
          </div>
        </li>`;
    }).join('');

    vehicleElements.timeline.innerHTML = `<ul class="timeline vehicle-timeline mb-0">${items}</ul>`;
  }

  async function refreshVehicleAssignments() {
    if (!vehicleConfigState.endpoints?.list) return;
    if (vehicleState.loading) return;
    vehicleState.loading = true;
    try {
      const res = await fetch(vehicleConfigState.endpoints.list, { headers: { Accept: 'application/json' } });
      const data = await res.json().catch(() => ({ data: [] }));
      if (!res.ok) {
        throw new Error(data?.message || 'No se pudo obtener el historial de vehículos.');
      }
      const rows = Array.isArray(data.data) ? data.data : [];
      renderVehicleAssignments(rows);
    } catch (error) {
      console.error(error);
      if (vehicleElements.status) {
        vehicleElements.status.textContent = error.message || 'Error cargando vehículos.';
        vehicleElements.status.classList.remove('text-success');
        vehicleElements.status.classList.add('text-danger');
      }
    } finally {
      vehicleState.loading = false;
    }
  }

  function bindVehicleClose(activeAssignment) {
    const closeBtn = vehicleElements.activeBody?.querySelector('#vehicleCloseBtn');
    const returnDateInput = vehicleElements.activeBody?.querySelector('#vehicleReturnDate');
    const notesInput = vehicleElements.activeBody?.querySelector('#vehicleReturnNotes');
    const statusLabel = vehicleElements.activeBody?.querySelector('#vehicleCloseStatus');
    if (!closeBtn) return;

    closeBtn.addEventListener('click', async () => {
      if (!vehicleConfigState.endpoints?.close || vehicleState.closing) return;
      const endpoint = vehicleConfigState.endpoints.close.replace('__ID__', activeAssignment.id);
      const payload = {
        returned_at: returnDateInput?.value || todayDate(),
        vehicle_notes: notesInput?.value?.trim() || null,
      };

      if (statusLabel) {
        statusLabel.textContent = 'Guardando cambios...';
        statusLabel.classList.remove('text-success', 'text-danger');
        statusLabel.classList.add('text-muted');
      }

      vehicleState.closing = true;
      try {
        const res = await fetch(endpoint, {
          method: 'PATCH',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken || '',
          },
          body: JSON.stringify(payload),
        });
        const data = await res.json().catch(() => ({}));
        if (!res.ok) {
          throw new Error(data?.message || 'No se pudo marcar como devuelto.');
        }
        if (statusLabel) {
          statusLabel.textContent = data?.message || 'Vehículo devuelto correctamente.';
          statusLabel.classList.remove('text-muted', 'text-danger');
          statusLabel.classList.add('text-success');
        }
        toast(data?.message || 'Vehículo devuelto correctamente.');
        await refreshVehicleAssignments();
      } catch (error) {
        console.error(error);
        if (statusLabel) {
          statusLabel.textContent = error.message || 'Error al devolver el vehículo.';
          statusLabel.classList.remove('text-muted', 'text-success');
          statusLabel.classList.add('text-danger');
        }
      } finally {
        vehicleState.closing = false;
      }
    });
  }

  vehicleElements.form?.addEventListener('submit', async function (event) {
    event.preventDefault();
    if (!vehicleConfigState.endpoints?.store || vehicleState.saving) return;

    const vehicleId = vehicleElements.vehicleSelect?.value;
    const source = vehicleElements.sourceSelect?.value;
    const companyId = vehicleElements.companySelect?.value || null;
    const rawCostValue = typeof vehicleElements.costInput?.value === 'string'
      ? vehicleElements.costInput.value.trim()
      : '';
    const assignedAt = vehicleElements.dateInput?.value || todayDate();
    const notesValue = vehicleElements.notesInput?.value?.trim() || null;

    if (!vehicleId) {
      vehicleElements.error?.classList.remove('d-none');
      if (vehicleElements.error) vehicleElements.error.textContent = 'Selecciona un vehículo antes de guardar.';
      return;
    }
    if (!source) {
      vehicleElements.error?.classList.remove('d-none');
      if (vehicleElements.error) vehicleElements.error.textContent = 'Indica si el vehículo es de empresa o personal.';
      return;
    }
    if (source === 'company' && !companyId) {
      vehicleElements.error?.classList.remove('d-none');
      if (vehicleElements.error) vehicleElements.error.textContent = 'Selecciona la empresa que provee el vehículo.';
      return;
    }

    vehicleElements.error?.classList.add('d-none');
    if (vehicleElements.status) {
      vehicleElements.status.textContent = 'Guardando vehículo...';
      vehicleElements.status.classList.remove('text-danger', 'text-success');
      vehicleElements.status.classList.add('text-muted');
    }
    vehicleElements.submitBtn?.setAttribute('disabled', 'disabled');
    vehicleState.saving = true;

    const payload = {
      vehicle_id: Number(vehicleId),
      vehicle_source: source,
      vehicle_company_id: source === 'company' ? Number(companyId) || null : null,
      vehicle_monthly_cost: rawCostValue !== '' ? Number(rawCostValue) : null,
      assigned_at: assignedAt,
      vehicle_notes: notesValue,
    };

    try {
      const res = await fetch(vehicleConfigState.endpoints.store, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': csrfToken || '',
        },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        throw new Error(data?.message || 'No se pudo asignar el vehículo.');
      }
      if (vehicleElements.status) {
        vehicleElements.status.textContent = data?.message || 'Vehículo asignado correctamente.';
        vehicleElements.status.classList.remove('text-muted', 'text-danger');
        vehicleElements.status.classList.add('text-success');
      }
      toast(data?.message || 'Vehículo asignado correctamente.');
      vehicleElements.form?.reset();
      if (vehicleElements.dateInput) vehicleElements.dateInput.value = todayDate();
      vehicleCompanyToggle();
      await refreshVehicleAssignments();
    } catch (error) {
      console.error(error);
      vehicleElements.error?.classList.remove('d-none');
      if (vehicleElements.error) vehicleElements.error.textContent = error.message || 'No se pudo asignar el vehículo.';
      if (vehicleElements.status) {
        vehicleElements.status.textContent = error.message || 'No se pudo asignar el vehículo.';
        vehicleElements.status.classList.remove('text-muted', 'text-success');
        vehicleElements.status.classList.add('text-danger');
      }
    } finally {
      vehicleState.saving = false;
      vehicleElements.submitBtn?.removeAttribute('disabled');
    }
  });

  function ensureVehicleInitialized() {
    if (vehicleState.initialized) return;
    populateVehicleOptions();
    populateVehicleCompanies();
    if (vehicleElements.dateInput && !vehicleElements.dateInput.value) {
      vehicleElements.dateInput.value = todayDate();
    }
    vehicleCompanyToggle();
    renderVehicleAssignments(vehicleState.assignments);
    vehicleState.initialized = true;
  }

  vehicleElements.sourceSelect?.addEventListener('change', vehicleCompanyToggle);

  // Calendario
  const formatMonth = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    return `${year}-${month}`;
  };

  const targetInput = document.getElementById('cal_target');
  const defaultWeeklyTarget = (() => {
    if (!targetInput) return 40;
    const datasetValue = Number(targetInput.dataset?.defaultTarget);
    if (Number.isFinite(datasetValue) && datasetValue > 0) return datasetValue;
    const inputValue = Number(targetInput.value);
    if (Number.isFinite(inputValue) && inputValue > 0) return inputValue;
    return 40;
  })();

  function ensureTargetValue() {
    if (!targetInput) return defaultWeeklyTarget;
    const current = Number(targetInput.value);
    if (Number.isFinite(current) && current > 0) {
      return current;
    }
    targetInput.value = defaultWeeklyTarget.toFixed(1).replace(/\.0$/, '.0');
    return defaultWeeklyTarget;
  }

  let calMonth = formatMonth(new Date());
  async function loadCalendar(){
    const uid = {{ $user->id }};
    const url = new URL(`{{ url('/admin/api/users') }}/${uid}/calendar-hours`, window.location.origin);
    url.searchParams.set('month', calMonth);
    const tgt = ensureTargetValue();
    url.searchParams.set('target_per_week', tgt);
    const res = await fetch(url, { headers:{ 'Accept':'application/json' } });
    const j = await res.json().catch(()=>({days:[],weeks:[],meta:{}}));
    renderCalendar(j);
  }
  function renderCalendar(data){
    const grid = document.getElementById('cal_grid');
    const weeks = document.getElementById('cal_weeks');
    if (!grid || !weeks) return;

    const meta = data.meta || {};
    document.getElementById('cal_title').textContent = meta.month_label || 'Seguimiento mensual';
    const weeklyTarget = Number(meta.target_per_week) || defaultWeeklyTarget;
    const monthTarget = Number(meta.month_target) || (weeklyTarget * 4);

    const formatDayLabel = (dateStr) => {
      const date = new Date(dateStr);
      if (Number.isNaN(date.getTime())) return dateStr;
      return date.toLocaleDateString('es-ES', { weekday: 'short', day: '2-digit' });
    };

    const dayBadgeClass = (status) => {
      if (status === 'recorded') return 'bg-label-success';
      if (status === 'pending') return 'bg-label-warning';
      return 'bg-label-secondary';
    };

    const weekBadgeClass = (status) => {
      if (status === 'ok') return 'bg-label-success';
      if (status === 'warn') return 'bg-label-warning';
      return 'bg-label-secondary';
    };

    const days = Array.isArray(data.days) ? data.days : [];
    const totalHours = Number(meta.month_hours ?? 0);
    const monthDelta = Number(meta.month_delta ?? 0);
    const monthDeltaClass = monthDelta > 0 ? 'text-success' : (monthDelta < 0 ? 'text-danger' : 'text-muted');
    const monthDeltaPrefix = monthDelta > 0 ? '+' : '';

    const summaryHtml = `
      <div class="alert alert-light border d-flex flex-wrap gap-3 align-items-center justify-content-between">
        <div class="text-body"><strong>${formatHours(totalHours)}</strong> horas acumuladas</div>
        <div class="text-body">Objetivo mensual aprox.: <strong>${formatHours(monthTarget)}</strong></div>
        <div class="text-body ${monthDeltaClass}">${monthDeltaPrefix}${formatHours(monthDelta)}</div>
      </div>`;

    const table = document.createElement('table');
    table.className = 'table table-sm mb-0';
    table.innerHTML = '<thead><tr><th>Día</th><th>Horas programadas</th><th>No Show</th><th>Inelegible</th><th>Estado</th></tr></thead>';
    const tbody = document.createElement('tbody');
    if (!days.length) {
      const tr = document.createElement('tr');
      tr.innerHTML = '<td colspan="5" class="text-center text-muted py-3">No hay información disponible para este mes.</td>';
      tbody.appendChild(tr);
    } else {
      days.forEach(d => {
        const scheduled = Number(d.scheduled ?? d.hours ?? 0);
        const status = d.status || (scheduled > 0 ? 'recorded' : 'inactive');
        const statusLabel = d.status_label || (status === 'recorded' ? 'Registro encontrado' : status === 'pending' ? 'Sin horas registradas' : 'Fuera de contrato');
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${d.date_label || formatDayLabel(d.date)}</td>
          <td>${formatHours(scheduled)}</td>
          <td>${(Number(d.no_show ?? 0)).toFixed(1)} %</td>
          <td>${(Number(d.ineligible ?? 0)).toFixed(1)} %</td>
          <td><span class="badge ${dayBadgeClass(status)}">${statusLabel}</span></td>`;
        tbody.appendChild(tr);
      });
    }
    table.appendChild(tbody);
    grid.innerHTML = summaryHtml;
    grid.appendChild(table);

    const weeksData = Array.isArray(data.weeks) ? data.weeks : [];
    weeks.innerHTML = '';
    if (!weeksData.length) {
      weeks.innerHTML = '<div class="col-12 text-muted">Sin datos semanales disponibles.</div>';
    } else {
      weeksData.forEach((w) => {
        const scheduled = Number(w.scheduled ?? w.hours ?? 0);
        const target = Number(w.target ?? weeklyTarget);
        const delta = Number(w.delta ?? (scheduled - target));
        const deltaLabel = formatHours(delta);
        const deltaClass = delta > 0 ? 'text-success' : (delta < 0 ? 'text-danger' : 'text-muted');
        const deltaPrefix = delta > 0 ? '+' : '';
        const statusLabel = w.status_label || '';
        const col = document.createElement('div'); col.className = 'col-md-4';
        col.innerHTML = `
          <div class="card h-100 border">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-start mb-2">
                <h6 class="mb-0">${w.label || 'Semana'}</h6>
                ${statusLabel ? `<span class="badge ${weekBadgeClass(w.status)}">${statusLabel}</span>` : ''}
              </div>
              <div class="small text-muted mb-2">${w.range || ''}</div>
              <div class="d-flex justify-content-between"><span>Programado</span><span class="fw-semibold">${formatHours(scheduled)}</span></div>
              <div class="d-flex justify-content-between"><span>Objetivo</span><span>${formatHours(target)}</span></div>
              <div class="d-flex justify-content-between"><span>Diferencia</span><span class="${deltaClass}">${deltaPrefix}${deltaLabel}</span></div>
            </div>
          </div>`;
        weeks.appendChild(col);
      });
    }
  }
  document.getElementById('cal_prev')?.addEventListener('click', function(){
    const d = new Date(calMonth + '-01T00:00');
    d.setMonth(d.getMonth()-1);
    calMonth = formatMonth(d);
    loadCalendar();
  });
  document.getElementById('cal_next')?.addEventListener('click', function(){
    const d = new Date(calMonth + '-01T00:00');
    d.setMonth(d.getMonth()+1);
    calMonth = formatMonth(d);
    loadCalendar();
  });
  document.getElementById('cal_refresh')?.addEventListener('click', loadCalendar);

  // Tab activation triggers
  const tabElms = document.querySelectorAll('#userDetailTabs [data-bs-toggle="pill"]');

  function handleTabShown(target) {
    if (!target) return;
    if (target === '#pane-metrics') loadUserMetrics();
    if (target === '#pane-assignments') loadUserAssignments();
    if (target === '#pane-calendar') loadCalendar();
    if (target === '#pane-wallet') loadWallet();
    if (target === '#pane-vehicles') {
      ensureVehicleInitialized();
      refreshVehicleAssignments();
    }
    const baseUrl = `${window.location.pathname}${window.location.search}`;
    history.replaceState(null, '', `${baseUrl}${target}`);
  }

  tabElms.forEach(tab => {
    tab.addEventListener('shown.bs.tab', function(e){
      const target = e.target.getAttribute('data-bs-target');
      handleTabShown(target);
    });
  });

  function activateInitialTab() {
    const hash = window.location.hash;
    if (hash && document.querySelector(hash)) {
      const trigger = document.querySelector(`#userDetailTabs [data-bs-target="${hash}"]`);
      if (trigger) {
        if (!trigger.classList.contains('active')) {
          window.bootstrap?.Tab.getOrCreateInstance(trigger).show();
          return;
        }
        handleTabShown(hash);
        return;
      }
    }
    const active = document.querySelector('#userDetailTabs .nav-link.active');
    const target = active?.getAttribute('data-bs-target');
    handleTabShown(target);
  }

  ensureVehicleInitialized();
  activateInitialTab();
});
</script>
@endpush