@extends('layouts-v2.app')

@section('title', 'Quản lý lịch thi và kết quả thi')

@section('content')
    <div class="font-sans text-slate-800">

        <div class="flex items-center gap-3 mb-6">
            <div class="p-2.5 bg-blue-100 text-blue-600 rounded-lg shadow-sm border border-blue-200">
                <i data-lucide="calendar-days" class="w-6 h-6"></i>
            </div>
            <h1
                class="text-2xl md:text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-indigo-600">
                Quản lý lịch thi và kết quả thi
            </h1>
        </div>

        <div class="flex flex-col lg:flex-row gap-6">

            <div class="w-full lg:w-1/4 xl:w-1/5 bg-white shadow-sm rounded-xl p-5 border border-slate-200 h-fit">
                <h2 class="text-base font-bold mb-4 text-slate-800 border-b border-slate-100 pb-3 flex items-center gap-2">
                    <i data-lucide="filter" class="w-4 h-4 text-slate-500"></i> Bộ lọc
                </h2>

                <div id="filter-tab1" class="filter-content block">
                    @include('exam-schedule-result.components.exam-schedule-filter')
                </div>

                <div id="filter-tab2" class="filter-content hidden" style="display: none;">
                    @include('exam-schedule-result.components.exam-history-filter')
                </div>

                <div id="filter-tab3" class="filter-content hidden" style="display: none;">
                    @include('exam-schedule-result.components.exam-grading-filter')
                </div>
            </div>

            <div
                class="w-full lg:w-3/4 xl:w-4/5 flex flex-col bg-white shadow-sm rounded-xl border border-slate-200 overflow-hidden">

                <div class="relative flex overflow-x-auto border-b border-slate-200 bg-slate-50/50 scrollbar-hide">
                    <button
                        class="tab-btn active px-6 py-3.5 flex items-center gap-2 whitespace-nowrap text-blue-700 bg-blue-50/50 font-bold transition-colors"
                        data-target="#tab1" data-filter="#filter-tab1">
                        <i data-lucide="calendar-clock" class="w-4 h-4"></i> Lịch thi
                    </button>
                    <button
                        class="tab-btn px-6 py-3.5 flex items-center gap-2 whitespace-nowrap text-slate-500 border-transparent font-medium hover:text-slate-700 hover:bg-slate-100 transition-colors"
                        data-target="#tab2" data-filter="#filter-tab2">
                        <i data-lucide="clipboard-list" class="w-4 h-4"></i> Kết quả thi
                    </button>
                    <button
                        class="tab-btn px-6 py-3.5 flex items-center gap-2 whitespace-nowrap text-slate-500 border-transparent font-medium hover:text-slate-700 hover:bg-slate-100 transition-colors"
                        data-target="#tab3" data-filter="#filter-tab3">
                        <i data-lucide="pen-tool" class="w-4 h-4"></i> Quản lý chấm bài
                    </button>
                    <!-- Thanh trượt -->
                    <div id="tab-indicator"
                        class="absolute bottom-0 h-0.5 bg-blue-600 transition-all duration-300 ease-in-out"></div>
                </div>

                <div class="p-6 relative min-h-[500px]">
                    <div id="tab1" class="tab-content block h-fit">
                        <div class="tab-body text-center text-slate-400"></div>
                    </div>

                    <div id="tab2" class="tab-content hidden h-fit" style="display: none;">
                        <div class="tab-body text-center text-slate-400"></div>
                    </div>

                    <div id="tab3" class="tab-content hidden h-fit" style="display: none;">
                        <div class="tab-body text-center text-slate-400"></div>
                    </div>
                </div>

            </div>

        </div>

        <input type="hidden" id="tenant-connection" value="{{ $tenantConnection }}">

    </div>

    @include('exam-history.modal.exam-detail')
    @include('exam-history.modal.reassign-teacher')
    @include('exam-history.modal.export-progress')
    @include('exam-schedule-result.modal.retake-schedule')
    @include('exam-schedule-result.modal.edit-writing')
    @include('exam-schedule-result.modal.edit-manual-writing')
    @include('exam-schedule-result.modal.edit-speaking')
    @include('exam-schedule-result.modal.deadline')
    @include('exam-schedule-result.modal.class-history')
    @include('exam-schedule-result.modal.add-schedule')
    @include('exam-schedule-result.modal.student-results')

    <script>
        window.routes = {
            searchCourses: "{{ route('course.searchCourses') }}",
            searchSections: "{{ route('course.searchSections') }}",
            searchQuizzes: "{{ route('course.searchQuizzes') }}",
            searchClasses: "{{ route('class.searchClasses') }}",
            searchTeachers: "{{ route('teacher.searchTeachers') }}",
            searchOAStudents: "{{ route('student.searchStudents') }}",
            getClassAssignmentHistory: '{{ route("exam-permission.class-assignment-history") }}',
            getStudentsBySchedule: "{{ route('exam-schedule-result.getStudentsBySchedule') }}",
            saveDeadlineSchedule: '{{ route("exam-permission.save-deadlines") }}',
            getOAExamGrading: "{{ route('exam-grading.getExamGrading') }}", // Tab3
            studentAvatar: "{{ asset('images/student_avatar.jpg') }}",
            getOAExamHistories: "{{ route('exam-histories.getExamHistories') }}", // Tab2
            getExamScheduleResult: "{{ route('exam-schedule-result.getExamScheduleResult') }}", // Tab1
            getStudentResults: "{{ route('exam-histories.getStudentResults') }}",
            exportExamHistories: "{{ route('exam-histories.export') }}",
            exportHistoryProgress: "{{ route('exam-histories.export-progress', ['export_id' => 'ID']) }}",
            exportExamSchedule: "{{ route('exam-schedule-result.export') }}",
            exportScheduleProgress: "{{ route('exam-schedule-result.export-progress', ['export_id' => 'ID']) }}",
            exportExamGrading: "{{ route('exam-grading.export') }}",
            exportGradingProgress: "{{ route('exam-grading.export-progress', ['export_id' => 'ID']) }}",
            loadTabPartial: "{{ route('exam-schedule-result.loadTab', ['tab' => ':tab']) }}",
            getTeacherAssignedOverview: "{{ route('student-exam-histories.getTeacherAssignedOverview', ['student_score_id' => 'ID']) }}",
            assignTeacher: "{{ route('student-exam-histories.assignTeacher') }}",
        }
    </script>

    <script src="{{ asset('js/utils/utils.js') }}"></script>
    <script src="{{ asset('js/exam-schedule-result/exam-history/exam-detail-modal.js') }}"></script>
    <script src="{{ asset('js/exam-schedule-result/exam-history/exam-detail-modal.detail.js') }}"></script>
    <script src="{{ asset('js/exam-schedule-result/exam-history/exam-detail-modal.edit.js') }}"></script>

    <script>
        $(document).ready(function () {
            const pageRole = @json($role);

            // Render Icons
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }

            // Cờ đánh dấu API đã được gọi chưa để tránh gọi lại nhiều lần
            let loadedTabs = {
                tab1: false,
                tab2: false,
                tab3: false
            };

            const activeClasses = 'active text-blue-700 bg-blue-50/50 font-bold';
            const inactiveClasses = 'text-slate-500 hover:text-slate-700 hover:bg-slate-100 border-transparent font-medium';

            function moveTabIndicator($btn) {
                const $indicator = $('#tab-indicator');
                if (!$btn || !$btn.length) return;

                const width = $btn.outerWidth();
                const left = $btn.position().left;

                $indicator.css({
                    'width': width + 'px',
                    'left': left + 'px'
                });
            }

            /**
             * #1 / #tab1 → Lịch thi, #2 → Kết quả thi, #3 → Quản lý chấm bài.
             * Giáo viên chỉ có tab 3 — mọi hash đều dùng tab3.
             */
            function tabNameFromHash() {
                const raw = (window.location.hash || '').replace(/^#/, '').trim().toLowerCase();
                if (pageRole === 'teacher') {
                    return 'tab3';
                }
                if (raw === '1' || raw === 'tab1') return 'tab1';
                if (raw === '2' || raw === 'tab2') return 'tab2';
                if (raw === '3' || raw === 'tab3') return 'tab3';
                return 'tab1';
            }

            function hashForTab(tabName) {
                return '#' + String(tabName).replace(/^tab/, '');
            }

            function applyTab(tabName) {
                const $btn = $('.tab-btn[data-target="#' + tabName + '"]');
                if (!$btn.length) {
                    return;
                }

                $('.tab-btn').removeClass(activeClasses).addClass(inactiveClasses);
                $btn.removeClass(inactiveClasses).addClass(activeClasses);

                moveTabIndicator($btn);

                const targetId = '#' + tabName;
                const filterId = $btn.data('filter');

                $('.tab-content').hide();
                $(targetId).removeClass('hidden').fadeIn(200);

                $('.filter-content').hide();
                $(filterId).fadeIn(200);

                if (!loadedTabs[tabName]) {
                    loadTab(tabName);
                }
            }

            const tabScripts = {
                'tab1': '/js/exam-schedule-result/exam-schedule/exam-schedule.js',
                'tab2': '/js/exam-schedule-result/exam-history/exam-history.js',
                'tab3': '/js/exam-schedule-result/exam-grading/exam-grading.js'
            };

            function loadTab(tabName) {
                const targetElement = $('#' + tabName + ' .tab-body');
                const url = window.routes.loadTabPartial.replace(':tab', tabName);

                // Bật trạng thái loading
                targetElement.html(`
                    <div class="flex flex-col justify-center items-center py-12 text-slate-500">
                        <div class="relative">
                            <i data-lucide="loader-2" class="animate-spin w-8 h-8 text-blue-500"></i>
                            <div class="absolute inset-0 w-8 h-8 border-1 border-blue-200 rounded-full animate-pulse"></div>
                        </div>
                        <span class="mt-3 text-sm font-medium tracking-wide">Đang tải dữ liệu...</span>
                    </div>
                `);
                if (typeof lucide !== 'undefined') lucide.createIcons();

                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function (response) {
                        // Nhét HTML nhận được từ server vào div
                        targetElement.html(response);

                        // Đánh dấu là đã load để không gọi lại lần sau
                        loadedTabs[tabName] = true;

                        // Khởi tạo lại các thư viện (ví dụ icon, select2, tooltip) vì DOM vừa được render mới
                        if (typeof lucide !== 'undefined') {
                            lucide.createIcons();
                        }

                        let scriptUrl = tabScripts[tabName];

                        if(scriptUrl){
                            // Kiểm tra xem script đã tồn tại chưa, nếu chưa thì thêm vào
                            // Thêm ?v=... để trình duyệt luôn load bản mới nhất khi có thay đổi
                            const version = new Date().getTime(); 
                            const scriptWithVersion = `${scriptUrl}?v=${version}`;

                            if ($(`script[src^="${scriptUrl}"]`).length === 0) {
                                let scriptTag = document.createElement('script');
                                scriptTag.src = scriptWithVersion;
                                document.body.appendChild(scriptTag);
                            }
                        }

                    },
                    error: function () {
                        targetElement.html('<div class="text-red-500 py-10">Đã xảy ra lỗi khi tải dữ liệu!</div>');
                    }
                });
            }

            function syncTabFromHash() {
                applyTab(tabNameFromHash());
            }

            // Load đúng tab theo #1 / #2 / #3 (hash không gửi lên server)
            syncTabFromHash();

            $(window).on('hashchange', function () {
                syncTabFromHash();
            });

            $(window).on('resize', function () {
                const $activeBtn = $('.tab-btn.active');
                moveTabIndicator($activeBtn);
            });

            // Click: đổi hash (admin) để đồng bộ URL; logic hiển thị dùng chung applyTab
            $('.tab-btn').on('click', function () {
                const targetId = $(this).data('target');
                const tabName = targetId.replace('#', '');
                if (pageRole === 'admin') {
                    const h = hashForTab(tabName);
                    if (window.location.hash !== h) {
                        window.location.hash = h;
                    } else {
                        applyTab(tabName);
                    }
                } else {
                    applyTab(tabName);
                }
            });
        });
    </script>
@endsection