@extends('layouts/layoutMaster')

@php
  $pageConfigs = [
    'myLayout' => 'blank',
    'navbarType' => 'hidden',
    'menuFixed' => false,
    'contentLayout' => 'compact',
  ];

  $locale = app()->getLocale();
  $weekStartLabel = $startOfWeek->copy()->locale($locale)->isoFormat('D MMM');
  $weekEndLabel = $endOfWeek->copy()->locale($locale)->isoFormat('D MMM YYYY');
  $weekLabel = __('rider.schedule.week_label', ['start' => $weekStartLabel, 'end' => $weekEndLabel]);

  $supportEmail = $supportContact['email'] ?? config('support.default_email');
  $supportPhone = $supportContact['phone'] ?? config('support.default_phone');
  $supportPhoneDial = $supportPhone ? preg_replace('/[^0-9+]/', '', $supportPhone) : '';
@endphp

@section('title')
  {{ __('rider.schedule.meta_title') }}
@endsection

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'])
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/sweetalert2/sweetalert2.js'])
@endsection

@section('page-style')
  <style>
    :root {
      --rider-accent: #e63946;
      --rider-accent-soft: #ffecee;
      --rider-surface: #ffffff;
      --rider-surface-muted: #f8f9fb;
      --rider-text: #212529;
      --rider-muted: #6c757d;
      --rider-card-radius: 20px;
    }

    body {
      background: var(--rider-surface-muted);
      color: var(--rider-text);
    }

    .rider-schedule {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: var(--rider-surface);
    }

    .rider-schedule__hero {
      padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.2rem, 5vw, 2.4rem) clamp(1.4rem, 4vw, 2.2rem);
      background: radial-gradient(circle at top right, rgba(230, 57, 70, 0.18), rgba(230, 57, 70, 0));
      border-bottom: 1px solid rgba(230, 57, 70, 0.14);
      display: grid;
      gap: clamp(1.4rem, 3vw, 2.2rem);
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      align-items: end;
    }

    .rider-schedule__hero-left {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .rider-schedule__week-nav {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .rider-schedule__week-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(230, 57, 70, 0.24);
      background: rgba(230, 57, 70, 0.08);
      color: var(--rider-accent);
      transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
      position: relative;
    }

    .rider-schedule__week-btn:hover {
      transform: translateY(-2px);
      border-color: rgba(230, 57, 70, 0.4);
      background: rgba(230, 57, 70, 0.16);
    }

    .rider-schedule__week-btn.disabled {
      pointer-events: none;
      opacity: 0.4;
      transform: none;
    }

    .rider-schedule__week-btn.has-future::after {
      content: '+';
      position: absolute;
      right: 4px;
      top: 4px;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: var(--rider-accent);
      color: #fff;
      font-size: 0.65rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
    }

    .rider-schedule__week-btn.disabled.has-future::after {
      display: none;
    }

    .rider-schedule__week-label {
      font-weight: 700;
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      color: var(--rider-text);
    }

    .rider-schedule__welcome {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--rider-accent);
    }

    .rider-schedule__title {
      margin: 0;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 700;
      line-height: 1.2;
    }

    .rider-schedule__subtitle {
      margin: 0;
      font-size: 0.98rem;
      color: var(--rider-muted);
      max-width: 520px;
    }

    .rider-schedule__deadline {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      background: rgba(230, 57, 70, 0.08);
      border: 1px solid rgba(230, 57, 70, 0.18);
      color: var(--rider-accent);
      padding: 0.55rem 0.85rem;
      border-radius: 14px;
      font-size: 0.85rem;
      width: fit-content;
    }

    #deadline-display {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-weight: 600;
    }

    #deadline-display.expiring {
      background: rgba(255, 193, 7, 0.12);
      border-radius: 10px;
      padding: 0.15rem 0.55rem;
    }

    #deadline-display.expired {
      background: rgba(220, 53, 69, 0.12);
      border-radius: 10px;
      padding: 0.15rem 0.55rem;
      color: #c1121f;
    }

    .rider-schedule__hero-right {
      display: grid;
      gap: 1rem;
    }

    .rider-schedule__stats {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: flex-start;
    }

    .stat-card {
      background: var(--rider-surface);
      border: 1px solid rgba(230, 57, 70, 0.14);
      border-radius: var(--rider-card-radius);
      padding: 1.1rem 1.4rem;
      box-shadow: 0 12px 32px rgba(230, 57, 70, 0.08);
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      min-width: 240px;
      max-width: 320px;
    }

    .stat-card span {
      color: var(--rider-muted);
      font-size: 0.8rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .stat-card strong {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--rider-text);
    }

    .stat-card small {
      color: var(--rider-muted);
      font-size: 0.8rem;
    }

    .rider-schedule__admin-tools {
      border: 1px dashed rgba(230, 57, 70, 0.35);
      border-radius: var(--rider-card-radius);
      padding: 1rem 1.2rem;
      background: rgba(230, 57, 70, 0.06);
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .rider-schedule__admin-head {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      font-size: 0.9rem;
    }

    .rider-schedule__admin-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
    }

    .rider-schedule__main {
      padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1rem, 5vw, 2.6rem) clamp(4.5rem, 8vw, 5rem);
      display: grid;
      gap: 2.5rem;
    }

    .schedule-card {
      position: relative;
      border-radius: var(--rider-card-radius);
      border: 1px solid rgba(230, 57, 70, 0.14);
      overflow: hidden;
      background: var(--rider-surface);
      box-shadow: 0 20px 45px rgba(230, 57, 70, 0.08);
      display: flex;
      flex-direction: column;
      min-height: 560px;
    }

    .schedule-card__header {
      padding: 1.25rem 1.5rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      border-bottom: 1px solid rgba(230, 57, 70, 0.12);
      background: linear-gradient(180deg, rgba(230, 57, 70, 0.04), rgba(230, 57, 70, 0));
      position: sticky;
      top: 0;
      z-index: 8;
    }

    .date-selector {
      display: flex;
      gap: 0.55rem;
      padding: 0.35rem;
      margin: 0;
      list-style: none;
      border-radius: 999px;
      background: rgba(230, 57, 70, 0.08);
    }

    .date-selector-item {
      flex: 1 1 0;
      text-align: center;
      padding: 0.5rem 0.25rem;
      border-radius: 999px;
      cursor: pointer;
      transition: transform .2s ease, background-color .2s ease, color .2s ease;
      user-select: none;
    }

    .date-selector-item .day-name {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--rider-muted);
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .date-selector-item .day-number {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--rider-text);
    }

    .date-selector-item.active {
      background: var(--rider-accent);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(230, 57, 70, 0.28);
    }

    .date-selector-item.active .day-name,
    .date-selector-item.active .day-number {
      color: #fff;
    }

    .schedule-tabs {
      display: inline-flex;
      border-radius: 999px;
      border: 1px solid rgba(230, 57, 70, 0.12);
      background: #fff;
      overflow: hidden;
      width: fit-content;
      align-self: flex-end;
    }

    .schedule-tab {
      padding: 0.55rem 1.3rem;
      font-weight: 600;
      font-size: 0.88rem;
      color: var(--rider-muted);
      cursor: pointer;
      transition: background-color .2s ease, color .2s ease;
    }

    .schedule-tab.active {
      background: var(--rider-accent);
      color: #fff;
    }

    .schedule-card__content {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .schedule-scroll-area {
      flex: 0 0 auto;
      max-height: clamp(320px, 55vh, 420px);
      overflow-y: auto;
      padding: 1.25rem 1.5rem 1.5rem;
      border: 1px solid rgba(230, 57, 70, 0.18);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.85);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 18px 36px rgba(230, 57, 70, 0.05);
      scroll-padding-top: 1rem;
    }

    .schedule-scroll-area::-webkit-scrollbar {
      width: 8px;
    }

    .schedule-scroll-area::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(230, 57, 70, 0.35);
    }

    .schedule-scroll-area::-webkit-scrollbar-track {
      background: transparent;
    }

    .schedule-content {
      display: none;
    }

    .schedule-content.active {
      display: block;
    }


    .schedule-top-summary--lower {
      margin-top: 1.5rem;
    }

    .schedule-summary-card {
      background: rgba(230, 57, 70, 0.08);
      border: 1px solid rgba(230, 57, 70, 0.18);
      border-radius: 18px;
      padding: 1rem 1.2rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      box-shadow: 0 14px 30px rgba(230, 57, 70, 0.08);
    }

    .schedule-summary-card span {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--rider-muted);
    }

    .schedule-summary-card strong {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--rider-text);
    }

    .schedule-summary-card small {
      font-size: 0.82rem;
      color: var(--rider-muted);
    }

    .daily-schedule-slot {
      display: flex;
      align-items: stretch;
      gap: 1rem;
      margin-bottom: 0.75rem;
      padding: 0.6rem;
      border-radius: 16px;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .daily-schedule-slot:hover {
      transform: translateX(4px);
      box-shadow: 0 15px 30px rgba(230, 57, 70, 0.08);
    }

    .slot-time {
      flex-basis: 70px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: var(--rider-muted);
      font-size: 0.95rem;
    }

    .slot-bar {
      flex: 1;
      border-radius: 14px;
      padding: 0.8rem 1.2rem;
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-weight: 600;
      letter-spacing: .01em;
      transition: background-color .2s ease, color .2s ease, transform .2s ease;
      border: 1px solid transparent;
    }

    .slot-bar.available {
      background: #fff;
      border-color: rgba(230, 57, 70, 0.16);
      color: var(--rider-text);
      cursor: pointer;
    }

    .slot-bar.available:hover {
      background: rgba(230, 57, 70, 0.08);
      border-color: rgba(230, 57, 70, 0.35);
      color: var(--rider-accent);
    }

    .slot-bar.mine {
      background: linear-gradient(135deg, #2ecc71, #29b765);
      color: #fff;
      cursor: pointer;
      box-shadow: 0 15px 35px rgba(46, 204, 113, 0.35);
    }

    .slot-bar.locked {
      background: #eff2f5;
      color: var(--rider-muted);
      border-color: transparent;
      cursor: not-allowed;
    }

    .slot-bar .ti {
      margin-left: auto;
      font-size: 1.1rem;
    }

    .reserved-slot-item {
      background: rgba(230, 57, 70, 0.08);
      border: 1px solid rgba(230, 57, 70, 0.2);
      border-radius: 16px;
      padding: 0.85rem 1.1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.75rem;
      font-weight: 600;
      color: var(--rider-text);
    }

    .reserved-slot-item button {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
    }

    .rider-schedule__support {
      display: grid;
      gap: 1.3rem;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      background: rgba(230, 57, 70, 0.05);
      border-radius: var(--rider-card-radius);
      padding: 1.6rem 1.8rem;
      border: 1px solid rgba(230, 57, 70, 0.12);
    }

    .rider-schedule__support h2 {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 600;
    }

    .rider-schedule__support p {
      margin: 0;
      color: var(--rider-muted);
      font-size: 0.92rem;
    }

    .rider-schedule__support .btn {
      border-radius: 14px;
    }

    .rider-nav {
      position: sticky;
      bottom: 0;
      display: none;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 0.35rem;
      padding: 0.55rem clamp(1rem, 6vw, 1.6rem);
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(14px);
      border-top: 1px solid rgba(230, 57, 70, 0.16);
      box-shadow: 0 -6px 18px rgba(13, 25, 43, 0.08);
      z-index: 9;
    }

    .rider-nav__item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      padding: 0.35rem 0.25rem;
      border-radius: 14px;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--rider-muted);
      text-decoration: none;
      transition: color .2s ease, background-color .2s ease, transform .2s ease;
    }

    .rider-nav__item i {
      font-size: 1.35rem;
    }

    .rider-nav__item.is-active,
    .rider-nav__item:focus,
    .rider-nav__item:hover {
      color: var(--rider-accent);
      background: rgba(230, 57, 70, 0.12);
      transform: translateY(-2px);
    }

    .rider-nav__item:focus {
      outline: 2px solid rgba(230, 57, 70, 0.35);
      outline-offset: 2px;
    }

    @media (max-width: 992px) {
      .rider-schedule__hero {
        grid-template-columns: 1fr;
      }
      .rider-schedule__main {
        padding-inline: clamp(0.85rem, 6vw, 1.5rem);
      }
      .rider-schedule__stats { justify-content: center; }
    }

    @media (max-width: 768px) {
      .schedule-card__header {
        position: sticky;
      }
      .schedule-scroll-area {
        max-height: clamp(260px, 60vh, 360px);
        margin-inline: 0.25rem;
        padding: 1rem 0.85rem 2.5rem;
      }
      .schedule-top-summary {
        grid-template-columns: 1fr;
      }
      .daily-schedule-slot {
        margin-inline: 0;
      }
      .reserved-slot-item {
        margin-inline: 0;
      }
      .rider-schedule__main {
        padding-bottom: 5.5rem;
      }
      .rider-nav {
        display: grid;
      }
    }
  </style>
