@extends('layouts.front-layout')
@section('title')
    Home
@endsection
@section('content')
    <section class="main-slider p-0" id="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"
                            data-background="{{ $slider->getFirstMediaUrl('slider_image') ? $slider->getFirstMediaUrl('slider_image') : asset('upload/placeholder.png') }}">
                            <div class="container">
                                <div class="row aic">
                                    <div class="col-lg-4">
                                        <div class="slideOne">
                                            <h2 data-swiper-parallax="-200">{{ $slider->first_heading ?: '' }}</h2>
                                            <h1 data-swiper-parallax="-200">{{ $slider->second_heading ?: '' }}</h1>
                                            <h3 data-swiper-parallax="-200">{{ $slider->short_paragraph ?: '' }}</h3>
                                            <p data-swiper-parallax="-200">{!! $slider->description ?: '' !!}</p>
                                            <a href="{{ route('shop') }}" class="themeBtn">Shop Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <h2 class="text-center">Slider Not Found</h2>
                @endforelse

            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>

    <section class="shop-categori">
        <div class="container">
            <h2 class="mainHead text-center mb-4" data-aos="fade-up">Shop By Category</h2>
            <div class="swiper shopslider" data-aos="fade-up">
                <div class="swiper-wrapper">
                    @forelse($get_categories as $category)
                        <div class="swiper-slide">
                            <div class="showrap">
                                <a href="{{ route('category.product', ['slug' => $category->slug ?: '']) }}">
                                    <figure>
                                        <img src="{{ $category->getFirstMediaUrl('category_image') ? $category->getFirstMediaUrl('category_image') : asset('upload/placeholder.png') }}"
                                            class="img-fluid" alt="">
                                    </figure>
                                    <div class="shopcntnt">
                                        <h3>{{ $category->category_name ?: '' }}</h3>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @empty
                        <h2 class="text-center">Categories Not Found</h2>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    <section class="serveSection">
        <div class="container">
            <div class="row justify-content-center align-items-center">
                <div class="col-md-3" data-aos="fade-up">
                    <figure>
                        <img src="{{ $home->getFirstMediaUrl('home_serve_you_first_image') ? $home->getFirstMediaUrl('home_serve_you_first_image') : asset('upload/placeholder.png') }}"
                            class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="servcntnt">
                        <h3 data-aos="fade-up">{{ $pageData['Home']['serve_you_heading'] ?? '' }}</h3>
                        <p data-aos="fade-up">{!! $pageData['Home']['serve_you_description'] ?? '' !!}</p>
                        <a href="{{ route('shop') }}" class="themeBtn" data-aos="fade-up">Shop Now</a>
                    </div>
                </div>
                <div class="col-md-3" data-aos="fade-up">
                    <figure>
                        <img src="{{ $home->getFirstMediaUrl('home_serve_you_second_image') ? $home->getFirstMediaUrl('home_serve_you_second_image') : asset('upload/placeholder.png') }}"
                            class="img-fluid" alt="">

                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="aboutSection ">
        <div class="container-fluid p-0">
            <div class="row align-items-center">
                <div class="col-md-6" data-aos="fade-up">
                    <figure>
                        <img src="{{ $about->getFirstMediaUrl('about_home_first_image') ? $about->getFirstMediaUrl('about_home_first_image') : asset('upload/placeholder.png') }}"
                            class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="aboutcntnt">
                        <h4 data-aos="fade-up">{{ $pageData['About']['heading'] ?? '' }}</h4>
                        <h3 class="mainHead" data-aos="fade-up">{{ $pageData['About']['sub_heading'] ?? '' }}</h3>
                        <p data-aos="fade-up">{!! $pageData['About']['description'] ?? '' !!}</p>
                        <a href="{{ route('contact') }}" class="themeBtn" data-aos="fade-up">Contact us</a>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{ $about->getFirstMediaUrl('about_home_second_image') ? $about->getFirstMediaUrl('about_home_second_image') : asset('upload/placeholder.png') }}"
            class="img-fluid aboutimgg" alt="">

    </section>

    <section class="featureproduct">
        <div class="container">
            <div class="feraturhead">
                <h2 class="mainHead" data-aos="fade-up">Featured Products</h2>
                <a href="{{ route('shop') }}" data-aos="fade-up">View All Products</a>
            </div>
            <div class="row">
                <div class="swiper productslider" data-aos="fade-up">
                    <div class="swiper-wrapper">
                        @forelse($get_products as $product)
                            <div class="swiper-slide">
                                <div class="featurewrap">
                                    <figure>
                                        <img src="{{ $product->getFirstMediaUrl('product_image') ? $product->getFirstMediaUrl('product_image') : asset('upload/placeholder.png') }}"
                                            class="img-fluid" alt="">
                                    </figure>
                                    <div class="greebtn">
                                        @if (Auth::check())
                                            @if (Auth::user()->hasRole('vendor') || Auth::user()->hasRole('admin'))
                                                {{-- If the user is a vendor or admin, do not show the "Add to Cart" button  --}}
                                            @else
                                                <a href="{{ route('product.detail', ['slug' => $product->slug]) }}">Add To
                                                    cart <i class="fal fa-shopping-cart"></i></a>
                                            @endif
                                        @else
                                            <a href="{{ route('product.detail', ['slug' => $product->slug]) }}">Add To
                                                cart <i class="fal fa-shopping-cart"></i></a>
                                        @endif
                                    </div>
                                    <div class="featurecntnt">

                                        <h3>{{ $product->product_name ?: '' }}</h3>
                                        <p>$ {{ $product->price ?: '' }}</p>

                                    </div>
                                </div>
                            </div>
                        @empty

                            <h2 class="text-center">Products Not Found</h2>
                        @endforelse
                    </div>
                    <div class="swiper-pagination"></div>
                </div>

            </div>
        </div>
    </section>


    <section class="testimonialSection">
        <div class="container">

            <h2 class="mainHead text-center" data-aos="fade-up">{{ $pageData['Testimonials']['heading'] ?? '' }}</h2>


            <div class="row">
                <div class="swiper testimonialslider" data-aos="fade-up">
                    <div class="swiper-wrapper">
                        @forelse($get_testimonials as $testimonial)
                            <div class="swiper-slide">
                                <div class="testiwrap">
                                    <div class="star">
                                        <ul>

                                            @for ($i = 1; $i <= $testimonial->star_rated; $i++)
                                                <li><i class="fas fa-star"></i></li>
                                            @endfor

                                            @for ($j = $testimonial->star_rated + 1; $j <= 5; $j++)
                                                <li><i class="fas fa-star text-muted"></i></li>
                                            @endfor
                                        </ul>
                                        <img src="upload/images/quote1.webp" class="img-fluid" alt="">
                                    </div>
                                    <p>{!! $testimonial->description ?: '' !!}
                                    </p>
                                    <h4>{{ $testimonial->user_name ?: '' }}</h4>
                                    <h3>{{ $testimonial->owner_name ?: '' }}</h3>
                                </div>
                            </div>
                        @empty

                            <h2 class="text-center">Testimonial Not Found</h2>
                        @endforelse
                    </div>

                    <div class="swiper-pagination"></div>
                </div>
            </div>

        </div>

    </section>

    @include('front.includes.home-sell-sec')
@endsection