{{-- resources/views/admin/kesiswaan/kenaikan-kelas/index.blade.php --}}
@extends('layouts.admin')
@section('title', 'Proses Kenaikan Kelas')

@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-1">Manajemen Kesiswaan: Proses Kenaikan Kelas</h3>
            <h6 class="op-7 mb-2">Pilih kelas di filter atas, tentukan kelas tujuan per siswa, lalu simpan.</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 method="GET" action="{{ url()->current() }}" class="m-0" id="filterForm">
                <div class="row g-3 align-items-end">
                    
                    <div class="col-md-3">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-calendar-check me-1"></i> Tahun (Sumber)</label>
                        <select name="source_tahun_id" class="form-select border-primary-subtle bg-light fw-bold" onchange="this.form.submit()">
                            @foreach($allTahunAjaran as $ta)
                                <option value="{{ $ta->id }}" {{ $tahunAjaranSumber->id == $ta->id ? 'selected' : '' }}>
                                    {{ $ta->tahun_ajaran }} {{ $ta->is_active ? '(Aktif)' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold small text-success mb-1"><i class="fas fa-bullseye me-1"></i> Tahun (Target)</label>
                        @if($nextTahun)
                            <input type="text" class="form-control bg-success-subtle fw-bold text-success border-success-subtle" value="{{ $nextTahun->tahun_ajaran }}" readonly>
                            {{-- Input hidden ini wajib ada jika form save di _table.blade.php membutuhkannya --}}
                            <input type="hidden" name="target_tahun_id" id="target_tahun_id" value="{{ $nextTahun->id }}">
                        @else
                            <input type="text" class="form-control bg-danger-subtle text-danger fw-bold border-danger-subtle" value="Belum Dibuat" readonly>
                        @endif
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-layer-group me-1"></i> Pilih Kelas (Rombel)</label>
                        <select name="rombel_id" class="form-select border-primary-subtle bg-light fw-bold" onchange="this.form.submit()">
                            <option value="">-- Pilih Kelas --</option>
                            @foreach($sidebarMenu as $groupName => $rombelItems)
                                <optgroup label="{{ $groupName }}">
                                    @foreach($rombelItems as $item)
                                        <option value="{{ $item->id }}" {{ $selectedRombelId == $item->id ? 'selected' : '' }}>
                                            {{ $item->nama_rombel }}
                                        </option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-search me-1"></i> Cari Siswa</label>
                        <div class="input-group">
                            <input type="text" name="q" value="{{ request('q') }}" class="form-control border-primary-subtle bg-light" placeholder="Nama / NIS...">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
                        </div>
                    </div>

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

    <div class="row">
        <div class="col-md-12">
            <div class="card card-round shadow-sm border-0">
                <div class="card-header d-flex justify-content-between align-items-center py-3">
                    <div class="card-title" style="font-size: 1.1rem;">
                        @if($selectedKelas)
                            <i class="fa fa-user-graduate me-2 text-primary"></i> 
                            Daftar Siswa Kelas <span class="text-primary fw-bold">{{ $selectedKelas->rombel->nama_rombel }}</span>
                        @elseif($selectedRombelId)
                            <i class="fa fa-exclamation-triangle me-2 text-warning"></i> 
                            <span class="text-warning">Kelas Tidak Ditemukan</span>
                        @else
                            <i class="fa fa-info-circle me-2 text-primary"></i> 
                            Menunggu Pilihan Kelas
                        @endif
                    </div>
                </div>

                <div class="card-body p-0">
                    @if($selectedKelas)
                        <div class="p-3">
                            @include('admin.kesiswaan.kenaikan-kelas._table')
                        </div>
                    @elseif($selectedRombelId)
                        <div class="text-center py-5 text-muted">
                            <i class="fa fa-folder-open fa-3x mb-3 text-warning opacity-50"></i>
                            <h5>Data Kelas Tidak Ditemukan.</h5>
                        </div>
                    @else
                        <div class="text-center py-5 text-muted">
                            <i class="fa fa-hand-point-up fa-3x mb-3 text-primary opacity-50"></i>
                            <h5>Silakan pilih Tahun Ajaran dan Kelas pada panel filter di atas.</h5>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

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