<?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;
    --warning:       #d97706;
    --info:          #0891b2;
    --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 ===== */
.verif-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 12px 40px;
}

/* ===== PAGE HEADER ===== */
.verif-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.verif-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--green-sidebar), var(--green-mid));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(30,122,86,0.30);
}
.verif-header-text h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--green-sidebar);
    margin: 0 0 2px;
}
.verif-header-text p {
    font-size: 0.78rem;
    color: #9ca3af;
    margin: 0;
}
.verif-count-badge {
    margin-left: auto;
    background: var(--green-light);
    border: 1.5px solid #a7d9c1;
    color: var(--green-main);
    border-radius: 50px;
    padding: 5px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

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

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 64px 24px;
}
.empty-state-icon {
    width: 80px;
    height: 80px;
    background: var(--green-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2.2rem;
}
.empty-state h5 { font-weight: 700; color: #374151; margin-bottom: 6px; }
.empty-state p  { color: #9ca3af; font-size: 0.88rem; margin: 0; }

/* ===== TABLE WRAPPER ===== */
.verif-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.verif-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}
.verif-table thead tr {
    background: #f8fafb;
    border-bottom: 2px solid #e5e7eb;
}
.verif-table thead th {
    padding: 13px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #9ca3af;
    white-space: nowrap;
}
.verif-table thead th.right { text-align: right; }
.verif-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background .15s;
}
.verif-table tbody tr:hover { background: #f9fdfb; }
.verif-table tbody tr:last-child { border-bottom: none; }
.verif-table tbody td {
    padding: 14px 16px;
    font-size: 0.88rem;
    color: #374151;
    vertical-align: middle;
}
.verif-table tbody td.right { text-align: right; }

/* ===== CELL COMPONENTS ===== */
.cell-date-main { font-weight: 600; color: #1f2937; font-size: 0.85rem; }
.cell-date-time { font-size: 0.75rem; color: #9ca3af; margin-top: 2px; }

.cell-warga-name { font-weight: 600; color: #1f2937; }

.code-badge {
    display: inline-block;
    background: var(--green-light);
    color: var(--green-main);
    border: 1px solid #a7d9c1;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}

.angsuran-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3f4f6;
    color: #374151;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.nominal-main { font-weight: 700; color: #1f2937; font-size: 0.92rem; }
.nominal-note { font-size: 0.74rem; color: #9ca3af; margin-top: 2px; max-width: 160px; }

.metode-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f3f4f6;
    border-radius: 50px;
    padding: 4px 12px;
    font-size: 0.77rem;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
}

/* ===== BUTTONS ===== */
.btn-lihat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.btn-lihat:hover {
    border-color: var(--green-main);
    color: var(--green-main);
    background: var(--green-light);
}

.btn-verif {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--green-sidebar), var(--green-main));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(30,122,86,0.30);
    transition: all .2s;
    white-space: nowrap;
}
.btn-verif:hover {
    background: linear-gradient(135deg, var(--green-dark), var(--green-sidebar));
    box-shadow: 0 5px 14px rgba(30,122,86,0.40);
    transform: translateY(-1px);
    color: #fff;
}

/* ===== MOBILE CARDS ===== */
@media (max-width: 767px) {
    .verif-table-wrap { display: none; }
    .mobile-cards { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
}
@media (min-width: 768px) {
    .mobile-cards { display: none; }
}

.mobile-item {
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-sm);
    padding: 14px;
    background: #fff;
    transition: box-shadow .2s;
}
.mobile-item:hover { box-shadow: var(--shadow-sm); }
.mobile-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.mobile-item-name { font-weight: 700; color: #1f2937; font-size: 0.9rem; }
.mobile-item-date { font-size: 0.74rem; color: #9ca3af; margin-top: 2px; }
.mobile-item-nominal {
    font-size: 1rem;
    font-weight: 800;
    color: var(--green-main);
}
.mobile-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.mobile-item-actions {
    display: flex;
    gap: 8px;
}
.mobile-item-actions .btn-lihat,
.mobile-item-actions .btn-verif { flex: 1; justify-content: center; }
</style>

<div class="verif-wrapper">

    <!-- Page Header -->
    <div class="verif-header">
        <div class="verif-header-icon"><i class="bi bi-shield-check"></i></div>
        <div class="verif-header-text">
            <h4>Verifikasi Pembayaran Warga</h4>
            <p>Periksa & konfirmasi bukti transfer yang dikirim anggota</p>
        </div>
        <?php if(!empty($pending_list)): ?>
            <div class="verif-count-badge">
                <i class="bi bi-clock-history"></i>
                <?php echo count($pending_list); ?> Menunggu
            </div>
        <?php endif; ?>
    </div>

    <!-- Main Card -->
    <div class="verif-card">

        <?php if(empty($pending_list)): ?>
            <!-- Empty State -->
            <div class="empty-state">
                <div class="empty-state-icon">✅</div>
                <h5>Semua Sudah Terverifikasi</h5>
                <p>Tidak ada pembayaran yang menunggu verifikasi saat ini.</p>
            </div>

        <?php else: ?>

            <!-- ===== DESKTOP TABLE ===== -->
            <div class="verif-table-wrap">
                <table class="verif-table">
                    <thead>
                        <tr>
                            <th>Tanggal Kirim</th>
                            <th>Warga</th>
                            <th>Kode Pinjaman</th>
                            <th>Angsuran</th>
                            <th class="right">Nominal</th>
                            <th>Metode</th>
                            <th>Bukti</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach($pending_list as $p): ?>
                        <tr>
                            <td>
                                <div class="cell-date-main"><?php echo date('d M Y', strtotime($p->created_at)); ?></div>
                                <div class="cell-date-time"><?php echo date('H:i', strtotime($p->created_at)); ?> WIB</div>
                            </td>
                            <td>
                                <div class="cell-warga-name"><?php echo $p->nama_lengkap; ?></div>
                            </td>
                            <td>
                                <span class="code-badge"><?php echo $p->kode_pinjaman; ?></span>
                            </td>
                            <td>
                                <span class="angsuran-badge">
                                    <i class="bi bi-hash"></i> Ke-<?php echo $p->angsuran_ke; ?>
                                </span>
                            </td>
                            <td class="right">
                                <div class="nominal-main">Rp <?php echo number_format($p->nominal_bayar, 0, ',', '.'); ?></div>
                                <?php if(!empty($p->catatan_warga)): ?>
                                    <div class="nominal-note"><?php echo $p->catatan_warga; ?></div>
                                <?php endif; ?>
                            </td>
                            <td>
                                <?php
                                $metode = strtolower($p->metode_bayar);
                                $icon = str_contains($metode, 'wallet') || str_contains($metode, 'e_wallet') ? '📱' : '🏦';
                                ?>
                                <span class="metode-pill">
                                    <?php echo $icon; ?> <?php echo ucwords(str_replace('_', ' ', $p->metode_bayar)); ?>
                                </span>
                            </td>
                            <td>
                                <?php if(!empty($p->foto_bukti)): ?>
                                    <a href="<?php echo base_url('uploads/bukti_transfer/'.$p->foto_bukti); ?>" target="_blank" class="btn-lihat">
                                        <i class="bi bi-eye"></i> Lihat
                                    </a>
                                <?php else: ?>
                                    <span style="color:#d1d5db;font-size:.8rem">— Tidak ada</span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran/'.$p->id); ?>" class="btn-verif">
                                    <i class="bi bi-check-lg"></i> Verifikasi
                                </a>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <!-- ===== MOBILE CARDS ===== -->
            <div class="mobile-cards">
                <?php foreach($pending_list as $p): ?>
                <div class="mobile-item">
                    <div class="mobile-item-top">
                        <div>
                            <div class="mobile-item-name"><?php echo $p->nama_lengkap; ?></div>
                            <div class="mobile-item-date">
                                <i class="bi bi-clock me-1"></i>
                                <?php echo date('d M Y, H:i', strtotime($p->created_at)); ?> WIB
                            </div>
                        </div>
                        <div class="mobile-item-nominal">
                            Rp <?php echo number_format($p->nominal_bayar, 0, ',', '.'); ?>
                        </div>
                    </div>
                    <div class="mobile-item-meta">
                        <span class="code-badge"><?php echo $p->kode_pinjaman; ?></span>
                        <span class="angsuran-badge"><i class="bi bi-hash"></i> Ke-<?php echo $p->angsuran_ke; ?></span>
                        <?php
                        $metode = strtolower($p->metode_bayar);
                        $icon = str_contains($metode, 'wallet') || str_contains($metode, 'e_wallet') ? '📱' : '🏦';
                        ?>
                        <span class="metode-pill"><?php echo $icon; ?> <?php echo ucwords(str_replace('_', ' ', $p->metode_bayar)); ?></span>
                    </div>
                    <?php if(!empty($p->catatan_warga)): ?>
                        <p style="font-size:.78rem;color:#9ca3af;margin:0 0 10px;line-height:1.4"><?php echo $p->catatan_warga; ?></p>
                    <?php endif; ?>
                    <div class="mobile-item-actions">
                        <?php if(!empty($p->foto_bukti)): ?>
                            <a href="<?php echo base_url('uploads/bukti_transfer/'.$p->foto_bukti); ?>" target="_blank" class="btn-lihat">
                                <i class="bi bi-eye"></i> Lihat Bukti
                            </a>
                        <?php endif; ?>
                        <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran/'.$p->id); ?>" class="btn-verif">
                            <i class="bi bi-check-lg"></i> Verifikasi
                        </a>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

        <?php endif; ?>
    </div>
</div>