<div class="col-12">
  <div class="card shadow-sm border-0 mb-2">
    <div class="card-body p-3">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
        <h6 class="mb-0 text-primary">Dati ordine</h6>
      </div>

      <div class="row g-2">
        <div class="col-12 col-md-6 col-lg-5">
          <label class="form-label small text-muted mb-1" for="cliente">Cliente</label>
          <input
            type="text"
            id="cliente"
            placeholder="Cliente"
            class="form-control fw-semibold"
            value="{{ $ordine->info['cliente'] ?? '' }}"
            @if($punto_vendita->info['campi_ordine']['cliente']['required'] ?? false) required @endif
          >
        </div>

        <div class="col-6 col-md-3 col-lg-3">
          <label class="form-label small text-muted mb-1" for="tavolo">Tavolo</label>
          <input
            type="text"
            id="tavolo"
            placeholder="Tavolo"
            class="form-control fw-semibold"
            value="{{ $ordine->info['tavolo'] ?? '' }}"
            @if($punto_vendita->info['campi_ordine']['tavolo']['required'] ?? false) required @endif
          >
        </div>

        <div class="col-6 col-md-3 col-lg-2">
          <label class="form-label small text-muted mb-1" for="coperti">Coperti</label>
          <input
            type="number"
            id="coperti"
            min="0"
            step="1"
            placeholder="0"
            class="form-control fw-semibold"
            value="{{ $ordine->info['coperti'] ?? '' }}"
            @if($punto_vendita->info['campi_ordine']['coperti']['required'] ?? false) required @endif
          >
        </div>
      </div>

      <div class="d-flex flex-wrap justify-content-end gap-2 mt-2 pt-2 border-top">
        <button class="btn btn-outline-danger" onclick="azzeraCarrello()">
          <i class="bx bx-x-circle me-1"></i>
          Svuota carrello
        </button>
        <button class="btn btn-primary" onclick="checkout()">
          <i class="bx bx-credit-card me-1"></i>
          Vai al pagamento
        </button>
      </div>
    </div>
  </div>

  <div class="modal fade" id="modalPagamento" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Pagamento</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          //Checkout
        </div>
      </div>
    </div>
  </div>
</div>