<!-- Modal: Tambah Capaian -->
<div class="modal fade" id="addCapaianModal" tabindex="-1" aria-labelledby="addCapaianModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.data-umum.demensi-kokurikuler.store') }}">
                @csrf
                <div class="modal-header bg-success bg-opacity-25">
                    <h5 class="modal-title text-dark" id="addCapaianModalLabel">Tambah Capaian - Profil Lulusan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Demensi</label>
                            <select name="nama_demensi" class="form-select" required>
                                <option value="">Pilih Demensi</option>
                                <option value="Keimanan dan Ketakwaan">Keimanan dan Ketakwaan</option>
                                <option value="Kewargaan">Kewargaan</option>
                                <option value="Penalaran Kritis">Penalaran Kritis</option>
                                <option value="Kreativitas">Kreativitas</option>
                                <option value="Kolaborasi">Kolaborasi</option>
                                <option value="Kemandirian">Kemandirian</option>
                                <option value="Kesehatan">Kesehatan</option>
                                <option value="Komunikasi">Komunikasi</option>
                            </select>
                        </div>
                            <div class="col-md-6">
                                <label class="form-label">Sub-demensi</label>
                                <select name="sub_demensi" id="subDemensiSelect" class="form-select">
                                    <option value="">Pilih Sub-demensi</option>
                                </select>
                            </div>
                        <div class="col-12">
                            <label class="form-label">Keterangan - Berkembang</label>
                            <textarea name="berkembang" class="form-control" rows="2"></textarea>
                        </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const subDemensiMap = {
                'Keimanan dan Ketakwaan': [
                    'Hubungan dengan Tuhan Yang Maha Esa',
                    'Hubungan dengan sesama manusia',
                    'Hubungan dengan lingkungan alam'
                ],
                'Kewargaan': [
                    'Kewargaan lokal',
                    'Kewargaan nasional',
                    'Kewargaan global'
                ],
                'Penalaran Kritis': [
                    'Penyampaian argumentasi',
                    'Pengambilan keputusan',
                    'Penyelesaian masalah'
                ],
                'Kreativitas': [
                    'Gagasan baru',
                    'Fleksibilitas berpikir',
                    'Karya'
                ],
                'Kolaborasi': [
                    'Peduli',
                    'Berbagi',
                    'Kerjasama'
                ],
                'Kemandirian': [
                    'Tanggung jawab',
                    'Kepemimpinan',
                    'Pengembangan diri'
                ],
                'Kesehatan': [
                    'Hidup bersih dan sehat',
                    'Kebugaran, kesehatan fisik dan kesehatan mental',
                    'Kesehatan lingkungan'
                ],
                'Komunikasi': [
                    'Menyimak',
                    'Berbicara',
                    'Membaca',
                    'Menulis'
                ]
            };

            const demensiSelect = document.querySelector('select[name="nama_demensi"]');
            const subSelect = document.getElementById('subDemensiSelect');

            function populateSubDemensi(selected) {
                // clear
                subSelect.innerHTML = '';
                const defaultOpt = document.createElement('option');
                defaultOpt.value = '';
                defaultOpt.textContent = 'Pilih Sub-demensi';
                subSelect.appendChild(defaultOpt);

                if (!selected || !subDemensiMap[selected]) return;

                subDemensiMap[selected].forEach(function (s) {
                    const opt = document.createElement('option');
                    opt.value = s;
                    opt.textContent = s;
                    subSelect.appendChild(opt);
                });
            }

            if (demensiSelect) {
                demensiSelect.addEventListener('change', function (e) {
                    populateSubDemensi(e.target.value);
                });

                // initial populate if value pre-selected
                populateSubDemensi(demensiSelect.value);
            }
        });
    </script>
                        <div class="col-12">
                            <label class="form-label">Keterangan - Cakap</label>
                            <textarea name="cakap" class="form-control" rows="2"></textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Keterangan - Mahir</label>
                            <textarea name="mahir" class="form-control" rows="2"></textarea>
                        </div>
                        <!-- Tahun Pelajaran and Semester removed per request -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan Capaian</button>
                </div>
            </form>
        </div>
    </div>
</div>
