@extends('web.layouts.layout')

@section('content')

    <main>

        <!-- Start Header -->
        <header class="header section pb-0">
            <div class="container-fluid ps-lg-5 pe-lg-0">
                <div class="row align-items-center">
                    <div class="col-lg-7">
                        <div class="txt_box mb-5 ps-lg-5">
                            <h1 class="mb-3">
                                <b>{{ $banner->currentDescription->texts['text_1'] ?? "" }}</b> {{ $banner->currentDescription->texts['text_2'] ?? "" }}
                            </h1>
                            <h1 class="">
                                <b>{{ $banner->currentDescription->texts['text_3'] ?? "" }}</b> <span
                                    class=""> ... </span> {{ $banner->currentDescription->texts['text_4'] ?? "" }}
                                <img src="{{asset('assets/web/images/icons/arrow_header.svg')}}" class="arrow" alt="">
                                <b>{{ $banner->currentDescription->texts['text_5'] ?? "" }}</b>
                            </h1>
                            <div class="p col-lg-8 my-5">
                                {{ strip_tags($banner->currentDescription->description ?? "") }}
                            </div>
                            <div class="butns d-flex align-items-center mt-5">
                                <a href="{{ route('web.courses.index') }}" class="butn primary_butn">
                                    <span> {{ __('courses::courses.browse_all_courses') }} </span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <img src="{{getImage($banner->image, 'assets/web/images/header-1.png')}}"
                             class="headerImg secImg"
                             alt=""/>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/web/images/pattern_header.svg')}}" class="pattern" alt=" "/>
        </header>

        <!-- Start section -->
        <section class="courses_sec section bg-white courses-section" id="first-category-section">
            <div class="container">
                <h2 class="title_w_shape mb-4"> {{ $firstCategory->name ?? "" }} </h2>
                <div class="d-flex align-items-center justify-content-between mb-5">
                    <ul class="nav nav-pills " id="pills-tab" role="tablist">
                        @if($subjects->isNotEmpty())
                            @foreach($subjects as $subject)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link load-courses"
                                            data-category-id="{{ $firstCategory->id ?? null }}"
                                            data-subject-id="{{ $subject->id }}"
                                            id="subject-{{ $subject->id }}-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#subject-{{ $subject->id }}" type="button" role="tab"
                                            aria-controls="subject-{{ $subject->id }}"
                                            aria-selected="true">
                                        {{ $subject->title }}
                                    </button>
                                </li>
                            @endforeach
                        @endif
                    </ul>

                    <a href="{{ route('web.courses.index', ['category_id' => $firstCategory->id]) }}"
                       class="butn primary_butn ms-4">
                        <span>{{ __('courses::courses.all_courses') }}</span>
                    </a>
                </div>
                <div class="tab-content" id="pills-tabContent">
                    <div class="category-courses-wrapper">
                        <div class="swiper-container courses_swiper">
                            <div class="swiper-wrapper category-courses">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/web/images/vector-12.svg')}}" class="vector" alt=""/>
            <img src="{{asset('assets/web/images/vector-8.svg')}}" class="vector_bl" alt="">
        </section>

        <!-- Start section -->
        <section class="courses_sec section courses-section" id="other-category-section">
            <div class="container">
                <h2 class="title_w_shape mb-4"> {{ __('courses::courses.other_courses') }} </h2>
                <div class="d-flex align-items-center justify-content-between mb-5">
                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        @if($otherCategories->isNotEmpty())
                            @foreach($otherCategories as $category)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link load-courses"
                                            data-category-id="{{ $category->id ?? null }}"
                                            id="category-{{ $category->id }}-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#category-{{ $category->id }}" type="button" role="tab"
                                            aria-controls="category-{{ $category->id }}"
                                            aria-selected="true">
                                        {{ $category->name }}
                                    </button>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                    <a href="{{ route('web.courses.index', ['category_id' => $otherCategories->pluck('id')->toArray()]) }}"
                       class="butn primary_butn ms-4">
                        <span> {{ __('courses::courses.all_courses') }} </span>
                    </a>
                </div>
                <div class="category-courses-wrapper">
                    <div class="row category-courses">

                    </div>
                </div>
            </div>
            <img src="{{asset('assets/web/images/vector-1.svg')}}" class="vector" alt=""/>
            <img src="{{asset('assets/web/images/vector-14.svg')}}" class="vector_bl" alt="">
        </section>

        <!-- Start section -->
        <section class="join_sec section">
            <div class="container">
                <div class="inner">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="img_box">
                                <img src="{{getImage($joinUsTeacherBanner->image, 'assets/web/images/join-1.png')}}"
                                     class="secImg"
                                     alt="{{ $joinUsTeacherBanner->currentDescription->title ?? "" }}"/>
                            </div>
                        </div>
                        <div class="col-lg-6 order_md_1">
                            <div class="txt-box zi-5">
                                <h1 class="fw-bold"> {{ $joinUsTeacherBanner->currentDescription->subtitle ?? "" }} </h1>
                                <div class="p my-4 col-lg-10">
                                    {{ strip_tags($joinUsTeacherBanner->currentDescription->description ?? "") }}
                                </div>
                                <a href="{{ route('web.users.register.code', ['role' => 'teacher']) }}"
                                   class="butn primary_butn px-5">
                                    <span> {{ __('main.join_now') }} </span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <img src="{{asset('assets/web/images/vector-2.svg')}}" class="vector_tr" alt="">
                    <img src="{{asset('assets/web/images/vector-3.svg')}}" class="vector_tr2" alt="">
                    <img src="{{asset('assets/web/images/vector-4.svg')}}" class="vector_br" alt="">
                    <img src="{{asset('assets/web/images/vector-5.svg')}}" class="vector_tl" alt="">
                    <img src="{{asset('assets/web/images/vector-6.svg')}}" class="vector_bl" alt="">
                    <img src="{{asset('assets/web/images/vector-7.svg')}}" class="vector_bl2" alt="">
                    <img src="{{asset('assets/web/images/vector-8.svg')}}" class="vector_l" alt="">


                </div>
            </div>
            <img src="{{asset('assets/web/images/vector-1.svg')}}" class="vector" alt=""/>
            <img src="{{asset('assets/web/images/vector-15.svg')}}" class="vector2" alt=""/>
        </section>

        <!-- Start section -->
        <section class="products_sec section">
            <div class="container">
                <div class="d-flex align-items-center justify-content-between mb-5">
                    <h2 class="title_w_shape"> {{ __('products::products.products') }} </h2>
                    <a href="{{ route('web.products.index') }}" class="butn primary_butn">
                        <span> {{ __('products::products.all_products') }} </span>
                    </a>
                </div>
                <div class="row">
                    @if($products->isNotEmpty())
                        @foreach($products as $product)
                            <div class="col-lg-4">
                                @include('web.products::_product_card', ['product' => $product])
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
            <img src="{{asset('assets/web/images/vector-9.svg')}}" class="bg" alt=""/>
        </section>

        <!-- Start section -->
        <section class="join_sec2 section">
            <div class="container">
                <div class="inner">
                    <div class="row align-items-center">
                        <div class="col-lg-5">
                            <img src="{{getImage($joinUsStudentBanner->image, 'assets/web/images/join-2.svg')}}"
                                 class="secImg"
                                 alt="{{ $joinUsStudentBanner->currentDescription->title ?? "" }}"/>
                        </div>
                        <div class="col-lg-7 order_md_1">
                            <div class="txt_box">
                                <div class="zi-5">
                                    <h1 class="title fw-bold"> {{ $joinUsStudentBanner->currentDescription->subtitle ?? "" }} </h1>
                                    <div class="p my-4 col-lg-10">
                                        {{ strip_tags($joinUsStudentBanner->currentDescription->description ?? "") }}
                                    </div>
                                    @guest
                                        <a href="{{ getRegisterRoute() }}" class="butn primary_butn px-5">
                                            <span> {{ __('main.join_now') }} </span>
                                        </a>
                                    @endguest
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src="{{asset('assets/web/images/vector-10.svg')}}" class="vector_tr" alt=""/>
                    <img src="{{asset('assets/web/images/vector-11.svg')}}" class="vector_bl" alt=""/>
                    <img src="{{asset('assets/web/images/vector-12.svg')}}" class="vector_tc" alt=""/>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="testmonial_sec section">
            <div class="container">
                <h2 class="title_w_shape mb-5"> {{ __('main.customer_reviews') }} </h2>

                <div class="swiper-container feedback_swiper pb-5">
                    <div class="swiper-wrapper pb-4">
                        @if($customerReviews->isNotEmpty())
                            @foreach($customerReviews as $review)
                                <div class="swiper-slide">
                                    <div class="feedback_card col-lg-10 mx-auto">
                                        <div class="inner">
                                            <div class="prof_data">
                                                <img src="{{getImage($review->image)}}" class="avatar"
                                                     alt="{{ $review->title }}"/>
                                                <h5 class="name fw-bold"> {{ $review->title }} </h5>
                                                <div class="stars mt-3">
                                                    @for($r = 1; $r <= 5; $r++)
                                                        @if($review->rating >= $r)
                                                            <i class="fa-solid fa-star active"></i>
                                                        @else
                                                            <i class="fa-solid fa-star"></i>
                                                        @endif
                                                    @endfor
                                                </div>
                                            </div>
                                            <div class="p">
                                                {{ strip_tags($review->description) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>

            <img src="{{asset('assets/web/images/vector-13.svg')}}" class="vector_l" alt=""/>
        </section>

    </main>

@endsection

@push('stack_scripts')
    <script>
        //$('.nav-pills .nav-item:first-child .nav-link').addClass('active');
        //$('.tab-content .tab-pane:first-child').addClass('active show');
    </script>

    <script>
        function loadCourses(sectionId, categoryId, subjectId = null) {
            let parent = $(sectionId);
            $.ajax({
                url: '{{ route('web.courses.load') }}',
                type: 'GET',
                data: {
                    category_id: categoryId,
                    subject_id: subjectId
                },
                beforeSend: function () {
                    parent.find('.category-courses-wrapper').prepend('<div class="index-spinner"><i class="fas fa-spinner fa-spin"></i> {{-- __('general.loading') --}}</div>');
                },
                success: function (response) {
                    parent.find('.category-courses').html(response.html);
                },
                error: function (xhr, status, error) {
                    displayAjaxError(xhr);
                },
                complete: function () {
                    parent.find('.category-courses-wrapper .index-spinner').remove();
                }
            });
        }

        //Select user card
        $(document).on('click', '.load-courses', function () {
            const $button = $(this);
            const categoryId = $button.data('categoryId');
            const subjectId = $button.data('subjectId');
            const $coursesSection = $button.closest('.courses-section');

            $coursesSection.find('.load-courses').removeClass('active');
            $button.addClass('active');

            loadCourses(`#${$coursesSection.attr('id')}`, categoryId, subjectId);
        });
        $('#first-category-section .load-courses').first().trigger('click');
        $('#other-category-section .load-courses').first().trigger('click');
    </script>
@endpush