<style>
*, *::before, *::after { box-sizing: border-box; }

:root {
    --teal: #20c997;
    --teal-dark: #0fa37f;
    --teal-light: #d1fae5;
    --red: #ef4444;
    --red-light: #fee2e2;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #111827;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
}

/* ===== PAGE HEADER ===== */
.page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.page-header-icon {
    width: 44px; height: 44px; background: var(--teal-light);
    border-radius: var(--radius-md); display: flex; align-items: center;
    justify-content: center; font-size: 1.2rem; color: var(--teal-dark); flex-shrink: 0;
}
.page-header h4 { font-size: 1.1rem; font-weight: 800; color: var(--gray-900); margin: 0; line-height: 1.2; }
.page-header small { font-size: .78rem; color: var(--gray-500); display: block; margin-top: 2px; }

/* ===== DESKTOP LAYOUT: 2 kolom ===== */
.tambah-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
/* Keterangan + action bar span 2 kolom */
.tambah-layout .col-full { grid-column: 1 / -1; }

/* ===== SECTION CARD ===== */
.form-card { background: #fff; border-radius: var(--radius-lg); box-shadow: 0 1px 6px rgba(0,0,0,.08); overflow: hidden; }
.form-card-header {
    padding: 11px 18px; border-bottom: 1.5px solid var(--gray-100);
    display: flex; align-items: center; gap: 8px; background: var(--gray-50);
}
.form-card-header .section-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--gray-500);
}
.form-card-header i { font-size: .88rem; color: var(--teal); }
.form-card-body { padding: 18px; }

/* ===== FIELDS ===== */
.field-group { margin-bottom: 16px; }
.field-group:last-child { margin-bottom: 0; }
label.field-label { display: block; font-size: .79rem; font-weight: 700; color: var(--gray-700); margin-bottom: 5px; }
label.field-label .req { color: var(--red); margin-left: 2px; }
label.field-label .opt { font-size: .71rem; font-weight: 500; color: var(--gray-400); margin-left: 4px; }

.form-control, .form-select {
    border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
    font-size: .875rem; padding: 9px 12px; color: var(--gray-900);
    background: #fff; width: 100%;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--teal); box-shadow: 0 0 0 3px rgba(32,201,151,.13); outline: none;
}
.form-control::placeholder { color: var(--gray-400); }
textarea.form-control { resize: vertical; min-height: 88px; }

.field-hint { font-size: .74rem; color: var(--gray-400); margin-top: 5px; display: flex; align-items: center; gap: 4px; }

/* Period grid */
.period-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Nominal prefix */
.nominal-wrapper { display: flex; align-items: stretch; }
.nominal-prefix {
    background: var(--gray-100); border: 1.5px solid var(--gray-200); border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    padding: 0 12px; display: flex; align-items: center;
    font-size: .82rem; font-weight: 700; color: var(--gray-500); white-space: nowrap;
}
.nominal-wrapper .form-control { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Nominal preview */
.nominal-preview {
    display: none; margin-top: 7px;
    background: var(--teal-light); border: 1.5px solid #a7f3d0;
    border-radius: var(--radius-sm); padding: 7px 11px;
    font-size: .81rem; font-weight: 600; color: var(--teal-dark);
    align-items: center; gap: 6px;
    animation: fadeIn .2s ease;
}
.nominal-preview.show { display: flex; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }

/* Info box */
.info-box {
    background: #eff6ff; border: 1.5px solid #bfdbfe;
    border-radius: var(--radius-md); padding: 13px 15px;
    font-size: .79rem; color: #1e40af; line-height: 1.6;
}
.info-box .info-title {
    font-weight: 700; display: flex; align-items: center;
    gap: 6px; margin-bottom: 7px; font-size: .81rem;
}
.info-box ul { margin: 0; padding-left: 16px; }
.info-box li + li { margin-top: 4px; }

/* Status pill */
.status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--red-light); color: #991b1b;
    border: 1px solid #fecaca; border-radius: 999px;
    padding: 3px 9px; font-size: .73rem; font-weight: 700;
}

