<?php
$bulan_nama = ['','Januari','Februari','Maret','April','Mei','Juni',
               'Juli','Agustus','September','Oktober','November','Desember'];
$total_terbayar = $iuran->total_terbayar ?: 0;
$sisa           = max(0, $iuran->nominal - $total_terbayar);
$persen         = ($iuran->nominal > 0) ? round(($total_terbayar / $iuran->nominal) * 100) : 0;
?>

<div class="container-fluid">
  <form action="<?php echo base_url('iuran/bayar_warga/' . $iuran->id); ?>" method="post" enctype="multipart/form-data">
    <div class="row g-4">

      <!-- ═══ KOLOM KIRI: Detail Tagihan ═══ -->
      <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100" style="border-radius:15px">
          <div class="card-body px-4 py-4">

            <div class="d-flex align-items-center gap-2 mb-4">
              <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" style="width:36px;height:36px">
                <i class="bi bi-receipt text-primary"></i>
              </div>
              <div class="fw-bold small text-uppercase" style="letter-spacing:.5px">Detail Tagihan</div>
            </div>

            <div class="mb-3">
              <div class="text-muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px">Jenis Iuran</div>
              <div class="fw-semibold"><?php echo $iuran->nama_iuran; ?></div>
            </div>
            <div class="mb-3">
              <div class="text-muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px">Periode</div>
              <div class="fw-semibold"><?php echo $bulan_nama[(int)$iuran->periode_bulan] . ' ' . $iuran->periode_tahun; ?></div>
            </div>
            <div class="mb-3">
              <div class="text-muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px">Total Tagihan</div>
              <div class="fw-bold fs-4 text-primary">Rp <?php echo number_format($iuran->nominal,0,',','.'); ?></div>
            </div>

            <?php if($total_terbayar > 0): ?>
            <hr class="my-3">
            <div class="mb-1 d-flex justify-content-between small">
              <span class="text-success">Terbayar: <strong>Rp <?php echo number_format($total_terbayar,0,',','.'); ?></strong></span>
              <span class="text-danger">Sisa: <strong>Rp <?php echo number_format($sisa,0,',','.'); ?></strong></span>
            </div>
            <div class="progress mb-1" style="height:8px;border-radius:10px">
              <div class="progress-bar bg-success" style="width:<?php echo $persen; ?>%;border-radius:10px"></div>
            </div>
            <div class="text-center text-muted small"><?php echo $persen; ?>% · <?php echo $iuran->jumlah_cicilan ?? 0; ?> cicilan</div>
            <?php endif; ?>

            <?php if(($iuran->jumlah_cicilan ?? 0) > 0): ?>
            <a href="<?php echo base_url('iuran/history_cicilan/' . $iuran->id); ?>"
               class="btn btn-sm btn-outline-secondary w-100 mt-3">
              <i class="bi bi-clock-history me-1"></i>History Cicilan
            </a>
            <?php endif; ?>

          </div>
        </div>
      </div>

      <!-- ═══ KOLOM KANAN: Form Bayar ═══ -->
      <div class="col-md-8">
        <div class="card border-0 shadow-sm" style="border-radius:15px">
          <div class="card-header bg-white border-0 pt-4 px-4 pb-3">
            <div class="d-flex align-items-center gap-2 mb-3">
              <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" style="width:36px;height:36px">
                <i class="bi bi-cash-coin text-primary"></i>
              </div>
              <div>
                <div class="fw-bold">FORM PEMBAYARAN</div>
                <div class="text-muted small">Upload bukti pembayaran Anda</div>
              </div>
            </div>

            <!-- Toggle Mode -->
            <div class="d-flex gap-2">
              <input type="radio" class="btn-check" name="mode_bayar" id="mode_lunas" value="lunas" checked autocomplete="off">
              <label class="btn btn-outline-success" for="mode_lunas">
                <i class="bi bi-check-circle me-1"></i>Bayar Lunas
              </label>

              <input type="radio" class="btn-check" name="mode_bayar" id="mode_cicil" value="cicil" autocomplete="off">
              <label class="btn btn-outline-primary" for="mode_cicil">
                <i class="bi bi-layers me-1"></i>Bayar Cicilan
              </label>
            </div>
          </div>

          <div class="card-body px-4 pb-4">

            <!-- Alert info -->
            <div id="info_lunas" class="alert alert-success border-0 py-2 small mb-3">
              <i class="bi bi-info-circle me-1"></i>
              Pembayaran <strong>LUNAS</strong> akan diverifikasi admin dalam 1×24 jam. Upload bukti transfer yang jelas.
            </div>
            <div id="info_cicil" class="alert alert-primary border-0 py-2 small mb-3" style="display:none">
              <i class="bi bi-info-circle me-1"></i>
              Mode cicilan: masukkan nominal yang dibayar sekarang beserta bukti transfernya. Setiap cicilan diverifikasi admin.
            </div>

            <!-- Nominal Cicilan (muncul saat cicil) -->
            <div id="wrap_cicil" style="display:none" class="mb-3">
              <label class="form-label fw-semibold">Nominal Cicilan (Rp) <span class="text-danger">*</span></label>
              <input type="number" name="nominal_cicilan" id="nominal_cicilan"
                     class="form-control" min="1" max="<?php echo $sisa; ?>"
                     placeholder="Contoh: 10000">
              <div class="form-text">
                Sisa tagihan: <strong class="text-danger">Rp <?php echo number_format($sisa,0,',','.'); ?></strong>
              </div>
              <!-- Preview -->
              <div id="preview_cicil" class="mt-2 p-2 rounded bg-light border" style="display:none;font-size:13px">
                <div class="d-flex justify-content-between">
                  <span class="text-muted">Dibayar sekarang:</span>
                  <strong class="text-success" id="preview_bayar">-</strong>
                </div>
                <div class="d-flex justify-content-between">
                  <span class="text-muted">Sisa setelah ini:</span>
                  <strong class="text-danger" id="preview_sisa">-</strong>
                </div>
              </div>
            </div>

            <!-- Metode Pembayaran -->
            <div class="mb-3">
              <label class="form-label fw-semibold">Metode Pembayaran <span class="text-danger">*</span></label>
              <select name="metode_pembayaran" id="metode_pembayaran" class="form-select" required>
                <option value="">-- Pilih Metode --</option>
                <option value="Transfer Bank">Transfer Bank</option>
                <option value="E-Wallet">E-Wallet (GoPay/OVO/Dana)</option>
                <option value="Tunai">Tunai (via Pengurus)</option>
              </select>
            </div>

            <!-- Bukti Transfer -->
            <div class="mb-3">
              <label class="form-label fw-semibold">
                Bukti Transfer <span class="text-danger">*</span>
              </label>
              <input type="file" name="bukti_transfer" class="form-control" accept=".jpg,.jpeg,.png,.pdf" required>
              <div class="form-text"><i class="bi bi-paperclip"></i> JPG, PNG, PDF — maks. 2MB</div>
            </div>

            <!-- Keterangan -->
            <div class="mb-4">
              <label class="form-label fw-semibold">
                Keterangan <small class="text-muted fw-normal">(opsional)</small>
              </label>
              <textarea name="keterangan" class="form-control" rows="3"
                        placeholder="Catatan tambahan..."></textarea>
            </div>

            <!-- Warning verifikasi -->
            <div class="alert alert-warning border-0 py-2 small mb-4">
              <i class="bi bi-exclamation-triangle me-1"></i>
              Pastikan bukti transfer jelas dan terbaca. Pembayaran akan diverifikasi oleh admin dalam 1×24 jam.
            </div>

            <!-- Tombol -->
            <div class="d-flex justify-content-between align-items-center">
              <a href="<?php echo base_url('iuran'); ?>" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>Kembali
              </a>
              <button type="submit" class="btn btn-primary px-4" id="btn_submit">
                <i class="bi bi-send me-2"></i>
                <span id="btn_label">Kirim Pembayaran</span>
              </button>
            </div>

          </div>
        </div>
      </div>

    </div>
  </form>
