<?= $this->extend('layout/template') ?>

<?= $this->section('content') ?>
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-gray-800 fw-bold">Tambah User</h1>
            <p class="mb-0 text-muted">Form penambahan user baru</p>
        </div>
        <a href="<?= base_url('users') ?>" class="btn btn-secondary shadow-sm">
            <i class="fas fa-arrow-left fa-sm text-white-50 me-1"></i> Kembali
        </a>
    </div>

    <div class="card shadow-sm border-0 mb-4 rounded-3">
        <div class="card-header bg-white py-3 border-0">
            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-user-plus me-2"></i>Form User</h6>
        </div>
        <div class="card-body">
            <form action="<?= base_url('users/store') ?>" method="post">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="username" class="form-label fw-bold text-secondary">Username <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="username" name="username" placeholder="Masukkan username" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="password" class="form-label fw-bold text-secondary">Password <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="Masukkan password" required>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="role" class="form-label fw-bold text-secondary">Role <span class="text-danger">*</span></label>
                    <select class="form-select" id="role" name="role" required onchange="toggleFields()">
                        <option value="">Pilih Role</option>
                        <option value="superadmin">Super Admin</option>
                        <option value="admin_bidang">Admin Bidang</option>
                        <option value="opd">OPD</option>
                    </select>
                    <div class="form-text">Pilih peran pengguna dalam sistem.</div>
                </div>

                <div class="mb-3 d-none bg-light p-3 rounded border" id="bidangField">
                    <label for="bidang_id" class="form-label fw-bold text-primary">Pilih Bidang <span class="text-danger">*</span></label>
                    <select class="form-select" id="bidang_id" name="bidang_id">
                        <option value="">-- Pilih Bidang --</option>
                        <?php foreach($bidang as $b): ?>
                            <option value="<?= $b['id'] ?>"><?= $b['nama_bidang'] ?></option>
                        <?php endforeach; ?>
                    </select>
                    <div class="form-text text-primary">User ini akan menjadi admin untuk bidang yang dipilih.</div>
                </div>

                <div class="mb-3 d-none bg-light p-3 rounded border" id="opdField">
                    <label for="opd_id" class="form-label fw-bold text-success">Pilih OPD <span class="text-danger">*</span></label>
                    <select class="form-select" id="opd_id" name="opd_id">
                        <option value="">-- Pilih OPD --</option>
                        <?php foreach($opd as $o): ?>
                            <option value="<?= $o['id'] ?>"><?= $o['nama_opd'] ?></option>
                        <?php endforeach; ?>
                    </select>
                    <div class="form-text text-success">User ini akan menjadi operator untuk OPD yang dipilih.</div>
                </div>

                <hr>
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary px-4"><i class="fas fa-save me-1"></i> Simpan Data</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function toggleFields() {
        const role = document.getElementById('role').value;
        const bidangField = document.getElementById('bidangField');
        const opdField = document.getElementById('opdField');

        bidangField.classList.add('d-none');
        opdField.classList.add('d-none');

        if (role === 'admin_bidang') {
            bidangField.classList.remove('d-none');
        } else if (role === 'opd') {
            opdField.classList.remove('d-none');
        }
    }
</script>
<?= $this->endSection() ?>
