@extends('admin.layout')

@section('title', 'Edit Capaian Demensi')

@section('content')
    <div class="card">
        <div class="card-header bg-warning text-dark">
            <h5 class="mb-0"><i class="bi bi-pencil-square me-1"></i> Edit Capaian - Profil Lulusan</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.data-umum.demensi-kokurikuler.update', $demensi->id ?? ($demensi['id'] ?? '')) }}">
                @csrf
                @method('PUT')

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Demensi</label>
                        <select name="nama_demensi" class="form-select" required>
                            @php
                                $options = [
                                    'Keimanan dan Ketakwaan','Kewargaan','Penalaran Kritis','Kreativitas','Kolaborasi','Kemandirian','Kesehatan','Komunikasi'
                                ];
                            @endphp
                            <option value="">Pilih Demensi</option>
                            @foreach($options as $opt)
                                <option value="{{ $opt }}" @if(($demensi->nama_demensi ?? ($demensi['nama_demensi'] ?? '')) === $opt) selected @endif>{{ $opt }}</option>
                            @endforeach
                        </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">{{ old('berkembang', $demensi->berkembang ?? ($demensi['berkembang'] ?? '')) }}</textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Keterangan - Cakap</label>
                        <textarea name="cakap" class="form-control" rows="2">{{ old('cakap', $demensi->cakap ?? ($demensi['cakap'] ?? '')) }}</textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Keterangan - Mahir</label>
                        <textarea name="mahir" class="form-control" rows="2">{{ old('mahir', $demensi->mahir ?? ($demensi['mahir'] ?? '')) }}</textarea>
                    </div>
                </div>

                <div class="mt-3">
                    <a href="{{ url('admin/data-umum/demensi-kokurikuler') }}" class="btn btn-secondary">Batal</a>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>

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

    @push('scripts')
        <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) {
                    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);
                    });

                    // select existing value if present
                    const existing = '{{ addslashes($demensi->sub_demensi ?? ($demensi['sub_demensi'] ?? '')) }}';
                    if (existing) {
                        Array.from(subSelect.options).forEach(function(o){ if(o.value===existing) o.selected = true; });
                    }
                }

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

                    populateSubDemensi(demensiSelect.value);
                }
            });
        </script>
    @endpush
@endsection