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

<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
            <i class="bi bi-person-plus text-primary"></i>
            <span class="fw-semibold">Tambah Guru Baru</span>
        </div>
        <a href="/teacher" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Kembali
        </a>
    </div>
    <div class="card-body">

        <?php if (session()->getFlashdata('errors')): ?>
        <div class="alert alert-danger py-2">
            <ul class="mb-0 ps-3 small">
                <?php foreach (session()->getFlashdata('errors') as $err): ?>
                <li><?= esc($err) ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
        <?php endif; ?>

        <form action="/teacher/store" method="post">
            <?= csrf_field() ?>

            <div class="row g-3">

                <div class="col-md-8">
                    <label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control"
                        value="<?= old('name') ?>" placeholder="Nama lengkap beserta gelar" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
                    <select name="gender" class="form-select" required>
                        <option value="">-- Pilih --</option>
                        <option value="L" <?= old('gender') == 'L' ? 'selected' : '' ?>>Laki-laki</option>
                        <option value="P" <?= old('gender') == 'P' ? 'selected' : '' ?>>Perempuan</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">NIP</label>
                    <input type="text" name="nip" class="form-control"
                        value="<?= old('nip') ?>" placeholder="Nomor Induk Pegawai (PNS/PPPK)" id="nipInput">
                    <div class="form-text small text-muted">Wajib diisi jika status PNS / PPPK</div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">PEG ID / NPK / NUPTK</label>
                    <input type="text" name="peg_id" class="form-control"
                        value="<?= old('peg_id') ?>" placeholder="Nomor PEG ID / NPK / NUPTK"
                        id="pegIdInput" inputmode="numeric">
                    <div class="form-text small text-muted">Wajib diisi jika non-PNS/PPPK (hanya angka)</div>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Kode aSc</label>
                    <input type="text" name="short_code" class="form-control"
                        value="<?= old('short_code') ?>"
                        placeholder="01, 02..."
                        style="text-transform:uppercase"
                        maxlength="10">
                    <div class="form-text small text-muted">Opsional</div>
                </div>
                <div class="col-md-2">
                    <label class="form-label">No. HP</label>
                    <input type="text" name="phone" class="form-control"
                        value="<?= old('phone') ?>" placeholder="08xx">
                </div>

                <div class="col-md-10">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control"
                        value="<?= old('email') ?>" placeholder="email@sekolah.id" id="emailInput">
                </div>

                <!-- Field Tambahan Kepegawaian -->
                <div class="col-12">
                    <hr class="my-1">
                    <h6 class="fw-semibold mb-2"><i class="bi bi-briefcase me-1 text-primary"></i>Detail Kepegawaian (Kebutuhan Surat/SPPD)</h6>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Pangkat / Golongan</label>
                    <input type="text" name="golongan" list="golonganList" class="form-control"
                        value="<?= old('golongan') ?>" placeholder="Contoh: Penata Muda, III/a">
                    <datalist id="golonganList">
                        <option value="Penata Muda, III/a">
                        <option value="Penata Muda Tk. I, III/b">
                        <option value="Penata, III/c">
                        <option value="Penata Tk. I, III/d">
                        <option value="Pembina, IV/a">
                        <option value="Pembina Tk. I, IV/b">
                        <option value="Pembina Utama Muda, IV/c">
                        <option value="Pembina Utama Madya, IV/d">
                        <option value="Pembina Utama, IV/e">
                    </datalist>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Jabatan</label>
                    <input type="text" name="jabatan" list="jabatanList" class="form-control"
                        value="<?= old('jabatan') ?>" placeholder="Contoh: Pendidik / Guru">
                    <datalist id="jabatanList">
                        <option value="Pendidik / Guru">
                        <option value="Kepala Urusan TU">
                        <option value="Staf TU / Tenaga Kependidikan">
                        <option value="Kepala Madrasah">
                        <option value="Bendahara Madrasah">
                        <option value="Guru BK">
                        <option value="Wali Kelas">
                    </datalist>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Status Kepegawaian</label>
                    <select name="status_kepegawaian" id="statusKepegawaian" class="form-select">
                        <option value="">-- Pilih Status --</option>
                        <option value="PNS" <?= old('status_kepegawaian') == 'PNS' ? 'selected' : '' ?>>PNS</option>
                        <option value="PPPK" <?= old('status_kepegawaian') == 'PPPK' ? 'selected' : '' ?>>PPPK</option>
                        <option value="Honorer" <?= old('status_kepegawaian') == 'Honorer' ? 'selected' : '' ?>>Honorer (GTT/PTT)</option>
                        <option value="GTY" <?= old('status_kepegawaian') == 'GTY' ? 'selected' : '' ?>>GTY (Guru Tetap Yayasan)</option>
                        <option value="Lainnya" <?= old('status_kepegawaian') == 'Lainnya' ? 'selected' : '' ?>>Lainnya</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Status Sertifikasi</label>
                    <select name="is_sertifikasi" class="form-select">
                        <option value="0" <?= old('is_sertifikasi') == '0' ? 'selected' : '' ?>>Belum Sertifikasi</option>
                        <option value="1" <?= old('is_sertifikasi') == '1' ? 'selected' : '' ?>>Sudah Sertifikasi</option>
                    </select>
                </div>

                <!-- Buat Akun Login -->
                <div class="col-12">
                    <hr class="my-1">
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="createAccount" name="create_account" value="1"
                            onchange="toggleAccountFields(this.checked)">
                        <label class="form-check-label fw-semibold" for="createAccount">
                            <i class="bi bi-key me-1 text-warning"></i>Sekaligus buatkan akun login
                        </label>
                        <div class="form-text small text-muted">
                            <i class="bi bi-info-circle"></i> Username akan menggunakan <strong>NIP</strong> (PNS/PPPK) atau <strong>PEG ID/NPK/NUPTK</strong>
                        </div>
                    </div>

                    <div id="accountFields" style="display:none">
                        <div class="p-3 rounded border border-warning bg-warning bg-opacity-10">
                            <h6 class="fw-semibold mb-3" style="font-size:.9rem">
                                <i class="bi bi-shield-lock me-2 text-warning"></i>Data Akun Login
                            </h6>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label small">Email (Opsional)</label>
                                    <input type="email" name="login_email" id="loginEmail" class="form-control form-control-sm"
                                        placeholder="email@sekolah.id (boleh kosong)">
                                    <div class="form-text">Kosongkan jika tidak ingin pakai email</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small">Password</label>
                                    <input type="text" name="login_password" id="loginPassword" class="form-control form-control-sm"
                                        placeholder="Kosongkan = NIP/PEG ID">
                                    <div class="form-text" id="passwordHint">Default: NIP atau PEG ID (jika ada) atau guru123</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="d-flex justify-content-end mt-4 pt-3 border-top gap-2">
                <a href="/teacher" class="btn btn-secondary">
                    <i class="bi bi-x-circle me-1"></i>Batal
                </a>
                <button type="submit" class="btn btn-primary px-4">
                    <i class="bi bi-save me-2"></i>Simpan
                </button>
            </div>

        </form>
    </div>
