<style>
/* ===== RESET FOCUS ===== */
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: #20c997; box-shadow: 0 0 0 3px rgba(32,201,151,.12); }

/* ===== STATUS BADGES ===== */
.status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.sb-lunas      { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.sb-verifikasi { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }
.sb-pending    { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* ===== SECTION CARD ===== */
.section-card { border-radius:14px; border:none; box-shadow:0 1px 6px rgba(0,0,0,.07); overflow:hidden; margin-bottom:20px; }
.section-card-header {
    padding:13px 20px; display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid #f1f3f5; background:#fff;
}
.section-card-header .title { font-size:.85rem; font-weight:700; color:#374151; display:flex; align-items:center; gap:6px; }
.section-card-header .title i { color:#20c997; }

/* ===== TABLES ===== */
.iuran-table th {
    font-size:.75rem; text-transform:uppercase; letter-spacing:.04em;
    color:#6b7280; font-weight:700; padding:10px 16px;
    background:#f8fffe; border-bottom:1.5px solid #e5e7eb;
    white-space:nowrap;
}
.iuran-table td { padding:10px 16px; vertical-align:middle; font-size:.85rem; border-bottom:1px solid #f3f4f6; }
.iuran-table tbody tr:last-child td { border-bottom:none; }
.iuran-table tbody tr:hover { background:#f8fffe; }
.iuran-table tfoot th { padding:10px 16px; font-size:.83rem; background:#f8fffe; border-top:1.5px solid #e5e7eb; }

/* ===== ACTION BUTTONS ===== */
.btn-act { font-size:.78rem; padding:5px 10px; border-radius:7px; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }

/* ===== PROGRESS BAR ===== */
.prog-track { background:#e5e7eb; border-radius:999px; height:8px; overflow:hidden; }
.prog-fill  { background:#20c997; height:100%; border-radius:999px; }

/* ===== PAGE HEADER ===== */
.ar-page-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap:14px; margin-bottom:20px;
}
.ar-header-left h4 {
    font-size:1.25rem; font-weight:800; color:#0b5a52;
    margin:0 0 5px; display:flex; align-items:center; gap:11px; letter-spacing:-.3px;
}
.ar-header-left h4 .hi {
    width:40px; height:40px; border-radius:11px;
    background:linear-gradient(135deg,#0d9488,#14b8a6);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.05rem;
    box-shadow:0 4px 12px rgba(13,148,136,0.32); flex-shrink:0;
}
.ar-breadcrumb {
    display:flex; align-items:center; gap:6px;
    font-size:.77rem; color:#94a3b8; padding-left:51px;
}
.ar-breadcrumb a { color:#0d9488; text-decoration:none; font-weight:600; }
.ar-breadcrumb a:hover { text-decoration:underline; }
.ar-breadcrumb .sep { color:#e2e8f0; }
.btn-act-header {
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 20px; border-radius:50px; font-size:.83rem; font-weight:700;
    text-decoration:none; white-space:nowrap; transition:all .2s; cursor:pointer; border:none;
}
.btn-act-header:hover { transform:translateY(-1px); }

/* ===== INFO HEADER CARD ===== */
.info-header-card {
    background:#fff; border-radius:14px; box-shadow:0 1px 6px rgba(0,0,0,.07);
    padding:18px 22px; margin-bottom:16px;
}
.stat-mini { background:#f9fafb; border-radius:10px; border:1px solid #f1f3f5; padding:10px 14px; text-align:center; }
.stat-mini .lbl { font-size:.68rem; color:#6b7280; margin-bottom:3px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.stat-mini .val { font-size:.95rem; font-weight:800; }

/* ===== DESKTOP TABLE / MOBILE LIST ===== */
.desktop-table   { display:block; }
.mobile-hist-list { display:none; }

@media (max-width:767.98px) {
    .desktop-table    { display:none !important; }
    .mobile-hist-list { display:flex !important; flex-direction:column; gap:10px; padding:12px; }
    .ar-page-header   { flex-direction:column; align-items:flex-start; }
    .header-actions   { display:grid !important; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
    .header-actions .btn-act-header { width:100%; justify-content:center; }
    .info-header-card .stat-row { gap:8px !important; }
}
</style>

<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-9">

    <!-- ===== PAGE HEADER ===== -->
    <div class="ar-page-header">
        <div class="ar-header-left">
            <h4>
                <span class="hi"><i class="bi bi-clock-history"></i></span>
                Riwayat Cicilan
            </h4>
            <div class="ar-breadcrumb">
                <a href="<?php echo base_url('iuran'); ?>">Iuran</a>
                <span class="sep">/</span>
                <span>Riwayat Cicilan</span>
            </div>
        </div>
        <div class="header-actions" style="display:flex; gap:8px; flex-wrap:wrap;">
            <a href="<?php echo base_url('iuran'); ?>" class="btn-act-header"
               style="background:#f3f4f6; border:1.5px solid #e5e7eb; color:#374151;">
                <i class="bi bi-arrow-left"></i> Kembali
            </a>
            <?php if($iuran->status !== 'lunas'): ?>
            <a href="<?php echo base_url('iuran/cicil/' . $iuran->id); ?>" class="btn-act-header"
               style="background:#0d9488; color:#fff; box-shadow:0 3px 12px rgba(13,148,136,.28);">
                <i class="bi bi-plus-circle"></i> Tambah Cicilan
            </a>
            <?php endif; ?>
            <?php if(!empty($cicilan)): ?>
            <a href="<?php echo base_url('iuran/print_cicilan/' . $iuran->id); ?>" target="_blank" class="btn-act-header"
               style="background:#eff6ff; border:1.5px solid #bfdbfe; color:#1e40af;">
                <i class="bi bi-printer"></i> Print
            </a>
            <?php endif; ?>
        </div>
    </div>

    <!-- ===== INFO HEADER CARD ===== -->
    <?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="info-header-card">
        <div style="display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:14px; margin-bottom:16px;">
            <div>
                <div style="font-size:1rem; font-weight:800; color:#111827; margin-bottom:3px;">
                    <?php echo $iuran->nama_iuran; ?>
                </div>
                <div style="font-size:.78rem; color:#6b7280;">
                    <?php echo $iuran->nama_lengkap; ?> &bull; NIK: <?php echo $iuran->nik; ?>
                </div>
                <div style="font-size:.78rem; color:#6b7280;">
                    Periode: <?php echo $bulan_nama[(int)$iuran->periode_bulan] . ' ' . $iuran->periode_tahun; ?>
                </div>
            </div>
            <?php
                $status = $iuran->status;
                if($status === 'lunas')
                    echo '<span class="status-badge sb-lunas"><i class="bi bi-check-circle"></i>Lunas</span>';
                elseif($status === 'cicil')
                    echo '<span class="status-badge" style="background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd;"><i class="bi bi-hourglass-split"></i>Cicil</span>';
                elseif($status === 'menunggu_verifikasi')
                    echo '<span class="status-badge sb-verifikasi"><i class="bi bi-clock-history"></i>Menunggu Verifikasi</span>';
                else
                    echo '<span class="status-badge sb-pending"><i class="bi bi-exclamation-triangle"></i>Belum Dibayar</span>';
            ?>
        </div>

        <div class="stat-row" style="display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px;">
            <div class="stat-mini">
                <div class="lbl">Total</div>
                <div class="val" style="color:#374151;">Rp <?php echo number_format($iuran->nominal,0,',','.'); ?></div>
            </div>
            <div class="stat-mini">
                <div class="lbl">Terbayar</div>
                <div class="val" style="color:#16a34a;">Rp <?php echo number_format($total_terbayar,0,',','.'); ?></div>
            </div>
            <div class="stat-mini">
                <div class="lbl">Sisa</div>
                <div class="val" style="color:#dc2626;">Rp <?php echo number_format($sisa,0,',','.'); ?></div>
            </div>
        </div>

        <div class="prog-track">
            <div class="prog-fill" style="width:<?php echo $persen; ?>%"></div>
        </div>
        <div style="text-align:center; font-size:.72rem; color:#6b7280; margin-top:5px;"><?php echo $persen; ?>% terbayar</div>
    </div>

    <!-- ===== TABEL RIWAYAT CICILAN ===== -->
    <div class="section-card">
        <div class="section-card-header">
            <div class="title">
                <i class="bi bi-clock-history"></i>
                Riwayat Cicilan
                <span class="badge rounded-pill ms-1 fw-bold"
                      style="background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; font-size:.72rem;">
                    <?php echo count($cicilan); ?> cicilan
                </span>
            </div>
        </div>

        <?php if(empty($cicilan)): ?>
        <div style="text-align:center; padding:40px 20px; color:#9ca3af;">
            <i class="bi bi-inbox" style="font-size:2rem; display:block; margin-bottom:10px; opacity:.5;"></i>
            <div style="font-size:.85rem;">Belum ada cicilan</div>
        </div>

        <?php else: ?>

        <!-- DESKTOP TABLE -->
        <div class="desktop-table table-responsive">
            <table class="table iuran-table mb-0">
                <thead>
                    <tr>
                        <th style="width:60px;">Ke-</th>
                        <th>Tanggal</th>
                        <th>Metode</th>
                        <th class="text-end">Nominal</th>
                        <th>Status</th>
                        <th>Bukti</th>
                        <?php if(!is_warga()): ?><th>Aksi</th><?php endif; ?>
                    </tr>
                </thead>
                <tbody>
                <?php
                $total_cicilan = 0;
                foreach($cicilan as $c):
                    $total_cicilan += ($c->status === 'lunas') ? $c->nominal_cicilan : 0;
                ?>
                <tr <?php echo ($c->status === 'menunggu_verifikasi') ? 'style="background:#fffbeb !important;"' : ''; ?>>
                    <td>
                        <span class="badge rounded-pill fw-bold"
                              style="background:#f3f4f6; color:#374151; border:1px solid #e5e7eb; font-size:.75rem; padding:4px 10px;">
                            Ke-<?php echo $c->ke; ?>
                        </span>
                    </td>
                    <td style="font-size:.85rem;"><?php echo date('d M Y', strtotime($c->tanggal_bayar)); ?></td>
                    <td style="font-size:.83rem; color:#374151;"><?php echo ucfirst($c->metode_pembayaran); ?></td>
                    <td class="text-end">
                        <span style="font-weight:800; color:#20c997; font-size:.88rem;">
                            Rp <?php echo number_format($c->nominal_cicilan,0,',','.'); ?>
                        </span>
                    </td>
                    <td>
    <?php if($c->status === 'menunggu_verifikasi'): ?>
        <span class="status-badge sb-verifikasi"><i class="bi bi-clock-history"></i>Menunggu Verifikasi</span>
    <?php elseif($iuran->status === 'lunas'): ?>
        <span class="status-badge sb-lunas"><i class="bi bi-check-circle"></i>Lunas</span>
    <?php else: ?>
        <span class="status-badge" style="background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd;">
            <i class="bi bi-hourglass-split"></i>Belum Lunas
        </span>
    <?php endif; ?>
</td>
                    <td>
                        <?php if($c->bukti_transfer): ?>
                            <a href="<?php echo base_url('uploads/iuran/' . $c->bukti_transfer); ?>" target="_blank"
                               class="btn-act btn" style="background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af;">
                                <i class="bi bi-file-image"></i> Lihat
                            </a>
                        <?php else: ?>
                            <span style="font-size:.78rem; color:#9ca3af;">-</span>
                        <?php endif; ?>
                    </td>
                    <?php if(!is_warga()): ?>
                    <td>
                        <?php if($c->status === 'menunggu_verifikasi'): ?>
                            <a href="<?php echo base_url('iuran/verifikasi_cicilan/' . $c->id); ?>"
                               class="btn-act btn" style="background:#fef3c7; border:1px solid #fde68a; color:#92400e;">
                                <i class="bi bi-check2"></i> Verifikasi
                            </a>
                        <?php else: ?>
                            <a href="<?php echo base_url('iuran/hapus_cicilan/' . $c->id); ?>" 
                               class="btn-act btn" style="background:#fee2e2; border:1px solid #fecaca; color:#991b1b;"
                               data-confirm="Hapus cicilan ini? Sisa tagihan akan diperbarui."
                               data-title="Hapus Cicilan" data-type="danger">
                                <i class="bi bi-trash"></i>
                            </a>
                        <?php endif; ?>
                    </td>
                    <?php endif; ?>
                </tr>
                <?php endforeach; ?>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="3" class="text-end" style="color:#6b7280; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;">
                            Total Terbayar (Lunas)
                        </th>
                        <th class="text-end" style="color:#16a34a; font-size:.9rem;">
                            Rp <?php echo number_format($total_terbayar,0,',','.'); ?>
                        </th>
                        <th colspan="<?php echo is_warga() ? 2 : 3; ?>"></th>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- MOBILE CARD LIST -->
        <div class="mobile-hist-list">
            <?php foreach($cicilan as $c): ?>
            <div style="border-radius:12px; border:1.5px solid <?php echo $c->status==='menunggu_verifikasi' ? '#fde68a' : '#f1f3f5'; ?>; background:<?php echo $c->status==='menunggu_verifikasi' ? '#fffbeb' : '#fff'; ?>; padding:13px 14px;">
                <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px;">
                    <div style="display:flex; align-items:center; gap:7px;">
                        <span class="badge rounded-pill fw-bold"
                              style="background:#f3f4f6; color:#374151; border:1px solid #e5e7eb; font-size:.72rem; padding:3px 9px;">
                            Ke-<?php echo $c->ke; ?>
                        </span>
                      <?php if($c->status === 'menunggu_verifikasi'): ?>
    <span class="status-badge sb-verifikasi"><i class="bi bi-clock-history"></i>Menunggu</span>
<?php elseif($iuran->status === 'lunas'): ?>
    <span class="status-badge sb-lunas"><i class="bi bi-check-circle"></i>Lunas</span>
<?php else: ?>
    <span class="status-badge" style="background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd;">
        <i class="bi bi-hourglass-split"></i>Belum Lunas
    </span>
<?php endif; ?>
                    </div>
                    <span style="font-weight:800; color:#20c997; font-size:.9rem;">
                        Rp <?php echo number_format($c->nominal_cicilan,0,',','.'); ?>
                    </span>
                </div>

                <div style="font-size:.77rem; color:#6b7280; margin-bottom:10px;">
                    <i class="bi bi-calendar3 me-1"></i><?php echo date('d M Y', strtotime($c->tanggal_bayar)); ?>
                    &nbsp;&bull;&nbsp;
                    <i class="bi bi-credit-card me-1"></i><?php echo ucfirst($c->metode_pembayaran); ?>
                </div>

                <div style="display:flex; gap:8px; border-top:1px solid #f3f4f6; padding-top:10px;">
                    <?php if($c->bukti_transfer): ?>
                    <a href="<?php echo base_url('uploads/iuran/' . $c->bukti_transfer); ?>" target="_blank"
                       class="btn fw-semibold" style="flex:1; background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; border-radius:8px; font-size:.8rem; padding:8px; text-align:center;">
                        <i class="bi bi-file-image me-1"></i>Lihat Bukti
                    </a>
                    <?php endif; ?>
                    <?php if(!is_warga()): ?>
                        <?php if($c->status === 'menunggu_verifikasi'): ?>
                        <a href="<?php echo base_url('iuran/verifikasi_cicilan/' . $c->id); ?>"
                           class="btn fw-semibold" style="flex:1; background:#fef3c7; border:1px solid #fde68a; color:#92400e; border-radius:8px; font-size:.8rem; padding:8px; text-align:center;">
                            <i class="bi bi-check2 me-1"></i>Verifikasi
                        </a>
                        <?php else: ?>
                        <a href="<?php echo base_url('iuran/hapus_cicilan/' . $c->id); ?>" 
                           class="btn fw-semibold" style="background:#fee2e2; border:1px solid #fecaca; color:#991b1b; border-radius:8px; font-size:.8rem; padding:8px 14px;"
                           data-confirm="Hapus cicilan ini?" data-title="Hapus Cicilan" data-type="danger">
                            <i class="bi bi-trash"></i>
                        </a>
                        <?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>

            <!-- Total footer mobile -->
            <div style="background:#f8fffe; border:1.5px solid #a7f3d0; border-radius:12px; padding:12px 16px; display:flex; justify-content:space-between; align-items:center;">
                <span style="font-size:.78rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em;">Total Terbayar</span>
                <span style="font-size:.95rem; font-weight:800; color:#16a34a;">Rp <?php echo number_format($total_terbayar,0,',','.'); ?></span>
            </div>
        </div>

        <?php endif; ?>
    </div>

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