@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'],
];
[$statusLabel, $statusColor] = $statusMap[$delivery->status] ?? ['Pendiente', 'warning'];
$statusTone = match ($delivery->status) {
  'pending' => 'pending',
  'confirmed' => 'confirmed',
  'at_restaurant' => 'restaurant',
  'en_route' => 'route',
  'delivered' => 'delivered',
  'cancelled' => 'cancelled',
  default => '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);
$missingCustomerDetails = $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-success', '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', 'Marcar como entregado', 'btn-success', 'tabler-checks'],
  default => null,
};
$nextActionBlocked = $missingCustomerDetails
  && $nextAction
  && in_array($nextAction[0], ['en_route', 'delivered'], true);
$phoneForDial = preg_replace('/[^\d+]/', '', (string) ($delivery->customer_phone ?? ''));
$phoneDialHref = $phoneForDial ? ('tel:' . $phoneForDial) : null;
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Pedido')

@section('content')
<div class="courier-order-detail">
  <div class="order-shell">
    <div class="order-header">
      <div class="order-header-main">
        <div class="order-kicker">Detalle de la orden</div>
        <h1>Pedido #{{ $delivery->id }}</h1>
      </div>
      <div class="order-header-actions">
        <a class="btn btn-outline-secondary btn-sm order-link-btn" href="{{ $from === 'map' ? route('courier.dashboard') : route('courier.orders.index') }}">
          <i class="icon-base ti tabler-arrow-left"></i>
          Volver
        </a>
        <a class="btn btn-outline-primary btn-sm order-link-btn" href="{{ route('courier.orders.index') }}">
          <i class="icon-base ti tabler-clipboard-check"></i>
          Pedidos entregados
        </a>
      </div>
    </div>

    <section class="order-card order-card-summary">
      <div class="order-summary-top">
        <span class="status-chip status-chip-{{ $statusTone }}">{{ $statusLabel }}</span>
        <span class="order-time">
          <i class="icon-base ti tabler-clock-hour-4"></i>
          {{ $delivery->created_at->format('d/m/Y H:i') }}
        </span>
      </div>
      @if ($delivery->is_urgent)
        <span class="urgent-chip">
          <i class="icon-base ti tabler-flame"></i>
          Urgente
        </span>
      @endif

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

    @if ($delivery->is_urgent)
      <section class="order-card {{ $missingCustomerDetails ? 'order-card-warning' : '' }}" id="urgent-details-editor">
        <div class="section-title">
          <i class="icon-base ti tabler-user-edit"></i>
          Datos de cliente
        </div>
        @if ($missingCustomerDetails)
          <div class="order-warning-note">
            <i class="icon-base ti tabler-alert-circle"></i>
            Completa estos datos para poder salir al cliente y finalizar la entrega.
          </div>
        @endif

        <div class="customer-summary {{ $missingCustomerDetails ? 'is-missing' : '' }}" data-customer-summary>
          <div><span>Cliente</span><strong>{{ $delivery->customer_name ?: 'Por definir' }}</strong></div>
          <div><span>Teléfono</span><strong>{{ $delivery->customer_phone ?: 'Sin teléfono' }}</strong></div>
          <div><span>Dirección</span><strong>{{ $delivery->delivery_address ?: 'Por definir' }}</strong></div>
          @if ($delivery->delivery_address_extra)
            <div><span>Extra</span><strong>{{ $delivery->delivery_address_extra }}</strong></div>
          @endif
        </div>

        <form method="POST" action="{{ route('courier.deliveries.details', $delivery) }}" class="urgent-form {{ $missingCustomerDetails ? '' : 'd-none' }}" data-customer-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 ?? '' }}"
            required
          >
          <input
            class="form-control form-control-sm"
            name="delivery_address"
            placeholder="Dirección de entrega"
            value="{{ $delivery->delivery_address !== 'Por definir' ? $delivery->delivery_address : '' }}"
            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">
            <i class="icon-base ti tabler-device-floppy"></i>
            Guardar datos
          </button>
        </form>

        @if (!$missingCustomerDetails)
          <button class="btn btn-outline-secondary btn-sm w-100" type="button" data-toggle-customer-edit>
            <i class="icon-base ti tabler-edit"></i>
            Editar datos de cliente
          </button>
        @endif
      </section>
    @endif

    <section class="order-card">
      <div class="section-title">
        <i class="icon-base ti tabler-bolt"></i>
        Acciones rápidas
      </div>
      <div class="quick-actions-grid">
        @if ($phoneDialHref)
          <a class="btn btn-outline-secondary quick-action-btn" href="{{ $phoneDialHref }}">
            <i class="icon-base ti tabler-phone-call"></i>
            Llamar
          </a>
        @else
          <button class="btn btn-outline-secondary quick-action-btn" type="button" disabled>
            <i class="icon-base ti tabler-phone-off"></i>
            Sin teléfono
          </button>
        @endif
        <button class="btn btn-outline-secondary quick-action-btn" type="button" data-copy-address="{{ $delivery->delivery_address ?: '' }}">
          <i class="icon-base ti tabler-copy"></i>
          Copiar dirección
        </button>
        <a class="btn btn-outline-primary quick-action-btn" href="{{ $navUrl }}" target="_blank" rel="noopener">
          <i class="icon-base ti tabler-navigation"></i>
          Navegar
        </a>
      </div>
    </section>

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

    @if ($delivery->notes)
      <section class="order-card">
        <div class="section-title">
          <i class="icon-base ti tabler-notebook"></i>
          Notas
        </div>
        <div class="notes-text">{{ $delivery->notes }}</div>
      </section>
    @endif

    <section class="order-card order-card-actions">
      <div class="section-title">
        <i class="icon-base ti tabler-bolt"></i>
        Acciones
      </div>
      <div class="order-actions-grid {{ $delivery->status === 'pending' ? 'is-two' : 'is-one' }}">
        @if ($delivery->status === 'pending')
          <form method="POST" action="{{ route('courier.deliveries.status', $delivery) }}">
            @csrf
            <input type="hidden" name="status" value="confirmed" />
            <button class="btn btn-success order-action-btn" type="submit">
              <i class="icon-base ti tabler-check me-1"></i>
              Confirmar pedido
            </button>
          </form>
          <form method="POST" action="{{ route('courier.deliveries.reject', $delivery) }}">
            @csrf
            <input type="hidden" name="reason" value="Rechazado desde detalle" />
            <button class="btn btn-outline-danger order-action-btn" type="submit">
              <i class="icon-base ti tabler-x me-1"></i>
              Rechazar
            </button>
          </form>
        @elseif ($delivery->status === 'confirmed')
          <form method="POST" action="{{ route('courier.deliveries.status', $delivery) }}">
            @csrf
            <input type="hidden" name="status" value="at_restaurant" />
            <button class="btn btn-info order-action-btn" type="submit">
              <i class="icon-base ti tabler-building-store me-1"></i>
              He llegado al restaurante
            </button>
          </form>
        @elseif ($delivery->status === 'at_restaurant')
          <form method="POST" action="{{ route('courier.deliveries.status', $delivery) }}">
            @csrf
            <input type="hidden" name="status" value="en_route" />
            <button class="btn btn-warning order-action-btn" type="submit" @if ($nextActionBlocked) disabled @endif>
              <i class="icon-base ti tabler-bike me-1"></i>
              Salir al cliente
            </button>
          </form>
        @elseif ($delivery->status === 'en_route')
          <form method="POST" action="{{ route('courier.deliveries.status', $delivery) }}">
            @csrf
            <input type="hidden" name="status" value="delivered" />
            <button class="btn btn-success order-action-btn" type="submit" @if ($nextActionBlocked) disabled @endif>
              <i class="icon-base ti tabler-checks me-1"></i>
              Entregado
            </button>
          </form>
        @else
          <div class="order-state-note">Esta orden no tiene acciones disponibles.</div>
        @endif
      </div>
      @if ($nextActionBlocked)
        <div class="order-state-note mt-2">
          Debes completar los datos del cliente para continuar.
        </div>
      @endif
    </section>

    @if ($nextAction)
      <div class="order-next-step-bar">
        @if ($nextActionBlocked)
          <button class="btn btn-warning order-next-btn" type="button" data-scroll-target="urgent-details-editor">
            <i class="icon-base ti tabler-alert-circle"></i>
            Completar datos para continuar
          </button>
        @else
          <form method="POST" action="{{ route('courier.deliveries.status', $delivery) }}">
            @csrf
            <input type="hidden" name="status" value="{{ $nextAction[0] }}" />
            <button class="btn {{ $nextAction[2] }} order-next-btn" type="submit">
              <i class="icon-base ti {{ $nextAction[3] }}"></i>
              Siguiente paso: {{ $nextAction[1] }}
            </button>
          </form>
        @endif
      </div>
    @endif
  </div>
