<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Kartu Cicilan Iuran</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family: 'Courier New', monospace; font-size: 12px; width: 210mm; margin: auto; padding: 20px; }
  h2  { font-size: 16px; }
  .center { text-align: center; }
  .right  { text-align: right; }
  hr { border: none; border-top: 1px dashed #000; margin: 8px 0; }
  table { width: 100%; border-collapse: collapse; }
  th, td { padding: 5px 8px; vertical-align: top; }
  th { background: #f0f0f0; }
  .badge-lunas   { color: #155724; }
  .badge-pending { color: #856404; }
  .progress-bar-wrap { background:#eee; border-radius:4px; height:14px; width:100%; margin:4px 0; }
  .progress-bar-fill { background:#28a745; border-radius:4px; height:14px; display:inline-block; }
  .info-row { display:flex; justify-content:space-between; margin:3px 0; }
  @media print {
    body { padding: 10px; }
    .no-print { display: none; }
  }
</style>
</head>
<body>

<div class="center">
  <h2>KARTU CICILAN IURAN</h2>
  <div>RT / RW Sistem</div>
</div>
<hr>

<?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;
?>

<table>
  <tr><td width="40%">Nama</td><td>: <strong><?php echo $iuran->nama_lengkap; ?></strong></td></tr>
  <tr><td>NIK</td><td>: <?php echo $iuran->nik; ?></td></tr>
  <tr><td>Jenis Iuran</td><td>: <?php echo $iuran->nama_iuran; ?></td></tr>
  <tr><td>Periode</td><td>: <?php echo $bulan_nama[(int)$iuran->periode_bulan] . ' ' . $iuran->periode_tahun; ?></td></tr>
</table>
<hr>

<div class="info-row"><span>Total Tagihan</span><span><strong>Rp <?php echo number_format($iuran->nominal,0,',','.'); ?></strong></span></div>
<div class="info-row"><span>Total Terbayar</span><span class="badge-lunas"><strong>Rp <?php echo number_format($total_terbayar,0,',','.'); ?></strong></span></div>
<div class="info-row"><span>Sisa Tagihan</span><span style="color:#c00"><strong>Rp <?php echo number_format($sisa,0,',','.'); ?></strong></span></div>
<div>
  <div class="progress-bar-wrap">
    <div class="progress-bar-fill" style="width:<?php echo $persen; ?>%"></div>
  </div>
  <div class="center"><?php echo $persen; ?>% terbayar</div>
</div>

<hr>
<strong>Riwayat Cicilan:</strong>
<br><br>

<?php if(empty($cicilan)): ?>
  <div class="center">Belum ada cicilan</div>
<?php else: ?>
<table border="1" style="border-color:#ddd">
  <thead>
    <tr>
      <th class="center">Ke-</th>
      <th>Tanggal</th>
      <th>Metode</th>
      <th class="right">Nominal</th>
      <th class="center">Status</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach($cicilan as $c): ?>
    <tr>
      <td class="center"><?php echo $c->ke; ?></td>
      <td><?php echo date('d/m/Y', strtotime($c->tanggal_bayar)); ?></td>
      <td><?php echo ucfirst($c->metode_pembayaran); ?></td>
      <td class="right">Rp <?php echo number_format($c->nominal_cicilan,0,',','.'); ?></td>
      <td class="center <?php echo $c->status==='lunas'?'badge-lunas':'badge-pending'; ?>">
        <?php echo $c->status==='lunas' ? 'Lunas' : 'Menunggu'; ?>
      </td>
    </tr>
    <?php endforeach; ?>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" class="right">TOTAL TERBAYAR</th>
      <th class="right">Rp <?php echo number_format($total_terbayar,0,',','.'); ?></th>
      <th></th>
    </tr>
  </tfoot>
</table>
<?php endif; ?>

<hr>
<table>
  <tr>
    <td width="50%" class="center">
      <br><br><br>
      ___________________<br>
      Warga
    </td>
    <td width="50%" class="center">
      Dicetak: <?php echo date('d M Y H:i'); ?><br><br><br>
      ___________________<br>
      Pengurus RT
    </td>
  </tr>
</table>

<div class="no-print" style="margin-top:20px; text-align:center">
  <button onclick="window.print()" style="padding:8px 20px; cursor:pointer">🖨️ Print</button>
  <button onclick="window.close()" style="padding:8px 20px; margin-left:10px; cursor:pointer">Tutup</button>
</div>

<script>
// Auto print saat halaman terbuka
window.onload = function(){ window.print(); }
</script>
</body>
</html>