<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<?php
    $errors = $validation ?? [];
    $value = static function (string $field) use ($transaksi) {
        return old($field, $transaksi[$field] ?? '');
    };
?>

<section class="panel form-panel">
    <div class="panel-head">
        <div>
            <p class="eyebrow">Input Buku Kas</p>
            <h2><?= esc($title) ?></h2>
        </div>
        <a class="button button-secondary" href="<?= site_url('kas') ?>">Kembali</a>
    </div>

    <?php if ($errors !== []) : ?>
        <div class="alert alert-error">
            Periksa kembali data yang belum sesuai.
        </div>
    <?php endif ?>

    <form action="<?= esc($action) ?>" method="post" class="cash-form">
        <label>
            <span>Tanggal</span>
            <input type="date" name="tanggal" value="<?= esc($value('tanggal')) ?>" required>
            <?php if (isset($errors['tanggal'])) : ?><small><?= esc($errors['tanggal']) ?></small><?php endif ?>
        </label>

        <label>
            <span>Kode Bukti</span>
            <input
                type="text"
                id="kode_bukti"
                value="<?= esc($value('kode')) ?>"
                data-kode-masuk="<?= esc($kodeOptions['masuk']) ?>"
                data-kode-keluar="<?= esc($kodeOptions['keluar']) ?>"
                readonly
            >
            <small>Nomor dibuat otomatis saat transaksi disimpan.</small>
            <?php if (isset($errors['kode'])) : ?><small><?= esc($errors['kode']) ?></small><?php endif ?>
        </label>

        <label class="full">
            <span>Uraian</span>
            <input type="text" name="uraian" value="<?= esc($value('uraian')) ?>" maxlength="255" placeholder="Contoh: Pembelian ATK" required>
            <?php if (isset($errors['uraian'])) : ?><small><?= esc($errors['uraian']) ?></small><?php endif ?>
        </label>

        <label>
            <span>Jenis Transaksi</span>
            <select name="jenis" id="jenis_transaksi" required>
                <option value="masuk" <?= $value('jenis') === 'masuk' ? 'selected' : '' ?>>Kas Masuk</option>
                <option value="keluar" <?= $value('jenis') === 'keluar' ? 'selected' : '' ?>>Kas Keluar</option>
            </select>
            <?php if (isset($errors['jenis'])) : ?><small><?= esc($errors['jenis']) ?></small><?php endif ?>
        </label>

        <label>
            <span>Jumlah</span>
            <input type="number" name="jumlah" value="<?= esc($value('jumlah')) ?>" min="1" step="0.01" placeholder="100000" required>
            <?php if (isset($errors['jumlah'])) : ?><small><?= esc($errors['jumlah']) ?></small><?php endif ?>
        </label>

        <div class="form-actions full">
            <button class="button" type="submit">Simpan Transaksi</button>
            <a class="button button-secondary" href="<?= site_url('kas') ?>">Batal</a>
        </div>
    </form>
</section>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    const jenisTransaksi = document.getElementById('jenis_transaksi');
    const kodeBukti = document.getElementById('kode_bukti');

    if (jenisTransaksi && kodeBukti) {
        const kodeAwal = kodeBukti.value;
        const updateKode = () => {
            const kodeBaru = jenisTransaksi.value === 'keluar'
                ? kodeBukti.dataset.kodeKeluar
                : kodeBukti.dataset.kodeMasuk;

            kodeBukti.value = kodeAwal && document.title.includes('Edit')
                ? kodeAwal
                : kodeBaru;
        };

        jenisTransaksi.addEventListener('change', () => {
            kodeBukti.value = jenisTransaksi.value === 'keluar'
                ? kodeBukti.dataset.kodeKeluar
                : kodeBukti.dataset.kodeMasuk;
        });

        updateKode();
    }
</script>
<?= $this->endSection() ?>
