@extends('frontend.layouts.app')
@section('meta')
    @php
        $metaData = getMeta('home');
    @endphp

    <meta name="description" content="{{ __($metaData['meta_description']) }}">
    <meta name="keywords" content="{{ __($metaData['meta_keyword']) }}">

    <!-- Open Graph meta tags for social sharing -->
    <meta property="og:type" content="Learning">
    <meta property="og:title" content="{{ __($metaData['meta_title']) }}">
    <meta property="og:description" content="{{ __($metaData['meta_description']) }}">
    <meta property="og:image" content="{{ __($metaData['og_image']) }}">
    <meta property="og:url" content="{{ url()->current() }}">

    <meta property="og:site_name" content="{{ __(get_option('app_name')) }}">

    <!-- Twitter Card meta tags for Twitter sharing -->
    <meta name="twitter:card" content="Learning">
    <meta name="twitter:title" content="{{ __($metaData['meta_title']) }}">
    <meta name="twitter:description" content="{{ __($metaData['meta_description']) }}">
    <meta name="twitter:image" content="{{ __($metaData['og_image']) }}">
    @if (isAddonInstalled('LMSZAIPRODUCT'))
        <link rel="stylesheet" href="{{ asset('addon/product/css/ecommerce-product.css') }}">
    @endif
@endsection

@push('theme-style')
    <!-- page css -->
    <link rel="stylesheet" href="{{ asset('frontend-theme-4/assets/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('frontend-theme-4/assets/css/plugins.css') }}">
    <link rel="stylesheet" href="{{ asset('frontend-theme-4/assets/scss/style.css') }}">
@endpush