</div>

<script>
(function(){
  var sisa = <?php echo (float)$sisa; ?>;

  var elLunas      = document.getElementById('mode_lunas');
  var elCicil      = document.getElementById('mode_cicil');
  var wrapCicil    = document.getElementById('wrap_cicil');
  var inputCicil   = document.getElementById('nominal_cicilan');
  var previewBox   = document.getElementById('preview_cicil');
  var previewBayar = document.getElementById('preview_bayar');
  var previewSisa  = document.getElementById('preview_sisa');
  var infoLunas    = document.getElementById('info_lunas');
  var infoCicil    = document.getElementById('info_cicil');
  var btnLabel     = document.getElementById('btn_label');

  function rp(n) {
    return 'Rp ' + Math.max(0, n).toLocaleString('id-ID');
  }

  function toggleMode() {
    var isCicil = elCicil.checked;
    wrapCicil.style.display = isCicil ? 'block' : 'none';
    inputCicil.required     = isCicil;
    infoLunas.style.display = isCicil ? 'none'  : 'block';
    infoCicil.style.display = isCicil ? 'block' : 'none';
    btnLabel.textContent    = isCicil ? 'Kirim Cicilan' : 'Kirim Pembayaran';
    if(!isCicil) previewBox.style.display = 'none';
  }

  inputCicil.addEventListener('input', function(){
    var val = parseFloat(this.value) || 0;
    if(val > sisa) { this.value = sisa; val = sisa; }
    if(val > 0) {
      previewBayar.textContent = rp(val);
      previewSisa.textContent  = rp(sisa - val);
      previewBox.style.display = 'block';
    } else {
      previewBox.style.display = 'none';
    }
  });

  elLunas.addEventListener('change', toggleMode);
  elCicil.addEventListener('change', toggleMode);
  toggleMode();
})();
</script>