@extends('guru.layout')

@section('title','Capaian Pembelajaran dan ATP')

@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-folder" style="font-size:16px;color:var(--header-bg);margin-right:8px"></i>
            <span class="card-title">Capaian Pembelajaran dan ATP</span>
        </div>
        <div class="card-body" style="padding:16px">
            <h3 style="margin:0;font-weight:700">Identitas Guru</h3>

            <div style="margin-top:12px;max-width:720px">
                <div style="border:1px solid #e9ecef;border-radius:6px;overflow:hidden">
                    <table style="width:100%;border-collapse:collapse;border:0">
                    <tr>
                        <td style="padding:6px 8px;font-weight:700;width:180px;border:1px solid #e9ecef">Nama Sekolah</td>
                        <td style="padding:6px 8px;border:1px solid #e9ecef">{{ $sekolah ? $sekolah->nama_sekolah : '-' }}</td>
                    </tr>
                    <tr>
                        <td style="padding:6px 8px;font-weight:700;border:1px solid #e9ecef">Jenjang</td>
                        <td style="padding:6px 8px;border:1px solid #e9ecef">{{ $sekolah ? $sekolah->jenjang : '-' }}</td>
                    </tr>
                    <tr>
                        <td style="padding:6px 8px;font-weight:700;border:1px solid #e9ecef">Jabatan</td>
                        <td style="padding:6px 8px;border:1px solid #e9ecef">{{ auth()->user()->jabatan ?? '-' }}</td>
                    </tr>
                    @if((auth()->user()->jabatan ?? '') === 'guru_kelas')
                        <tr>
                            <td style="padding:6px 8px;font-weight:700;border:1px solid #e9ecef">Kelas yang diajar</td>
                            <td style="padding:6px 8px;border:1px solid #e9ecef">{{ auth()->user()->kelas ?? '-' }}</td>
                        </tr>
                    @elseif((auth()->user()->jabatan ?? '') === 'guru_mapel')
                        <tr>
                            <td style="padding:6px 8px;font-weight:700;border:1px solid #e9ecef">Mata Pelajaran</td>
                            <td style="padding:6px 8px;border:1px solid #e9ecef">{{ auth()->user()->mata_pelajaran ?? '-' }}</td>
                        </tr>
                    @endif
                    </table>
                </div>
            </div>
        </div>

        <div style="padding:16px;max-width:720px;margin-top:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px">
            <div style="flex:1;min-width:0">
                <h3 style="margin:0 0 8px 0;font-weight:700">Capaian Pembelajaran</h3>
                <div style="margin-top:14px">
                    <a id="openCapaianBtn" href="{{ route('guru.atp.capaians') }}" title="Isi / Lihat Capaian Pembelajaran" style="display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:#0d6efd;color:#fff;padding:6px 10px;border-radius:6px;border:1px solid #0b5ed7">
                        <span style="width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:#fff"><i class="bi bi-journal-text" aria-hidden="true" style="font-size:16px"></i></span>
                        <span style="font-weight:600;color:#fff">Isi / Lihat Capaian Pembelajaran</span>
                    </a>
                </div>
            </div>
            <div style="flex:1;min-width:0;text-align:right">
                <h3 style="margin:0 0 8px 0;font-weight:700">Tabel Alur Tujuan Pembelajaran</h3>
                <div style="margin-top:8px;display:inline-flex;justify-content:flex-end">
                    <a id="openAtpBtn" href="{{ route('guru.atp.alur') }}" title="Isi / Lihat Alur Tujuan Pembelajaran" style="display:inline-flex;align-items:center;gap:8px;text-decoration:none;transform:translateX(6px);background:#198754;color:#fff;padding:6px 10px;border-radius:6px;border:1px solid #157347">
                        <span style="width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:#fff"><i class="bi bi-journal-text" aria-hidden="true" style="font-size:16px"></i></span>
                        <span style="font-weight:600;color:#fff">Isi / Lihat Alur Tujuan Pembelajaran</span>
                    </a>
                </div>
            </div>
        </div>

        <div style="padding:16px;max-width:720px;margin-top:8px">
            
            @php
                $capaiansList = isset($capaians) ? $capaians : (isset($atps) ? $atps : collect());
            @endphp
            @php
                // build elemen map grouped by mata_pelajaran for client-side filtering
                $elemenMap = [];
                try {
                    foreach($capaiansList as $c) {
                        $mp = '';
                        if(is_array($c) || is_object($c)) {
                            $mp = $c->mata_pelajaran ?? ($c['mata_pelajaran'] ?? ($c->mapel ?? ($c['mapel'] ?? '')));
                            $el = $c->elemen ?? ($c['elemen'] ?? '');
                        } else {
                            $mp = '';
                            $el = '';
                        }
                        if(empty($mp) || empty($el)) continue;
                        if(!isset($elemenMap[$mp])) $elemenMap[$mp] = [];
                        if(!in_array($el, $elemenMap[$mp])) $elemenMap[$mp][] = $el;
                    }
                } catch (\Throwable $e) { $elemenMap = []; }
            @endphp
            
            @php
                // derive fallback from authenticated user's identity when active module lacks values
                $userKelas = auth()->user()->kelas ?? null;
                $userFase = \App\Models\AlurTujuanPembelajaran::kelasToFase($userKelas);
                // derive jenjang: prefer sekolah jenjang, else infer from kelas
                $userJenjang = null;
                if(isset($sekolah) && !empty($sekolah->jenjang)){
                    $userJenjang = $sekolah->jenjang;
                } elseif (!empty($userKelas)){
                    if(preg_match('/(\d{1,2})/', $userKelas, $m)){
                        $knum = intval($m[1]);
                    } else {
                        $romanMap = ['I'=>1,'II'=>2,'III'=>3,'IV'=>4,'V'=>5,'VI'=>6,'VII'=>7,'VIII'=>8,'IX'=>9,'X'=>10,'XI'=>11,'XII'=>12];
                        $uc = strtoupper(trim($userKelas));
                        $knum = $romanMap[$uc] ?? null;
                    }
                    if(isset($knum)){
                        if($knum >=1 && $knum <=6) $userJenjang = 'SD';
                        if($knum >=7 && $knum <=9) $userJenjang = 'SMP';
                        if($knum >=10 && $knum <=12) $userJenjang = 'SMA/SMK';
                    }
                }

                $faseInfo = (isset($activeModul) && $activeModul && !empty($activeModul->fase)) ? $activeModul->fase : ($userFase ?? '-');
                $kelasInfo = (isset($activeModul) && $activeModul && !empty($activeModul->kelas)) ? $activeModul->kelas : ($userKelas ?? '-');
                $jenjangInfo = (isset($activeModul) && $activeModul && !empty($activeModul->jenjang)) ? $activeModul->jenjang : ($userJenjang ?? '-');
                $atpCanonical = 'Tabel Alur Tujuan Pembelajaran (ATP) adalah rangkaian tujuan pembelajaran yang disusun secara sistematis dan logis dalam satu fase pembelajaran untuk mencapai Capaian Pembelajaran (CP). ATP berfungsi sebagai panduan guru dalam merencanakan pembelajaran dari yang mudah ke sulit atau dari yang sederhana ke komplek yang terarah dari awal hingga akhir fase.';
            @endphp
            <script>
                var ATP_CANONICAL = {!! json_encode($atpCanonical) !!};
                var ATP_ELEMEN_MAP = {!! json_encode($elemenMap) !!};
                (function(){
                    function updateInstructionHtml(items){
                        var textEl = document.getElementById('atp-instruction-text');
                        if(!textEl) return;
                        if(!items || !items.length){
                            textEl.innerHTML = '';
                            return;
                        }
                        // join items inline separated by \u00A0; \u00A0 (non-breaking space + semicolon)
                        var parts = [];
                        for(var i=0;i<items.length;i++){
                            var t = (items[i]||'').trim();
                            if(t) parts.push(t);
                        }
                        var joined = parts.join(' \u00B7 ');
                        textEl.innerHTML = 'Susun Tabel Alur Tujuan Pembelajaran dari Capaian Pembelajaran berikut: ' + joined + ' Tujuan Pembelajaran mengandung unsur (Audience, Behavior, Condition, Degree) yang dilengkapi dengan satu indikator pencapaian hasil belajar dalam alokasi waktu yang ditentukan. Alur tujuan pembelajaran untuk semester ganjil dan genap disusun dalam bentuk tabel resmi KOSP.';

                        
                    }

                    function scanLocalCapaian(mata, elemen){
                        var out = [];
                        try{
                            var table = document.getElementById('capaians-table');
                            if(!table) return out;
                            var rows = table.querySelectorAll('tbody tr');
                            rows.forEach(function(r){
                                var cols = r.querySelectorAll('td');
                                if(!cols || cols.length < 4) return;
                                var mapelText = cols[1] ? cols[1].innerText.trim() : '';
                                var elemenText = cols[2] ? cols[2].innerText.trim() : '';
                                var descText = cols[3] ? cols[3].innerText.trim() : '';
                                if(!descText) return;
                                if(mata && mata !== '' && mapelText !== mata) return;
                                if(elemen && elemen !== '' && elemenText !== elemen) return;
                                out.push(descText);
                            });
                            // unique
                            out = out.filter(function(v,i){ return out.indexOf(v) === i; });
                        }catch(e){ out = []; }
                        return out;
                    }

                    function fetchDescriptions(mata, elemen){
                        var params = [];
                        if(mata) params.push('mata_pelajaran='+encodeURIComponent(mata));
                        if(elemen) params.push('elemen='+encodeURIComponent(elemen));
                        var url = '/guru/atp/descriptions' + (params.length?('?'+params.join('&')):'');
                        fetch(url, { credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                            .then(function(r){ return r.json(); })
                            .then(function(json){
                                if(json && json.success && json.descriptions && json.descriptions.length){
                                    updateInstructionHtml(json.descriptions);
                                } else {
                                    // fallback: try scanning local "Daftar Capaian Pembelajaran" table on page
                                    var local = scanLocalCapaian(mata, elemen);
                                    updateInstructionHtml(local || []);
                                }
                            })
                            .catch(function(){
                                var local = scanLocalCapaian(mata, elemen);
                                updateInstructionHtml(local || []);
                            });
                    }

                    function onChange(){
                        var mapelEl = document.getElementById('searchMapel') || document.getElementById('filterMapel');
                        var elEl = document.getElementById('searchElemen') || document.getElementById('filterElemen');
                        var mata = mapelEl ? mapelEl.value : '';
                        var elemen = elEl ? elEl.value : '';
                        if(!mata && !elemen){ updateInstructionHtml([]); return; }
                        fetchDescriptions(mata, elemen);
                    }

                    document.addEventListener('DOMContentLoaded', function(){
                        var selectors = ['searchMapel','searchElemen','filterMapel','filterElemen'];
                        selectors.forEach(function(id){ var el = document.getElementById(id); if(el) el.addEventListener('change', onChange); });
                        // initial load: attempt to fetch based on current values
                        setTimeout(onChange, 300);
                        
                        // Populate Elemen selects based on selected Mata Pelajaran
                        try{
                            function populateElemenSelect(selectEl, mapelVal, preselected){
                                if(!selectEl) return;
                                selectEl.innerHTML = '<option value="">Pilih Elemen</option>';
                                var list = [];
                                if(mapelVal && ATP_ELEMEN_MAP && ATP_ELEMEN_MAP[mapelVal]){
                                    list = ATP_ELEMEN_MAP[mapelVal];
                                } else {
                                    // flatten all elemen if no mapel selected
                                    var seen = {};
                                    Object.keys(ATP_ELEMEN_MAP||{}).forEach(function(k){ (ATP_ELEMEN_MAP[k]||[]).forEach(function(e){ if(!seen[e]){ seen[e]=true; list.push(e); } }); });
                                }
                                list.forEach(function(e){ var o = document.createElement('option'); o.value = e; o.textContent = e; if(preselected && preselected === e) o.selected = true; selectEl.appendChild(o); });
                            }

                            var searchMapelEl = document.getElementById('searchMapel');
                            var searchElemenEl = document.getElementById('searchElemen');
                            var filterMapelEl = document.getElementById('filterMapel');
                            var filterElemenEl = document.getElementById('filterElemen');
                            var selectedSearchElemen = {!! json_encode(request()->query('cap_elemen') ?? (isset($selectedElemen) ? $selectedElemen : null)) !!};
                            var selectedFilterElemen = {!! json_encode(request()->query('elemen') ?? (isset($selectedElemen) ? $selectedElemen : null)) !!};
                            if(searchMapelEl && searchElemenEl){
                                populateElemenSelect(searchElemenEl, searchMapelEl.value || '', selectedSearchElemen);
                                searchMapelEl.addEventListener('change', function(){ populateElemenSelect(searchElemenEl, this.value || '', null); });
                            }
                            if(filterMapelEl && filterElemenEl){
                                populateElemenSelect(filterElemenEl, filterMapelEl.value || '', selectedFilterElemen);
                                filterMapelEl.addEventListener('change', function(){ populateElemenSelect(filterElemenEl, this.value || '', null); });
                            }
                        }catch(e){ /* ignore */ }
                    });
                })();
            </script>
        </div>
            <!-- Description removed as requested -->
            <div id="atp-instruction" style="display:flex;flex-direction:column;gap:8px;margin:6px 0 12px 0;color:#444">
                <div id="atp-instruction-line" style="display:flex;align-items:center;gap:8px">
                    <div id="atp-instruction-text" style="flex:1"></div>
                </div>
                <div style="display:flex;justify-content:flex-end"></div>
            </div>
            <!-- Header and school info removed as requested -->
            <!-- Filters removed as requested -->

            @if(!empty($selectedMapel))
            <div style="background:#fff;border:1px solid #e9ecef;border-radius:6px;padding:12px;color:#666">
                <!-- Filters removed as requested -->
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- Modal (single reusable) -->
    <div id="atpModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:9999;align-items:center;justify-content:center"> 
        <div style="background:#fff;border-radius:8px;max-width:720px;width:95%;padding:16px;box-shadow:0 6px 24px rgba(0,0,0,0.2);position:relative">
            <button id="atpModalClose" style="position:absolute;right:12px;top:12px;border:none;background:transparent;font-size:18px;cursor:pointer">×</button>
            <h3 id="atpModalTitle" style="margin-top:0">Judul</h3>
            <div id="atpModalBody" style="margin-top:8px;color:#333">
                <!-- Dynamic content inserted by JS -->
            </div>
        </div>
    </div>

    <script>
        (function(){
            function qs(sel){return document.querySelector(sel)}
            function qsa(sel){return Array.from(document.querySelectorAll(sel))}

            var modal = qs('#atpModal');
            var modalTitle = qs('#atpModalTitle');
            var modalBody = qs('#atpModalBody');
            var closeBtn = qs('#atpModalClose');

            function openModal(title, html){
                modalTitle.textContent = title;
                modalBody.innerHTML = html;
                modal.style.display = 'flex';
            }
            function closeModal(){ modal.style.display = 'none'; modalBody.innerHTML=''; }

            closeBtn.addEventListener('click', closeModal);
            modal.addEventListener('click', function(e){ if(e.target===modal) closeModal(); });

            qsa('.btn-action').forEach(function(btn){
                btn.addEventListener('click', function(){
                    var action = btn.getAttribute('data-action');
                    if(action === 'export'){
                        var html = '' +
                            '<p>Pilih format ekspor:</p>' +
                            '<ul style="list-style:none;padding:0;margin:0;display:flex;gap:8px">' +
                                '<li><a href="' + (window.location.pathname.replace(/\/$/, '') + '/export?format=csv') + '" class="btn" style="padding:8px 12px;border-radius:6px;border:1px solid #e07a15;background:#fd7e14;text-decoration:none;color:#fff">CSV</a></li>' +
                                '<li><a href="' + (window.location.pathname.replace(/\/$/, '') + '/export?format=xlsx') + '" class="btn" style="padding:8px 12px;border-radius:6px;border:1px solid #157347;background:#198754;text-decoration:none;color:#fff">XLSX</a></li>' +
                                '<li><a href="' + (window.location.pathname.replace(/\/$/, '') + '/export?format=docx') + '" class="btn" style="padding:8px 12px;border-radius:6px;border:1px solid #0b5ed7;background:#0d6efd;text-decoration:none;color:#fff">DOCX</a></li>' +
                            '</ul>';
                        openModal('Ekspor Tabel Alur Tujuan Pembelajaran', html);
                    } else if(action === 'template'){
                        var html = '' +
                            '<p>Download template kosong untuk diisi (format):</p>' +
                            '<ul style="list-style:none;padding:0;margin:0;display:flex;gap:8px">' +
                                '<li><a href="' + (window.location.pathname.replace(/\/$/, '') + '/template?format=csv') + '" class="btn" style="padding:8px 12px;border-radius:6px;border:1px solid #e07a15;background:#fd7e14;text-decoration:none;color:#fff">CSV</a></li>' +
                                '<li><a href="' + (window.location.pathname.replace(/\/$/, '') + '/template?format=xlsx') + '" class="btn" style="padding:8px 12px;border-radius:6px;border:1px solid #157347;background:#198754;text-decoration:none;color:#fff">XLSX</a></li>' +
                                '<li><a href="' + (window.location.pathname.replace(/\/$/, '') + '/template?format=docx') + '" class="btn" style="padding:8px 12px;border-radius:6px;border:1px solid #0b5ed7;background:#0d6efd;text-decoration:none;color:#fff">DOCX</a></li>' +
                            '</ul>';
                        openModal('Download Template ATP', html);
                    } else if(action === 'import'){
                        var html = '' +
                            '<p>Unggah file untuk di-import (CSV, XLSX, DOCX):</p>' +
                            '<form method="POST" action="' + (window.location.pathname.replace(/\/$/, '') + '/import') + '" enctype="multipart/form-data">' +
                                '<input type="hidden" name="_token" value="' + (document.querySelector('meta[name=csrf-token]') ? document.querySelector('meta[name=csrf-token]').getAttribute('content') : '') + '">' +
                                '<div style="margin:8px 0"><input type="file" name="file" accept=".csv,.xlsx,.docx" required></div>' +
                                '<div style="margin-top:12px;display:flex;gap:8px">' +
                                    '<button type="submit" style="padding:8px 12px;border-radius:6px;border:1px solid #0b5ed7;background:#0d6efd;color:#fff;cursor:pointer">Upload & Import</button>' +
                                    '<button type="button" id="atpCancelImport" style="padding:8px 12px;border-radius:6px;border:1px solid #ced4da;background:#fff;cursor:pointer">Batal</button>' +
                                '</div>' +
                            '</form>';
                        openModal('Import Tabel Alur Tujuan Pembelajaran', html);
                        setTimeout(function(){
                            var cancel = document.getElementById('atpCancelImport');
                            if(cancel) cancel.addEventListener('click', function(){ closeModal(); });
                        }, 10);
                    }
                });
            });

            // select-all checkbox
            var selectAll = qs('#atpSelectAll');
            if(selectAll){
                selectAll.addEventListener('change', function(){
                    var checked = !!this.checked;
                    qsa('input.atp-select').forEach(function(cb){ cb.checked = checked; });
                });
            }

            var deleteBtn = qs('#atpDeleteBtn');
            if(deleteBtn){
                deleteBtn.addEventListener('click', function(){
                    var selected = qsa('input.atp-select:checked').map(function(cb){ return cb.value; });
                    if(!selected.length){
                        openModal('Hapus', '<p>Tidak ada data terseleksi.</p>');
                        return;
                    }
                    if(!confirm('Hapus ' + selected.length + ' baris terpilih?')) return;

                    var url = window.location.pathname.replace(/\/$/, '') + '/delete';
                    fetch(url, {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') ? document.querySelector('meta[name=csrf-token]').getAttribute('content') : '')
                        },
                        body: JSON.stringify({ ids: selected })
                    }).then(function(res){
                        return res.json();
                    }).then(function(json){
                        if(json && json.success){
                            location.reload();
                        } else {
                            openModal('Gagal', '<p>' + (json.message || 'Gagal menghapus data.') + '</p>');
                        }
                    }).catch(function(){
                        openModal('Gagal', '<p>Terjadi kesalahan saat menghapus.</p>');
                    });
                });
            }

            // Explicit handler for ATP Add button (id: atpAddBtn)
            var atpAddBtn = qs('#atpAddBtn');
            if(atpAddBtn){
                atpAddBtn.addEventListener('click', function(){
                    // reuse logic from generic handler: insert editable row into ATP table
                    var sampleCb = document.querySelector('input.atp-select');
                    var tableEl = sampleCb ? sampleCb.closest('table') : document.querySelector('table');
                    if(!tableEl){ openModal('Error', '<p>Tabel ATP tidak ditemukan.</p>'); return; }
                    var tbody = tableEl.querySelector('tbody');
                    if(!tbody) { openModal('Error', '<p>Tabel ATP tidak ditemukan.</p>'); return; }
                    if(tbody.querySelector('tr.new-atp-row')) return;
                    var tr = document.createElement('tr');
                    tr.className = 'new-atp-row';
                    tr.innerHTML = '' +
                        '<td style="padding:8px 10px;border:1px solid #e9ecef;text-align:center">-</td>' +
                        '<td style="padding:8px 10px;border:1px solid #e9ecef"><input name="new_mapel" style="box-sizing:border-box;display:block;width:100%;padding:6px;border:1px solid #e6e6e6;border-radius:4px"></td>' +
                        '<td style="padding:8px 10px;border:1px solid #e9ecef"><input name="new_elemen" style="box-sizing:border-box;display:block;width:100%;padding:6px;border:1px solid #e6e6e6;border-radius:4px"></td>' +
                        '<td style="padding:8px 10px;border:1px solid #e9ecef">' +
                            '<textarea name="new_tujuan" rows="2" style="box-sizing:border-box;display:block;width:100%;padding:6px;border:1px solid #e6e6e6;border-radius:4px"></textarea>' +
                            '<div style="margin-top:6px;display:flex;gap:6px">' +
                                '<button type="button" class="saveAtp" style="padding:6px 8px;background:#198754;color:#fff;border:none;border-radius:4px;cursor:pointer">Simpan</button>' +
                                '<button type="button" class="cancelAtp" style="padding:6px 8px;background:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer">Batal</button>' +
                            '</div>' +
                        '</td>' +
                        '<td style="padding:8px 10px;border:1px solid #e9ecef"><input name="new_alokasi" style="box-sizing:border-box;display:block;width:100%;padding:6px;border:1px solid #e6e6e6;border-radius:4px"></td>';
                    tbody.insertBefore(tr, tbody.firstChild);
                    var saveBtn = tr.querySelector('.saveAtp');
                    var cancelBtn = tr.querySelector('.cancelAtp');
                    cancelBtn.addEventListener('click', function(){ if(tr && tr.parentNode) tr.parentNode.removeChild(tr); });
                    saveBtn.addEventListener('click', function(){
                        var mp = tr.querySelector('input[name="new_mapel"]').value.trim();
                        var elVal = tr.querySelector('input[name="new_elemen"]').value.trim();
                        var tujuan = tr.querySelector('textarea[name="new_tujuan"]').value.trim();
                        var alokasi = tr.querySelector('input[name="new_alokasi"]').value.trim();
                        if(!mp && !elVal && !tujuan){ alert('Isi minimal satu field.'); return; }
                        var url = window.location.pathname.replace(/\/$/, '') + '/store';
                        fetch(url, {
                            method: 'POST',
                            credentials: 'same-origin',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') ? document.querySelector('meta[name=csrf-token]').getAttribute('content') : '')
                            },
                            body: JSON.stringify({ mata_pelajaran: mp, elemen: elVal, tujuan_pembelajaran: tujuan, alokasi_waktu: alokasi })
                        }).then(function(res){ return res.json(); }).then(function(json){
                            if(json && json.success){ location.reload(); return; }
                            alert(json && json.message ? json.message : 'Gagal menyimpan data.');
                        }).catch(function(){ alert('Terjadi kesalahan saat menyimpan.'); });
                    });
                });
            }

            // auto-submit filter form when tahun/semester changes
            var filterForm = qs('#atpFilterForm');
            var filterTahun = qs('#filterTahun');
            var filterSemester = qs('#filterSemester');
            if(filterForm){
                if(filterTahun){
                    filterTahun.addEventListener('change', function(){ filterForm.submit(); });
                }

            // Inline editing for Tujuan, Indikator, Alokasi Waktu
            function makeCellEditable(td, fieldName){
                if(!td) return;
                var original = td.innerText || '';
                var id = td.closest('tr') ? (td.closest('tr').querySelector('input.atp-select') ? td.closest('tr').querySelector('input.atp-select').value : td.closest('tr').dataset.id || '') : '';
                if(!id){
                    // try data-id on row
                    var tr = td.closest('tr');
                    id = tr ? (tr.getAttribute('data-id') || '') : '';
                }
                var input;
                if(fieldName === 'tujuan_pembelajaran' || fieldName === 'indikator'){
                    input = document.createElement('textarea'); input.rows = 3;
                } else {
                    input = document.createElement('input'); input.type = 'text';
                }
                input.style.boxSizing = 'border-box'; input.style.width = '100%'; input.value = original.trim();
                var saveBtn = document.createElement('button'); saveBtn.textContent = 'Simpan'; saveBtn.style.marginTop = '6px'; saveBtn.style.marginRight='6px';
                var cancelBtn = document.createElement('button'); cancelBtn.textContent = 'Batal'; cancelBtn.style.marginTop = '6px';
                var wrapper = document.createElement('div'); wrapper.appendChild(input); var ctrl = document.createElement('div'); ctrl.style.marginTop='6px'; ctrl.appendChild(saveBtn); ctrl.appendChild(cancelBtn); wrapper.appendChild(ctrl);
                td.innerHTML = ''; td.appendChild(wrapper);

                cancelBtn.addEventListener('click', function(){ td.innerText = original; });
                saveBtn.addEventListener('click', function(){
                    var newVal = input.value.trim();
                    if(newVal === original.trim()) { td.innerText = original; return; }
                    // prepare payload
                    var payload = { id: id };
                    payload[fieldName] = newVal;
                    var tokenEl = document.querySelector('meta[name=csrf-token]');
                    var token = tokenEl ? tokenEl.getAttribute('content') : '';
                    fetch('/guru/atp/update', {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token, 'X-Requested-With':'XMLHttpRequest' },
                        body: JSON.stringify(payload)
                    }).then(function(r){ return r.json(); }).then(function(json){
                        if(json && json.success){ td.innerText = newVal; } else { alert(json && json.message ? json.message : 'Gagal menyimpan.'); td.innerText = original; }
                    }).catch(function(){ alert('Gagal menyimpan.'); td.innerText = original; });
                });
            }

            // Attach double-click handlers to editable columns after DOM ready
            document.addEventListener('DOMContentLoaded', function(){
                var table = document.querySelector('#atpSelectAll') ? document.querySelector('#atpSelectAll').closest('table') : document.querySelector('table');
                if(!table) return;
                Array.from(table.querySelectorAll('tbody tr')).forEach(function(tr){
                    // ensure row has an id value accessible: set data-id for ease
                    var idInput = tr.querySelector('input.atp-select');
                    if(idInput) tr.setAttribute('data-id', idInput.value);
                    var cells = tr.querySelectorAll('td');
                    if(!cells || cells.length < 6) return;
                    // columns: 0=checkbox,1=mapel,2=elemen,3=tujuan,4=indikator,5=alokasi
                    var tujuanTd = cells[3];
                    var indikatorTd = cells[4];
                    var alokasiTd = cells[5];
                    if(tujuanTd) tujuanTd.addEventListener('dblclick', function(){ makeCellEditable(tujuanTd, 'tujuan_pembelajaran'); });
                    if(indikatorTd) indikatorTd.addEventListener('dblclick', function(){ makeCellEditable(indikatorTd, 'indikator'); });
                    if(alokasiTd) alokasiTd.addEventListener('dblclick', function(){ makeCellEditable(alokasiTd, 'alokasi_waktu'); });
                });
            });
                if(filterSemester){
                    filterSemester.addEventListener('change', function(){ filterForm.submit(); });
                }
                var filterMapel = qs('#filterMapel');
                if(filterMapel){
                    filterMapel.addEventListener('change', function(){ filterForm.submit(); });
                }
                var filterElemen = qs('#filterElemen');
                if(filterElemen){
                    filterElemen.addEventListener('change', function(){ filterForm.submit(); });
                }
            }
        })();
    </script>
    
        <script>
        (function(){
            var table = document.getElementById('capaians-table');
            var inputMapel = document.getElementById('searchMapel');
            var inputElemen = document.getElementById('searchElemen');
            var addBtn = document.getElementById('capaiansAdd');
            var importBtn = document.getElementById('capaiansImport');
            var exportBtn = document.getElementById('capaiansExport');
            var templateBtn = document.getElementById('capaiansTemplate');
            var deleteBtn = document.getElementById('capaiansDelete');
            var selectAll = document.getElementById('capaiansSelectAll');

            function filter(){
                if(!table) return;
                var mp = (inputMapel && inputMapel.value.trim().toLowerCase()) || '';
                var el = (inputElemen && inputElemen.value.trim().toLowerCase()) || '';
                Array.from(table.querySelectorAll('tbody tr')).forEach(function(tr){
                    var cols = tr.querySelectorAll('td');
                    var txtMapel = (cols[1] && cols[1].innerText || '').toLowerCase();
                    var txtElemen = (cols[2] && cols[2].innerText || '').toLowerCase();
                    // only show rows when BOTH Mata Pelajaran and Elemen are selected
                    if(!mp || !el){
                        tr.style.display = 'none';
                        return;
                    }
                    var ok = true;
                    if(txtMapel.indexOf(mp) === -1) ok = false;
                    if(txtElemen.indexOf(el) === -1) ok = false;
                    tr.style.display = ok ? '' : 'none';
                });
            }

            function submitCapaiansFilter(){
                try{
                    var params = new URLSearchParams(window.location.search);
                    var mp = (inputMapel && inputMapel.value) ? String(inputMapel.value) : '';
                    var el = (inputElemen && inputElemen.value) ? String(inputElemen.value) : '';
                    // use isolated param names so ATP filters are not affected
                    if(mp) params.set('cap_mapel', mp); else params.delete('cap_mapel');
                    if(el) params.set('cap_elemen', el); else params.delete('cap_elemen');
                    // navigate to same path with updated query (triggers server to load capaian)
                    window.location.search = params.toString();
                }catch(e){ console.error(e); }
            }

            if(inputMapel) { inputMapel.addEventListener('input', filter); inputMapel.addEventListener('change', function(){ filter(); if(inputMapel.value && inputElemen && inputElemen.value) submitCapaiansFilter(); }); }
            if(inputElemen) { inputElemen.addEventListener('input', filter); inputElemen.addEventListener('change', function(){ filter(); if(inputMapel && inputMapel.value && inputElemen.value) submitCapaiansFilter(); }); }
            // clear button removed; users can clear fields manually or use backspace

            if(selectAll){
                selectAll.addEventListener('change', function(){
                    var checked = !!this.checked;
                    Array.from(document.querySelectorAll('.capaians-select')).forEach(function(cb){ cb.checked = checked; });
                });
            }

            // apply initial filtering on load (hide rows until both selections made)
            try{ filter(); }catch(e){ }

            if(deleteBtn){
                deleteBtn.addEventListener('click', function(){
                    var selected = Array.from(document.querySelectorAll('.capaians-select:checked')).map(function(cb){ return cb.value; });
                    if(!selected.length){ alert('Tidak ada baris terseleksi.'); return; }
                    if(!confirm('Hapus ' + selected.length + ' baris terpilih?')) return;
                    // Try server-side delete endpoint first
                    var url = window.location.pathname.replace(/\/$/, '') + '/delete';
                        fetch(url, {
                            method: 'POST',
                            credentials: 'same-origin',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') ? document.querySelector('meta[name=csrf-token]').getAttribute('content') : '')
                            },
                            body: JSON.stringify({ ids: selected })
                        }).then(function(res){ return res.json(); }).then(function(json){
                        if(json && json.success){ location.reload(); return; }
                        // fallback: remove rows client-side
                        Array.from(document.querySelectorAll('.capaians-select:checked')).forEach(function(cb){ var tr = cb.closest('tr'); if(tr && tr.parentNode) tr.parentNode.removeChild(tr); });
                    }).catch(function(){
                        // fallback: remove rows client-side
                        Array.from(document.querySelectorAll('.capaians-select:checked')).forEach(function(cb){ var tr = cb.closest('tr'); if(tr && tr.parentNode) tr.parentNode.removeChild(tr); });
                    });
                });
            }

            // Open Capaian-specific modal/actions (do NOT reuse ATP buttons/endpoints)
            function openCapaianAction(action){
                var modal = document.getElementById('atpModal');
                var title = action === 'export' ? 'Ekspor Capaian Pembelajaran' : (action === 'template' ? 'Download Template Capaian' : 'Import Capaian Pembelajaran');
                var base = window.location.pathname.replace(/\/$/, '');
                var body = '';
                if(action === 'import'){
                    body = '<p>Unggah file untuk di-import (CSV, XLSX):</p>' +
                        '<form method="POST" action="' + (base + '/capaians/import') + '" enctype="multipart/form-data">' +
                        '<input type="hidden" name="_token" value="' + (document.querySelector('meta[name=csrf-token]') ? document.querySelector('meta[name=csrf-token]').getAttribute('content') : '') + '">' +
                        '<div style="margin:8px 0"><input type="file" name="file" accept=".csv,.xlsx" required></div>' +
                        '<div style="margin-top:8px"><button type="submit" style="padding:8px 12px;border-radius:6px;background:#0d6efd;color:#fff;border:none">Upload & Import</button></div>' +
                        '</form>';
                } else {
                    var urlPath = (action === 'template') ? (base + '/capaians/template') : (base + '/capaians/export');
                    body = '<p>Pilih format unduhan:</p>' +
                        '<div style="display:flex;gap:8px">' +
                        '<a href="' + (urlPath + '?format=csv') + '" class="btn" style="padding:8px 12px;border-radius:6px;background:#fd7e14;color:#fff;text-decoration:none">CSV</a>' +
                        '<a href="' + (urlPath + '?format=xlsx') + '" class="btn" style="padding:8px 12px;border-radius:6px;background:#198754;color:#fff;text-decoration:none">XLSX</a>' +
                        '<a href="' + (urlPath + '?format=docx') + '" class="btn" style="padding:8px 12px;border-radius:6px;background:#0d6efd;color:#fff;text-decoration:none">DOCX</a>' +
                        '</div>';
                }
                if(modal){
                    document.getElementById('atpModalTitle').textContent = title;
                    document.getElementById('atpModalBody').innerHTML = body;
                    modal.style.display = 'flex';
                    var close = document.getElementById('atpModalClose');
                    if(close) close.addEventListener('click', function(){ modal.style.display='none'; document.getElementById('atpModalBody').innerHTML=''; });
                } else {
                    alert('Aksi ' + action + ' tidak tersedia.');
                }
            }

            if(importBtn) importBtn.addEventListener('click', function(){ openCapaianAction('import'); });
            if(exportBtn) exportBtn.addEventListener('click', function(){ openCapaianAction('export'); });
            if(templateBtn) templateBtn.addEventListener('click', function(){ openCapaianAction('template'); });

            if(addBtn){
                addBtn.addEventListener('click', function(){
                    if(!table) return;
                    var tbody = table.querySelector('tbody');
                    var tr = document.createElement('tr');
                    tr.innerHTML = '<td style="padding:8px 10px;border:1px solid #e9ecef;text-align:center">-</td>' +
                                   '<td style="padding:8px 10px;border:1px solid #e9ecef"><input type="text" name="new_mapel" style="box-sizing:border-box;display:block;width:100%;max-width:100%;padding:6px;border:1px solid #e6e6e6;border-radius:4px"></td>' +
                                   '<td style="padding:8px 10px;border:1px solid #e9ecef"><input type="text" name="new_elemen" style="box-sizing:border-box;display:block;width:100%;max-width:100%;padding:6px;border:1px solid #e6e6e6;border-radius:4px"></td>' +
                                   '<td style="padding:8px 10px;border:1px solid #e9ecef"><textarea name="new_deskripsi" rows="2" style="box-sizing:border-box;display:block;width:100%;max-width:100%;padding:6px;border:1px solid #e6e6e6;border-radius:4px"></textarea><div style="margin-top:6px"><button type="button" class="saveNew" style="padding:6px 8px;background:#198754;color:#fff;border:none;border-radius:4px;cursor:pointer;margin-right:6px">Simpan</button><button type="button" class="cancelNew" style="padding:6px 8px;background:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer">Batal</button></div></td>';
                    tbody.insertBefore(tr, tbody.firstChild);
                    // handler save/cancel
                    tr.querySelector('.cancelNew').addEventListener('click', function(){ if(tr && tr.parentNode) tr.parentNode.removeChild(tr); });
                    tr.querySelector('.saveNew').addEventListener('click', function(){
                        var mp = tr.querySelector('input[name="new_mapel"]').value.trim();
                        var el = tr.querySelector('input[name="new_elemen"]').value.trim();
                        var ds = tr.querySelector('textarea[name="new_deskripsi"]').value.trim();
                        if(!mp && !el && !ds){ alert('Isi minimal satu field.'); return; }
                        // try server save
                        var url = window.location.pathname.replace(/\/$/, '') + '/capaians/add';
                        fetch(url, {
                            method: 'POST',
                            credentials: 'same-origin',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') ? document.querySelector('meta[name=csrf-token]').getAttribute('content') : '')
                            },
                            body: JSON.stringify({ mata_pelajaran: mp, elemen: el, deskripsi: ds })
                        }).then(function(res){ return res.json(); }).then(function(json){
                            if(json && json.success){ location.reload(); return; }
                            // fallback: render non-edit row
                            tr.innerHTML = '<td style="padding:8px 10px;border:1px solid #e9ecef;text-align:center">-</td>' +
                                '<td style="padding:8px 10px;border:1px solid #e9ecef">'+(mp||'-')+'</td>' +
                                '<td style="padding:8px 10px;border:1px solid #e9ecef">'+(el||'-')+'</td>' +
                                '<td style="padding:8px 10px;border:1px solid #e9ecef">'+(ds||'-')+'</td>';
                        }).catch(function(){
                            tr.innerHTML = '<td style="padding:8px 10px;border:1px solid #e9ecef;text-align:center">-</td>' +
                                '<td style="padding:8px 10px;border:1px solid #e9ecef">'+(mp||'-')+'</td>' +
                                '<td style="padding:8px 10px;border:1px solid #e9ecef">'+(el||'-')+'</td>' +
                                '<td style="padding:8px 10px;border:1px solid #e9ecef">'+(ds||'-')+'</td>';
                        });
                    });
                });
            }
        })();
    </script>
    <script>
    (function(){
        var btn = document.getElementById('capaiansDelete');
        if(!btn) return;
        btn.addEventListener('click', function(ev){
            try{ ev.preventDefault(); }catch(e){}
            var selected = Array.from(document.querySelectorAll('.capaians-select:checked')).map(function(cb){ return cb.value; });
            if(!selected.length){ alert('Tidak ada baris terseleksi.'); return; }
            if(!confirm('Hapus ' + selected.length + ' baris terpilih?')) return;
            var url = window.location.pathname.replace(/\/$/, '') + '/capaians/delete';
            fetch(url, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') ? document.querySelector('meta[name=csrf-token]').getAttribute('content') : '')
                },
                body: JSON.stringify({ ids: selected })
            }).then(function(res){ return res.json(); }).then(function(json){
                if(json && json.success){ location.reload(); return; }
                alert(json && json.message ? json.message : 'Gagal menghapus data.');
            }).catch(function(){ alert('Terjadi kesalahan saat menghapus.'); });
        }, true);
    })();
    </script>
@endsection