@extends('layout.layout')
@section('content')
    <section class="wpo-hero-slider">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                @foreach($sliders as $slider)
                <div class="swiper-slide">
                    <div class="slide-inner slide-bg-image"
                         data-background="{{ $slider->getFirstMediaUrlOrDefault(MediaHelper::SLIDER_MEDIA_PATH, 'webp')['url'] }}"
                         title="{{ $slider->getFirstMediaUrlOrDefault(MediaHelper::SLIDER_MEDIA_PATH)['title'] }}"
                         role="img" aria-label="{{ $slider->getFirstMediaUrlOrDefault(MediaHelper::SLIDER_MEDIA_PATH)['alt'] }}">
                        <!-- <div class="gradient-overlay"></div> -->
                        <div class="container-fluid">
                            <div class="slide-content">
                                <div data-swiper-parallax="300" class="slide-title">
                                    <h2>{{ $slider->title }}</h2>
                                    <p>{!! $slider->text !!}</p>
                                </div>
                                <div class="clearfix"></div>
                                @if($slider->button)
                                <div data-swiper-parallax="500" class="slide-btns">
                                    <a href="{{ $slider->button_url }}" class="theme-btn">{{ $slider->button }}</a>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>

    @include('layout.partials.filter')

    <section class="wpo-about-section py-5">
        <div class="container">
            <div class="wpo-about-section-wrapper">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-12 col-12">
                        <div class="wpo-about-img">
                            <img loading="lazy"
                                 src="{{ asset(Storage::url($settings['home_main_info_image'] ?? '')) }}"
                                 alt="{{ JSONByLocale($settings['home_main_info_img_alt'] ?? '') }}"
                                 title="{{ JSONByLocale($settings['home_main_info_img_title'] ?? '') }}">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-12">
                        <div class="wpo-about-content">
                            <div class="about-title">
                                <span>{{ JSONByLocale($settings['home_main_info_sub_title'] ?? '') }}</span>
                                <h2>{{ JSONByLocale($settings['home_main_info_title'] ?? '') }}</h2>
                            </div>
                            <div class="wpo-about-content-inner">
                                {!! JSONByLocale($settings['home_main_info_description'] ?? '') !!}
                                <div class="about-info-wrap">
                                    <div class="about-info-left">
                                        <p>{!! JSONByLocale($settings['home_main_info_label'] ?? '') !!}</p>
                                    </div>
                                    <div class="about-info-right">
                                        <p>{{ JSONByLocale($settings['home_main_info_phone_label'] ?? '') }}</p>
                                        <h3>{{ $settings['home_main_info_phone'] ?? '' }}</h3>
                                    </div>
                                </div>
                                @if(isset($settings['home_main_info_button']))
                                <a href="{{ JSONByLocale($settings['home_main_info_button_url'] ?? '') }}" class="theme-btn">
                                    {{ JSONByLocale($settings['home_main_info_button'] ?? '') }}
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if(count($countriesFeatured))
        <div class="wpo-destination-area">
            <div class="container">
                <div class="wpo-section-title mb-2">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-xl-6 col-md-8">
                            <div class="wpo-section-title-left">
                                <p>{{ __('home.plan_your_trip_country') }}</p>
                                <h2>{{ __('home.where_to_next_country') }}?</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="destination-wrap">
                    <div class="row">
                        @foreach($countriesFeatured as $country)
                            <div class="col-lg-4 col-md-6 col-12">
                                <div class="destination-item">
                                    <div class="destination-img">
                                        <a href="{{ route('country.show', [$country->slug]) }}">
                                            <img loading="lazy"
                                                 src="{{$country->getFirstMediaUrlOrDefault(MediaHelper::COUNTRY_MEDIA_PATH, 'webp')['url']}}"
                                                 alt="{{$country->getFirstMediaUrlOrDefault(MediaHelper::COUNTRY_MEDIA_PATH)['alt']}}"
                                                 title="{{$country->getFirstMediaUrlOrDefault(MediaHelper::COUNTRY_MEDIA_PATH)['title']}}">
                                        </a>
                                    </div>
                                    <div class="destination-content text-center">
                                        <h2>
                                            <a href="{{ route('country.show', [$country->slug]) }}">
                                                {{ $country->name }}
                                            </a>
                                        </h2>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if(count($featuredDestinations))
    <div class="wpo-destination-area">
        <div class="container">
            <div class="wpo-section-title mb-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-xl-6 col-md-8">
                        <div class="wpo-section-title-left">
                            <p>{{ __('home.plan_your_trip') }}</p>
                            <h2>{{ __('home.where_to_next') }}?</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="destination-wrap">
                <div class="row">
                    @foreach($featuredDestinations as $featuredDestination)
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="destination-item">
                                <div class="destination-img">
                                    <a href="{{ route('destination.show', [$featuredDestination->slug]) }}">
                                        <img loading="lazy"
                                             src="{{$featuredDestination->getFirstMediaUrlOrDefault(MediaHelper::DESTINATION_MEDIA_PATH, 'webp')['url']}}"
                                             alt="{{$featuredDestination->getFirstMediaUrlOrDefault(MediaHelper::DESTINATION_MEDIA_PATH)['alt']}}"
                                             title="{{$featuredDestination->getFirstMediaUrlOrDefault(MediaHelper::DESTINATION_MEDIA_PATH)['title']}}">
                                    </a>
                                </div>
                                <div class="destination-content">
                                    <h2>
                                        <a href="{{ route('destination.show', [$featuredDestination->slug]) }}">
                                            {{ $featuredDestination->name }}
                                        </a>
                                    </h2>
                                    <p>

                                        {!! Str::limit(strip_tags($featuredDestination->short_description), 100) !!}

                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="wpo-section-title mb-2">
                <div class="col-xl-12 col-md-12">
                    <div class="btns">
{{--                        --}}
                        <a href="{{ route('destination.index') }}" tabindex="0">{{ __('home.view_all_destinations') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <section class="wpo-fun-fact-section py-5" style="background: url({{ asset(Storage::url($settings['home_banner_image'] ?? '')) }}) no-repeat center center;"
             title="{{ JSONByLocale($settings['home_banner_img_title'] ?? '') }}"
             role="img" aria-label="{{ JSONByLocale($settings['home_banner_img_alt'] ?? '') }}">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col col-xl-10">
                    <div class="wpo-fun-best-travel clearfix">
                        <h2>{{ JSONByLocale($settings['home_banner_title'] ?? '') }}</h2>
                        {!! JSONByLocale($settings['home_banner_description'] ?? '') !!}
                        @if(isset($settings['home_banner_button']))
                        <a href="{{ $settings['home_banner_button_url'] ?? '#' }}" class="theme-btn">{{ JSONByLocale($settings['home_banner_button'] ?? '') }}</a>
                        @endif
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if(count($firstTours))
    <div class="wpo-destination-area-s2 py-5">
        <div class="container">
            <div class="wpo-section-title mb-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-xl-6 col-md-8">
                        <div class="wpo-section-title-left">
                            <p>{{ __('home.special_offers') }}</p>
                            <h2> {{ __('home.special_egypt_tours_offers') }} </h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="destination-wrap">

                <div class="row">
                    <div class="col-lg-6 col-md-12 col-12">
                        <div class="destination-item left-side">
                            <div class="destination-img">
                                <a href="{{ route('tour', [$firstTours[0]->subCategory->category->country->slug, $firstTours[0]->subCategory->category->slug, $firstTours[0]->subCategory->slug, $firstTours[0]->slug]) }}">
                                    <img loading="lazy"
                                         src="{{$firstTours[0]->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH, 'webp')['url']}}"
                                         alt="{{$firstTours[0]->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH)['alt']}}"
                                         title="{{$firstTours[0]->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH)['title']}}">
                                </a>
                            </div>
                            <div class="destination-content">
                                <span class="sub">@foreach($firstTours[0]->destinations as $destination)<a href="{{ route('destination.show', [$destination->slug]) }}">{{ $destination->name }}</a> @if(!$loop->last),@endif @endforeach</span>
                                <h2><a href="{{ route('tour', [$firstTours[0]->subCategory->category->country->slug, $firstTours[0]->subCategory->category->slug, $firstTours[0]->subCategory->slug, $firstTours[0]->slug]) }}">{{ $firstTours[0]->name }}</a></h2>
                                <div class="destination-bottom">
                                    <p>

                                        @if(!empty($firstTours[0]->price_start_from ))
                                        {{ CurrencyHelper::display($firstTours[0]->price_start_from) }} {{ __('tour.per_night') }}
                                        @endif
                                    </p>
                                        @if(!empty($firstTours[0]->duration))
                                    <p>
                                        Duration: {{ $firstTours[0]->duration }}
                                    </p>
                                         @endif


                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-12">
                        <div class="destination-item-wrap">
                            @foreach($firstTours->skip(1) as $firstTour)
                                <div class="destination-item">
                                    <div class="destination-img">
                                        <a href="{{ route('tour', [$firstTour->subCategory->category->country->slug, $firstTour->subCategory->category->slug, $firstTour->subCategory->slug, $firstTour->slug]) }}">
                                            <img loading="lazy"
                                                 src="{{$firstTour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH, 'webp')['url']}}"
                                                 alt="{{$firstTour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH)['alt']}}"
                                                 title="{{$firstTour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH)['title']}}">
                                        </a>
                                    </div>
                                    <div class="destination-content">
                                        <span class="sub">@foreach($firstTour->destinations as $destination)<a href="{{ route('destination.show', [$destination->slug]) }}">{{ $destination->name }}</a> @if(!$loop->last),@endif @endforeach</span>
                                        <h2><a href="{{ route('tour', [$firstTour->subCategory->category->country->slug, $firstTour->subCategory->category->slug, $firstTour->subCategory->slug, $firstTour->slug]) }}">{{ $firstTour->name }}</a></h2>
                                        <div class="destination-bottom d-block">

                                            @if(!empty($firstTour->price_start_from) && $firstTour->price_start_from > 0)
                                            <p> <i class="fa fa-tags"></i> {{ CurrencyHelper::display($firstTour->price_start_from) }} {{ __('tour.per_night') }}</p>
                                            @endif
                                            @if(!empty($firstTour->duration) && $firstTour->duration  > 0)
                                                <p> <i class="fa fa-calendar"></i> Duration: {{ $firstTour->duration }}</p>
                                                @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if(count($featuredSubCategories))
    <div class="wpo-room-area-s2 section-padding pt-0">
        <div class="container">
            <div class="wpo-section-title mb-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-xl-6 col-md-8">
                        <div class="wpo-section-title-left">
                            <p>{{ __('home.hot_deals') }}</p>
                            <h2>{{ __('home.hot_deals_in_cali4travel_tours') }}</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="room-wrap room-active owl-carousel">
                @foreach($featuredSubCategories as $featuredSubCategory)
                <div class="col-lg-12 col-xl-12 col-md-12">
                    <div class="room-item">
                        <div class="room-img">
                            <a href="{{ route('subCategory', [$featuredSubCategory->category->country->slug, $featuredSubCategory->category->slug, $featuredSubCategory->slug]) }}">
                                <img loading="lazy"
                                     src="{{$featuredSubCategory->getFirstMediaUrlOrDefault(MediaHelper::SUB_CATEGORY_MEDIA_PATH, 'webp')['url']}}"
                                     alt="{{$featuredSubCategory->getFirstMediaUrlOrDefault(MediaHelper::SUB_CATEGORY_MEDIA_PATH)['alt']}}"
                                     title="{{$featuredSubCategory->getFirstMediaUrlOrDefault(MediaHelper::SUB_CATEGORY_MEDIA_PATH)['title']}}">
                            </a>
                        </div>
                        <div class="room-content">
                            <h2>{{ $featuredSubCategory->name }}</h2>
                            <label> <a href="{{ route('subCategory', [$featuredSubCategory->category->country->slug, $featuredSubCategory->category->slug, $featuredSubCategory->slug]) }}"> {{ __('general.read_more') }} </a> </label>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <section class="wpo-about-section-s2 section-padding" style="background: url({{ asset(Storage::url($settings['home_main_second_info_image'] ?? '')) }}) no-repeat center center;"
             title="{{ JSONByLocale($settings['home_main_second_info_img_title'] ?? '') }}"
             role="img" aria-label="{{ JSONByLocale($settings['home_main_second_info_img_alt'] ?? '') }}">
        <div class="container-fluid">
            <div class="wpo-about-section-wrapper">
                <div class="row align-items-center">
                    <div class="col-xl-5 col-lg-6 col-md-8 col-12 offset-xl-6 offset-lg-4 offset-md-2">
                        <div class="wpo-about-content">
                            <div class="about-title">
                                <span>{{ JSONByLocale($settings['home_main_second_info_sub_title'] ?? '') }}</span>
                                <h2>{{ JSONByLocale($settings['home_main_second_info_title'] ?? '') }}</h2>
                                {!! JSONByLocale($settings['home_main_second_info_description'] ?? '') !!}
                            </div>
                            <div class="about-info-wrap">
                                <div class="about-info-left">
                                    <p>{!! JSONByLocale($settings['home_main_second_info_label'] ?? '') !!}</p>
                                </div>
                                <div class="about-info-right">
                                    <p>{{ JSONByLocale($settings['home_main_second_info_phone_label'] ?? '') }}</p>
                                    <h3>{{ $settings['home_main_second_info_phone'] ?? '' }}</h3>
                                </div>
                            </div>
                            @if(isset($settings['home_main_second_info_button']))
                            <a href="{{ JSONByLocale($settings['home_main_second_info_button_url'] ?? '') }}" class="theme-btn m-lg-0">
                                {{ JSONByLocale($settings['home_main_second_info_button'] ?? '') }}
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if(count($secondTours))
    <div class="wpo-room-area py-5">
        <div class="container">
            <div class="wpo-section-title">
                <div class="row align-items-center justify-content-between">
                    <div class="col-xl-12 col-md-12">
                        <div class="wpo-section-title-left text-center">
                            <h2>{{ __('home.popular_cali4travel_tours') }}</h2>
                            <p>
                                {{ __('home.popular_cali4travel_tours_established') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="room-wrap">
                <div class="row">
                    @foreach($secondTours as $secondTour)
                    <div class="col-lg-3 col-md-6 col-12">
                        <div class="room-item" itemtype="https://schema.org/Product">
                            <div class="room-img room-img-tours">
                                <a href="{{route('tour', [$secondTour->subCategory->category->country->slug, $secondTour->subCategory->category->slug, $secondTour->subCategory->slug, $secondTour->slug])}}">
                                    <img itemprop="image" loading="lazy"
                                         src="{{$secondTour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH, 'webp')['url']}}"
                                         alt="{{$secondTour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH)['alt']}}"
                                         title="{{$secondTour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH)['title']}}">
                                </a>
                            </div>
                            <div class="room-content room-content-tours style-room-content-new">
                                <h2 class="style-room-content">
                                    <a href="{{route('tour', [$secondTour->subCategory->category->country->slug, $secondTour->subCategory->category->slug, $secondTour->subCategory->slug, $secondTour->slug])}}">
                                        {{ $secondTour->name }}
                                    </a>
                                </h2>
                                @if(!empty($secondTour->duration) && $secondTour->duration  !== null)
                                <ul><li><i class="fi flaticon-calendar"></i>{{ $secondTour->duration }}</li></ul>
                                @endif

                                    @if(!empty($secondTour->price_start_from) && $secondTour->price_start_from > 0)
                                <h3 class="float-lg-start">
                                    {{ CurrencyHelper::display($secondTour->price_start_from) }} <span>/ {{ __('tour.per_night') }}</span>
                                </h3>
                                @endif
                                <a href="{{route('tour', [$secondTour->subCategory->category->country->slug, $secondTour->subCategory->category->slug, $secondTour->subCategory->slug, $secondTour->slug])}}" class="theme-btn theme-btn-tours">
                                    {{ __('general.book_now') }}
                                </a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @endif


    @if(count($featuredArticles))
    <section class="wpo-blog-section pt-5 pb-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6">
                    <div class="wpo-section-title-s2">
                        <h2>{{ __('home.latest_travel_trends_established') }}</h2>
                        <p>
                            {{ __('home.latest_travel_trends_distracted') }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="wpo-blog-items">
                <div class="row">
                    @foreach($featuredArticles as $featuredArticle)
                    <div class="col col-lg-3 col-md-6 col-12">
                        <div class="wpo-blog-item">
                            <div class="wpo-blog-img">
                                <img loading="lazy"
                                     src="{{ $featuredArticle->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH, 'webp')['url'] }}"
                                     title="{{ $featuredArticle->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH)['title'] }}"
                                     alt="{{ $featuredArticle->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH)['alt'] }}">
                            </div>
                            <div class="wpo-blog-content">
                                <div class="wpo-blog-content-top">
                                    <div class="b-top">
                                        <div class="b-top-inner">
                                            <h2>
                                                <a href="{{ route('blog.show', [$featuredArticle->category->country->slug, $featuredArticle->category->slug, $featuredArticle->slug]) }}">
                                                    {{ $featuredArticle->name }}
                                                </a>
                                            </h2>
                                        </div>
                                    </div>
                                    <a class="b-btn" href="{{ route('blog.show', [$featuredArticle->category->country->slug, $featuredArticle->category->slug, $featuredArticle->slug]) }}">
                                        {{ __('general.read_more') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @endif
    @include('layout.partials.testimonial')
    @include('layout.partials.newsletter')
    @include('layout.partials.faq')
    @include('layout.partials.partner')
@endsection