@extends('operator.layout')

@section('title','Daftar 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-list" style="font-size:16px;color:var(--header-bg);margin-right:8px"></i>
            <span class="card-title">Daftar Guru</span>
        </div>
        <div class="card-body" style="padding:16px">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
                <h2 style="margin:0;font-size:1.25rem">Daftar Guru Sekolah Binaan</h2>
                <div>
                    <!-- delete form: JS will populate selected ids before submit -->
                    <form id="delete-selected-form" method="POST" action="{{ route('operator.daftar.guru.delete') }}" style="display:inline">
                        @csrf
                        <button id="delete-selected-btn" type="button" class="btn btn-danger" style="background:#dc3545;border:0;padding:6px 10px;border-radius:6px;color:#fff" disabled>Hapus</button>
                    </form>
                </div>
            </div>
            @if(!$sekolah)
                <div style="padding:12px;border:1px solid #e9ecef;border-radius:6px;background:#fff">Belum ada sekolah binaan terdaftar untuk operator ini.</div>
            @else
                <div style="margin-bottom:12px">
                    <strong>Sekolah:</strong> {{ $sekolah->nama_sekolah }} &nbsp;•&nbsp; <strong>Jenjang:</strong> {{ $sekolah->jenjang ?? '-' }}
                </div>

                <div style="overflow:auto">
                    @if(isset($guruList) && $guruList->count())
                        <div style="border:1px solid #e9ecef;border-radius:6px;overflow:hidden">
                        <table style="width:100%;border-collapse:collapse;border:0">
                            <thead>
                                <tr style="background:#f8f9fa;text-align:left">
                                    <th style="padding:10px;border-bottom:1px solid #e9ecef;width:48px"><input id="select-all" type="checkbox" /></th>
                                    <th style="padding:10px;border-bottom:1px solid #e9ecef">Nama Guru</th>
                                    <th style="padding:10px;border-bottom:1px solid #e9ecef">NIK</th>
                                    <th style="padding:10px;border-bottom:1px solid #e9ecef">NIP</th>
                                    <th style="padding:10px;border-bottom:1px solid #e9ecef">Jabatan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($guruList as $g)
                                    <tr>
                                        <td style="padding:10px;border-top:1px solid #f1f1f1"><input class="row-checkbox" type="checkbox" value="{{ $g->id }}" /></td>
                                        <td style="padding:10px;border-top:1px solid #f1f1f1"><a href="#" class="guru-name-link" data-id="{{ $g->id }}" style="color:var(--header-bg);text-decoration:underline">{{ $g->guru_name ?? '-' }}</a></td>
                                        <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $g->nik ?? '-' }}</td>
                                        <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $g->nip ?? '-' }}</td>
                                        <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $g->jabatan ?? '-' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        </div>
                    @else
                        <div style="padding:12px;border:1px solid #e9ecef;border-radius:6px;background:#fff">Tidak ada guru terdaftar untuk sekolah ini.</div>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <script>
        (function(){
            const selectAll = document.getElementById('select-all');
            const rowCheckboxes = Array.from(document.querySelectorAll('.row-checkbox'));
            const deleteBtn = document.getElementById('delete-selected-btn');
            const deleteForm = document.getElementById('delete-selected-form');

            function updateDeleteState(){
                const any = document.querySelectorAll('.row-checkbox:checked').length > 0;
                deleteBtn.disabled = !any;
                deleteBtn.style.opacity = any ? '1' : '0.6';
            }

            if(selectAll){
                selectAll.addEventListener('change', function(){
                    rowCheckboxes.forEach(cb => cb.checked = selectAll.checked);
                    updateDeleteState();
                });
            }

            rowCheckboxes.forEach(cb => cb.addEventListener('change', function(){
                if(!this.checked && selectAll) selectAll.checked = false;
                // if all checked, set selectAll
                if(selectAll) selectAll.checked = document.querySelectorAll('.row-checkbox:not(:checked)').length === 0;
                updateDeleteState();
            }));

            deleteBtn.addEventListener('click', function(){
                const checked = Array.from(document.querySelectorAll('.row-checkbox:checked')).map(n => n.value);
                if(!checked.length) return;
                if(!confirm('Hapus guru terpilih? Tindakan ini tidak dapat dibatalkan.')) return;
                // remove any existing hidden inputs
                Array.from(deleteForm.querySelectorAll('input[name="ids[]"]')).forEach(e=>e.remove());
                checked.forEach(id => {
                    const inp = document.createElement('input');
                    inp.type = 'hidden';
                    inp.name = 'ids[]';
                    inp.value = id;
                    deleteForm.appendChild(inp);
                });
                deleteForm.submit();
            });
        })();
    </script>

    <!-- Guru profile modal -->
    <div id="guru-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1100;align-items:center;justify-content:center">
        <div style="background:#fff;border-radius:8px;max-width:1000px;width:90%;margin:auto;box-shadow:0 6px 20px rgba(0,0,0,0.2);position:relative">
            <div style="padding:14px 18px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between">
                <strong style="font-size:1.05rem">Identitas Guru</strong>
                <button class="modal-close" style="background:transparent;border:0;font-size:18px;cursor:pointer;padding:6px 8px">✕</button>
            </div>
            <div class="modal-body" style="padding:16px;min-height:140px">Memuat...</div>
        </div>
    </div>

        <!-- Register (edit) modal -->
        <div id="register-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1200;align-items:center;justify-content:center">
            <div style="background:#fff;border-radius:8px;max-width:720px;width:95%;margin:auto;box-shadow:0 6px 20px rgba(0,0,0,0.2);position:relative">
                <div style="padding:14px 18px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between">
                    <strong style="font-size:1.05rem">Ubah Username/Password Guru</strong>
                    <button class="register-modal-close" style="background:transparent;border:0;font-size:18px;cursor:pointer;padding:6px 8px">✕</button>
                </div>
                <div class="register-modal-body" style="padding:16px;min-height:140px">Memuat...</div>
            </div>
        </div>

        <script>
        (function(){
            const profileBase = '{{ url('/operator/guru') }}';

            // open register/edit modal when clicking the edit button in profile content
            document.addEventListener('click', function(e){
                const btn = e.target.closest && e.target.closest('.btn-edit-akun');
                if(!btn) return;
                e.preventDefault();
                const id = btn.dataset.id;
                const modal = document.getElementById('register-modal');
                const body = modal.querySelector('.register-modal-body');
                body.innerHTML = '<div style="padding:12px">Memuat...</div>';
                modal.style.display = 'flex';
                fetch(profileBase + '/' + encodeURIComponent(id) + '/edit-akun?modal=1', {headers:{'X-Requested-With':'XMLHttpRequest'}})
                    .then(r => {
                        if(!r.ok) throw new Error('error');
                        return r.text();
                    })
                    .then(html => body.innerHTML = html)
                    .catch(() => body.innerHTML = '<div style="padding:12px">Tidak dapat memuat form.</div>');
            });

            // close register modal
            document.addEventListener('click', function(e){
                if(e.target.id === 'register-modal' || e.target.classList.contains('register-modal-close')){
                    document.getElementById('register-modal').style.display = 'none';
                }
            });
        })();
        </script>

    <script>
        (function(){
            const profileBase = '{{ url('/operator/guru') }}';

            document.addEventListener('click', function(e){
                const a = e.target.closest && e.target.closest('.guru-name-link');
                if(!a) return;
                e.preventDefault();
                const id = a.dataset.id;
                const modal = document.getElementById('guru-modal');
                const body = modal.querySelector('.modal-body');
                body.innerHTML = '<div style="padding:12px">Memuat...</div>';
                modal.style.display = 'flex';

                fetch(profileBase + '/' + encodeURIComponent(id) + '/profile', {headers:{'X-Requested-With':'XMLHttpRequest'}})
                    .then(r => {
                        if(!r.ok) throw new Error('error');
                        return r.text();
                    })
                    .then(html => body.innerHTML = html)
                    .catch(() => body.innerHTML = '<div style="padding:12px">Tidak dapat memuat profil guru.</div>');
            });

            // close modal when clicking overlay or close button
            document.addEventListener('click', function(e){
                if(e.target.id === 'guru-modal' || e.target.classList.contains('modal-close')){
                    document.getElementById('guru-modal').style.display = 'none';
                }
            });
        })();
    </script>

@endsection