@php
$pageConfigs = ['navbarType' => 'hidden', 'contentLayout' => 'wide'];
$configData = Helper::appClasses();
$statusMap = [
  'pending' => ['Pendiente', 'warning'],
  'confirmed' => ['Confirmado', 'info'],
  'at_restaurant' => ['En restaurante', 'primary'],
  'en_route' => ['En camino', 'primary'],
  'delivered' => ['Entregado', 'success'],
  'cancelled' => ['Cancelado', 'danger'],
];
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Repartidor')

@section('content')
<div class="courier-dashboard">
  @php
    $isActive = $courier && $courier->is_active;
    $isOnline = $isActive && $courier->is_online;
  @endphp
  @if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  <div class="courier-desktop">
    <div class="card mb-3">
      <div class="card-body d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
          <i class="icon-base ti tabler-bike"></i>
          <span class="fw-medium">Mis entregas</span>
        </div>
        <div class="d-flex align-items-center gap-2">
          <span class="badge {{ $isActive ? ($isOnline ? 'bg-label-success' : 'bg-label-secondary') : 'bg-label-danger' }}">
            {{ !$isActive ? 'Desactivado' : ($isOnline ? 'En línea' : 'Desconectado') }}
          </span>
          <button class="btn btn-outline-primary btn-sm" type="button" id="enable-alerts-btn">
            Activar alertas
          </button>
          <button class="btn btn-outline-secondary btn-sm d-none" type="button" id="install-app-btn">
            Instalar app
          </button>
        </div>
      </div>
    </div>

    <div class="row g-3">
      <div class="col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <div class="d-flex align-items-center gap-2 mb-3">
              <button class="btn btn-dark btn-sm rounded-pill">
                Pendiente <span class="badge bg-warning text-dark ms-1">{{ $statusCounts['pending'] }}</span>
              </button>
              <button class="btn btn-label-secondary btn-sm rounded-pill">
                Confirmado <span class="badge bg-info text-white ms-1">{{ $statusCounts['confirmed'] }}</span>
              </button>
              <button class="btn btn-label-secondary btn-sm rounded-pill">
                En restaurante <span class="badge bg-primary text-white ms-1">{{ $statusCounts['at_restaurant'] }}</span>
              </button>
              <button class="btn btn-label-secondary btn-sm rounded-pill">
                En camino <span class="badge bg-primary text-white ms-1">{{ $statusCounts['en_route'] }}</span>
              </button>
              <button class="btn btn-label-secondary btn-sm rounded-pill">
                Entregado <span class="badge bg-success text-white ms-1">{{ $statusCounts['delivered'] }}</span>
              </button>
            </div>

            @php
              $currentDelivery = $pendingDelivery ?? null;
            @endphp
            @if (!$isActive)
              <div class="text-center text-muted py-4">
                El repartidor está desactivado. No puede recibir pedidos.
              </div>
            @elseif (!$isOnline)
              <div class="text-center text-muted py-4">
                Estás desconectado. Activa el estado en línea para recibir pedidos.
              </div>
    @elseif ($currentDelivery)
              <div class="courier-sheet shadow-sm border rounded-3">
                <div class="sheet-header">
                  <h5>Nuevo pedido</h5>
                  <span class="badge bg-label-primary">#{{ $currentDelivery->id }}</span>
                </div>
                <div class="auto-decline" data-assigned-at="{{ ($currentDelivery->assigned_at ?? $currentDelivery->updated_at)->toIso8601String() }}">
                  <span class="auto-decline-text">20 segundos para auto-rechazar</span>
                  <div class="auto-decline-bar"></div>
                </div>
                @php
                  $origin = $currentDelivery->restaurant?->address ?? '';
                  $destination = $currentDelivery->delivery_address ?? '';
                  $navApp = auth()->user()->nav_app ?? 'maps';
                  $navUrl = $navApp === 'waze'
                    ? 'https://waze.com/ul?q=' . urlencode($destination) . '&navigate=yes'
                    : 'https://www.google.com/maps/dir/?api=1&origin=' . urlencode($origin) . '&destination=' . urlencode($destination);
                @endphp
                <div class="sheet-body">
                  <div class="sheet-row">
                    <i class="icon-base ti tabler-building-store"></i>
                    <div>
                      <div class="fw-medium">Recogida</div>
                      <small class="text-muted">{{ $currentDelivery->restaurant?->address ?? 'Restaurante' }}</small>
                    </div>
                    <a class="sheet-nav" href="{{ $navUrl }}" target="_blank" rel="noopener" title="Abrir navegación">
                      <i class="icon-base ti tabler-navigation"></i>
                    </a>
                  </div>
                  <div class="sheet-row">
                    <i class="icon-base ti tabler-map-pin"></i>
                    <div>
                      <div class="fw-medium">Entrega</div>
                      <small class="text-muted">{{ $currentDelivery->delivery_address }}</small>
                    </div>
                    <a class="sheet-nav" href="{{ $navUrl }}" target="_blank" rel="noopener" title="Abrir navegación">
                      <i class="icon-base ti tabler-navigation"></i>
                    </a>
                  </div>
                </div>
                <div class="sheet-actions">
                  <form method="POST" action="{{ route('courier.deliveries.status', $currentDelivery) }}">
                    @csrf
                    <input type="hidden" name="status" value="confirmed" />
                    <button class="btn btn-success w-100" type="submit">Aceptar pedido</button>
                  </form>
                  <div class="reject-wrapper">
                    <button class="btn btn-outline-danger w-100" type="button" data-bs-toggle="dropdown">
                      <i class="icon-base ti tabler-x"></i> Rechazar
                    </button>
                    <div class="dropdown-menu w-100">
                      <button class="dropdown-item" type="button" data-reason="Me encuentro ocupado">Me encuentro ocupado</button>
                      <button class="dropdown-item" type="button" data-reason="Me encuentro lejos">Me encuentro lejos</button>
                    </div>
                  </div>
                </div>
              </div>
            @else
              <div class="text-center text-muted py-4">
                No hay pedidos nuevos por ahora.
              </div>
            @endif
          </div>
        </div>
      </div>

      <div class="col-lg-8">
        <div class="card h-100">
          <div class="card-body">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <h5 class="mb-0">Ubicación</h5>
              <span class="text-muted" id="location-status">Esperando GPS…</span>
            </div>
            <div id="courier-map-desktop" class="courier-map"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="courier-mobile">
    @php
      $mobileStatusText = !$isActive ? 'Desactivado' : ($isOnline ? 'En línea' : 'Desconectado');
      $mobileStatusClass = !$isActive ? 'is-danger' : ($isOnline ? 'is-online' : 'is-offline');
    @endphp
    <div class="courier-mobile-map">
      <div id="courier-map-mobile"></div>

      <div class="courier-mobile-overlay">
        <div class="courier-mobile-status-card">
          <div class="status-main">
            <span class="status-kicker">Estado del rider</span>
            <div class="status-line">
              <span class="status-dot {{ $mobileStatusClass }}"></span>
              <strong class="status-text {{ $mobileStatusClass }}">{{ $mobileStatusText }}</strong>
            </div>
          </div>
          <div class="status-actions">
            <button class="btn btn-icon btn-sm courier-pill-install d-none" type="button" id="install-app-fab" title="Instalar app" data-ui-action>
              <i class="icon-base ti tabler-download"></i>
            </button>
            <button class="btn btn-icon btn-sm courier-pill-alert" type="button" id="enable-alerts-fab" title="Activar alertas" data-ui-action>
              <i class="icon-base ti tabler-bell"></i>
            </button>
          </div>
        </div>

        <div class="courier-mobile-summary">
          <a class="mobile-summary-chip" href="{{ route('courier.orders.index') }}" data-ui-action>
            <i class="icon-base ti tabler-clipboard-text"></i>
            <span>Activos</span>
            <strong>{{ $mobileSummary['active'] ?? 0 }}</strong>
          </a>
          <a class="mobile-summary-chip" href="{{ route('courier.records.index') }}" data-ui-action>
            <i class="icon-base ti tabler-checks"></i>
            <span>Hoy</span>
            <strong>{{ $mobileSummary['delivered_today'] ?? 0 }}</strong>
          </a>
          <a class="mobile-summary-chip" href="{{ route('courier.records.index') }}" data-ui-action>
            <i class="icon-base ti tabler-coins"></i>
            <span>Hoy €</span>
            <strong>{{ number_format((float) ($mobileSummary['earnings_today'] ?? 0), 2) }}</strong>
          </a>
        </div>

        <div class="courier-mobile-health is-seeking" data-mobile-health>
          <i class="icon-base ti tabler-antenna-bars-5"></i>
          <span data-mobile-health-text>Comprobando red y GPS...</span>
        </div>

        <div class="courier-mobile-gps">
          <i class="icon-base ti tabler-map-pin"></i>
          <span data-location-status-text>Esperando GPS...</span>
        </div>
      </div>
    </div>

    @php
      $currentDelivery = $pendingDelivery ?? null;
    @endphp

    @if ($isActive && $isOnline && $currentDelivery)
      @php
        $origin = $currentDelivery->restaurant?->address ?? '';
        $destination = $currentDelivery->delivery_address ?? '';
        $navApp = auth()->user()->nav_app ?? 'maps';
        $navUrl = $navApp === 'waze'
          ? 'https://waze.com/ul?q=' . urlencode($destination) . '&navigate=yes'
          : 'https://www.google.com/maps/dir/?api=1&origin=' . urlencode($origin) . '&destination=' . urlencode($destination);
      @endphp
      <div class="courier-sheet courier-sheet-live" data-swipe-card data-swipe-accept-form="mobile-accept-{{ $currentDelivery->id }}" data-swipe-reject-form="mobile-reject-{{ $currentDelivery->id }}">
        <div class="sheet-headline">
          <div>
            <div class="sheet-kicker">Solicitud activa</div>
            <h5 class="mb-0">#{{ $currentDelivery->id }}</h5>
          </div>
          <div class="sheet-headline-actions">
            <div class="sheet-badges">
              <span class="sheet-chip is-pending">Pendiente</span>
              @if ($currentDelivery->is_urgent)
                <span class="sheet-chip is-urgent">
                  <i class="icon-base ti tabler-flame"></i>
                  Urgente
                </span>
              @endif
            </div>
            <a
              class="sheet-detail-icon"
              href="{{ route('courier.orders.show', ['delivery' => $currentDelivery->id, 'from' => 'map']) }}"
              title="Ver detalle"
              aria-label="Ver detalle"
              data-ui-action
            >
              <i class="icon-base ti tabler-eye"></i>
            </a>
          </div>
        </div>

        <div class="auto-decline" data-assigned-at="{{ ($currentDelivery->assigned_at ?? $currentDelivery->updated_at)->toIso8601String() }}">
          <span class="auto-decline-text">20 segundos para auto-rechazar</span>
          <div class="auto-decline-bar"></div>
        </div>
        <div class="swipe-hint">
          <i class="icon-base ti tabler-arrows-left-right"></i>
          Derecha para aceptar. Izquierda para abrir confirmación de rechazo.
        </div>

        <div class="sheet-route">
          <div class="sheet-stop is-pickup">
            <span class="sheet-stop-icon"><i class="icon-base ti tabler-building-store"></i></span>
            <div class="sheet-stop-content">
              <small>Recogida</small>
              <strong>{{ $currentDelivery->restaurant?->address ?? 'Restaurante' }}</strong>
            </div>
            <a class="sheet-nav" href="{{ $navUrl }}" target="_blank" rel="noopener" title="Abrir navegación" data-ui-action>
              <i class="icon-base ti tabler-navigation"></i>
            </a>
          </div>
          <div class="sheet-stop is-dropoff">
            <span class="sheet-stop-icon"><i class="icon-base ti tabler-map-pin"></i></span>
            <div class="sheet-stop-content">
              <small>Entrega</small>
              <strong>{{ $currentDelivery->delivery_address }}</strong>
            </div>
            <a class="sheet-nav" href="{{ $navUrl }}" target="_blank" rel="noopener" title="Abrir navegación" data-ui-action>
              <i class="icon-base ti tabler-navigation"></i>
            </a>
          </div>
        </div>

        <form id="mobile-accept-{{ $currentDelivery->id }}" method="POST" action="{{ route('courier.deliveries.status', $currentDelivery) }}" class="d-none">
          @csrf
          <input type="hidden" name="status" value="confirmed" />
        </form>
        <form id="mobile-reject-{{ $currentDelivery->id }}" method="POST" action="{{ route('courier.deliveries.reject', $currentDelivery) }}" class="d-none">
          @csrf
          <input type="hidden" name="reason" value="Rechazado por confirmación" />
        </form>

      </div>
      <div class="reject-modal d-none" data-reject-confirm>
        <button class="reject-modal-backdrop" type="button" aria-label="Cerrar confirmación" data-cancel-reject></button>
        <div class="reject-modal-card" role="dialog" aria-modal="true" aria-label="Confirmar rechazo">
          <div class="reject-modal-icon">
            <i class="icon-base ti tabler-alert-triangle"></i>
          </div>
          <h6>¿Rechazar este pedido?</h6>
          <p>Si continúas, el pedido volverá a la cola de asignación.</p>
          <div class="reject-modal-actions">
            <button class="btn btn-outline-secondary btn-sm" type="button" data-cancel-reject data-ui-action>No</button>
            <button class="btn btn-danger btn-sm" type="button" data-submit-reject="mobile-reject-{{ $currentDelivery->id }}" data-ui-action>Sí, rechazar</button>
          </div>
        </div>
      </div>
    @elseif ($isActive && $isOnline)
      <div class="courier-sheet courier-sheet-empty">
        <div class="sheet-empty">
          <span class="sheet-empty-icon"><i class="icon-base ti tabler-radar-2"></i></span>
          <h5>Buscando pedidos</h5>
          <p class="text-muted mb-0">Mantén el GPS activo. Te avisaremos en cuanto entre un pedido.</p>
        </div>
      </div>
    @elseif (!$isActive)
      <div class="courier-sheet courier-sheet-empty">
        <div class="sheet-empty">
          <span class="sheet-empty-icon is-danger"><i class="icon-base ti tabler-lock"></i></span>
          <h5>Cuenta desactivada</h5>
          <p class="text-muted mb-0">Contacta al administrador para habilitar el acceso.</p>
        </div>
      </div>
    @else
      <div class="courier-sheet courier-sheet-empty">
        <div class="sheet-empty">
          <span class="sheet-empty-icon is-offline"><i class="icon-base ti tabler-power"></i></span>
          <h5>Estás desconectado</h5>
          <p class="text-muted mb-0">Activa tu estado para comenzar a recibir pedidos.</p>
        </div>
      </div>
    @endif

    <nav class="courier-bottom-nav">
      <a class="active" href="{{ route('courier.dashboard') }}" data-ui-action>
        <i class="icon-base ti tabler-map"></i>
        <span>Mapa</span>
      </a>
      <a href="{{ route('courier.orders.index') }}" data-ui-action>
        <i class="icon-base ti tabler-clipboard-text"></i>
        <span>Pedidos</span>
      </a>
      <a href="{{ route('courier.records.index') }}" data-ui-action>
        <i class="icon-base ti tabler-history"></i>
        <span>Historial</span>
      </a>
      <a href="{{ route('courier.profile.edit') }}" data-ui-action>
        <i class="icon-base ti tabler-user"></i>
        <span>Perfil</span>
      </a>
    </nav>
  </div>
