{{-- 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-4">
        <div>
            <h3 class="fw-bold mb-3">Manajemen Jadwal Pelajaran</h3>
            <h6 class="op-7 mb-2">Pilih kelas di sidebar untuk mengatur jadwal.</h6>
        </div>
        <div class="ms-md-auto py-2 py-md-0">
            <form action="{{ route('admin.jadwal-pelajaran.index') }}" method="GET" class="d-flex align-items-center bg-white p-2 rounded shadow-sm">
                <label class="me-2 fw-bold small text-nowrap">Tahun Ajaran:</label>
                <select name="tahun_ajaran_id" class="form-select form-select-sm" onchange="this.form.submit()">
                    @foreach($tahunAjarans as $ta)
                        <option value="{{ $ta->id }}" {{ $selectedTahunId == $ta->id ? 'selected' : '' }}>
                            {{ $ta->tahun_ajaran }}
                        </option>
                    @endforeach
                </select>
                <input type="hidden" name="kelas_id" value=""> 
            </form>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" 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" 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="row">
        <div class="col-md-3">
            <div class="card card-round shadow-sm border-0" style="min-height: 500px;">
                <div class="card-header bg-primary text-white py-2 px-3">
                    <span class="fw-bold text-uppercase small"><i class="fa fa-list me-2"></i> Daftar Kelas</span>
                </div>
                <div class="card-body p-0">
                    <div class="accordion accordion-flush" id="accordionJadwal">
                        @forelse($sidebarMenu as $semester => $levelGroups)
                            @php
                                $isOpen = false;
                                if(isset($activeKelas) && ($activeKelas->semester->semester ?? '') == $semester) {
                                    $isOpen = true;
                                }
                            @endphp
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button {{ $isOpen ? '' : 'collapsed' }} py-2 fw-bold bg-light" 
                                            type="button" data-bs-toggle="collapse" 
                                            data-bs-target="#sem-{{ Str::slug($semester) }}"
                                            aria-expanded="{{ $isOpen ? 'true' : 'false' }}">
                                        Semester {{ $semester }}
                                    </button>
                                </h2>
                                <div id="sem-{{ Str::slug($semester) }}" 
                                     class="accordion-collapse collapse {{ $isOpen ? 'show' : '' }}" 
                                     data-bs-parent="#accordionJadwal">
                                    <div class="accordion-body p-0">
                                        @foreach($levelGroups as $level => $genderGroups)
                                            <div class="border-bottom">
                                                <div class="px-3 py-2 fw-bold text-muted small bg-white border-bottom">
                                                    Kelas {{ $level }}
                                                </div>
                                                @foreach($genderGroups as $gender => $classes)
                                                    <div class="ps-3">
                                                        <div class="py-1 px-2 text-primary small fw-bold mt-1">
                                                            <i class="fa {{ $gender == 'Putra' ? 'fa-male' : 'fa-female' }} me-1"></i> {{ $gender }}
                                                        </div>
                                                        <div class="list-group list-group-flush mb-2">
                                                            @foreach($classes as $kls)
                                                                @php 
                                                                    $isActive = (request('kelas_id') == $kls->id);
                                                                    $displayName = $kls->rombel->nama_rombel ?? $kls->nama_kelas ?? 'Kelas '.$kls->id;
                                                                @endphp
                                                                <a href="{{ route('admin.jadwal-pelajaran.index', ['tahun_ajaran_id' => $selectedTahunId, 'kelas_id' => $kls->id]) }}" 
                                                                   class="list-group-item list-group-item-action py-1 ps-4 border-0 small {{ $isActive ? 'active fw-bold' : '' }}">
                                                                    <i class="fa fa-caret-right me-1 text-muted"></i> {{ $displayName }}
                                                                </a>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="p-3 text-center text-muted small">Tidak ada data kelas.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            @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>
                        <span class="badge bg-info px-3 py-2">Semester {{ $activeKelas->semester->semester ?? '-' }}</span>
                    </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">
                                                            {{-- Class 'select-mapel' ditambahkan untuk JS Selector --}}
                                                            <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 }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td class="p-2">
                                                            {{-- Class 'select-guru' ditambahkan untuk JS Selector --}}
                                                            <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-point-left fa-4x mb-3 text-primary opacity-50"></i>
                    <h4 class="fw-bold">Silakan Pilih Kelas</h4>
                    <p class="text-center mb-0">Klik salah satu kelas pada menu di sebelah kiri<br>untuk mulai mengatur jadwal pelajaran.</p>
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        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);
            });
        });
    });
</script>
@endpush

@endsection