@extends('guru.layout')

@section('title','Alur Tujuan 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)">
        <div style="padding:12px 16px;border-bottom:1px solid rgba(0,0,0,0.06);font-weight:700;background:#198754;color:#fff;display:flex;align-items:center;gap:8px">
            <i class="bi bi-table" style="font-size:16px;color:#fff;margin-right:8px"></i>
            <span class="card-title" style="color:#fff">Alur Tujuan Pembelajaran</span>
        </div>
        <div style="padding:16px;width:100%;box-sizing:border-box">
            <div style="margin-bottom:8px">
                <h2 style="margin:0 0 6px 0;font-size:22px;font-weight:800">Daftar Alur Tujuan Pembelajaran</h2>
                @php
                    $user = auth()->user();
                    // SekolahBinaan uses 'nama_sekolah' column
                    $namaSekolah = $sekolah->nama_sekolah ?? optional($user->sekolah)->nama_sekolah ?? '-';
                    $jenjangVal = $jenjangInfo ?? $sekolah->jenjang ?? (optional($user)->jenjang ?? request('jenjang')) ?? '-';
                    $kelasVal = $kelasInfo ?? (optional($user)->kelas ?? request('kelas')) ?? '-';
                    $faseVal = $faseInfo ?? \App\Models\AlurTujuanPembelajaran::kelasToFase(optional($user)->kelas ?? request('kelas')) ?? '-';
                @endphp
                <div style="color:#333;font-size:14px;margin-bottom:8px;line-height:1.2">
                    <strong>Nama Sekolah:</strong>
                    <span style="margin:0 18px 0 6px;text-transform:uppercase">{{ $namaSekolah }}</span>
                    <strong>Jenjang:</strong>
                    <span style="margin:0 18px 0 6px">{{ $jenjangVal }}</span>
                    <strong>Kelas:</strong>
                    <span style="margin:0 18px 0 6px">{{ $kelasVal }}</span>
                    <strong>Fase:</strong>
                    <span style="margin-left:6px">{{ $faseVal }}</span>
                </div>
                <div style="margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap">
                    <div style="display:flex;gap:8px;align-items:center;margin-bottom:4px;width:100%">
                        <label style="font-weight:600;font-size:14px">Filter Mata Pelajaran:</label>
                        <select id="filterMapelAlur" onchange="window.location.href='{{ route('guru.atp.alur') }}?mata_pelajaran='+encodeURIComponent(this.value)" style="padding:6px 8px;border:1px solid #ced4da;border-radius:6px;min-width:200px;font-size:14px">
                            <option value="">Semua Mata Pelajaran</option>
                            @if(isset($mataOptions) && count($mataOptions))
                                @foreach($mataOptions as $opt)
                                    <option value="{{ $opt }}" {{ (isset($filterMapel) && $filterMapel === $opt) ? 'selected' : '' }}>{{ $opt }}</option>
                                @endforeach
                            @endif
                        </select>
                        @if(isset($filterMapel) && !empty($filterMapel))
                            <a href="{{ route('guru.atp.alur') }}" style="padding:6px 10px;border-radius:6px;border:1px solid #dc3545;background:#dc3545;color:#fff;text-decoration:none;display:inline-flex;align-items:center;font-size:13px"><i class="bi bi-x-circle" style="margin-right:4px"></i>Hapus Filter</a>
                        @endif
                    </div>
                    <a href="{{ route('guru.atp') }}" class="alur-btn-danger" style="display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:6px 10px;border-radius:6px;border:1px solid #dc3545;background:#dc3545;color:#fff;height:36px;line-height:1;box-sizing:border-box;font-size:14px;min-width:84px;justify-content:center"><i class="bi bi-arrow-left" style="font-size:16px"></i><span style="font-size:14px">Kembali</span></a>
                    <button id="alurAddBtn" type="button" class="alur-btn-primary" style="display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;border:1px solid #0d6efd;background:#0d6efd;color:#fff;height:36px"><i class="bi bi-plus-lg" style="font-size:16px"></i><span style="font-size:14px">Tambah</span></button>
                    <button type="button" id="alurExportBtn" title="Ekspor" class="alur-btn-warning" style="display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;border:1px solid #e07a15;background:#fd7e14;color:#fff;height:36px"><i class="bi bi-file-earmark-arrow-down" style="font-size:16px"></i><span style="font-size:14px">Ekspor</span></button>
                    <button type="button" id="alurImportBtn" title="Import" class="alur-btn-success" style="display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;border:1px solid #157347;background:#198754;color:#fff;height:36px"><i class="bi bi-file-earmark-arrow-up" style="font-size:16px"></i><span style="font-size:14px">Import</span></button>
                    <button type="button" id="alurTemplateBtn" title="Template" class="alur-btn-info" style="display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;border:1px solid #0b5ed7;background:#0d6efd;color:#fff;height:36px"><i class="bi bi-file-earmark-text" style="font-size:16px"></i><span style="font-size:14px">Template</span></button>
                    <button type="button" id="alurDeleteBtn" title="Hapus" class="alur-btn-danger" style="display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;border:1px solid #dc3545;background:#dc3545;color:#fff;height:36px"><i class="bi bi-trash" style="font-size:16px"></i><span style="font-size:14px">Hapus</span></button>
                    <button type="button" id="alurSendBtn" title="Kirim" class="alur-btn-secondary" style="display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;border:1px solid #6c757d;background:#6c757d;color:#fff;height:36px;margin-left:6px"><i class="bi bi-send" style="font-size:16px"></i><span style="font-size:14px">Kirim</span></button>
                </div>
                
            </div>

            <div style="border:1px solid #e9ecef;border-radius:6px;padding:12px;color:#666;overflow:auto">
                <table id="alurTable" style="width:100%;border-collapse:collapse">
                    <thead>
                        <tr style="background:#f8f9fa;text-align:left">
                            <th style="padding:8px 10px;border:1px solid #e9ecef;width:40px"><input id="alurSelectAll" type="checkbox"></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">Tujuan Pembelajaran</th>
                            <th style="padding:8px 10px;border:1px solid #e9ecef">Indikator</th>
                            <th style="padding:8px 10px;border:1px solid #e9ecef">Alokasi Waktu</th>
                            <th style="padding:8px 10px;border:1px solid #e9ecef">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(isset($aturs) && $aturs->count())
                            @foreach($aturs as $r)
                                <tr data-id="{{ $r->id }}">
                                    <td style="padding:8px;border:1px solid #e9ecef;text-align:center"><input class="alur-select" type="checkbox" value="{{ $r->id }}"></td>
                                    <td style="padding:8px;border:1px solid #e9ecef">{{ $r->mata_pelajaran ?? ($r->mapel ?? '-') }}</td>
                                    <td style="padding:8px;border:1px solid #e9ecef">{{ $r->elemen ?? '-' }}</td>
                                    <td style="padding:8px;border:1px solid #e9ecef">{{ $r->tujuan_pembelajaran ?? '-' }}</td>
                                    <td style="padding:8px;border:1px solid #e9ecef">{{ $r->indikator ?? '-' }}</td>
                                    <td style="padding:8px;border:1px solid #e9ecef">{{ $r->alokasi_waktu ?? '-' }}</td>
                                    <td style="padding:8px;border:1px solid #e9ecef;text-align:center"><button class="alur-edit" data-id="{{ $r->id }}" style="padding:6px 10px;border-radius:6px;border:1px solid #0d6efd;background:#0d6efd;color:#fff;height:36px;line-height:20px">Edit</button></td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td style="padding:8px;border:1px solid #e9ecef">-</td>
                                <td style="padding:8px;border:1px solid #e9ecef">-</td>
                                <td style="padding:8px;border:1px solid #e9ecef">-</td>
                                <td style="padding:8px;border:1px solid #e9ecef">Belum ada data alur tujuan pembelajaran.</td>
                                <td style="padding:8px;border:1px solid #e9ecef">-</td>
                                <td style="padding:8px;border:1px solid #e9ecef">-</td>
                                <td style="padding:8px;border:1px solid #e9ecef">&nbsp;</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>

            <!-- Import form (hidden) -->
            <form id="alurImportForm" action="{{ route('guru.atp.alur.import') }}" method="POST" enctype="multipart/form-data" style="display:none">
                @csrf
                <input type="file" name="file" id="alurImportFile">
            </form>

            <!-- Modal add/edit -->
            <div id="alurModal" style="display:none;position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center">
                <div style="background:#fff;padding:20px 24px;border-radius:8px;max-width:900px;width:calc(100% - 40px);margin:40px auto;position:relative;box-sizing:border-box">
                    <h3 id="alurModalTitle" style="margin-top:0">Tambah Alur</h3>
                    <form id="alurModalForm">
                        @csrf
                        <input type="hidden" name="id" id="alur_id">
                        <div style="display:flex;gap:8px;flex-wrap:wrap">
                            <input type="text" name="mata_pelajaran" id="alur_mata_pelajaran" placeholder="Mata Pelajaran" style="flex:1;padding:8px;border:1px solid #e6e6e6;border-radius:6px">
                            <input type="text" name="elemen" id="alur_elemen" placeholder="Elemen" style="flex:1;padding:8px;border:1px solid #e6e6e6;border-radius:6px">
                        </div>
                        <div style="margin-top:8px">
                            <label style="display:block;font-weight:600;margin-bottom:6px">Tujuan Pembelajaran</label>
                            <textarea name="tujuan_pembelajaran" id="alur_tujuan_pembelajaran" placeholder="Tujuan Pembelajaran" style="width:100%;padding:10px;border:1px solid #e6e6e6;border-radius:6px;box-sizing:border-box" rows="3"></textarea>
                        </div>
                        <div style="display:flex;gap:20px;margin-top:12px;align-items:flex-start">
                            <div style="flex:1;min-width:0">
                                <label style="display:block;font-weight:600;margin-bottom:6px">Indikator</label>
                                <textarea name="indikator" id="alur_indikator" placeholder="Indikator" style="width:100%;padding:10px;border:1px solid #e6e6e6;border-radius:6px;box-sizing:border-box" rows="3"></textarea>
                            </div>
                            <div style="flex:0 0 160px;min-width:140px">
                                <label style="display:block;font-weight:600;margin-bottom:6px">Alokasi Waktu</label>
                                <input type="text" name="alokasi_waktu" id="alur_alokasi_waktu" placeholder="Alokasi Waktu" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;box-sizing:border-box">
                            </div>
                        </div>
                        <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:12px">
                            <button type="button" id="alurModalCancel" style="padding:6px 10px;border-radius:6px;border:1px solid #e6e6e6;background:#fff;height:36px">Batal</button>
                            <button type="button" id="alurModalSave" style="padding:6px 10px;border-radius:6px;border:1px solid #0d6efd;background:#0d6efd;color:#fff;height:36px">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        
        var csrfToken = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') : '{{ csrf_token() }}';

        // Export
        var eBtn = document.getElementById('alurExportBtn'); if(eBtn) eBtn.addEventListener('click', function(){
            window.location = '{{ route("guru.atp.alur.export") }}';
        });

        // Template
        var tBtn = document.getElementById('alurTemplateBtn'); if(tBtn) tBtn.addEventListener('click', function(){
            window.location = '{{ route("guru.atp.alur.template") }}';
        });

        // Import
        var iBtn = document.getElementById('alurImportBtn'); if(iBtn) iBtn.addEventListener('click', function(){
            var fileInput = document.getElementById('alurImportFile');
            if(!fileInput) return;
            fileInput.click();
        });
        var importFile = document.getElementById('alurImportFile'); if(importFile) importFile.addEventListener('change', function(){
            var form = document.getElementById('alurImportForm');
            if(!form) return; form.submit();
        });

        // Add / Edit modal handlers
        var modal = document.getElementById('alurModal');
        var modalForm = document.getElementById('alurModalForm');
        var modalSave = document.getElementById('alurModalSave');
        var modalCancel = document.getElementById('alurModalCancel');
        var modalTitle = document.getElementById('alurModalTitle');

        function openModal(mode, data){
            document.getElementById('alur_id').value = data && data.id ? data.id : '';
            document.getElementById('alur_mata_pelajaran').value = data && data.mata_pelajaran ? data.mata_pelajaran : '';
            document.getElementById('alur_elemen').value = data && data.elemen ? data.elemen : '';
            document.getElementById('alur_tujuan_pembelajaran').value = data && data.tujuan_pembelajaran ? data.tujuan_pembelajaran : '';
            document.getElementById('alur_indikator').value = data && data.indikator ? data.indikator : '';
            document.getElementById('alur_alokasi_waktu').value = data && data.alokasi_waktu ? data.alokasi_waktu : '';
            modalTitle.textContent = (mode === 'edit' ? 'Edit Alur' : 'Tambah Alur');
            modal.style.display = 'flex';
        }
        function closeModal(){ modal.style.display = 'none'; }
        document.getElementById('alurAddBtn').addEventListener('click', function(){ openModal('add', null); });
        modalCancel.addEventListener('click', closeModal);

        modalSave.addEventListener('click', function(){
            var id = document.getElementById('alur_id').value;
            var payload = {
                id: id,
                mata_pelajaran: document.getElementById('alur_mata_pelajaran').value,
                elemen: document.getElementById('alur_elemen').value,
                tujuan_pembelajaran: document.getElementById('alur_tujuan_pembelajaran').value,
                indikator: document.getElementById('alur_indikator').value,
                alokasi_waktu: document.getElementById('alur_alokasi_waktu').value
            };
            var url = id ? '{{ route("guru.atp.alur.update") }}' : '{{ route("guru.atp.alur.add") }}';
            fetch(url, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type':'application/json','X-CSRF-TOKEN': csrfToken }, body: JSON.stringify(payload) })
                .then(function(r){ return r.json(); }).then(function(json){
                    if(json && json.success){ location.reload(); } else { alert(json.message || 'Gagal menyimpan'); }
                }).catch(function(){ alert('Gagal menyimpan (network)'); });
        });

        // Edit buttons
        document.querySelectorAll('.alur-edit').forEach(function(btn){ btn.addEventListener('click', function(){ var id = this.getAttribute('data-id'); if(!id) return; // fetch data row
            var tr = document.querySelector('tr[data-id="'+id+'"]'); if(!tr) return; var data = { id:id, mata_pelajaran: tr.children[1].innerText.trim(), elemen: tr.children[2].innerText.trim(), tujuan_pembelajaran: tr.children[3].innerText.trim(), indikator: tr.children[4].innerText.trim(), alokasi_waktu: tr.children[5].innerText.trim() }; openModal('edit', data); }); });

        // Select all
        var selectAll = document.getElementById('alurSelectAll'); if(selectAll) selectAll.addEventListener('change', function(){ var v = this.checked; document.querySelectorAll('.alur-select').forEach(function(ch){ ch.checked = v; }); });

        // Delete selected
        var dBtn = document.getElementById('alurDeleteBtn'); if(dBtn) dBtn.addEventListener('click', function(){
            var ids = Array.from(document.querySelectorAll('.alur-select:checked')).map(function(i){ return parseInt(i.value); }).filter(Boolean);
            if(!ids.length) return alert('Pilih baris yang akan dihapus.');
            if(!confirm('Hapus ' + ids.length + ' data?')) return;
            fetch('{{ route("guru.atp.alur.delete") }}', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type':'application/json','X-CSRF-TOKEN': csrfToken }, body: JSON.stringify({ ids: ids }) })
                .then(function(r){ return r.json(); }).then(function(json){ if(json && json.success){ location.reload(); } else { alert('Gagal menghapus'); } }).catch(function(){ alert('Gagal menghapus (network)'); });
        });

        // Send selected to Identifikasi (display) and Desain (auto-save)
        var sBtn = document.getElementById('alurSendBtn'); if(sBtn) sBtn.addEventListener('click', function(){
            var ids = Array.from(document.querySelectorAll('.alur-select:checked')).map(function(i){ return parseInt(i.value); }).filter(Boolean);
            if(!ids.length) return alert('Pilih baris yang akan dikirim.');
            if(!confirm('Kirim ' + ids.length + ' alur terpilih ke Identifikasi dan Desain?')) return;
            fetch('{{ route("guru.atp.alur.send") }}', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type':'application/json','X-CSRF-TOKEN': csrfToken }, body: JSON.stringify({ ids: ids }) })
                .then(function(r){ return r.json(); }).then(function(json){
                    if(json && json.success){
                        alert('Berhasil mengirim ' + (json.count || ids.length) + ' tujuan. Desain juga diperbarui secara otomatis.');
                    } else {
                        alert('Gagal mengirim data.');
                    }
                }).catch(function(){ alert('Gagal mengirim (network)'); });
        });
    </script>
@endsection