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

<style>
:root {
    --green-main:    #1e7a56;
    --green-dark:    #155c3f;
    --green-light:   #e8f5ef;
    --green-mid:     #27976a;
    --green-sidebar: #186648;
    --danger:        #dc2626;
    --danger-light:  #fef2f2;
    --warning:       #d97706;
    --radius:        16px;
    --radius-sm:     10px;
    --shadow:        0 4px 24px rgba(30,122,86,0.10), 0 1px 4px rgba(0,0,0,0.05);
    --shadow-sm:     0 2px 8px rgba(0,0,0,0.07);
}

/* ===== WRAPPER ===== */
.vd-wrapper {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 12px 48px;
}

/* ===== PAGE HEADER ===== */
.vd-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
}
.vd-page-header h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--green-sidebar);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vd-page-header h4 .hi {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--green-sidebar), var(--green-mid));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
    box-shadow: 0 3px 10px rgba(30,122,86,0.28);
}
.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.83rem;
    font-weight: 600;
    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);
}

/* ===== GRID ===== */
.vd-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 768px) {
    .vd-grid { grid-template-columns: 1fr; }
}

/* ===== CARD ===== */
.vd-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.vd-card-header {
    padding: 18px 22px 16px;
    position: relative;
    overflow: hidden;
}
.vd-card-header.info-header {
    background: linear-gradient(135deg, var(--green-sidebar) 0%, var(--green-main) 60%, var(--green-mid) 100%);
}
.vd-card-header.form-header {
    background: linear-gradient(135deg, #186648 0%, #1e7a56 60%, #27976a 100%);
}
.vd-card-header::after {
    content: '';
    position: absolute;
    right: -20px; top: -20px;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
}
.vd-card-header h5 {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vd-card-body { padding: 22px; }

/* ===== DETAIL TABLE ===== */
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table tr { border-bottom: 1px solid #f3f4f6; }
.detail-table tr:last-child { border-bottom: none; }
.detail-table td { padding: 9px 4px; font-size: 0.85rem; vertical-align: top; }
.detail-table td:first-child {
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    width: 40%;
    padding-top: 11px;
}
.detail-table td:last-child { text-align: right; font-weight: 500; color: #1f2937; }
.detail-table .total-row { background: var(--green-light); border-radius: 8px; }
.detail-table .total-row td {
    padding: 11px 8px;
    font-weight: 800 !important;
    font-size: 1rem !important;
    color: var(--green-main) !important;
    border-radius: 8px;
}

/* ===== BUKTI SECTION ===== */
.bukti-section { margin-top: 18px; }
.bukti-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
    margin-bottom: 10px;
}
.bukti-image-wrap {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1.5px solid #e5e7eb;
    transition: box-shadow .2s;
}
.bukti-image-wrap:hover { box-shadow: var(--shadow-sm); }
.bukti-image-wrap img { width: 100%; display: block; max-height: 320px; object-fit: cover; }
.bukti-pdf-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px;
    border: 2px dashed #fca5a5;
    border-radius: var(--radius-sm);
    background: #fff5f5;
    color: var(--danger);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all .2s;
}
.bukti-pdf-btn:hover { background: #fee2e2; color: #991b1b; border-color: #f87171; }
.bukti-pdf-btn i { font-size: 2.2rem; }
.no-bukti {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    border-radius: var(--radius-sm);
    color: var(--warning);
    font-size: 0.83rem;
    font-weight: 600;
}

/* ===== RADIO CARDS ===== */
.radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.radio-card {
    position: relative;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-sm);
    padding: 14px;
    cursor: pointer;
    transition: all .2s;
    background: #fff;
}
.radio-card input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-card:hover { border-color: #d1d5db; background: #fafafa; }
.radio-card.accept:has(input:checked) {
    border-color: var(--green-main);
    background: var(--green-light);
}
.radio-card.reject:has(input:checked) {
    border-color: var(--danger);
    background: var(--danger-light);
}
.radio-card-icon { font-size: 1.4rem; margin-bottom: 6px; }
.radio-card-title { font-weight: 800; font-size: 0.88rem; margin-bottom: 3px; }
.radio-card-title.green { color: var(--green-main); }
.radio-card-title.red   { color: var(--danger); }
.radio-card-desc { font-size: 0.74rem; color: #9ca3af; line-height: 1.4; }

/* ===== FORM ELEMENTS ===== */
.form-group-custom { margin-bottom: 18px; }
.form-label-custom {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
    margin-bottom: 7px;
}
.form-label-custom .req { color: var(--danger); margin-left: 2px; }

.custom-select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    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;
    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.13);
    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: 90px;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.custom-textarea:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
    outline: none;
}
.hint-text {
    font-size: 0.74rem;
    color: #9ca3af;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== ALERT ===== */
.alert-warn {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fffbeb;
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    margin-bottom: 20px;
}
.alert-warn i { color: var(--warning); flex-shrink: 0; margin-top: 1px; }
.alert-warn p { margin: 0; font-size: 0.82rem; color: #4b5563; line-height: 1.5; }
.alert-warn strong { color: #92400e; }

/* ===== SECTION DIVIDER ===== */
.sec-div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 16px;
}
.sec-div span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #9ca3af;
    white-space: nowrap;
}
.sec-div::before, .sec-div::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }

/* ===== SUBMIT BUTTONS ===== */
.btn-submit {
    width: 100%;
    padding: 13px;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 0.92rem;
    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.35);
}
.btn-submit.green:hover {
    background: linear-gradient(135deg, var(--green-dark), var(--green-sidebar));
    box-shadow: 0 6px 18px rgba(30,122,86,0.42);
    transform: translateY(-1px);
}
.btn-submit.red {
    background: linear-gradient(135deg, #b91c1c, var(--danger));
    color: #fff;
    box-shadow: 0 4px 14px rgba(220,38,38,0.32);
}
.btn-submit.red:hover {
    background: linear-gradient(135deg, #991b1b, #b91c1c);
    box-shadow: 0 6px 18px rgba(220,38,38,0.40);
    transform: translateY(-1px);
}
.btn-cancel {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .2s;
    margin-top: 10px;
}
.btn-cancel:hover { border-color: #9ca3af; color: #374151; background: #f9fafb; }

/* ===== MOBILE STICKY ===== */
@media (max-width: 576px) {
    .vd-card-body { padding: 16px; }
    .radio-group { grid-template-columns: 1fr 1fr; }
    .form-actions { padding-bottom: 90px; }
    .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;
    }
    .desktop-actions { display: none; }
}
@media (min-width: 577px) {
    .mobile-sticky-footer { display: none; }
}
</style>

<div class="vd-wrapper">

    <!-- Page Header -->
    <div class="vd-page-header">
        <h4>
            <span class="hi"><i class="bi bi-shield-check"></i></span>
            Verifikasi Pembayaran
        </h4>
        <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran_list'); ?>" class="btn-back">
            <i class="bi bi-arrow-left"></i> Kembali ke Daftar
        </a>
    </div>

    <div class="vd-grid">

        <!-- ===== KOLOM KIRI: INFO ===== -->
        <div class="vd-card">
            <div class="vd-card-header info-header">
                <h5><i class="bi bi-receipt"></i> Detail Pembayaran</h5>
            </div>
            <div class="vd-card-body">

                <table class="detail-table">
                    <tr>
                        <td>Nama Warga</td>
                        <td><strong><?php echo $pending->nama_lengkap; ?></strong></td>
                    </tr>
                    <tr>
                        <td>No. HP</td>
                        <td><?php echo !empty($pending->no_hp) ? $pending->no_hp : '—'; ?></td>
                    </tr>
                    <tr>
                        <td>Kode Pinjaman</td>
                        <td>
                            <span style="background:var(--green-light);color:var(--green-main);border:1px solid #a7d9c1;border-radius:6px;padding:2px 10px;font-size:.78rem;font-weight:700;">
                                <?php echo $pending->kode_pinjaman; ?>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>Angsuran Ke</td>
                        <td>
                            <span style="background:#f3f4f6;border-radius:6px;padding:2px 10px;font-size:.8rem;font-weight:600;">
                                #<?php echo $pending->angsuran_ke; ?>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>Nominal Angsuran</td>
                        <td>Rp <?php echo number_format($pending->nominal_angsuran, 0, ',', '.'); ?></td>
                    </tr>
                    <tr>
                        <td>Metode</td>
                        <td>
                            <?php
                            $m = strtolower($pending->metode_bayar);
                            echo (str_contains($m,'wallet') ? '📱 ' : '🏦 ');
                            echo ucwords(str_replace('_',' ',$pending->metode_bayar));
                            ?>
                        </td>
                    </tr>
                    <?php if(!empty($pending->catatan_warga)): ?>
                    <tr>
                        <td>Keterangan</td>
                        <td style="font-size:.82rem;color:#6b7280"><?php echo $pending->catatan_warga; ?></td>
                    </tr>
                    <?php endif; ?>
                    <tr>
                        <td>Tanggal Kirim</td>
                        <td style="font-size:.82rem"><?php echo date('d M Y, H:i', strtotime($pending->created_at)); ?> WIB</td>
                    </tr>
                    <tr class="total-row">
                        <td>TOTAL BAYAR</td>
                        <td>Rp <?php echo number_format($pending->nominal_bayar, 0, ',', '.'); ?></td>
                    </tr>
                </table>

                <!-- Bukti Transfer -->
                <div class="bukti-section">
                    <div class="bukti-label"><i class="bi bi-image me-1"></i>Bukti Transfer</div>
                    <?php if(!empty($pending->foto_bukti)): ?>
                        <?php $ext = strtolower(pathinfo($pending->foto_bukti, PATHINFO_EXTENSION)); ?>
                        <?php if($ext === 'pdf'): ?>
                            <a href="<?php echo base_url('uploads/bukti_transfer/'.$pending->foto_bukti); ?>" target="_blank" class="bukti-pdf-btn">
                                <i class="bi bi-file-earmark-pdf"></i>
                                Klik untuk Lihat PDF
                            </a>
                        <?php else: ?>
                            <a href="<?php echo base_url('uploads/bukti_transfer/'.$pending->foto_bukti); ?>" target="_blank" class="bukti-image-wrap" style="display:block">
                                <img src="<?php echo base_url('uploads/bukti_transfer/'.$pending->foto_bukti); ?>" alt="Bukti Transfer">
                                <div style="text-align:center;padding:8px;font-size:.74rem;color:#9ca3af;background:#f9fafb;border-top:1px solid #f3f4f6">
                                    <i class="bi bi-zoom-in me-1"></i>Klik untuk perbesar
                                </div>
                            </a>
                        <?php endif; ?>
                    <?php else: ?>
                        <div class="no-bukti">
                            <i class="bi bi-exclamation-triangle-fill"></i>
                            Tidak ada bukti yang diupload
                        </div>
                    <?php endif; ?>
                </div>

            </div>
        </div>

        <!-- ===== KOLOM KANAN: FORM ===== -->
        <div class="vd-card">
            <div class="vd-card-header form-header">
                <h5><i class="bi bi-check-circle"></i> Form Verifikasi</h5>
            </div>
            <div class="vd-card-body">
                <form action="<?php echo base_url('pinjaman/verifikasi_pembayaran/'.$pending->id); ?>" method="post" id="formVerifikasi">

                    <!-- Status Radio -->
                    <div class="form-group-custom">
                        <div class="form-label-custom">Status Verifikasi <span class="req">*</span></div>
                        <div class="radio-group">
                            <label class="radio-card accept">
                                <input type="radio" name="status" value="verified" checked onchange="toggleVerifikasi(true)">
                                <div class="radio-card-icon">✅</div>
                                <div class="radio-card-title green">TERIMA</div>
                                <div class="radio-card-desc">Pembayaran valid, masukkan ke kas</div>
                            </label>
                            <label class="radio-card reject">
                                <input type="radio" name="status" value="rejected" onchange="toggleVerifikasi(false)">
                                <div class="radio-card-icon">❌</div>
                                <div class="radio-card-title red">TOLAK</div>
                                <div class="radio-card-desc">Pembayaran tidak valid atau tidak sesuai</div>
                            </label>
                        </div>
                    </div>

                    <div class="sec-div"><span>Rincian Keputusan</span></div>

                    <!-- Kas Section -->
                    <div id="kas_section" class="form-group-custom">
                        <div class="form-label-custom">Masuk ke Kas <span class="req">*</span></div>
                        <select class="custom-select" name="master_kas_id" id="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; ?>
                                &nbsp;(Rp <?php echo number_format($kas->saldo_realtime ?? 0, 0, ',', '.'); ?>)
                            </option>
                            <?php endforeach; ?>
                        </select>
                        <div class="hint-text"><i class="bi bi-info-circle"></i> Pemasukan akan dicatat ke kas terpilih</div>
                    </div>

                    <!-- Alasan Penolakan -->
                    <div id="alasan_section" class="form-group-custom" style="display:none">
                        <div class="form-label-custom" style="color:var(--danger)">Alasan Penolakan <span class="req">*</span></div>
                        <textarea class="custom-textarea" name="alasan_reject" id="alasan_reject" placeholder="Contoh: Nominal transfer tidak sesuai, bukti tidak jelas, data tidak cocok, dll"></textarea>
                    </div>

                    <!-- Warning -->
                    <div class="alert-warn">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        <p><strong>Perhatian:</strong> Setelah diverifikasi, data akan masuk ke sistem dan kas. Pastikan bukti transfer valid sebelum menerima!</p>
                    </div>

                    <!-- Desktop Actions -->
                    <div class="form-actions desktop-actions" style="display:flex;flex-direction:column;gap:10px">
                        <button type="submit" class="btn-submit green" id="btn_submit">
                            <i class="bi bi-check-lg"></i> Terima & Verifikasi
                        </button>
                        <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran_list'); ?>" class="btn-cancel">
                            Batal
                        </a>
                    </div>

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

    </div><!-- /grid -->
</div>

<!-- Mobile Sticky Footer -->
<div class="mobile-sticky-footer">
    <button type="submit" form="formVerifikasi" class="btn-submit green" id="btn_submit_mobile">
        <i class="bi bi-check-lg"></i> Terima & Verifikasi
    </button>
    <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran_list'); ?>" class="btn-cancel" style="margin-top:0">Batal</a>
</div>

<script>
function toggleVerifikasi(diterima) {
    var kasSection    = document.getElementById('kas_section');
    var alasanSection = document.getElementById('alasan_section');
    var masterKasId   = document.getElementById('master_kas_id');
    var alasanReject  = document.getElementById('alasan_reject');
    var btnD          = document.getElementById('btn_submit');
    var btnM          = document.getElementById('btn_submit_mobile');

    if (diterima) {
        kasSection.style.display    = 'block';
        alasanSection.style.display = 'none';
        masterKasId.setAttribute('required', 'required');
        alasanReject.removeAttribute('required');

        [btnD, btnM].forEach(function(b) {
            if (!b) return;
            b.className = 'btn-submit green';
            b.innerHTML = '<i class="bi bi-check-lg"></i> Terima & Verifikasi';
        });
    } else {
        kasSection.style.display    = 'none';
        alasanSection.style.display = 'block';
        masterKasId.removeAttribute('required');
        alasanReject.setAttribute('required', 'required');

        [btnD, btnM].forEach(function(b) {
            if (!b) return;
            b.className = 'btn-submit red';
            b.innerHTML = '<i class="bi bi-x-lg"></i> Tolak Pembayaran';
        });
    }
}

/* Sync mobile button submit to form */
document.getElementById('btn_submit_mobile') && 
document.getElementById('btn_submit_mobile').addEventListener('click', function() {
    document.getElementById('btn_submit') && document.getElementById('btn_submit').click();
});
</script>