@extends(getTemplate().'.layouts.app')

@if(request()->is('/'))
    @push('scripts_top')
        <script type="application/ld+json">{!! json_encode([
            '@context' => 'https://schema.org',
            '@type' => 'WebSite',
            'name' => trans('home.seo_brand_title'),
            'url' => url('/'),
        ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
    @endpush
@endif

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css">
    @if(!request()->is('/'))
        <link rel="stylesheet" href="/assets/default/vendors/owl-carousel2/owl.carousel.min.css">
        {{-- لوحة التحكم القديمة + سلايدر منتسوري: لا نحمّلها على "/" لتفادي تعارض ألوان وأزرار السويبر مع الـpremium --}}
        <link rel="stylesheet" href="/assets/default/css/montessori-home.css">
    @endif
    <link rel="stylesheet" href="/assets/vendors/fontawesome/css/all.min.css"/>
@endpush

@section('content')
    @if(request()->is('/'))
        @include('web.default.includes.home._premium_home_shell')
    @else
        @include('web.default.includes.home_graduate_videos_section')
        @include('web.default.includes.home_courses_promo_section')

    {{-- <div class="stats-container stats-container-desktop">
        <div class="container">
            <div class="row">
                @if($cards->count() > 0)

                    @foreach($cards as $card)
                        <div class="col-sm-6 col-lg-3 mt-25 mt-lg-0">
                            <a href="{{$card->url}}">
                                <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">
                                    <div class="">
                                        <img src="{{asset('assets/default/img/stats/'.$card->image)}}" alt="" style="width: 100px;"/>
                                    </div>
                                    <strong class="stat-number mt-10">{{ $card->subtitle }}</strong>
                                    <h4 class="stat-title">{{ $card->title }}</h4>
                                    <p class="stat-desc mt-10">{{ $card->description }}</p>
                                </div>
                            </a>
                        </div>
                    @endforeach

                @else

                    <div class="col-sm-6 col-lg-3 mt-25 mt-lg-0">
                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">
                            <div class="stat-icon-box teacher">
                                <img src="/assets/default/img/stats/teacher.svg" alt=""/>
                            </div>
                            <strong class="stat-number mt-10">{{ $skillfulTeachersCount }}</strong>
                            <h4 class="stat-title">{{ trans('home.skillful_teachers') }}</h4>
                            <p class="stat-desc mt-10">{{ trans('home.skillful_teachers_hint') }}</p>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3 mt-25 mt-lg-0">
                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">
                            <div class="stat-icon-box student">
                                <img src="/assets/default/img/stats/student.svg" alt=""/>
                            </div>
                            <strong class="stat-number mt-10">{{ $studentsCount }}</strong>
                            <h4 class="stat-title">{{ trans('home.happy_students') }}</h4>
                            <p class="stat-desc mt-10">{{ trans('home.happy_students_hint') }}</p>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3 mt-25 mt-lg-0">
                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">
                            <div class="stat-icon-box video">
                                <img src="/assets/default/img/stats/video.svg" alt=""/>
                            </div>
                            <strong class="stat-number mt-10">{{ $liveClassCount }}</strong>
                            <h4 class="stat-title">{{ trans('home.live_classes') }}</h4>
                            <p class="stat-desc mt-10">{{ trans('home.live_classes_hint') }}</p>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3 mt-25 mt-lg-0">
                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">
                            <div class="stat-icon-box course">
                                <img src="/assets/default/img/stats/course.svg" alt=""/>
                            </div>
                            <strong class="stat-number mt-10">{{ $offlineCourseCount }}</strong>
                            <h4 class="stat-title">{{ trans('home.offline_courses') }}</h4>
                            <p class="stat-desc mt-10">{{ trans('home.offline_courses_hint') }}</p>
                        </div>
                    </div>

                @endif
            </div>
        </div>
    </div>--}}
    {{--    <div class="stats-container stats-container-mobile">--}}
    {{--        <div class="swiper-container latest-bundle-swiper px-12">--}}
    {{--            <div class="swiper-wrapper py-20">--}}
    {{--                <div class="swiper-slide">--}}
    {{--                    <div class="col-sm-12 col-md-6 col-lg-3 mt-25 mt-lg-0">--}}
    {{--                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">--}}
    {{--                            <div class="stat-icon-box teacher">--}}
    {{--                                <img src="/assets/default/img/stats/teacher.svg" alt=""/>--}}
    {{--                            </div>--}}
    {{--                            <strong class="stat-number mt-10">{{ $skillfulTeachersCount }}</strong>--}}
    {{--                            <h4 class="stat-title">{{ trans('home.skillful_teachers') }}</h4>--}}
    {{--                            <p class="stat-desc mt-10">{{ trans('home.skillful_teachers_hint') }}</p>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}
    {{--                </div>--}}
    {{--                <div class="swiper-slide">--}}
    {{--                    <div class="col-sm-12 col-md-6 col-lg-3 mt-25 mt-lg-0">--}}
    {{--                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">--}}
    {{--                            <div class="stat-icon-box student">--}}
    {{--                                <img src="/assets/default/img/stats/student.svg" alt=""/>--}}
    {{--                            </div>--}}
    {{--                            <strong class="stat-number mt-10">{{ $studentsCount }}</strong>--}}
    {{--                            <h4 class="stat-title">{{ trans('home.happy_students') }}</h4>--}}
    {{--                            <p class="stat-desc mt-10">{{ trans('home.happy_students_hint') }}</p>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}
    {{--                </div>--}}
    {{--                <div class="swiper-slide">--}}
    {{--                    <div class="col-sm-12 col-md-6 col-lg-3 mt-25 mt-lg-0">--}}
    {{--                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">--}}
    {{--                            <div class="stat-icon-box video">--}}
    {{--                                <img src="/assets/default/img/stats/video.svg" alt=""/>--}}
    {{--                            </div>--}}
    {{--                            <strong class="stat-number mt-10">{{ $liveClassCount }}</strong>--}}
    {{--                            <h4 class="stat-title">{{ trans('home.live_classes') }}</h4>--}}
    {{--                            <p class="stat-desc mt-10">{{ trans('home.live_classes_hint') }}</p>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}
    {{--                </div>--}}
    {{--                <div class="swiper-slide">--}}
    {{--                    <div class="col-sm-12 col-md-6 mt-25 mt-lg-0">--}}
    {{--                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">--}}
    {{--                            <div class="stat-icon-box course">--}}
    {{--                                <img src="/assets/default/img/stats/course.svg" alt=""/>--}}
    {{--                            </div>--}}
    {{--                            <strong class="stat-number mt-10">{{ $offlineCourseCount }}</strong>--}}
    {{--                            <h4 class="stat-title">{{ trans('home.offline_courses') }}</h4>--}}
    {{--                            <p class="stat-desc mt-10">{{ trans('home.offline_courses_hint') }}</p>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}
    {{--                </div>--}}

    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}


    @foreach($homeSections as $homeSection)

        @if($homeSection->name == \App\Models\HomeSection::$latest_classes)
            @continue
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$featured_classes and !empty($featureWebinars) and !$featureWebinars->isEmpty())
            <section class="home-sections section-premium section-skin-cream container reveal-up">
                <div class="px-20 px-md-0">
                    <h2 class="section-title">{{ trans('home.featured_classes') }}</h2>
                    <p class="section-hint">{{ trans('home.featured_classes_hint') }}</p>
                </div>

                <div class="feature-slider-container position-relative d-flex justify-content-center mt-10">
                    <div class="swiper-container features-swiper-container pb-25">
                        <div class="swiper-wrapper py-10">
                            @foreach($featureWebinars as $feature)
                                <div class="swiper-slide">

                                    <a href="{{ $feature->webinar->getUrl() }}">
                                        <div class="feature-slider d-flex h-100" style="background-image: url('{{ $feature->webinar->getImage() }}')">
                                            <div class="mask"></div>
                                            <div class="p-5 p-md-25 feature-slider-card">
                                                <div class="d-flex flex-column feature-slider-body position-relative h-100">
                                                    @if($feature->webinar->bestTicket() < $feature->webinar->price)
                                                        <span class="badge badge-danger mb-2 ">{{ trans('public.offer',['off' => $feature->webinar->bestTicket(true)['percent']]) }}</span>
                                                    @endif
                                                    <a href="{{ $feature->webinar->getUrl() }}">
                                                        <h3 class="card-title mt-1">{{ $feature->webinar->title }}</h3>
                                                    </a>

                                                    <div class="user-inline-avatar mt-15 d-flex align-items-center">
                                                        <div class="avatar bg-gray200">
                                                            <img src="{{ $feature->webinar->teacher->getAvatar() }}" class="img-cover" alt="{{ $feature->webinar->teacher->full_naem }}">
                                                        </div>
                                                        <a href="{{ $feature->webinar->teacher->getProfileUrl() }}" target="_blank" class="user-name font-14 ml-5">{{ $feature->webinar->teacher->full_name }}</a>
                                                    </div>

                                                    <p class="mt-25 feature-desc text-gray">{{ $feature->description }}</p>

                                                    @include('web.default.includes.webinar.rate',['rate' => $feature->webinar->getRate()])

                                                    <div class="feature-footer mt-auto d-flex align-items-center justify-content-between">
                                                        <div class="d-flex justify-content-between">
                                                            <div class="d-flex align-items-center">
                                                                <i data-feather="clock" width="20" height="20" class="webinar-icon"></i>
                                                                <span class="duration ml-5 text-dark-blue font-14">{{ convertMinutesToHourAndMinute($feature->webinar->duration) }} {{ trans('home.hours') }}</span>
                                                            </div>

                                                            <div class="vertical-line mx-10"></div>

                                                            <div class="d-flex align-items-center">
                                                                <i data-feather="calendar" width="20" height="20" class="webinar-icon"></i>
                                                                <span class="date-published ml-5 text-dark-blue font-14">{{ dateTimeFormat(!empty($feature->webinar->start_date) ? $feature->webinar->start_date : $feature->webinar->created_at,'j M Y') }}</span>
                                                            </div>
                                                        </div>

                                                        <div class="feature-price-box">
                                                            @if(!empty($feature->webinar->price ) and $feature->webinar->price > 0)
                                                                @if($feature->webinar->bestTicket() < $feature->webinar->price)
                                                                    <span class="real">{{ handlePrice($feature->webinar->bestTicket()) }}</span>
                                                                @else
                                                                    {{ handlePrice($feature->webinar->price) }}
                                                                @endif
                                                            @else
                                                                {{ trans('public.free') }}
                                                            @endif


                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="swiper-pagination features-swiper-pagination"></div>
                </div>
            </section>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$latest_bundles and !empty($latestBundles) and !$latestBundles->isEmpty())
        <div class="section-premium section-skin-cream py-5 px-4 reveal-up">
            <section class="home-sections home-sections-swiper section-premium section-skin-cream container reveal-up">
                <div class="d-flex justify-content-between ">
                    <div>
                        <h2 class="section-title">{{ trans('update.latest_bundles') }}</h2>
                        <p class="section-hint">{{ trans('update.latest_bundles_hint') }}</p>
                    </div>

                    <a href="/classes?type[]=bundle" class="btn btn-border-white">{{ trans('home.view_all') }}</a>
                </div>

                <div class="mt-10 position-relative">
                    <div class="swiper-container latest-bundle-swiper px-12">
                        <div class="swiper-wrapper py-20">
                            @foreach($latestBundles as $latestBundle)
                                <div class="swiper-slide">
                                    @include('web.default.includes.webinar.grid-card',['webinar' => $latestBundle])
                                </div>
                            @endforeach

                        </div>
                    </div>

                    <div class="d-flex justify-content-center">
                        <div class="swiper-pagination bundle-webinars-swiper-pagination"></div>
                    </div>
                </div>
            </section>
            </div>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$best_rates and !empty($bestRateWebinars) and !$bestRateWebinars->isEmpty())
            <section class="home-sections section-premium section-skin-cream container reveal-up">
                <div class="d-flex justify-content-between">
                    <div>
                        <h2 class="section-title">{{ trans('home.best_rates') }}</h2>
                        <p class="section-hint">{{ trans('home.best_rates_hint') }}</p>
                    </div>

                    <a href="/classes?sort=best_rates" class="btn btn-border-white">{{ trans('home.view_all') }}</a>
                </div>

                <div class="mt-10 position-relative">
                    <div class="swiper-container best-rates-webinars-swiper px-12">
                        <div class="swiper-wrapper py-20">
                            @foreach($bestRateWebinars as $bestRateWebinar)
                                <div class="swiper-slide">
                                    @include('web.default.includes.webinar.grid-card',['webinar' => $bestRateWebinar])
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="d-flex justify-content-center">
                        <div class="swiper-pagination best-rates-webinars-swiper-pagination"></div>
                    </div>
                </div>
            </section>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$trend_categories and !empty($trendCategories) and !$trendCategories->isEmpty())
         <div class="section-premium section-skin-cream py-5 px-4 reveal-up">
            <section class="home-sections home-sections-swiper section-premium section-skin-cream container reveal-up">
                {{--<h2 class="section-title">{{ trans('home.trending_categories') }}</h2>
                <p class="section-hint">{{ trans('home.trending_categories_hint') }}</p>--}}

                <div class="row mt-40 trending-desktop">
                    <section class="sliders-section mt-4 trending-categories-section">
                        <div class="container">
                            <div class="row">
                                <div class="col-12">
                                    <div class="trending-swipper-container arrow-style swiper p-0 radius-8">
                                        <div class="swiper-wrapper">
                                           @foreach($trendCategories as $trend)
                                            <div class="swiper-slide">
                                                @if($trend->url)
                                    <a href="{{ $trend->url }}">
                                    @else
                                    <a href="#">
                                        @endif
                                        <div class="trending-card d-flex flex-column align-items-center w-100 mb-3">
                                            <div class="trending-image d-flex align-items-center justify-content-center w-100" style="background-color: {{ $trend->color }}">
                                                <div class="icon">
                                                    <img src="{{ $trend->getIcon() }}" class="trending-icon-img" alt="{{ $trend->title }}">
                                                </div>
                                            </div>
                                           
                                            <div class="item-count px-10 px-lg-20 py-5 py-lg-10">
                                                {{ $trend->courses_no }}
                                            </div>

                                            <h3 class="trending-title"><b>{{ $trend->title }}</b></h3>
                                        </div>
                                    </a>
                                            </div>
                                        @endforeach
                                        </div>
                                        <!-- next / prev arrows -->
                                        <div class="swiper-button-next swiper-btn">
                                            <svg height="44px" width="44px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 155.139 155.139" xml:space="preserve" fill="#2563eb"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#2563eb;" points="155.139,77.566 79.18,1.596 79.18,45.978 0,45.978 0,109.155 79.18,109.155 79.18,153.542 "></polygon> </g> </g> </g></svg>
                                        </div>
                                        <div class="swiper-button-prev swiper-btn">
                                           <svg fill="#2563eb" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60.731 60.73" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon points="0,30.365 29.737,60.105 29.737,42.733 60.731,42.729 60.731,18.001 29.737,17.999 29.737,0.625 "></polygon> </g> </g> </g></svg>
                                        </div>
                                        <!-- !next / prev arrows -->
                                        
                                        <!-- pagination dots -->
                                        <div class="swiper-pagination trending-swiper-pagination"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>

                {{--                <div class="row mt-40 trending-mobile">--}}
                {{--                    <div class="swiper-container latest-bundle-swiper px-12">--}}
                {{--                        <div class="swiper-wrapper py-20" style="margin-top: -40px;margin-bottom: -100px;">--}}
                {{--                            @foreach($trendCategories as $trend)--}}
                {{--                                <div class="swiper-slide">--}}
                {{--                                    <div class="col-sm-6 col-md-6 col-lg-3 mt-25 mt-lg-0" style="padding: 50px;">--}}
                {{--                                        <a href="{{ $trend->url }}">--}}
                {{--                                            <div class="trending-card d-flex flex-column align-items-center w-100">--}}
                {{--                                                <div class="trending-image d-flex align-items-center justify-content-center w-100" style="background-color: {{ $trend->color }}">--}}
                {{--                                                    <div class="icon mb-3">--}}
                {{--                                                        <img src="{{ $trend->getIcon() }}" width="10" class="img-cover" alt="{{ $trend->title }}">--}}
                {{--                                                    </div>--}}
                {{--                                                </div>--}}

                {{--                                                <div class="item-count px-10 px-lg-20 py-5 py-lg-10">{{ $trend->courses_no }} {{ trans('product.course') }}</div>--}}

                {{--                                                <h3>{{ $trend->title }}</h3>--}}
                {{--                                            </div>--}}
                {{--                                        </a>--}}
                {{--                                    </div>--}}
                {{--                                </div>--}}
                {{--                            @endforeach--}}
                {{--                        </div>--}}
                {{--                    </div>--}}

                {{--                </div>--}}


            </section>
            </div>
        @endif

        {{-- Ads Bannaer --}}
        @if($homeSection->name == \App\Models\HomeSection::$full_advertising_banner and !empty($advertisingBanners1) and count($advertisingBanners1))
            <div class="home-sections section-premium section-skin-cream container reveal-up">
                <div class="row">
                    @foreach($advertisingBanners1 as $banner1)
                        <div class="col-{{ $banner1->size }}">
                            <a href="{{ $banner1->link }}">
                                <img src="{{ $banner1->image }}" class="img-cover rounded-sm" alt="{{ $banner1->title }}">
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
        {{-- ./ Ads Bannaer --}}

        @if($homeSection->name == \App\Models\HomeSection::$best_sellers and !empty($bestSaleWebinars) and !$bestSaleWebinars->isEmpty())
            <section class="home-sections section-premium section-skin-cream container reveal-up">
                <div class="d-flex justify-content-between">
                    <div>
                        <h2 class="section-title">{{ trans('home.best_sellers') }}</h2>
                        <p class="section-hint">{{ trans('home.best_sellers_hint') }}</p>
                    </div>

                    <a href="/classes?sort=bestsellers" class="btn btn-border-white">{{ trans('home.view_all') }}</a>
                </div>

                <div class="mt-10 position-relative">
                    <div class="swiper-container best-sales-webinars-swiper px-12">
                        <div class="swiper-wrapper py-20">
                            @foreach($bestSaleWebinars as $bestSaleWebinar)
                                <div class="swiper-slide">
                                    @include('web.default.includes.webinar.grid-card',['webinar' => $bestSaleWebinar])
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="d-flex justify-content-center">
                        <div class="swiper-pagination best-sales-webinars-swiper-pagination"></div>
                    </div>
                </div>
            </section>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$discount_classes and !empty($hasDiscountWebinars) and !$hasDiscountWebinars->isEmpty())
        
            <section class="home-sections section-premium section-skin-cream container reveal-up">
                <div class="d-flex justify-content-between">
                    <div>
                        <h2 class="section-title">{{ trans('home.discount_classes') }}</h2>
                        <p class="section-hint">{{ trans('home.discount_classes_hint') }}</p>
                    </div>

                    <a href="/classes?discount=on" class="btn btn-border-white">{{ trans('home.view_all') }}</a>
                </div>

                <div class="mt-10 position-relative">
                    <div class="swiper-container has-discount-webinars-swiper px-12">
                        <div class="swiper-wrapper py-20">
                            @foreach($hasDiscountWebinars as $hasDiscountWebinar)
                                <div class="swiper-slide">
                                    @include('web.default.includes.webinar.grid-card',['webinar' => $hasDiscountWebinar])
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="d-flex justify-content-center">
                        <div class="swiper-pagination has-discount-webinars-swiper-pagination"></div>
                    </div>
                </div>
            </section>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$free_classes and !empty($freeWebinars) and !$freeWebinars->isEmpty())
            <section class="home-sections home-sections-swiper section-premium section-skin-cream container reveal-up">
                <div class="d-flex justify-content-between">
                    <div>
                        <h2 class="section-title">{{ trans('home.free_classes') }}</h2>
                        <p class="section-hint">{{ trans('home.free_classes_hint') }}</p>
                    </div>

                    <a href="/classes?free=on" class="btn btn-border-white">{{ trans('home.view_all') }}</a>
                </div>

                <div class="mt-10 position-relative">
                    <div class="swiper-container free-webinars-swiper px-12">
                        <div class="swiper-wrapper py-20">

                            @foreach($freeWebinars as $freeWebinar)
                                <div class="swiper-slide">
                                    @include('web.default.includes.webinar.grid-card',['webinar' => $freeWebinar])
                                </div>
                            @endforeach

                        </div>
                    </div>

                    <div class="d-flex justify-content-center">
                        <div class="swiper-pagination free-webinars-swiper-pagination"></div>
                    </div>
                </div>
            </section>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$store_products and !empty($newProducts) and !$newProducts->isEmpty())
        
            <section class="home-sections home-sections-swiper section-premium section-skin-cream container reveal-up">
                <div class="d-flex justify-content-between">
                    <div>
                        <h2 class="section-title">{{ trans('update.store_products') }}</h2>
                        <p class="section-hint">{{ trans('update.store_products_hint') }}</p>
                    </div>

                    <a href="/products" class="btn btn-border-white">{{ trans('update.all_products') }}</a>
                </div>

                <div class="mt-10 position-relative">
                    {{--<div class="px-12">
                        <div class="row">
                             @foreach($newProducts as $newProduct)
                                <div class="col-lg-6">
                                     @include('web.default.products.includes.card',['product' => $newProduct])
                                </div>
                             @endforeach
                        </div>
                    </div>--}}
                    <div class="swiper-container new-products-swiper px-12">
                        <div class="swiper-wrapper py-20">

                            @foreach($newProducts as $newProduct)
                                <div class="swiper-slide">
                                    @include('web.default.products.includes.card',['product' => $newProduct])
                                </div>
                            @endforeach

                        </div>
                    </div>

                    <div class="d-flex justify-content-center">
                        <div class="swiper-pagination new-products-swiper-pagination"></div>
                    </div>
                </div>
            </section>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$testimonials)
            @if(!empty($testimonials) and !$testimonials->isEmpty())
            <div class="position-relative testimonials-container">

                <div id="parallax1" class="ltr">
                    <div data-depth="0.2" class="gradient-box left-gradient-box"></div>
                </div>

                <section class="home-sections home-sections-swiper section-premium section-skin-cream container reveal-up">
                    <div class="text-center">
                        <h2 class="section-title">@if(trans('home.testimonials') != 'home.testimonials'){{ trans('home.testimonials') }}@else أراء خريجين دبلوم مونتيسوري الدولي @endif</h2>
                        <p class="section-hint">@if(trans('home.testimonials_hint') != 'home.testimonials_hint'){{ trans('home.testimonials_hint') }}@else ماذا قال عملائنا عنا @endif</p>
                    </div>

                    <div class="position-relative">
                        <div class="swiper-container testimonials-swiper2 premium-testimonials-swiper px-12">
                            <div class="swiper-wrapper">

                                @foreach($testimonials as $testimonial)
                                    <div class="swiper-slide">
                                        <div class="testimonial_card">
                                            <div class="tf__single_testimonial_img">
                                                <img src="{{ $testimonial->user_avatar }}" alt="{{ $testimonial->user_name }}" class="img-fluid d-block">
                                            </div>
                                            <div class="tf__single_testimonial_text">
                                                <h3>
                                                    <i class="fa fa-quote-right"></i>
                                                    <span>{{ $testimonial->user_name }}</span>
                                                    <i class="fa fa-quote-left"></i>
                                                </h3>
                                                @if(!empty($testimonial->user_bio))
                                                    <p class="designation">{{ $testimonial->user_bio }}</p>
                                                @endif
                                                @if(!empty($testimonial->country))
                                                    <p class="designation">{{ $testimonial->country }}</p>
                                                @endif
                                                <p class="feedback">{!! nl2br($testimonial->comment) !!}</p>
                                                <span class="rating d-flex justify-content-center">
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        <i class="fa fa-star {{ $i <= ($testimonial->rating ?? 5) ? 'filled' : '' }}"></i>
                                                    @endfor
                                                </span>
                                            </div>
                                        </div>
                                        {{--<div class="testimonials-card position-relative py-15 py-lg-30 px-10 px-lg-20 rounded-sm shadow bg-white text-center">
                                            <div class="d-flex flex-column align-items-center">
                                                <div class="testimonials-user-avatar">
                                                    <img src="{{ $testimonial->user_avatar }}" alt="{{ $testimonial->user_name }}" class="img-cover rounded-circle">
                                                </div>
                                                <h4 class="font-16 font-weight-bold text-secondary mt-30">{{ $testimonial->user_name }}</h4>
                                                <span class="d-block font-14 text-gray">{{ $testimonial->user_bio }}</span>
                                                @include('web.default.includes.webinar.rate',['rate' => $testimonial->rate, 'dontShowRate' => true])
                                            </div>

                                            <p class="mt-25 text-gray font-14">{!! nl2br($testimonial->comment) !!}</p>

                                            <div class="bottom-gradient"></div>
                                        </div>--}}
                                    </div>
                                @endforeach
                            </div>

                        </div>

                        <div class="d-flex justify-content-center mt-4">
                            <div class="swiper-pagination testimonials-swiper-pagination premium-testimonials-pagination"></div>
                        </div>
                    </div>
                </section>

                <div id="parallax2" class="ltr">
                    <div data-depth="0.4" class="gradient-box right-gradient-box"></div>
                </div>

                <div id="parallax3" class="ltr">
                    <div data-depth="0.8" class="gradient-box bottom-gradient-box"></div>
                </div>
            </div>

            @endif
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$subscribes and !empty($subscribes) and !$subscribes->isEmpty())
            <div class="position-relative subscribes-container pe-none user-select-none">
                <div id="parallax4" class="ltr d-none d-md-block">
                    <div data-depth="0.2" class="gradient-box left-gradient-box"></div>
                </div>

                <section class="home-sections home-sections-swiper section-premium section-skin-navy container reveal-up">
                    <div class="text-center">
                        <h2 class="section-title">{{ trans('home.subscribe_now') }}</h2>
                        <p class="section-hint">{{ trans('home.subscribe_now_hint') }}</p>
                    </div>

                    <div class="position-relative mt-30">
                        <div class="swiper-container subscribes-swiper px-12">
                            <div class="swiper-wrapper py-20">

                                @foreach($subscribes as $subscribe)
                                    <div class="swiper-slide">
                                        <div class="subscribe-plan position-relative bg-white d-flex flex-column align-items-center rounded-sm shadow pt-50 pb-20 px-20">
                                            @if($subscribe->is_popular)
                                                <span class="badge badge-primary badge-popular px-15 py-5">{{ trans('panel.popular') }}</span>
                                            @endif

                                            <div class="plan-icon">
                                            </div>

                                            <h3 class="mt-20 font-30 text-secondary">{{ $subscribe->title }}</h3>
                                            <p class="font-weight-500 text-gray mt-10">{{ $subscribe->description }}</p>

                                            <div class="d-flex align-items-start text-primary mt-30">
                                                <span class="font-36 line-height-1">{{ addCurrencyToPrice($subscribe->price) }}</span>
                                            </div>

                                            <ul class="mt-20 plan-feature">
                                                <li class="mt-10">{{ $subscribe->days }} {{ trans('financial.days_of_subscription') }}</li>
                                                <li class="mt-10">
                                                    @if($subscribe->infinite_use)
                                                        {{ trans('update.unlimited') }}
                                                    @else
                                                        {{ $subscribe->usable_count }}
                                                    @endif
                                                    <span class="ml-5">{{ trans('update.subscribes') }}</span>
                                                </li>
                                            </ul>

                                            @if(auth()->check())
                                                <form action="/panel/financial/pay-subscribes" method="post" class="w-100">
                                                    {{ csrf_field() }}
                                                    <input name="amount" value="{{ $subscribe->price }}" type="hidden">
                                                    <input name="id" value="{{ $subscribe->id }}" type="hidden">
                                                    <button type="submit" class="btn btn-primary btn-block mt-50">{{ trans('financial.purchase') }}</button>
                                                </form>
                                            @else
                                                <a href="/login" class="btn btn-primary btn-block mt-50">{{ trans('financial.purchase') }}</a>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                        </div>
                        <div class="d-flex justify-content-center">
                            <div class="swiper-pagination subscribes-swiper-pagination"></div>
                        </div>

                    </div>
                </section>

                <div id="parallax5" class="ltr d-none d-md-block">
                    <div data-depth="0.4" class="gradient-box right-gradient-box"></div>
                </div>

                <div id="parallax6" class="ltr d-none d-md-block">
                    <div data-depth="0.6" class="gradient-box bottom-gradient-box"></div>
                </div>
            </div>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$find_instructors and !empty($findInstructorSection))
        
            <div class="find-instructor-section-wrapper home-section-sky-band">
                <section class="home-sections home-sections-swiper section-premium section-skin-sky-light container find-instructor-section position-relative reveal-up">
                    <div class="row align-items-center">
                    <div class="col-12 col-lg-6">
                        <div class="">
                            <h2 class="font-36 font-weight-bold text-dark">{{ $findInstructorSection['title'] ?? '' }}</h2>
                            <p class="font-16 font-weight-normal text-gray mt-10">{{ $findInstructorSection['description'] ?? '' }}</p>

                            <div class="mt-35 d-flex align-items-center">
                                @if(!empty($findInstructorSection['button1']))
                                    <a href="{{ $findInstructorSection['button1']['link'] }}" class="btn btn-primary">{{ $findInstructorSection['button1']['title'] }}</a>
                                @endif

                                @if(!empty($findInstructorSection['button2']))
                                    <a href="{{ $findInstructorSection['button2']['link'] }}" class="btn btn-outline-primary ml-15">{{ $findInstructorSection['button2']['title'] }}</a>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-lg-6 mt-20 mt-lg-0">
                        <div class="position-relative ">
                            <img src="{{ $findInstructorSection['image'] }}" class="find-instructor-section-hero" alt="{{ $findInstructorSection['title'] }}">
                            <img src="/assets/default/img/home/circle-4.png" class="find-instructor-section-circle" alt="circle">
                            <img src="/assets/default/img/home/dot.png" class="find-instructor-section-dots" alt="dots">

                            <div class="example-instructor-card example-instructor-card--premium p-5 p-md-15 d-flex align-items-center">
                                <div class="example-instructor-card-avatar">
                                    <img src="/assets/default/img/home/toutor_finder.svg" class="img-cover rounded-circle" alt="user name">
                                </div>

                                <div class="flex-grow-1 ml-15">
                                    <span class="font-14 font-weight-bold text-secondary d-block">{{ trans('update.looking_for_an_instructor') }}</span>
                                    <span class="text-gray font-12 font-weight-500">{{ trans('update.find_the_best_instructor_now') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            </div>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$reward_program and !empty($rewardProgramSection))
            <section class="home-sections home-sections-swiper section-premium section-skin-deep-green container reward-program-section position-relative reveal-up">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-6">
                        <div class="position-relative reward-program-section-hero-card">
                            <img src="{{ $rewardProgramSection['image'] }}" class="reward-program-section-hero" alt="{{ $rewardProgramSection['title'] }}">

                            <div class="example-reward-card bg-white rounded-sm shadow-lg p-5 p-md-15 d-flex align-items-center">
                                <div class="example-reward-card-medal">
                                    <img src="/assets/default/img/rewards/medal.png" class="img-cover rounded-circle" alt="medal">
                                </div>

                                <div class="flex-grow-1 ml-15">
                                    <span class="font-14 font-weight-bold text-secondary d-block">{{ trans('update.you_got_50_points') }}</span>
                                    <span class="text-gray font-12 font-weight-500">{{ trans('update.for_completing_the_course') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-lg-6 mt-20 mt-lg-0">
                        <div class="">
                            <h2 class="font-36 font-weight-bold text-dark">{{ $rewardProgramSection['title'] ?? '' }}</h2>
                            <p class="font-16 font-weight-normal text-gray mt-10">{{ $rewardProgramSection['description'] ?? '' }}</p>

                            <div class="mt-35 d-flex align-items-center">
                                @if(!empty($rewardProgramSection['button1']))
                                    <a href="{{ $rewardProgramSection['button1']['link'] }}" class="btn btn-primary">{{ $rewardProgramSection['button1']['title'] }}</a>
                                @endif

                                @if(!empty($rewardProgramSection['button2']))
                                    <a href="{{ $rewardProgramSection['button2']['link'] }}" class="btn btn-outline-primary ml-15">{{ $rewardProgramSection['button2']['title'] }}</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$become_instructor and !empty($becomeInstructorSection))
            <section class="home-sections home-sections-swiper section-premium section-skin-navy container find-instructor-section position-relative reveal-up">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-6">
                        <div class="">
                            <h2 class="font-36 font-weight-bold text-dark">{{ $becomeInstructorSection['title'] ?? '' }}</h2>
                            <p class="font-16 font-weight-normal text-gray mt-10">{{ $becomeInstructorSection['description'] ?? '' }}</p>

                            <div class="mt-35 d-flex align-items-center">
                                @if(!empty($becomeInstructorSection['button1']))
                                    <a href="{{ empty($authUser) ? '/login' : (($authUser->isUser()) ? $becomeInstructorSection['button1']['link'] : '/panel/financial/registration-packages') }}" class="btn btn-primary">{{ $becomeInstructorSection['button1']['title'] }}</a>
                                @endif

                                @if(!empty($becomeInstructorSection['button2']))
                                    <a href="{{ empty($authUser) ? '/login' : (($authUser->isUser()) ? $becomeInstructorSection['button2']['link'] : '/panel/financial/registration-packages') }}" class="btn btn-outline-primary ml-15">{{ $becomeInstructorSection['button2']['title'] }}</a>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-lg-6 mt-20 mt-lg-0">
                        <div class="position-relative ">
                            <img src="{{ $becomeInstructorSection['image'] }}" class="find-instructor-section-hero" alt="{{ $becomeInstructorSection['title'] }}">
                            <img src="/assets/default/img/home/circle-4.png" class="find-instructor-section-circle" alt="circle">
                            <img src="/assets/default/img/home/dot.png" class="find-instructor-section-dots" alt="dots">

                            <div class="example-instructor-card bg-white rounded-sm shadow-lg border p-5 p-md-15 d-flex align-items-center">
                                <div class="example-instructor-card-avatar">
                                    <img src="/assets/default/img/home/become_instructor.svg" class="img-cover rounded-circle" alt="user name">
                                </div>

                                <div class="flex-grow-1 ml-15">
                                    <span class="font-14 font-weight-bold text-secondary d-block">{{ trans('update.become_an_instructor') }}</span>
                                    <span class="text-gray font-12 font-weight-500">{{ trans('update.become_instructor_tagline') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$forum_section and !empty($forumSection))
            <div class="forum-section-wrapper home-section-sky-band">
                <section class="home-sections section-premium section-skin-sky-light container forum-cta-section position-relative reveal-up">
                    <div class="row align-items-center">
                        <div class="col-12 col-lg-6 order-lg-1">
                            <div class="forum-cta-content">
                                <p class="forum-cta-kicker">{{ trans('update.have_a_question?') }}</p>
                                <h2 class="section-title forum-cta-title">{{ $forumSection['title'] ?? '' }}</h2>
                                <p class="section-hint forum-cta-desc">{{ $forumSection['description'] ?? '' }}</p>

                                <div class="forum-cta-actions mt-35 d-flex align-items-center flex-wrap">
                                    @if(!empty($forumSection['button1']))
                                        <a href="{{ $forumSection['button1']['link'] }}" class="btn btn-premium">{{ $forumSection['button1']['title'] }}</a>
                                    @endif

                                    @if(!empty($forumSection['button2']))
                                        <a href="{{ $forumSection['button2']['link'] }}" class="btn btn-outline-premium forum-cta-btn-secondary">{{ $forumSection['button2']['title'] }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-lg-6 order-lg-2 mt-4 mt-lg-0">
                            <div class="forum-cta-visual position-relative">
                                <div class="forum-cta-orbit" aria-hidden="true">
                                    <span class="forum-cta-bubble forum-cta-bubble--1"></span>
                                    <span class="forum-cta-bubble forum-cta-bubble--2"></span>
                                    <span class="forum-cta-bubble forum-cta-bubble--3"></span>
                                    <span class="forum-cta-bubble forum-cta-bubble--4"></span>
                                </div>
                                @php
                                    $forumHeroDefault = asset('assets/default/img/learning/forum-empty.svg');
                                    $forumHeroSrc = !empty($forumSection['image']) ? $forumSection['image'] : $forumHeroDefault;
                                @endphp
                                <img
                                    src="{{ $forumHeroSrc }}"
                                    class="forum-cta-hero{{ empty($forumSection['image']) ? ' forum-cta-hero--illustration' : '' }}"
                                    alt="{{ $forumSection['title'] ?? '' }}"
                                    loading="lazy"
                                    onerror="this.onerror=null;this.src={{ json_encode($forumHeroDefault) }};this.classList.add('forum-cta-hero--illustration');"
                                >
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$instructors and !empty($instructors) and !$instructors->isEmpty())
            <section class="home-sections section-premium section-skin-cream container reveal-up">
                <div class="d-flex justify-content-between">
                    <div>
                        <h2 class="section-title">{{ trans('home.instructors') }}</h2>
                        <p class="section-hint">{{ trans('home.instructors_hint') }}</p>
                    </div>

                    <a href="/instructors" class="btn btn-border-white">{{ trans('home.all_instructors') }}</a>
                </div>

                <div class="position-relative mt-20 ltr">
                    <div class="owl-carousel customers-testimonials instructors-swiper-container">

                        @foreach($instructors as $instructor)
                            <div class="item">
                                <div class="shadow-effect">
                                    <div class="instructors-card d-flex flex-column align-items-center justify-content-center">
                                        <div class="instructors-card-avatar">
                                            <img src="{{ $instructor->getAvatar(130) }}" alt="{{ $instructor->full_name }}" class="instructor-avatar-img">
                                        </div>
                                        <div class="instructors-card-info mt-25 text-center">
                                            <a href="{{ $instructor->getProfileUrl() }}" target="_blank">
                                                <h3 class="font-16 font-weight-bold text-dark-blue">{{ $instructor->full_name }}</h3>
                                            </a>

                                            <p class="font-14 text-gray mt-5">{{ $instructor->bio }}</p>
                                            <div class="stars-card d-flex align-items-center justify-content-center mt-10">
                                                @php
                                                    $i = 5;
                                                @endphp
                                                @while(--$i >= 5 - $instructor->rates())
                                                    <i data-feather="star" width="20" height="20" class="active"></i>
                                                @endwhile
                                                @while($i-- >= 0)
                                                    <i data-feather="star" width="20" height="20" class=""></i>
                                                @endwhile
                                            </div>

                                            @if(!empty($instructor->hasMeeting()))
                                                <a href="{{ $instructor->getProfileUrl() }}?tab=appointments" class="btn btn-primary btn-sm rounded-pill mt-15">{{ trans('home.reserve_a_live_class') }}</a>
                                            @else
                                                <a href="{{ $instructor->getProfileUrl() }}" class="btn btn-primary btn-sm rounded-pill mt-15">{{ trans('public.profile') }}</a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
            </section>
        @endif

        {{-- Ads Bannaer --}}
        @if($homeSection->name == \App\Models\HomeSection::$half_advertising_banner and !empty($advertisingBanners2) and count($advertisingBanners2))
            <div class="home-sections section-premium section-skin-cream container reveal-up">
                <div class="row">
                    @foreach($advertisingBanners2 as $banner2)
                        <div class="col-{{ $banner2->size }}">
                            <a href="{{ $banner2->link }}">
                                <img src="{{ $banner2->image }}" class="img-cover rounded-sm" alt="{{ $banner2->title }}">
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
        {{-- ./ Ads Bannaer --}}

        @if($homeSection->name == \App\Models\HomeSection::$organizations and !empty($organizations) and !$organizations->isEmpty())
            <section class="home-sections home-sections-swiper section-premium section-skin-cream container reveal-up">
                <div class="d-flex justify-content-between">
                    <div>
                        <h2 class="section-title">{{ trans('home.organizations') }}</h2>
                        <p class="section-hint">{{ trans('home.organizations_hint') }}</p>
                    </div>

                    <a href="/organizations" class="btn btn-border-white">{{ trans('home.all_organizations') }}</a>
                </div>

                <div class="position-relative mt-20">
                    <div class="swiper-container organization-swiper-container px-12">
                        <div class="swiper-wrapper py-20">

                            @foreach($organizations as $organization)
                                <div class="swiper-slide">
                                    <div class="home-organizations-card d-flex flex-column align-items-center justify-content-center">
                                        <div class="home-organizations-avatar">
                                            <img src="{{ $organization->getAvatar(120) }}" class="img-cover rounded-circle" alt="{{ $organization->full_name }}">
                                        </div>
                                        <a href="{{ $organization->getProfileUrl() }}" class="mt-25 d-flex flex-column align-items-center justify-content-center">
                                            <h3 class="home-organizations-title">{{ $organization->full_name }}</h3>
                                            <p class="home-organizations-desc mt-10">{{ $organization->bio }}</p>
                                            <span class="home-organizations-badge badge mt-15">{{ $organization->webinars_count }} {{ trans('panel.classes') }}</span>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="d-flex justify-content-center">
                        <div class="swiper-pagination organization-swiper-pagination"></div>
                    </div>
                </div>
            </section>
        @endif

        @if($homeSection->name == \App\Models\HomeSection::$blog and !empty($blog) and !$blog->isEmpty())
         <div class="section-premium section-skin-cream py-5 px-4 reveal-up">
            <section class="home-sections section-premium section-skin-cream container reveal-up">
                <div class="d-flex justify-content-between">
                    <div>
                        <h2 class="section-title">{{ trans('home.blog') }}</h2>
                        <p class="section-hint">{{ trans('home.blog_hint') }}</p>
                    </div>

                    <a href="/blog" class="btn btn-border-white">{{ trans('home.all_blog') }}</a>
                </div>

                <div class="row mt-35">

                    @foreach($blog as $post)
                        <div class="col-12 col-md-4 col-lg-4 mt-20 mt-lg-0">
                            @include('web.default.blog.grid-list',['post' =>$post])
                        </div>
                    @endforeach

                </div>
            </section>
            </div>
        @endif
        
        
        

    @endforeach

    @endif

    @unless(request()->is('/'))
    {{-- Upcoming Course --}}
    <div class="section-premium section-skin-cream py-5 px-4 reveal-up">
                        <section class="home-sections home-sections-swiper section-premium section-skin-cream container reveal-up">
                            <div class="d-flex justify-content-between ">
                                <div>
                                    <h2 class="section-title">{{ trans('update.upcoming_courses') }}</h2>
                                    <p class="section-hint">{{ trans('update.upcoming_courses_home_section_hint') }}</p>
                                </div>

                                <a href="/upcoming_courses?sort=newest" class="btn btn-border-white">{{ trans('home.view_all') }}</a>
                            </div>

                            <div class="mt-10 position-relative">
                                <div class="swiper-container upcoming-courses-swiper px-12">
                                    <div class="swiper-wrapper py-20">
                                        @foreach($upcomingCourses as $upcomingCourse)
                                            <div class="swiper-slide">
                                                @include('web.default.includes.webinar.upcoming_course_grid_card',['upcomingCourse' => $upcomingCourse])
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="d-flex justify-content-center">
                                    <div class="swiper-pagination upcoming-courses-swiper-pagination"></div>
                                </div>
                            </div>
                        </section>
                        </div>

    @endunless

    <a class="whatsapp-que close pull-right" href="https://wa.me/+201065620315" target="_blank" rel="noopener noreferrer" aria-label="Contact us on WhatsApp">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
    </a>
    
    <style>
    /* ðŸŸ¢ WhatsApp Button Enhanced Styles */
    .whatsapp-que {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #25D366, #128C7E);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        animation: pulse 2s ease-in-out infinite;
        text-decoration: none;
    }
    
    .whatsapp-que svg {
        width: 32px;
        height: 32px;
        fill: #ffffff;
        transition: transform 0.3s ease;
    }
    
    .whatsapp-que:hover {
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 12px 35px rgba(37, 211, 102, 0.6);
        background: linear-gradient(135deg, #128C7E, #25D366);
    }
    
    .whatsapp-que:hover svg {
        transform: rotate(15deg) scale(1.1);
    }
    
    .whatsapp-que:active {
        transform: translateY(-2px) scale(1.05);
    }
    
    @media (max-width: 767px) {
        .whatsapp-que {
            width: 55px;
            height: 55px;
            bottom: 15px;
            right: 15px;
        }
        
        .whatsapp-que svg {
            width: 28px;
            height: 28px;
        }
    }
    
    @media (max-width: 575px) {
        .whatsapp-que {
            width: 50px;
            height: 50px;
            bottom: 10px;
            right: 10px;
        }
        
        .whatsapp-que svg {
            width: 24px;
            height: 24px;
        }
    }
    </style>

@endsection

@push('scripts_bottom')
    @if(request()->is('/'))
        <script src="/assets/default/vendors/swiper/swiper-bundle.min.js" defer></script>
        <script src="/assets/default/js/premium-home-swipers.js?v=20260521" defer></script>
        <script>
        (function () {
            if ('requestIdleCallback' in window) {
                requestIdleCallback(function () {
                    document.body.classList.add('animations-ready');
                });
            } else {
                setTimeout(function () {
                    document.body.classList.add('animations-ready');
                }, 100);
            }
        })();
        </script>
        <script src="/assets/default/js/montessori-premium-home.js" defer></script>
    @else
    <script src="/assets/default/vendors/swiper/swiper-bundle.min.js"></script>
    <script src="/assets/default/vendors/owl-carousel2/owl.carousel.min.js"></script>
    <script src="/assets/default/vendors/parallax/parallax.min.js"></script>
    
    <script>
    // Fix parallax error - prevent null reference errors
    // Override Parallax initialization to check for element existence
    (function() {
        var originalParallax = window.Parallax;
        if (typeof originalParallax !== 'undefined') {
            window.Parallax = function(element, options) {
                if (!element) {
                    console.warn('Parallax: Element is null or undefined');
                    return null;
                }
                try {
                    return new originalParallax(element, options);
                } catch (e) {
                    console.warn('Parallax initialization failed:', e);
                    return null;
                }
            };
            // Copy static methods if any
            for (var key in originalParallax) {
                if (originalParallax.hasOwnProperty(key)) {
                    window.Parallax[key] = originalParallax[key];
                }
            }
        }
    })();
    </script>
    
    <script src="/assets/default/js/parts/home.min.js"></script>
    
    <script>
    // Reinitialize parallax with proper null checks after home.min.js loads
    $(document).ready(function () {
        if (typeof Parallax !== 'undefined') {
            setTimeout(function() {
                for (var i = 1; i <= 6; i++) {
                    var parallaxElement = document.getElementById('parallax' + i);
                    if (parallaxElement) {
                        try {
                            var depthChild = parallaxElement.querySelector('[data-depth]');
                            if (depthChild) {
                                // Destroy existing instance if any
                                if (parallaxElement.parallaxInstance) {
                                    try {
                                        parallaxElement.parallaxInstance.destroy();
                                    } catch(e) {}
                                }
                                parallaxElement.parallaxInstance = new Parallax(parallaxElement, {
                                    relativeInput: true
                                });
                            }
                        } catch (e) {
                            console.warn('Parallax initialization failed for parallax' + i + ':', e);
                        }
                    }
                }
            }, 200);
        }
    });
    </script>
    
    <script>

    var __homeSwiperRtl = !!(document.body && document.body.classList.contains('rtl'));
    var __reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var testimonialPremiumRoot = document.querySelector('.premium-mock-testimonials-section .testimonials-swiper2');
    if (testimonialPremiumRoot && typeof Swiper !== 'undefined') {
        var testimonialPremiumShell = testimonialPremiumRoot.closest('.premium-testimonials-swiper-shell');
        var testimonialPagEl = testimonialPremiumShell
            ? testimonialPremiumShell.querySelector('.testimonials-swiper-pagination')
            : document.querySelector('.testimonials-swiper-pagination');
        new Swiper(testimonialPremiumRoot, {
            slidesPerView: 1,
            spaceBetween: 14,
            centeredSlides: false,
            rtl: __homeSwiperRtl,
            loop: false,
            speed: 650,
            autoplay: (__reducedMotion ? false : {
                delay: 5200,
                disableOnInteraction: false,
            }),
            pagination: testimonialPagEl
                ? {
                    el: testimonialPagEl,
                    clickable: true,
                }
                : undefined,
            watchOverflow: true,
            breakpoints: {
                576: {
                    slidesPerView: 2,
                    spaceBetween: 16,
                },
                992: {
                    slidesPerView: 3,
                    spaceBetween: 18,
                },
            },
        });
    }

   // Initialize Modern Hero Slider
   var HeroSwiper = null;
   
   function initHeroSlider() {
       var sliderElement = document.querySelector('.hero-slider-container');
       if (sliderElement && typeof Swiper !== 'undefined') {
           try {
               var slides = sliderElement.querySelectorAll('.swiper-slide');
               if (slides.length === 0) {
                   return;
               }
               
               if (sliderElement.swiper) {
                   sliderElement.swiper.destroy(true, true);
               }
               
               var shouldLoop = slides.length > 1;
               
               HeroSwiper = new Swiper('.hero-slider-container', {
                   rtl: __homeSwiperRtl,
                   pagination: { 
                       el: ".hero-pagination", 
                       clickable: true,
                       dynamicBullets: shouldLoop
                   },
                   loop: shouldLoop,
                   slidesPerView: 1,
                   spaceBetween: 0,
                   autoplay: shouldLoop ? { 
                       delay: 5000, 
                       disableOnInteraction: false,
                       pauseOnMouseEnter: true
                   } : false,
                   effect: 'fade',
                   fadeEffect: {
                       crossFade: true
                   },
                   speed: 1000,
                   navigation: { 
                       nextEl: ".hero-nav-next", 
                       prevEl: ".hero-nav-prev" 
                   },
                   allowTouchMove: true,
                   grabCursor: true,
                   watchOverflow: true,
                   on: {
                       init: function() {
                           if (this.slides.length <= 1) {
                               this.params.loop = false;
                               this.params.autoplay = false;
                               this.update();
                           }
                       },
                       slideChange: function() {
                           if (this.autoplay && !this.autoplay.running && this.slides.length > 1) {
                               this.autoplay.start();
                           }
                       }
                   }
               });
           } catch (e) {
               console.warn('Hero slider initialization failed:', e);
           }
       }
   }
   
   function dismissHeroIntro() {
       var root = document.getElementById('heroCinematicRoot');
       if (!root || root.classList.contains('hero-intro-done')) return;
       if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
           root.classList.add('hero-intro-done');
           return;
       }
       setTimeout(function() {
           root.classList.add('hero-intro-done');
       }, 4200);
   }

   // Initialize when DOM is ready
   if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', function() {
           initHeroSlider();
           dismissHeroIntro();
       });
   } else {
       initHeroSlider();
       dismissHeroIntro();
   }
   
   // Also try with jQuery if available
   if (typeof jQuery !== 'undefined') {
       jQuery(document).ready(function() {
           setTimeout(initHeroSlider, 100);
           dismissHeroIntro();
       });
   }

// Initialize Trending Swiper with proper error handling
var Swipes2 = null;
function initTrendingSwiper() {
    var trendingElement = document.querySelector('.trending-swipper-container');
    if (trendingElement && typeof Swiper !== 'undefined') {
        try {
            var slides = trendingElement.querySelectorAll('.swiper-slide');
            if (slides.length === 0) return;
            
            if (trendingElement.swiper) {
                trendingElement.swiper.destroy(true, true);
            }
            
            var shouldLoop = slides.length > 1;
            
            Swipes2 = new Swiper('.trending-swipper-container', {
                rtl: __homeSwiperRtl,
                pagination: { 
                    el: ".trending-swiper-pagination", 
                    clickable: true,
                    dynamicBullets: shouldLoop
                },
                loop: shouldLoop,
                slidesPerView: 1,
                spaceBetween: 16,
                autoplay: shouldLoop ? { 
                    delay: 4000, 
                    disableOnInteraction: false 
                } : false,
                navigation: { 
                    nextEl: ".trending-swipper-container .swiper-button-next", 
                    prevEl: ".trending-swipper-container .swiper-button-prev" 
                },
                breakpoints: {
                    320: {
                        slidesPerView: 1.5,
                        spaceBetween: 12
                    },
                    480: {
                        slidesPerView: 2,
                        spaceBetween: 16
                    },
                    640: {
                        slidesPerView: 2.5,
                        spaceBetween: 20
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 20
                    },
                    992: {
                        slidesPerView: 3.5,
                        spaceBetween: 24
                    },
                    1200: {
                        slidesPerView: 4,
                        spaceBetween: 24
                    }
                },
                grabCursor: true,
                watchOverflow: true,
                centeredSlides: false
            });
        } catch (e) {
            console.warn('Trending swiper initialization failed:', e);
        }
    }
}

// Initialize Products Swiper with proper error handling
var ProductsSwiper = null;
function initProductsSwiper() {
    var productsElement = document.querySelector('.new-products-swiper');
    if (productsElement && typeof Swiper !== 'undefined') {
        try {
            var slides = productsElement.querySelectorAll('.swiper-slide');
            if (slides.length === 0) return;
            
            if (productsElement.swiper) {
                productsElement.swiper.destroy(true, true);
            }
            
            var shouldLoop = slides.length > 4; // Only loop if we have more than 4 slides
            
            ProductsSwiper = new Swiper('.new-products-swiper', {
                rtl: __homeSwiperRtl,
                pagination: { 
                    el: ".new-products-swiper-pagination", 
                    clickable: true,
                    dynamicBullets: shouldLoop
                },
                loop: shouldLoop,
                slidesPerView: 1,
                spaceBetween: 16,
                autoplay: shouldLoop ? { 
                    delay: 4000, 
                    disableOnInteraction: false 
                } : false,
                grabCursor: true,
                watchOverflow: true,
                breakpoints: {
                    320: {
                        slidesPerView: 1.2,
                        spaceBetween: 12
                    },
                    480: {
                        slidesPerView: 1.8,
                        spaceBetween: 14
                    },
                    640: {
                        slidesPerView: 2.5,
                        spaceBetween: 16
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 18
                    },
                    992: {
                        slidesPerView: 3.5,
                        spaceBetween: 20
                    },
                    1200: {
                        slidesPerView: 4,
                        spaceBetween: 20
                    },
                    1400: {
                        slidesPerView: 4.5,
                        spaceBetween: 24
                    }
                }
            });
        } catch (e) {
            console.warn('Products swiper initialization failed:', e);
        }
    }
}

// Initialize all swipers when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(initTrendingSwiper, 100);
        setTimeout(initProductsSwiper, 100);
    });
} else {
    initTrendingSwiper();
    initProductsSwiper();
}

if (typeof jQuery !== 'undefined') {
    jQuery(document).ready(function() {
        setTimeout(initTrendingSwiper, 200);
        setTimeout(initProductsSwiper, 200);
    });
}

// Initialize Latest Classes Swiper with proper error handling
var LatestClassesSwiper = null;
function initLatestClassesSwiper() {
    var latestElement = document.querySelector('.latest-webinars-swiper');
    if (latestElement && typeof Swiper !== 'undefined') {
        try {
            var slides = latestElement.querySelectorAll('.swiper-slide');
            if (slides.length === 0) return;
            
            if (latestElement.swiper) {
                latestElement.swiper.destroy(true, true);
            }
            
            var shouldLoop = slides.length > 4;
            
            LatestClassesSwiper = new Swiper('.latest-webinars-swiper', {
                rtl: __homeSwiperRtl,
                pagination: { 
                    el: ".latest-webinars-swiper-pagination", 
                    clickable: true,
                    dynamicBullets: shouldLoop,
                    renderBullet: function (index, className) {
                        return '<span class="' + className + '"><span class="bullet-inner"></span></span>';
                    }
                },
                navigation: {
                    nextEl: '.latest-classes-next',
                    prevEl: '.latest-classes-prev',
                },
                loop: shouldLoop,
                slidesPerView: 1,
                spaceBetween: 12,
                autoplay: shouldLoop ? { 
                    delay: 5000, 
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true
                } : false,
                grabCursor: true,
                watchOverflow: true,
                effect: 'slide',
                speed: 600,
                breakpoints: {
                    320: {
                        slidesPerView: 1.5,
                        spaceBetween: 8
                    },
                    480: {
                        slidesPerView: 2.2,
                        spaceBetween: 10
                    },
                    640: {
                        slidesPerView: 3,
                        spaceBetween: 10
                    },
                    768: {
                        slidesPerView: 3.5,
                        spaceBetween: 12
                    },
                    992: {
                        slidesPerView: 4.5,
                        spaceBetween: 12
                    },
                    1200: {
                        slidesPerView: 5.5,
                        spaceBetween: 14
                    },
                    1400: {
                        slidesPerView: 6,
                        spaceBetween: 16
                    }
                }
            });
            
            // Add hover pause functionality
            const latestSwiperContainer = document.querySelector('.latest-classes-swiper-wrapper');
            if (latestSwiperContainer && LatestClassesSwiper && shouldLoop) {
                latestSwiperContainer.addEventListener('mouseenter', function() {
                    if (LatestClassesSwiper.autoplay) {
                        LatestClassesSwiper.autoplay.stop();
                    }
                });
                latestSwiperContainer.addEventListener('mouseleave', function() {
                    if (LatestClassesSwiper.autoplay) {
                        LatestClassesSwiper.autoplay.start();
                    }
                });
            }
        } catch (e) {
            console.warn('Latest classes swiper initialization failed:', e);
        }
    }
}

// Premium homepage — carousel for `.premium-latest-classes-swiper`
var PremiumLatestClassesSwiper = null;
function initPremiumLatestClassesSwiper() {
    var el = document.querySelector('.premium-latest-classes-swiper');
    if (el && typeof Swiper !== 'undefined') {
        try {
            var slides = el.querySelectorAll('.swiper-slide');
            if (slides.length === 0) {
                return;
            }
            if (el.swiper) {
                el.swiper.destroy(true, true);
            }
            var shouldLoop = slides.length > 4;
            PremiumLatestClassesSwiper = new Swiper('.premium-latest-classes-swiper', {
                rtl: __homeSwiperRtl,
                pagination: {
                    el: '.premium-latest-classes-pagination',
                    clickable: true,
                    dynamicBullets: shouldLoop
                },
                navigation: {
                    nextEl: '.premium-latest-next',
                    prevEl: '.premium-latest-prev'
                },
                loop: shouldLoop,
                slidesPerView: 1,
                spaceBetween: 12,
                autoplay: shouldLoop ? {
                    delay: 5000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true
                } : false,
                grabCursor: true,
                watchOverflow: true,
                speed: 600,
                breakpoints: {
                    320: { slidesPerView: 1.15, spaceBetween: 8 },
                    480: { slidesPerView: 1.65, spaceBetween: 10 },
                    768: { slidesPerView: 2.35, spaceBetween: 12 },
                    992: { slidesPerView: 3.15, spaceBetween: 14 },
                    1200: { slidesPerView: 3.85, spaceBetween: 14 }
                }
            });
            var wrapper = document.querySelector('.premium-latest-swiper-wrapper');
            if (wrapper && PremiumLatestClassesSwiper && shouldLoop) {
                wrapper.addEventListener('mouseenter', function() {
                    if (PremiumLatestClassesSwiper.autoplay) {
                        PremiumLatestClassesSwiper.autoplay.stop();
                    }
                });
                wrapper.addEventListener('mouseleave', function() {
                    if (PremiumLatestClassesSwiper.autoplay) {
                        PremiumLatestClassesSwiper.autoplay.start();
                    }
                });
            }
        } catch (e) {
            console.warn('Premium latest courses swiper failed:', e);
        }
    }
}

// Premium homepage — graduate videos carousel
var PremiumGraduateVideosSwiper = null;
function initPremiumGraduateVideosSwiper() {
    var el = document.querySelector('.premium-graduate-videos-swiper');
    if (el && typeof Swiper !== 'undefined') {
        try {
            var slides = el.querySelectorAll('.swiper-slide');
            if (slides.length === 0) {
                return;
            }
            if (el.swiper) {
                el.swiper.destroy(true, true);
            }
            var shouldLoop = slides.length > 3;
            var gvReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
            PremiumGraduateVideosSwiper = new Swiper('.premium-graduate-videos-swiper', {
                rtl: __homeSwiperRtl,
                pagination: {
                    el: '.premium-graduate-videos-pagination',
                    clickable: true,
                    dynamicBullets: shouldLoop
                },
                navigation: {
                    nextEl: '.premium-gv-next',
                    prevEl: '.premium-gv-prev'
                },
                loop: shouldLoop,
                slidesPerView: 1,
                spaceBetween: 12,
                autoplay: shouldLoop && !gvReducedMotion ? {
                    delay: 5500,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true
                } : false,
                grabCursor: true,
                watchOverflow: true,
                speed: 600,
                breakpoints: {
                    320: { slidesPerView: 1, spaceBetween: 10 },
                    576: { slidesPerView: 2, spaceBetween: 12 },
                    992: { slidesPerView: 3, spaceBetween: 12 },
                    1200: { slidesPerView: 3, spaceBetween: 14 }
                }
            });
            var wrapper = document.querySelector('.premium-graduate-videos-frame');
            if (wrapper && PremiumGraduateVideosSwiper && shouldLoop) {
                wrapper.addEventListener('mouseenter', function() {
                    if (PremiumGraduateVideosSwiper.autoplay) {
                        PremiumGraduateVideosSwiper.autoplay.stop();
                    }
                });
                wrapper.addEventListener('mouseleave', function() {
                    if (PremiumGraduateVideosSwiper.autoplay) {
                        PremiumGraduateVideosSwiper.autoplay.start();
                    }
                });
            }
        } catch (e) {
            console.warn('Premium graduate videos swiper failed:', e);
        }
    }
}

// Premium homepage — products carousel
var PremiumProductsSwiper = null;
function initPremiumProductsSwiper() {
    var el = document.querySelector('.premium-products-swiper');
    if (el && typeof Swiper !== 'undefined') {
        try {
            var slides = el.querySelectorAll('.swiper-slide');
            if (slides.length === 0) {
                return;
            }
            if (el.swiper) {
                el.swiper.destroy(true, true);
            }
            var shouldLoop = slides.length > 4;
            var prodReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
            PremiumProductsSwiper = new Swiper('.premium-products-swiper', {
                rtl: __homeSwiperRtl,
                pagination: {
                    el: '.premium-products-pagination',
                    clickable: true,
                    dynamicBullets: shouldLoop
                },
                navigation: {
                    nextEl: '.premium-products-next',
                    prevEl: '.premium-products-prev'
                },
                loop: shouldLoop,
                slidesPerView: 1,
                spaceBetween: 12,
                autoplay: shouldLoop && !prodReducedMotion ? {
                    delay: 5200,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true
                } : false,
                grabCursor: true,
                watchOverflow: true,
                speed: 600,
                breakpoints: {
                    320: { slidesPerView: 1.15, spaceBetween: 8 },
                    480: { slidesPerView: 1.68, spaceBetween: 10 },
                    768: { slidesPerView: 2.38, spaceBetween: 12 },
                    992: { slidesPerView: 3.12, spaceBetween: 14 },
                    1200: { slidesPerView: 3.75, spaceBetween: 14 }
                }
            });
            var wrapper = document.querySelector('.premium-products-frame');
            if (wrapper && PremiumProductsSwiper && shouldLoop) {
                wrapper.addEventListener('mouseenter', function() {
                    if (PremiumProductsSwiper.autoplay) {
                        PremiumProductsSwiper.autoplay.stop();
                    }
                });
                wrapper.addEventListener('mouseleave', function() {
                    if (PremiumProductsSwiper.autoplay) {
                        PremiumProductsSwiper.autoplay.start();
                    }
                });
            }
        } catch (e) {
            console.warn('Premium products swiper failed:', e);
        }
    }
}

// Premium homepage — blog carousel
var PremiumBlogSwiper = null;
function initPremiumBlogSwiper() {
    var el = document.querySelector('.premium-blog-swiper');
    if (el && typeof Swiper !== 'undefined') {
        try {
            var slides = el.querySelectorAll('.swiper-slide');
            if (slides.length === 0) {
                return;
            }
            if (el.swiper) {
                el.swiper.destroy(true, true);
            }
            var shouldLoop = slides.length > 3;
            PremiumBlogSwiper = new Swiper('.premium-blog-swiper', {
                rtl: __homeSwiperRtl,
                pagination: {
                    el: '.premium-blog-pagination',
                    clickable: true,
                    dynamicBullets: shouldLoop
                },
                navigation: {
                    nextEl: '.premium-blog-next',
                    prevEl: '.premium-blog-prev'
                },
                loop: shouldLoop,
                slidesPerView: 1,
                spaceBetween: 12,
                autoplay: shouldLoop ? {
                    delay: 5300,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true
                } : false,
                grabCursor: true,
                watchOverflow: true,
                speed: 600,
                breakpoints: {
                    320: { slidesPerView: 1.15, spaceBetween: 8 },
                    480: { slidesPerView: 1.62, spaceBetween: 10 },
                    768: { slidesPerView: 2.28, spaceBetween: 12 },
                    992: { slidesPerView: 3.08, spaceBetween: 14 },
                    1200: { slidesPerView: 3.65, spaceBetween: 14 }
                }
            });
            var wrapper = document.querySelector('.premium-blog-frame');
            if (wrapper && PremiumBlogSwiper && shouldLoop) {
                wrapper.addEventListener('mouseenter', function() {
                    if (PremiumBlogSwiper.autoplay) {
                        PremiumBlogSwiper.autoplay.stop();
                    }
                });
                wrapper.addEventListener('mouseleave', function() {
                    if (PremiumBlogSwiper.autoplay) {
                        PremiumBlogSwiper.autoplay.start();
                    }
                });
            }
        } catch (e) {
            console.warn('Premium blog swiper failed:', e);
        }
    }
}

// Premium homepage — instructors carousel
var PremiumInstructorsSwiper = null;
function initPremiumInstructorsSwiper() {
    var el = document.querySelector('.premium-instructors-swiper');
    if (el && typeof Swiper !== 'undefined') {
        try {
            var slides = el.querySelectorAll('.swiper-slide');
            if (slides.length === 0) {
                return;
            }
            if (el.swiper) {
                el.swiper.destroy(true, true);
            }
            var isSingleInstructorHome = slides.length === 1;
            var shouldLoop = slides.length > 4;
            var instReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
            var instBreakpoints = isSingleInstructorHome ? {} : {
                320: { slidesPerView: 1.18, spaceBetween: 8 },
                480: { slidesPerView: 1.82, spaceBetween: 10 },
                768: { slidesPerView: 2.6, spaceBetween: 12 },
                992: { slidesPerView: 3.35, spaceBetween: 14 },
                1200: { slidesPerView: 4.1, spaceBetween: 14 }
            };
            PremiumInstructorsSwiper = new Swiper('.premium-instructors-swiper', {
                rtl: __homeSwiperRtl,
                pagination: {
                    el: '.premium-instructors-pagination',
                    clickable: true,
                    dynamicBullets: shouldLoop
                },
                navigation: {
                    nextEl: '.premium-instructors-next',
                    prevEl: '.premium-instructors-prev'
                },
                loop: shouldLoop,
                slidesPerView: isSingleInstructorHome ? 1 : 1,
                spaceBetween: isSingleInstructorHome ? 0 : 12,
                centeredSlides: isSingleInstructorHome,
                autoplay: shouldLoop && !instReducedMotion ? {
                    delay: 5100,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true
                } : false,
                grabCursor: !isSingleInstructorHome,
                watchOverflow: true,
                speed: 600,
                breakpoints: instBreakpoints
            });
            var wrapper = document.querySelector('.premium-instructors-frame');
            if (wrapper && PremiumInstructorsSwiper && shouldLoop) {
                wrapper.addEventListener('mouseenter', function() {
                    if (PremiumInstructorsSwiper.autoplay) {
                        PremiumInstructorsSwiper.autoplay.stop();
                    }
                });
                wrapper.addEventListener('mouseleave', function() {
                    if (PremiumInstructorsSwiper.autoplay) {
                        PremiumInstructorsSwiper.autoplay.start();
                    }
                });
            }
        } catch (e) {
            console.warn('Premium instructors swiper failed:', e);
        }
    }
}

// Initialize Features Swiper with proper error handling
var FeaturesSwiper = null;
function initFeaturesSwiper() {
    var featuresElement = document.querySelector('.features-swiper-container');
    if (featuresElement && typeof Swiper !== 'undefined') {
        try {
            var slides = featuresElement.querySelectorAll('.swiper-slide');
            if (slides.length === 0) return;
            
            if (featuresElement.swiper) {
                featuresElement.swiper.destroy(true, true);
            }
            
            var shouldLoop = slides.length > 1;
            
            FeaturesSwiper = new Swiper('.features-swiper-container', {
                rtl: __homeSwiperRtl,
                pagination: { 
                    el: ".features-swiper-pagination", 
                    clickable: true,
                    dynamicBullets: shouldLoop
                },
                loop: shouldLoop,
                slidesPerView: 1,
                spaceBetween: 20,
                autoplay: shouldLoop ? { 
                    delay: 5000, 
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true
                } : false,
                grabCursor: true,
                watchOverflow: true,
                speed: 600,
                breakpoints: {
                    640: {
                        slidesPerView: 2,
                        spaceBetween: 20
                    },
                    992: {
                        slidesPerView: 3,
                        spaceBetween: 24
                    }
                }
            });
        } catch (e) {
            console.warn('Features swiper initialization failed:', e);
        }
    }
}

// Initialize latest classes and features swipers
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(initLatestClassesSwiper, 150);
        setTimeout(initPremiumLatestClassesSwiper, 170);
        setTimeout(initPremiumGraduateVideosSwiper, 190);
        setTimeout(initPremiumProductsSwiper, 205);
        setTimeout(initPremiumBlogSwiper, 218);
        setTimeout(initPremiumInstructorsSwiper, 231);
        setTimeout(initFeaturesSwiper, 150);
    });
} else {
    initLatestClassesSwiper();
    initPremiumLatestClassesSwiper();
    initPremiumGraduateVideosSwiper();
    initPremiumProductsSwiper();
    initPremiumBlogSwiper();
    initPremiumInstructorsSwiper();
    initFeaturesSwiper();
}