/* Action bar */
.action-bar {
    display: flex; gap: 10px; padding: 16px 18px;
    border-top: 1.5px solid var(--gray-100); background: var(--gray-50);
    align-items: center; justify-content: space-between;
}
.btn-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--radius-sm); font-size: .84rem; font-weight: 700;
    border: 1.5px solid var(--gray-200); background: #fff; color: var(--gray-500);
    text-decoration: none; transition: all .2s; white-space: nowrap;
}
.btn-back:hover { border-color: var(--gray-400); color: var(--gray-700); }
.btn-save {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 24px; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 700;
    border: none; background: var(--teal); color: #fff; cursor: pointer;
    box-shadow: 0 2px 8px rgba(32,201,151,.28);
    transition: background .2s, transform .1s, box-shadow .2s;
}
.btn-save:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(32,201,151,.35); }
.btn-save:active { transform: translateY(0); }

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

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
    .tambah-layout { grid-template-columns: 1fr; gap: 12px; }
    .tambah-layout .col-full { grid-column: 1; }
    .form-card-body { padding: 14px; }
    .action-bar { flex-direction: column; padding: 14px; }
    .btn-back { justify-content: center; width: 100%; }
    .btn-save { width: 100%; justify-content: center; }
}
</style>

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

    <!-- Page Header -->
    <div class="page-header">
        <div class="page-header-icon">
            <i class="bi bi-plus-circle-fill"></i>
        </div>
        <div>
            <h4>Tambah Tagihan Iuran</h4>
            <small>Buat tagihan iuran manual untuk warga</small>
        </div>
    </div>

    <?php if(validation_errors()): ?>
    <div class="alert-danger-custom mb-3">
        <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
        <div><?php echo validation_errors(); ?></div>
    </div>
    <?php endif; ?>

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

    <form action="" method="post" id="iuranForm">
    <div class="tambah-layout">

        <!-- ── KOLOM KIRI: Data Warga ── -->
        <div class="form-card">
            <div class="form-card-header">
                <i class="bi bi-person-fill"></i>
                <span class="section-label">Data Warga</span>
            </div>
            <div class="form-card-body">
                <div class="field-group">
                    <label class="field-label" for="warga_id">Pilih Warga <span class="req">*</span></label>
                    <select name="warga_id" id="warga_id" class="form-select select-warga" required>
                        <option value="">— Pilih Warga —</option>
                        <?php foreach($warga as $w): ?>
                        <option value="<?php echo $w->id; ?>" <?php echo set_select('warga_id', $w->id); ?>>
                            <?php echo $w->nama_lengkap; ?> (NIK: <?php echo $w->nik; ?>)
                        </option>
                        <?php endforeach; ?>
                    </select>
                    <div class="field-hint"><i class="bi bi-search"></i> Ketik untuk mencari nama atau NIK warga</div>
                </div>
            </div>
        </div>

        <!-- ── KOLOM KANAN: Detail Iuran ── -->
        <div class="form-card">
            <div class="form-card-header">
                <i class="bi bi-receipt"></i>
                <span class="section-label">Detail Iuran</span>
            </div>
            <div class="form-card-body">

                <!-- Jenis Iuran -->
                <div class="field-group">
                    <label class="field-label" for="jenis_iuran_id">Jenis Iuran <span class="req">*</span></label>
                    <select name="jenis_iuran_id" id="jenisIuran" 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 isset($ji->nominal) ? $ji->nominal : 0; ?>"
                                <?php echo set_select('jenis_iuran_id', $ji->id); ?>>
                            <?php echo $ji->nama_iuran; ?> — Rp <?php echo number_format(isset($ji->nominal) ? $ji->nominal : 0, 0, ',', '.'); ?>
                        </option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <!-- Periode -->
                <div class="field-group">
                    <label class="field-label">Periode <span class="req">*</span></label>
                    <div class="period-row">
                        <select name="bulan" id="bulanSelect" class="form-select" required>
                            <option value="">Bulan</option>
                            <?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>
                        <select name="tahun" id="tahunSelect" class="form-select" required>
                            <?php for($y = date('Y')-1; $y <= date('Y')+1; $y++): ?>
                            <option value="<?php echo $y; ?>" <?php echo (date('Y')==$y)?'selected':''; ?>><?php echo $y; ?></option>
                            <?php endfor; ?>
                        </select>
                    </div>
                    <div class="field-hint"><i class="bi bi-calendar3"></i> Pilih bulan dan tahun periode tagihan</div>
                </div>

                <!-- Nominal -->
                <div class="field-group">
                    <label class="field-label" for="nominalInput">Nominal <span class="req">*</span></label>
                    <div class="nominal-wrapper">
                        <span class="nominal-prefix">Rp</span>
                        <input type="number" name="nominal" id="nominalInput"
                               class="form-control" required min="0" step="1000"
                               placeholder="0" value="<?php echo set_value('nominal'); ?>">
                    </div>
                    <div id="nominalPreview" class="nominal-preview">
                        <i class="bi bi-check-circle-fill"></i>
                        <span id="nominalPreviewText">Rp 0</span>
                        <span style="font-weight:500;opacity:.7;font-size:.74rem;">· sesuai tarif</span>
                    </div>
                    <div class="field-hint"><i class="bi bi-info-circle"></i> Otomatis terisi, dapat diubah manual</div>
                </div>

            </div>
        </div>

        <!-- ── FULL WIDTH: Keterangan + Info ── -->
        <div class="form-card col-full">
            <div class="form-card-header">
                <i class="bi bi-chat-left-text"></i>
                <span class="section-label">Keterangan</span>
            </div>
            <div class="form-card-body" style="display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;">

                <div class="field-group" style="margin-bottom:0;">
                    <label class="field-label" for="keterangan">Catatan <span class="opt">(opsional)</span></label>
                    <textarea name="keterangan" id="keterangan" class="form-control"
                              rows="4" placeholder="Tambahkan catatan atau keterangan tambahan..."><?php echo set_value('keterangan'); ?></textarea>
                </div>

                <div class="info-box" style="height:fit-content;">
                    <div class="info-title">
                        <i class="bi bi-info-circle-fill"></i> Informasi
                    </div>
                    <ul>
                        <li>Tagihan dibuat dengan status <span class="status-pill"><i class="bi bi-exclamation-triangle"></i>Belum Dibayar</span></li>
                        <li>Warga akan mendapat notifikasi tagihan baru</li>
                        <li>Untuk banyak tagihan sekaligus, gunakan <strong>Generate Tagihan</strong></li>
                    </ul>
                </div>

            </div>
        </div>

        <!-- ── FULL WIDTH: Action Bar ── -->
        <div class="form-card col-full">
            <div class="action-bar">
                <a href="<?php echo base_url('iuran'); ?>" class="btn-back">
                    <i class="bi bi-arrow-left"></i> Batal
                </a>
                <button type="submit" class="btn-save">
                    <i class="bi bi-save2-fill"></i> Simpan Tagihan
                </button>
            </div>
        </div>

    </div>
    </form>

