<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<style>
/* ===== CUSTOM VARS ===== */
:root {
    --green-main: #1e7a56;
    --green-dark: #155c3f;
    --green-light: #e8f5ef;
    --green-mid: #27976a;
    --green-accent: #2db87e;
    --green-sidebar: #186648;
    --danger: #e53e3e;
    --warning: #d97706;
    --info: #0891b2;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 4px 24px rgba(30,122,86,0.12), 0 1px 4px rgba(0,0,0,0.06);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
}

/* ===== WRAPPER ===== */
.bayar-wrapper {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 12px 40px;
}

/* ===== PAGE HEADER ===== */
.bayar-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
}
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 50px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.btn-back:hover {
    border-color: var(--green-main);
    color: var(--green-main);
    background: var(--green-light);
}
.bayar-page-header h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--green-sidebar);
    margin: 0;
}

/* ===== CARD ===== */
.bayar-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* ===== CARD HEADER ===== */
.bayar-card-header {
    background: linear-gradient(135deg, var(--green-sidebar) 0%, var(--green-main) 55%, var(--green-mid) 100%);
    padding: 24px 28px 22px;
    position: relative;
    overflow: hidden;
}
.bayar-card-header.admin-header {
    background: linear-gradient(135deg, #155c3f 0%, var(--green-main) 55%, var(--green-mid) 100%);
}
.bayar-card-header::before {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}
.bayar-card-header::after {
    content: '';
    position: absolute;
    right: 40px;
    bottom: -50px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}
.bayar-card-header h5 {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0;
    position: relative;
    z-index: 1;
}
.bayar-card-header .subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 0.82rem;
    margin-top: 4px;
    display: block;
    position: relative;
    z-index: 1;
}
.header-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 50px;
    padding: 2px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 6px;
    position: relative;
    z-index: 1;
}

/* ===== CARD BODY ===== */
.bayar-card-body {
    padding: 28px 28px 24px;
}

/* ===== INFO BOXES ===== */
.info-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
.info-box {
    border-radius: var(--radius-sm);
    padding: 14px 12px;
    text-align: center;
    background: #f8fafb;
    border: 1.5px solid #e5e7eb;
    transition: box-shadow .2s;
}
.info-box:hover { box-shadow: var(--shadow-sm); }
.info-box.danger-box { border-color: #fca5a5; background: #fff5f5; }
.info-box.info-box-accent { border-color: #a5f3fc; background: #f0fdff; }
.info-box .label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
    margin-bottom: 5px;
}
.info-box .value {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}
.info-box .value.danger { color: var(--danger); }
.info-box .value.info { color: var(--info); }
.info-box .late-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    color: var(--danger);
    font-weight: 600;
    margin-top: 3px;
}

/* ===== DIVIDER ===== */
.section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 18px;
}
.section-divider span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
    white-space: nowrap;
}
.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* ===== FORM ELEMENTS ===== */
.form-group { margin-bottom: 18px; }
.form-label-custom {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 7px;
}
.form-label-custom .req { color: var(--danger); margin-left: 2px; }
.form-label-custom .opt {
    font-size: 0.72rem;
    font-weight: 400;
    color: #9ca3af;
    margin-left: 4px;
}

