@extends('guru.layout')

@section('title','Pengelolaan Capaian Pembelajaran')

@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);padding:16px">
        <div style="margin-bottom:12px">
            <div style="margin:-16px -16px 12px -16px;padding:12px 16px;background:#0d6efd;color:#fff;border-top-left-radius:8px;border-top-right-radius:8px;display:flex;align-items:center;gap:10px">
                <i class="bi bi-journal-text" style="font-size:18px;color:#fff;flex:0 0 auto"></i>
                <h3 style="margin:0;font-weight:700;color:#fff">Pengelolaan Capaian Pembelajaran</h3>
            </div>
            <div style="display:flex;gap:8px;margin-top:10px;flex-wrap:wrap">
                <a href="{{ route('guru.atp') }}" class="btn" style="padding:8px 10px;border-radius:6px;border:1px solid #dc3545;background:#dc3545;color:#fff;text-decoration:none;display:inline-flex;align-items:center"><i class="bi bi-arrow-left" style="margin-right:8px"></i>Kembali</a>
                <a href="{{ route('guru.atp.capaians.export') }}" class="btn" style="padding:8px 10px;border-radius:6px;border:1px solid #e07a15;background:#fd7e14;color:#fff;text-decoration:none;display:inline-flex;align-items:center"><i class="bi bi-file-earmark-arrow-down" style="margin-right:8px"></i>Ekspor</a>
                <a href="{{ route('guru.atp.capaians.template') }}" class="btn" style="padding:8px 10px;border-radius:6px;border:1px solid #0b5ed7;background:#0d6efd;color:#fff;text-decoration:none;display:inline-flex;align-items:center"><i class="bi bi-file-earmark-text" style="margin-right:8px"></i>Template</a>
                <a href="#" id="capaiansImportLink" class="btn" style="padding:8px 10px;border-radius:6px;border:1px solid #157347;background:#198754;color:#fff;text-decoration:none;display:inline-flex;align-items:center"><i class="bi bi-file-earmark-arrow-up" style="margin-right:8px"></i>Import</a>
                <button id="capaiansAddBtn" type="button" style="padding:8px 10px;border-radius:6px;border:none;background:#6f42c1;color:#fff;cursor:pointer;display:inline-flex;align-items:center"><i class="bi bi-plus-lg" style="margin-right:8px"></i>Tambah</button>
                <button id="capaiansDeleteBtn" type="button" style="padding:8px 10px;border-radius:6px;border:none;background:#dc3545;color:#fff;cursor:pointer;display:inline-flex;align-items:center"><i class="bi bi-trash" style="margin-right:8px"></i>Hapus Terpilih</button>
                <button id="capaiansSendBtn" type="button" title="Kirim" style="padding:8px 10px;border-radius:6px;border:1px solid #6c757d;background:#6c757d;color:#fff;cursor:pointer;display:inline-flex;align-items:center;margin-left:6px"><i class="bi bi-send" style="margin-right:8px"></i>Kirim</button>
            </div>
        </div>

        <div style="margin-top:12px">
            <h4 style="margin:0 0 12px 0;font-weight:800;font-size:20px">Daftar Capaian Pembelajaran</h4>
            <div style="margin-bottom:10px;color:#444;display:flex;gap:12px;flex-wrap:wrap;align-items:center">
                <div><strong>Nama Sekolah:</strong> {{ isset($sekolah) && !empty($sekolah->nama_sekolah) ? $sekolah->nama_sekolah : '-' }}</div>
                <div><strong>Jenjang:</strong> {{ $jenjangInfo ?? '-' }}</div>
                <div><strong>Fase:</strong> {{ $faseInfo ?? '-' }}</div>
            </div>
            <div style="background:#fff;border:1px solid #e9ecef;border-radius:6px;padding:12px;color:#666">
                <div style="overflow:auto">
                    <div style="border-radius:6px;overflow:hidden">
                        <table id="capaiansTable" style="width:100%;border-collapse:collapse;border:0">
                            <thead>
                                <tr style="background:#f8f9fa;text-align:center">
                                    <th style="padding:8px 10px;border:1px solid #e9ecef;width:40px"><input id="capaiansSelectAll" type="checkbox"></th>
                                    <th style="padding:8px 10px;border:1px solid #e9ecef">ID</th>
                                    <th style="padding:8px 10px;border:1px solid #e9ecef">Mata Pelajaran</th>
                                    <th style="padding:8px 10px;border:1px solid #e9ecef">Elemen</th>
                                    <th style="padding:8px 10px;border:1px solid #e9ecef">Deskripsi</th>
                                    <th style="padding:8px 10px;border:1px solid #e9ecef;width:120px">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($capaians) && count($capaians))
                                    @foreach($capaians as $c)
                                        <tr data-id="{{ $c->id }}">
                                            <td style="padding:8px 10px;border:1px solid #e9ecef;text-align:center"><input class="capaians-select" type="checkbox" value="{{ $c->id }}"></td>
                                            <td style="padding:8px 10px;border:1px solid #e9ecef;text-align:center">{{ $c->id ?? '-' }}</td>
                                            <td style="padding:8px 10px;border:1px solid #e9ecef">{{ $c->mata_pelajaran ?? '-' }}</td>
                                            <td style="padding:8px 10px;border:1px solid #e9ecef">{{ $c->elemen ?? '-' }}</td>
                                            <td style="padding:8px 10px;border:1px solid #e9ecef">{{ $c->deskripsi ?? '-' }}</td>
                                            <td style="padding:8px 10px;border:1px solid #e9ecef;text-align:center">
                                                <button type="button" class="capaians-edit" data-id="{{ $c->id }}" style="padding:6px 8px;border-radius:6px;border:none;background:#0d6efd;color:#fff;cursor:pointer;margin-right:6px;display:inline-flex;align-items:center"><i class="bi bi-pencil" style="margin-right:6px"></i>Edit</button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td style="padding:8px 10px;border:1px solid #e9ecef;text-align:center">-</td>
                                        <td style="padding:8px 10px;border:1px solid #e9ecef">-</td>
                                        <td style="padding:8px 10px;border:1px solid #e9ecef">-</td>
                                        <td style="padding:8px 10px;border:1px solid #e9ecef">-</td>
                                        <td style="padding:8px 10px;border:1px solid #e9ecef">Belum ada data Capaian Pembelajaran.</td>
                                        <td style="padding:8px 10px;border:1px solid #e9ecef"></td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <form id="capaiansImportForm" method="POST" action="{{ route('guru.atp.capaians.import') }}" enctype="multipart/form-data" style="display:none;margin-top:12px">
            @csrf
            <input type="file" name="file" accept=".csv,.xlsx,.docx" required>
            <button type="submit" style="padding:8px 10px;border-radius:6px;border:1px solid #0d6efd;background:#0d6efd;color:#fff;margin-left:8px">Upload & Import</button>
        </form>
    
        <!-- Modal for add/edit -->
        <div id="capaiansModal" 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">
                <div style="margin:-16px -16px 8px -16px;padding:12px 16px;background:#0d6efd;color:#fff;border-top-left-radius:8px;border-top-right-radius:8px;display:flex;align-items:center;justify-content:space-between">
                    <h3 id="capaiansModalTitle" style="margin:0;font-weight:700;font-size:16px">Tambah Capaian</h3>
                    <button id="capaiansModalClose" style="border:none;background:transparent;color:#fff;font-size:20px;cursor:pointer;line-height:1">×</button>
                </div>
                <div id="capaiansModalBody" style="margin-top:8px;color:#333">
                    <form id="capaiansModalForm">
                        <input type="hidden" name="id" value="">
                        <div style="margin-bottom:8px"><label style="display:block;font-weight:600">Mata Pelajaran</label><input name="mata_pelajaran" style="width:100%;box-sizing:border-box;padding:8px;border:1px solid #e6e6e6;border-radius:6px"></div>
                        <div style="margin-bottom:8px"><label style="display:block;font-weight:600">Elemen</label><input name="elemen" style="width:100%;box-sizing:border-box;padding:8px;border:1px solid #e6e6e6;border-radius:6px"></div>
                        <div style="margin-bottom:8px"><label style="display:block;font-weight:600">Deskripsi</label><textarea name="deskripsi" rows="4" style="width:100%;box-sizing:border-box;padding:8px;border:1px solid #e6e6e6;border-radius:6px"></textarea></div>
                        <div style="display:flex;gap:8px;justify-content:flex-end">
                            <button type="button" id="capaiansModalCancel" style="padding:8px 10px;border-radius:6px;border:1px solid #ced4da;background:#fff;cursor:pointer">Batal</button>
                            <button type="submit" id="capaiansModalSave" style="padding:8px 10px;border-radius:6px;border:none;background:#0d6efd;color:#fff;cursor:pointer">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        (function(){
            var l = document.getElementById('capaiansImportLink');
            if(!l) return;
            l.addEventListener('click', function(ev){ ev.preventDefault(); var f = document.getElementById('capaiansImportForm'); if(f) f.style.display = (f.style.display === 'none' ? 'block' : 'none'); });
        })();
    </script>
    <script>
    (function(){
        var CSRF_TOKEN = '{{ csrf_token() }}';
        var addBtn = document.getElementById('capaiansAddBtn');
        var deleteBtn = document.getElementById('capaiansDeleteBtn');
        var selectAll = document.getElementById('capaiansSelectAll');
        var modal = document.getElementById('capaiansModal');
        var modalClose = document.getElementById('capaiansModalClose');
        var modalCancel = document.getElementById('capaiansModalCancel');
        var modalForm = document.getElementById('capaiansModalForm');

        function openModal(title, data){
            document.getElementById('capaiansModalTitle').textContent = title;
            modal.style.display = 'flex';
            if(data){
                modalForm.id.value = data.id || '';
                modalForm.mata_pelajaran.value = data.mata_pelajaran || '';
                modalForm.elemen.value = data.elemen || '';
                modalForm.deskripsi.value = data.deskripsi || '';
            } else {
                modalForm.id.value = '';
                modalForm.mata_pelajaran.value = '';
                modalForm.elemen.value = '';
                modalForm.deskripsi.value = '';
            }
        }
        function closeModal(){ modal.style.display = 'none'; }

        if(addBtn){ addBtn.addEventListener('click', function(){ openModal('Tambah Capaian', null); }); }
        if(modalClose) modalClose.addEventListener('click', closeModal);
        if(modalCancel) modalCancel.addEventListener('click', closeModal);

        // save handler (add or update)
        if(modalForm) modalForm.addEventListener('submit', function(ev){
            ev.preventDefault();
            var id = modalForm.id.value || null;
            var payload = { mata_pelajaran: modalForm.mata_pelajaran.value.trim(), elemen: modalForm.elemen.value.trim(), deskripsi: modalForm.deskripsi.value.trim() };
            var url = id ? '/guru/atp/capaians/update' : '/guru/atp/capaians/add';
            if(id) payload.id = id;
            fetch(url, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
                body: JSON.stringify(payload)
            }).then(function(r){ return r.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.'); });
        });

        // edit buttons
        Array.from(document.querySelectorAll('.capaians-edit')).forEach(function(btn){
            btn.addEventListener('click', function(){
                var id = btn.getAttribute('data-id');
                var tr = document.querySelector('tr[data-id="'+id+'"]');
                if(!tr) return;
                var cols = tr.querySelectorAll('td');
                var mata = cols[2] ? cols[2].innerText.trim() : '';
                var elemen = cols[3] ? cols[3].innerText.trim() : '';
                var des = cols[4] ? cols[4].innerText.trim() : '';
                openModal('Edit Capaian', { id: id, mata_pelajaran: mata, elemen: elemen, deskripsi: des });
            });
        });

        // delete selected
        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;
            fetch('/guru/atp/capaians/delete', {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
                body: JSON.stringify({ ids: selected })
            }).then(function(r){ return r.json(); }).then(function(json){ if(json && json.success){ location.reload(); return; } alert('Gagal menghapus.'); }).catch(function(){ alert('Gagal menghapus.'); });
        }); }

        // send selected to Desain (auto-save capaian)
        var sendBtn = document.getElementById('capaiansSendBtn');
        if(sendBtn){ sendBtn.addEventListener('click', function(){
            var selected = Array.from(document.querySelectorAll('.capaians-select:checked')).map(function(cb){ return parseInt(cb.value); });
            if(!selected.length){ alert('Tidak ada baris terseleksi.'); return; }
            if(!confirm('Kirim ' + selected.length + ' capaian terpilih ke Desain?')) return;
            fetch('{{ route("guru.atp.capaians.send") }}', {
                method: 'POST', credentials: 'same-origin', headers: { 'Content-Type':'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN }, body: JSON.stringify({ ids: selected })
            }).then(function(r){ return r.json(); }).then(function(json){ if(json && json.success){ alert('Berhasil mengirim ' + (json.count || selected.length) + ' item. Desain diperbarui.'); } else { alert('Gagal mengirim.'); } }).catch(function(){ alert('Gagal mengirim (network)'); });
        }); }

        // select all
        if(selectAll){ selectAll.addEventListener('change', function(){ var checked = !!this.checked; Array.from(document.querySelectorAll('.capaians-select')).forEach(function(cb){ cb.checked = checked; }); }); }
    })();
    </script>
@endsection