</div>

<script>
$(document).ready(function() {
    // Select2
    if (typeof $.fn.select2 !== 'undefined') {
        $('.select-warga').select2({ placeholder: '— Pilih Warga —', allowClear: true });
    }
});

(function() {
    const jenisIuran     = document.getElementById('jenisIuran');
    const nominalInput   = document.getElementById('nominalInput');
    const nominalPreview = document.getElementById('nominalPreview');
    const nominalPreviewText = document.getElementById('nominalPreviewText');

    function formatRupiah(n) { return 'Rp ' + parseInt(n).toLocaleString('id-ID'); }

    function updateNominal() {
        const sel = jenisIuran.options[jenisIuran.selectedIndex];
        const nominal = sel ? sel.dataset.nominal : null;
        if (nominal && nominal > 0) {
            nominalInput.value = nominal;
            nominalPreviewText.textContent = formatRupiah(nominal);
            nominalPreview.classList.add('show');
        } else {
            nominalPreview.classList.remove('show');
        }
    }

    if (jenisIuran) {
        jenisIuran.addEventListener('change', updateNominal);
        jenisIuran.dispatchEvent(new Event('change')); // trigger on load
    }

    if (nominalInput) {
        nominalInput.addEventListener('input', function() {
            if (this.value > 0) {
                nominalPreviewText.textContent = formatRupiah(this.value);
                nominalPreview.classList.add('show');
            } else {
                nominalPreview.classList.remove('show');
            }
        });
    }
})();
</script>