<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-white border-0 pt-4 px-4">
                    <h5 class="mb-0">Pembayaran Iuran</h5>
                </div>
                <div class="card-body px-4 pb-4">
                    <?php echo validation_errors('<div class="alert alert-danger">', '</div>'); ?>
                    
                    <form action="<?php echo base_url('iuran/bayar'); ?>" method="post">
                        <div class="mb-3">
                            <label class="form-label">Pilih Warga <span class="text-danger">*</span></label>
                            <select name="warga_id" class="form-select" required>
                                <option value="">-- Pilih Warga --</option>
                                <?php foreach($warga as $w): ?>
                                    <option value="<?php echo $w->id; ?>"><?php echo $w->nama_lengkap; ?> (NIK: <?php echo $w->nik; ?>)</option>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Jenis Iuran <span class="text-danger">*</span></label>
                            <select name="jenis_iuran_id" class="form-select" required>
                                <option value="">-- Pilih Jenis Iuran --</option>
                                <?php foreach($jenis_iuran as $ji): ?>
                                    <option value="<?php echo $ji->id; ?>" data-nominal="<?php echo $ji->nominal; ?>">
                                        <?php echo $ji->nama_iuran; ?> - Rp <?php echo number_format($ji->nominal, 0, ',', '.'); ?>/<?php echo $ji->periode; ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Bulan <span class="text-danger">*</span></label>
                                <select name="periode_bulan" class="form-select" required>
                                    <?php for($i=1; $i<=12; $i++): ?>
                                        <option value="<?php echo $i; ?>" <?php echo ($i == date('n')) ? 'selected' : ''; ?>>
                                            <?php echo date('F', mktime(0,0,0,$i,1)); ?>
                                        </option>
                                    <?php endfor; ?>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Tahun <span class="text-danger">*</span></label>
                                <input type="number" name="periode_tahun" class="form-control" value="<?php echo date('Y'); ?>" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Nominal (Rp) <span class="text-danger">*</span></label>
                            <input type="number" name="nominal" id="nominal" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Metode Pembayaran</label>
                            <select name="metode_pembayaran" class="form-select">
                                <option value="tunai">Tunai</option>
                                <option value="transfer">Transfer Bank</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Keterangan</label>
                            <textarea name="keterangan" class="form-control" rows="2"></textarea>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="<?php echo base_url('iuran'); ?>" class="btn btn-secondary">Kembali</a>
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-check-circle me-2"></i>Simpan Pembayaran
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.querySelector('select[name="jenis_iuran_id"]').addEventListener('change', function() {
    var nominal = this.options[this.selectedIndex].dataset.nominal;
    if(nominal) {
        document.getElementById('nominal').value = nominal;
    }
});
</script>