</div>
@endsection

@section('page-style')
  <style>
    .courier-order-detail {
      min-height: 100vh;
      background: #f4f5fb;
      padding: 18px;
    }
    .order-shell {
      max-width: 940px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
      padding-bottom: 14px;
    }
    .order-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 2px;
    }
    .order-header-main {
      min-width: 0;
    }
    .order-kicker {
      color: #8b87a3;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      line-height: 1.1;
      margin-bottom: 3px;
    }
    .order-header-main h1 {
      margin: 0;
      color: #333047;
      font-size: 33px;
      line-height: 1.05;
      font-weight: 800;
    }
    .order-header-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .order-link-btn {
      border-radius: 12px;
      font-weight: 700;
      padding: 8px 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .order-card {
      background: linear-gradient(165deg, #ffffff 0%, #fafbff 100%);
      border: 1px solid rgba(15, 20, 34, 0.1);
      border-radius: 18px;
      box-shadow:
        0 10px 24px rgba(15, 20, 34, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
      padding: 14px;
    }
    .order-card-summary {
      display: grid;
      gap: 10px;
    }
    .order-summary-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 9px;
      flex-wrap: wrap;
    }
    .status-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 10px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      border: 1px solid rgba(15, 20, 34, 0.12);
      color: #66627c;
      background: #f6f7fc;
    }
    .status-chip-pending {
      border-color: rgba(255, 159, 67, 0.4);
      color: #ba6c19;
      background: #fff3e6;
    }
    .status-chip-confirmed {
      border-color: rgba(0, 207, 232, 0.4);
      color: #0ca7bf;
      background: #eafcff;
    }
    .status-chip-restaurant {
      border-color: rgba(105, 108, 255, 0.42);
      color: #5a5dd4;
      background: #eef0ff;
    }
    .status-chip-route {
      border-color: rgba(115, 103, 240, 0.36);
      color: #6256d9;
      background: #f1efff;
    }
    .status-chip-delivered {
      border-color: rgba(40, 199, 111, 0.4);
      color: #18824b;
      background: #e9fbf2;
    }
    .status-chip-cancelled {
      border-color: rgba(234, 84, 85, 0.35);
      color: #b64243;
      background: #ffefef;
    }
    .order-time {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #7f7a97;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }
    .urgent-chip {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      border: 1px solid rgba(234, 84, 85, 0.3);
      background: rgba(234, 84, 85, 0.12);
      color: #d74748;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 700;
    }
    .detail-block {
      border: 1px solid rgba(75, 70, 92, 0.12);
      border-radius: 13px;
      background: #fff;
      padding: 11px;
    }
    .detail-title,
    .section-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #8f8ca5;
      margin-bottom: 7px;
    }
    .detail-main {
      color: #373448;
      font-size: 25px;
      line-height: 1.06;
      font-weight: 800;
      margin-bottom: 4px;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .detail-sub {
      color: #6f6b84;
      font-size: 16px;
      line-height: 1.2;
      font-weight: 600;
      word-break: break-word;
    }
    .order-card-warning {
      border-color: rgba(255, 159, 67, 0.34);
      background: linear-gradient(165deg, #fff 0%, #fffaf3 100%);
    }
    .order-warning-note {
      border-radius: 11px;
      border: 1px solid rgba(255, 159, 67, 0.34);
      background: rgba(255, 159, 67, 0.14);
      color: #b96d1a;
      padding: 9px 10px;
      font-size: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
    }
    .customer-summary {
      display: grid;
      gap: 6px;
      border: 1px solid rgba(75, 70, 92, 0.12);
      border-radius: 12px;
      background: #fff;
      padding: 9px 10px;
      margin-bottom: 8px;
    }
    .customer-summary.is-missing {
      border-style: dashed;
      border-color: rgba(255, 159, 67, 0.34);
      background: rgba(255, 250, 243, 0.85);
    }
    .customer-summary > div {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 13px;
      line-height: 1.3;
    }
    .customer-summary span {
      color: #8c89a3;
      font-weight: 700;
      min-width: 70px;
    }
    .customer-summary strong {
      color: #47425e;
      font-weight: 700;
      text-align: right;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .urgent-form {
      display: grid;
      gap: 8px;
      margin-bottom: 8px;
    }
    .quick-actions-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .quick-action-btn {
      min-height: 44px;
      border-radius: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }
    .route-stop {
      position: relative;
      border: 1px solid rgba(75, 70, 92, 0.13);
      border-radius: 14px;
      background: #fff;
      padding: 11px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 9px;
      align-items: flex-start;
      box-shadow: 0 8px 16px rgba(15, 20, 34, 0.05);
    }
    .route-stop + .route-stop {
      margin-top: 8px;
    }
    .route-stop.is-pickup::after {
      content: "";
      position: absolute;
      left: 22px;
      bottom: -12px;
      width: 2px;
      height: 12px;
      background: repeating-linear-gradient(
        to bottom,
        rgba(143, 140, 165, 0.52) 0 2px,
        transparent 2px 4px
      );
    }
    .route-stop-icon {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(105, 108, 255, 0.14);
      color: #5d60d9;
      font-size: 15px;
    }
    .route-stop.is-pickup .route-stop-icon {
      background: rgba(0, 207, 232, 0.15);
      color: #0ca8c0;
    }
    .route-stop.is-dropoff .route-stop-icon {
      background: rgba(255, 159, 67, 0.16);
      color: #d67818;
    }
    .route-stop-content small {
      display: block;
      color: #8b87a3;
      font-size: 11px;
      line-height: 1.1;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.03em;
      margin-bottom: 3px;
    }
    .route-stop-content strong {
      color: #3b374d;
      font-size: 15px;
      line-height: 1.24;
      font-weight: 700;
      word-break: break-word;
    }
    .route-extra {
      margin-top: 9px;
      border-radius: 12px;
      border: 1px dashed rgba(75, 70, 92, 0.24);
      background: rgba(248, 249, 255, 0.75);
      color: #6f6b84;
      font-size: 13px;
      line-height: 1.35;
      padding: 9px 10px;
    }
    .route-extra-title {
      color: #8f8ca5;
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-bottom: 3px;
    }
    .notes-text {
      color: #4f4a63;
      font-size: 14px;
      line-height: 1.45;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .order-card-actions {
      margin-bottom: 8px;
    }
    .order-actions-grid {
      display: grid;
      gap: 9px;
    }
    .order-actions-grid.is-two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .order-actions-grid.is-one {
      grid-template-columns: 1fr;
    }
    .order-actions-grid form {
      margin: 0;
    }
    .order-action-btn {
      width: 100%;
      min-height: 46px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .order-state-note {
      border-radius: 12px;
      border: 1px dashed rgba(75, 70, 92, 0.25);
      background: rgba(248, 249, 255, 0.72);
      color: #7d7895;
      padding: 11px;
      font-weight: 600;
      font-size: 13px;
    }
    .order-next-step-bar {
      display: none;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: max(8px, env(safe-area-inset-bottom));
      width: min(940px, calc(100% - 16px));
      border: 1px solid rgba(75, 70, 92, 0.16);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      box-shadow:
        0 14px 28px rgba(15, 20, 34, 0.16),
        0 4px 10px rgba(15, 20, 34, 0.08);
      padding: 8px;
      z-index: 35;
    }
    .order-next-step-bar form {
      margin: 0;
    }
    .order-next-btn {
      width: 100%;
      min-height: 48px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    @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-order-detail {
        padding: 14px;
      }
      .order-shell {
        padding-bottom: 112px;
      }
      .order-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .order-header-main h1 {
        font-size: 29px;
      }
      .order-header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .order-link-btn {
        justify-content: center;
        width: 100%;
      }
      .detail-main {
        font-size: 22px;
      }
      .order-card-actions {
        display: none;
      }
      .order-next-step-bar {
        display: block;
      }
    }
    @media (max-width: 560px) {
      .quick-actions-grid {
        grid-template-columns: 1fr;
      }
      .order-actions-grid.is-two {
        grid-template-columns: 1fr;
      }
      .detail-main {
        font-size: 21px;
      }
      .order-next-btn {
        font-size: 14px;
        min-height: 46px;
      }
    }
    @media (max-width: 420px) {
      .detail-main {
        font-size: 19px;
      }
    }
  </style>
@endsection

@section('page-script')
  <script>
    document.addEventListener('click', async (event) => {
      const copyBtn = event.target.closest('[data-copy-address]');
      if (copyBtn) {
        const address = copyBtn.getAttribute('data-copy-address') || '';
        if (!address) return;
        try {
          await navigator.clipboard.writeText(address);
          const original = copyBtn.innerHTML;
          copyBtn.innerHTML = '<i class="icon-base ti tabler-check"></i>Copiado';
          window.setTimeout(() => {
            copyBtn.innerHTML = original;
          }, 1200);
        } catch (_) {
          // no-op
        }
        return;
      }

      const editBtn = event.target.closest('[data-toggle-customer-edit]');
      if (editBtn) {
        const card = editBtn.closest('.order-card');
        const summary = card?.querySelector('[data-customer-summary]');
        const form = card?.querySelector('[data-customer-edit-form]');
        if (!summary || !form) return;
        summary.classList.toggle('d-none');
        form.classList.toggle('d-none');
        if (!form.classList.contains('d-none')) {
          const firstInput = form.querySelector('input');
          firstInput?.focus({ preventScroll: true });
        }
        return;
      }

      const scrollBtn = event.target.closest('[data-scroll-target]');
      if (scrollBtn) {
        const targetId = scrollBtn.getAttribute('data-scroll-target');
        const target = targetId ? document.getElementById(targetId) : null;
        if (!target) return;
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  </script>
@endsection