<style>
*, *::before, *::after { box-sizing: border-box; }
:root {
    --teal: #20c997; --teal-dark: #0fa37f; --teal-light: #d1fae5;
    --red: #ef4444; --red-light: #fee2e2;
    --yellow: #f59e0b; --yellow-light: #fef3c7;
    --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
    --gray-400: #9ca3af; --gray-500: #6b7280; --gray-700: #374151; --gray-900: #111827;
    --radius: 12px;
}

/* Page header */
.bsa-header { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.bsa-icon { width:46px; height:46px; background:linear-gradient(135deg,#0d9488,#14b8a6); border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; box-shadow:0 4px 12px rgba(13,148,136,.3); flex-shrink:0; }
.bsa-header h4 { font-size:1.1rem; font-weight:800; color:var(--gray-900); margin:0 0 2px; }
.bsa-header small { font-size:.78rem; color:var(--gray-500); }

/* Cards */
.bsa-card { background:#fff; border-radius:var(--radius); box-shadow:0 1px 8px rgba(0,0,0,.08); overflow:hidden; margin-bottom:16px; }
.bsa-card-header { padding:12px 18px; border-bottom:1.5px solid var(--gray-100); display:flex; align-items:center; gap:8px; background:var(--gray-50); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500); }
.bsa-card-header i { color:var(--teal); }
.bsa-card-body { padding:18px; }

/* Tagihan list */
.tagihan-item { border:1.5px solid var(--gray-200); border-radius:10px; padding:13px 15px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; transition:border-color .2s, background .2s; cursor:pointer; }
.tagihan-item:last-child { margin-bottom:0; }
.tagihan-item:hover, .tagihan-item.checked { border-color:var(--teal); background:#f0fdf9; }
.tagihan-item .tag-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.tagihan-item .tag-icon { width:36px; height:36px; border-radius:9px; background:var(--teal-light); display:flex; align-items:center; justify-content:center; color:var(--teal-dark); font-size:.95rem; flex-shrink:0; }
.tagihan-item .tag-name { font-size:.88rem; font-weight:700; color:var(--gray-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tagihan-item .tag-periode { font-size:.75rem; color:var(--gray-500); margin-top:1px; }
.tagihan-item .tag-nominal { font-size:.95rem; font-weight:800; color:var(--teal-dark); white-space:nowrap; }
.tagihan-item input[type="checkbox"] { width:17px; height:17px; border-radius:5px; border:1.5px solid var(--gray-300,#d1d5db); accent-color:var(--teal); cursor:pointer; flex-shrink:0; }

/* Total bar */
.total-bar { background:linear-gradient(135deg,#0d9488,#14b8a6); border-radius:var(--radius); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; color:#fff; }
.total-bar .tb-label { font-size:.82rem; font-weight:600; opacity:.85; }
.total-bar .tb-count { font-size:1.1rem; font-weight:800; }
.total-bar .tb-right { text-align:right; }
.total-bar .tb-total-label { font-size:.78rem; opacity:.8; }
.total-bar .tb-total { font-size:1.35rem; font-weight:800; letter-spacing:-.5px; }

/* Form fields */
.field-label { display:block; font-size:.79rem; font-weight:700; color:var(--gray-700); margin-bottom:5px; }
.field-label .req { color:var(--red); margin-left:2px; }
.form-control, .form-select { border:1.5px solid var(--gray-200); border-radius:9px; font-size:.875rem; padding:9px 12px; width:100%; color:var(--gray-900); }
.form-control:focus, .form-select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(32,201,151,.13); outline:none; }
textarea.form-control { resize:vertical; min-height:80px; }

/* Upload zone */
.upload-zone { border:2px dashed var(--gray-200); border-radius:10px; padding:24px 18px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; position:relative; }
.upload-zone:hover, .upload-zone.drag { border-color:var(--teal); background:#f0fdf9; }
.upload-zone input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.upload-zone .uz-icon { font-size:1.8rem; color:var(--teal); margin-bottom:8px; }
.upload-zone .uz-text { font-size:.82rem; font-weight:600; color:var(--gray-700); }
.upload-zone .uz-sub  { font-size:.74rem; color:var(--gray-400); margin-top:3px; }
.upload-preview { display:none; align-items:center; gap:10px; padding:10px 13px; background:var(--teal-light); border:1.5px solid #a7f3d0; border-radius:9px; margin-top:10px; }
.upload-preview.show { display:flex; }
.upload-preview .up-name { font-size:.82rem; font-weight:600; color:var(--teal-dark); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-preview .up-del { cursor:pointer; color:#dc2626; font-size:.8rem; flex-shrink:0; }

/* Action bar */
.action-bar { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:16px 18px; background:var(--gray-50); border-top:1.5px solid var(--gray-100); }
.btn-back { background:#fff; border:1.5px solid var(--gray-200); color:var(--gray-500); border-radius:9px; padding:9px 18px; font-weight:600; font-size:.85rem; display:inline-flex; align-items:center; gap:6px; text-decoration:none; transition:all .2s; }
.btn-back:hover { border-color:var(--gray-400); color:var(--gray-700); }
.btn-bayar { background:var(--teal); border:none; color:#fff; border-radius:9px; padding:10px 26px; font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:7px; cursor:pointer; box-shadow:0 3px 10px rgba(32,201,151,.3); transition:all .2s; }
.btn-bayar:hover:not(:disabled) { background:var(--teal-dark); transform:translateY(-1px); box-shadow:0 5px 14px rgba(32,201,151,.38); }
.btn-bayar:disabled { background:#a7f3d0; cursor:not-allowed; box-shadow:none; }

/* Info box */
.info-box { background:#eff6ff; border:1.5px solid #bfdbfe; border-radius:10px; padding:12px 15px; font-size:.79rem; color:#1e40af; margin-bottom:16px; display:flex; gap:9px; align-items:flex-start; line-height:1.6; }
.info-box i { flex-shrink:0; margin-top:2px; }

/* Alert */
.alert-err { background:var(--red-light); border:1.5px solid #fecaca; border-radius:10px; padding:11px 14px; font-size:.82rem; color:#991b1b; display:flex; gap:8px; align-items:flex-start; margin-bottom:14px; }

/* Select all row */
.sel-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; }
.sel-bar .sl { font-size:.8rem; font-weight:700; color:var(--gray-700); }
.btn-sel-all { font-size:.77rem; padding:5px 12px; border-radius:20px; border:1.5px solid var(--teal); color:var(--teal); background:#f0fdf9; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.btn-sel-all:hover { background:var(--teal-light); }

/* Empty state */
.empty-state { text-align:center; padding:40px 20px; color:var(--gray-400); }
.empty-state i { font-size:2.5rem; display:block; margin-bottom:12px; opacity:.5; }
.empty-state p { font-size:.88rem; }

/* Mobile */
@media (max-width:767.98px) {
    .bsa-header { margin-bottom:14px; }
    .bsa-card-body { padding:14px; }
    .total-bar { flex-direction:column; align-items:flex-start; gap:6px; }
    .action-bar { flex-direction:column; }
    .btn-back, .btn-bayar { width:100%; justify-content:center; }
    .tagihan-item .tag-name { max-width:150px; }
}
</style>

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

    <!-- Header -->
    <div class="bsa-header">
        <div class="bsa-icon"><i class="bi bi-collection"></i></div>
        <div>
            <h4>Bayar Semua Tagihan</h4>
            <small>Upload 1 bukti untuk membayar semua tagihan yang belum dibayar</small>
        </div>
    </div>

    <?php if($this->session->flashdata('error')): ?>
    <div class="alert-err"><i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i><div><?php echo $this->session->flashdata('error'); ?></div></div>
    <?php endif; ?>

    <div class="info-box">
        <i class="bi bi-info-circle-fill"></i>
        <div>Anda dapat memilih tagihan mana saja yang ingin dibayar sekaligus.
        Upload <strong>1 bukti transfer</strong> yang berlaku untuk semua tagihan yang dipilih.
        Pembayaran akan menunggu <strong>verifikasi admin</strong> sebelum dinyatakan lunas.</div>
    </div>

    <form action="" method="post" enctype="multipart/form-data" id="bayarSemuaForm">

        <!-- Daftar Tagihan -->
        <div class="bsa-card">
            <div class="bsa-card-header">
                <i class="bi bi-list-check"></i>
                Pilih Tagihan yang Akan Dibayar
                <span style="margin-left:auto; font-size:.75rem; font-weight:700; color:var(--teal); text-transform:none; letter-spacing:0;">
                    <?php echo count($tagihan_pending); ?> tagihan pending
                </span>
            </div>
            <div class="bsa-card-body">

                <?php if(empty($tagihan_pending)): ?>
                <div class="empty-state">
                    <i class="bi bi-check-circle-fill" style="color:#20c997;"></i>
                    <p>Semua tagihan sudah lunas! Tidak ada yang perlu dibayar.</p>
                </div>
                <?php else: ?>

                <!-- Pilih semua bar -->
                <div class="sel-bar">
                    <span class="sl"><i class="bi bi-person-check me-1" style="color:#20c997;"></i>Centang tagihan yang ingin dibayar</span>
                    <div style="display:flex; gap:8px;">
                        <button type="button" class="btn-sel-all" onclick="selectAll(true)"><i class="bi bi-check-all"></i>Pilih Semua</button>
                        <button type="button" class="btn-sel-all" style="border-color:#e5e7eb; color:#6b7280; background:#f9fafb;" onclick="selectAll(false)"><i class="bi bi-x-circle"></i>Batal</button>
                    </div>
                </div>

                <?php
                $bulan_nama = ['','Januari','Februari','Maret','April','Mei','Juni',
                               'Juli','Agustus','September','Oktober','November','Desember'];
                foreach($tagihan_pending as $t): ?>
                <div class="tagihan-item" onclick="toggleItem(this)">
                    <div class="tag-left">
                        <input type="checkbox" name="tagihan_ids[]" value="<?php echo $t->id; ?>"
                               class="item-check" checked onchange="updateTotal()">
                        <div class="tag-icon"><i class="bi bi-cash-coin"></i></div>
                        <div>
                            <div class="tag-name"><?php echo htmlspecialchars($t->nama_iuran); ?></div>
                            <div class="tag-periode">
                                <i class="bi bi-calendar3 me-1"></i>
                                <?php echo $bulan_nama[(int)$t->periode_bulan] . ' ' . $t->periode_tahun; ?>
                            </div>
                        </div>
                    </div>
                    <div class="tag-nominal">Rp <?php echo number_format($t->nominal, 0, ',', '.'); ?></div>
                </div>
                <?php endforeach; ?>

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

        <?php if(!empty($tagihan_pending)): ?>

        <!-- Total -->
        <div class="total-bar" id="totalBar">
            <div>
                <div class="tb-label"><i class="bi bi-collection me-1"></i>Tagihan Terpilih</div>
                <div class="tb-count"><span id="countSelected"><?php echo count($tagihan_pending); ?></span> tagihan</div>
            </div>
            <div class="tb-right">
                <div class="tb-total-label">Total Pembayaran</div>
                <div class="tb-total" id="totalNominal">Rp <?php
                    $total = 0;
                    foreach($tagihan_pending as $t) $total += $t->nominal;
                    echo number_format($total, 0, ',', '.');
                ?></div>
            </div>
        </div>

        <!-- Form Pembayaran -->
        <div class="bsa-card">
            <div class="bsa-card-header">
                <i class="bi bi-credit-card-fill"></i>Detail Pembayaran
            </div>
            <div class="bsa-card-body">
                <div class="row g-3">

                    <!-- Metode -->
                    <div class="col-md-6">
                        <label class="field-label">Metode Pembayaran <span class="req">*</span></label>
                        <select name="metode_pembayaran" class="form-select" required>
                            <option value="">-- Pilih Metode --</option>
                            <option value="transfer">Transfer Bank</option>
                            <option value="tunai">Tunai</option>
                            <option value="qris">QRIS</option>
                            <option value="dompet_digital">Dompet Digital (GoPay/OVO/Dana)</option>
                        </select>
                    </div>

                    <!-- Keterangan -->
                    <div class="col-md-6">
                        <label class="field-label">Keterangan <span style="font-size:.71rem; font-weight:500; color:#9ca3af;">(opsional)</span></label>
                        <input type="text" name="keterangan" class="form-control" placeholder="Misal: Transfer via BCA">
                    </div>

                    <!-- Upload Bukti -->
                    <div class="col-12">
                        <label class="field-label">Bukti Transfer <span class="req">*</span></label>
                        <div class="upload-zone" id="uploadZone">
                            <input type="file" name="bukti_transfer" id="buktiInput" accept="image/*,.pdf"
                                   onchange="handleFile(this)" required>
                            <div class="uz-icon"><i class="bi bi-cloud-upload"></i></div>
                            <div class="uz-text">Klik atau seret file ke sini</div>
                            <div class="uz-sub">JPG, PNG, PDF · Maks 2 MB</div>
                        </div>
                        <div class="upload-preview" id="uploadPreview">
                            <i class="bi bi-file-earmark-check-fill" style="color:#20c997; font-size:1.1rem;"></i>
                            <span class="up-name" id="previewName">file.jpg</span>
                            <span class="up-del" onclick="clearFile()"><i class="bi bi-x-circle-fill"></i></span>
                        </div>
                        <div style="font-size:.74rem; color:#9ca3af; margin-top:6px;">
                            <i class="bi bi-info-circle me-1"></i>1 bukti berlaku untuk semua tagihan yang dipilih
                        </div>
                    </div>

                </div>
            </div>

            <!-- Action Bar -->
            <div class="action-bar">
                <a href="<?php echo base_url('iuran'); ?>" class="btn-back">
                    <i class="bi bi-arrow-left"></i> Kembali
                </a>
                <button type="submit" class="btn-bayar" id="btnBayar"
                        onclick="return confirm('Kirim pembayaran untuk tagihan yang dipilih?')">
                    <i class="bi bi-send-check-fill"></i>
                    Bayar <span id="btnCount"><?php echo count($tagihan_pending); ?></span> Tagihan
                </button>
            </div>
        </div>

        <?php endif; ?>

    </form>
</div>

<script>
// Semua nominal tagihan untuk kalkulasi
var tagihanData = {
    <?php foreach($tagihan_pending as $t): ?>
    '<?php echo $t->id; ?>': <?php echo $t->nominal; ?>,
    <?php endforeach; ?>
};

function toggleItem(row) {
    var cb = row.querySelector('.item-check');
    if(event.target === cb) return; // jangan double toggle
    cb.checked = !cb.checked;
    row.classList.toggle('checked', cb.checked);
    updateTotal();
}

function selectAll(val) {
    document.querySelectorAll('.item-check').forEach(function(cb) {
        cb.checked = val;
        cb.closest('.tagihan-item').classList.toggle('checked', val);
    });
    updateTotal();
}

function updateTotal() {
    var total = 0, count = 0;
    document.querySelectorAll('.item-check').forEach(function(cb) {
        if(cb.checked) {
            total += tagihanData[cb.value] || 0;
            count++;
        }
        cb.closest('.tagihan-item').classList.toggle('checked', cb.checked);
    });
    document.getElementById('countSelected').textContent = count;
    document.getElementById('totalNominal').textContent  = 'Rp ' + total.toLocaleString('id-ID');
    document.getElementById('btnCount').textContent      = count;
    document.getElementById('btnBayar').disabled         = (count === 0);
}

function handleFile(input) {
    if(input.files && input.files[0]) {
        document.getElementById('previewName').textContent = input.files[0].name;
        document.getElementById('uploadPreview').classList.add('show');
    }
}

function clearFile() {
    document.getElementById('buktiInput').value = '';
    document.getElementById('uploadPreview').classList.remove('show');
}

// Init checked state
document.querySelectorAll('.item-check').forEach(function(cb) {
    if(cb.checked) cb.closest('.tagihan-item').classList.add('checked');
});
updateTotal();
</script>