{% extends "base.html" %}
{% block title %}Voucher Diskon - FinansialApp{% endblock %}
{% block page_title %}<i class="fas fa-ticket me-2" style="color:#7c3aed"></i>Voucher Diskon POS{% endblock %}
{% block content %}

<div class="row g-3">

  <!-- Form Tambah Voucher -->
  <div class="col-lg-4">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center gap-2">
        <i class="fas fa-plus-circle" style="color:#7c3aed"></i>
        <span class="section-title">Voucher Baru</span>
      </div>
      <div class="card-body">
        <form method="POST">
          <input type="hidden" name="action" value="tambah">
          <div class="row g-2">
            <div class="col-12">
              <label class="form-label small fw-semibold">Kode Voucher <span class="text-danger">*</span></label>
              <input type="text" name="kode" class="form-control form-control-sm" required
                     placeholder="DISKON10" style="text-transform:uppercase">
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Tipe</label>
              <select name="tipe" class="form-select form-select-sm" id="vbTipe" onchange="vbToggleTipe()">
                <option value="NOMINAL">Nominal (Rp)</option>
                <option value="PERSEN">Persen (%)</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Nilai <span class="text-danger">*</span></label>
              <input type="number" name="nilai" class="form-control form-control-sm" min="0" step="1" value="0" required>
              <div class="form-text" id="vbNilaiHint" style="font-size:.66rem">Rupiah potongan</div>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Min. Belanja</label>
              <input type="number" name="min_belanja" class="form-control form-control-sm" min="0" step="1" value="0">
            </div>
            <div class="col-md-6" id="vbMaksWrap" style="display:none">
              <label class="form-label small fw-semibold">Maks. Potongan</label>
              <input type="number" name="maks_potongan" class="form-control form-control-sm" min="0" step="1" value="0">
              <div class="form-text" style="font-size:.66rem">0 = tanpa batas</div>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Kuota Pakai</label>
              <input type="number" name="kuota" class="form-control form-control-sm" min="0" step="1" value="0">
              <div class="form-text" style="font-size:.66rem">0 = tak terbatas</div>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Berlaku Dari</label>
              <input type="date" name="berlaku_dari" class="form-control form-control-sm">
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Sampai</label>
              <input type="date" name="berlaku_sampai" class="form-control form-control-sm">
            </div>
            <div class="col-12">
              <label class="form-label small fw-semibold">Catatan</label>
              <input type="text" name="catatan" class="form-control form-control-sm" placeholder="Promo Lebaran, dll (opsional)">
            </div>
            <div class="col-12">
              <button class="btn btn-sm w-100 text-white" style="background:#7c3aed">
                <i class="fas fa-plus me-1"></i>Buat Voucher</button>
            </div>
          </div>
        </form>
        <div class="form-text mt-2" style="font-size:.72rem">
          Voucher dipakai kasir dengan mengetik kodenya di POS. Diskon dari voucher
          otomatis terotorisasi (tidak perlu PIN supervisor).
        </div>
      </div>
    </div>
  </div>

  <!-- Daftar Voucher -->
  <div class="col-lg-8">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center gap-2">
        <i class="fas fa-list" style="color:#7c3aed"></i>
        <span class="section-title">Daftar Voucher</span>
        <span class="badge bg-secondary ms-1" style="font-size:.65rem">{{ voucher_rows|length }}</span>
        <a href="/pos/master" class="btn btn-sm btn-outline-secondary ms-auto"><i class="fas fa-arrow-left me-1"></i>Master POS</a>
      </div>
      <div class="card-body p-0">
        {% if voucher_rows %}
        <div class="table-responsive">
          <table class="table table-sm table-hover table-sticky-actions align-middle mb-0" style="font-size:.82rem">
            <thead class="table-light">
              <tr>
                <th class="ps-3">Kode</th>
                <th>Potongan</th>
                <th class="text-end">Min. Belanja</th>
                <th class="text-center">Kuota</th>
                <th class="text-center">Berlaku</th>
                <th class="text-center">Status</th>
                <th class="text-center">Aksi</th>
              </tr>
            </thead>
            <tbody>
              {% for v in voucher_rows %}
              {% set expired = v.berlaku_sampai and v.berlaku_sampai < today %}
              {% set habis = v.kuota and v.kuota > 0 and (v.terpakai or 0) >= v.kuota %}
              <tr>
                <td class="ps-3">
                  <span class="fw-bold">{{ v.kode }}</span>
                  {% if v.catatan %}<div class="text-muted" style="font-size:.7rem">{{ v.catatan }}</div>{% endif %}
                </td>
                <td>
                  {% if v.tipe == 'PERSEN' %}<span class="badge bg-info text-dark">{{ '%g'|format(v.nilai) }}%</span>
                  {% if v.maks_potongan and v.maks_potongan > 0 %}<div class="text-muted" style="font-size:.66rem">maks {{ v.maks_potongan|rp }}</div>{% endif %}
                  {% else %}<span class="text-rp fw-semibold">{{ v.nilai|rp }}</span>{% endif %}
                </td>
                <td class="text-end text-rp">{{ v.min_belanja|rp }}</td>
                <td class="text-center">
                  {% if v.kuota and v.kuota > 0 %}{{ v.terpakai or 0 }}/{{ v.kuota }}{% else %}<span class="text-muted">∞</span> ({{ v.terpakai or 0 }}){% endif %}
                </td>
                <td class="text-center" style="font-size:.72rem">
                  {{ v.berlaku_dari|tgl if v.berlaku_dari else '—' }}<br>s/d {{ v.berlaku_sampai|tgl if v.berlaku_sampai else '—' }}
                </td>
                <td class="text-center">
                  {% if not v.aktif %}<span class="badge bg-secondary">Nonaktif</span>
                  {% elif expired %}<span class="badge bg-danger">Kedaluwarsa</span>
                  {% elif habis %}<span class="badge bg-warning text-dark">Kuota Habis</span>
                  {% else %}<span class="badge bg-success">Aktif</span>{% endif %}
                </td>
                <td class="text-center" style="white-space:nowrap">
                  <button type="button" class="btn btn-xs btn-outline-warning" title="Edit"
                          onclick="editVoucher(this)"
                          data-id="{{ v.id }}" data-kode="{{ v.kode|e }}" data-tipe="{{ v.tipe }}"
                          data-nilai="{{ v.nilai or 0 }}" data-min="{{ v.min_belanja or 0 }}"
                          data-maks="{{ v.maks_potongan or 0 }}" data-kuota="{{ v.kuota or 0 }}"
                          data-dari="{{ v.berlaku_dari or '' }}" data-sampai="{{ v.berlaku_sampai or '' }}"
                          data-catatan="{{ (v.catatan or '')|e }}">
                    <i class="fas fa-pen"></i></button>
                  <button type="submit" class="btn btn-xs btn-outline-secondary" title="Aktif/Nonaktif"
                          form="vForm{{ v.id }}toggle"><i class="fas fa-power-off"></i></button>
                  <button type="submit" class="btn btn-xs btn-outline-danger" title="Hapus"
                          form="vForm{{ v.id }}hapus"
                          onclick="return confirm('Hapus/nonaktifkan voucher {{ v.kode }}?')"><i class="fas fa-trash"></i></button>
                  <form id="vForm{{ v.id }}toggle" method="POST" class="d-none">
                    <input type="hidden" name="action" value="toggle"><input type="hidden" name="id" value="{{ v.id }}"></form>
                  <form id="vForm{{ v.id }}hapus" method="POST" class="d-none">
                    <input type="hidden" name="action" value="hapus"><input type="hidden" name="id" value="{{ v.id }}"></form>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <div class="text-center text-muted py-5">
          <i class="fas fa-ticket mb-2" style="font-size:2rem;opacity:.3"></i>
          <div style="font-size:.85rem">Belum ada voucher. Buat lewat form di samping.</div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Modal Edit Voucher (form-sibling pattern: tombol pakai atribut form=) -->
