<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bukti Pembayaran Iuran</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #f0f4f8;
            color: #1a202c;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 24px 16px;
        }

        /* ── Toolbar (hanya muncul di layar, hilang saat cetak) ── */
        .toolbar {
            width: 100%;
            max-width: 720px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-bottom: 16px;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 18px;
            border-radius: 8px;
            font-size: .85rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            text-decoration: none;
            transition: opacity .15s;
        }
        .btn:hover { opacity: .85; }
        .btn-print  { background: #2563eb; color: #fff; }
        .btn-back   { background: #e2e8f0; color: #374151; }

        /* ── Kertas ── */
        .receipt {
            width: 100%;
            max-width: 720px;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0,0,0,.10);
            overflow: hidden;
        }

        /* ── Header strip ── */
        .receipt-header {
            background: linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
            color: #fff;
            padding: 28px 32px 22px;
            position: relative;
        }
        .receipt-header .org-name {
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: .5px;
        }
        .receipt-header .doc-title {
            font-size: .78rem;
            opacity: .8;
            margin-top: 2px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }
        .receipt-header .badge-status {
            position: absolute;
            top: 28px;
            right: 32px;
            padding: 5px 14px;
            border-radius: 20px;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .5px;
        }
        .badge-lunas    { background: #d1fae5; color: #065f46; }
        .badge-pending  { background: #fee2e2; color: #991b1b; }
        .badge-menunggu { background: #fef3c7; color: #92400e; }
        .badge-cicil    { background: #ede9fe; color: #5b21b6; }

        /* ── Nomor transaksi strip ── */
        .trx-strip {
            background: #1e3a8a;
            color: #93c5fd;
            padding: 8px 32px;
            font-size: .75rem;
            letter-spacing: .5px;
        }
        .trx-strip span { color: #fff; font-weight: 600; }

        /* ── Body ── */
        .receipt-body { padding: 28px 32px; }

        /* ── Info Grid ── */
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px 24px;
            margin-bottom: 24px;
        }
        .info-item label {
            display: block;
            font-size: .7rem;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: .8px;
            margin-bottom: 3px;
        }
        .info-item .value {
            font-size: .9rem;
            font-weight: 600;
            color: #1a202c;
        }

        /* ── Nominal box ── */
        .nominal-box {
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            border: 1.5px solid #93c5fd;
            border-radius: 12px;
            padding: 18px 24px;
            margin-bottom: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nominal-box .label { font-size: .78rem; color: #1e40af; font-weight: 600; }
        .nominal-box .amount { font-size: 1.55rem; font-weight: 800; color: #1e3a8a; }

        /* ── Divider dashed ── */
        .divider-dash {
            border: none;
            border-top: 2px dashed #e5e7eb;
            margin: 20px 0;
        }

        /* ── Cicilan table ── */
        .section-title {
            font-size: .78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #6b7280;
            margin-bottom: 12px;
        }
        table.cicilan-tbl {
            width: 100%;
            border-collapse: collapse;
            font-size: .82rem;
        }
        table.cicilan-tbl thead tr {
            background: #f1f5f9;
        }
        table.cicilan-tbl th {
            padding: 8px 12px;
            text-align: left;
            font-weight: 700;
            color: #374151;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .5px;
        }
        table.cicilan-tbl td {
            padding: 9px 12px;
            border-bottom: 1px solid #f1f5f9;
            color: #374151;
        }
        table.cicilan-tbl tbody tr:hover { background: #fafafa; }
        table.cicilan-tbl .status-lunas   { color: #065f46; font-weight: 600; }
        table.cicilan-tbl .status-pending { color: #92400e; }
        .nominal-cell { font-weight: 700; color: #1e40af; }

        /* ── Progress bar (cicil) ── */
        .progress-wrap { margin-bottom: 20px; }
        .progress-bar-bg {
            background: #e5e7eb;
            border-radius: 99px;
            height: 10px;
            overflow: hidden;
        }
        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #7c3aed, #a78bfa);
            border-radius: 99px;
            transition: width .4s;
        }
        .progress-labels {
            display: flex;
            justify-content: space-between;
            font-size: .72rem;
            color: #6b7280;
            margin-top: 5px;
        }
        .progress-labels .paid { color: #7c3aed; font-weight: 600; }

        /* ── Bukti transfer ── */
        .bukti-wrap {
            text-align: center;
            margin-top: 8px;
        }
        .bukti-wrap img {
            max-width: 100%;
            max-height: 260px;
            border-radius: 10px;
            border: 1.5px solid #e5e7eb;
            box-shadow: 0 2px 8px rgba(0,0,0,.08);
        }

        /* ── Footer ── */
        .receipt-footer {
            background: #f8fafc;
            border-top: 1px solid #e5e7eb;
            padding: 16px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .72rem;
            color: #9ca3af;
        }
        .receipt-footer .qr-placeholder {
            width: 54px;
            height: 54px;
            border: 2px dashed #d1d5db;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .6rem;
            color: #d1d5db;
            text-align: center;
        }

        /* ═══ PRINT STYLES ═══ */
        @media print {
            body {
                background: #fff;
                padding: 0;
            }
            .toolbar { display: none !important; }
            .receipt {
                box-shadow: none;
                border-radius: 0;
                max-width: 100%;
            }
            @page {
                margin: 12mm 10mm;
                size: A4;
            }
        }
    </style>
</head>
<body>

<?php
$bulan_nama = ['','Januari','Februari','Maret','April','Mei','Juni',
               'Juli','Agustus','September','Oktober','November','Desember'];

$nominal        = (float)($iuran->nominal ?? 0);
$total_terbayar = (float)($iuran->total_terbayar ?? 0);
$sisa           = $nominal - $total_terbayar;
$jml_cicilan    = (int)($iuran->jumlah_cicilan ?? 0);
$pct            = $nominal > 0 ? min(100, round($total_terbayar / $nominal * 100)) : 0;

$status = $iuran->status ?? 'pending';
if($status === 'pending' && $total_terbayar > 0 && $sisa > 0) $status = 'cicil';

$badge_map = [
    'lunas'               => ['badge-lunas',    '✓ LUNAS'],
    'cicil'               => ['badge-cicil',    '⏳ DICICIL'],
    'menunggu_verifikasi' => ['badge-menunggu', '🕐 MENUNGGU VERIFIKASI'],
    'pending'             => ['badge-pending',  '⚠ BELUM DIBAYAR'],
];
[$badge_class, $badge_label] = $badge_map[$status] ?? ['badge-pending', ucfirst($status)];

$periode = ($bulan_nama[(int)($iuran->periode_bulan ?? 0)] ?? '-') . ' ' . ($iuran->periode_tahun ?? '-');
$no_dok  = 'IUR/' . date('Y') . '/' . str_pad($iuran->id, 6, '0', STR_PAD_LEFT);
?>

<!-- ── Toolbar ── -->
<div class="toolbar">
    <a href="<?php echo base_url('iuran/detail/'.$iuran->id); ?>" class="btn btn-back">← Kembali</a>
    <button onclick="window.print()" class="btn btn-print">🖨 Cetak / Simpan PDF</button>
</div>

<!-- ── Kertas ── -->
<div class="receipt">

    <!-- Header -->
    <div class="receipt-header">
        <div class="org-name">
            <?php
            // Coba ambil nama RT dari pengaturan jika ada, fallback ke default
            $nama_org = 'Sistem Informasi RT';
            if(isset($pengaturan->nama_rt)) {
                $nama_org = trim(($pengaturan->nama_rt ?? 'RT') . ' ' . ($pengaturan->nama_rw ?? ''));
            }
            echo htmlspecialchars($nama_org);
            ?>
        </div>
        <div class="doc-title">Bukti Pembayaran Iuran</div>
        <span class="badge-status <?php echo $badge_class; ?>"><?php echo $badge_label; ?></span>
    </div>

    <!-- No Transaksi strip -->
    <div class="trx-strip">
        No. Dokumen: <span><?php echo $no_dok; ?></span>
        &nbsp;|&nbsp;
        Dicetak: <span><?php echo date('d F Y, H:i'); ?> WIB</span>
    </div>

    <!-- Body -->
    <div class="receipt-body">

        <!-- Info Grid -->
        <div class="info-grid">
            <div class="info-item">
                <label>Nama Lengkap</label>
                <div class="value"><?php echo htmlspecialchars($iuran->nama_lengkap ?? '-'); ?></div>
            </div>
            <div class="info-item">
                <label>Jenis Iuran</label>
                <div class="value"><?php echo htmlspecialchars($iuran->nama_iuran ?? '-'); ?></div>
            </div>
            <div class="info-item">
                <label>Periode</label>
                <div class="value"><?php echo $periode; ?></div>
            </div>
            <div class="info-item">
                <label>Metode Pembayaran</label>
                <div class="value">
                    <?php echo $iuran->metode_pembayaran ? ucwords(str_replace('_', ' ', $iuran->metode_pembayaran)) : '-'; ?>
                </div>
            </div>
            <?php if($iuran->tanggal_bayar): ?>
            <div class="info-item">
                <label>Tanggal Bayar</label>
                <div class="value"><?php echo date('d F Y', strtotime($iuran->tanggal_bayar)); ?></div>
            </div>
            <?php endif; ?>
            <?php if($iuran->keterangan): ?>
            <div class="info-item">
                <label>Keterangan</label>
                <div class="value" style="font-weight:400;color:#4b5563;"><?php echo htmlspecialchars($iuran->keterangan); ?></div>
            </div>
            <?php endif; ?>
        </div>

        <!-- Nominal Box -->
        <div class="nominal-box">
            <div>
                <div class="label">Total Tagihan</div>
                <?php if($status === 'cicil'): ?>
                <div style="font-size:.75rem;color:#374151;margin-top:3px;">
                    Terbayar: <strong>Rp <?php echo number_format($total_terbayar,0,',','.'); ?></strong>
                    &nbsp;|&nbsp; Sisa: <strong>Rp <?php echo number_format($sisa,0,',','.'); ?></strong>
                </div>
                <?php endif; ?>
            </div>
            <div class="amount">Rp <?php echo number_format($nominal, 0, ',', '.'); ?></div>
        </div>

        <?php if($status === 'cicil'): ?>
        <!-- Progress Bar -->
        <div class="progress-wrap">
            <div class="progress-bar-bg">
                <div class="progress-bar-fill" style="width:<?php echo $pct; ?>%;"></div>
            </div>
            <div class="progress-labels">
                <span class="paid">Terbayar <?php echo $pct; ?>%</span>
                <span><?php echo $jml_cicilan; ?> cicilan tercatat</span>
            </div>
        </div>
        <?php endif; ?>

        <!-- Tabel Cicilan -->
        <?php if(!empty($cicilan)): ?>
        <hr class="divider-dash">
        <div class="section-title">Riwayat Cicilan</div>
        <table class="cicilan-tbl">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Tanggal</th>
                    <th>Nominal</th>
                    <th>Metode</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
            <?php foreach($cicilan as $c): ?>
                <tr>
                    <td>ke-<?php echo $c->ke; ?></td>
                    <td><?php echo $c->tanggal_bayar ? date('d/m/Y', strtotime($c->tanggal_bayar)) : '-'; ?></td>
                    <td class="nominal-cell">Rp <?php echo number_format($c->nominal_cicilan, 0, ',', '.'); ?></td>
                    <td><?php echo $c->metode_pembayaran ? ucwords(str_replace('_', ' ', $c->metode_pembayaran)) : '-'; ?></td>
                    <td>
                        <?php if($c->status === 'lunas'): ?>
                            <span class="status-lunas">✓ Lunas</span>
                        <?php else: ?>
                            <span class="status-pending">⏳ <?php echo ucfirst($c->status); ?></span>
                        <?php endif; ?>
                    </td>
                </tr>
            <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr style="background:#f1f5f9;">
                    <td colspan="2" style="padding:9px 12px;font-weight:700;font-size:.8rem;">Total Terbayar</td>
                    <td class="nominal-cell" style="padding:9px 12px;">Rp <?php echo number_format($total_terbayar, 0, ',', '.'); ?></td>
                    <td colspan="2"></td>
                </tr>
            </tfoot>
        </table>
        <?php endif; ?>

        <!-- Bukti Transfer -->
        <?php
        $bukti = $iuran->bukti_transfer ?? null;
        $ext   = $bukti ? strtolower(pathinfo($bukti, PATHINFO_EXTENSION)) : '';
        if($bukti && in_array($ext, ['jpg','jpeg','png'])):
        ?>
        <hr class="divider-dash">
        <div class="section-title">Bukti Transfer</div>
        <div class="bukti-wrap">
            <img src="<?php echo base_url('uploads/iuran/' . $bukti); ?>" alt="Bukti Transfer">
        </div>
        <?php endif; ?>

        <!-- Tanda Tangan -->
        <hr class="divider-dash">
        <div style="display:flex;justify-content:space-between;margin-top:8px;">
            <div style="text-align:center;min-width:160px;">
                <div style="font-size:.75rem;color:#6b7280;">Penerima</div>
                <div style="height:60px;"></div>
                <div style="font-size:.75rem;border-top:1.5px solid #374151;padding-top:4px;color:#374151;font-weight:600;">
                    Pengurus RT
                </div>
            </div>
            <div style="text-align:center;min-width:160px;">
                <div style="font-size:.75rem;color:#6b7280;">Pembayar</div>
                <div style="height:60px;"></div>
                <div style="font-size:.75rem;border-top:1.5px solid #374151;padding-top:4px;color:#374151;font-weight:600;">
                    <?php echo htmlspecialchars($iuran->nama_lengkap ?? '-'); ?>
                </div>
            </div>
        </div>

    </div><!-- /.receipt-body -->

    <!-- Footer -->
    <div class="receipt-footer">
        <div>
            <div>Dokumen ini dicetak otomatis oleh sistem.</div>
            <div style="margin-top:2px;">Dokumen sah tanpa tanda tangan basah jika terverifikasi sistem.</div>
        </div>
        <div class="qr-placeholder">QR<br>Code</div>
    </div>

</div><!-- /.receipt -->

<script>
    // Auto-print bisa diaktifkan jika diperlukan
    // window.addEventListener('load', () => window.print());
</script>
</body>
</html>