@extends('guru.layout')

@section('title','Identitas Guru')

@section('content')
    <div style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.04)">
        <div style="padding:12px 16px;border-bottom:1px solid #f1f1f1;font-weight:700;background:#fafafa;display:flex;align-items:center;gap:8px">
            <i class="bi bi-person-badge" style="font-size:16px;color:var(--header-bg);margin-right:8px"></i>
            <span class="card-title">Identitas Guru</span>
        </div>
        <div class="card-body" style="padding:16px">
            <p style="margin:0 0 12px 0"><strong>Informasi identitas akun Anda.</strong></p>

            @auth
                <table style="width:100%;max-width:600px;border-collapse:collapse">
                    <tr><td style="padding:6px 8px;font-weight:700;width:160px">Nama</td><td style="padding:6px 8px">{{ auth()->user()->name }}</td></tr>
                    <tr><td style="padding:6px 8px;font-weight:700">Username</td><td style="padding:6px 8px">{{ auth()->user()->username }}</td></tr>
                    <tr><td style="padding:6px 8px;font-weight:700">Email</td><td style="padding:6px 8px">{{ auth()->user()->email }}</td></tr>
                    <tr><td style="padding:6px 8px;font-weight:700">Role</td><td style="padding:6px 8px">{{ auth()->user()->role }}</td></tr>
                    <tr><td colspan="2" style="padding:0 8px">
                        <hr style="border:0;border-top:1px solid #e9ecef;margin:6px 0">
                    </td></tr>
                </table>
                
                <div style="margin-top:16px;max-width:720px">
                    <div style="font-weight:700;margin-bottom:8px">Data Guru</div>
                    <!-- Success modal (shown when session success exists) -->
                    <div id="guruSaveSuccessModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:9999">
                        <div style="background:#fff;border-radius:8px;max-width:520px;width:100%;padding:18px;position:relative;box-shadow:0 8px 24px rgba(0,0,0,0.12)">
                            <button id="closeGuruSaveSuccess" style="position:absolute;right:12px;top:8px;border:none;background:transparent;font-size:18px;cursor:pointer;color:#666">&times;</button>
                            <h3 style="margin-top:0;margin-bottom:8px">Berhasil</h3>
                            <div id="guruSaveSuccessMessage" style="color:#333">{{ session('success') }}</div>
                            <div style="margin-top:12px;text-align:right">
                                <button id="okGuruSaveSuccess" style="background:var(--header-bg);color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">OK</button>
                            </div>
                        </div>
                    </div>
                    @if(session('success'))
                        <script>
                            (function(){
                                try {
                                    var m = document.getElementById('guruSaveSuccessModal');
                                    var closeBtn = document.getElementById('closeGuruSaveSuccess');
                                    var okBtn = document.getElementById('okGuruSaveSuccess');
                                    if (m) m.style.display = 'flex';
                                    if (closeBtn) closeBtn.addEventListener('click', function(){ if (m) m.style.display = 'none'; });
                                    if (okBtn) okBtn.addEventListener('click', function(){ if (m) m.style.display = 'none'; });
                                    if (m) m.addEventListener('click', function(e){ if (e.target === m) m.style.display = 'none'; });
                                } catch (e) {}
                            })();
                        </script>
                    @endif
                    <form method="POST" action="{{ route('guru.identitas.save') }}">
                        @csrf
                        <div style="display:flex;gap:32px;flex-wrap:wrap">
                            <div style="min-width:260px;flex:1">
                                <label style="display:block;font-weight:600;margin-bottom:6px">Nama Sekolah</label>
                                @php
                                    $currentSekolahId = auth()->user()->sekolah_binaan_id ?? null;
                                    $currentSekolah = null;
                                    if ($currentSekolahId && isset($sekolahs)) {
                                        $currentSekolah = $sekolahs->firstWhere('id', $currentSekolahId);
                                    }
                                @endphp

                                @if($currentSekolah)
                                    <input type="hidden" name="sekolah_binaan_id" value="{{ $currentSekolah->id }}" />
                                    <input type="text" readonly value="{{ $currentSekolah->nama_sekolah }} ({{ $currentSekolah->jenjang }})" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;background:#f8f9fa" />
                                @else
                                    <select id="sekolahSelect" name="sekolah_binaan_id" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px">
                                        <option value="">-- Pilih sekolah --</option>
                                        @if(isset($sekolahs))
                                            @foreach($sekolahs as $s)
                                                <option value="{{ $s->id }}" data-jenjang="{{ $s->jenjang }}" {{ (old('sekolah_binaan_id') ?? auth()->user()->sekolah_binaan_id) == $s->id ? 'selected' : '' }}>{{ $s->nama_sekolah }} ({{ $s->jenjang }})</option>
                                            @endforeach
                                        @endif
                                    </select>
                                @endif
                            </div>

                            <div style="min-width:160px;flex:0 0 220px">
                                <label style="display:block;font-weight:600;margin-bottom:6px">Jenjang</label>
                                <input id="jenjangField" type="text" readonly value="{{ old('jenjang') ?? (isset($sekolahs) && auth()->user()->sekolah_binaan_id ? ($sekolahs->firstWhere('id', auth()->user()->sekolah_binaan_id)->jenjang ?? '') : '') }}" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;background:#f8f9fa" />
                            </div>
                        </div>

                        <div style="display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;align-items:flex-start">
                            <div style="flex:1;min-width:180px">
                                <label style="display:block;font-weight:600;margin-bottom:6px">NIK</label>
                                <input name="nik" value="{{ old('nik') ?? auth()->user()->nik }}" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;margin-bottom:6px" />
                            </div>
                            <div style="flex:1;min-width:180px">
                                <label style="display:block;font-weight:600;margin-bottom:6px">NIP</label>
                                <input name="nip" value="{{ old('nip') ?? auth()->user()->nip }}" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;margin-bottom:6px" />
                            </div>
                            <div style="width:220px;min-width:160px">
                                <label style="display:block;font-weight:600;margin-bottom:6px">Jabatan</label>
                                <select id="jabatanSelect" name="jabatan" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;margin-bottom:6px">
                                    <option value="">-- Pilih jabatan --</option>
                                    <option value="guru_kelas" {{ (old('jabatan') ?? auth()->user()->jabatan) == 'guru_kelas' ? 'selected' : '' }}>Guru Kelas</option>
                                    <option value="guru_mapel" {{ (old('jabatan') ?? auth()->user()->jabatan) == 'guru_mapel' ? 'selected' : '' }}>Guru Mapel</option>
                                </select>
                            </div>

                            <div id="detailKelas" style="flex:0 0 260px;min-width:220px;display:none;">
                                <div style="display:flex;gap:12px;align-items:center">
                                    <div style="min-width:120px">
                                        <label style="display:block;font-weight:600;margin-bottom:6px">Kelas</label>
                                        <select id="singleKelasSelect" name="kelas" style="width:120px;padding:8px;border:1px solid #e6e6e6;border-radius:6px">
                                            <option value="">-- Pilih kelas --</option>
                                            @for($i=1;$i<=6;$i++)
                                                <option value="{{ $i }}" {{ (old('kelas') ?? auth()->user()->kelas) == (string)$i ? 'selected' : '' }}>{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div style="flex:0 0 120px">
                                        <label style="display:block;font-weight:600;margin-bottom:6px">Fase</label>
                                        @php
                                            $computedFaseKelas = \App\Models\AlurTujuanPembelajaran::kelasToFase(old('kelas') ?? auth()->user()->kelas ?? null);
                                        @endphp
                                        <input id="faseKelasField" name="fase" value="{{ old('fase') ?? $computedFaseKelas }}" readonly style="width:120px;padding:8px;border:1px solid #e6e6e6;border-radius:6px;background:#f8f9fa" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="detailMapelKelas" style="margin-top:12px;display:none">
                            <label style="display:block;font-weight:600;margin-bottom:6px">Mata Pelajaran & Kelas</label>
                            @php
                                $userKelasArr = [];
                                $rawKelas = old('kelas') ?? auth()->user()->kelas ?? '';
                                if (is_array($rawKelas)) {
                                    $userKelasArr = $rawKelas;
                                } elseif (!empty($rawKelas)) {
                                    $userKelasArr = array_filter(array_map('trim', explode(',', $rawKelas)));
                                }
                            @endphp
                            @php
                                $computedFaseMapel = null;
                                if (!empty($userKelasArr)) {
                                    $fases = [];
                                    foreach($userKelasArr as $ck) {
                                        $f = \App\Models\AlurTujuanPembelajaran::kelasToFase($ck);
                                        if (!empty($f) && !in_array($f, $fases)) $fases[] = $f;
                                    }
                                    $computedFaseMapel = count($fases) ? implode(',', $fases) : null;
                                } else {
                                    $computedFaseMapel = \App\Models\AlurTujuanPembelajaran::kelasToFase($rawKelas ?? null);
                                }
                            @endphp

                            <div style="display:flex;gap:20px;align-items:flex-start">
                                <div style="flex:0 0 300px">
                                    <label style="display:block;font-weight:600;margin-bottom:6px">Mata Pelajaran</label>
                                    <input name="mata_pelajaran" value="{{ old('mata_pelajaran') ?? auth()->user()->mata_pelajaran }}" placeholder="Mata Pelajaran" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px" />
                                </div>
                                <div style="flex:0 0 360px;margin-left:8px">
                                    <label style="display:block;font-weight:600;margin-bottom:6px">Pilih Kelas</label>
                                    <div style="display:flex;gap:12px;align-items:flex-start">
                                        <div class="kelas-click-list" style="flex:1;border:1px solid #e6e6e6;border-radius:6px;overflow:hidden;background:#fff">
                                            <div style="padding:6px 8px;border-bottom:1px solid #f1f1f1;color:#666;font-size:13px">Klik angka untuk memilih (multi)</div>
                                            <div style="display:flex;flex-wrap:nowrap;gap:8px;padding:8px;overflow-x:auto;white-space:nowrap">
                                                @foreach(range(1,12) as $k)
                                                    <div class="kc-option" data-value="{{ $k }}" style="padding:8px 12px;border:1px solid #e9ecef;border-radius:6px;cursor:pointer;background:#fff;display:inline-block;min-width:40px;text-align:center">{{ $k }}</div>
                                                @endforeach
                                            </div>
                                        </div>
                                        {{-- selected values will be added as hidden inputs by JS --}}
                                        <div style="flex:0 0 140px">
                                            <label style="display:block;font-weight:600;margin-bottom:6px">Fase</label>
                                            <input id="faseMapelField" name="fase" readonly value="{{ old('fase') ?? $computedFaseMapel }}" style="width:120px;padding:8px;border:1px solid #e6e6e6;border-radius:6px;background:#f8f9fa" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="font-size:12px;color:#666;margin-top:6px">Pilih lebih dari satu kelas dengan Ctrl/Cmd+klik atau Shift.</div>
                        </div>

                        <div style="margin-top:12px">
                            <button type="submit" style="background:var(--header-bg);color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">Simpan Data Guru</button>
                        </div>
                    </form>
                </div>
            @else
                <p>Harap login untuk melihat data.</p>
            @endauth
        </div>
    </div>
    <script>
        (function(){
            var sekolahSel = document.getElementById('sekolahSelect');
            var jenjangField = document.getElementById('jenjangField');
            var jabatanSel = document.getElementById('jabatanSelect');
            var detailKelas = document.getElementById('detailKelas');
            var detailMapelKelas = document.getElementById('detailMapelKelas');

            function setJenjangFromSekolah() {
                if (!sekolahSel) return;
                var opt = sekolahSel.options[sekolahSel.selectedIndex];
                var jj = opt ? opt.getAttribute('data-jenjang') : '';
                jenjangField.value = jj || '';
                updateKelasOptions(jj || '');
            }

            function kelasToFase(kelas){
                if(!kelas) return '';
                var m = String(kelas).match(/(\d{1,2})/);
                var n = null;
                if(m) n = parseInt(m[1],10);
                else{
                    var map = {I:1,II:2,III:3,IV:4,V:5,VI:6,VII:7,VIII:8,IX:9,X:10,XI:11,XII:12};
                    var uc = String(kelas).toUpperCase().trim();
                    n = map[uc] || null;
                }
                if(n===null) return '';
                if(n>=1 && n<=2) return 'A';
                if(n>=3 && n<=4) return 'B';
                if(n>=5 && n<=6) return 'C';
                if(n>=7 && n<=9) return 'D';
                if(n===10) return 'E';
                if(n>=11 && n<=12) return 'F';
                return '';
            }

            function getKelasListForJenjang(jenjang) {
                jenjang = (jenjang||'').toString().toLowerCase();
                if (jenjang.indexOf('sd') !== -1) return [1,2,3,4,5,6];
                if (jenjang.indexOf('smp') !== -1) return [7,8,9];
                if (jenjang.indexOf('sma') !== -1 || jenjang.indexOf('smk') !== -1) return [10,11,12];
                // fallback: full range 1-12
                return [1,2,3,4,5,6,7,8,9,10,11,12];
            }

            function updateKelasOptions(jenjang) {
                // update single-select (detailKelas)
                try {
                    var detailKelasSel = document.querySelector('#detailKelas select[name="kelas"]');
                    if (detailKelasSel) {
                        var list = getKelasListForJenjang(jenjang);
                        // rebuild options
                        detailKelasSel.innerHTML = '<option value="">-- Pilih kelas --</option>' + list.map(function(k){ return '<option value="'+k+'">'+k+'</option>'; }).join('');
                        // try to update fase for single select
                        try{ var fk = document.getElementById('faseKelasField'); if(fk){ fk.value = kelasToFase(detailKelasSel.value || ''); } }catch(e){}
                    }
                } catch(e){}

                // update clickable kelas list if present
                try {
                    var widget = document.querySelector('.kelas-click-list');
                    if (widget) {
                        var container = widget.querySelector('div.kc-container');
                        // if we didn't render kc-container, find the flex container
                        var flex = widget.querySelector('div[style*="display:flex"]');
                        var target = flex || container;
                        if (target) {
                            var list = getKelasListForJenjang(jenjang);
                            target.innerHTML = list.map(function(k){ return '<div class="kc-option" data-value="'+k+'" style="padding:6px 10px;border:1px solid #e9ecef;border-radius:6px;cursor:pointer;background:#fff">'+k+'</div>'; }).join('');
                            // re-init click handlers
                            // small delay to ensure DOM updated
                            setTimeout(function(){ initKelasClickList(); }, 20);
                        }
                    }
                } catch(e){}
            }

            function toggleJabatanFields() {
                var v = jabatanSel ? jabatanSel.value : '';
                if (v === 'guru_kelas') {
                    detailKelas.style.display = '';
                    if(detailMapelKelas) detailMapelKelas.style.display = 'none';
                } else if (v === 'guru_mapel') {
                    detailKelas.style.display = 'none';
                    if(detailMapelKelas) detailMapelKelas.style.display = '';
                } else {
                    detailKelas.style.display = 'none';
                    if(detailMapelKelas) detailMapelKelas.style.display = 'none';
                }
            }

            if (sekolahSel) {
                sekolahSel.addEventListener('change', setJenjangFromSekolah);
                // set initial
                setJenjangFromSekolah();
            } else {
                // no sekolah select (fixed sekolah): use jenjangField value to initialize kelas options
                try{ if (jenjangField) updateKelasOptions(jenjangField.value || ''); }catch(e){}
            }
            // update fase when single kelas changes
            try{
                var singleKelas = document.getElementById('singleKelasSelect');
                var faseKelas = document.getElementById('faseKelasField');
                if(singleKelas){ singleKelas.addEventListener('change', function(){ try{ if(faseKelas) faseKelas.value = kelasToFase(this.value || ''); }catch(e){} }); }
            }catch(e){}
            if (jabatanSel) {
                jabatanSel.addEventListener('change', toggleJabatanFields);
                toggleJabatanFields();
            }

            // single-select kelas: no custom multi widget

            // clickable kelas list (allow multi selection by clicking each option)
            function initKelasClickList() {
                var widget = document.querySelector('.kelas-click-list');
                if (!widget) return;
                var opts = Array.from(widget.querySelectorAll('.kc-option'));
                // initial values from server (string or array)
                var raw = @json($userKelasArr);
                var selected = [];
                if (Array.isArray(raw) && raw.length) {
                    selected = raw.map(function(x){ return String(x); });
                }

                function syncHidden() {
                    // remove existing hidden inputs
                    Array.from(widget.querySelectorAll('input[type=hidden][name="kelas[]"]')).forEach(function(i){ i.remove(); });
                    selected.forEach(function(v){
                        var inp = document.createElement('input'); inp.type='hidden'; inp.name='kelas[]'; inp.value = v; widget.appendChild(inp);
                    });
                    // update fase field for mapel kelas multi-select
                    try{
                        var faseMap = document.getElementById('faseMapelField');
                        if(faseMap){
                            var fases = [];
                            selected.forEach(function(s){ var f = kelasToFase(s); if(f && fases.indexOf(f) === -1) fases.push(f); });
                            faseMap.value = fases.join(',');
                        }
                    }catch(e){}
                }

                function render() {
                    opts.forEach(function(o){
                        var v = String(o.getAttribute('data-value'));
                        if (selected.indexOf(v) !== -1) {
                            o.style.background = '#0d6efd'; o.style.color = '#fff'; o.style.borderColor = '#0d6efd';
                        } else {
                            o.style.background = '#fff'; o.style.color = '#333'; o.style.borderColor = '#e9ecef';
                        }
                    });
                    syncHidden();
                }

                opts.forEach(function(o){
                    o.addEventListener('click', function(){
                        var v = String(o.getAttribute('data-value'));
                        var idx = selected.indexOf(v);
                        if (idx === -1) selected.push(v); else selected.splice(idx,1);
                        render();
                    });
                });

                render();
            }

            initKelasClickList();
        })();
    </script>
@endsection