@php
  $istruzioniSlotMeta = [
    'apertura' => [
      'label' => 'Apertura menu',
      'hint' => 'In cima alla schermata di pre-ordine',
      'icon' => 'bx-door-open',
      'accent' => 'primary',
    ],
    'pre_invio' => [
      'label' => 'Pre-invio',
      'hint' => 'Nel carrello, prima di confermare',
      'icon' => 'bx-cart',
      'accent' => 'warning',
    ],
    'post_invio' => [
      'label' => 'Post-invio',
      'hint' => 'Nella conferma con codice PRE_',
      'icon' => 'bx-check-circle',
      'accent' => 'success',
    ],
    'chiusura' => [
      'label' => 'Promo / reminder',
      'hint' => 'Messaggio promozionale o promemoria',
      'icon' => 'bx-bullhorn',
      'accent' => 'info',
    ],
  ];
@endphp

<div class="mt-1">
  <div class="card mb-4">
    <div class="card-body">
      <h5 class="card-title mb-1">
        <i class="bx bx-message-square-detail text-primary me-1"></i>
        Messaggi per il cliente
      </h5>
      <p class="text-muted small mb-0">
        Configura i messaggi per ogni fase del pre-ordine. Attiva e compila solo le sezioni che ti servono.
      </p>
    </div>
  </div>

  <input
    type="hidden"
    name="istruzioni"
    id="istruzioni"
    value="{{ old('istruzioni', json_encode($istruzioniData, JSON_UNESCAPED_UNICODE)) }}"
  >

  <div class="row g-4" id="saltacoda-istruzioni-slots">
    @foreach(\App\Models\Saltacoda::ISTRUZIONE_SLOTS as $slot)
      @php
        $meta = $istruzioniSlotMeta[$slot];
        $slotData = $istruzioniData[$slot] ?? \App\Models\Saltacoda::defaultSlot();
        $isActive = !empty($slotData['attivo']);
      @endphp
      <div class="col-12 col-xl-6">
        <div
          class="card h-100 mb-0 {{ $isActive ? '' : 'border-secondary border-opacity-25' }}"
          data-sc-istruzione-card="{{ $slot }}"
        >
          <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div class="d-flex align-items-center gap-2">
              <span class="avatar avatar-sm">
                <span class="avatar-initial rounded bg-label-{{ $meta['accent'] }}">
                  <i class="bx {{ $meta['icon'] }}"></i>
                </span>
              </span>
              <div>
                <h6 class="card-title mb-0">{{ $meta['label'] }}</h6>
                <small class="text-muted">{{ $meta['hint'] }}</small>
              </div>
            </div>
            <div class="d-flex align-items-center gap-2">
              <span
                class="badge sc-istruzione-status {{ $isActive ? 'bg-label-success' : 'bg-label-secondary' }}"
                data-sc-istruzione-status="{{ $slot }}"
              >
                {{ $isActive ? 'Attivo' : 'Inattivo' }}
              </span>
              <div class="form-check form-switch mb-0">
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="istruzione-attivo-{{ $slot }}"
                  data-sc-istruzione-attivo="{{ $slot }}"
                  {{ $isActive ? 'checked' : '' }}
                >
                <label class="form-check-label visually-hidden" for="istruzione-attivo-{{ $slot }}">Attivo</label>
              </div>
            </div>
          </div>

          <div class="card-body sc-istruzione-card-fields {{ $isActive ? '' : 'opacity-50' }}">
            <div class="mb-3">
              <label class="form-label" for="istruzione-titolo-{{ $slot }}">Titolo</label>
              <input
                type="text"
                class="form-control"
                id="istruzione-titolo-{{ $slot }}"
                data-sc-istruzione-titolo="{{ $slot }}"
                placeholder="Es. Come funziona il saltacoda"
                value="{{ $slotData['titolo'] ?? '' }}"
              >
            </div>
            <div class="mb-3">
              <label class="form-label" for="istruzione-testo-{{ $slot }}">Messaggio</label>
              <textarea
                rows="3"
                class="form-control"
                id="istruzione-testo-{{ $slot }}"
                data-sc-istruzione-testo="{{ $slot }}"
                placeholder="Scrivi qui il testo che vedrà il cliente..."
              >{{ $slotData['testo'] ?? '' }}</textarea>
            </div>

            <div class="border-top pt-3" data-sc-istruzione-preview="{{ $slot }}">
              <p class="text-muted small mb-2">Anteprima</p>
              <div class="bg-light border p-3">
                <div class="fw-medium small mb-1" data-sc-preview-title="{{ $slot }}">
                  {{ $slotData['titolo'] ?: 'Titolo anteprima' }}
                </div>
                <p class="text-muted small mb-0" data-sc-preview-text="{{ $slot }}">
                  @if(!empty($slotData['testo']))
                    {{ $slotData['testo'] }}
                  @else
                    <span class="fst-italic">L'anteprima apparirà mentre scrivi il messaggio.</span>
                  @endif
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    @endforeach
  </div>
</div>
