{{-- Modal "pilih ukuran cepat" untuk tombol keranjang di kartu produk (diisi oleh main.js). --}}
<div class="modal fade" id="quickAddModal" tabindex="-1" aria-labelledby="quickAddTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down quick-add-dialog">
    <div class="modal-content quick-add">
      <form action="{{ route('keranjang.store') }}" method="post" data-size-form data-ajax-cart novalidate>
        @csrf
        <div class="modal-header border-0 pb-0">
          <h2 class="modal-title h5" id="quickAddTitle">Pilih Ukuran</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
        </div>
        <div class="modal-body">
          <div class="d-flex gap-3 align-items-center mb-3">
            <img src="{{ asset('assets/img/placeholder.webp') }}" alt="" class="qa-thumb" width="88" height="88" data-qa-image>
            <div class="min-w-0">
              <div class="fw-semibold lh-sm mb-1" data-qa-name>Produk</div>
              <div class="qa-price" data-qa-price></div>
              <a href="{{ route('katalog') }}" class="small" data-qa-link>Lihat detail produk <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
            </div>
          </div>
          <fieldset class="mb-2">
            <legend class="form-label fw-semibold fs-6 mb-2">Ukuran</legend>
            <div class="size-options" data-qa-sizes></div>
          </fieldset>
          <div class="small mb-3" data-stock-text aria-live="polite"></div>
          <label class="form-label fw-semibold fs-6 mb-2" for="qaQty">Jumlah</label>
          <div class="input-group cart-qty" style="width:150px">
            <button type="button" class="btn btn-light-blue" data-qty-minus aria-label="Kurangi jumlah">&minus;</button>
            <input type="number" name="qty" id="qaQty" value="1" min="1" max="1" class="form-control text-center" inputmode="numeric" data-qty-input>
            <button type="button" class="btn btn-light-blue" data-qty-plus aria-label="Tambah jumlah">&plus;</button>
          </div>
        </div>
        <div class="modal-footer border-0 pt-0">
          <button type="submit" class="btn btn-gradient btn-lg w-100" data-loading-text="Menambahkan..."><i class="bi bi-bag-plus me-2" aria-hidden="true"></i>Tambah ke Keranjang</button>
        </div>
      </form>
    </div>
  </div>
</div>