.input-wrap {
    display: flex;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
}
.input-wrap:focus-within {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px rgba(30,122,86,0.14);
}
.input-wrap.readonly-wrap { background: #f3f4f6; }
.input-prefix {
    padding: 0 14px;
    background: #f9fafb;
    border-right: 1.5px solid #e5e7eb;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}
.input-wrap input,
.input-wrap textarea {
    flex: 1;
    border: none;
    outline: none;
    padding: 11px 14px;
    font-size: 0.92rem;
    color: #1f2937;
    background: transparent;
    min-width: 0;
}
.input-wrap input:read-only { color: #6b7280; }
.input-amount { font-weight: 700; font-size: 1.05rem !important; }

.custom-select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    color: #1f2937;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.custom-select:focus {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px rgba(30,122,86,0.14);
    outline: none;
}
.custom-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: #1f2937;
    resize: vertical;
    min-height: 80px;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.custom-textarea:focus {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px rgba(30,122,86,0.14);
    outline: none;
}

.hint-text {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.hint-text.danger { color: var(--danger); }

/* ===== TWO COL GRID ===== */
.form-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ===== WARGA INFO CARD ===== */
.warga-info-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 22px;
}
.warga-info-item {
    padding: 12px 16px;
    background: #f9fafb;
}
.warga-info-item:first-child {
    border-right: 1.5px solid #e5e7eb;
}
.warga-info-item .wlabel {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
    font-weight: 600;
    margin-bottom: 4px;
}
.warga-info-item .wvalue {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1f2937;
}

/* ===== FILE UPLOAD ===== */
.file-drop {
    border: 2px dashed #d1d5db;
    border-radius: var(--radius-sm);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    background: #fafafa;
    position: relative;
}
.file-drop:hover, .file-drop.active {
    border-color: var(--green-main);
    background: var(--green-light);
}
.file-drop input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.file-drop-icon {
    font-size: 2rem;
    color: #9ca3af;
    margin-bottom: 8px;
}
.file-drop p {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}
.file-drop strong { color: var(--green-main); }

.preview-box {
    margin-top: 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-sm);
    padding: 10px;
    text-align: center;
    display: none;
}
.preview-box img {
    max-height: 260px;
    border-radius: 8px;
    object-fit: contain;
}

/* ===== ALERT ===== */
.alert-custom {
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.alert-custom.info-alert { background: #eff6ff; border-left: 4px solid #3b82f6; }
.alert-custom.warning-alert { background: #fffbeb; border-left: 4px solid var(--warning); }
.alert-custom .alert-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.alert-custom .alert-body { flex: 1; }
.alert-custom .alert-body h6 {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #1f2937;
}
.alert-custom .alert-body ul {
    margin: 0;
    padding-left: 16px;
}
.alert-custom .alert-body ul li {
    font-size: 0.82rem;
    color: #4b5563;
    margin-bottom: 3px;
    line-height: 1.5;
}
.alert-custom .alert-body p {
    font-size: 0.83rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

/* ===== PENDING STATE ===== */
.pending-state {
    text-align: center;
    padding: 20px 10px 10px;
}
.pending-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fffbeb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 1.8rem;
}
.pending-state h5 { font-weight: 700; color: #1f2937; font-size: 1rem; }
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 50px;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 8px 0;
}

/* ===== FORM FOOTER ===== */
.form-footer {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.btn-submit {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .2s;
    letter-spacing: .2px;
}
.btn-submit.green {
    background: linear-gradient(135deg, var(--green-sidebar), var(--green-main));
    color: #fff;
    box-shadow: 0 4px 14px rgba(30,122,86,0.40);
}
.btn-submit.green:hover {
    background: linear-gradient(135deg, var(--green-dark), var(--green-sidebar));
    box-shadow: 0 6px 18px rgba(30,122,86,0.45);
    transform: translateY(-1px);
}
.btn-submit.blue {
    background: linear-gradient(135deg, var(--green-sidebar), var(--green-main));
    color: #fff;
    box-shadow: 0 4px 14px rgba(30,122,86,0.40);
}
.btn-submit.blue:hover {
    background: linear-gradient(135deg, var(--green-dark), var(--green-sidebar));
    box-shadow: 0 6px 18px rgba(30,122,86,0.45);
    transform: translateY(-1px);
}
.btn-cancel {
    width: 100%;
    padding: 13px;
    border-radius: var(--radius-sm);
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .2s;
}
.btn-cancel:hover {
    border-color: #9ca3af;
    color: #374151;
    background: #f9fafb;
}

/* ===== MOBILE STICKY FOOTER ===== */
@media (max-width: 576px) {
    .bayar-card-body { padding: 20px 16px 100px; }
    .info-boxes { grid-template-columns: 1fr 1fr; }
    .info-boxes .info-box:last-child { grid-column: 1 / -1; }
    .form-two-col { grid-template-columns: 1fr; gap: 0; }
    .warga-info-card { grid-template-columns: 1fr; }
    .warga-info-item:first-child { border-right: none; border-bottom: 1.5px solid #e5e7eb; }
    
    /* Sticky action bar on mobile */
    .mobile-sticky-footer {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 12px 16px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
        z-index: 100;
    }
    .form-footer { display: none; } /* Hide inline footer on mobile */
    
    .bayar-page-header { flex-direction: column; align-items: flex-start; }
    .bayar-card-header { padding: 18px 18px 16px; }
    .info-box .value { font-size: 0.88rem; }
}
@media (min-width: 577px) {
    .mobile-sticky-footer { display: none; }
}
</style>

<div class="bayar-wrapper">
    <!-- Page Header -->
    <div class="bayar-page-header">
        <h4>
            <i class="bi bi-credit-card me-2" style="color:var(--green-main)"></i>
            <?php echo is_warga() ? 'Pembayaran Angsuran Online' : 'Input Pembayaran Angsuran'; ?>
        </h4>
        <a href="<?php echo base_url('pinjaman/detail/'.$pinjaman->id); ?>" class="btn-back">
            <i class="bi bi-arrow-left"></i> Kembali ke Detail
        </a>
    </div>

    <div class="bayar-card">
        <!-- Card Header -->
        <div class="bayar-card-header <?php echo is_warga() ? '' : 'admin-header'; ?>">
            <h5><i class="bi bi-wallet2 me-2"></i>Angsuran Ke-<?php echo $angsuran->angsuran_ke; ?></h5>
            <span class="subtitle">Kode Pinjaman: <?php echo $pinjaman->kode_pinjaman; ?></span>
            <span class="header-badge"><i class="bi bi-person-circle me-1"></i><?php echo $warga->nama_lengkap; ?></span>
        </div>

        <!-- Card Body -->
        <div class="bayar-card-body">

            <!-- Info Boxes -->
            <div class="info-boxes">
                <div class="info-box <?php echo (strtotime($angsuran->tanggal_jatuh_tempo) < strtotime(date('Y-m-d'))) ? 'danger-box' : ''; ?>">
                    <div class="label">Jatuh Tempo</div>
                    <div class="value <?php echo (strtotime($angsuran->tanggal_jatuh_tempo) < strtotime(date('Y-m-d'))) ? 'danger' : ''; ?>">
                        <?php echo date('d M Y', strtotime($angsuran->tanggal_jatuh_tempo)); ?>
                    </div>
                    <?php if(strtotime($angsuran->tanggal_jatuh_tempo) < strtotime(date('Y-m-d'))): ?>
                        <div class="late-tag"><i class="bi bi-exclamation-triangle-fill"></i> Terlambat</div>
                    <?php endif; ?>
                </div>
                <div class="info-box">
                    <div class="label">Nominal Angsuran</div>
                    <div class="value">Rp <?php echo number_format($angsuran->nominal_angsuran, 0, ',', '.'); ?></div>
                </div>
                <div class="info-box info-box-accent">
                    <div class="label">Total Bayar</div>
                    <div class="value info">Rp <?php echo number_format($total_bayar, 0, ',', '.'); ?></div>
                </div>
            </div>

            <?php if(is_warga()): ?>
                <!-- ===== WARGA FORM ===== -->

                <?php if(isset($pending_exists) && $pending_exists): ?>
                    <!-- Pending State -->
                    <div class="pending-state">
                        <div class="pending-icon">⏳</div>
                        <h5>Pembayaran Sedang Diproses</h5>
                        <p style="font-size:.84rem;color:#6b7280;margin:0 0 8px">
                            Dikirim pada <strong><?php echo date('d M Y H:i', strtotime($pending_exists->created_at)); ?></strong>
                        </p>
                        <div class="status-badge"><i class="bi bi-clock"></i> Menunggu Verifikasi Admin</div>
                        <p style="font-size:.8rem;color:#9ca3af;margin:12px 0 0">Jika lebih dari 24 jam belum diverifikasi, silakan hubungi admin.</p>
                    </div>
                    <div class="form-footer" style="display:flex">
                        <a href="<?php echo base_url('pinjaman/detail/'.$pinjaman->id); ?>" class="btn-submit green">
                            <i class="bi bi-arrow-left"></i> Kembali ke Detail Pinjaman
                        </a>
                    </div>
                    <!-- Mobile sticky -->
                    <div class="mobile-sticky-footer">
                        <a href="<?php echo base_url('pinjaman/detail/'.$pinjaman->id); ?>" class="btn-submit green">
                            <i class="bi bi-arrow-left"></i> Kembali
                        </a>
                    </div>

                <?php else: ?>
                    <!-- Upload Form -->
                    <form action="<?php echo base_url('pinjaman/submit_pembayaran_warga'); ?>" method="post" enctype="multipart/form-data" id="formPembayaranWarga">
                        <input type="hidden" name="angsuran_id" value="<?php echo $angsuran->id; ?>">
                        <input type="hidden" name="nominal_bayar" value="<?php echo $angsuran->nominal_angsuran; ?>">
                        <input type="hidden" name="total_bayar" value="<?php echo $total_bayar; ?>">
                        <?php echo ($denda > 0) ? '' : '<input type="hidden" name="denda" value="0">'; ?>

                        <div class="section-divider"><span>Detail Pembayaran</span></div>

                        <div class="form-two-col">
                            <!-- Nominal -->
                            <div class="form-group">
                                <label class="form-label-custom">Nominal Angsuran</label>
                                <div class="input-wrap readonly-wrap">
                                    <span class="input-prefix">Rp</span>
                                    <input type="text" class="input-amount" value="<?php echo number_format($angsuran->nominal_angsuran, 0, ',', '.'); ?>" readonly>
                                </div>
                            </div>

                            <!-- Denda -->
                            <div class="form-group">
                                <label class="form-label-custom" style="color:<?php echo $denda > 0 ? 'var(--danger)' : ''; ?>">
                                    Denda <?php echo ($denda > 0) ? '(' . ceil((strtotime(date('Y-m-d')) - strtotime($angsuran->tanggal_jatuh_tempo)) / 86400) . ' hari)' : ''; ?>
                                </label>
                                <div class="input-wrap readonly-wrap">
                                    <span class="input-prefix" style="color:<?php echo $denda > 0 ? 'var(--danger)' : ''; ?>">Rp</span>
                                    <input type="text" value="<?php echo number_format($denda, 0, ',', '.'); ?>" readonly style="color:<?php echo $denda > 0 ? 'var(--danger)' : ''; ?>">
                                </div>
                                <?php if($denda > 0): ?>
                                    <input type="hidden" name="denda" value="<?php echo $denda; ?>">
                                <?php endif; ?>
                            </div>
                        </div>

                        <!-- Total Transfer -->
                        <div class="form-group">
                            <label class="form-label-custom">Total Transfer</label>
                            <div class="input-wrap readonly-wrap">
                                <span class="input-prefix" style="color:var(--info)">Rp</span>
                                <input type="text" class="input-amount" value="<?php echo number_format($total_bayar, 0, ',', '.'); ?>" readonly style="color:var(--info);background:#f0fdff">
                            </div>
                            <span class="hint-text"><i class="bi bi-info-circle"></i> Transfer sesuai nominal ini termasuk kode unik jika ada</span>
                        </div>

                        <div class="section-divider"><span>Metode & Bukti</span></div>

                        <!-- Metode -->
                        <div class="form-group">
                            <label class="form-label-custom">Metode Pembayaran <span class="req">*</span></label>
                            <select class="custom-select" name="metode" required>
                                <option value="">-- Pilih Metode --</option>
                                <option value="transfer_bank">🏦 Transfer Bank (BCA, BNI, BRI, Mandiri)</option>
                                <option value="transfer_e_wallet">📱 E-Wallet (Dana, OVO, Gopay, LinkAja)</option>
                            </select>
                        </div>

                        <!-- File Upload -->
                        <div class="form-group">
                            <label class="form-label-custom">Upload Bukti Transfer <span class="req">*</span></label>
                            <div class="file-drop" id="fileDrop" onclick="document.getElementById('bukti_transfer').click()">
                                <input type="file" name="bukti_transfer" id="bukti_transfer" accept="image/jpeg,image/png,image/jpg,application/pdf" required onchange="previewFile()">
                                <div class="file-drop-icon" id="dropIcon">📎</div>
                                <p><strong>Klik untuk upload</strong> atau drag & drop</p>
                                <p style="font-size:.75rem;margin-top:4px">JPG, PNG, PDF — Maks. 2MB</p>
                            </div>
                            <div class="preview-box" id="previewBox">
                                <img id="preview-image" src="" alt="Preview">
                                <div id="preview-pdf" style="display:none;padding:20px 0">
                                    <i class="bi bi-file-earmark-pdf" style="font-size:2.5rem;color:#ef4444"></i>
                                    <p style="margin:6px 0 0;font-size:.85rem;color:#6b7280">File PDF terpilih</p>
                                </div>
                            </div>
                        </div>

                        <!-- Keterangan -->
                        <div class="form-group">
                            <label class="form-label-custom">Keterangan <span class="opt">(opsional)</span></label>
                            <textarea class="custom-textarea" name="keterangan" placeholder="Contoh: Transfer dari Bank BCA, a/n <?php echo $warga->nama_lengkap; ?>"></textarea>
                        </div>

                        <!-- Info Alert -->
                        <div class="alert-custom info-alert">
                            <div class="alert-icon">ℹ️</div>
                            <div class="alert-body">
                                <h6>Informasi Penting</h6>
                                <ul>
                                    <li>Pastikan nominal transfer sesuai dengan total bayar</li>
                                    <li>Simpan bukti transfer sampai admin memverifikasi</li>
                                    <li>Verifikasi biasanya memakan waktu 1×24 jam</li>
                                </ul>
                            </div>
                        </div>

                        <!-- Desktop Submit -->
                        <div class="form-footer">
                            <button type="submit" class="btn-submit green" onclick="return confirm('Yakin sudah transfer dan bukti sudah benar?')">
                                <i class="bi bi-send"></i> Kirim Pembayaran
                            </button>
                            <a href="<?php echo base_url('pinjaman/detail/'.$pinjaman->id); ?>" class="btn-cancel">
                                Batal
                            </a>
                        </div>
                    </form>

                    <!-- Mobile Sticky Footer -->
                    <div class="mobile-sticky-footer">
                        <button type="submit" form="formPembayaranWarga" class="btn-submit green" onclick="return confirm('Yakin sudah transfer dan bukti sudah benar?')">
                            <i class="bi bi-send"></i> Kirim Pembayaran
                        </button>
                        <a href="<?php echo base_url('pinjaman/detail/'.$pinjaman->id); ?>" class="btn-cancel">Batal</a>
                    </div>
                <?php endif; ?>

            <?php else: ?>
                <!-- ===== ADMIN FORM ===== -->
                <form action="<?php echo base_url('pinjaman/proses_bayar_admin'); ?>" method="post" id="formPembayaranAdmin">
                    <input type="hidden" name="angsuran_id" value="<?php echo $angsuran->id; ?>">

                    <!-- Warga Info -->
                    <div class="warga-info-card">
                        <div class="warga-info-item">
                            <div class="wlabel">Nama Anggota</div>
                            <div class="wvalue"><?php echo $warga->nama_lengkap; ?></div>
                        </div>
                        <div class="warga-info-item">
                            <div class="wlabel">No. HP</div>
                            <div class="wvalue"><?php echo !empty($warga->no_hp) ? $warga->no_hp : '—'; ?></div>
                        </div>
                    </div>

                    <div class="section-divider"><span>Detail Pembayaran</span></div>

                    <div class="form-two-col">
                        <!-- Nominal -->
                        <div class="form-group">
                            <label class="form-label-custom">Nominal Bayar <span class="req">*</span></label>
                            <div class="input-wrap">
                                <span class="input-prefix">Rp</span>
                                <input type="number" name="nominal_bayar" id="nominal_bayar" value="<?php echo $angsuran->nominal_angsuran; ?>" required onchange="hitungTotal()" onkeyup="hitungTotal()">
                            </div>
                        </div>

                        <!-- Denda -->
                        <div class="form-group">
                            <label class="form-label-custom" style="color:var(--danger)">Denda</label>
                            <div class="input-wrap">
                                <span class="input-prefix" style="color:var(--danger)">Rp</span>
                                <input type="number" name="denda" id="denda" value="<?php echo $denda; ?>" onchange="hitungTotal()" onkeyup="hitungTotal()">
                            </div>
                            <?php if($denda > 0): ?>
                                <span class="hint-text danger">
                                    <i class="bi bi-clock"></i>
                                    Auto: Rp <?php echo number_format($denda, 0, ',', '.'); ?>
                                    (<?php echo ceil((strtotime(date('Y-m-d')) - strtotime($angsuran->tanggal_jatuh_tempo)) / 86400); ?> hari)
                                </span>
                            <?php endif; ?>
                        </div>
                    </div>

                    <!-- Total -->
                    <div class="form-group">
                        <label class="form-label-custom" style="color:var(--info)">Total Bayar</label>
                        <div class="input-wrap readonly-wrap">
                            <span class="input-prefix" style="color:var(--info)">Rp</span>
                            <input type="number" name="total_bayar" id="total_bayar" value="<?php echo $total_bayar; ?>" readonly class="input-amount" style="color:var(--info)">
                        </div>
                    </div>

                    <div class="section-divider"><span>Metode & Kas Tujuan</span></div>

                    <div class="form-two-col">
                        <!-- Metode -->
                        <div class="form-group">
                            <label class="form-label-custom">Metode Pembayaran <span class="req">*</span></label>
                            <select class="custom-select" name="metode_pembayaran" required>
                                <option value="tunai">💵 Tunai</option>
                                <option value="transfer">🏦 Transfer Bank</option>
                                <option value="debit">💳 Kartu Debit</option>
                                <option value="qris">📱 QRIS</option>
                            </select>
                        </div>

                        <!-- Kas -->
                        <div class="form-group">
                            <label class="form-label-custom">Masuk ke Kas <span class="req">*</span></label>
                            <select class="custom-select" name="master_kas_id" required>
                                <option value="">-- Pilih Kas Tujuan --</option>
                                <?php foreach($kas_list as $kas): ?>
                                <option value="<?php echo $kas->id; ?>">
                                    <?php echo $kas->kode; ?> — <?php echo $kas->nama; ?>
                                    (Rp <?php echo number_format($kas->saldo_realtime ?? 0, 0, ',', '.'); ?>)
                                </option>
                                <?php endforeach; ?>
                            </select>
                            <span class="hint-text"><i class="bi bi-info-circle"></i> Pemasukan dicatat ke kas terpilih</span>
                        </div>
                    </div>

                    <!-- Keterangan -->
                    <div class="form-group">
                        <label class="form-label-custom">Keterangan <span class="opt">(opsional)</span></label>
                        <textarea class="custom-textarea" name="keterangan" placeholder="Keterangan tambahan jika ada"></textarea>
                    </div>

                    <!-- Desktop Submit -->
                    <div class="form-footer">
                        <button type="submit" class="btn-submit blue" onclick="return confirm('Yakin proses pembayaran ini?')">
                            <i class="bi bi-check-circle"></i> Proses Pembayaran & Masukkan ke Kas
                        </button>
                        <a href="<?php echo base_url('pinjaman/detail/'.$pinjaman->id); ?>" class="btn-cancel">
                            Batal
                        </a>
                    </div>
                </form>

                <!-- Mobile Sticky Footer (Admin) -->
                <div class="mobile-sticky-footer">
                    <button type="submit" form="formPembayaranAdmin" class="btn-submit blue" onclick="return confirm('Yakin proses pembayaran ini?')">
                        <i class="bi bi-check-circle"></i> Proses Pembayaran
                    </button>
                    <a href="<?php echo base_url('pinjaman/detail/'.$pinjaman->id); ?>" class="btn-cancel">Batal</a>
                </div>

                <script>
                function hitungTotal() {
                    var nominal = parseFloat(document.getElementById('nominal_bayar').value) || 0;
                    var denda   = parseFloat(document.getElementById('denda').value) || 0;
                    document.getElementById('total_bayar').value = nominal + denda;
                }
                </script>
            <?php endif; ?>

        </div><!-- /card-body -->
    </div><!-- /card -->
</div>

<script>
function previewFile() {
    var file = document.getElementById('bukti_transfer').files[0];
    if (!file) return;

    var previewBox   = document.getElementById('previewBox');
    var previewImg   = document.getElementById('preview-image');
    var previewPdf   = document.getElementById('preview-pdf');
    var dropIcon     = document.getElementById('dropIcon');
    var fileDrop     = document.getElementById('fileDrop');

    previewBox.style.display = 'block';
    dropIcon.textContent = '✅';
    fileDrop.style.borderColor = 'var(--green-main)';
    fileDrop.style.background  = 'var(--green-light)';

    if (file.type === 'application/pdf') {
        previewImg.style.display = 'none';
        previewPdf.style.display = 'block';
    } else {
        previewPdf.style.display = 'none';
        previewImg.style.display = 'block';
        var reader = new FileReader();
        reader.onload = function(e) { previewImg.src = e.target.result; };
        reader.readAsDataURL(file);
    }
}

/* Drag & Drop */
(function() {
    var drop = document.getElementById('fileDrop');
    if (!drop) return;
    drop.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('active');
    });
    drop.addEventListener('dragleave', function() {
        this.classList.remove('active');
    });
    drop.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('active');
        var input = document.getElementById('bukti_transfer');
        if (e.dataTransfer.files.length) {
            input.files = e.dataTransfer.files;
            previewFile();
        }
    });
})();
</script>