@extends('layouts.front-layout')
@section('title') Home @endsection
@section('content')
    <!-- Preloader -->
    <div class="preLoader">
        <video src="{{asset('front-assets/videos/chrome_100_percent.pak.mp4')}}" autoplay muted></video>
    </div>
{{--    @if(Request::has('page'))--}}
{{--    @else--}}
{{--        --}}
{{--    @endif--}}


    <!-- End Preloader -->
    <section class="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">

                @forelse($get_sliders as $slider)
                <div class="swiper-slide">
                    <div class="slide-inner bg-image">
                        <video autoplay muted loop playsinline preload="metadata">
                            <source
                                src="{{$slider->sliderImage('slider_video') ? : ''}}"
                                type="video/mp4">
                        </video>
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-md-9">
                                    <div class="slideContent slideOne">
                                        <h2>{{$slider->first_heading ? : ''}}</h2>
                                        <h3>{{$slider->second_heading ? : ''}}</h3>
                                        {!! $slider->description ? : '' !!}
                                        <a href="{{route('our.product')}}" class="themeBtn">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                    <h3>Slider Data Not Available</h3>
                @endforelse
            </div>
            <!-- end swiper-wrapper -->
            <!-- <div class="swiper-pagination"></div> -->
            <!-- end swiper-pagination -->
{{--            <div class="swiper-button-next"></div>--}}
{{--            <!-- end swiper-button-next -->--}}
{{--            <div class="swiper-button-prev"></div>--}}
        </div>
    </section>


    <section class="about-main">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6" data-aos="fade-right">
                    <figure>
                        <img src="{{ pagesSingleImage('About', 'about_second_image') }}" class="img-fluid" alt="img">
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="about-content" data-aos="fade-left">
                        <img src="{{ pagesSingleImage('About', 'about_first_image') }}" class="img-fluid" alt="img">
                        <h2>{{ $pageData['About']['heading'] ?? '' }}</h2>
                        <h3>{{ $pageData['About']['sub_heading'] ?? '' }}</h3>
                        {!!$pageData['About']['first_description'] ?? '' !!}
                        <a href="{{ route('about') }}" class="themeBtn">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="cuts-main">
        <div class="container-fluid p-0">
            <div class="row no-gutters">
                @forelse($get_categories as $category)
                <div class="col-md-4" data-aos="fade-right">
                    <div class="cuts-card">
                        <figure>
                            <img src="{{$category->categoryImage('category_image') ? : ''}}" class="img-fluid" alt="img">
                            <div class="overlay">
                                <h2>{{$category->category_name ? : ''}}</h2>
                                <a href="{{ route('our.product') }}" class="themeBtn borderBtn">Shop Now</a>
                            </div>
                        </figure>
                    </div>
                </div>
                @empty
                    <h3>Category Data Not Available</h3>
                @endforelse
            </div>
        </div>
    </section>

    <section class="feature-main">
        <div class="container">
            <h2 class="section-heading text-center mb-4" data-aos="fade-up">Our Featured <strong>Meats</strong></h2>
            <div class="row">
                @forelse($get_future_products as $future_product)

                <div class="col-md-4" data-aos="fade-right">
                    <div class="feature-card">
                        <figure>
                            <img src="{{$future_product->productImage('product_image') ? : ''}}" class="w-100" alt="img">
{{--                            <ul class="srch-list">--}}
{{--                                <li><a href="#"><i class="far fa-random"></i></a></li>--}}
{{--                                <li><a href="#"><i class="far fa-search"></i></a></li>--}}
{{--                                <li><a href="#"><i class="far fa-heart"></i></a></li>--}}
{{--                            </ul>--}}

                            <div class="overlay">

                                <h2><a href="{{route('product.detail',['slug'=>$future_product->slug ? : ''])}}">{{$future_product->product_name ? : ''}}</h2>
                                <div class="d-flex">
                                    <a href="{{route('product.detail',['slug'=>$future_product->slug ? : ''])}}">{!! \Illuminate\Support\Str::limit(strip_tags($future_product->description), 80, '...') !!}</a>
                                </div>
                                <span class="price">{{$future_product->product_price ? : ''}}</span>

                                @if(Auth::check())
                                    @if(Auth::user()->hasRole('admin'))
                                    @else
                                        @if($future_product->stock > 0 AND $future_product->product_status === 'Future')

                                                <h3 class="text-white">Coming Soon</h3>
                                        @endif
                                    @endif
                                @else
                                    @if($future_product->stock > 0 AND $future_product->product_status === 'Future')
                                            <h3 class="text-white">Coming Soon</h3>
                                    @endif
                                @endif

                            </div>

                        </figure>
                    </div>

                </div>

                @empty
                    <h3>Future Product Data Not Available</h3>
                @endforelse
{{--                    @if($get_future_products->count() > 0)--}}
{{--                        <div class="mt-5">--}}
{{--                            <h6>{{ $get_future_products->appends(request()->query())->links() }}</h6>--}}
{{--                        </div>--}}
{{--                    @endif--}}
            </div>
        </div>
    </section>

    <section class="new-arrivals">
        <div class="row no-gutters">
                <div class="col-lg-3" data-aos="fade-right">
                <div class="new-arrivals__wrap new-arrivals__wrap--lg">
                    <figure class="new-arrivals__img">
                        <img src="{{ pagesSingleImage('Special Section', 'left_heading_image') }}" alt="image" class="img-fluid">
                    </figure>
                    <div class="new-arrivals__content">
                        <h4>{{ $pageData['Special Section']['left_heading'] ?? '' }}</h4>
                        <a href="{{route('our.product')}}" class="themeBtn">Read More</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="row no-gutters">
                    <div class="col-lg-6" data-aos="fade-right">
                        <div class="new-arrivals__wrap new-arrivals__wrap--sm">
                            <figure class="new-arrivals__img">
                                <img src="{{ pagesSingleImage('Special Section', 'organic_premium_image') }}" alt="image" class="img-fluid">
                            </figure>
                        </div>
                    </div>
                    <div class="col-lg-6" data-aos="fade-left">
                        <div class="new-arrivals__text-wrap">
                            <div class="new-arrivals__text">
                                <h4>{{ $pageData['Special Section']['organic_premium_heading'] ?? '' }}</h4>
                                {!! $pageData['Special Section']['organic_premium_description'] ?? '' !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6" data-aos="fade-right">
                        <div class="new-arrivals__text-wrap">
                            <div class="new-arrivals__text">
                                <h4>{{ $pageData['Special Section']['vegetables_heading'] ?? '' }}</h4>
                                {!! $pageData['Special Section']['vegetables_description'] ?? '' !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6" data-aos="fade-left">
                        <div class="new-arrivals__wrap new-arrivals__wrap--sm">
                            <figure class="new-arrivals__img">
                                <img src="{{ pagesSingleImage('Special Section', 'vegetables_image') }}" alt="image" class="img-fluid">
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4" data-aos="fade-left">
                <div class="new-arrivals__wrap new-arrivals__wrap--lg">
                    <figure class="new-arrivals__img">
                        <img src="{{ pagesSingleImage('Special Section', 'right_heading_image') }}" alt="image" class="img-fluid">
                    </figure>
                    <div class="new-arrivals__content text-center">
                        <h4>{{ $pageData['Special Section']['right_heading'] ?? '' }}</h4>
                        <a href="{{route('our.product')}}" class="themeBtn">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about-main">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6" data-aos="fade-right">
                    <div class="about-content">
                        <img src="{{ pagesSingleImage('Why Choose', 'why_choose_first_image') }}" class="img-fluid" alt="img">
                        <h2>{{ $pageData['Why Choose']['heading'] ?? '' }}</h2>
                        <h3>{{ $pageData['Why Choose']['sub_heading'] ?? '' }}</h3>
                        {!!$pageData['Why Choose']['first_description'] ?? '' !!}
                        <a href="{{ route('about') }}" class="themeBtn">Read More</a>
                    </div>
                </div>
                <div class="col-md-6" data-aos="fade-left">
                    <figure>
                        <img src="{{ pagesSingleImage('Why Choose', 'why_choose_second_image') }}" class="img-fluid" alt="img">
                    </figure>
                </div>
            </div>
        </div>
    </section>
    <section class="exceptional-quality"style="background: url('{{ pagesSingleImage('Testimonial', 'background_image') }}') no-repeat center / cover fixed;">

        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-7" data-aos="fade-up">
                    <div class="exceptional-quality__title text-center">
                        <h3>{{ $pageData['Exceptional Quality']['heading'] ?? '' }}</h3>
                        {!! $pageData['Exceptional Quality']['description'] ?? '' !!}
                    </div>
                </div>
            </div>
            <div class="row no-gutters">
                <div class="col-lg-4" data-aos="fade-right">
                    <a data-fancybox="" href="{{ pagesSingleImage('Exceptional Quality', 'first_video') }}" class="exceptional-quality__card">
                        <figure class="exceptional-quality__img">
                            <img src="{{ pagesSingleImage('Exceptional Quality', 'first_video_image') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="exceptional-quality__btn">
                            <i class="fas fa-play"></i>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4" data-aos="fade-up">
                    <a data-fancybox="" href="{{ pagesSingleImage('Exceptional Quality', 'second_video') }}" class="exceptional-quality__card">
                        <figure class="exceptional-quality__img">
                            <img src="{{ pagesSingleImage('Exceptional Quality', 'second_video_image') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="exceptional-quality__btn">
                            <i class="fas fa-play"></i>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4" data-aos="fade-left">
                    <a data-fancybox="" href="{{ pagesSingleImage('Exceptional Quality', 'third_video') }}" class="exceptional-quality__card">
                        <figure class="exceptional-quality__img">
                            <img src="{{ pagesSingleImage('Exceptional Quality', 'third_video_image') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="exceptional-quality__btn">
                            <i class="fas fa-play"></i>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="we-offer">
        <div class="container">
            <h2 class="section-heading text-center mb-4" data-aos="fade-up">{{ $pageData['Exceptional Quality']['sub_heading'] ?? '' }}</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper offerSlider" data-aos="zoom-in">
                        <div class="swiper-wrapper">
                            @foreach($products as $product)
                            <div class="swiper-slide">
                                <div class="feature-card">
                                    <figure>
                                        <img src="{{ $product->getFirstMediaUrl('product_image') ?? asset('upload/images/No-image.png') }}" class="w-100" alt="img">

                                        <div class="overlay">
                                            <a href="{{ route('product.detail', ['slug' => $product->slug ?: '']) }}" class="themeBtn borderBtn">View</a>
                                        </div>
                                    </figure>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
    </section>

    <section class="testimonial-section"style="background: url('{{ pagesSingleImage('Testimonial', 'background_image') }}') no-repeat center / cover fixed;">
        <div class="container">
            <h2 class="section-heading text-center mb-5" data-aos="fade-up">{{ $pageData['Testimonial']['top_banner_title'] ?? '' }}</h2>
            <div class="swiper testimonialSlider" data-aos="zoom-in">
                <div class="swiper-wrapper">

                    @forelse($get_testimonials as $testimonial)
                    <div class="swiper-slide">
                        <div class="row justify-content-center">
                            <div class="col-lg-6">
                                <div class="testimonialCard">
                                    <figure class="testimonialCard__img">
                                        <img src="{{$testimonial->testimonialImage('testimonial_image') ? : ''}}" alt="image" class="img-fluid">
                                    </figure>
                                    <div class="testimonialCard__text text-center">
                                       {!! $testimonial->description ? : '' !!}
                                        <h5>{{$testimonial->customer_name ? : ''}}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @empty
                        <h3>Testimonials Data Not Available</h3>
                    @endforelse
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </section>

    <section class="insta-main">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper instaSlider">
                        <div class="swiper-wrapper">
                            @forelse($meetImages as $gallery)
                                <div class="swiper-slide">
                                    @if($gallery->hasMedia('product_image') )
                                        <a href="{{ route('product.detail', ['slug' => $gallery->slug ?: '']) }}"><img src="{{ $gallery->getFirstMediaUrl('product_image') }}" class="w-100" alt="img"></a>
                                    @else
                                        <div class="w-100" style="height: 330px; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center;">
                                            <span>No Image Available</span>
                                        </div>
                                    @endif
                                </div>
                            @empty
                                <h3>Gallery Data Not Available</h3>
                            @endforelse
                            @forelse($vegImages as $gallery)
                                <div class="swiper-slide">
                                    @if($gallery->hasMedia('product_image') )
                                        <a href="{{ route('product.detail', ['slug' => $gallery->slug ?: '']) }}"><img src="{{ $gallery->getFirstMediaUrl('product_image') }}" class="w-100" alt="img"></a>
                                    @else
                                        <div class="w-100" style="height: 330px; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center;">
                                            <span>No Image Available</span>
                                        </div>
                                    @endif
                                </div>
                            @empty
                                <h3>Gallery Data Not Available</h3>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new Swiper('.instaSlider', {
                slidesPerView: 4, // Number of visible slides
                spaceBetween: 20, // Space between slides
                loop: true,       // Enables infinite loop
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false, // Continue autoplay after interaction
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true, // Adds clickable pagination
                },
                navigation: {
                    nextEl: '.swiper-button-next', // Adds next button
                    prevEl: '.swiper-button-prev', // Adds prev button
                },
            });
        });
    </script>
@endsection