<div class="modal fade" id="modalEditVoucher" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title"><i class="fas fa-pen me-2" style="color:#7c3aed"></i>Edit Voucher</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form method="POST" id="formEditVoucher">
          <input type="hidden" name="action" value="edit">
          <input type="hidden" name="id" id="ev_id">
          <div class="row g-2">
            <div class="col-12">
              <label class="form-label small fw-semibold">Kode <span class="text-danger">*</span></label>
              <input type="text" name="kode" id="ev_kode" class="form-control form-control-sm" required style="text-transform:uppercase">
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Tipe</label>
              <select name="tipe" id="ev_tipe" class="form-select form-select-sm">
                <option value="NOMINAL">Nominal (Rp)</option>
                <option value="PERSEN">Persen (%)</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Nilai <span class="text-danger">*</span></label>
              <input type="number" name="nilai" id="ev_nilai" class="form-control form-control-sm" min="0" step="1" required>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Min. Belanja</label>
              <input type="number" name="min_belanja" id="ev_min" class="form-control form-control-sm" min="0" step="1">
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Maks. Potongan</label>
              <input type="number" name="maks_potongan" id="ev_maks" class="form-control form-control-sm" min="0" step="1">
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Kuota</label>
              <input type="number" name="kuota" id="ev_kuota" class="form-control form-control-sm" min="0" step="1">
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Berlaku Dari</label>
              <input type="date" name="berlaku_dari" id="ev_dari" class="form-control form-control-sm">
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Sampai</label>
              <input type="date" name="berlaku_sampai" id="ev_sampai" class="form-control form-control-sm">
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Catatan</label>
              <input type="text" name="catatan" id="ev_catatan" class="form-control form-control-sm">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="submit" form="formEditVoucher" class="btn btn-sm text-white" style="background:#7c3aed">
          <i class="fas fa-save me-1"></i>Simpan</button>
      </div>
    </div>
  </div>
</div>

<script>
function vbToggleTipe(){
  var t = document.getElementById('vbTipe').value;
  document.getElementById('vbMaksWrap').style.display = (t === 'PERSEN') ? '' : 'none';
  document.getElementById('vbNilaiHint').textContent = (t === 'PERSEN') ? 'Persen (0-100)' : 'Rupiah potongan';
}
function editVoucher(btn){
  var d = btn.dataset;
  document.getElementById('ev_id').value = d.id;
  document.getElementById('ev_kode').value = d.kode;
  document.getElementById('ev_tipe').value = d.tipe;
  document.getElementById('ev_nilai').value = d.nilai;
  document.getElementById('ev_min').value = d.min;
  document.getElementById('ev_maks').value = d.maks;
  document.getElementById('ev_kuota').value = d.kuota;
  document.getElementById('ev_dari').value = d.dari;
  document.getElementById('ev_sampai').value = d.sampai;
  document.getElementById('ev_catatan').value = d.catatan;
  new bootstrap.Modal(document.getElementById('modalEditVoucher')).show();
}
</script>
{% endblock %}