<?= $this->extend('layout/admin') ?>
<?= $this->section('content') ?>

<style>
    /* Floating label effect */
    .form-floating-label {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .form-floating-label input,
    .form-floating-label select {
        border: 1px solid #ccc;
        border-radius: 0.6rem;
        padding: 1rem 0.75rem 0.25rem 0.75rem;
        width: 100%;
        font-size: 1rem;
        transition: all 0.3s;
    }

    .form-floating-label label {
        position: absolute;
        top: 1rem;
        left: 0.75rem;
        color: #888;
        font-size: 1rem;
        transition: all 0.3s;
        pointer-events: none;
    }

    .form-floating-label input:focus+label,
    .form-floating-label input:not(:placeholder-shown)+label,
    .form-floating-label select:focus+label,
    .form-floating-label select:not([value=""])+label {
        top: -0.4rem;
        left: 0.75rem;
        font-size: 0.8rem;
        color: #28a745;
        background: white;
        padding: 0 0.25rem;
    }

    /* Gradient button */
    .btn-gradient {
        background: linear-gradient(90deg, #28a745, #20c997);
        color: white;
        border: none;
        transition: all 0.3s;
    }

    .btn-gradient:hover {
        opacity: 0.9;
    }
</style>

<div class="card shadow-lg rounded-4 border-0">
    <div class="card-header bg-success text-white d-flex align-items-center justify-content-between">
        <h5 class="mb-0"><i class="fas fa-credit-card me-2"></i>Tambah Pembayaran</h5>
        <a href="<?= site_url('ppdb/payment') ?>" class="btn btn-light btn-sm shadow-sm">
            <i class="fas fa-arrow-left"></i> Kembali
        </a>
    </div>
    <div class="card-body p-5">

        <form action="<?= site_url('ppdb/payment/add') ?>" method="post" enctype="multipart/form-data">

            <div class="form-floating-label">
                <select name="student_id" required>
                    <option value="">-- Pilih Siswa --</option>
                    <?php foreach ($students as $s): ?>
                        <option value="<?= $s['id'] ?>"><?= $s['reg_no'] ?> - <?= $s['name'] ?></option>
                    <?php endforeach; ?>
                </select>
                <label>Siswa</label>
            </div>

            <div class="form-floating-label">
                <input type="text" id="amount_view" placeholder=" " autocomplete="off" required>
                <input type="hidden" name="amount" id="amount">
                <label>Jumlah Bayar</label>
            </div>



            <div class="form-floating-label">
                <select name="method" required>
                    <option value="">-- Pilih Metode --</option>
                    <option value="CASH">CASH</option>
                    <option value="TRANSFER">TRANSFER</option>
                    <option value="ONLINE">ONLINE</option>
                </select>
                <label>Metode Pembayaran</label>
            </div>

            <div class="form-floating-label">
                <input type="file" name="proof_file" placeholder=" ">
                <label>Bukti Bayar (Optional)</label>
            </div>

            <div class="d-flex gap-3 mt-4">
                <button type="submit" class="btn btn-gradient btn-lg shadow-sm">
                    <i class="fas fa-save me-1"></i> Simpan
                </button>
                <a href="<?= site_url('ppdb/payment') ?>" class="btn btn-outline-secondary btn-lg shadow-sm">
                    <i class="fas fa-times me-1"></i> Batal
                </a>
            </div>

        </form>

    </div>
</div>

<?= $this->endSection() ?>
<script>
    document.addEventListener('DOMContentLoaded', function () {

        const amount = document.getElementById('amount');

        function formatRupiah(value) {
            let number = value.replace(/\D/g, '');
            if (!number) return '';
            return 'Rp ' + number.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        }

        function normalize() {
            let raw = amount.value.replace(/\D/g, '');
            amount.value = formatRupiah(raw);
        }

        // EVENT
        amount.addEventListener('input', normalize);
        amount.addEventListener('keyup', normalize);
        amount.addEventListener('blur', normalize);

        // 🔥 INI YANG KAMU KURANG
        normalize(); // <—— PAKSA FORMAT SAAT LOAD
    });

</script>