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

            <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">Edit: <?php echo $kas->nama; ?></li>
                </ol>
            </nav>

            <div class="card border-0 shadow-sm" style="border-radius: 14px;">
                <div class="card-header bg-warning text-dark border-0 pt-4 px-4" style="border-radius: 14px 14px 0 0;">
                    <h5 class="mb-0"><i class="bi bi-pencil-square me-2"></i>Edit Master Kas</h5>
                    <small class="opacity-75">Perbarui informasi rekening kas RT</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/edit/' . $kas->id); ?>" method="post">

                        <div class="row">
                            <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', $kas->kode); ?>" required
                                    style="text-transform: uppercase;">
                                <small class="text-muted">Kode singkat unik, maks 20 karakter</small>
                            </div>
                            <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', $kas->nama); ?>" required>
                            </div>
                        </div>

                        <div class="row">
                            <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" required>
                                    <option value="tunai"   <?php echo set_select('jenis', 'tunai',   $kas->jenis === 'tunai'); ?>>💵 Tunai</option>
                                    <option value="bank"    <?php echo set_select('jenis', 'bank',    $kas->jenis === 'bank'); ?>>🏦 Rekening Bank</option>
                                    <option value="ewallet" <?php echo set_select('jenis', 'ewallet', $kas->jenis === 'ewallet'); ?>>📱 E-Wallet</option>
                                </select>
                            </div>
                            <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', $kas->saldo_awal); ?>">
                                <small class="text-muted">Mengubah ini akan mempengaruhi saldo terkini</small>
                            </div>
                            <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',    $kas->status === 'aktif'); ?>>✅ Aktif</option>
                                    <option value="nonaktif" <?php echo set_select('status', 'nonaktif', $kas->status === 'nonaktif'); ?>>⛔ Nonaktif</option>
                                </select>
                            </div>
                        </div>

                        <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', $kas->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', $kas->atas_nama); ?>">
                            </div>
                        </div>

                        <div class="row">
                            <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', $kas->warna ?: '#0d6efd'); ?>" style="width: 60px;">
                                    <input type="text" class="form-control" id="warnaHex" readonly>
                                </div>
                            </div>
                            <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',    $kas->icon === 'bi-wallet2'); ?>>💼 Dompet</option>
                                    <option value="bi-bank"       <?php echo set_select('icon', 'bi-bank',       $kas->icon === 'bi-bank'); ?>>🏦 Bank</option>
                                    <option value="bi-cash-stack" <?php echo set_select('icon', 'bi-cash-stack', $kas->icon === 'bi-cash-stack'); ?>>💵 Uang Tunai</option>
                                    <option value="bi-phone-fill" <?php echo set_select('icon', 'bi-phone-fill', $kas->icon === 'bi-phone-fill'); ?>>📱 E-Wallet</option>
                                    <option value="bi-credit-card"<?php echo set_select('icon', 'bi-credit-card',$kas->icon === 'bi-credit-card'); ?>>💳 Kartu</option>
                                </select>
                            </div>
                            <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: <?php echo $kas->warna ?: '#0d6efd'; ?>">
                                        <i class="bi <?php echo $kas->icon; ?> me-1" id="previewIcon"></i>
                                        <span id="previewKode"><?php echo $kas->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 $kas->is_tabungan ? 'checked' : ''; ?>>
                                <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 menampung <strong>setoran tabungan seluruh warga RT</strong>.
                                Dana dari kas ini dipakai <strong>prioritas pertama</strong> saat pencairan pinjaman.
                            </small>
                        </div>

                        <!-- Info Saldo Saat Ini -->
                        <div class="alert alert-info mb-3">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>Saldo saat ini: Rp <?php echo number_format($kas->saldo_saat_ini, 0, ',', '.'); ?></strong>
                            — dihitung dari saldo awal + seluruh transaksi masuk/keluar kas ini.
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Keterangan</label>
                            <textarea name="keterangan" class="form-control" rows="2"><?php echo set_value('keterangan', $kas->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-warning">
                                <i class="bi bi-save me-1"></i> Simpan Perubahan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
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() {
    previewBadge.style.backgroundColor = warnaInput.value;
    previewIcon.className = 'bi ' + iconSelect.value + ' me-1';
    previewKode.textContent = kodeInput.value.toUpperCase() || 'KODE';
    warnaHex.value = warnaInput.value;
}

kodeInput.addEventListener('input', function() { this.value = this.value.toUpperCase(); updatePreview(); });
warnaInput.addEventListener('input', updatePreview);
iconSelect.addEventListener('change', updatePreview);
updatePreview();
</script>