@extends('Layouts.app')

@section('content')

<div class="container mx-auto px-4 py-8">
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">

        {{-- Header Section with Export Button --}}
        <div class="bg-gray-800 text-white p-6 flex justify-between items-center">
            <h2 class="text-3xl font-bold">Gradebook (Akademik)</h2>

            {{-- The export button only appears if data has been filtered --}}
@if(request()->filled('semester') && count($grades) > 0)
    <a href="{{ route('academic.gradebook.export.excel', [
            'semester' => request('semester'), 
            'course' => request('course'),
            'academic_year' => request('academic_year') // tambahkan ini
        ]) }}" 
       class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
        <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 17a1 1 0 01-1-1V4a1 1 0 011-1h14a1 1 0 011 1v12a1 1 0 01-1 1H3zM10 7a1 1 0 011 1v2a1 1 0 01-1 1H7a1 1 0 01-1-1V8a1 1 0 011-1h3zm4-1a1 1 0 00-1-1h-3a1 1 0 00-1 1v2a1 1 0 001 1h3a1 1 0 001-1V6z" clip-rule="evenodd" />
        </svg>
        Export Nilai ke Excel
    </a>
@endif

        </div>

        {{-- Search and Filter Section --}}
        <section class="p-6">
            <div class="mb-6">
                <form action="{{ route('academic.gradebook.index') }}" method="GET" class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                    <select name="academic_year" id="academic_year_filter" class="px-4 py-2 border rounded-md focus:ring focus:ring-blue-200 focus:border-blue-500">
                        <option value="" disabled selected>Pilih Tahun Ajaran</option>
                        <option value="all_period" 
                            {{ request('academic_year') == "all_period" ? 'selected' : '' }}>
                            Semua Periode
                        </option>
                        @php
                            $startYear = 2020;
                            $endYear = date('Y') + 1; // Generasi hingga tahun depan
                        @endphp
                        @for ($year = $startYear; $year <= $endYear; $year++)
                            <optgroup label="Tahun {{ $year }}">
                                <option value="Ganjil-{{ $year }}/{{ $year+1 }}" {{ request('academic_year') == "Ganjil-$year/$year+1" ? 'selected' : '' }}>
                                    Ganjil {{ $year }}/{{ $year+1 }}
                                </option>
                                <option value="Genap-{{ $year }}/{{ $year+1 }}" {{ request('academic_year') == "Genap-$year/$year+1" ? 'selected' : '' }}>
                                    Genap {{ $year }}/{{ $year+1 }}
                                </option>
                            </optgroup>
                        @endfor
                    </select>
                    {{-- Semester Dropdown --}}
                    <select name="semester" id="semester_filter" 
                            class="px-4 py-2 border rounded-md focus:ring focus:ring-blue-200 focus:border-blue-500">
                        <option value="" disabled selected>Pilih Semester</option>
                        <option value="all_semester" {{ request('semester') == 'all_semester' ? 'selected' : '' }}>Semua Semester</option>
                        @foreach($semesters as $semester)
                            <option value="{{ $semester }}" {{ request('semester') == $semester ? 'selected' : '' }}>
                                Semester {{ $semester }}
                            </option>
                        @endforeach
                    </select>

                    {{-- Course Dropdown (populated via JavaScript) --}}
                    <select name="course" id="course_filter" 
                            class="px-4 py-2 border rounded-md focus:ring focus:ring-blue-200 focus:border-blue-500">
                        <option value="" disabled selected>Pilih Mata Kuliah</option>
                        <option value="all_course" {{ request('course') == 'all_course' ? 'selected' : '' }}>Semua Mata Kuliah</option>
                    </select>

                    <button type="submit" 
                            class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        Tampilkan
                    </button>
                </form>
            </div>

            {{-- Gradebook Table --}}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 text-xs font-sans">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[150px]">
                                Nama Mahasiswa
                            </th>
                            <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[120px]">
                                Mata Kuliah
                            </th>
                            <th scope="col" class="px-3 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[80px]">
                                Absensi (%)
                            </th>
                            <th scope="col" class="px-3 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[80px]">
                                Tugas
                            </th>
                            <th scope="col" class="px-3 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[80px]">
                                UTS
                            </th>
                            <th scope="col" class="px-3 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[80px]">
                                UAS
                            </th>
                            <th scope="col" class="px-3 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider bg-blue-600 text-white min-w-[100px]">
                                Nilai Akhir
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($grades as $grade)
                            <tr class="hover:bg-gray-100">
                                <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">
                                    {{ $grade['student_name'] }}
                                </td>
                                <td class="px-3 py-2 whitespace-nowrap text-gray-500">
                                    {{ $grade['course_code'] }} - {{ $grade['course_name'] }}
                                </td>
                                <td class="px-3 py-2 whitespace-nowrap text-center text-gray-500">
                                    {{ number_format($grade['attendance_score'], 2) }}
                                </td>
                                <td class="px-3 py-2 whitespace-nowrap text-center text-gray-500">
                                    {{ number_format($grade['assignment_score'], 2) }}
                                </td>
                                <td class="px-3 py-2 whitespace-nowrap text-center text-gray-500">
                                    {{ number_format($grade['uts_score'], 2) }}
                                </td>
                                <td class="px-3 py-2 whitespace-nowrap text-center text-gray-500">
                                    {{ number_format($grade['uas_score'], 2) }}
                                </td>
                                <td class="px-3 py-2 whitespace-nowrap text-center font-bold text-white bg-blue-500">
                                    {{ number_format($grade['final_score'], 2) }} <br> ({{ $grade['final_letter_grade'] }})
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-3 py-4 text-center text-gray-500">
                                    Silakan pilih semester untuk menampilkan data.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination Links --}}
            <div class="mt-4">
                {{ $grades->links() }}
            </div>
        </section>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('#academic_year_filter').select2();
    $('#semester_filter').select2();
    $('#course_filter').select2();

    function loadCourses(semester, academicYearValue) {
        const courseSelect = $('#course_filter');
        
        // Reset dropdown
        courseSelect.empty();
        courseSelect.append('<option value="" disabled selected>Pilih Mata Kuliah</option>');
        courseSelect.append('<option value="all_course">Semua Mata Kuliah</option>');

        let url = `/akademik/get-courses`;

        // Ambil parameter dari academic_year_filter
        let academicSemester = null;
        let academicYear = null;

        if (academicYearValue) {
            const parts = academicYearValue.split("-");
            academicSemester = parts[0]; // Ganjil / Genap / Pendek
            academicYear = parts[1];     // 2025/2026
        }

        $.ajax({
            url: url,
            type: 'GET',
            data: {
                smt: semester,                 // smt = 1,2,...,Umum
                academic_semester: academicSemester, // Ganjil/Genap/Pendek
                academic_year: academicYear          // 2025/2026
            },
            dataType: 'json',
            success: function(data) {
                data.forEach(function(course) {
                    courseSelect.append(`<option value="${course.code}">${course.code} - ${course.title}</option>`);
                });

                // Restore selected value jika ada
                const selectedCourse = "{{ request('course') }}";
                if (selectedCourse) {
                    courseSelect.val(selectedCourse).trigger('change');
                }
            },
            error: function(xhr, status, error) {
                console.error("Failed to load courses:", status, error);
                courseSelect.empty().append('<option value="">Gagal memuat data</option>');
            }
        });
    }

    // Event ketika semester berubah
    $('#semester_filter').on('change', function() {
        const semester = $(this).val();
        const academicYearValue = $('#academic_year_filter').val();
        loadCourses(semester, academicYearValue);
    });

    // Event ketika tahun ajaran berubah
    $('#academic_year_filter').on('change', function() {
        const semester = $('#semester_filter').val();
        const academicYearValue = $(this).val();
        loadCourses(semester, academicYearValue);
    });
    
    // --- Restore academic year & semester saat pertama kali page load ---
    const selectedAcademicYear = "{{ request('academic_year') }}";
    if (selectedAcademicYear) {
        $('#academic_year_filter').val(selectedAcademicYear).trigger('change.select2');
    }

    // Initial load
    const initialSemester = $('#semester_filter').val();
    const initialAcademicYear = $('#academic_year_filter').val();
    if (initialSemester && initialAcademicYear) {
        loadCourses(initialSemester, initialAcademicYear);
    }
});
</script>

@endpush