</div>
@endsection

@section('page-style')
  <style>
    .courier-dashboard {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .courier-map {
      height: calc(100vh - 220px);
      border-radius: 14px;
      background: #141622;
    }
    .delivery-list {
      overflow-y: auto;
      padding-right: 4px;
    }
    .delivery-item {
      border: 1px solid rgba(15, 20, 34, 0.08);
      border-radius: 14px;
      padding: 16px;
      background: #fff;
    }
    .courier-mobile {
      display: none;
      min-height: 100vh;
      flex-direction: column;
      padding-bottom: 0;
      margin: 0;
      height: 100vh;
      background: #f1f3fa;
      overflow: hidden;
    }
    .courier-mobile-map {
      position: relative;
      flex: 0 0 47vh;
      min-height: 47vh;
      border-radius: 0;
      overflow: hidden;
      background: #f5f5f7;
      margin: 0;
      padding: 0;
      width: 100vw;
    }
    #courier-map-mobile {
      height: 100%;
      width: 100%;
    }
    #courier-map-mobile iframe,
    #courier-map-desktop iframe {
      border: 0;
      width: 100%;
      height: 100%;
    }
    .courier-mobile-map .gm-style,
    .courier-mobile-map .gm-style > div {
      border-radius: 0 !important;
    }
    .courier-mobile-map .gm-style .gm-control-active,
    .courier-mobile-map .gm-style .gmnoprint,
    .courier-mobile-map .gm-style .gm-style-cc,
    .courier-mobile-map .gm-style .gm-fullscreen-control,
    .courier-mobile-map .gm-style .gm-svpc,
    .courier-mobile-map .gm-style .gm-bundled-control {
      display: none !important;
    }
    .courier-mobile-overlay {
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      z-index: 8;
      display: grid;
      gap: 10px;
      pointer-events: none;
    }
    .courier-mobile-status-card {
      pointer-events: auto;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: 0 10px 24px rgba(15, 20, 34, 0.2);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .status-main {
      min-width: 0;
    }
    .status-kicker {
      display: block;
      color: #8a86a1;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      line-height: 1.1;
      margin-bottom: 2px;
    }
    .status-line {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }
    .status-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #9f9cb3;
      box-shadow: 0 0 0 4px rgba(159, 156, 179, 0.2);
      flex: 0 0 auto;
    }
    .status-dot.is-online {
      background: #28c76f;
      box-shadow: 0 0 0 4px rgba(40, 199, 111, 0.22);
    }
    .status-dot.is-offline {
      background: #9f9cb3;
      box-shadow: 0 0 0 4px rgba(159, 156, 179, 0.2);
    }
    .status-dot.is-danger {
      background: #ea5455;
      box-shadow: 0 0 0 4px rgba(234, 84, 85, 0.2);
    }
    .status-text {
      color: #3f3a57;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .status-text.is-online {
      color: #18824b;
    }
    .status-text.is-offline {
      color: #67627f;
    }
    .status-text.is-danger {
      color: #b54142;
    }
    .status-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .courier-pill-alert,
    .courier-pill-install {
      border: none;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin: 0;
      box-shadow: inset 0 0 0 1px rgba(75, 70, 92, 0.15);
      background: #fff;
      color: #6f6b84;
    }
    .courier-pill-alert {
      color: #8985a0;
    }
    .courier-pill-alert i,
    .courier-pill-install i {
      font-size: 15px;
    }
    .courier-pill-alert.is-active {
      background: rgba(40, 199, 111, 0.2);
      color: #18824b;
      box-shadow: inset 0 0 0 1px rgba(40, 199, 111, 0.3);
    }
    .courier-mobile-summary {
      pointer-events: auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }
    .mobile-summary-chip {
      border: 1px solid rgba(255, 255, 255, 0.42);
      border-radius: 11px;
      background: rgba(20, 23, 36, 0.64);
      color: #f7f8fc;
      padding: 7px 8px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 700;
      text-decoration: none;
      backdrop-filter: blur(4px);
      box-shadow: 0 8px 16px rgba(15, 20, 34, 0.18);
    }
    .mobile-summary-chip i {
      font-size: 13px;
      color: #9fc4ff;
    }
    .mobile-summary-chip span {
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-summary-chip strong {
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      color: #fff;
    }
    .courier-mobile-health {
      pointer-events: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      max-width: 100%;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      border: 1px solid rgba(75, 70, 92, 0.14);
      background: rgba(255, 255, 255, 0.92);
      color: #5f5b76;
      box-shadow: 0 8px 18px rgba(15, 20, 34, 0.16);
    }
    .courier-mobile-health i {
      font-size: 13px;
    }
    .courier-mobile-health.is-ok {
      border-color: rgba(40, 199, 111, 0.35);
      color: #19834b;
      background: rgba(234, 251, 243, 0.95);
    }
    .courier-mobile-health.is-weak {
      border-color: rgba(255, 159, 67, 0.34);
      color: #b96d1a;
      background: rgba(255, 245, 232, 0.95);
    }
    .courier-mobile-health.is-offline {
      border-color: rgba(234, 84, 85, 0.32);
      color: #b54344;
      background: rgba(255, 239, 239, 0.95);
    }
    .courier-mobile-health.is-seeking {
      border-color: rgba(105, 108, 255, 0.32);
      color: #595dd8;
      background: rgba(239, 241, 255, 0.95);
    }
    .courier-mobile-gps {
      pointer-events: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      max-width: 100%;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      color: #313047;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 8px 18px rgba(15, 20, 34, 0.16);
    }
    .courier-mobile-gps i {
      color: #696cff;
      font-size: 13px;
    }
    #install-app-btn {
      white-space: nowrap;
    }
    #enable-alerts-btn.is-active {
      border-color: rgba(40, 199, 111, 0.45);
      color: #28c76f;
    }
    .courier-desktop .courier-sheet {
      background: #fff;
      border: 1px solid rgba(15, 20, 34, 0.08);
      border-radius: 16px;
      padding: 14px;
    }
    .courier-desktop .sheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .courier-desktop .sheet-row {
      display: flex;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(15, 20, 34, 0.06);
      align-items: center;
    }
    .courier-desktop .sheet-row:last-child {
      border-bottom: none;
    }
    .courier-desktop .sheet-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 12px;
    }
    .courier-desktop .sheet-nav {
      margin-left: auto;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(15, 20, 34, 0.08);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #28c76f;
      text-decoration: none;
      background: #f7f7fb;
    }
    .courier-mobile .courier-sheet {
      background: linear-gradient(165deg, #ffffff 0%, #fafbff 100%);
      border-radius: 22px 22px 0 0;
      padding: 16px 16px calc(92px + env(safe-area-inset-bottom));
      box-shadow:
        0 -14px 30px rgba(15, 20, 34, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      margin-top: -16px;
      z-index: 5;
      flex: 1 1 auto;
      overflow-y: auto;
      border-top: 1px solid rgba(15, 20, 34, 0.08);
      min-height: 0;
    }
    .courier-sheet-live {
      border-top: 2px solid rgba(105, 108, 255, 0.35);
    }
    .sheet-headline {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .sheet-headline-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .sheet-kicker {
      color: #8b87a3;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.1;
      margin-bottom: 2px;
      font-weight: 700;
    }
    .sheet-headline h5 {
      color: #343048;
      font-size: 24px;
      line-height: 1.05;
      font-weight: 800;
    }
    .sheet-badges {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .sheet-detail-icon {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      border: 1px solid rgba(105, 108, 255, 0.28);
      background: rgba(105, 108, 255, 0.12);
      color: #5459db;
      text-decoration: none;
      transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
    }
    .sheet-detail-icon:active {
      transform: scale(0.95);
    }
    .sheet-detail-icon:hover {
      color: #4a50d6;
      background: rgba(105, 108, 255, 0.2);
      box-shadow: 0 6px 14px rgba(105, 108, 255, 0.2);
    }
    .sheet-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      border: 1px solid rgba(15, 20, 34, 0.12);
      background: #f6f7fc;
      color: #66627c;
    }
    .sheet-chip.is-pending {
      border-color: rgba(255, 159, 67, 0.36);
      background: #fff3e6;
      color: #c46f1b;
    }
    .sheet-chip.is-urgent {
      border-color: rgba(234, 84, 85, 0.35);
      background: #ffeff0;
      color: #d74748;
    }
    .auto-decline {
      font-size: 12px;
      color: #6f6b84;
      margin: 8px 0 12px;
      padding: 9px 10px;
      border-radius: 11px;
      border: 1px solid rgba(75, 70, 92, 0.14);
      background: #fbfbff;
    }
    .auto-decline-bar {
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, #696cff 0%, #28c76f 100%);
      margin-top: 6px;
      width: 100%;
      transition: width 0.25s linear;
    }
    .swipe-hint {
      margin-top: -6px;
      margin-bottom: 6px;
      border-radius: 11px;
      border: 1px dashed rgba(105, 108, 255, 0.28);
      background: rgba(105, 108, 255, 0.08);
      color: #595dd8;
      padding: 7px 9px;
      font-size: 11px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .courier-sheet[data-swipe-card] {
      transition: transform .18s ease, box-shadow .18s ease;
      will-change: transform;
    }
    .courier-sheet[data-swipe-card].is-swipe-right {
      box-shadow: 0 -14px 30px rgba(40, 199, 111, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .courier-sheet[data-swipe-card].is-swipe-left {
      box-shadow: 0 -14px 30px rgba(234, 84, 85, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .courier-sheet[data-swipe-card].is-commit-right {
      animation: swipeCommitRight .22s ease-out forwards;
    }
    @keyframes swipeCommitRight {
      0% {
        transform: translateX(70px) scale(1);
      }
      100% {
        transform: translateX(140px) scale(0.985);
        opacity: 0.92;
      }
    }
    .sheet-route {
      display: grid;
      gap: 9px;
    }
    .sheet-stop {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 9px;
      border: 1px solid rgba(75, 70, 92, 0.13);
      border-radius: 14px;
      padding: 10px;
      background: #fff;
      box-shadow:
        0 8px 18px rgba(15, 20, 34, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    .sheet-stop.is-pickup::after {
      content: "";
      position: absolute;
      left: 20px;
      bottom: -13px;
      width: 2px;
      height: 13px;
      background: repeating-linear-gradient(
        to bottom,
        rgba(143, 140, 165, 0.55) 0 2px,
        transparent 2px 4px
      );
    }
    .sheet-stop-icon {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      flex: 0 0 30px;
      background: rgba(105, 108, 255, 0.14);
      color: #6467df;
      font-size: 15px;
    }
    .sheet-stop.is-pickup .sheet-stop-icon {
      background: rgba(0, 207, 232, 0.14);
      color: #0ca6be;
    }
    .sheet-stop.is-dropoff .sheet-stop-icon {
      background: rgba(255, 159, 67, 0.16);
      color: #d87919;
    }
    .sheet-stop-content {
      min-width: 0;
    }
    .sheet-stop-content small {
      display: block;
      color: #8a86a2;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 3px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .sheet-stop-content strong {
      color: #3d3952;
      font-size: 13px;
      line-height: 1.3;
      font-weight: 700;
      word-break: break-word;
    }
    .courier-mobile .sheet-nav {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      border: 1px solid rgba(15, 20, 34, 0.1);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #3f49d2;
      text-decoration: none;
      background: #f2f4ff;
      flex: 0 0 34px;
    }
    .sheet-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 12px;
    }
    .sheet-actions-inline {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .reject-wrapper .dropdown-menu {
      border-radius: 12px;
      padding: 6px;
      border: 1px solid rgba(15, 20, 34, 0.1);
      box-shadow: 0 10px 24px rgba(15, 20, 34, 0.14);
    }
    .reject-modal {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: grid;
      place-items: center;
      padding: 16px;
    }
    body.reject-modal-open {
      overflow: hidden;
    }
    .reject-modal-backdrop {
      position: absolute;
      inset: 0;
      border: none;
      padding: 0;
      margin: 0;
      background: rgba(15, 20, 34, 0.44);
      backdrop-filter: blur(2px);
    }
    .reject-modal-card {
      position: relative;
      width: min(360px, calc(100% - 20px));
      border-radius: 18px;
      border: 1px solid rgba(234, 84, 85, 0.22);
      background: linear-gradient(165deg, #ffffff 0%, #fff7f7 100%);
      box-shadow:
        0 20px 44px rgba(15, 20, 34, 0.26),
        0 8px 18px rgba(234, 84, 85, 0.16);
      padding: 16px;
      display: grid;
      gap: 10px;
      text-align: center;
      animation: rejectModalIn .16s ease-out;
    }
    @keyframes rejectModalIn {
      from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .reject-modal-icon {
      width: 34px;
      height: 34px;
      margin: 0 auto;
      border-radius: 11px;
      display: grid;
      place-items: center;
      color: #d84b4c;
      background: rgba(234, 84, 85, 0.14);
      border: 1px solid rgba(234, 84, 85, 0.28);
      font-size: 18px;
    }
    .reject-modal-card h6 {
      margin: 0;
      color: #3a364d;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.2;
    }
    .reject-modal-card p {
      margin: 0;
      color: #736f89;
      font-size: 13px;
      line-height: 1.35;
      font-weight: 600;
    }
    .reject-modal-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .courier-sheet-empty .sheet-empty {
      text-align: center;
      padding: 12px 4px 6px;
    }
    .sheet-empty-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin: 0 auto 10px;
      background: rgba(105, 108, 255, 0.14);
      color: #696cff;
      font-size: 20px;
    }
    .sheet-empty-icon.is-danger {
      background: rgba(234, 84, 85, 0.14);
      color: #d84a4b;
    }
    .sheet-empty-icon.is-offline {
      background: rgba(168, 170, 174, 0.18);
      color: #7d7f86;
    }
    .sheet-empty h5 {
      margin-bottom: 5px;
      font-size: 20px;
      color: #3a364d;
      font-weight: 800;
    }
    .courier-bottom-nav {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: max(8px, env(safe-area-inset-bottom));
      width: min(680px, calc(100% - 14px));
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(75, 70, 92, 0.16);
      border-radius: 18px;
      box-shadow:
        0 14px 28px rgba(15, 20, 34, 0.16),
        0 4px 10px rgba(15, 20, 34, 0.08);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      padding: 7px;
      z-index: 35;
    }
    .courier-bottom-nav a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      color: #79758f;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-decoration: none;
      border-radius: 12px;
      min-height: 52px;
      transition: color .2s ease, background .2s ease, transform .18s ease;
    }
    .courier-bottom-nav a i {
      font-size: 21px;
      line-height: 1;
    }
    .courier-bottom-nav a span {
      line-height: 1;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .courier-bottom-nav a:hover {
      color: #5f5a79;
      background: rgba(143, 140, 165, 0.1);
    }
    .courier-bottom-nav a.active {
      color: #169656;
      background: linear-gradient(160deg, rgba(40, 199, 111, 0.22), rgba(40, 199, 111, 0.12));
      box-shadow: inset 0 0 0 1px rgba(40, 199, 111, 0.28);
    }
    .courier-bottom-nav a:active {
      transform: translateY(1px);
    }
    [data-ui-action] {
      position: relative;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
    }
    [data-ui-action].is-pressed {
      transform: scale(0.98);
    }
    .ui-tap-ripple {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      pointer-events: none;
      background: rgba(105, 108, 255, 0.24);
      transform: translate(-50%, -50%) scale(0.2);
      animation: uiTapRipple .5s ease-out forwards;
      z-index: 2;
    }
    @keyframes uiTapRipple {
      0% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(0.2);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(8.5);
      }
    }
    @media (max-width: 380px) {
      .sheet-actions-inline {
        grid-template-columns: 1fr;
      }
      .courier-mobile-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mobile-summary-chip {
        padding: 7px;
      }
      .courier-bottom-nav {
        width: calc(100% - 10px);
        gap: 4px;
        padding: 6px;
      }
      .courier-bottom-nav a {
        min-height: 50px;
        font-size: 9px;
      }
      .courier-bottom-nav a i {
        font-size: 20px;
      }
    }
    @media (max-width: 991px) {
      .courier-desktop {
        display: none;
      }
      .courier-mobile {
        display: flex;
      }
      #layout-menu,
      .layout-navbar,
      .layout-menu-toggle,
      .content-footer {
        display: none !important;
      }
      html,
      body {
        height: 100% !important;
      }
      body,
      .layout-wrapper,
      .layout-page,
      .layout-content,
      .content-wrapper,
      .content-wrapper > * {
        margin: 0 !important;
        padding: 0 !important;
        height: 100%;
      }
      .layout-page {
        margin-top: 0 !important;
        padding-top: 0 !important;
      }
      .content-wrapper > .container-xxl,
      .content-wrapper > .container-xl,
      .content-wrapper > .container-lg,
      .content-wrapper > .container-md,
      .content-wrapper > .container-sm,
      .content-wrapper > .container {
        padding-top: 0 !important;
      }
      .layout-content {
        padding: 0 !important;
      }
      .content-wrapper {
        padding: 0 !important;
      }
      .container-p-y {
        padding: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-block-start: 0 !important;
        padding-block-end: 0 !important;
      }
      .layout-page .content-wrapper .container-p-y:not([class^=pb-], [class*=" pb-"]) {
        padding-block-end: 0 !important;
      }
      .layout-page .content-wrapper .container-p-y:not([class^=pt-], [class*=" pt-"]) {
        padding-block-start: 0 !important;
      }
      .layout-page {
        padding: 0 !important;
      }
      .container-xxl,
      .container-xl,
      .container-lg,
      .container-md,
      .container-sm,
      .container {
        --bs-gutter-x: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }
    }
  </style>
@endsection

@section('page-script')
  <script>
    const courierLocationStatusEls = Array.from(document.querySelectorAll('[data-location-status-text], #location-status'));
    const mobileHealthEl = document.querySelector('[data-mobile-health]');
    const mobileHealthTextEl = document.querySelector('[data-mobile-health-text]');
    let courierMap = null;
    let courierMarker = null;
    let pickupMarker = null;
    let dropoffMarker = null;
    let mapReady = false;

    const currentDelivery = @json($currentDeliveryData);

    const setCourierLocationStatus = (text) => {
      courierLocationStatusEls.forEach((el) => {
        el.textContent = text;
      });
    };

    const setMobileHealth = (state, text) => {
      if (!mobileHealthEl || !mobileHealthTextEl) return;
      mobileHealthEl.classList.remove('is-ok', 'is-weak', 'is-offline', 'is-seeking');
      mobileHealthEl.classList.add(state || 'is-seeking');
      mobileHealthTextEl.textContent = text || 'Comprobando red y GPS...';
    };

    const triggerTapFeedback = (target, evt) => {
      if (!target) return;
      target.classList.remove('is-pressed');
      void target.offsetWidth;
      target.classList.add('is-pressed');
      window.setTimeout(() => target.classList.remove('is-pressed'), 170);

      const rect = target.getBoundingClientRect();
      if (!rect.width || !rect.height) return;

      const ripple = document.createElement('span');
      ripple.className = 'ui-tap-ripple';
      const x = Number.isFinite(evt?.clientX) ? evt.clientX : rect.left + rect.width / 2;
      const y = Number.isFinite(evt?.clientY) ? evt.clientY : rect.top + rect.height / 2;
      ripple.style.left = `${x - rect.left}px`;
      ripple.style.top = `${y - rect.top}px`;
      target.appendChild(ripple);
      ripple.addEventListener('animationend', () => ripple.remove(), { once: true });
    };

    document.addEventListener('pointerdown', (event) => {
      const target = event.target.closest('[data-ui-action]');
      if (!target) return;
      triggerTapFeedback(target, event);
    });

    document.addEventListener('keydown', (event) => {
      if (event.key !== 'Enter' && event.key !== ' ') return;
      const target = event.target.closest('[data-ui-action]');
      if (!target) return;
      triggerTapFeedback(target);
    });

    function pickMapElement() {
      const mobileEl = document.getElementById('courier-map-mobile');
      const desktopEl = document.getElementById('courier-map-desktop');
      if (mobileEl && mobileEl.offsetParent && mobileEl.clientWidth > 0 && mobileEl.clientHeight > 0) {
        return mobileEl;
      }
      if (desktopEl && desktopEl.offsetParent && desktopEl.clientWidth > 0 && desktopEl.clientHeight > 0) {
        return desktopEl;
      }
      return mobileEl || desktopEl;
    }

    function initCourierMapInternal() {
      const mapEl = pickMapElement();
      if (!mapEl || !window.google) {
        return;
      }
      if (mapEl.clientWidth === 0 || mapEl.clientHeight === 0) {
        setTimeout(initCourierMapInternal, 150);
        return;
      }
      courierMap = new google.maps.Map(mapEl, {
        center: { lat: 42.2673, lng: 2.9617 },
        zoom: 13,
        mapTypeControl: false,
        fullscreenControl: false,
        streetViewControl: false,
        zoomControl: false,
        rotateControl: false,
        scaleControl: false,
        gestureHandling: 'greedy',
      });
      google.maps.event.addListenerOnce(courierMap, 'tilesloaded', () => {
        mapReady = true;
      });
      google.maps.event.addListenerOnce(courierMap, 'idle', () => {
        google.maps.event.trigger(courierMap, 'resize');
      });
      setTimeout(() => {
        if (courierMap) {
          google.maps.event.trigger(courierMap, 'resize');
          courierMap.setCenter(courierMap.getCenter());
        }
      }, 500);

      updateRouteMarkers(currentDelivery);
    }

    function centerOnCourier() {
      if (courierMap && courierMarker) {
        courierMap.setCenter(courierMarker.getPosition());
      }
    }

    function updateRouteMarkers(delivery) {
      if (!courierMap || !delivery) {
        return;
      }
      const pickupLat = delivery?.pickup?.lat;
      const pickupLng = delivery?.pickup?.lng;
      const dropLat = delivery?.dropoff?.lat;
      const dropLng = delivery?.dropoff?.lng;

      if (pickupLat && pickupLng) {
        const pos = { lat: parseFloat(pickupLat), lng: parseFloat(pickupLng) };
        if (!pickupMarker) {
          pickupMarker = new google.maps.Marker({ map: courierMap, position: pos, label: 'P' });
        } else {
          pickupMarker.setPosition(pos);
        }
      }
      if (dropLat && dropLng) {
        const pos = { lat: parseFloat(dropLat), lng: parseFloat(dropLng) };
        if (!dropoffMarker) {
          dropoffMarker = new google.maps.Marker({ map: courierMap, position: pos, label: 'D' });
        } else {
          dropoffMarker.setPosition(pos);
        }
      }
      if (pickupLat && pickupLng && dropLat && dropLng) {
        const bounds = new google.maps.LatLngBounds();
        bounds.extend({ lat: parseFloat(pickupLat), lng: parseFloat(pickupLng) });
        bounds.extend({ lat: parseFloat(dropLat), lng: parseFloat(dropLng) });
        courierMap.fitBounds(bounds);
      }
    }

    function updateLocation() {
      if (!navigator.onLine) {
        setMobileHealth('is-offline', 'Sin conexión a internet');
      } else {
        setMobileHealth('is-seeking', 'Buscando señal GPS...');
      }

      if (!navigator.geolocation) {
        setFallbackLocation();
        return;
      }

      navigator.geolocation.getCurrentPosition((position) => {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;

        setCourierLocationStatus('Ubicación actualizada');
        setMobileHealth('is-ok', 'GPS OK y conexión activa');

        if (courierMap) {
          const pos = { lat, lng };
          if (!courierMarker) {
            courierMarker = new google.maps.Marker({ map: courierMap, position: pos });
          } else {
            courierMarker.setPosition(pos);
          }
          courierMap.setCenter(pos);
        }

        fetch('{{ route('courier.location.store') }}', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
          },
          body: JSON.stringify({ lat, lng }),
        }).catch(() => {});
      }, () => {
        setFallbackLocation();
      });
    }

    function setFallbackLocation() {
      const lat = 42.2673;
      const lng = 2.9617;
      setCourierLocationStatus('Ubicación simulada (Figueres)');
      if (!navigator.onLine) {
        setMobileHealth('is-offline', 'Sin conexión a internet');
      } else {
        setMobileHealth('is-weak', 'Señal GPS débil, usando ubicación de respaldo');
      }

      if (courierMap) {
        const pos = { lat, lng };
        if (!courierMarker) {
          courierMarker = new google.maps.Marker({ map: courierMap, position: pos });
        } else {
          courierMarker.setPosition(pos);
        }
        courierMap.setCenter(pos);
      }

      fetch('{{ route('courier.location.store') }}', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
        },
        body: JSON.stringify({ lat, lng }),
      }).catch(() => {});
    }

    (function loadCourierMapScript() {
      setMobileHealth(navigator.onLine ? 'is-seeking' : 'is-offline', navigator.onLine ? 'Comprobando red y GPS...' : 'Sin conexión a internet');
      if (window.google && window.google.maps) {
        initCourierMapInternal();
        updateLocation();
        setInterval(updateLocation, 120000);
        setTimeout(showMapFallback, 3000);
        return;
      }
      const script = document.createElement('script');
      script.src = 'https://maps.googleapis.com/maps/api/js?key={{ config('services.google.maps_key') ?: env('GOOGLE_MAPS_API_KEY') }}&loading=async&callback=initCourierMap';
      script.async = true;
      script.defer = true;
      window.initCourierMap = function () {
        initCourierMapInternal();
        updateLocation();
        setInterval(updateLocation, 120000);
        setTimeout(showMapFallback, 3000);
      };
      document.head.appendChild(script);
    })();

    window.addEventListener('online', () => {
      setMobileHealth('is-seeking', 'Conexión restablecida, buscando GPS...');
      updateLocation();
    });
    window.addEventListener('offline', () => {
      setMobileHealth('is-offline', 'Sin conexión a internet');
    });

    function showMapFallback() {
      if (mapReady) {
        return;
      }
      const mapEl = pickMapElement();
      if (!mapEl) {
        return;
      }
      if (document.getElementById('courier-map-fallback')) {
        return;
      }
      const iframe = document.createElement('iframe');
      iframe.id = 'courier-map-fallback';
      iframe.loading = 'lazy';
      iframe.src = 'https://www.google.com/maps?q=Figueres,Spain&z=13&output=embed';
      mapEl.innerHTML = '';
      mapEl.appendChild(iframe);
    }

    window.addEventListener('resize', () => {
      if (courierMap) {
        google.maps.event.trigger(courierMap, 'resize');
      }
    });
    window.addEventListener('orientationchange', () => {
      if (courierMap) {
        google.maps.event.trigger(courierMap, 'resize');
      }
    });

    (function initRejectionFlow() {
      const deliveryId = {{ $currentDelivery?->id ?? 'null' }};
      if (!deliveryId) {
        return;
      }

      const autoDeclineEls = Array.from(document.querySelectorAll('.auto-decline'));
      if (!autoDeclineEls.length) {
        return;
      }

      const assignedAtRaw = autoDeclineEls[0].getAttribute('data-assigned-at');
      const assignedAt = assignedAtRaw ? Date.parse(assignedAtRaw) : Date.now();
      const elapsedSeconds = Math.floor((Date.now() - assignedAt) / 1000);
      let remaining = Math.max(0, 20 - elapsedSeconds);
      let interval = null;
      let rejected = false;

      const updateUi = () => {
        const percent = Math.max(0, (remaining / 20) * 100);
        autoDeclineEls.forEach((el) => {
          const countdownEl = el.querySelector('.auto-decline-text');
          const barEl = el.querySelector('.auto-decline-bar');
          if (countdownEl) {
            countdownEl.textContent = `${remaining} segundos para auto-rechazar`;
          }
          if (barEl) {
            barEl.style.width = `${percent}%`;
          }
        });
      };

      const tick = () => {
        remaining -= 1;
        updateUi();
        if (remaining <= 0) {
          rejectDelivery('timeout');
        }
      };

      if (remaining <= 0) {
        rejectDelivery('timeout');
        return;
      }

      updateUi();
      interval = setInterval(tick, 1000);

      document.querySelectorAll('.dropdown-item[data-reason]').forEach((item) => {
        item.addEventListener('click', () => {
          const reason = item.getAttribute('data-reason');
          rejectDelivery(reason);
        });
      });

      function rejectDelivery(reason) {
        if (rejected) {
          return;
        }
        rejected = true;
        if (interval) {
          clearInterval(interval);
        }
        fetch('{{ route('courier.deliveries.reject', $currentDelivery ?? 0) }}', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
          },
          body: JSON.stringify({ reason }),
        }).then(() => {
          window.location.reload();
        }).catch(() => {
          window.location.reload();
        });
      }
    })();

    (function initSwipeActions() {
      const swipeCard = document.querySelector('[data-swipe-card]');
      if (!swipeCard) return;

      const acceptFormId = swipeCard.getAttribute('data-swipe-accept-form');
      const rejectFormId = swipeCard.getAttribute('data-swipe-reject-form');
      const acceptForm = acceptFormId ? document.getElementById(acceptFormId) : null;
      const rejectForm = rejectFormId ? document.getElementById(rejectFormId) : null;
      const rejectConfirmEl = document.querySelector('[data-reject-confirm]');
      if (!acceptForm || !rejectForm) return;

      const SWIPE_THRESHOLD = 70;
      let startX = 0;
      let startY = 0;
      let deltaX = 0;
      let mode = null;
      let active = false;
      let committed = false;

      const setRejectModal = (visible) => {
        if (!rejectConfirmEl) return;
        rejectConfirmEl.classList.toggle('d-none', !visible);
        document.body.classList.toggle('reject-modal-open', visible);
      };

      const resetCard = () => {
        if (committed) return;
        swipeCard.style.transition = 'transform .2s ease';
        swipeCard.style.transform = 'translateX(0)';
        swipeCard.classList.remove('is-swipe-right', 'is-swipe-left', 'is-commit-right');
        window.setTimeout(() => {
          swipeCard.style.transition = '';
        }, 200);
      };

      const commitAccept = () => {
        if (committed) return;
        committed = true;
        active = false;
        swipeCard.style.transition = '';
        swipeCard.style.pointerEvents = 'none';
        swipeCard.classList.remove('is-swipe-right', 'is-swipe-left');
        swipeCard.classList.add('is-commit-right');

        if (navigator.vibrate) {
          try { navigator.vibrate([18, 24, 22]); } catch (e) {}
        }

        window.setTimeout(() => {
          acceptForm.submit();
        }, 170);
      };

      const openRejectConfirmation = () => {
        if (!rejectConfirmEl) return;
        setRejectModal(true);
        if (navigator.vibrate) {
          try { navigator.vibrate([16, 20, 16]); } catch (e) {}
        }
      };

      swipeCard.addEventListener('touchstart', (event) => {
        if (committed) return;
        if (event.touches.length !== 1) return;
        setRejectModal(false);
        const touch = event.touches[0];
        startX = touch.clientX;
        startY = touch.clientY;
        deltaX = 0;
        mode = null;
        active = true;
      }, { passive: true });

      swipeCard.addEventListener('touchmove', (event) => {
        if (committed) return;
        if (!active || event.touches.length !== 1) return;
        const touch = event.touches[0];
        const moveX = touch.clientX - startX;
        const moveY = touch.clientY - startY;

        if (!mode) {
          if (Math.abs(moveY) > 16 && Math.abs(moveY) > Math.abs(moveX)) {
            mode = 'vertical';
            active = false;
            return;
          }
          if (Math.abs(moveX) > 12) {
            mode = 'horizontal';
          }
        }

        if (mode !== 'horizontal') return;
        deltaX = moveX;
        event.preventDefault();
        const limitedX = Math.max(-120, Math.min(120, deltaX));
        swipeCard.style.transform = `translateX(${limitedX}px)`;
        swipeCard.classList.toggle('is-swipe-right', limitedX > 24);
        swipeCard.classList.toggle('is-swipe-left', limitedX < -24);
      }, { passive: false });

      swipeCard.addEventListener('touchend', () => {
        if (committed) return;
        if (!active && mode !== 'horizontal') return;
        active = false;
        if (deltaX >= SWIPE_THRESHOLD) {
          commitAccept();
          return;
        }
        if (deltaX <= -SWIPE_THRESHOLD) {
          resetCard();
          openRejectConfirmation();
          return;
        }
        resetCard();
      });

      swipeCard.addEventListener('touchcancel', () => {
        active = false;
        resetCard();
      });
    })();

    (function initRejectConfirmation() {
      document.querySelectorAll('[data-reject-confirm]').forEach((confirmEl) => {
        const cancelBtns = confirmEl.querySelectorAll('[data-cancel-reject]');
        const submitBtn = confirmEl.querySelector('[data-submit-reject]');
        if (!submitBtn) return;

        cancelBtns.forEach((cancelBtn) => {
          cancelBtn.addEventListener('click', () => {
            confirmEl.classList.add('d-none');
            document.body.classList.remove('reject-modal-open');
          });
        });

        submitBtn.addEventListener('click', () => {
          const formId = submitBtn.getAttribute('data-submit-reject');
          const form = formId ? document.getElementById(formId) : null;
          if (!form) return;
          if (navigator.vibrate) {
            try { navigator.vibrate([22, 20, 26]); } catch (e) {}
          }
          document.body.classList.remove('reject-modal-open');
          form.submit();
        });
      });
    })();

    (function initCourierAlerts() {
      const currentDeliveryId = {{ $pendingDelivery?->id ?? 'null' }};
      const lastDeliveryId = localStorage.getItem('courier_last_delivery_id');
      const enableBtn = document.getElementById('enable-alerts-btn');
      const enableFab = document.getElementById('enable-alerts-fab');
      const installBtn = document.getElementById('install-app-btn');
      const installFab = document.getElementById('install-app-fab');
      const alertsKey = 'courier_alerts_enabled';
      let deferredInstallPrompt = null;
      let loopTimer = null;

      const setAlertUi = (enabled) => {
        const method = enabled ? 'add' : 'remove';
        if (enableBtn) enableBtn.classList[method]('is-active');
        if (enableFab) enableFab.classList[method]('is-active');
        if (enableBtn) enableBtn.textContent = enabled ? 'Alertas activas' : 'Activar alertas';
        if (enableFab) enableFab.title = enabled ? 'Alertas activas' : 'Activar alertas';
      };

      setAlertUi(localStorage.getItem(alertsKey) === '1');

      const setInstallUi = (available) => {
        const method = available ? 'remove' : 'add';
        if (installBtn) installBtn.classList[method]('d-none');
        if (installFab) installFab.classList[method]('d-none');
      };

      const isStandalone = () => {
        return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
      };

      const unlockAudio = () => {
        try {
          const ctx = new (window.AudioContext || window.webkitAudioContext)();
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'square';
          osc.frequency.value = 880;
          gain.gain.value = 0.0001;
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start();
          osc.stop(ctx.currentTime + 0.02);
          ctx.resume().then(() => {
            localStorage.setItem('courier_audio_unlocked', '1');
            localStorage.setItem(alertsKey, '1');
            setAlertUi(true);
          }).catch(() => {});
        } catch (e) {}
      };

      const requestNotifications = async () => {
        if (!('Notification' in window)) return;
        if (Notification.permission === 'default') {
          try {
            await Notification.requestPermission();
          } catch (e) {}
        }
      };

      const urlBase64ToUint8Array = (base64String) => {
        const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
        const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
        const rawData = window.atob(base64);
        const outputArray = new Uint8Array(rawData.length);
        for (let i = 0; i < rawData.length; ++i) {
          outputArray[i] = rawData.charCodeAt(i);
        }
        return outputArray;
      };

      const registerPush = async () => {
        if (!('serviceWorker' in navigator) || !('PushManager' in window)) return;
        const publicKey = '{{ config('webpush.vapid.public_key') }}';
        if (!publicKey) return;

        const registration = await navigator.serviceWorker.register('/service-worker.js');
        let subscription = await registration.pushManager.getSubscription();
        if (!subscription) {
          subscription = await registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array(publicKey),
          });
        }

        await fetch('{{ route('courier.push.subscribe') }}', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').content,
          },
          body: JSON.stringify(subscription),
        });
      };

      const playAlertSound = () => {
        if (localStorage.getItem('courier_audio_unlocked') !== '1') {
          return;
        }
        try {
          const ctx = new (window.AudioContext || window.webkitAudioContext)();
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'square';
          osc.frequency.value = 880;
          gain.gain.value = 0.08;
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start();
          osc.stop(ctx.currentTime + 0.35);
        } catch (e) {}
      };

      const startAlertLoop = (maxMs) => {
        if (loopTimer) {
          clearInterval(loopTimer);
          loopTimer = null;
        }
        const endAt = Date.now() + (maxMs || 20000);
        const tick = () => {
          if (localStorage.getItem(alertsKey) !== '1') return;
          if (Date.now() >= endAt) {
            clearInterval(loopTimer);
            loopTimer = null;
            return;
          }
          playAlertSound();
          if (navigator.vibrate) {
            try { navigator.vibrate([80, 60, 80]); } catch (e) {}
          }
        };
        tick();
        loopTimer = setInterval(tick, 2000);
      };

      const showNotification = () => {
        if (!('Notification' in window)) return;
        if (Notification.permission !== 'granted') return;
        new Notification('Nuevo pedido', {
          body: 'Tienes un pedido pendiente por aceptar.',
          icon: '{{ asset('assets/img/favicon/favicon.ico') }}',
          tag: currentDeliveryId ? ('delivery-' + String(currentDeliveryId)) : 'courier-new-order',
        });
      };

      const enableAlerts = async () => {
        unlockAudio();
        await requestNotifications();
        if (Notification.permission === 'granted') {
          registerPush();
        }
      };

      const disableAlerts = async () => {
        localStorage.setItem(alertsKey, '0');
        setAlertUi(false);
        if (loopTimer) {
          clearInterval(loopTimer);
          loopTimer = null;
        }
        if (!('serviceWorker' in navigator) || !('PushManager' in window)) return;
        try {
          const registration = await navigator.serviceWorker.getRegistration();
          if (!registration) return;
          const subscription = await registration.pushManager.getSubscription();
          if (!subscription) return;
          await fetch('{{ route('courier.push.unsubscribe') }}', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').content,
            },
            body: JSON.stringify(subscription),
          });
          await subscription.unsubscribe();
        } catch (e) {}
      };

      const toggleAlerts = () => {
        const enabled = localStorage.getItem(alertsKey) === '1';
        if (enabled) {
          disableAlerts();
        } else {
          enableAlerts();
        }
      };

      if (enableBtn) enableBtn.addEventListener('click', () => toggleAlerts());
      if (enableFab) enableFab.addEventListener('click', () => toggleAlerts());

      // PWA install prompt (Android/Chrome). Hidden unless the browser provides an install event.
      setInstallUi(false);
      window.addEventListener('beforeinstallprompt', (e) => {
        e.preventDefault();
        deferredInstallPrompt = e;
        if (!isStandalone()) {
          setInstallUi(true);
        }
      });
      const promptInstall = async () => {
        if (!deferredInstallPrompt) return;
        try {
          deferredInstallPrompt.prompt();
          await deferredInstallPrompt.userChoice;
        } catch (e) {}
        deferredInstallPrompt = null;
        setInstallUi(false);
      };
      if (installBtn) installBtn.addEventListener('click', promptInstall);
      if (installFab) installFab.addEventListener('click', promptInstall);

      if (Notification.permission === 'granted' && localStorage.getItem(alertsKey) === '1') {
        registerPush();
      }

      if (currentDeliveryId && String(currentDeliveryId) !== String(lastDeliveryId)) {
        playAlertSound();
        const assignedEl = document.querySelector('.auto-decline[data-assigned-at]');
        const assignedAtRaw = assignedEl ? assignedEl.getAttribute('data-assigned-at') : null;
        const assignedAt = assignedAtRaw ? Date.parse(assignedAtRaw) : Date.now();
        const elapsedMs = Math.max(0, Date.now() - assignedAt);
        const remainingMs = Math.max(0, 20000 - elapsedMs);
        if (localStorage.getItem(alertsKey) === '1') {
          startAlertLoop(remainingMs);
        }
        showNotification();
        localStorage.setItem('courier_last_delivery_id', String(currentDeliveryId));
      }
    })();
  </script>
@endsection