if (typeof jQuery !== 'undefined') {
    jQuery(document).ready(function() {
        setTimeout(initLatestClassesSwiper, 250);
        setTimeout(initPremiumLatestClassesSwiper, 270);
        setTimeout(initPremiumGraduateVideosSwiper, 285);
        setTimeout(initPremiumProductsSwiper, 296);
        setTimeout(initPremiumBlogSwiper, 308);
        setTimeout(initPremiumInstructorsSwiper, 319);
        setTimeout(initFeaturesSwiper, 250);
    });
}

// ðŸŽ¬ FANTASTIC Smooth scroll-triggered animations
(function() {
    'use strict';
    
    // Intersection Observer for fade-in animations with better performance
    const observerOptions = {
        threshold: 0.15,
        rootMargin: '0px 0px -100px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                setTimeout(() => {
                    entry.target.classList.add('animate-in');
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0) scale(1)';
                }, index * 100);
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    // Observe all sections with stagger
    document.querySelectorAll('.home-sections').forEach((section, index) => {
        section.style.transitionDelay = (index * 0.1) + 's';
        observer.observe(section);
    });
    
    // Observe cards with staggered delay
    document.querySelectorAll('.stats-item, .course-card, .product-card, .info-card, .trending-card, .feature-slider').forEach((card, index) => {
        card.style.transitionDelay = (index * 0.08) + 's';
        observer.observe(card);
    });
    
    // Observe section titles
    document.querySelectorAll('.section-title, .section-hint').forEach((el, index) => {
        el.style.transitionDelay = (index * 0.1) + 's';
        observer.observe(el);
    });
    
    // Smooth parallax effect for slider images
    let ticking = false;
    function updateParallax() {
        const scrolled = window.pageYOffset;
        const parallaxElements = document.querySelectorAll('.slider-swipper-container-full .swiper-slide-active img');
        
        parallaxElements.forEach(el => {
            const rect = el.getBoundingClientRect();
            if (rect.top < window.innerHeight && rect.bottom > 0) {
                const speed = 0.15;
                const yPos = -(scrolled * speed);
                el.style.transform = `translate3d(0, ${yPos}px, 0)`;
            }
        });
        
        ticking = false;
    }
    
    window.addEventListener('scroll', function() {
        if (!ticking) {
            window.requestAnimationFrame(updateParallax);
            ticking = true;
        }
    }, { passive: true });
    
    // Enhanced hover effects for buttons
    document.querySelectorAll('.fill-btn').forEach(btn => {
        btn.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-3px) scale(1.05)';
        });
        btn.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
    
    // Add reveal animation to elements on scroll
    const revealObserver = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('active');
            }
        });
    }, { threshold: 0.1 });
    
    document.querySelectorAll('.reveal').forEach(el => {
        revealObserver.observe(el);
    });
    
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            const href = this.getAttribute('href');
            if (href !== '#' && href.length > 1) {
                const target = document.querySelector(href);
                if (target) {
                    e.preventDefault();
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            }
        });
    });
    
    // Add loading animation to images
    document.querySelectorAll('img').forEach(img => {
        if (!img.complete) {
            img.classList.add('loading-shimmer');
            img.addEventListener('load', function() {
                this.classList.remove('loading-shimmer');
                this.style.opacity = '0';
                setTimeout(() => {
                    this.style.transition = 'opacity 0.5s ease';
                    this.style.opacity = '1';
                }, 50);
            });
        }
    });
    
    // Add pulse animation to important elements
    const pulseElements = document.querySelectorAll('.swiper-pagination-bullet-active, .badge-primary');
    pulseElements.forEach(el => {
        el.classList.add('pulse-animation');
    });
    
    // Performance optimization: Use requestIdleCallback for non-critical animations
    if ('requestIdleCallback' in window) {
        requestIdleCallback(() => {
            document.body.classList.add('animations-ready');
        });
    } else {
        setTimeout(() => {
            document.body.classList.add('animations-ready');
        }, 100);
    }
})();

        
    </script>
    @endif
@endpush
