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

<?= $this->section('content') ?>

<div class="card-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h1 class="page-title" style="margin-bottom: 0;">Tambah Dosen</h1>
    <a href="<?= base_url('dosen') ?>" class="btn btn-secondary">
        <i class='bx bx-arrow-back'></i> Kembali
    </a>
</div>

<?php if(session()->getFlashdata('error')) : ?>
    <div class="alert alert-danger alert-dismissible fade show" role="alert" style="background-color: #fee2e2; color: #991b1b; padding: 1rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid #fecaca;">
        <?= session()->getFlashdata('error') ?>
    </div>
<?php endif; ?>

<?php if(isset($validation)) : ?>
    <div class="alert alert-danger alert-dismissible fade show" role="alert" style="background-color: #fee2e2; color: #991b1b; padding: 1rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid #fecaca;">
        <?= $validation->listErrors() ?>
    </div>
<?php endif; ?>

<div class="card" style="background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; padding: 2rem;">
    <form action="<?= base_url('dosen/store') ?>" method="POST">
        <?= csrf_field() ?>

        <div class="row">
            <div class="col-md-6 mb-3">
                <div class="form-group">
                    <label for="jenis_dosen" style="font-weight: 600; color: #475569;">Jenis Dosen <span class="text-danger">*</span></label>
                    <select name="jenis_dosen" id="jenis_dosen" class="form-control" required style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;">
                        <option value="Internal" <?= old('jenis_dosen') == 'Internal' ? 'selected' : '' ?>>Internal</option>
                        <option value="Eksternal" <?= old('jenis_dosen') == 'Eksternal' ? 'selected' : '' ?>>Eksternal</option>
                    </select>
                </div>
            </div>
            
            <div class="col-md-6 mb-3">
                <div class="form-group">
                    <label for="status_aktif" style="font-weight: 600; color: #475569;">Status Keaktifan <span class="text-danger">*</span></label>
                    <select name="status_aktif" id="status_aktif" class="form-control" required style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;">
                        <option value="Aktif" <?= old('status_aktif') == 'Aktif' ? 'selected' : '' ?>>Aktif</option>
                        <option value="Cuti" <?= old('status_aktif') == 'Cuti' ? 'selected' : '' ?>>Cuti</option>
                        <option value="Tugas Belajar" <?= old('status_aktif') == 'Tugas Belajar' ? 'selected' : '' ?>>Tugas Belajar</option>
                        <option value="Keluar" <?= old('status_aktif') == 'Keluar' ? 'selected' : '' ?>>Keluar</option>
                    </select>
                </div>
            </div>
        </div>

        <hr style="margin: 1.5rem 0; border-color: #e2e8f0;">

        <div class="row">
            <div class="col-md-6 mb-3">
                <div class="form-group">
                    <label for="nidn" style="font-weight: 600; color: #475569;">NIDN <span class="text-danger" id="req_nidn">*</span></label>
                    <input type="text" name="nidn" id="nidn" class="form-control" value="<?= old('nidn') ?>" placeholder="Nomor Induk Dosen Nasional" style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;">
                    <small class="text-muted" id="help_nidn">Wajib diisi untuk dosen internal.</small>
                </div>
            </div>
            
            <div class="col-md-6 mb-3" id="email_container" style="display: none;">
                <div class="form-group">
                    <label for="email" style="font-weight: 600; color: #475569;">Email Login <span class="text-danger">*</span></label>
                    <input type="email" name="email" id="email" class="form-control" value="<?= old('email') ?>" placeholder="email@contoh.com" style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;">
                    <small class="text-muted">Akan digunakan sebagai username untuk login ke siAkad.</small>
                </div>
            </div>

            <div class="col-md-6 mb-3" id="nuptk_container">
                <div class="form-group">
                    <label for="nuptk" style="font-weight: 600; color: #475569;">NUPTK</label>
                    <input type="text" name="nuptk" id="nuptk" class="form-control" value="<?= old('nuptk') ?>" placeholder="Opsional" style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 mb-3">
                <div class="form-group">
                    <label for="gelar_depan" style="font-weight: 600; color: #475569;">Gelar Depan</label>
                    <input type="text" name="gelar_depan" id="gelar_depan" class="form-control" value="<?= old('gelar_depan') ?>" placeholder="Contoh: Dr., Ir." style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;">
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="form-group">
                    <label for="nama_lengkap" style="font-weight: 600; color: #475569;">Nama Lengkap <span class="text-danger">*</span></label>
                    <input type="text" name="nama_lengkap" id="nama_lengkap" class="form-control" required value="<?= old('nama_lengkap') ?>" placeholder="Nama lengkap tanpa gelar" style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;">
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="form-group">
                    <label for="gelar_belakang" style="font-weight: 600; color: #475569;">Gelar Belakang</label>
                    <input type="text" name="gelar_belakang" id="gelar_belakang" class="form-control" value="<?= old('gelar_belakang') ?>" placeholder="Contoh: S.Kom., M.Kom." style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-3">
                <div class="form-group">
                    <label for="jenis_kelamin" style="font-weight: 600; color: #475569;">Jenis Kelamin <span class="text-danger">*</span></label>
                    <select name="jenis_kelamin" id="jenis_kelamin" class="form-control" required style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;">
                        <option value="">-- Pilih Jenis Kelamin --</option>
                        <option value="L" <?= old('jenis_kelamin') == 'L' ? 'selected' : '' ?>>Laki-laki</option>
                        <option value="P" <?= old('jenis_kelamin') == 'P' ? 'selected' : '' ?>>Perempuan</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="form-group">
                    <label for="no_hp" style="font-weight: 600; color: #475569;">No HP</label>
                    <input type="text" name="no_hp" id="no_hp" class="form-control" value="<?= old('no_hp') ?>" placeholder="Contoh: 081234567890" style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;">
                </div>
            </div>
        </div>

        <div class="form-actions" style="margin-top: 2rem; text-align: right;">
            <button type="submit" class="btn btn-primary" style="padding: 10px 20px; font-weight: 600;">
                <i class='bx bx-save'></i> Simpan Data Dosen
            </button>
        </div>

    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const jenisDosenSelect = document.getElementById('jenis_dosen');
    const nidnInput = document.getElementById('nidn');
    const reqNidn = document.getElementById('req_nidn');
    const helpNidn = document.getElementById('help_nidn');
    const emailContainer = document.getElementById('email_container');
    const emailInput = document.getElementById('email');
    
    function toggleDynamicFields() {
        if (jenisDosenSelect.value === 'Eksternal') {
            // NIDN opsional
            nidnInput.removeAttribute('required');
            reqNidn.style.display = 'none';
            helpNidn.innerText = 'Opsional untuk dosen eksternal.';
            
            // Tampilkan Email (Wajib)
            emailContainer.style.display = 'block';
            emailInput.setAttribute('required', 'required');
        } else {
            // NIDN wajib
            nidnInput.setAttribute('required', 'required');
            reqNidn.style.display = 'inline';
            helpNidn.innerText = 'Wajib diisi untuk dosen internal.';
            
            // Sembunyikan Email
            emailContainer.style.display = 'none';
            emailInput.removeAttribute('required');
            // emailInput.value = ''; // Don't clear in case they just toggled back and forth
        }
    }

    jenisDosenSelect.addEventListener('change', toggleDynamicFields);
    
    // Initial call
    toggleDynamicFields();
});
</script>

<?= $this->endSection() ?>
