@extends('admin.layout')

@section('title', 'Sekolah Binaan')

@section('content')
    <div class="card" style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;">
        <div class="card-header" style="padding:12px 16px;border-bottom:1px solid #f1f1f1;font-weight:700"><i class="bi bi-building" style="margin-right:8px;color:#28a745"></i>Sekolah Binaan</div>
        <div class="card-body" style="padding:16px;line-height:1.2">
            <h1 style="margin:0 0 8px 0">Daftar Sekolah Binaan</h1>
            <p style="margin:0 0 12px 0;line-height:1.1">Nama-nama Sekolah yang menjadi binaan pengawas sekolah.</p>

            <div style="overflow-x:auto;border:1px solid #e9ecef;border-radius:8px">
                <table style="width:auto;table-layout:auto;border-collapse:separate;border-spacing:0">
                    <thead>
                        <tr style="background:#e6f9e6;text-align:center">
                            <th style="padding:8px;border:1px solid #e9ecef;width:70px">No. Urut</th>
                            <th style="padding:8px;border:1px solid #e9ecef">Nama Sekolah</th>
                            <th style="padding:8px;border:1px solid #e9ecef">NSS</th>
                            <th style="padding:8px;border:1px solid #e9ecef">NPSN</th>
                            <th style="padding:8px;border:1px solid #e9ecef">Jenjang</th>
                            <th style="padding:8px;border:1px solid #e9ecef">Email Sekolah</th>
                            <th style="padding:8px;border:1px solid #e9ecef">Alamat Sekolah</th>
                            <th style="padding:8px;border:1px solid #e9ecef">Operator</th>
                            <th style="padding:8px;border:1px solid #e9ecef;width:90px">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($sekolahs as $sekolah)
                            <tr>
                                <td style="padding:8px;border:1px solid #e9ecef">{{ ($sekolahs->firstItem() ?? 1) + $loop->index }}</td>
                                <td style="padding:8px;border:1px solid #e9ecef">{{ $sekolah->nama_sekolah }}</td>
                                <td style="padding:8px;border:1px solid #e9ecef">{{ $sekolah->nss }}</td>
                                    <td style="padding:8px;border:1px solid #e9ecef">{{ $sekolah->npsn }}</td>
                                <td style="padding:8px;border:1px solid #e9ecef">{{ $sekolah->jenjang }}</td>
                                <td style="padding:8px;border:1px solid #e9ecef">{{ $sekolah->email }}</td>
                                <td style="padding:8px;border:1px solid #e9ecef">{{ $sekolah->alamat }}</td>
                                <td style="padding:8px;border:1px solid #e9ecef">{{ optional($sekolah->operator)->username ?? optional($sekolah->operator)->name ?? ($sekolah->operator_id ?? '-') }}</td>
                                <td style="padding:8px;border:1px solid #e9ecef;white-space:nowrap">
                                    <a href="{{ route('admin.sekolah-binaan.edit', $sekolah->id) }}" class="open-edit" data-id="{{ $sekolah->id }}" title="Edit" style="margin-right:6px;text-decoration:none">
                                        <span class="action-icon action-edit" style="width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:#fff;background:#0d6efd"><i class="bi bi-pencil" style="font-size:14px"></i></span>
                                    </a>

                                    <form action="{{ route('admin.sekolah-binaan.destroy', $sekolah->id) }}" method="POST" style="display:inline-block;margin:0">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" title="Hapus" style="background:transparent;border:none;padding:0;cursor:pointer" onclick="return confirm('Hapus sekolah ini?')">
                                            <span class="action-icon action-delete" style="width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:#fff;background:#dc3545"><i class="bi bi-trash" style="font-size:14px"></i></span>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" style="padding:8px;border:1px solid #e9ecef">Tidak ada data sekolah binaan.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <div style="margin-top:12px;display:flex;gap:8px;justify-content:center;align-items:center">
                <a href="{{ $sekolahs->previousPageUrl() ?: '#' }}" style="background:#fff;border:1px solid #e9ecef;padding:6px 12px;border-radius:6px;text-decoration:none;color:#333">Prev</a>
                <span style="display:inline-block;padding:6px 12px;border-radius:6px;background:#28a745;color:#fff;border:1px solid #28a745">{{ $sekolahs->currentPage() }} / {{ $sekolahs->lastPage() }}</span>
                <a href="{{ $sekolahs->nextPageUrl() ?: '#' }}" style="background:#fff;border:1px solid #e9ecef;padding:6px 12px;border-radius:6px;text-decoration:none;color:#333">Next</a>
            </div>
            <!-- Edit Modal (loaded via AJAX) -->
            <div id="editSekolahModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:9999">
                <div style="background:#fff;padding:18px;border-radius:8px;max-width:760px;width:92%;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-align:left;position:relative">
                    <button id="closeEditModal" style="position:absolute;right:12px;top:12px;border:none;background:transparent;font-size:18px;cursor:pointer;color:#666">&times;</button>
                    <h3 style="margin:0 0 8px 0;font-size:1.05rem"><i class="bi bi-pencil" style="margin-right:8px;color:#28a745"></i>Edit Sekolah Binaan</h3>
                    <div id="editModalContent">Memuat...</div>
                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    function closeModal() {
                        var m = document.getElementById('editSekolahModal');
                        if (m) m.style.display = 'none';
                        var c = document.getElementById('editModalContent');
                        if (c) c.innerHTML = '';
                    }

                    document.body.addEventListener('click', function (e) {
                        var t = e.target.closest && e.target.closest('.open-edit');
                        if (!t) return;
                        e.preventDefault();
                        var href = t.getAttribute('href');
                        var modal = document.getElementById('editSekolahModal');
                        var content = document.getElementById('editModalContent');
                        if (!modal || !content) return;
                        content.innerHTML = 'Memuat...';
                        modal.style.display = 'flex';
                        fetch(href, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
                            .then(function (r) { return r.text(); })
                            .then(function (html) {
                                try {
                                    var parser = new DOMParser();
                                    var doc = parser.parseFromString(html, 'text/html');
                                    var form = doc.querySelector('form');
                                    if (form) {
                                        // ensure form submits normally (full page) if JS disabled
                                        // inject form HTML into modal (avoid cross-document node adoption)
                                        content.innerHTML = form.outerHTML;
                                    } else {
                                        // fallback: insert whole body
                                        content.innerHTML = html;
                                    }
                                } catch (err) {
                                    content.innerHTML = html;
                                }
                            }).catch(function () {
                                content.innerHTML = 'Gagal memuat form.';
                            });
                    });

                    var closeBtn = document.getElementById('closeEditModal');
                    if (closeBtn) closeBtn.addEventListener('click', closeModal);
                    var modalOverlay = document.getElementById('editSekolahModal');
                    if (modalOverlay) modalOverlay.addEventListener('click', function (e) {
                        if (e.target === modalOverlay) closeModal();
                    });
                });
            </script>

        </div>
    </div>
@endsection