@php
  $ordine = $asporto->ordine;
  $info = is_array($ordine?->info) ? $ordine->info : [];
  $cliente = $info['cliente'] ?? ($ordine->nome ?? '—');
  $telefono = trim((string) ($info['telefono'] ?? ''));
  $codice = $ordine->codice ?? ('A-'.$asporto->ordine_id);
  $orario = $asporto->ora_ritiro
    ? \Illuminate\Support\Carbon::parse($asporto->ora_ritiro)->format('H:i')
    : ($info['ora_ritiro'] ?? '');
  $note = $ordine->note ?? ($info['note'] ?? '');
  $righe = $ordine?->righe_ordine ?? collect();
  $qta = (int) $righe->sum('quantita');
  $totaleVoci = $righe->count();
@endphp

<section
  class="asporto-prep-panel asporto-pick-panel"
  id="asportoPrepPanel{{ $asporto->id }}"
  data-prep-panel
  data-asporto-id="{{ $asporto->id }}"
  data-asporto-codice="{{ $codice }}"
  data-ora-ritiro="{{ $orario }}"
  data-completa-url="{{ route('asporto.postazione.preparazione.completa', $asporto) }}"
  data-timing-target
  hidden
>
  <div class="asporto-prep-detail__body asporto-pick-panel__body">
    <div class="asporto-pick-split">
      <div class="asporto-pick-split__info">
        <div class="asporto-pick-split__code-row">
          <div class="asporto-prep-panel__code">{{ $codice }}</div>
          <div class="d-flex align-items-start gap-2">
            <div class="asporto-timing-chip" data-timing-chip>
              <span class="asporto-timing-badge" data-timing-badge></span>
            </div>
            <div class="asporto-prep-progress" data-prep-progress aria-live="polite">
              <span data-prep-done>0</span>/<span data-prep-total>{{ $totaleVoci }}</span>
              <small>pronti</small>
            </div>
          </div>
        </div>

        @include('asporto._partials.ordine_facts', ['asporto' => $asporto])

        <div class="asporto-pick-alert asporto-prep-alert">
          <i class="bx bx-package"></i>
          <div>
            <strong>Assembla l’ordine</strong>
            <div>Spunta ogni voce man mano che la prepari.</div>
          </div>
        </div>
      </div>

      <div class="asporto-pick-split__items">
        <p class="asporto-pick-split__items-title">Checklist</p>
        <div class="asporto-pick-split__checklist" data-prep-list>
          @forelse($righe as $idx => $riga)
            <label class="asporto-check-item{{ $idx === 0 ? ' is-next' : '' }}" data-check-row>
              <input class="form-check-input" type="checkbox" data-prep-check value="{{ $idx }}">
              <span class="asporto-check-item__qta">{{ (int) $riga->quantita }}×</span>
              <span class="asporto-check-item__body">
                <span class="asporto-check-item__nome">{{ $riga->piatto->nome ?? ('Piatto #'.$riga->piatto_id) }}</span>
                @php
                  $variantiRiga = ($riga->has_variante ?? collect())->filter(fn ($v) => $v->variante_id !== null);
                @endphp
                @if($variantiRiga->isNotEmpty())
                  <span class="asporto-check-item__varianti">
                    @foreach($variantiRiga as $variante)
                      <span class="asporto-check-item__variante">
                        <i class="bx bx-plus-circle"></i>
                        {{ $variante->variante_piatto->label ?? 'Variante' }}
                        @if(!empty($variante->nota))
                          <em>({{ $variante->nota }})</em>
                        @endif
                      </span>
                    @endforeach
                  </span>
                @endif
                @if(!empty($riga->note))
                  <span class="asporto-check-item__note">
                    <i class="bx bx-error-circle"></i> {{ $riga->note }}
                  </span>
                @endif
              </span>
            </label>
          @empty
            <div class="text-muted">Nessuna riga ordine.</div>
          @endforelse
        </div>
      </div>
    </div>
  </div>

  <div class="asporto-prep-detail__foot asporto-pick-panel__foot">
    <button type="button" class="btn btn-warning asporto-prep-continua" data-prep-continua disabled>
      <i class="bx bx-check me-1"></i>Continua → Chiamata
    </button>
  </div>
</section>