@endsection

@section('content')
  @php
    $user = auth()->user();
    $firstName = 'Rider';
    if ($user) {
      $segments = preg_split('/\s+/', trim((string) $user->name));
      if (!empty($segments[0])) {
        $firstName = $segments[0];
      }
    }
  @endphp
  <div class="rider-schedule">
    @if (!empty($adminMode))
      <section class="rider-schedule__admin-tools">
        <div class="rider-schedule__admin-head">
          <span class="text-uppercase text-muted small fw-semibold">{{ __('rider.schedule.admin.badge') }}</span>
          <div>
            <strong>{{ $forecastName ? $forecastName . ' — ' : '' }}{{ $forecastCity ?? '' }}</strong>
            <span class="text-muted">({{ $startOfWeek->format('d/m') }} - {{ $endOfWeek->format('d/m') }})</span>
          </div>
          @php
            $status = $forecastStatus ?? 'published';
            $cls = match ($status) {
              'draft' => 'bg-label-secondary',
              'published' => 'bg-label-success',
              'closed' => 'bg-label-danger',
              default => 'bg-label-secondary'
            };
          @endphp
          <span class="badge {{ $cls }} text-capitalize" style="width: fit-content;">{{ $status }}</span>
        </div>
        <div class="rider-schedule__admin-actions">
          @if (($forecastStatus ?? 'published') === 'draft')
            <form action="{{ $updateUrl }}" method="POST" class="m-0">
              @csrf
              @method('PATCH')
              <input type="hidden" name="status" value="published">
              <button type="submit" class="btn btn-sm btn-success">
                <i class="ti tabler-send me-1"></i> {{ __('rider.schedule.admin.publish_button') }}
              </button>
            </form>
          @endif
          @if (!empty($adminMode) && !empty($riderId))
            <button type="button" id="btn-reset-week" class="btn btn-sm btn-outline-danger">
              <i class="ti tabler-rotate-2 me-1"></i> {{ __('rider.schedule.admin.reset_button') }}
            </button>
          @endif
        </div>
      </section>


      <section class="rider-schedule__support"
    @endif

    <header class="rider-schedule__hero">
      <div class="rider-schedule__hero-left">
        <span class="rider-schedule__welcome">
          <i class="ti tabler-calendar-time"></i>
          {{ __('rider.schedule.greeting', ['name' => $firstName]) }}
        </span>
        <h1 class="rider-schedule__title">{{ __('rider.schedule.headline') }}</h1>
        <p class="rider-schedule__subtitle">
          {{ __('rider.schedule.subheadline') }}
        </p>
        @php
          $showNextIndicator = !empty($nextWeek);
        @endphp
        <div class="rider-schedule__week-nav">
          <a href="{{ $prevWeek ?? '#' }}" class="rider-schedule__week-btn {{ !$prevWeek ? 'disabled' : '' }}" aria-label="{{ __('rider.schedule.week_nav.previous') }}">
            <i class="ti tabler-chevron-left"></i>
          </a>
          <span class="rider-schedule__week-label">{{ $weekLabel }}</span>
          <a href="{{ $nextWeek ?? '#' }}" class="rider-schedule__week-btn {{ !$nextWeek ? 'disabled' : '' }} {{ $showNextIndicator ? 'has-future' : '' }}" aria-label="{{ __('rider.schedule.week_nav.next') }}" @if($showNextIndicator) data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('rider.schedule.week_nav.next_available') ?? __('rider.schedule.week_nav.next') }}" @endif>
            <i class="ti tabler-chevron-right"></i>
          </a>
        </div>
        @if ($deadline)
          <div class="rider-schedule__deadline">
            <span class="fw-semibold text-uppercase" style="letter-spacing: .08em; font-size: 0.74rem;">{{ __('rider.schedule.booking_window') }}</span>
            <div id="deadline-display" data-deadline="{{ $deadline->toIso8601String() }}">
              <i class="ti tabler-clock"></i>
              <span id="countdown-text">{{ __('rider.schedule.countdown_placeholder') }}</span>
            </div>
          </div>
        @endif
      </div>
      <div class="rider-schedule__hero-right">
        @if (!empty($adminMode))
          <form method="GET" action="{{ url()->current() }}" class="rider-schedule__admin-tools" autocomplete="off">
            <input type="hidden" name="forecast_id" value="{{ $forecast_id }}" />
            <input type="hidden" id="rider_id" name="rider_id" value="{{ $riderId ?? '' }}" />
            <label for="rider_search" class="small fw-semibold text-uppercase text-muted">{{ __('rider.schedule.admin.view_as_label') }}</label>
            <div class="d-flex flex-wrap gap-2 align-items-center position-relative">
              <input type="text" class="form-control form-control-sm" style="width:240px" id="rider_search" placeholder="{{ __('rider.schedule.admin.view_as_placeholder') }}" />
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="1" id="force" name="force" @checked(!empty($force))>
                <label class="form-check-label small" for="force">{{ __('rider.schedule.admin.force_capacity') }}</label>
              </div>
              <button type="submit" class="btn btn-sm btn-outline-primary">
                <i class="ti tabler-user-search me-1"></i> {{ __('rider.schedule.admin.apply_button') }}
              </button>
              <div id="rider_results" class="card shadow-sm" style="position:absolute; top:2.8rem; left:0; z-index:1000; width:320px; display:none; max-height:260px; overflow:auto;"></div>
            </div>
          </form>
        @endif
      </div>
    </header>

    <main class="rider-schedule__main" id="planner">
      <section class="schedule-card"
        data-api-url="{{ $apiUrl ?? route('rider.schedule.data') }}"
        data-select-url="{{ $selectUrl ?? route('rider.schedule.select') }}"
        data-deselect-url="{{ $deselectUrl ?? route('rider.schedule.deselect') }}"
        data-csrf-token="{{ csrf_token() }}"
        data-is-locked="{{ !empty($isLocked) ? 'true' : 'false' }}"
        data-readonly="{{ !empty($readOnly) ? 'true' : 'false' }}"
        data-forecast-id="{{ $forecast_id ?? 'null' }}"
        data-default-day="{{ $defaultDay }}"
        data-show-capacity="{{ !empty($adminMode) ? 'true' : 'false' }}"
        @if(!empty($force)) data-force="{{ $force ? 'true' : 'false' }}" @endif
        @if(!empty($riderId)) data-rider-id="{{ $riderId }}" @endif
      >
        <div class="schedule-card__header">
          <ul class="date-selector">
            @if ($weekDates)
              @foreach ($weekDates as $day)
                <li class="date-selector-item @if ($day['full'] === $defaultDay) active @endif" data-date="{{ $day['full'] }}">
                  <div class="day-name">{{ $day['dayName'] }}</div>
                  <div class="day-number">{{ $day['dayNum'] }}</div>
                </li>
              @endforeach
            @endif
          </ul>
         <div class="schedule-tabs">
            <div class="schedule-tab active" data-tab="disponibles">{{ __('rider.schedule.tabs.available') }}</div>
            <div class="schedule-tab" data-tab="reservadas">{{ __('rider.schedule.tabs.reserved') }}</div>
          </div>
        </div>

        <div class="schedule-card__content">
          <div class="schedule-scroll-area">
            <div id="disponibles-content" class="schedule-content active">
              @if (!$scheduleData)
                <div class="alert alert-warning text-center m-4">{{ __('rider.schedule.no_schedule') }}</div>
              @else
                <div class="text-center p-4">
                  <div class="spinner-border text-primary" role="status"></div>
                </div>
              @endif
            </div>
            <div id="reservadas-content" class="schedule-content"></div>
          </div>
        </div>
      </section>

      <section class="schedule-top-summary schedule-top-summary--lower">
        <article class="schedule-summary-card">
          <span>{{ __('rider.schedule.stats.reserved_title') }}</span>
          <strong id="summary-reservadas">--</strong>
          <small>{{ __('rider.schedule.stats.reserved_hint') }}</small>
        </article>
        <article class="schedule-summary-card">
          <span>{{ __('rider.schedule.stats.contracted_title') }}</span>
          <strong id="summary-contratadas">--</strong>
          <small>{{ __('rider.schedule.stats.contracted_hint') }}</small>
        </article>
        <article class="schedule-summary-card">
          <span>{{ __('rider.schedule.stats.wildcards_title') }}</span>
          <strong id="summary-comodines">{{ $summary['wildcards'] ?? 0 }}</strong>
          <small>{{ __('rider.schedule.stats.wildcards_hint') }}</small>
        </article>
        <article class="schedule-summary-card">
          <span>{{ __('rider.schedule.stats.pending_title') }}</span>
          <strong id="summary-pendientes">--</strong>
          <small>{{ __('rider.schedule.stats.pending_hint') }}</small>
        </article>
      </section>

      <section class="rider-schedule__support" id="support-section">
        <div>
          <h2>{{ __('rider.schedule.support.title') }}</h2>
          <p>{{ __('rider.schedule.support.body') }}</p>
        </div>
        <div class="d-flex flex-wrap gap-2 align-items-start">
          <a class="btn btn-outline-primary" href="mailto:{{ $supportEmail }}">
            <i class="ti tabler-mail"></i>
            {{ $supportEmail }}
          </a>
          <a class="btn btn-outline-secondary" href="{{ $supportPhoneDial ? 'tel:'.$supportPhoneDial : '#' }}">
            <i class="ti tabler-phone"></i>
            {{ $supportPhone }}
          </a>
        </div>
        <div class="text-body-secondary small">
          <strong>{{ __('rider.schedule.support.hours_label') }}</strong>
          <div>{{ __('rider.schedule.support.hours_value') }}</div>
        </div>
      </section>

    </main>

    @include('rider.partials.nav', [
      'navActive' => 'schedule',
      'navItems' => ['home', 'schedule', 'profile'],
    ])
  </div>
