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

<div class="row justify-content-center">
<div class="col-12">
<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-file-earmark-text text-primary"></i>
            <span class="fw-semibold">Surat Keterangan Aktif</span>
        </div>
        <a href="/letter" 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 $error): ?>
                <li><?= esc($error) ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
        <?php endif; ?>

        <?php if (session()->getFlashdata('error')): ?>
        <div class="alert alert-danger py-2">
            <?= esc(session()->getFlashdata('error')) ?>
        </div>
        <?php endif; ?>

        <form action="/letter/keterangan-aktif/preview" method="post">
            <?= csrf_field() ?>

            <!-- Section: Pilih Siswa -->
            <div class="mb-4">
                <h6 class="fw-semibold mb-3">
                    <i class="bi bi-person me-1"></i>Pilih Siswa
                </h6>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Cari Siswa <span class="text-danger">*</span></label>
                        <select name="student_id" id="studentSelect" class="form-select" required>
                            <option value="">-- Ketik nama / NIS untuk mencari --</option>
                            <?php if ($activeStudents): ?>
                            <?php foreach ($activeStudents as $student): ?>
                            <option value="<?= $student['id'] ?>">
                                <?= esc($student['full_name']) ?> - <?= esc($student['nis']) ?>
                            </option>
                            <?php endforeach; ?>
                            <?php endif; ?>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Section: Data Siswa (Auto-fill) -->
            <div class="mb-4">
                <h6 class="fw-semibold mb-3">
                    <i class="bi bi-person-badge me-1"></i>Data Siswa
                </h6>
                <div class="row g-3" id="studentDataSection">
                    <div class="col-md-6">
                        <label class="form-label">Nama Lengkap</label>
                        <input type="text" name="student_name" id="studentName" class="form-control" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">NIS</label>
                        <input type="text" name="student_nis" id="studentNis" class="form-control" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">NISN</label>
                        <input type="text" name="student_nisn" id="studentNisn" class="form-control" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tempat Lahir</label>
                        <input type="text" name="birth_place" id="birthPlace" class="form-control" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tanggal Lahir</label>
                        <input type="text" name="birth_date" id="birthDate" class="form-control" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Kelas</label>
                        <input type="text" name="class_name" id="className" class="form-control" readonly>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Nama Ayah</label>
                        <input type="text" name="father_name" id="fatherName" class="form-control" readonly>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Nama Ibu</label>
                        <input type="text" name="mother_name" id="motherName" class="form-control" readonly>
                    </div>
                </div>
            </div>

            <!-- Section: Data Surat -->
            <div class="mb-4">
                <h6 class="fw-semibold mb-3">
                    <i class="bi bi-envelope me-1"></i>Data Surat
                </h6>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Nomor Surat <span class="text-danger">*</span></label>
                        <input type="text" name="letter_number" class="form-control" required
                            placeholder="Contoh: xxx/MTs.11.22/PP.00.1/06/2026">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tanggal Surat <span class="text-danger">*</span></label>
                        <input type="date" name="letter_date" class="form-control" required
                            value="<?= date('Y-m-d') ?>">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Keperluan <span class="text-danger">*</span></label>
                        <textarea name="purpose" class="form-control" rows="3" required
                            placeholder="Contoh: pengurusan beasiswa, persyaratan administrasi, dll"></textarea>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="d-flex justify-content-end gap-2">
                <a href="/letter" class="btn btn-secondary">
                    <i class="bi bi-x-circle me-1"></i>Batal
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save me-1"></i>Simpan Surat
                </button>
            </div>
        </form>
    </div>
</div>
</div>
</div>

<script>
function loadStudentData() {
    const studentId = document.getElementById('studentSelect').value;
    
    if (!studentId) {
        document.getElementById('studentName').value = '';
        document.getElementById('studentNis').value = '';
        document.getElementById('studentNisn').value = '';
        document.getElementById('birthPlace').value = '';
        document.getElementById('birthDate').value = '';
        document.getElementById('className').value = '';
        document.getElementById('fatherName').value = '';
        document.getElementById('motherName').value = '';
        return;
    }

    fetch('/letter/get-student?id=' + studentId)
        .then(response => response.json())
        .then(data => {
            if (data.student) {
                const student = data.student;
                document.getElementById('studentName').value = student.full_name || '';
                document.getElementById('studentNis').value = student.nis || '';
                document.getElementById('studentNisn').value = student.nisn || '';
                document.getElementById('birthPlace').value = student.birth_place || '';
                document.getElementById('birthDate').value = student.birth_date || '';
                document.getElementById('fatherName').value = student.father_name || '';
                document.getElementById('motherName').value = student.mother_name || '';
                
                if (data.classInfo) {
                    document.getElementById('className').value = data.classInfo.grade + ' ' + data.classInfo.classroom;
                } else {
                    document.getElementById('className').value = '-';
                }
            }
        })
        .catch(error => console.error('Error:', error));
}
</script>

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

<?= $this->section('scripts') ?>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('#studentSelect').select2({
        placeholder: '-- Ketik nama / NIS untuk mencari --',
        allowClear: true,
        width: '100%',
        theme: 'bootstrap-5'
    }).on('change', loadStudentData);
});
</script>
<?= $this->endSection() ?>