@section('content')

    @php
        $bannerImage = @$home->banner_image;
        if(env('IS_LOCAL', 0)){
            $bannerImage = get_option('banner_image_'.get_option('theme', THEME_DEFAULT));
        }
    @endphp

        <!-- Hero Banner -->
    <section class="hero-banner hero-banner-kindergarten"
             data-background="{{ getImageFile($bannerImage) }}">
        <div class="container">
            <div class="hero-banner-content">
                <div class="text-content">
                    <div class="sub-title-wrap">
                        @foreach(@$home->banner_mini_words_title ?? [] as $banner_mini_word)
                            <p>{{ __($banner_mini_word) }}</p>
                        @endforeach
                    </div>
                    <div class="titleText-wrap">
                        <h4 class="title">
                            {{ __(@$home->banner_first_line_title) }}
                            <span>{{ __(@$home->banner_second_line_title) }}</span>
                            {{ __(@$home->banner_third_line_title) }}
                            <span>{{ __(@$home->banner_fourth_line_title) }}</span>
                        </h4>
                        <p class="text">{{ __(@$home->banner_subtitle) }}</p>
                    </div>
                    <div class="d-flex justify-content-center align-items-center g-12 pt-7">
                        <a href="{{ $home->banner_first_button_link }}"
                           class="hero-btn-1">{{ __($home->banner_first_button_name) }} <i
                                class="fa fa-arrow-right"></i></a>
                        <a href="{{ $home->banner_second_button_link }}"
                           class="hero-btn-2">{{ __($home->banner_second_button_name) }} <i
                                class="fa fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Core Features -->
    <section class="core-features core-features-kindergarten {{ @$home->special_feature_area == 1 ? '' : 'd-none' }}">
        <div class="container">
            <div class="core-features-content">
                <!--  -->
                <div class="title-wrap">
                    <div class="row rg-20 justify-content-lg-between justify-content-center">
                        <div class="col-lg-5">
                            <h4 class="title">{{ __(get_option('home_special_feature_title')) }}</h4>
                        </div>
                        <div class="col-lg-4">
                            <div class="d-flex flex-column justify-content-end h-100">
                                <p class="text">{{ __(get_option('home_special_feature_area_subtitle')) }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--  -->
                <div class="row rg-20">
                    <div class="col-lg-4 col-sm-6">
                        <div class="core-features-item core-features-item-kindergarten">
                            <div class="icon">
                                <img src="{{ getImageFile(get_option('home_special_feature_first_logo')) }}" alt=""/>
                            </div>
                            <div class="content">
                                <h4 class="title">{{ __(get_option('home_special_feature_first_title')) }}</h4>
                                <p class="text">{{ __(get_option('home_special_feature_first_subtitle')) }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <div class="core-features-item core-features-item-kindergarten">
                            <div class="icon">
                                <img src="{{ getImageFile(get_option('home_special_feature_second_logo')) }}" alt=""/>
                            </div>
                            <div class="content">
                                <h4 class="title">{{ __(get_option('home_special_feature_second_title')) }}</h4>
                                <p class="text">{{ __(get_option('home_special_feature_second_subtitle')) }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <div class="core-features-item core-features-item-kindergarten">
                            <div class="icon">
                                <img src="{{ getImageFile(get_option('home_special_feature_third_logo')) }}" alt=""/>
                            </div>
                            <div class="content">
                                <h4 class="title">{{ __(get_option('home_special_feature_third_title')) }}</h4>
                                <p class="text">{{ __(get_option('home_special_feature_third_subtitle')) }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if(!get_option('private_mode') || !auth()->guest())
        @if($home->courses_area == 1)
            <!-- Board Section -->
            <section class="board-section board-section-kindergarten">
                <div class="container">
                    <div class="board-section-content">
                        <!--  -->
                        <div class="title-wrap">
                            <div class="row justify-content-between align-items-center rg-20">
                                <div class="col-lg-7">
                                    <div class="d-flex flex-column flex-sm-row align-items-lg-center align-items-sm-start align-items-center g-26">
                                        <div class="icon d-flex max-w-60 flex-shrink-0">
                                            <img src="{{ getImageFile(get_option('course_logo')) }}" alt="Course"/>
                                        </div>
                                        <div class="content">
                                            <h4 class="title text-center text-sm-start">{{ __(get_option('course_title')) }}</h4>
                                            <p class="text text-center text-sm-start">{{ __(get_option('course_subtitle')) }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="d-flex justify-content-lg-end justify-content-sm-start justify-content-center">
                                        <a href="{{ route('courses') }}"
                                           class="btn-fill-kindergarten">{{__('View All')}} <i
                                                class="fa fa-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  -->
                        <div class="row rg-40">
                            @if(count($featuredCourses))
                                <div class="latest-courses-slider owl-carousel">
                                    @foreach ($featuredCourses as $course)
                                        @php
                                            $userRelation = getUserRoleRelation($course->user);
                                        @endphp
                                        <div class="col-12 col-sm-4 col-lg-3 w-100">
                                            <div class="course-item-kindergarten">
                                                @include('frontend-theme-4.partials.course')
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                {{ __("No Course Found") }}
                            @endif
                        </div>
                    </div>
                </div>
            </section>
        @endif
    @endif

    @if($home->category_courses_area == 1)
        <!-- Top categories -->
        <section class="top-categories top-categories-kindergarten">
            <img src="{{asset('frontend-theme-4/assets/images/kindergarten-top-category-wave.svg')}}" alt=""
                 class="wave-img"/>
            <div class="container">
                <div class="top-categories-content">
                    <!--  -->
                    <div class="title-wrap">
                        <div class="icon d-flex">
                            <img src="{{ getImageFile(get_option('category_course_logo')) }}" alt=""/>
                        </div>
                        <h4 class="title">{{ __(get_option('category_course_title')) }}</h4>
                        <p class="text">{{ __(get_option('category_course_subtitle')) }}</p>
                    </div>
                    <!--  -->
                    <div class="row rg-24">
                        @foreach($featureCategories->take(8) as $key => $category)
                            <div class="col-xl-3 col-lg-4 col-sm-6">
                                <a href="{{ route('category-courses', $category->slug) }}">
                                    <div class="top-categories-item">
                                        <div class="icon">
                                            <img src="{{getImageFile($category->image)}}" alt=""/>
                                        </div>
                                        <div class="content">
                                            <h4 class="title">{{ __($category->name) }}</h4>
                                            <p class="text">{{__('OVER')}} {{$category->courses->count()}}
                                                + {{__('COURSE')}}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if($home->upcoming_courses_area == 1)
        <!-- Upcoming course Section -->
        <section class="upcoming-course upcoming-course-kindergarten">
            <div class="container">
                <div class="upcoming-course-content">
                    <!--  -->
                    <div class="title-wrap">
                        <div class="row justify-content-between align-items-center rg-20">
                            <div class="col-lg-8">
                                <div class="d-flex flex-column flex-sm-row align-items-lg-center align-items-sm-start align-items-center g-26">
                                    <div class="icon d-flex max-w-60 flex-shrink-0"><img
                                            src="{{ getImageFile(get_option('upcoming_course_logo')) }}" alt=""/>
                                    </div>
                                    <div class="content">
                                        <h4 class="title text-center text-sm-start">{{ __(get_option('upcoming_course_title')) }}</h4>
                                        <p class="text text-center text-sm-start">{{ __(get_option('upcoming_course_title')) }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="d-flex justify-content-lg-end justify-content-sm-start justify-content-center">
                                    <a href="{{ route('courses') }}" class="btn-fill-kindergarten">{{__('View All')}}
                                        <i class="fa fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row rg-20">
                        @if(count($upcomingCourses))
                            @foreach ($upcomingCourses as $course)
                                @php
                                    $userRelation = getUserRoleRelation($course->user);
                                @endphp
                                <div class="col-12 col-sm-6 col-lg-3">
                                    <div class="course-item-kindergarten">
                                        @include('frontend-theme-4.partials.course')
                                    </div>
                                </div>
                            @endforeach
                        @else
                            {{ __("No Course Found") }}
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if($home->bundle_area == 1)
        @if(count($bundles) > 0)
            <!-- Latest Bundle Section -->
            <section class="latest-bundle latest-bundle-kindergarten">
                <div class="container">
                    <div class="latest-bundle-content">
                        <!--  -->
                        <div class="title-wrap">
                            <div class="row justify-content-between align-items-center rg-20">
                                <div class="col-lg-8">
                                    <div class="d-flex flex-column flex-sm-row align-items-lg-center align-items-sm-start align-items-center g-26">
                                        <div class="icon d-flex max-w-60 flex-shrink-0">
                                            <img src="{{ getImageFile(get_option('bundle_course_logo')) }}" alt=""/>
                                        </div>
                                        <div class="content">
                                            <h4 class="title text-center text-sm-start">{{ __(get_option('bundle_course_title')) }}</h4>
                                            <p class="text text-center text-sm-start">{{ __(get_option('bundle_course_subtitle')) }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="d-flex justify-content-lg-end justify-content-sm-start justify-content-center">
                                        <a href="{{ route('bundles') }}"
                                           class="btn-fill-kindergarten">{{ __('View All') }} <i
                                                class="fa fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  -->
                        <div class="row rg-30">
                            @foreach($bundles->take(4) as $bundle)
                                @php
                                    $relation = getUserRoleRelation($bundle->user)
                                @endphp
                                <div class="col-md-6">
                                    <div class="course-item-three">
                                        <div class="img">
                                            <img src="{{ getImageFile($bundle->image) }}" alt=""/>
                                        </div>
                                        <div class="content">
                                            <a href="{{ route('bundle-details', [$bundle->slug]) }}"
                                               class="title">{{ Str::limit($bundle->name, 40) }}</a>
                                            <a href="{{ route('userProfile',$bundle->user->id) }}"
                                               class="author">{{ @$bundle->user->$relation->name }}</a>
                                            <p>
                                                {{__('Courses')}}:
                                                <span class="color-hover">{{ @$bundle->bundleCourses->count() }}</span>
                                            </p>
                                            <p class="price">{{ __('Price') }}:
                                                <span class="discountPrice">
                                                  @if($currencyPlacement == 'after')
                                                        {{$bundle->price}} {{ $currencySymbol }}
                                                    @else
                                                        {{ $currencySymbol }} {{$bundle->price}}
                                                    @endif
                                            </span>
                                            </p>
                                            @if(get_option('cashback_system_mode', 0))
                                                <div class="cashback">
                                                    <div class="title">{{__('Cashback')}} :</div>
                                                    <div class="amount">
                                                        @if($currencyPlacement ?? get_currency_placement() == 'after')
                                                            {{calculateCashback($bundle->price) }} {{ $currencySymbol ?? get_currency_symbol() }}
                                                        @else
                                                            {{ $currencySymbol ?? get_currency_symbol() }} {{calculateCashback($bundle->price) }}
                                                        @endif
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        @endif
    @endif

    @if(isAddonInstalled('LMSZAIPRODUCT'))
        @if($home->product_area == 1)
            <!-- Product Varity -->
            <section class="product-varity product-varity-kindergarten">
                <img src="{{asset('frontend-theme-4/assets/images/kindergarten-top-category-wave.svg')}}" alt="" class="wave-img"/>
                <div class="container">
                    <div class="product-varity-content">
                        <!--  -->
                        <div class="title-wrap">
                            <h4 class="title">{{ __(get_option('product_section_title')) }}
                                @if(env('LOGIN_HELP') == 'active')
                                    <span class="color-deep-orange font-18">(Addon)</span>
                                @endif
                            </h4>
                            <p class="text">{{ __(get_option('product_section_subtitle')) }}</p>
                        </div>
                        <!--  -->
                        <div class="row rg-24">
                            @foreach($products->take(6) as $product)
                                @php
                                    $relation = getUserRoleRelation($product->user)
                                @endphp
                                <div class="col-lg-4 col-md-6">
                                    <div class="course-item-two course-item-two-kindergarten">
                                        <div class="img">
                                            <img src="{{getImageFile($product->thumbnail_path)}}"
                                                 alt="{{$product->title}}"/>
                                        </div>
                                        <div class="content">
                                            <a class="title" href="{{ route('lms_product.frontend.view', $product->slug) }}">{{$product->title}}</a>
                                            @php
                                                $reviewCount = $product->reviews()->count();
                                                $averate_percent = $product->average_review * 20;
                                            @endphp
                                            <div class="rating-wrap">
                                                <span>{{ number_format(@$product->average_review, 1) }}</span>
                                                <div class="rating-part-star">
                                                    <div
                                                        class="course-rating search-instructor-rating w-100 mb-0 d-inline-flex align-items-center justify-content-center">
                                                        <div class="star-ratings">
                                                            <div class="fill-ratings"
                                                                 style="width: {{ $averate_percent }}%">
                                                                <span>★★★★★</span>
                                                            </div>
                                                            <div class="empty-ratings">
                                                                <span>★★★★★</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="num-total">({{ $reviewCount }})</span>
                                            </div>
                                            <p class="price">{{__('Price')}}:
                                                @if($product->old_price > $product->current_price)
                                                    <span class="regularPrice">
                                                        @if($currencyPlacement ?? get_currency_placement() == 'after')
                                                            {{ $product->old_price }} {{ $currencySymbol ?? get_currency_symbol() }}
                                                        @else
                                                            {{ $currencySymbol ?? get_currency_symbol() }} {{ $product->old_price }}
                                                        @endif
                                                    </span>
                                                    <span class="discountPrice">
                                                        @if($currencyPlacement ?? get_currency_placement() == 'after')
                                                            {{ $product->current_price }} {{ $currencySymbol ?? get_currency_symbol() }}
                                                        @else
                                                            {{ $currencySymbol ?? get_currency_symbol() }} {{ $product->current_price }}
                                                        @endif
                                                    </span>
                                                @else
                                                    <span class="regularPrice">
                                                        @if($currencyPlacement ?? get_currency_placement() == 'after')
                                                            {{ $product->current_price }} {{ $currencySymbol ?? get_currency_symbol() }}
                                                        @else
                                                            {{ $currencySymbol ?? get_currency_symbol() }} {{ $product->current_price }}
                                                        @endif
                                                    </span>
                                                @endif
                                            </p>
                                            @if($product->quantity > 0)
                                                <button class="btn-fill-kindergarten addToCart"
                                                        data-product_id="{{ $product->id }}" data-quantity=1
                                                        data-route="{{ route('student.addToCart') }}">{{ __('Add To Cart') }}
                                                    <i class="fa fa-arrow-right"></i></button>
                                            @else
                                                <button class="btn-fill-kindergarten">{{ __('Out of stock') }} <i
                                                        class="fa fa-arrow-right"></i></button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        @endif
    @endif


    @if($home->instructor_area == 1)
        <!-- Top Instructor -->
        <section class="top-instructor top-instructor-kindergarten">
            <img src="{{asset('frontend-theme-4/assets/images/top-instructor-bg.png')}}" alt="" class="bg-img"/>
            <div class="container">
                <div class="top-instructor-content">
                    <!--  -->
                    <div class="title-wrap">
                        <h4 class="title text-center text-sm-start">{{ __(get_option('top_instructor_title')) }}</h4>
                        <p class="text text-center text-sm-start">{{ __(get_option('top_instructor_subtitle')) }}</p>
                    </div>
                    <!--  -->
                    <div class="row rg-20">
                        @foreach($consultationInstructors->take(4) as $user)
                            <div class="col-xl-3 col-lg-4 col-sm-6">
                                <div class="top-instructor-item-one position-relative">
                                    @php
                                        $percent = $user->hourly_rate && $user->hourly_old_rate ? (($user->hourly_old_rate -
                                        $user->hourly_rate) * 100) / $user->hourly_old_rate : 0;
                                    @endphp
                                    @if ($percent && $user->consultation_available == 1)
                                        <span
                                            class="instructor-price-cutoff badge radius-3 font-12 font-medium position-absolute bg-orange">{{round(@$percent) }} {{ __('off') }}</span>
                                    @endif
                                    <a href="{{ route('userProfile', $user->id) }}" class="img">
                                        <img src="{{getImageFile(@$user->image_path)}}"
                                             alt=""/>
                                    </a>
                                    <div class="content">
                                        <a href="{{ route('userProfile', $user->id) }}"
                                           class="title">{{$user->name }}</a>
                                        <p class="ins-authLevel"> {{ @$user->professional_title }} ||
                                            @if(get_instructor_ranking_level($user->badges))
                                                || {{ get_instructor_ranking_level($user->badges) }}
                                            @endif
                                        </p>