<div class="mt-1 sc-campi-wrap">
  <div class="card mb-4">
    <div class="card-body">
      <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
        <div>
          <h5 class="card-title mb-1">
            <i class="bx bx-notepad text-primary me-1"></i>
            Campi richiesti al cliente
          </h5>
          <p class="text-muted small mb-0">
            Dati che il cliente compila nel carrello prima di inviare il pre-ordine. La chiave tecnica si genera dall'etichetta.
          </p>
        </div>
        <span class="badge bg-label-primary" id="sc-campi-count-badge">
          <i class="bx bx-list-check me-1"></i>
          <span id="sc-campi-count">0</span> campi configurati
        </span>
      </div>
    </div>
  </div>

  <input type="hidden" name="info" id="info" value="{{ old('info', $saltacoda->info ?? '') }}">

  <div class="row g-4">
    <div class="col-12 col-xl-7">
      <div class="card mb-4 border-primary border-opacity-25">
        <div class="card-header">
          <h6 class="card-title mb-0">
            <i class="bx bx-plus-circle me-1"></i> Aggiungi campo
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3 align-items-end">
            <div class="col-md-5">
              <label for="sc-new-campo-label" class="form-label">Etichetta</label>
              <input
                type="text"
                class="form-control"
                id="sc-new-campo-label"
                placeholder="Es. Nome, Tavolo, Telefono..."
                autocomplete="off"
              >
              <div class="form-text">Visibile al cliente nel carrello</div>
            </div>
            <div class="col-md-3">
              <label for="sc-new-campo-type" class="form-label">Tipo</label>
              <select class="form-select" id="sc-new-campo-type">
                <option value="text">Testo</option>
                <option value="boolean">Si / No</option>
                <option value="time">Orario</option>
              </select>
            </div>
            <div class="col-md-2">
              <label class="form-label">Chiave</label>
              <div class="form-control bg-light text-muted" id="sc-new-campo-key-preview" aria-live="polite">—</div>
            </div>
            <div class="col-md-2">
              <button type="button" class="btn btn-primary w-100" id="sc-add-campo-btn">
                <i class="bx bx-plus me-1"></i> Aggiungi
              </button>
            </div>
          </div>
          <div class="d-flex flex-wrap gap-2 mt-3">
            <span class="text-muted small align-self-center me-1">Suggerimenti:</span>
            <button type="button" class="btn btn-sm btn-label-secondary" data-sc-campo-suggest="Nome">Nome</button>
            <button type="button" class="btn btn-sm btn-label-secondary" data-sc-campo-suggest="Tavolo">Tavolo</button>
            <button type="button" class="btn btn-sm btn-label-secondary" data-sc-campo-suggest="Telefono">Telefono</button>
            <button type="button" class="btn btn-sm btn-label-secondary" data-sc-campo-suggest="Orario ritiro" data-sc-campo-type-suggest="time">Orario ritiro</button>
          </div>
        </div>
      </div>

      <div id="user-friendly-info-fields" class="d-flex flex-column gap-3"></div>
    </div>

    <div class="col-12 col-xl-5">
      <div class="card sticky-top" style="top: 1rem;">
        <div class="card-header">
          <h6 class="card-title mb-0">
            <i class="bx bx-mobile-alt me-1"></i> Anteprima carrello cliente
          </h6>
        </div>
        <div class="card-body">
          <p class="text-muted small text-uppercase fw-medium mb-3">Informazioni ordine</p>
          <div id="sc-campi-preview-fields">
            <p class="text-muted small mb-0 fst-italic">Aggiungi un campo per vedere l'anteprima.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
