@php
$pageConfigs = ['navbarType' => 'hidden', 'contentLayout' => 'wide'];
$configData = Helper::appClasses();

$daysCollection = $days ?? collect();
$totalLast90 = (int) $daysCollection->sum('total');
$todayKey = now()->toDateString();
$todayEntry = $daysCollection->firstWhere('day', $todayKey);
$todayCount = (int) data_get($todayEntry, 'total', 0);
$weekStart = now()->startOfWeek();
$weekCount = (int) $daysCollection
  ->filter(fn ($item) => \Carbon\Carbon::parse($item->day)->greaterThanOrEqualTo($weekStart))
  ->sum('total');
$activeDaysCount = (int) $daysCollection->count();
$selectedDayLabel = $selectedDay ? \Carbon\Carbon::parse($selectedDay)->format('d/m/Y') : null;
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Registros')

@section('content')
<div class="courier-records-screen">
  <div class="records-shell">
    <header class="records-header">
      <div class="records-title-block">
        <span class="records-kicker">Historial</span>
        <h1>Pedidos completados</h1>
        <p>Revisa tus entregas cerradas y consulta el detalle por dia.</p>
      </div>
      <a class="btn btn-outline-secondary btn-sm records-top-btn" href="{{ route('courier.dashboard') }}" data-ui-action>
        <i class="icon-base ti tabler-map"></i>
        Ver mapa
      </a>
    </header>

    <section class="records-kpis">
      <article class="records-kpi kpi-today">
        <span class="kpi-icon"><i class="icon-base ti tabler-sun"></i></span>
        <div>
          <small>Hoy</small>
          <strong>{{ $todayCount }}</strong>
        </div>
      </article>
      <article class="records-kpi kpi-week">
        <span class="kpi-icon"><i class="icon-base ti tabler-calendar-week"></i></span>
        <div>
          <small>Semana</small>
          <strong>{{ $weekCount }}</strong>
        </div>
      </article>
      <article class="records-kpi kpi-total">
        <span class="kpi-icon"><i class="icon-base ti tabler-clipboard-check"></i></span>
        <div>
          <small>Ultimos 90 dias</small>
          <strong>{{ $totalLast90 }}</strong>
        </div>
      </article>
      <article class="records-kpi kpi-days">
        <span class="kpi-icon"><i class="icon-base ti tabler-calendar-stats"></i></span>
        <div>
          <small>Dias activos</small>
          <strong>{{ $activeDaysCount }}</strong>
        </div>
      </article>
    </section>

    <section class="days-panel">
      <div class="days-panel-head">
        <h2>Filtrar por dia</h2>
        @if ($selectedDay)
          <a class="btn btn-outline-secondary btn-sm" href="{{ route('courier.records.index') }}" data-ui-action>
            <i class="icon-base ti tabler-filter-off"></i>
            Quitar filtro
          </a>
        @endif
      </div>
      <div class="days-chip-row">
        <a class="day-chip {{ !$selectedDay ? 'active' : '' }}" href="{{ route('courier.records.index') }}" data-ui-action>
          <span>Todos</span>
          <strong>{{ $totalLast90 }}</strong>
        </a>
        @forelse ($daysCollection as $day)
          @php
            $dayValue = $day->day;
            $isActive = ($selectedDay ?? '') === $dayValue;
          @endphp
          <a class="day-chip {{ $isActive ? 'active' : '' }}" href="{{ route('courier.records.index', ['day' => $dayValue]) }}" data-ui-action>
            <span>{{ \Carbon\Carbon::parse($dayValue)->format('d/m') }}</span>
            <strong>{{ $day->total }}</strong>
          </a>
        @empty
          <div class="day-chip-empty">No hay registros todavia.</div>
        @endforelse
      </div>
    </section>

    @if ($selectedDay)
      <section class="records-list-shell">
        <header class="records-list-head">
          <div class="records-list-title">
            <h3>Pedidos del {{ $selectedDayLabel }}</h3>
            <p>{{ $deliveries->total() }} resultado(s)</p>
          </div>
          <label class="records-search-field" for="recordSearch">
            <i class="icon-base ti tabler-search"></i>
            <input id="recordSearch" type="search" placeholder="Buscar por #pedido, cliente o telefono" data-record-search>
          </label>
        </header>

        <div class="records-list">
          @forelse ($deliveries as $delivery)
            @php
              $createdAt = $delivery->completed_at ?? $delivery->created_at;
              $paymentLabel = match ($delivery->payment_method) {
                'cash' => 'Efectivo',
                'wallet' => 'Wallet',
                default => ucfirst((string) ($delivery->payment_method ?? 'No definido')),
              };
              $searchText = '#' . $delivery->id . ' ' . ($delivery->customer_name ?? '') . ' ' . ($delivery->customer_phone ?? '') . ' ' . ($delivery->delivery_address ?? '');
            @endphp

            <article class="record-card" data-record-item data-search="{{ \Illuminate\Support\Str::lower($searchText) }}">
              <div class="record-card-head">
                <div class="record-id-wrap">
                  <strong>#{{ $delivery->id }}</strong>
                  <small>{{ optional($createdAt)->format('H:i') }}</small>
                </div>
                <div class="record-head-tags">
                  @if ($delivery->is_urgent)
                    <span class="urgent-chip"><i class="icon-base ti tabler-flame"></i>Urgente</span>
                  @endif
                  <span class="status-chip status-delivered">Entregado</span>
                </div>
              </div>

              <div class="record-main">
                <div class="record-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 telefono' }}</div>
                </div>
                <div class="record-meta-block">
                  <div class="meta-row">
                    <span><i class="icon-base ti tabler-coins"></i>Tarifa</span>
                    <strong>€{{ number_format((float) ($delivery->delivery_fee ?? 0), 2) }}</strong>
                  </div>
                  <div class="meta-row">
                    <span><i class="icon-base ti tabler-wallet"></i>Pago</span>
                    <strong>{{ $paymentLabel }}</strong>
                  </div>
                  <div class="meta-row">
                    <span><i class="icon-base ti tabler-calendar-time"></i>Fecha</span>
                    <strong>{{ optional($createdAt)->format('d/m/Y') }}</strong>
                  </div>
                </div>
              </div>

              <div class="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>

              <div class="record-actions">
                <a class="btn btn-outline-primary btn-sm action-btn" href="{{ route('courier.orders.show', ['delivery' => $delivery->id, 'from' => 'records']) }}" data-ui-action>
                  <i class="icon-base ti tabler-eye"></i>
                  Ver detalle
                </a>
              </div>
            </article>
          @empty
            <section class="records-empty">
              <span class="empty-icon"><i class="icon-base ti tabler-inbox-off"></i></span>
              <h5>No hay pedidos ese dia</h5>
              <p>Prueba otro filtro de fecha para ver mas resultados.</p>
            </section>
          @endforelse
        </div>

        <div class="records-filter-empty d-none" data-record-empty>
          <span class="empty-icon"><i class="icon-base ti tabler-filter-off"></i></span>
          <h5>No hay coincidencias</h5>
          <p>Ajusta la busqueda para encontrar un pedido.</p>
        </div>

        <div class="records-pagination">
          {{ $deliveries->links() }}
        </div>
      </section>
    @else
      <section class="records-empty">
        <span class="empty-icon"><i class="icon-base ti tabler-calendar-search"></i></span>
        <h5>Selecciona un dia para empezar</h5>
        <p>Elige uno de los dias superiores y veras el detalle de pedidos entregados.</p>
      </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 href="{{ route('courier.orders.index') }}" data-ui-action>
        <i class="icon-base ti tabler-clipboard-text"></i>
        <span>Pedidos</span>
      </a>
      <a class="active" 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-records-screen {
      min-height: 100vh;
      background: #f4f5fb;
      padding: 18px;
    }
    .records-shell {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
      padding-bottom: 108px;
    }
    .records-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .records-title-block {
      min-width: 0;
    }
    .records-kicker {
      display: block;
      color: #8f8ca5;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
    }
    .records-title-block h1 {
      margin: 0;
      color: #312d46;
      font-size: 34px;
      line-height: 1.05;
      font-weight: 800;
    }
    .records-title-block p {
      margin: 5px 0 0;
      color: #7f7a97;
      font-size: 14px;
      line-height: 1.35;
    }
    .records-top-btn {
      border-radius: 12px;
      padding: 8px 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
    }
    .records-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .records-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;
    }
    .records-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;
    }
    .records-kpi strong {
      color: #343048;
      font-size: 22px;
      line-height: 1;
      font-weight: 800;
    }
    .kpi-today .kpi-icon {
      background: rgba(255, 159, 67, 0.18);
      color: #d97a1a;
    }
    .kpi-week .kpi-icon {
      background: rgba(0, 207, 232, 0.16);
      color: #0ca8bf;
    }
    .kpi-total .kpi-icon {
      background: rgba(40, 199, 111, 0.16);
      color: #209b57;
    }
    .kpi-days .kpi-icon {
      background: rgba(115, 103, 240, 0.16);
      color: #6458d9;
    }
    .days-panel {
      border: 1px solid rgba(75, 70, 92, 0.14);
      border-radius: 14px;
      background: linear-gradient(165deg, #fff 0%, #fafbff 100%);
      box-shadow:
        0 8px 18px rgba(15, 20, 34, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
      padding: 10px;
      display: grid;
      gap: 8px;
    }
    .days-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .days-panel-head h2 {
      margin: 0;
      color: #3d3952;
      font-size: 14px;
      font-weight: 800;
    }
    .days-chip-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 7px;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: thin;
    }
    .days-chip-row::-webkit-scrollbar {
      height: 6px;
    }
    .days-chip-row::-webkit-scrollbar-thumb {
      background: rgba(75, 70, 92, 0.24);
      border-radius: 999px;
    }
    .day-chip {
      border: 1px solid rgba(75, 70, 92, 0.14);
      border-radius: 999px;
      background: #fff;
      color: #645f7d;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      padding: 9px 11px;
      min-height: 36px;
      text-decoration: none;
      transition: all .18s ease;
    }
    .day-chip strong {
      border-radius: 999px;
      padding: 3px 6px;
      font-size: 10px;
      font-weight: 800;
      border: 1px solid rgba(75, 70, 92, 0.14);
      background: #f5f6fb;
      color: #6d6885;
      line-height: 1;
    }
    .day-chip.active {
      border-color: rgba(105, 108, 255, 0.42);
      background: #eceeff;
      color: #5c60d7;
      box-shadow: 0 7px 16px rgba(105, 108, 255, 0.18);
    }
    .day-chip.active strong {
      border-color: rgba(105, 108, 255, 0.22);
      background: #fff;
      color: #5054cb;
    }
    .day-chip-empty {
      color: #7f7a97;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 4px;
    }
    .records-list-shell {
      border: 1px solid rgba(75, 70, 92, 0.14);
      border-radius: 16px;
      background: linear-gradient(165deg, #fff 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;
    }
    .records-list-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 9px;
      flex-wrap: wrap;
    }
    .records-list-title h3 {
      margin: 0;
      color: #3a364d;
      font-size: 24px;
      font-weight: 800;
      line-height: 1.1;
    }
    .records-list-title p {
      margin: 4px 0 0;
      color: #8f8ca5;
      font-size: 13px;
      font-weight: 700;
    }
    .records-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;
      width: min(100%, 360px);
      flex: 1;
    }
    .records-search-field i {
      font-size: 16px;
    }
    .records-search-field input {
      border: 0;
      background: transparent;
      color: #413d56;
      font-size: 13px;
      font-weight: 600;
      width: 100%;
      outline: none;
    }
    .records-search-field input::placeholder {
      color: #9d99b2;
    }
    .records-list {
      display: grid;
      gap: 10px;
    }
    .record-card {
      border: 1px solid rgba(75, 70, 92, 0.13);
      border-radius: 14px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 8px;
    }
    .record-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .record-id-wrap {
      display: grid;
      gap: 1px;
    }
    .record-id-wrap strong {
      color: #3c3851;
      font-size: 20px;
      font-weight: 800;
      line-height: 1;
    }
    .record-id-wrap small {
      color: #8f8ca5;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.1;
    }
    .record-head-tags {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .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-delivered {
      border-color: rgba(40, 199, 111, 0.35);
      background: #eafbf3;
      color: #1d9253;
    }
    .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);
    }
    .record-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }
    .record-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;
    }
    .record-meta-block {
      border: 1px solid rgba(75, 70, 92, 0.1);
      border-radius: 12px;
      background: #fff;
      min-width: 210px;
      padding: 8px 9px;
      display: grid;
      gap: 6px;
      align-content: start;
    }
    .meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
      line-height: 1.3;
    }
    .meta-row span {
      color: #8b87a3;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .meta-row strong {
      color: #4b465c;
      font-weight: 800;
      text-align: right;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .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;
    }
    .record-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .action-btn {
      width: 100%;
      border-radius: 11px;
      min-height: 42px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .records-pagination {
      margin-top: 4px;
    }
    .records-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;
    }
    .records-empty h5 {
      margin-bottom: 5px;
      color: #3a364d;
      font-size: 22px;
      font-weight: 800;
    }
    .records-empty p {
      margin-bottom: 0;
      color: #7d7895;
      font-size: 14px;
    }
    .records-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;
    }
    .records-filter-empty h5 {
      margin-bottom: 4px;
      color: #46405d;
      font-size: 19px;
      font-weight: 800;
    }
    .records-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: 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-records-screen {
        padding: 14px;
      }
      .records-header {
        flex-direction: column;
        align-items: stretch;
      }
      .records-title-block h1 {
        font-size: 29px;
      }
      .records-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .record-main {
        grid-template-columns: 1fr;
      }
      .record-meta-block {
        min-width: 0;
      }
    }
    @media (max-width: 560px) {
      .records-kpis {
        gap: 8px;
      }
      .records-kpi {
        padding: 9px;
      }
      .records-kpi strong {
        font-size: 20px;
      }
      .records-top-btn {
        width: 100%;
        justify-content: center;
      }
      .records-search-field {
        width: 100%;
      }
      .records-list-title h3 {
        font-size: 22px;
      }
      .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>
    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 bindRecordsSearch() {
      const searchInput = document.querySelector('[data-record-search]');
      const cards = Array.from(document.querySelectorAll('[data-record-item]'));
      const emptyState = document.querySelector('[data-record-empty]');
      if (!searchInput || !cards.length) return;

      const apply = () => {
        const query = searchInput.value.trim().toLowerCase();
        let visible = 0;
        cards.forEach((card) => {
          const haystack = card.dataset.search || '';
          const show = !query || haystack.includes(query);
          card.classList.toggle('d-none', !show);
          if (show) visible += 1;
        });
        if (emptyState) {
          emptyState.classList.toggle('d-none', visible > 0);
        }
      };

      searchInput.addEventListener('input', apply);
      apply();
    })();
  </script>
@endsection