<!-- views/master_kas/tambah.php -->
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">

            <!-- Breadcrumb -->
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="<?php echo base_url('master_kas'); ?>">Master Kas</a></li>
                    <li class="breadcrumb-item active">Tambah Kas</li>
                </ol>
            </nav>

            <div class="card border-0 shadow-sm" style="border-radius: 14px;">
                <div class="card-header bg-primary text-white border-0 pt-4 px-4" style="border-radius: 14px 14px 0 0;">
                    <h5 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Tambah Master Kas</h5>
                    <small class="opacity-75">Daftarkan rekening bank, kas tunai, atau e-wallet baru</small>
                </div>
                <div class="card-body px-4 pb-4 pt-4">

                    <?php echo validation_errors('<div class="alert alert-danger">', '</div>'); ?>

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

                        <div class="row">
                            <!-- Kode -->
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">Kode Kas <span class="text-danger">*</span></label>
                                <input type="text" name="kode" class="form-control text-uppercase" maxlength="20"
                                    value="<?php echo set_value('kode'); ?>" required
                                    placeholder="Contoh: BRI, TUNAI, DANA"
                                    style="text-transform: uppercase;">
                                <small class="text-muted">Kode singkat unik, maks 20 karakter</small>
                            </div>
                            <!-- Nama -->
                            <div class="col-md-8 mb-3">
                                <label class="form-label fw-semibold">Nama Kas <span class="text-danger">*</span></label>
                                <input type="text" name="nama" class="form-control" maxlength="100"
                                    value="<?php echo set_value('nama'); ?>" required
                                    placeholder="Contoh: Rekening BRI RT 01">
                            </div>
                        </div>

                        <div class="row">
                            <!-- Jenis -->
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">Jenis Kas <span class="text-danger">*</span></label>
                                <select name="jenis" class="form-select" id="jenisKas" required>
                                    <option value="">-- Pilih Jenis --</option>
                                    <option value="tunai"   <?php echo set_select('jenis', 'tunai'); ?>>💵 Tunai</option>
                                    <option value="bank"    <?php echo set_select('jenis', 'bank'); ?>>🏦 Rekening Bank</option>
                                    <option value="ewallet" <?php echo set_select('jenis', 'ewallet'); ?>>📱 E-Wallet</option>
                                </select>
                            </div>
                            <!-- Saldo Awal -->
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">Saldo Awal (Rp)</label>
                                <input type="number" name="saldo_awal" class="form-control" min="0" step="1000"
                                    value="<?php echo set_value('saldo_awal', '0'); ?>"
                                    placeholder="0">
                                <small class="text-muted">Saldo kas saat pertama kali didaftarkan</small>
                            </div>
                            <!-- Status -->
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">Status</label>
                                <select name="status" class="form-select">
                                    <option value="aktif"    <?php echo set_select('status', 'aktif', true); ?>>✅ Aktif</option>
                                    <option value="nonaktif" <?php echo set_select('status', 'nonaktif'); ?>>⛔ Nonaktif</option>
                                </select>
                            </div>
                        </div>

                        <!-- Kolom untuk Bank/E-Wallet -->
                        <div id="detail_rekening">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold">Nomor Rekening / No. HP</label>
                                    <input type="text" name="nomor_rekening" class="form-control"
                                        value="<?php echo set_value('nomor_rekening'); ?>"
                                        placeholder="Contoh: 1234-5678-9012">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold">Atas Nama</label>
                                    <input type="text" name="atas_nama" class="form-control"
                                        value="<?php echo set_value('atas_nama'); ?>"
                                        placeholder="Nama pemilik rekening">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Warna Badge -->
                            <div class="col-md-3 mb-3">
                                <label class="form-label fw-semibold">Warna Badge</label>
                                <div class="input-group">
                                    <input type="color" name="warna" class="form-control form-control-color"
                                        value="<?php echo set_value('warna', '#0d6efd'); ?>" style="width: 60px;">
                                    <input type="text" class="form-control" id="warnaHex" readonly placeholder="#0d6efd">
                                </div>
                            </div>
                            <!-- Icon -->
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">Icon</label>
                                <select name="icon" class="form-select" id="iconSelect">
                                    <option value="bi-wallet2"   <?php echo set_select('icon', 'bi-wallet2', true); ?>>💼 Dompet</option>
                                    <option value="bi-bank"      <?php echo set_select('icon', 'bi-bank'); ?>>🏦 Bank</option>
                                    <option value="bi-cash-stack" <?php echo set_select('icon', 'bi-cash-stack'); ?>>💵 Uang Tunai</option>
                                    <option value="bi-phone-fill" <?php echo set_select('icon', 'bi-phone-fill'); ?>>📱 E-Wallet</option>
                                    <option value="bi-credit-card" <?php echo set_select('icon', 'bi-credit-card'); ?>>💳 Kartu</option>
                                </select>
                            </div>
                            <!-- Preview -->
                            <div class="col-md-5 mb-3">
                                <label class="form-label fw-semibold">Preview Badge</label>
                                <div class="pt-1">
                                    <span class="badge rounded-pill fs-6 px-3 py-2" id="previewBadge" style="background-color: #0d6efd;">
                                        <i class="bi bi-wallet2 me-1" id="previewIcon"></i>
                                        <span id="previewKode">KODE</span>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Toggle Kas Tabungan -->
                        <div class="mb-3 p-3 rounded-3" style="background: #eff6ff; border: 1px solid #bfdbfe;">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="is_tabungan" id="isTabungan" value="1"
                                    <?php echo set_checkbox('is_tabungan', '1'); ?>>
                                <label class="form-check-label fw-semibold" for="isTabungan">
                                    <i class="bi bi-piggy-bank me-1 text-primary"></i> Ini adalah Kas Penampung Tabungan Warga
                                </label>
                            </div>
                            <small class="text-muted d-block mt-1">
                                Centang jika rekening ini digunakan untuk menampung <strong>setoran tabungan seluruh warga RT</strong>.
                                Dana dari kas ini akan dipakai sebagai <strong>prioritas pertama</strong> saat pencairan pinjaman.
                            </small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Keterangan</label>
                            <textarea name="keterangan" class="form-control" rows="2"
                                placeholder="Keterangan tambahan (opsional)..."><?php echo set_value('keterangan'); ?></textarea>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="<?php echo base_url('master_kas'); ?>" class="btn btn-secondary">
                                <i class="bi bi-arrow-left me-1"></i> Kembali
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save me-1"></i> Simpan Master Kas
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Preview badge real-time
const kodeInput   = document.querySelector('input[name="kode"]');
const warnaInput  = document.querySelector('input[name="warna"]');
const warnaHex    = document.getElementById('warnaHex');
const iconSelect  = document.getElementById('iconSelect');
const previewBadge = document.getElementById('previewBadge');
const previewIcon  = document.getElementById('previewIcon');
const previewKode  = document.getElementById('previewKode');

function updatePreview() {
    const kode  = kodeInput.value.toUpperCase() || 'KODE';
    const warna = warnaInput.value;
    const icon  = iconSelect.value;
    previewBadge.style.backgroundColor = warna;
    previewIcon.className = 'bi ' + icon + ' me-1';
    previewKode.textContent = kode;
    warnaHex.value = warna;
}

kodeInput.addEventListener('input', updatePreview);
warnaInput.addEventListener('input', updatePreview);
iconSelect.addEventListener('change', updatePreview);
updatePreview();

// Uppercase kode otomatis
kodeInput.addEventListener('input', function() {
    this.value = this.value.toUpperCase();
});
</script>