@extends('web.layouts.layout')

@section('content')

    <main class="mt-100">
        <!-- services_det-->
        <section class="courses_pg">
            <div class="container">
                <ul class="levels_nav justify-content-center nav nav-pills mb-5 stages-section"
                    id="pills-tab" role="tablist">
                    {{-- STAGES --}}
                    @if(isset($stages) && $stages->isNotEmpty())
                        @foreach($stages as $stage)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link"
                                        id="pills-levelTab{{ $stage->id }}-tab"
                                        data-id="{{ $stage->id }}"
                                        data-bs-toggle="pill"
                                        data-bs-target="#pills-levelTab{{ $stage->id }}"
                                        type="button" role="tab"
                                        aria-controls="pills-levelTab{{ $stage->id }}"
                                        aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                                    {{ $stage->title }}
                                </button>
                            </li>
                        @endforeach
                    @endif
                </ul>
                {{-- GRADES --}}
                <div class="tab-content col-lg-9 mx-auto grades-section" id="pills-tabContent">
                    @if(isset($stages) && $stages->isNotEmpty())
                        @foreach($stages as $stage)
                            <div class="tab-pane fade" id="pills-levelTab{{ $stage->id }}" role="tabpanel"
                                 aria-labelledby="pills-levelTab{{ $stage->id }}-tab">
                                <div class="level_tab">
                                    <div class="swiper-container levels_swiper pb-4" id="nav-tab" role="tablist">
                                        <div class="swiper-wrapper pb-0 nav nav-pills gard_pills">
                                            @if($stage->grades->isNotEmpty())
                                                @foreach($stage->grades as $grade)
                                                    <div class="swiper-slide tab"
                                                         data-tab="tab-{{ $grade->id }}"
                                                         data-id="{{ $grade->id }}">
                                                        <div class="level_item ">
                                                            <div class="content">
                                                                {{ $grade->currentDescription->title ?? "" }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                        <div class="swiper-pagination"></div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>

                <div class="scroll_grad mt-5">
                    <div class="grad_tabs_content">
                        <div id="tab-1" class="tab-content sem_box current">

                            <div class="sem_tabs row justify-content-center mb-5 terms-section d-none">
                                {{-- TERMS --}}
                                @if(isset($terms) && $terms->isNotEmpty())
                                    @foreach($terms as $term)
                                        <div
                                            class="tab col-lg-3 {{ $term->status === 'inactive' ? 'disabled_butn' : '' }}"
                                            @if($term->status === 'active') data-tab="tabSem-{{ $term->id }}"
                                            data-id="{{ $term->id }}" @endif>
                                            <div class="semester_butn">
                                                <span>{{ $term->title }}</span>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>

                            <div class="courses-section">
                                <div class="row" id="course-list">
                                    {{-- Courses will be loaded here --}}
                                </div>
                                {{-- $courses->links('vendor.pagination.custom2') --}}
                                <div class="text-center mt-4" id="load-more-wrapper" style="display: none;">
                                    <button type="button" id="load-more"
                                            class="btn btn-primary half-rounded hvr-txt-trans">
                                        <div class="txt" data-text="{{ __('general.load_more') }}">
                                      <span class="fs-7">
                                         {{ __('general.load_more') }}
                                        <img data-src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                             src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                             alt="arrows"
                                             class="lazyload img_contain ms-2"/>
                                      </span>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')

    <script>
        var swiper = new Swiper('.courses_pg .levels_swiper ', {
            // loop: true,
            speed: 900,
            slidesPerView: 1,
            spaceBetween: 15,
            observer: true,
            observeParents: true,
            // autoplay: {
            //     delay: 2500,
            // },
            navigation: {
                nextEl: '.courses_pg .swiper-button-next',
                prevEl: '.courses_pg .swiper-button-prev',
            },
            pagination: {
                el: '.courses_pg .swiper-pagination',
                clickable: true
            },
            breakpoints: {
                640: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                1024: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
            }
        });
    </script>
    <script>
        /*$(".level_item").click(function (e) {
            e.preventDefault();
            $('html,body')
                .animate({
                    scrollTop: $(".scroll_grad").offset().top
                }, 'slow');
        });*/
    </script>
    <script>
        //[stages]
        $('.stages-section .nav-link').on('click', function () {
            let stageId = $(this).data('id');

            $('#course-list').html('');
            $('#load-more-wrapper').hide();
            loadCourses(1, null, {source: 'stagesCard'});
        });

        //tabs levels [grades]
        $('.levels_swiper .swiper-slide').click(function () {
            activateGrade($(this));
        });
    </script>

    <script>
        let currentPageUrl = null;
        let currentTermId = null;
        const loadMoreButton = $('#load-more');

        // Helper to get query parameter
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        const stageId = getQueryParam('stage_id');
        const gradeId = getQueryParam('grade_id');
        const termId  = getQueryParam('term_id');

        if (stageId) {
            // Activate the button with data-id equal to stageId
            const $stageButton = $('.stages-section.nav-pills .nav-link[data-id="' + stageId + '"]');
            $stageButton.addClass('active');
            $('#pills-levelTab' + stageId).addClass('active show');
        } else {
            // Default behavior for first tab
            $('.stages-section.nav-pills .nav-item:first-child .nav-link').addClass('active');
            $('.grades-section.tab-content .tab-pane:first-child').addClass('active show');
        }

        if (gradeId) {
            const $gradeSlide = $('.levels_swiper .swiper-slide[data-id="' + gradeId + '"]');
            activateGrade($gradeSlide);
        }

        if (termId) {
            const $termTab = $(`.terms-section .tab[data-id="${termId}"]`);
            activateTerm($termTab);
        }

        function activateGrade($gradeSlide) {
            if (!$gradeSlide.length) return;

            $('.levels_swiper .swiper-slide').removeClass('active current');
            $gradeSlide.addClass('active current');

            $('.terms-section').removeClass('d-none');

            $('#course-list').html('');
            $('#load-more-wrapper').hide();
            loadCourses(1, null, {source: 'gradesCard'});
        }

        function activateTerm($termTab) {
            if (!$termTab.length || $termTab.hasClass('disabled_butn')) return;

            // UI updates
            $('.sem_box .tab').removeClass('current');
            $termTab.addClass('current');

            $('.sem_box .tab .semester_butn').removeClass('active');
            $termTab.find('.semester_butn').addClass('active');

            // Logic
            currentTermId = $termTab.data('id');

            $('#course-list').html('');
            $('#load-more-wrapper').hide();
            loadCourses(1, null, { source: 'termsCard' });
        }

        //[terms]
        $(document).on('click', '.terms-section .tab', function () {
            activateTerm($(this));
        });

        loadMoreButton.on('click', function () {
            if (currentPageUrl) {
                loadCourses(null, currentPageUrl, {source: 'loadMoreButton'});
            }
        });

        function loadCourses(page = 1, url = null, params = {}) {
            if (!currentTermId) {
                return;
            }

            const gradeId = $('.grades-section .tab.current').data('id') || '';
            const stageId = $('.stages-section .nav-link.active').data('id') || '';
            const fetchUrl = url ||
                `{{ route('web.courses.list') }}?term_id=${currentTermId}&grade_id=${gradeId}&stage_id=${stageId}&page=${page}`;

            const showLoadMoreLoader = params.source === 'loadMoreButton';
            const showFullLoader = ['stagesCard', 'gradesCard', 'termsCard'].includes(params.source);

            $.ajax({
                url: fetchUrl,
                type: 'GET',
                beforeSend: function () {
                    if (showLoadMoreLoader) {
                        const originalContent = loadMoreButton.html();
                        loadMoreButton.data('original-content', originalContent);

                        // Disable the submit button and show a loading spinner
                        loadMoreButton.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> {{ __("general.loading") }}');
                    }

                    if (showFullLoader) {
                        $('#course-loader').remove(); // Remove if already exists
                        $('#course-list').before(`
                            <div id="course-loader" class="text-center my-4">
                                <span class="spinner-border text-primary" role="status" aria-hidden="true"></span>
                            </div>
                        `);
                    }
                },
                success: function (res) {
                    $('#course-list').append(res.html);

                    if (res.hasMorePages) {
                        currentPageUrl = res.nextPageUrl;
                        $('#load-more-wrapper').show();
                    } else {
                        $('#load-more-wrapper').hide();
                    }
                },
                error: function (xhr) {
                    displayAjaxError(xhr);
                },
                complete: function (xhr, status) {
                    if (showLoadMoreLoader) {
                        // Enable the submit button and reset it
                        const originalContent = loadMoreButton.data('original-content');
                        loadMoreButton.prop('disabled', false).html(originalContent);
                    }

                    if (showFullLoader) {
                        $('#course-loader').remove();
                    }
                },
            });
        }
    </script>

@endpush