@endsection

@section('page-script')
  <script>
    window.riderScheduleStrings = {
      noSchedule: @json(__('rider.schedule.no_schedule')),
      slot: {
        mine: @json(__('rider.schedule.slot.mine')),
        available: @json(__('rider.schedule.slot.available')),
        locked: @json(__('rider.schedule.slot.locked'))
      },
      actions: {
        cancel: @json(__('rider.schedule.actions.cancel'))
      },
      messages: {
        errorTitle: @json(__('rider.schedule.messages.error_title')),
        updateFailed: @json(__('rider.schedule.messages.update_failed')),
        networkError: @json(__('rider.schedule.messages.network_error')),
        countdownExpired: @json(__('rider.schedule.countdown_expired'))
      }
    };
    window.riderScheduleAdminStrings = {
      resetTitle: @json(__('rider.schedule.admin.reset_modal.title')),
      resetBody: @json(__('rider.schedule.admin.reset_modal.body')),
      resetWildcards: @json(__('rider.schedule.admin.reset_modal.reset_wildcards')),
      unlock: @json(__('rider.schedule.admin.reset_modal.unlock')),
      confirm: @json(__('rider.schedule.admin.reset_modal.confirm')),
      cancel: @json(__('rider.schedule.admin.reset_modal.cancel')),
      confirmFallback: @json(__('rider.schedule.admin.reset_modal.confirm_fallback')),
      successTitle: @json(__('rider.schedule.admin.reset_modal.success_title')),
      successText: @json(__('rider.schedule.admin.reset_modal.success_text')),
      errorTitle: @json(__('rider.schedule.admin.reset_modal.error_title')),
      errorText: @json(__('rider.schedule.admin.reset_modal.error_text')),
      networkError: @json(__('rider.schedule.messages.network_error')),
      noName: @json(__('rider.schedule.admin.search_no_name'))
    };
  </script>
  <script>
    const csrfToken = '{{ csrf_token() }}';
    const selectUrl = '{{ route('rider.schedule.select') }}';
    const deselectUrl = '{{ route('rider.schedule.deselect') }}';
    const defaultDay = '{{ $defaultDay }}';
    const apiUrl = '{{ route('rider.schedule.data') }}';
    const isLocked = {{ json_encode($isLocked ?? false) }};
    const forecastId = '{{ $forecast_id ?? 'null' }}';
    const initialScheduleData = @json($scheduleData);
    const initialReservedHours = {{ $summary['reservedHours'] ?? 0 }};
    const initialContractedHours = {{ $summary['contractedHours'] ?? 0 }};
    const initialEditsRemaining = {{ $summary['wildcards'] ?? 0 }};
  </script>
  @if (!empty($adminMode))
    <script>
      (function(){
        const input = document.getElementById('rider_search');
        const results = document.getElementById('rider_results');
        const hiddenId = document.getElementById('rider_id');
        if (!input || !results || !hiddenId) return;
        let timer = null;
        function fetchRiders(term){
          if (!term || term.length < 2) { results.style.display='none'; results.innerHTML=''; return; }
          const url = '{{ route('admin.api.riders') }}' + '?q=' + encodeURIComponent(term) + '&active=1';
          fetch(url, { headers:{ 'Accept':'application/json' } })
            .then(r=>r.json())
            .then(j => {
              const list = (j.data || []).slice(0, 15);
              if (!list.length) { results.style.display='none'; results.innerHTML=''; return; }
              const html = list.map(u => {
                const label = u.name && u.name.trim() ? u.name : (adminStrings.noName || '(No name)');
                return `
                <button type="button" class="list-group-item list-group-item-action" data-id="${u.id}">
                  <div class="d-flex justify-content-between align-items-center">
                    <div><strong>${label}</strong> <small class="text-muted">${u.email || ''}</small></div>
                    <span class="badge bg-label-primary">#${u.id}</span>
                  </div>
                </button>
              `;
              }).join('');
              results.innerHTML = `<div class=\"list-group list-group-flush\">${html}</div>`;
              results.style.display='block';
              Array.from(results.querySelectorAll('[data-id]')).forEach(el => {
                el.addEventListener('click', () => {
                  hiddenId.value = el.getAttribute('data-id');
                  input.value = el.textContent.trim();
                  results.style.display='none';
                  results.innerHTML='';
                });
              });
            }).catch(()=>{ results.style.display='none'; });
        }
        input.addEventListener('input', () => { clearTimeout(timer); timer = setTimeout(()=>fetchRiders(input.value.trim()), 250); });
        document.addEventListener('click', (e) => { if (!results.contains(e.target) && e.target !== input) { results.style.display='none'; } });
      })();
    </script>
    <script>
      (function(){
        const btn = document.getElementById('btn-reset-week');
        const card = document.querySelector('.schedule-card');
        if (!btn || !card) return;
        const adminStrings = window.riderScheduleAdminStrings || {};
        const riderId = card.dataset.riderId ? parseInt(card.dataset.riderId, 10) : null;
        const forecastId = card.dataset.forecastId && card.dataset.forecastId !== 'null' ? parseInt(card.dataset.forecastId, 10) : null;
        const force = card.dataset.force === 'true';
        btn.addEventListener('click', async () => {
          const ask = window.Swal ? await Swal.fire({
            title: adminStrings.resetTitle,
            html: `<div class="text-start">${adminStrings.resetBody || ''}</div>` +
                  `<div class="form-check mt-2"><input type="checkbox" id="sw-reset-wildcards" class="form-check-input"><label for="sw-reset-wildcards" class="form-check-label">${adminStrings.resetWildcards || ''}</label></div>` +
                  `<div class="form-check mt-1"><input type="checkbox" id="sw-unlock" class="form-check-input"><label for="sw-unlock" class="form-check-label">${adminStrings.unlock || ''}</label></div>`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: adminStrings.confirm,
            cancelButtonText: adminStrings.cancel
          }) : { isConfirmed: confirm(adminStrings.confirmFallback || adminStrings.resetBody || '') };
          if (!ask.isConfirmed && ask !== true) return;
          const resetWildcards = window.Swal ? document.getElementById('sw-reset-wildcards').checked : false;
          const unlock = window.Swal ? document.getElementById('sw-unlock').checked : false;
          try {
            const res = await fetch('{{ route('admin.api.schedule.reset_week') }}', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
              body: JSON.stringify({ rider_id: riderId, forecast_id: forecastId, force: force, reset_wildcards: resetWildcards, unlock: unlock })
            });
            const j = await res.json();
            if (!res.ok || !j.success) {
              const errorText = j.message || adminStrings.errorText || '';
              if (window.Swal) Swal.fire({icon:'error', title: adminStrings.errorTitle || 'Error', text: errorText});
              else alert(errorText);
              return;
            }
            if (window.Swal) Swal.fire({icon:'success', title: adminStrings.successTitle || 'OK', text: adminStrings.successText || ''});
            window.location.reload();
          } catch(e) {
            console.error(e);
            alert(adminStrings.networkError || 'Network error');
          }
        });
      })();
    </script>
  @endif
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const nav = document.querySelector('.rider-nav');
      if (!nav) return;
      const navItems = Array.from(nav.querySelectorAll('[data-nav-link]'));
      const managedItems = navItems.filter(item => item.dataset.scrollTarget || item.dataset.localActive === 'true' || item.dataset.tabTarget);

      const activateItem = (active) => {
        managedItems.forEach(item => {
          const isActive = item === active;
          item.classList.toggle('is-active', isActive);
          if (item.dataset.localActive === 'true') {
            if (isActive) {
              item.setAttribute('aria-current', 'page');
            } else {
              item.removeAttribute('aria-current');
            }
          }
        });
      };

      const switchTab = (target) => {
        const tab = document.querySelector(`.schedule-tab[data-tab="${target}"]`);
        const panel = document.getElementById(`${target}-content`);
        if (!tab || !panel) return;
        document.querySelectorAll('.schedule-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.schedule-content').forEach(c => c.classList.remove('active'));
        tab.classList.add('active');
        panel.classList.add('active');
      };

      managedItems.forEach(item => {
        item.addEventListener('click', event => {
          const scrollTarget = item.dataset.scrollTarget;
          const tabTarget = item.dataset.tabTarget;

          if (tabTarget) {
            event.preventDefault();
            switchTab(tabTarget);
            activateItem(item);
            return;
          }

          if (scrollTarget) {
            const section = document.getElementById(scrollTarget);
            if (section) {
              event.preventDefault();
              section.scrollIntoView({ behavior: 'smooth', block: 'start' });
              activateItem(item);
            }
            return;
          }

          if (item.dataset.localActive === 'true') {
            activateItem(item);
          }
        });
      });

      const currentItem = nav.querySelector('[aria-current]');
      if (currentItem) activateItem(currentItem);

      const observerTargets = managedItems
        .map(item => item.dataset.scrollTarget)
        .filter(Boolean)
        .map(id => document.getElementById(id))
        .filter(Boolean);

      if ('IntersectionObserver' in window && observerTargets.length) {
        const observer = new IntersectionObserver(entries => {
          const visible = entries
            .filter(entry => entry.isIntersecting)
            .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
          if (!visible.length) return;
          const match = managedItems.find(item => item.dataset.scrollTarget === visible[0].target.id);
          if (match) activateItem(match);
        }, { rootMargin: '-55% 0px -35% 0px', threshold: [0.3, 0.6] });

        observerTargets.forEach(section => observer.observe(section));
      }

      document.querySelectorAll('.schedule-tab').forEach(tab => {
        tab.addEventListener('click', () => {
          const target = tab.dataset.tab;
          const navMatch = managedItems.find(item => item.dataset.tabTarget === target);
          if (navMatch) activateItem(navMatch);
        });
      });
    });
  </script>
  @vite(['resources/assets/js/rider/schedule/schedule-picker.js'])
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const nextWeekBtn = document.querySelector('.rider-schedule__week-btn.has-future[data-bs-toggle="tooltip"]');
      if (nextWeekBtn && window.bootstrap && window.bootstrap.Tooltip) {
        new bootstrap.Tooltip(nextWeekBtn);
      }
    });
  </script>
@endsection