{{-- resources/views/admin/akademik/jadwal/index.blade.php --}}
@extends('layouts.admin')
@section('title', 'Manajemen Jadwal Pelajaran')

@section('content')
<div class="page-inner">
    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-3">
        <div>
            <h3 class="fw-bold mb-3">Manajemen Jadwal Pelajaran</h3>
            <h6 class="op-7 mb-2">Pilih Tahun Ajaran, Semester, dan Kelas untuk mengatur jadwal.</h6>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
            <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
            <i class="fa fa-exclamation-triangle me-2"></i> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-body p-3">
            <form action="{{ route('admin.jadwal-pelajaran.index') }}" method="GET" class="m-0" id="filterForm">
                <div class="row g-3 align-items-end">
                    
                    <div class="col-md-4">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-calendar-check me-1"></i> Tahun Ajaran</label>
                        <select name="tahun_ajaran_id" id="tahun_ajaran_id" class="form-select border-primary-subtle bg-light fw-bold" onchange="this.form.submit()">
                            @foreach($tahunAjarans as $ta)
                                <option value="{{ $ta->id }}" {{ $selectedTahunId == $ta->id ? 'selected' : '' }}>
                                    {{ $ta->tahun_ajaran }} {{ $ta->is_active ? '(Aktif)' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-adjust me-1"></i> Pilih Semester</label>
                        <select name="semester_id" id="semester_id" class="form-select border-primary-subtle bg-light fw-bold" {{ empty($semestersOpt) ? 'disabled' : '' }} onchange="this.form.submit()">
                            <option value="">-- Pilih Semester --</option>
                            @foreach($semestersOpt as $sem)
                                <option value="{{ $sem->id }}" {{ $selectedSemesterId == $sem->id ? 'selected' : '' }}>
                                    {{ $sem->semester }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-chalkboard-teacher me-1"></i> Pilih Kelas</label>
                        <select name="kelas_id" id="kelas_id" class="form-select border-primary-subtle bg-light fw-bold" {{ empty($kelasOpt) ? 'disabled' : '' }} onchange="this.form.submit()">
                            <option value="">-- Pilih Kelas --</option>
                            @php
                                $sortedKelasOpt = collect($kelasOpt)->sortBy(function($k) {
                                    $nama = $k->rombel->nama_rombel ?? $k->nama_kelas ?? '';
                                    if (str_contains($nama, 'VII ')) return 7;
                                    if (str_contains($nama, 'VIII ')) return 8;
                                    if (str_contains($nama, 'IX ')) return 9;
                                    return $k->level_kelas_id ?? 99;
                                })->values();
                            @endphp
                            
                            @foreach($sortedKelasOpt as $kls)
                                <option value="{{ $kls->id }}" {{ $selectedKelasId == $kls->id ? 'selected' : '' }}>
                                    {{ $kls->rombel->nama_rombel ?? $kls->nama_kelas ?? 'Kelas '.$kls->id }} ({{ $kls->rombel->jenkel ?? '-' }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            @if($activeKelas)
                
                <div class="card card-round shadow-sm border-0 mb-4">
                    <div class="card-body d-flex justify-content-between align-items-center py-3">
                        <div>
                            <h4 class="fw-bold text-primary mb-1">{{ $activeKelas->nama_kelas ?? $activeKelas->rombel->nama_rombel }}</h4>
                            <div class="text-muted small">
                                <i class="fa fa-user-tie me-1"></i> Wali Kelas: <strong>{{ $activeKelas->waliKelas->name ?? '-' }}</strong> &bull; 
                                <i class="fa fa-layer-group me-1"></i> Tingkat: <strong>{{ $activeKelas->levelKelas->level_kelas ?? $activeKelas->rombel->levelKelas->level_kelas ?? '-' }}</strong>
                            </div>
                        </div>
                        <div class="text-end">
                            <span class="badge bg-info px-3 py-2 mb-1 d-block">Semester {{ $activeKelas->semester->semester ?? '-' }}</span>
                            
                            @php
                                $totalTargetJP = collect($mapels)->sum('alokasi_jam');
                            @endphp
                            <span class="badge bg-dark text-white px-3 py-2 d-block" data-bs-toggle="tooltip" title="Total Kuota Jam Pelajaran Seminggu">
                                <i class="far fa-clock me-1 text-warning"></i> Total: {{ $totalTargetJP }} JP / Minggu
                            </span>
                        </div>
                    </div>
                </div>

                @php
                    $usage = [];
                    foreach($existingJadwal as $j) {
                        $mId = $j->mapel_id;
                        if(!isset($usage[$mId])) $usage[$mId] = 0;
                        $usage[$mId]++;
                    }
                @endphp
                <div class="accordion mb-4 shadow-sm rounded-4" id="accordionRekap">
                    <div class="accordion-item border-0 rounded-4 overflow-hidden">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed py-3 fw-bold bg-white text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#rekapJP">
                                <i class="fas fa-clipboard-check me-2"></i> Pengecekan Alokasi Jam Pelajaran Kelas Ini
                            </button>
                        </h2>
                        <div id="rekapJP" class="accordion-collapse collapse" data-bs-parent="#accordionRekap">
                            <div class="accordion-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0 text-center small">
                                        <thead class="table-light text-muted">
                                            <tr>
                                                <th width="5%" class="py-3">No</th>
                                                <th width="40%" class="py-3 text-start ps-4">Mata Pelajaran</th>
                                                <th width="15%" class="py-3">Target JP</th>
                                                <th width="15%" class="py-3">Terjadwal</th>
                                                <th width="25%" class="py-3">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($mapels as $m)
                                                @php
                                                    $target = $m->alokasi_jam ?? 0;
                                                    $terjadwal = $usage[$m->id] ?? 0;
                                                    $selisih = $target - $terjadwal;
                                                @endphp
                                                <tr>
                                                    <td class="text-secondary">{{ $loop->iteration }}</td>
                                                    <td class="text-start ps-4 fw-bold text-dark">{{ $m->mapelNama->nama_mapel ?? '-' }}</td>
                                                    <td><span class="badge bg-secondary">{{ $target }} JP</span></td>
                                                    <td><span class="badge bg-primary">{{ $terjadwal }} JP</span></td>
                                                    <td>
                                                        @if($selisih == 0)
                                                            <span class="badge bg-success shadow-sm"><i class="fas fa-check-circle me-1"></i> Sesuai</span>
                                                        @elseif($selisih > 0)
                                                            <span class="badge bg-warning text-dark shadow-sm"><i class="fas fa-exclamation-triangle me-1"></i> Kurang {{ $selisih }} JP</span>
                                                        @else
                                                            <span class="badge bg-danger shadow-sm"><i class="fas fa-times-circle me-1"></i> Lebih {{ abs($selisih) }} JP</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @foreach($slotWaktu as $hari => $slots)
                    <form action="{{ route('admin.jadwal-pelajaran.update', $activeKelas->id) }}" method="POST">
                        @csrf @method('PUT')
                        
                        <div class="card card-round shadow-sm border-0 mb-4">
                            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                                <div class="fw-bold text-uppercase">
                                    <i class="fas fa-calendar-day me-2"></i> {{ $hari }}
                                </div>
                                <small class="opacity-75">Kelola jadwal hari {{ strtolower($hari) }}</small>
                            </div>

                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover align-middle mb-0">
                                        <thead class="table-dark text-center">
                                            <tr>
                                                <th width="5%">Jam</th>
                                                <th width="15%">Waktu</th>
                                                <th width="10%">Tipe</th>
                                                <th width="35%">Mata Pelajaran</th>
                                                <th width="35%">Guru Pengajar</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($slots as $slot)
                                                @php
                                                    $current = $existingJadwal[$slot->id] ?? null;
                                                    $isKbm = $slot->tipe == 'KBM';
                                                @endphp
                                                <tr class="text-center">
                                                    <td class="fw-bold">{{ $slot->jam_ke }}</td>
                                                    <td class="small">
                                                        <span class="badge bg-light text-dark border">
                                                            {{ date('H:i', strtotime($slot->waktu_mulai)) }} - {{ date('H:i', strtotime($slot->waktu_selesai)) }}
                                                        </span>
                                                    </td>
                                                    
                                                    @if(!$isKbm)
                                                        <td colspan="3" class="fw-bold text-muted text-uppercase bg-light">
                                                            {{ $slot->tipe }}
                                                        </td>
                                                    @else
                                                        <td><span class="badge bg-success">KBM</span></td>
                                                        <td class="p-2">
                                                            <select name="jadwal[{{ $slot->id }}][mapel_id]" class="form-select form-select-sm select-mapel">
                                                                <option value="">- Pilih Mapel -</option>
                                                                @foreach($mapels as $m)
                                                                    <option value="{{ $m->id }}" {{ ($current && $current->mapel_id == $m->id) ? 'selected' : '' }}>
                                                                        {{ $m->mapelNama->nama_mapel }} ({{ $m->alokasi_jam ?? 0 }} JP)
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td class="p-2">
                                                            <select name="jadwal[{{ $slot->id }}][guru_id]" class="form-select form-select-sm select-guru">
                                                                <option value="">- Pilih Guru -</option>
                                                                
                                                                @foreach($gurus as $g)
                                                                    <option value="{{ $g->id }}" 
                                                                        {{ ($current && $current->guru_id == $g->id) ? 'selected' : '' }}
                                                                        class="option-guru">
                                                                        {{ $g->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                    @endif
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <div class="card-footer text-end bg-light">
                                <button type="submit" class="btn btn-primary btn-sm btn-round">
                                    <i class="fa fa-save me-1"></i> Simpan Jadwal {{ ucwords(strtolower($hari)) }}
                                </button>
                            </div>
                        </div>
                    </form>
                @endforeach

            @else

                <div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted p-5 border rounded bg-white shadow-sm" style="min-height: 400px;">
                    <i class="fas fa-hand-pointer fa-4x mb-3 text-primary opacity-50"></i>
                    <h4 class="fw-bold">Silakan Pilih Kelas</h4>
                    <p class="text-center mb-0">Gunakan filter di atas untuk memilih Tahun Ajaran, Semester, lalu Kelas<br>sebelum mulai mengatur jadwal pelajaran.</p>
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        
        const selTahun = document.getElementById('tahun_ajaran_id');
        const selSemester = document.getElementById('semester_id');
        const selKelas = document.getElementById('kelas_id');

        selTahun.addEventListener('change', function() {
            let tahunId = this.value;
            selSemester.innerHTML = '<option value="">Memuat Semester...</option>';
            selSemester.disabled = true;
            selKelas.innerHTML = '<option value="">-- Pilih Kelas --</option>';
            selKelas.disabled = true;

            fetch(`/admin/ajax/get-semester-by-tahun/${tahunId}`)
                .then(res => res.json())
                .then(data => {
                    selSemester.innerHTML = '<option value="">-- Pilih Semester --</option>';
                    if(data.length > 0) {
                        data.forEach(item => {
                            selSemester.innerHTML += `<option value="${item.id}">${item.semester}</option>`;
                        });
                        selSemester.disabled = false;
                    } else {
                        selSemester.innerHTML = '<option value="">(Tidak Ada Kelas di TA ini)</option>';
                    }
                })
                .catch(err => console.error(err));
        });

        selSemester.addEventListener('change', function() {
            let tahunId = selTahun.value;
            let semesterId = this.value;
            
            selKelas.innerHTML = '<option value="">Memuat Kelas...</option>';
            selKelas.disabled = true;

            if(!semesterId) return;

            fetch(`/admin/ajax/get-kelas-by-semester/${tahunId}/${semesterId}`)
                .then(res => res.json())
                .then(data => {
                    selKelas.innerHTML = '<option value="">-- Pilih Kelas --</option>';
                    if(data.length > 0) {
                        
                        data.sort((a, b) => {
                            const getLevel = (name) => {
                                if (name.includes('VII ')) return 7;
                                if (name.includes('VIII ')) return 8;
                                if (name.includes('IX ')) return 9;
                                return 99; 
                            };
                            let diff = getLevel(a.nama) - getLevel(b.nama);
                            return diff === 0 ? a.nama.localeCompare(b.nama) : diff;
                        });

                        data.forEach(item => {
                            selKelas.innerHTML += `<option value="${item.id}">${item.nama}</option>`;
                        });
                        selKelas.disabled = false;
                    } else {
                        selKelas.innerHTML = '<option value="">(Tidak Ada Kelas)</option>';
                    }
                })
                .catch(err => console.error(err));
        });

        const mapelGuruMap = @json($mapelGuruMapping ?? []);

        function filterGuru(selectMapel) {
            const row = selectMapel.closest('tr');
            const selectGuru = row.querySelector('.select-guru');
            
            if(!selectGuru) return;

            const selectedMapelId = selectMapel.value;
            const currentGuruId = selectGuru.value; 
            const options = selectGuru.querySelectorAll('option');
            const pengampuIds = mapelGuruMap[selectedMapelId] || [];

            let hasPengampu = pengampuIds.length > 0;

            options.forEach(opt => {
                if(opt.value === "") return;

                let originalText = opt.innerText.replace(" (Pengampu)", "");
                opt.innerText = originalText;
                opt.style.fontWeight = "normal";
                opt.style.color = "";

                if (hasPengampu) {
                    const gId = parseInt(opt.value);
                    if (pengampuIds.includes(gId)) {
                        opt.style.display = ""; 
                        opt.innerText = originalText + " (Pengampu)";
                        opt.style.fontWeight = "bold";
                        opt.style.color = "blue";
                    } else {
                        opt.style.display = "none"; 
                    }
                } else {
                    opt.style.display = "";
                }
            });

            const selectedOpt = selectGuru.querySelector(`option[value="${currentGuruId}"]`);
            if(selectedOpt && selectedOpt.style.display === "none") {
                selectGuru.value = "";
            }
        }

        const allMapelSelects = document.querySelectorAll('.select-mapel');
        
        allMapelSelects.forEach(sel => {
            filterGuru(sel);

            sel.addEventListener('change', function() {
                filterGuru(this);
            });
        });

        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    });
</script>
@endpush
@endsection