@extends('admin.layout')

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

@section('content')
    <div class="card" style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.04)">
        <div class="card-header" 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-person-badge" style="margin-right:8px;color:var(--header-bg)"></i>
            <span style="font-weight:700">Guru Sekolah Binaan</span>
        </div>
        <div class="card-body" style="padding:16px">
            <h1 style="margin:4px 0 12px 0;font-size:1.8rem;color:#333">Daftar Guru Sekolah Binaan</h1>
            <p style="margin:0 0 12px 0">Daftar guru yang terdaftar sebagai pengajar di sekolah binaan.</p>

            <div style="margin-top:12px">
                <form method="GET" action="{{ route('admin.guru.index') }}" style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px">
                    <div style="min-width:220px">
                        <label style="display:block;font-weight:600;margin-bottom:6px">Sekolah</label>
                        <select id="filterSekolah" name="sekolah" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px">
                            <option value="">Pilih sekolah</option>
                            @if(isset($sekolahs))
                                @foreach($sekolahs as $s)
                                    <option value="{{ $s->id }}" data-jenjang="{{ $s->jenjang }}" {{ request()->query('sekolah') == $s->id ? 'selected' : '' }}>{{ $s->nama_sekolah }} ({{ $s->jenjang }})</option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div style="min-width:180px">
                        <label style="display:block;font-weight:600;margin-bottom:6px">Jenjang</label>
                        <select name="jenjang" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px">
                            <option value="">Semua Jenjang</option>
                            @if(isset($jenjangs) && is_array($jenjangs))
                                @foreach($jenjangs as $jj)
                                    <option value="{{ $jj }}" {{ request()->query('jenjang') == $jj ? 'selected' : '' }}>{{ $jj }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <!-- filter button removed; form submits automatically on selection -->
                </form>

                <div style="overflow:auto;border:1px solid #e9ecef;border-radius:8px">
                @if(isset($guruList) && $guruList->count())
                    <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">Sekolah</th>
                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Jenjang</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>
                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Kelas</th>
                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Mata Pelajaran</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($guruList as $g)
                                <tr>
                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $g->nama_sekolah ?? '-' }}</td>
                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $g->jenjang ?? '-' }}</td>
                                    <td style="padding:10px;border-top:1px solid #f1f1f1">
                                        @if(isset($g->id))
                                            <a href="{{ route('admin.guru.show', ['id' => $g->id]) }}" style="color:#175e3a;text-decoration:none;font-weight:600">{{ $g->guru_name ?? '-' }}</a>
                                        @else
                                            {{ $g->guru_name ?? '-' }}
                                        @endif
                                    </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>
                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $g->kelas ?? '-' }}</td>
                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $g->mata_pelajaran ?? '-' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    @if(!request()->query('sekolah'))
                        <div style="padding:12px;border:1px solid #e9ecef;border-radius:6px;background:#fff">Silakan pilih sekolah untuk menampilkan data guru.</div>
                    @else
                        <div style="padding:12px;border:1px solid #e9ecef;border-radius:6px;background:#fff">Tidak ada data guru untuk ditampilkan.</div>
                    @endif
                @endif
            </div>

            <script>
                (function(){
                    var sekolahSelect = document.getElementById('filterSekolah');
                    var jenjangSelect = document.querySelector('select[name="jenjang"]');
                    if (!sekolahSelect || !jenjangSelect) return;

                    function applySchoolSelection() {
                        var opt = sekolahSelect.options[sekolahSelect.selectedIndex];
                        var jj = opt ? opt.getAttribute('data-jenjang') : '';
                        if (jj) {
                            // try to set jenjang select to this school's jenjang
                            for (var i=0;i<jenjangSelect.options.length;i++){
                                if (jenjangSelect.options[i].value === jj) {
                                    jenjangSelect.selectedIndex = i; break;
                                }
                            }
                        }
                        // submit form automatically to show results
                        sekolahSelect.form.submit();
                    }

                    // when sekolah changes, set jenjang and auto-submit
                    sekolahSelect.addEventListener('change', function(){ applySchoolSelection(); });

                    // also auto-submit when jenjang is changed manually
                    jenjangSelect.addEventListener('change', function(){ jenjangSelect.form.submit(); });

                    // If a sekolah is pre-selected on page load, set jenjang accordingly (but do not auto-submit)
                    (function setInitialJenjang(){
                        var opt = sekolahSelect.options[sekolahSelect.selectedIndex];
                        var jj = opt ? opt.getAttribute('data-jenjang') : '';
                        if (jj) {
                            for (var i=0;i<jenjangSelect.options.length;i++){
                                if (jenjangSelect.options[i].value === jj) { jenjangSelect.selectedIndex = i; break; }
                            }
                        }
                    })();
                })();
            </script>

        </div>
    </div>
@endsection