<style>
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: none; }
.form-control:focus, .form-select:focus {
    border-color: #20c997;
    box-shadow: 0 0 0 3px rgba(32,201,151,.12);
}
.form-control, .form-select {
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    font-size: 0.88rem;
    padding: 9px 12px;
    color: #111827;
}
.form-control::placeholder { color: #9ca3af; }

/* ===== SECTION CARD ===== */
.form-section {
    border-radius: 14px;
    border: none;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff;
}
.form-section-header {
    padding: 13px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #374151;
    border-bottom: 1px solid #f1f3f5;
}
.form-section-header i { color: #20c997; }
.form-section-body { padding: 20px; }

.field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
    display: block;
}
.field-label .req { color: #ef4444; }

/* ===== WARGA TABLE ===== */
.warga-scroll {
    max-height: 360px;
    overflow-y: auto;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
}
.warga-scroll::-webkit-scrollbar { width: 5px; }
.warga-scroll::-webkit-scrollbar-thumb { background: #d1fae5; border-radius: 4px; }

.warga-table { margin: 0; font-size: 0.85rem; }
.warga-table thead th {
    background: #f8fffe;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    font-weight: 700;
    padding: 10px 14px;
    border-bottom: 1.5px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 1;
}
.warga-table tbody td { padding: 10px 14px; vertical-align: middle; border-bottom: 1px solid #f3f4f6; }
.warga-table tbody tr:last-child td { border-bottom: none; }
.warga-table tbody tr:hover { background: #f0fdf9; }
.warga-table tbody tr.selected { background: #e6faf5; }

/* Custom checkbox */
.form-check-input {
    width: 16px; height: 16px; cursor: pointer;
    border: 1.5px solid #d1d5db; border-radius: 4px;
}
.form-check-input:checked { background-color: #20c997; border-color: #20c997; }

/* ===== SUMMARY BAR ===== */
.summary-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.summary-cell {
    background: #fff;
    padding: 14px 20px;
    text-align: center;
}
.summary-cell .s-label { font-size: 0.75rem; color: #6b7280; font-weight: 600; margin-bottom: 4px; }
.summary-cell .s-value { font-size: 1.4rem; font-weight: 800; color: #111827; line-height: 1; }
.summary-cell .s-value.green { color: #20c997; }

/* ===== ACTION BAR ===== */
.action-bar {
    display: flex; gap: 10px; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}
.btn-back {
    background: #f3f4f6; border: 1.5px solid #e5e7eb; color: #6b7280;
    border-radius: 8px; padding: 9px 18px; font-weight: 600; font-size: .88rem;
    display: flex; align-items: center; gap: 6px;
}
.btn-back:hover { background: #e5e7eb; color: #374151; }
.btn-generate {
    background: #20c997; border: none; color: #fff;
    border-radius: 8px; padding: 9px 22px; font-weight: 700; font-size: .88rem;
    display: flex; align-items: center; gap: 6px;
    transition: background .2s;
}
.btn-generate:hover:not(:disabled) { background: #1aab81; color: #fff; }
.btn-generate:disabled { background: #a7f3d0; cursor: not-allowed; }

/* ===== SELECT ALL BAR ===== */
.select-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.select-bar .label { font-size: 0.82rem; font-weight: 700; color: #374151; display: flex; align-items: center; gap: 6px; }
.select-bar .label i { color: #20c997; }
.btn-sel {
    font-size: 0.78rem; padding: 5px 12px; border-radius: 7px; font-weight: 600;
    border: 1.5px solid; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
}
.btn-sel.all { border-color: #20c997; color: #20c997; background: #f0fdf9; }
.btn-sel.all:hover { background: #d1fae5; }
.btn-sel.none { border-color: #e5e7eb; color: #6b7280; background: #f9fafb; }
.btn-sel.none:hover { background: #f3f4f6; }

/* Info box */
.info-box {
    background: #eff6ff; border: 1.5px solid #bfdbfe;
    border-radius: 10px; padding: 13px 16px; margin-bottom: 20px;
    font-size: .82rem; color: #1e40af;
}
.info-box .info-title { font-weight: 700; margin-bottom: 6px; }
.info-box ul { margin: 0; padding-left: 16px; }
.info-box ul li { margin-bottom: 3px; }

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
    .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

    /* Header */
    .page-header { flex-direction: column; align-items: flex-start !important; gap: 8px; margin-bottom: 14px !important; }
    .page-header h4 { font-size: 1rem; }

    /* Form fields stack */
    .field-grid > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
    /* Bulan + Tahun side by side on mobile */
    .col-bulan-tahun { flex: 0 0 50% !important; max-width: 50% !important; }

    .form-section-body { padding: 14px; }

    /* Warga table: hide NIK + Alamat, show only nama */
    .warga-table .col-nik,
    .warga-table .col-alamat { display: none; }

    /* Summary */
    .summary-cell .s-value { font-size: 1.2rem; }

    /* Action bar */
    .action-bar { flex-direction: column; }
    .action-bar .btn-back,
    .action-bar .btn-generate { width: 100%; justify-content: center; }
}
</style>

<div class="container-fluid px-4 py-3">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-4 page-header">
        <div>
            <h4 class="mb-0 fw-bold text-dark">
                <i class="bi bi-file-earmark-text me-2" style="color:#20c997;"></i>Generate Tagihan Iuran
            </h4>
            <small class="text-muted">Buat tagihan untuk banyak warga sekaligus</small>
        </div>
        <a href="<?php echo base_url('iuran'); ?>" class="btn btn-sm btn-outline-secondary fw-semibold" style="border-radius:8px;">
            <i class="bi bi-arrow-left me-1"></i>Kembali
        </a>
    </div>

    <!-- Error -->
    <?php if($this->session->flashdata('error')): ?>
    <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-4" style="border-radius:10px;" role="alert">
        <i class="bi bi-exclamation-triangle-fill me-2"></i><?php echo $this->session->flashdata('error'); ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <?php endif; ?>

    <!-- Info -->
    <div class="info-box">
        <div class="info-title"><i class="bi bi-info-circle me-1"></i>Informasi</div>
        <ul>
            <li>Tagihan yang digenerate akan berstatus <strong>PENDING</strong> (belum dibayar)</li>
            <li>Pilih satu atau beberapa warga sekaligus</li>
            <li>Nominal berlaku sama untuk semua warga yang dipilih</li>
        </ul>
    </div>

    <form action="<?php echo base_url('iuran/proses_generate_tagihan'); ?>" method="post">

        <!-- ===== Section 1: Detail Tagihan ===== -->
        <div class="form-section">
            <div class="form-section-header">
                <i class="bi bi-receipt"></i> Detail Tagihan
            </div>
            <div class="form-section-body">
                <div class="row g-3 field-grid">

                    <!-- Jenis Iuran -->
                    <div class="col-md-5">
                        <label class="field-label">Jenis Iuran <span class="req">*</span></label>
                        <select name="jenis_iuran_id" class="form-select" id="jenisIuran" required>
                            <option value="">-- Pilih Jenis Iuran --</option>
                            <?php foreach($jenis_iuran as $ji):
                                $nominal = isset($ji->nominal) ? $ji->nominal : 0;
                            ?>
                            <option value="<?php echo $ji->id; ?>" data-nominal="<?php echo $nominal; ?>">
                                <?php echo $ji->nama_iuran; ?> — Rp <?php echo number_format($nominal, 0, ',', '.'); ?>
                            </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <!-- Bulan -->
                    <div class="col-6 col-md-2 col-bulan-tahun">
                        <label class="field-label">Bulan <span class="req">*</span></label>
                        <select name="periode_bulan" class="form-select" required>
                            <?php
                            $bulan_nama = ['Januari','Februari','Maret','April','Mei','Juni',
                                           'Juli','Agustus','September','Oktober','November','Desember'];
                            for($i = 1; $i <= 12; $i++): ?>
                            <option value="<?php echo sprintf('%02d', $i); ?>"
                                <?php echo date('m') == sprintf('%02d', $i) ? 'selected' : ''; ?>>
                                <?php echo $bulan_nama[$i-1]; ?>
                            </option>
                            <?php endfor; ?>
                        </select>
                    </div>

                    <!-- Tahun -->
                    <div class="col-6 col-md-2 col-bulan-tahun">
                        <label class="field-label">Tahun <span class="req">*</span></label>
                        <select name="periode_tahun" class="form-select" required>
                            <?php for($i = date('Y') - 1; $i <= date('Y') + 1; $i++): ?>
                            <option value="<?php echo $i; ?>" <?php echo date('Y') == $i ? 'selected' : ''; ?>>
                                <?php echo $i; ?>
                            </option>
                            <?php endfor; ?>
                        </select>
                    </div>

                    <!-- Nominal -->
                    <div class="col-md-3">
                        <label class="field-label">Nominal (Rp) <span class="req">*</span></label>
                        <div style="position:relative;">
                            <span style="position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:.78rem; font-weight:700; color:#20c997; pointer-events:none;">Rp</span>
                            <input type="number" name="nominal" id="nominal" class="form-control"
                                   required placeholder="0" min="0" step="1000"
                                   style="padding-left:30px;">
                        </div>
                    </div>

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

        <!-- ===== Section 2: Pilih Warga ===== -->
        <div class="form-section">
            <div class="form-section-header">
                <i class="bi bi-people-fill"></i> Pilih Warga
            </div>
            <div class="form-section-body">

                <!-- Select Bar -->
                <div class="select-bar">
                    <div class="label">
                        <i class="bi bi-person-check-fill"></i>
                        Centang warga yang akan ditagih <span style="color:#ef4444;">*</span>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn-sel all" onclick="checkAll(true)">
                            <i class="bi bi-check-all"></i>Pilih Semua
                        </button>
                        <button type="button" class="btn-sel none" onclick="checkAll(false)">
                            <i class="bi bi-x-circle"></i>Batal Pilih
                        </button>
                    </div>
                </div>

                <!-- Table -->
                <div class="warga-scroll">
                    <table class="table warga-table">
                        <thead>
                            <tr>
                                <th style="width:42px;">
                                    <input type="checkbox" class="form-check-input" id="checkAllBox" onchange="toggleAll(this)">
                                </th>
                                <th style="width:44px;">No</th>
                                <th>Nama</th>
                                <th class="col-nik">NIK</th>
                                <th class="col-alamat">Alamat</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if(empty($warga)): ?>
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i class="bi bi-people fs-2 d-block mb-2 opacity-50"></i>
                                    Tidak ada data warga
                                </td>
                            </tr>
                            <?php else: ?>
                                <?php $no = 1; foreach($warga as $w): ?>
                                <tr class="warga-row">
                                    <td>
                                        <input type="checkbox" name="warga_ids[]" value="<?php echo $w->id; ?>"
                                               class="form-check-input warga-check">
                                    </td>
                                    <td class="text-muted"><?php echo $no++; ?></td>
                                    <td><strong><?php echo htmlspecialchars($w->nama_lengkap); ?></strong></td>
                                    <td class="col-nik text-muted"><?php echo $w->nik; ?></td>
                                    <td class="col-alamat text-muted"><?php echo isset($w->alamat) ? htmlspecialchars($w->alamat) : '-'; ?></td>
                                </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- ===== Summary ===== -->
        <div class="summary-bar mb-4">
            <div class="summary-cell">
                <div class="s-label"><i class="bi bi-person-check me-1"></i>Warga Terpilih</div>
                <div class="s-value" id="selectedCount">0</div>
            </div>
            <div class="summary-cell">
                <div class="s-label"><i class="bi bi-cash-stack me-1"></i>Estimasi Total</div>
                <div class="s-value green" id="estimasiTotal">Rp 0</div>
            </div>
        </div>

        <!-- ===== Action Bar ===== -->
        <div class="action-bar">
            <a href="<?php echo base_url('iuran'); ?>" class="btn-back btn">
                <i class="bi bi-arrow-left"></i>Kembali
            </a>
            <button type="submit" class="btn-generate btn" id="btnSubmit" disabled
                    onclick="return confirm('Generate tagihan untuk warga yang dipilih?')">
                <i class="bi bi-file-earmark-check"></i>
                Generate <span id="countSubmit">0</span> Tagihan
            </button>
        </div>

    </form>
</div>

<script>
// Auto-fill nominal dari jenis iuran
document.getElementById('jenisIuran').addEventListener('change', function() {
    var nominal = this.options[this.selectedIndex].getAttribute('data-nominal');
    if (nominal) {
        document.getElementById('nominal').value = nominal;
        updateEstimasi();
    }
});

function toggleAll(src) {
    document.querySelectorAll('.warga-check').forEach(cb => {
        cb.checked = src.checked;
        cb.closest('tr').classList.toggle('selected', src.checked);
    });
    updateCount();
}

function checkAll(checked) {
    document.getElementById('checkAllBox').checked = checked;
    document.querySelectorAll('.warga-check').forEach(cb => {
        cb.checked = checked;
        cb.closest('tr').classList.toggle('selected', checked);
    });
    updateCount();
}

function updateCount() {
    var count = document.querySelectorAll('.warga-check:checked').length;
    document.getElementById('selectedCount').textContent = count;
    document.getElementById('countSubmit').textContent = count;
    document.getElementById('btnSubmit').disabled = (count === 0);
    updateEstimasi();
}

function updateEstimasi() {
    var count   = document.querySelectorAll('.warga-check:checked').length;
    var nominal = parseInt(document.getElementById('nominal').value) || 0;
    document.getElementById('estimasiTotal').textContent = 'Rp ' + (count * nominal).toLocaleString('id-ID');
}

// Row click to toggle
document.querySelectorAll('.warga-row').forEach(row => {
    row.addEventListener('click', function(e) {
        if (e.target.type === 'checkbox') return;
        var cb = this.querySelector('.warga-check');
        cb.checked = !cb.checked;
        this.classList.toggle('selected', cb.checked);
        updateCount();
    });
});

document.querySelectorAll('.warga-check').forEach(cb => {
    cb.addEventListener('change', function() {
        this.closest('tr').classList.toggle('selected', this.checked);
        updateCount();
    });
});

document.getElementById('nominal').addEventListener('input', updateEstimasi);
updateCount();
</script>