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

$activeCollection = $activeDeliveries ?? collect();
$pendingCount = $activeCollection->where('status', 'pending')->count();
$confirmedCount = $activeCollection->whereIn('status', ['confirmed', 'at_restaurant'])->count();
$enRouteCount = $activeCollection->where('status', 'en_route')->count();
$urgentCount = $activeCollection->where('is_urgent', true)->count();
$totalActiveCount = $activeCollection->count();

$needsDetailsCount = $activeCollection->filter(function ($delivery) {
  return $delivery->is_urgent && (
    empty($delivery->customer_name)
    || $delivery->customer_name === 'Por definir'
    || empty($delivery->delivery_address)
    || $delivery->delivery_address === 'Por definir'
    || empty($delivery->customer_phone)
  );
})->count();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Pedidos')

@section('content')
<div class="courier-orders-screen">
  <div class="orders-shell">
    @if (session('success'))
      <div class="orders-alert orders-alert-success">
        <i class="icon-base ti tabler-circle-check"></i>
        {{ session('success') }}
      </div>
    @endif

    @if ($errors->any())
      <div class="orders-alert orders-alert-danger">
        <i class="icon-base ti tabler-alert-triangle"></i>
        <div>
          @foreach ($errors->all() as $error)
            <div>{{ $error }}</div>
          @endforeach
        </div>
      </div>
    @endif

    @if ($activeCollection->count())
      <section class="orders-toolbar">
        <label class="orders-search-field" for="ordersLiveSearch">
          <i class="icon-base ti tabler-search"></i>
          <input id="ordersLiveSearch" type="search" placeholder="Buscar por cliente, teléfono o #pedido" data-order-search>
        </label>
        <div class="orders-filters" role="tablist" aria-label="Filtrar pedidos">
          <button class="order-filter is-active" type="button" data-order-filter="all" data-ui-action>
            <i class="icon-base ti tabler-layout-grid"></i>
            <span class="filter-label">Todos</span>
            <span class="filter-count">{{ $totalActiveCount }}</span>
          </button>
          <button class="order-filter" type="button" data-order-filter="pending" data-ui-action>
            <i class="icon-base ti tabler-hourglass-low"></i>
            <span class="filter-label">Pendientes</span>
            <span class="filter-count">{{ $pendingCount }}</span>
          </button>
          <button class="order-filter" type="button" data-order-filter="confirmed" data-ui-action>
            <i class="icon-base ti tabler-circle-check"></i>
            <span class="filter-label">Confirmados</span>
            <span class="filter-count">{{ $confirmedCount }}</span>
          </button>
          <button class="order-filter" type="button" data-order-filter="en_route" data-ui-action>
            <i class="icon-base ti tabler-bike"></i>
            <span class="filter-label">En camino</span>
            <span class="filter-count">{{ $enRouteCount }}</span>
          </button>
          <button class="order-filter" type="button" data-order-filter="urgent" data-ui-action>
            <i class="icon-base ti tabler-flame"></i>
            <span class="filter-label">Urgentes</span>
            <span class="filter-count">{{ $urgentCount }}</span>
          </button>
        </div>
      </section>

      @if ($needsDetailsCount > 0)
        <div class="orders-hint">
          <i class="icon-base ti tabler-alert-circle"></i>
          <span>Tienes {{ $needsDetailsCount }} pedido(s) urgente(s) que requieren completar datos del cliente.</span>
        </div>
      @endif

      <section class="orders-grid">
        @foreach ($activeCollection as $delivery)
          @php
            [$label, $color, $tone] = $statusMap[$delivery->status] ?? ['Pendiente', 'warning', 'pending'];
            $origin = $delivery->restaurant?->address ?? '';
            $destination = $delivery->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);
            $needsDetails = $delivery->is_urgent && (
              empty($delivery->customer_name)
              || $delivery->customer_name === 'Por definir'
              || empty($delivery->delivery_address)
              || $delivery->delivery_address === 'Por definir'
              || empty($delivery->customer_phone)
            );
            $nextAction = match ($delivery->status) {
              'pending' => ['confirmed', 'Confirmar pedido', 'btn-primary', 'tabler-check'],
              'confirmed' => ['at_restaurant', 'He llegado al restaurante', 'btn-info', 'tabler-building-store'],
              'at_restaurant' => ['en_route', 'Salir al cliente', 'btn-warning', 'tabler-bike'],
              'en_route' => ['delivered', 'Entregado', 'btn-success', 'tabler-checks'],
              default => null,
            };
            $detailsPanelId = 'urgent-details-' . $delivery->id;
            $blocksNextAction = $needsDetails
              && $nextAction
              && in_array($nextAction[0], ['en_route', 'delivered'], true);
          @endphp

          <article
            class="order-card tone-{{ $tone }}"
            data-status="{{ $delivery->status }}"
            data-urgent="{{ $delivery->is_urgent ? '1' : '0' }}"
            data-search="{{ \Illuminate\Support\Str::lower('#' . $delivery->id . ' ' . ($delivery->customer_name ?? '') . ' ' . ($delivery->customer_phone ?? '') . ' ' . ($delivery->delivery_address ?? '')) }}"
          >
            <div class="order-card-head">
              <div class="order-head-main">
                <span class="status-chip status-{{ $tone }}">{{ $label }}</span>
                @if ($delivery->is_urgent)
                  <span class="urgent-chip"><i class="icon-base ti tabler-flame"></i>Urgente</span>
                @endif
              </div>
              <div class="order-id-time">
                <strong>#{{ $delivery->id }}</strong>
                <small>{{ optional($delivery->created_at)->format('d/m H:i') }}</small>
              </div>
            </div>

            <div class="order-customer-block">
              <div class="block-title"><i class="icon-base ti tabler-user"></i>Cliente</div>
              <div class="customer-name">{{ $delivery->customer_name ?: 'Por definir' }}</div>
              <div class="customer-phone">{{ $delivery->customer_phone ?: 'Sin teléfono' }}</div>
            </div>

            <div class="order-route-block">
              <div class="route-stop is-pickup">
                <span class="route-icon"><i class="icon-base ti tabler-building-store"></i></span>
                <div class="route-content">
                  <small>Recogida</small>
                  <strong>{{ $delivery->restaurant?->address ?? 'Restaurante' }}</strong>
                </div>
              </div>
              <div class="route-stop is-dropoff">
                <span class="route-icon"><i class="icon-base ti tabler-map-pin"></i></span>
                <div class="route-content">
                  <small>Entrega</small>
                  <strong>{{ $delivery->delivery_address ?: 'Por definir' }}</strong>
                </div>
              </div>
              @if ($delivery->delivery_address_extra)
                <div class="route-extra">{{ $delivery->delivery_address_extra }}</div>
              @endif
            </div>

            @if ($delivery->is_urgent)
              <div class="urgent-details-block {{ $needsDetails ? 'needs-details' : '' }}">
                <button
                  class="urgent-toggle"
                  type="button"
                  data-urgent-toggle
                  aria-controls="{{ $detailsPanelId }}"
                  aria-expanded="false"
                  data-ui-action
                >
                  <span class="urgent-toggle-main">
                    <span><i class="icon-base ti tabler-file-description"></i> Datos de cliente</span>
                    @if ($needsDetails)
                      <small class="urgent-state-chip is-missing">Faltan datos</small>
                    @else
                      <small class="urgent-state-chip is-ready">Completos</small>
                    @endif
                  </span>
                  <i class="icon-base ti tabler-chevron-down urgent-toggle-icon"></i>
                </button>

                <div id="{{ $detailsPanelId }}" class="urgent-panel d-none" data-urgent-panel>
                  @if ($needsDetails)
                    <form method="POST" action="{{ route('courier.deliveries.details', $delivery) }}" class="urgent-form">
                      @csrf
                      <input class="form-control form-control-sm" name="customer_name" placeholder="Nombre del cliente" value="{{ $delivery->customer_name !== 'Por definir' ? $delivery->customer_name : '' }}" required>
                      <input class="form-control form-control-sm" name="customer_phone" placeholder="Teléfono" value="{{ $delivery->customer_phone ?? '' }}">
                      <input
                        class="form-control form-control-sm courier-address-input"
                        name="delivery_address"
                        placeholder="Dirección de entrega"
                        value="{{ $delivery->delivery_address !== 'Por definir' ? $delivery->delivery_address : '' }}"
                        data-zone-lat="{{ $courier?->zone?->center_lat }}"
                        data-zone-lng="{{ $courier?->zone?->center_lng }}"
                        data-zone-radius="{{ $courier?->zone?->radius_km }}"
                        required
                      >
                      <input class="form-control form-control-sm" name="delivery_address_extra" placeholder="Dirección adicional" value="{{ $delivery->delivery_address_extra ?? '' }}">
                      <button class="btn btn-outline-primary btn-sm w-100" type="submit">Guardar datos</button>
                    </form>
                    <small class="urgent-warning">Completa cliente, teléfono y dirección antes de salir al cliente.</small>
                  @else
                    <div class="urgent-top">
                      <span><i class="icon-base ti tabler-circle-check"></i> Datos validados</span>
                      <button class="btn btn-xs btn-outline-secondary" type="button" data-toggle-edit data-ui-action>
                        <i class="icon-base ti tabler-edit"></i>
                        Editar
                      </button>
                    </div>
                    <div class="urgent-summary" data-editable-block>
                      <div class="detail-row"><span>Cliente</span><strong>{{ $delivery->customer_name }}</strong></div>
                      <div class="detail-row"><span>Teléfono</span><strong>{{ $delivery->customer_phone ?? '-' }}</strong></div>
                      <div class="detail-row"><span>Dirección</span><strong>{{ $delivery->delivery_address }}</strong></div>
                      @if ($delivery->delivery_address_extra)
                        <div class="detail-row"><span>Extra</span><strong>{{ $delivery->delivery_address_extra }}</strong></div>
                      @endif
                    </div>
                    <form class="urgent-form d-none" method="POST" action="{{ route('courier.deliveries.details', $delivery) }}" data-edit-form>
                      @csrf
                      <input class="form-control form-control-sm" name="customer_name" placeholder="Nombre del cliente" value="{{ $delivery->customer_name !== 'Por definir' ? $delivery->customer_name : '' }}" required>
                      <input class="form-control form-control-sm" name="customer_phone" placeholder="Teléfono" value="{{ $delivery->customer_phone ?? '' }}">
                      <input
                        class="form-control form-control-sm courier-address-input"
                        name="delivery_address"
                        placeholder="Dirección de entrega"
                        value="{{ $delivery->delivery_address !== 'Por definir' ? $delivery->delivery_address : '' }}"
                        data-zone-lat="{{ $courier?->zone?->center_lat }}"
                        data-zone-lng="{{ $courier?->zone?->center_lng }}"
                        data-zone-radius="{{ $courier?->zone?->radius_km }}"
                        required
                      >
                      <input class="form-control form-control-sm" name="delivery_address_extra" placeholder="Dirección adicional" value="{{ $delivery->delivery_address_extra ?? '' }}">
                      <button class="btn btn-outline-primary btn-sm w-100" type="submit">Guardar cambios</button>
                    </form>
                  @endif
                </div>
              </div>
            @endif

            <div class="order-actions">
              <a class="btn btn-outline-primary btn-sm action-btn" href="{{ route('courier.orders.show', ['delivery' => $delivery->id, 'from' => 'orders']) }}" data-ui-action>
                <i class="icon-base ti tabler-eye"></i>
                Ver detalle
              </a>
              <a class="btn btn-outline-primary btn-sm action-btn" href="{{ $navUrl }}" target="_blank" rel="noopener" data-ui-action>
                <i class="icon-base ti tabler-navigation"></i>
                Navegar
              </a>
              @if ($nextAction)
                <form method="POST" action="{{ route('courier.deliveries.status', $delivery) }}">
                  @csrf
                  <input type="hidden" name="status" value="{{ $nextAction[0] }}" />
                  <button class="btn {{ $nextAction[2] }} btn-sm action-btn" type="submit" @if ($blocksNextAction) disabled @endif>
                    <i class="icon-base ti {{ $nextAction[3] }}"></i>
                    {{ $nextAction[1] }}
                  </button>
                </form>
              @endif
            </div>
            @if ($blocksNextAction)
              <small class="order-action-note">
                <i class="icon-base ti tabler-info-circle"></i>
                Debes completar Datos de cliente para continuar este pedido urgente.
                <button class="order-action-link" type="button" data-open-urgent="{{ $detailsPanelId }}" data-ui-action>
                  Completar ahora
                </button>
              </small>
            @endif
          </article>
        @endforeach
      </section>
      <div class="orders-filter-empty d-none" data-filter-empty>
        <span class="empty-icon"><i class="icon-base ti tabler-filter-off"></i></span>
        <h5>Sin resultados con ese filtro</h5>
        <p>Ajusta el estado o limpia la búsqueda para ver más pedidos.</p>
      </div>
    @else
      <section class="orders-empty">
        <span class="empty-icon"><i class="icon-base ti tabler-clipboard-off"></i></span>
        <h5>No tienes pedidos activos</h5>
        <p>Cuando se te asigne uno, aparecerá aquí automáticamente.</p>
        <a class="btn btn-outline-secondary btn-sm" href="{{ route('courier.dashboard') }}">Ir al mapa</a>
      </section>
    @endif

    <nav class="courier-bottom-nav">
      <a href="{{ route('courier.dashboard') }}" data-ui-action>
        <i class="icon-base ti tabler-map"></i>
        <span>Mapa</span>
      </a>
      <a class="active" 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-orders-screen {
      min-height: 100vh;
      background: #f4f5fb;
      padding: 18px;
    }
    .orders-shell {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
      padding-bottom: 108px;
    }
    .orders-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .orders-title-block {
      min-width: 0;
    }
    .orders-kicker {
      display: block;
      color: #8f8ca5;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
    }
    .orders-title-block h1 {
      margin: 0;
      color: #312d46;
      font-size: 34px;
      line-height: 1.05;
      font-weight: 800;
    }
    .orders-title-block p {
      margin: 5px 0 0;
      color: #7f7a97;
      font-size: 14px;
      line-height: 1.35;
    }
    .orders-header-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .order-top-btn {
      border-radius: 12px;
      padding: 8px 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
    }
    .orders-alert {
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-weight: 600;
      border: 1px solid rgba(15, 20, 34, 0.1);
      background: #fff;
      color: #4f4a63;
    }
    .orders-alert i {
      margin-top: 1px;
    }
    .orders-alert-success {
      border-color: rgba(40, 199, 111, 0.32);
      background: #ecfbf3;
      color: #1e8e54;
    }
    .orders-alert-danger {
      border-color: rgba(234, 84, 85, 0.28);
      background: #ffefef;
      color: #b64243;
    }
    .orders-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .orders-kpi {
      border: 1px solid rgba(75, 70, 92, 0.14);
      border-radius: 14px;
      background: linear-gradient(165deg, #fff 0%, #fafbff 100%);
      padding: 11px;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 9px;
      box-shadow:
        0 8px 18px rgba(15, 20, 34, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    }
    .kpi-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-size: 15px;
      color: #5e61d8;
      background: rgba(105, 108, 255, 0.14);
      flex: 0 0 32px;
    }
    .orders-kpi small {
      display: block;
      color: #8f8ca5;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-bottom: 2px;
    }
    .orders-kpi strong {
      color: #343048;
      font-size: 22px;
      line-height: 1;
      font-weight: 800;
    }
    .kpi-pending .kpi-icon {
      background: rgba(255, 159, 67, 0.18);
      color: #d97a1a;
    }
    .kpi-confirmed .kpi-icon {
      background: rgba(0, 207, 232, 0.16);
      color: #0ca8bf;
    }
    .kpi-route .kpi-icon {
      background: rgba(115, 103, 240, 0.16);
      color: #6458d9;
    }
    .kpi-total .kpi-icon {
      background: rgba(40, 199, 111, 0.16);
      color: #209b57;
    }
    .orders-hint {
      border-radius: 12px;
      border: 1px solid rgba(255, 159, 67, 0.3);
      background: #fff5e8;
      color: #b86c17;
      padding: 10px 12px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 700;
      width: fit-content;
      max-width: 100%;
    }
    .orders-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .orders-toolbar {
      display: grid;
      gap: 9px;
      border: 1px solid rgba(75, 70, 92, 0.1);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.78);
      padding: 9px;
    }
    .orders-filters {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 7px;
    }
    .order-filter {
      border: 1px solid rgba(75, 70, 92, 0.14);
      border-radius: 12px;
      background: #fff;
      color: #645f7d;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      min-height: 42px;
      width: 100%;
      padding: 8px 9px;
      transition: all .18s ease;
    }
    .order-filter i {
      font-size: 14px;
      flex: 0 0 auto;
    }
    .order-filter .filter-label {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .order-filter .filter-count {
      margin-left: auto;
      border-radius: 999px;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: 800;
      border: 1px solid rgba(75, 70, 92, 0.14);
      background: #f5f6fb;
      color: #6d6885;
    }
    .order-filter.is-active {
      border-color: rgba(105, 108, 255, 0.42);
      background: #eceeff;
      color: #5c60d7;
      box-shadow: 0 7px 16px rgba(105, 108, 255, 0.18);
    }
    .order-filter.is-active .filter-count {
      border-color: rgba(105, 108, 255, 0.22);
      background: #fff;
      color: #5054cb;
    }
    .orders-search-field {
      border: 1px solid rgba(75, 70, 92, 0.14);
      border-radius: 12px;
      background: #fff;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 7px;
      padding: 9px 10px;
      color: #8e89a4;
    }
    .orders-search-field i {
      font-size: 16px;
    }
    .orders-search-field input {
      border: 0;
      background: transparent;
      color: #413d56;
      font-size: 13px;
      font-weight: 600;
      width: 100%;
      outline: none;
    }
    .orders-search-field input::placeholder {
      color: #9d99b2;
    }
    .order-card {
      border: 1px solid rgba(75, 70, 92, 0.13);
      border-radius: 16px;
      background: linear-gradient(165deg, #ffffff 0%, #fbfbff 100%);
      box-shadow:
        0 10px 22px rgba(15, 20, 34, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
      padding: 12px;
      display: grid;
      gap: 10px;
      position: relative;
      overflow: hidden;
    }
    .order-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 11px;
      bottom: 11px;
      width: 3px;
      border-radius: 999px;
      background: #a7a3bf;
    }
    .order-card.tone-pending::before {
      background: #ff9f43;
    }
    .order-card.tone-confirmed::before,
    .order-card.tone-restaurant::before {
      background: #00cfe8;
    }
    .order-card.tone-route::before {
      background: #7367f0;
    }
    .order-card.tone-delivered::before {
      background: #28c76f;
    }
    .order-card.tone-cancelled::before {
      background: #ea5455;
    }
    .order-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .order-head-main {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .status-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 10px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      border: 1px solid rgba(15, 20, 34, 0.1);
      color: #66627c;
      background: #f6f7fc;
    }
    .status-pending {
      border-color: rgba(255, 159, 67, 0.35);
      background: #fff3e6;
      color: #be711e;
    }
    .status-confirmed,
    .status-restaurant {
      border-color: rgba(0, 207, 232, 0.35);
      background: #e9fcff;
      color: #0ca3bb;
    }
    .status-route {
      border-color: rgba(115, 103, 240, 0.3);
      background: #f1efff;
      color: #6559d8;
    }
    .status-delivered {
      border-color: rgba(40, 199, 111, 0.35);
      background: #eafbf3;
      color: #1d9253;
    }
    .status-cancelled {
      border-color: rgba(234, 84, 85, 0.3);
      background: #ffefef;
      color: #ba4142;
    }
    .urgent-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 700;
      border: 1px solid rgba(234, 84, 85, 0.32);
      color: #d8494a;
      background: rgba(234, 84, 85, 0.12);
    }
    .order-id-time {
      text-align: right;
      display: grid;
      gap: 1px;
    }
    .order-id-time strong {
      color: #504c65;
      font-size: 15px;
      line-height: 1;
      font-weight: 800;
    }
    .order-id-time small {
      color: #8f8ca5;
      font-size: 11px;
      line-height: 1.1;
      font-weight: 600;
    }
    .order-customer-block {
      border: 1px solid rgba(75, 70, 92, 0.1);
      border-radius: 12px;
      background: #fff;
      padding: 9px 10px;
    }
    .block-title {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #8f8ca5;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 5px;
    }
    .customer-name {
      color: #36324a;
      font-size: 20px;
      line-height: 1.1;
      font-weight: 800;
      margin-bottom: 3px;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .customer-phone {
      color: #706b86;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
      word-break: break-word;
    }
    .order-route-block {
      display: grid;
      gap: 7px;
    }
    .route-stop {
      border: 1px solid rgba(75, 70, 92, 0.12);
      border-radius: 12px;
      background: #fff;
      padding: 9px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px;
      align-items: flex-start;
      position: relative;
    }
    .route-stop.is-pickup::after {
      content: "";
      position: absolute;
      left: 19px;
      bottom: -10px;
      width: 2px;
      height: 10px;
      background: repeating-linear-gradient(to bottom, rgba(143, 140, 165, 0.55) 0 2px, transparent 2px 4px);
    }
    .route-icon {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      font-size: 14px;
      background: rgba(105, 108, 255, 0.14);
      color: #6063db;
      flex: 0 0 28px;
    }
    .route-stop.is-pickup .route-icon {
      background: rgba(0, 207, 232, 0.14);
      color: #0ca6be;
    }
    .route-stop.is-dropoff .route-icon {
      background: rgba(255, 159, 67, 0.16);
      color: #d67717;
    }
    .route-content small {
      display: block;
      color: #8f8ca5;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-bottom: 2px;
      line-height: 1.1;
    }
    .route-content strong {
      color: #3d3952;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.3;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .route-extra {
      border-radius: 11px;
      border: 1px dashed rgba(75, 70, 92, 0.2);
      background: rgba(248, 249, 255, 0.8);
      color: #6f6b84;
      padding: 8px 9px;
      font-size: 12px;
      line-height: 1.35;
      word-break: break-word;
    }
    .urgent-details-block {
      border: 1px solid rgba(75, 70, 92, 0.12);
      border-radius: 12px;
      background: #fff;
      padding: 8px;
      display: grid;
      gap: 6px;
    }
    .urgent-details-block.needs-details {
      border-color: rgba(255, 159, 67, 0.36);
      background: #fffdf9;
    }
    .urgent-toggle {
      width: 100%;
      border: 0;
      background: transparent;
      border-radius: 10px;
      padding: 5px 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #5f5b76;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      text-align: left;
      transition: background .18s ease;
    }
    .urgent-toggle:hover {
      background: rgba(143, 140, 165, 0.1);
    }
    .urgent-toggle-main {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }
    .urgent-toggle-main span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
    }
    .urgent-toggle-icon {
      font-size: 15px;
      color: #8f8ca5;
      transition: transform .18s ease;
    }
    .urgent-details-block.is-open .urgent-toggle-icon {
      transform: rotate(180deg);
    }
    .urgent-state-chip {
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.2;
      border: 1px solid transparent;
    }
    .urgent-state-chip.is-missing {
      border-color: rgba(255, 159, 67, 0.35);
      background: rgba(255, 159, 67, 0.14);
      color: #b66a16;
    }
    .urgent-state-chip.is-ready {
      border-color: rgba(40, 199, 111, 0.35);
      background: rgba(40, 199, 111, 0.14);
      color: #208a51;
    }
    .urgent-panel {
      display: grid;
      gap: 8px;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid rgba(75, 70, 92, 0.1);
      background: #fff;
    }
    .urgent-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #7a7692;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .urgent-top span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .urgent-form {
      display: grid;
      gap: 7px;
    }
    .courier-address-input {
      border: 1px solid #e0e2ee;
    }
    .urgent-warning {
      display: block;
      color: #be711e;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.25;
    }
    .urgent-summary {
      display: grid;
      gap: 5px;
    }
    .detail-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
      line-height: 1.3;
    }
    .detail-row span {
      color: #8b87a3;
      font-weight: 700;
      min-width: 70px;
    }
    .detail-row strong {
      color: #4b465c;
      font-weight: 700;
      text-align: right;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .order-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .order-actions form {
      margin: 0;
    }
    .action-btn {
      width: 100%;
      border-radius: 11px;
      min-height: 42px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .order-action-note {
      margin: -2px 2px 0;
      color: #b66a16;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.3;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
    }
    .order-action-link {
      border: 0;
      background: transparent;
      color: #8a5a16;
      font-size: 11px;
      font-weight: 800;
      text-decoration: underline;
      padding: 0;
      line-height: 1.2;
    }
    .orders-empty {
      border: 1px solid rgba(75, 70, 92, 0.14);
      border-radius: 18px;
      background: linear-gradient(165deg, #fff 0%, #fafbff 100%);
      box-shadow:
        0 10px 24px rgba(15, 20, 34, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
      padding: 22px 16px;
      text-align: center;
    }
    .empty-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(105, 108, 255, 0.14);
      color: #6366de;
      display: grid;
      place-items: center;
      margin: 0 auto 10px;
      font-size: 23px;
    }
    .orders-empty h5 {
      margin-bottom: 5px;
      color: #3a364d;
      font-size: 22px;
      font-weight: 800;
    }
    .orders-empty p {
      margin-bottom: 12px;
      color: #7d7895;
      font-size: 14px;
    }
    .orders-filter-empty {
      border: 1px dashed rgba(75, 70, 92, 0.2);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.7);
      padding: 18px 14px;
      text-align: center;
    }
    .orders-filter-empty h5 {
      margin-bottom: 4px;
      color: #46405d;
      font-size: 19px;
      font-weight: 800;
    }
    .orders-filter-empty p {
      margin-bottom: 0;
      color: #807c97;
      font-size: 13px;
    }
    .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: 1199px) {
      .orders-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 991px) {
      #layout-menu,
      .layout-navbar,
      .layout-menu-toggle,
      .content-footer {
        display: none !important;
      }
      .layout-wrapper,
      .layout-page,
      .layout-content,
      .content-wrapper,
      .content-wrapper > .container-xxl,
      .content-wrapper > .container-xl,
      .content-wrapper > .container-lg,
      .content-wrapper > .container-md,
      .content-wrapper > .container-sm,
      .content-wrapper > .container {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
      }
      .courier-orders-screen {
        padding: 14px;
      }
      .orders-header {
        flex-direction: column;
        align-items: stretch;
      }
      .orders-title-block h1 {
        font-size: 29px;
      }
      .orders-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .orders-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (max-width: 560px) {
      .orders-kpis {
        gap: 8px;
      }
      .orders-kpi {
        padding: 9px;
      }
      .orders-kpi strong {
        font-size: 20px;
      }
      .order-actions {
        grid-template-columns: 1fr;
      }
      .orders-header-actions {
        width: 100%;
      }
      .order-top-btn {
        width: 100%;
        justify-content: center;
      }
      .orders-toolbar {
        padding: 8px;
      }
      .orders-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .order-filter {
        min-height: 40px;
        font-size: 11px;
      }
      .order-filter i {
        font-size: 13px;
      }
      .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;
      }
    }
  </style>
@endsection

@section('page-script')
  <script>
    window.initCourierOrderAutocomplete = function initCourierOrderAutocomplete() {
      const inputs = document.querySelectorAll('.courier-address-input');
      if (!inputs.length || !window.google || !google.maps || !google.maps.places) return;

      inputs.forEach((input) => {
        if (input.dataset.bound === 'true') return;
        input.dataset.bound = 'true';

        const zoneLat = parseFloat(input.dataset.zoneLat);
        const zoneLng = parseFloat(input.dataset.zoneLng);
        const zoneRadiusKm = parseFloat(input.dataset.zoneRadius) || 8;
        let bounds = null;

        if (!Number.isNaN(zoneLat) && !Number.isNaN(zoneLng)) {
          const zoneCircle = new google.maps.Circle({
            center: { lat: zoneLat, lng: zoneLng },
            radius: zoneRadiusKm * 1000,
          });
          bounds = zoneCircle.getBounds();
        }

        const autocomplete = new google.maps.places.Autocomplete(input, {
          componentRestrictions: { country: 'es' },
          fields: ['formatted_address'],
        });

        if (bounds) {
          autocomplete.setBounds(bounds);
          autocomplete.setOptions({ strictBounds: true });
        }
      });
    };

    (function loadCourierPlacesScript() {
      if (window.google && window.google.maps) {
        window.initCourierOrderAutocomplete();
        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') }}&libraries=places&loading=async&callback=initCourierOrderAutocomplete';
      script.async = true;
      script.defer = true;
      document.head.appendChild(script);
    })();

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

    document.addEventListener('click', (event) => {
      const quickOpen = event.target.closest('[data-open-urgent]');
      if (quickOpen) {
        const panelId = quickOpen.getAttribute('data-open-urgent');
        const panel = panelId ? document.getElementById(panelId) : null;
        const card = panel?.closest('.urgent-details-block');
        const urgentToggle = card?.querySelector('[data-urgent-toggle]');
        if (!panel || !card || !urgentToggle) return;
        if (panel.classList.contains('d-none')) {
          panel.classList.remove('d-none');
          card.classList.add('is-open');
          urgentToggle.setAttribute('aria-expanded', 'true');
        }
        window.initCourierOrderAutocomplete();
        const firstInput = panel.querySelector('input');
        firstInput?.focus({ preventScroll: true });
        panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        return;
      }

      const urgentToggle = event.target.closest('[data-urgent-toggle]');
      if (urgentToggle) {
        const card = urgentToggle.closest('.urgent-details-block');
        const panel = card?.querySelector('[data-urgent-panel]');
        if (!card || !panel) return;
        const willOpen = panel.classList.contains('d-none');
        panel.classList.toggle('d-none', !willOpen);
        card.classList.toggle('is-open', willOpen);
        urgentToggle.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
        if (willOpen) {
          window.initCourierOrderAutocomplete();
        }
        return;
      }

      const editToggle = event.target.closest('[data-toggle-edit]');
      if (!editToggle) return;
      const block = editToggle.closest('.urgent-details-block');
      if (!block) return;
      const summary = block.querySelector('[data-editable-block]');
      const form = block.querySelector('[data-edit-form]');
      if (!summary || !form) return;
      summary.classList.toggle('d-none');
      form.classList.toggle('d-none');
      if (!form.classList.contains('d-none')) {
        window.initCourierOrderAutocomplete();
      }
    });

    (function bindLiveFilters() {
      const cards = Array.from(document.querySelectorAll('.order-card'));
      const filters = Array.from(document.querySelectorAll('[data-order-filter]'));
      const searchInput = document.querySelector('[data-order-search]');
      const emptyState = document.querySelector('[data-filter-empty]');
      if (!cards.length || !filters.length) return;

      const matchesFilter = (card, currentFilter) => {
        if (currentFilter === 'all') return true;
        if (currentFilter === 'urgent') return card.dataset.urgent === '1';
        if (currentFilter === 'pending') return card.dataset.status === 'pending';
        if (currentFilter === 'en_route') return card.dataset.status === 'en_route';
        if (currentFilter === 'confirmed') {
          return card.dataset.status === 'confirmed' || card.dataset.status === 'at_restaurant';
        }
        return true;
      };

      const apply = () => {
        const activeBtn = document.querySelector('[data-order-filter].is-active');
        const currentFilter = activeBtn?.dataset.orderFilter || 'all';
        const query = (searchInput?.value || '').trim().toLowerCase();
        let visible = 0;

        cards.forEach((card) => {
          const byFilter = matchesFilter(card, currentFilter);
          const bySearch = !query || (card.dataset.search || '').includes(query);
          const show = byFilter && bySearch;
          card.classList.toggle('d-none', !show);
          if (show) visible += 1;
        });

        if (emptyState) {
          emptyState.classList.toggle('d-none', visible > 0);
        }
      };

      filters.forEach((button) => {
        button.addEventListener('click', () => {
          filters.forEach((item) => item.classList.remove('is-active'));
          button.classList.add('is-active');
          apply();
        });
      });

      if (searchInput) {
        searchInput.addEventListener('input', apply);
      }

      apply();
    })();
  </script>
@endsection