@php
  $asportiTimeline = $asportiTimeline ?? collect();
  $timelineTitle = $timelineTitle ?? 'Timeline';
  $timelineEmpty = $timelineEmpty ?? 'Nessun orario in elenco';
  $timelineAccent = $timelineAccent ?? 'time'; // time|prep|call|pick
@endphp

<section class="asporto-h-timeline asporto-h-timeline--{{ $timelineAccent }}">
  <div class="asporto-h-timeline__head">
    <div class="asporto-h-timeline__brand">
      <i class="bx bx-time-five" aria-hidden="true"></i>
      <span class="asporto-h-timeline__title">{{ $timelineTitle }}</span>
    </div>

    <div class="asporto-h-timeline__stats" aria-live="polite">
      <span class="asporto-h-stat asporto-h-stat--late" id="tl-stat-late" hidden>
        <strong data-tl-late>0</strong> ritardo
      </span>
      <span class="asporto-h-stat asporto-h-stat--soon" id="tl-stat-soon" hidden>
        <strong data-tl-soon>0</strong> tra ≤10 min
      </span>
      <span class="asporto-h-stat asporto-h-stat--total" id="tl-stat-total">
        <strong data-tl-total id="badge-time">{{ $asportiTimeline->count() }}</strong> totali
      </span>
      <button type="button" class="btn btn-sm btn-label-primary asporto-h-timeline__now-btn" id="btn-timeline-now" title="Vai all'ora attuale">
        <i class="bx bx-current-location"></i> Ora
      </button>
    </div>
  </div>

  <div class="asporto-h-timeline__scroll" id="lane-timeline-scroll">
    <div class="asporto-h-timeline__track" id="lane-timeline">
      <div class="asporto-h-timeline__rail" aria-hidden="true"></div>
      <div class="asporto-h-timeline__now" id="timeline-now-cursor" hidden>
        <span class="asporto-h-timeline__now-line"></span>
        <span class="asporto-h-timeline__now-label" data-now-label></span>
      </div>

      @forelse($asportiTimeline as $asporto)
        @php
          $ordine = $asporto->ordine;
          $info = is_array($ordine?->info) ? $ordine->info : [];
          $cliente = $info['cliente'] ?? ($ordine->nome ?? '—');
          $codice = $ordine->codice ?? ('A-'.$asporto->ordine_id);
          $orario = $asporto->ora_ritiro
            ? \Illuminate\Support\Carbon::parse($asporto->ora_ritiro)->format('H:i')
            : ($info['ora_ritiro'] ?? '');
        @endphp
        <div
          class="asporto-timeline__item asporto-h-timeline__item"
          data-stato="{{ $asporto->stato }}"
          data-timeline-id="{{ $asporto->id }}"
          data-ora-ritiro="{{ $orario }}"
          data-timing-target
        >
          <div class="asporto-h-timeline__above">
            <span class="asporto-timing-badge asporto-timing-badge--sm" data-timing-badge></span>
          </div>
          <span class="asporto-timeline__dot asporto-h-timeline__dot"></span>
          <div class="asporto-h-timeline__below">
            <div class="asporto-h-timeline__ora">{{ $orario !== '' ? $orario : '—' }}</div>
            <div class="asporto-h-timeline__codice">{{ $codice }}</div>
            <div class="asporto-h-timeline__cliente" title="{{ $cliente }}">{{ $cliente }}</div>
          </div>
        </div>
      @empty
        <div class="asporto-h-timeline__empty text-muted small">{{ $timelineEmpty }}</div>
      @endforelse
    </div>
  </div>
</section>
