<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header bg-warning text-white border-0 pt-4 px-4" style="border-radius: 15px 15px 0 0;">
                    <h5 class="mb-0"><i class="bi bi-check-circle me-2"></i>Verifikasi Pembayaran Iuran</h5>
                </div>
                <div class="card-body p-4">
                    
                    <!-- Detail Pembayaran -->
                    <div class="alert alert-light border">
                        <h6 class="mb-3"><i class="bi bi-person me-2"></i>Detail Pembayaran</h6>
                        <table class="table table-sm table-borderless mb-0">
                            <tr>
                                <td width="150"><strong>Nama Warga</strong></td>
                                <td>: <?php echo $iuran->nama_lengkap; ?></td>
                            </tr>
                            <tr>
                                <td><strong>NIK</strong></td>
                                <td>: <?php echo $iuran->nik; ?></td>
                            </tr>
                            <tr>
                                <td><strong>Jenis Iuran</strong></td>
                                <td>: <?php echo $iuran->nama_iuran; ?></td>
                            </tr>
                            <tr>
                                <td><strong>Periode</strong></td>
                                <td>: 
                                    <?php 
                                    $bulan = ['','Januari','Februari','Maret','April','Mei','Juni',
                                              'Juli','Agustus','September','Oktober','November','Desember'];
                                    echo $bulan[(int)$iuran->periode_bulan] . ' ' . $iuran->periode_tahun; 
                                    ?>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Nominal</strong></td>
                                <td>: <span class="text-success fw-bold">Rp <?php echo number_format($iuran->nominal, 0, ',', '.'); ?></span></td>
                            </tr>
                            <tr>
                                <td><strong>Metode</strong></td>
                                <td>: <?php echo $iuran->metode_pembayaran; ?></td>
                            </tr>
                            <tr>
                                <td><strong>Tanggal Bayar</strong></td>
                                <td>: <?php echo date('d-m-Y H:i', strtotime($iuran->tanggal_bayar)); ?></td>
                            </tr>
                        </table>
                    </div>

                    <!-- Bukti Transfer -->
                    <?php if($iuran->bukti_transfer): ?>
                    <div class="mb-3">
                        <label class="form-label"><strong>Bukti Transfer:</strong></label>
                        <div class="border rounded p-2">
                            <?php 
                            $ext = pathinfo($iuran->bukti_transfer, PATHINFO_EXTENSION);
                            if(in_array(strtolower($ext), ['jpg', 'jpeg', 'png'])): 
                            ?>
                                <img src="<?php echo base_url('uploads/iuran/' . $iuran->bukti_transfer); ?>" 
                                     class="img-fluid rounded" style="max-height: 300px;">
                            <?php else: ?>
                                <a href="<?php echo base_url('uploads/iuran/' . $iuran->bukti_transfer); ?>" 
                                   target="_blank" class="btn btn-outline-primary">
                                    <i class="bi bi-file-earmark-pdf me-2"></i>Lihat Bukti PDF
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php endif; ?>

                    <form action="" method="post">
                        
                        <!-- MASTER KAS SELECTOR (WAJIB untuk verifikasi) -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Masuk ke Kas <span class="text-danger">*</span></label>
                            <select name="master_kas_id" class="form-select" id="master_kas_id" required>
                                <option value="">-- Pilih Rekening / Kas Tujuan --</option>
                                <?php foreach ($kas_list as $mk): ?>
                                    <option value="<?php echo $mk->id; ?>"
                                        data-warna="<?php echo $mk->warna; ?>"
                                        data-kode="<?php echo $mk->kode; ?>"
                                        data-jenis="<?php echo $mk->jenis; ?>"
                                        <?php echo set_select('master_kas_id', $mk->id); ?>>
                                        <?php
                                        $icon_text = $mk->jenis === 'bank' ? '🏦' : ($mk->jenis === 'ewallet' ? '📱' : '💵');
                                        echo $icon_text . ' ' . $mk->nama . ' (' . $mk->kode . ')';
                                        if ($mk->nomor_rekening) echo ' — ' . $mk->nomor_rekening;
                                        ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                            <div id="kasBadgeContainer" class="mt-2" style="display:none;">
                                <span class="badge rounded-pill px-3 py-2" id="kasBadge" style="font-size: 13px;">
                                    <i class="bi bi-wallet2 me-1"></i><span id="kasBadgeText"></span>
                                </span>
                                <small class="text-muted ms-2">Dana akan masuk ke rekening ini setelah verifikasi</small>
                            </div>
                            <?php echo form_error('master_kas_id', '<small class="text-danger">', '</small>'); ?>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Keterangan Verifikasi</label>
                            <textarea name="keterangan" class="form-control" rows="3" 
                                      placeholder="Tambahkan catatan jika perlu..."></textarea>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="<?php echo base_url('iuran'); ?>" class="btn btn-secondary">
                                <i class="bi bi-arrow-left me-2"></i>Kembali
                            </a>
                            <div>
                                <button type="submit" name="aksi" value="tolak" class="btn btn-danger me-2">
                                    <i class="bi bi-x-circle me-2"></i>Tolak
                                </button>
                                <button type="submit" name="aksi" value="terima" class="btn btn-success">
                                    <i class="bi bi-check-circle me-2"></i>Terima & Verifikasi
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const kasSelect = document.getElementById('master_kas_id');
    const kasBadgeContainer = document.getElementById('kasBadgeContainer');
    const kasBadge = document.getElementById('kasBadge');
    const kasBadgeText = document.getElementById('kasBadgeText');

    kasSelect.addEventListener('change', function() {
        const selected = this.options[this.selectedIndex];
        if (this.value) {
            kasBadge.style.backgroundColor = selected.dataset.warna || '#198754';
            kasBadgeText.textContent = selected.dataset.kode;
            kasBadgeContainer.style.display = 'block';
        } else {
            kasBadgeContainer.style.display = 'none';
        }
    });

    // Auto-select berdasarkan metode pembayaran yang sudah ada
    const metode = '<?php echo strtolower($iuran->metode_pembayaran); ?>';
    if (metode && !kasSelect.value) {
        const options = kasSelect.querySelectorAll('option[data-jenis]');
        options.forEach(opt => {
            const jenis = opt.dataset.jenis;
            if ((metode.includes('tunai') && jenis === 'tunai') ||
                (metode.includes('transfer') && jenis === 'bank') ||
                (metode.includes('e-wallet') && jenis === 'ewallet')) {
                kasSelect.value = opt.value;
                kasSelect.dispatchEvent(new Event('change'));
            }
        });
    }

    if (kasSelect.value) {
        kasSelect.dispatchEvent(new Event('change'));
    }
});
</script>