<?= $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-geo-alt text-info"></i>
            <span class="fw-semibold">Surat Perjalanan Dinas (SPPD)</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; ?>

        <div class="alert alert-info py-2 small">
            <i class="bi bi-info-circle me-1"></i>
            Format nomor SPPD: <strong>{urut}/MTs.xx.xx/KP.07.4/{bulan}/{tahun}</strong>
            &nbsp;(kode KP.07.4 = Perjalanan Dinas Kepegawaian)
        </div>

        <form action="/letter/sppd/preview" method="post">
            <input type="hidden" name="teacher_id" id="teacherId">
            <?= csrf_field() ?>

            <!-- Pilih Guru -->
            <div class="mb-4">
                <h6 class="fw-semibold mb-3"><i class="bi bi-person me-1"></i>Pilih Guru / Pegawai</h6>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Cari Guru <span class="text-danger">*</span></label>
                        <select id="teacherSelect" class="form-select">
                            <option value="">-- Ketik nama untuk mencari --</option>
                            <?php foreach ($teachers as $t): ?>
                            <option value="<?= $t['id'] ?>"
                                data-name="<?= esc($t['name']) ?>"
                                data-nip="<?= esc($t['nip'] ?? '') ?>"
                                data-peg_id="<?= esc($t['peg_id'] ?? '') ?>"
                                data-status="<?= esc($t['status_kepegawaian'] ?? '') ?>"
                                data-golongan="<?= esc($t['golongan'] ?? '') ?>"
                                data-jabatan="<?= esc($t['jabatan'] ?? '') ?>"><?= esc($t['name']) ?><?php $idNum = teacher_id_number($t); ?><?= !empty($idNum) ? ' — ' . esc($idNum) : '' ?>
                            </option>
                            <?php endforeach; ?>
                        </select>
                        <div class="form-text">Pilih dari daftar, data akan terisi otomatis. Bisa diedit jika perlu.</div>
                    </div>
                </div>
            </div>

            <!-- Data Pegawai (auto-fill, editable) -->
            <div class="mb-4">
                <h6 class="fw-semibold mb-3"><i class="bi bi-person-badge me-1"></i>Data Pegawai</h6>
                <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="officer_name" id="officerName" class="form-control" required
                            value="<?= old('officer_name') ?>"
                            placeholder="Nama lengkap pegawai">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">NIP / PEG ID / NPK / NUPTK</label>
                        <input type="text" name="officer_nip" id="officerNip" class="form-control"
                            value="<?= old('officer_nip') ?>"
                            placeholder="Contoh: 197604122005011002">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Pangkat / Golongan</label>
                        <input type="text" name="officer_rank" id="officerRank" class="form-control"
                            value="<?= old('officer_rank') ?>"
                            placeholder="Contoh: Penata Muda, III/a">
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Jabatan</label>
                        <input type="text" name="officer_position" id="officerPosition" class="form-control"
                            value="<?= old('officer_position') ?>"
                            placeholder="Contoh: Guru / Kepala Madrasah / Bendahara">
                    </div>
                </div>
            </div>

            <!-- 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-5">
                        <label class="form-label">Nomor Surat <span class="text-danger">*</span></label>
                        <input type="text" name="letter_number" class="form-control" required
                            value="<?= old('letter_number') ?>"
                            placeholder="001/MTs.xx.xx/KP.07.4/06/2026">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Tanggal Surat <span class="text-danger">*</span></label>
                        <input type="date" name="letter_date" class="form-control" required
                            value="<?= old('letter_date', date('Y-m-d')) ?>">
                    </div>
                </div>
            </div>

            <!-- Detail Perjalanan -->
            <div class="mb-4">
                <h6 class="fw-semibold mb-3"><i class="bi bi-map me-1"></i>Detail Perjalanan Dinas</h6>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Keperluan / Maksud Perjalanan <span class="text-danger">*</span></label>
                        <textarea name="assignment_detail" class="form-control" rows="3" required
                            placeholder="Contoh: menghadiri Rapat Koordinasi Kepala Madrasah Tingkat Kabupaten Tahun 2026"><?= old('assignment_detail') ?></textarea>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Tempat Tujuan (Lengkap) <span class="text-danger">*</span></label>
                        <input type="text" name="assignment_place" class="form-control" required
                            value="<?= old('assignment_place') ?>"
                            placeholder="Contoh: Aula Kanwil Prov Jawa Tengah / Kantor Kemenag Kab. Wonogiri">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Kota Tujuan <span class="text-danger">*</span></label>
                        <input type="text" name="assignment_place_city" class="form-control" required
                            value="<?= old('assignment_place_city') ?>"
                            placeholder="Contoh: Samarinda / Wonogiri">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Tanggal Berangkat <span class="text-danger">*</span></label>
                        <input type="date" name="assignment_start" class="form-control" required
                            value="<?= old('assignment_start') ?>">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Tanggal Kembali <span class="text-danger">*</span></label>
                        <input type="date" name="assignment_end" class="form-control" required
                            value="<?= old('assignment_end') ?>">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Alat Angkutan <span class="text-danger">*</span></label>
                        <select name="transport_mode" class="form-select" required>
                            <option value="">-- Pilih --</option>
                            <option value="Kendaraan Dinas"      <?= old('transport_mode') === 'Kendaraan Dinas'      ? 'selected' : '' ?>>Kendaraan Dinas</option>
                            <option value="Kendaraan Pribadi"    <?= old('transport_mode') === 'Kendaraan Pribadi'    ? 'selected' : '' ?>>Kendaraan Pribadi</option>
                            <option value="Kendaraan Umum"       <?= old('transport_mode') === 'Kendaraan Umum'       ? 'selected' : '' ?>>Kendaraan Umum</option>
                            <option value="Transportasi Online"  <?= old('transport_mode') === 'Transportasi Online'  ? 'selected' : '' ?>>Transportasi Online</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Sumber Biaya</label>
                        <input type="text" name="cost_source" class="form-control"
                            value="<?= old('cost_source', $defaultBudgetSource ?? '') ?>"
                            placeholder="Contoh: DIPA / BOS / Mandiri">
                    </div>
                </div>
            </div>

            <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-info text-white">
                    <i class="bi bi-save me-1"></i>Simpan Surat
                </button>
            </div>
        </form>
    </div>
</div>
</div>
</div>

<script>
function fillTeacherData() {
    const sel = document.getElementById('teacherSelect');
    const opt = sel.options[sel.selectedIndex];
    if (!sel.value) { document.getElementById('teacherId').value = ''; return; }

    document.getElementById('teacherId').value        = sel.value;
    document.getElementById('officerName').value      = opt.dataset.name     || '';
    document.getElementById('officerNip').value       = opt.dataset.nip || opt.dataset.peg_id || '';
    document.getElementById('officerRank').value      = opt.dataset.golongan || '';
    document.getElementById('officerPosition').value  = opt.dataset.jabatan  || '';
    document.getElementById('officerPosition').focus();
}
</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() {
    $('#teacherSelect').select2({
        placeholder: '-- Ketik nama untuk mencari --',
        allowClear: true,
        width: '100%',
        theme: 'bootstrap-5'
    }).on('change', fillTeacherData);
});
</script>
<?= $this->endSection() ?>