</div>
</div>
</div>

<?= $this->endSection() ?>
<?= $this->section('scripts') ?>
<script>
function toggleAccountFields(show) {
    document.getElementById('accountFields').style.display = show ? '' : 'none';
}

document.getElementById('pegIdInput').addEventListener('input', function() {
    this.value = this.value.replace(/[^0-9]/g, '');
});

document.querySelector('form').addEventListener('submit', function(e) {
    const status = document.getElementById('statusKepegawaian').value;
    const nip = document.getElementById('nipInput').value;
    const pegId = document.getElementById('pegIdInput').value;
    const createAccount = document.getElementById('createAccount').checked;

    if ((status === 'PNS' || status === 'PPPK') && !nip) {
        e.preventDefault();
        alert('NIP wajib diisi untuk status PNS / PPPK!');
        document.getElementById('nipInput').focus();
        return false;
    }

    if (status && status !== 'PNS' && status !== 'PPPK' && !pegId) {
        e.preventDefault();
        alert('PEG ID / NPK / NUPTK wajib diisi untuk status selain PNS / PPPK!');
        document.getElementById('pegIdInput').focus();
        return false;
    }

    if (createAccount && !nip && !pegId) {
        e.preventDefault();
        alert('NIP atau PEG ID/NPK/NUPTK wajib diisi jika ingin membuat akun login!');
        return false;
    }
});
</script>
<?= $this->endSection() ?>
