@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">
                @foreach($get_sliders as $slider)
                    <div class="swiper-slide">
                        <div class="slide-inner bg-image"
                             data-background="{{ $slider->sliderImage('slider_image') ?? '' }}">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="slideOne">
                                            <span>{{ $slider->first_heading ?? '' }}</span>
                                            <h1>{{ $slider->second_heading ?? '' }}</h1>
                                            <p>{!! $slider->description ?? '' !!}</p>
                                            <a href="{{ route('about') }}"
                                               class="themeBtn">Explore Brand</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- Scroll Down Button -->
        <div class="scroll">
            <a href="#"><i class="fal fa-arrow-down"></i></a>
        </div>
    </section>


    <section class="marqueSec">
        <ul class="marqueListing">
            <li><i class="fas fa-plus"></i><span>FREE SHIPPING is only in orders of 60+</span></li>
            <li><i class="fas fa-plus"></i><span>CRUELTY FREE and VEGAN MAKEUP</span></li>
            <li><i class="fas fa-plus"></i><span>FREE SHIPPING is only in orders of 60+</span></li>
            <li><i class="fas fa-plus"></i><span>CRUELTY FREE and VEGAN MAKEUP</span></li>
            <li><i class="fas fa-plus"></i><span>FREE SHIPPING is only in orders of 60+</span></li>
        </ul>
    </section>


    <section class="productSec">
        <div class="container">
            <div class="productHeading text-center" data-aos="fade-up">
                <span class="smallHeading">Branded</span>
                <h2 class="secHeading">Top Hits</h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper productSlider">

                        <div class="swiper-wrapper">

                            @forelse($get_brands as $brand)
                                @forelse($brand->product as $product)

                                    <div class="swiper-slide">
                                        <a href="{{route('product.detail',['slug'=>$product->slug] ? : '')}}">
                                            <div class="productWrap">
                                                <figure>
                                                    <img src="
                                            {{
                        $product->productImage('product_main_image') ?:
                        ($product->productVariation->first() && $product->productVariation->first()->productVariationImage()->first()
                            ? $product->productVariation->first()->productVariationImage()->first()->getUrl()
                            : asset('upload/No-Image.png'))
                                      }}
                                                        " class="img-fluid" alt="">
                                                </figure>
                                                <div class="productContent">
                                                    <ul class="topIcon">
                                                        <li><span>-11%</span></li>
                                                        <li><span>Featured</span></li>
                                                    </ul>
                                                    <h3>{{$product->name ? : ''}}</h3>
                                                    {!! \Illuminate\Support\Str::limit(strip_tags($product->description), 70, '...') !!}
                                                    <ul>
                                                        <li><i class="fas fa-star"></i></li>
                                                        <li><i class="fas fa-star"></i></li>
                                                        <li><i class="fas fa-star"></i></li>
                                                        <li><i class="fas fa-star"></i></li>
                                                        <li><i class="fas fa-star"></i></li>
                                                    </ul>


                                                    <a>
                                                        @if ($product->price == null)
                                                            @if ($product->productVariation->first())
                                                                <del>
                                                                    ${{ $product->productVariation->first()->variant_compare_at_price ?: '' }}
                                                                </del>
                                                                ${{ $product->productVariation->first()->variant_price ?: '' }}
                                                            @endif
                                                        @else
                                                            @if ($product->product_discount == null)
                                                                ${{ $product->price ?: '' }}
                                                            @else
                                                                <del>${{ $product->price ?: '' }}</del>
                                                                ${{ $product->product_discount ?: '' }}
                                                            @endif
                                                        @endif
                                                    </a>
                                                </div>
                                            </div>
                                        </a>
                                    </div>


                                @empty
                                    <h4 class="mx-auto">No Products Available for This Brand</h4>
                                @endforelse
                            @empty
                                <h4 class="mx-auto">No Brands Available</h4>
                            @endforelse

                        </div>
                    </div>
                    <div class="text-center mt-5">
                        <a href="{{route('product')}}" class="borderBtn">SHOP NOW</a>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </section>

    <section class="skincareSec">
        <div class="container-fluid p-0">
            <div class="row no-gutters">
                <div class="col-md-6">
                    <div class="skinWraps" data-aos="fade-up">
                        <img src="{{ pagesSingleImage('Home', 'best_of_skincare_image') }}" class="img-fluid" alt="">
                        <div class="skinContent">
                            <span class="smallHeading">{{ $pageData['Home']['best_of_skincare_heading'] ?? '' }}</span>
                            <h2>S{{ $pageData['Home']['best_of_skincare_sub_heading'] ?? '' }}</h2>
                            <a href="{{route('shop')}}" class="borderBtn">Explore</a>
                        </div>
                        <img src="{{asset('front-assets/images/tree.webp')}}" class="img-fluid treeImg" alt="">
                    </div>
                </div>
                <div class="col-md-6" data-aos="fade-up">
                    <div class="skinWraps makeupWrap">
                        <img src="{{ pagesSingleImage('Home', 'top_brand_makeup_first_image') }}" class="img-fluid" alt="">
                        <div class="skinContent">
                            <span class="smallHeading">{{ $pageData['Home']['top_brand_makeup_heading'] ?? '' }}</span>
                            <h2>{{ $pageData['Home']['top_brand_makeup_sub_heading'] ?? '' }}</h2>
                            <a href="{{route('shop')}}" class="borderBtn">Explore</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="shippingSec">
        <div class="container">
            <div class="shippingHeading text-center" data-aos="fade-up">
                <img src="{{asset('front-assets/images/gift.webp')}}" class="img-fluid" alt="">
                <h3>Free Shipping <br> OVER $60</h3>
            </div>
            <div class="row no-gutters">
                <div class="col-md-6" data-aos="fade-up">
                    <figure>
                        <img src="{{ pagesSingleImage('About', 'about_home_first_image') }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6" data-aos="fade-up">
                    <div class="aboutContent">
                        <span class="smallHeading">{{$pageData['About']['heading'] ?? ''}}</span>
                        <h2 class="secHeading">{{$pageData['About']['sub_heading'] ?? ''}}</h2>
                        {!!$pageData['About']['description'] ?? ''!!}
                        <a href="{{route('about')}}" class="themeBtn">Read More</a>
                    </div>
                </div>
            </div>
            <div class="row flex-row-reverse no-gutters">
                <div class="col-md-6" data-aos="fade-up">
                    <figure>
                        <img src="{{ pagesSingleImage('About', 'about_second_section_image') }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6" data-aos="fade-up">
                    <div class="aboutContent">
                        <span class="smallHeading">{{ $pageData['About']['about_second_section_heading'] ?? '' }}</span>
                        <h2 class="secHeading">{{ $pageData['About']['about_second_section_sub_heading'] ?? '' }}</h2>
                        {!!$pageData['About']['about_third_description'] ?? ''!!}
                        <a href="#" class="themeBtn">Read More</a>
                        <img src="{{asset('upload/images/tree2.webp')}}" class="img-fluid treeTwo" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="reviewSec">
        <div class="container-fluid p-0">
            <div class="row no-gutters">
                <div class="col-md-6">
                    <figure data-aos="fade-up">
                        <img src="{{ pagesSingleImage('Reviews', 'top_banner_image') }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="swiper reviewSlider" data-aos="fade-up">
                        <div class="reviewHeading">
                            <span class="smallHeading">{{$pageData['Reviews']['top_banner_title'] ?? '' }}</span>
                            <h2 class="secHeading">{{$pageData['Reviews']['heading'] ?? '' }}</h2>
                        </div>
                        <div class="swiper-wrapper">
                            @forelse($get_reviews as $review)

                            <div class="swiper-slide">
                                <div class="reviewWrap">
                                  {!! $review->description ? : '' !!}
                                    <div class="uswrWrap">
                                        <img src="{{$review->webSiteReviewImage('review_image') ? : ''}}" class="img-fluid" alt="">
                                        <h5>{{$review->customer_name ? : ''}} <span>CLIENT</span></h5>
                                    </div>
                                </div>
                            </div>
                            @empty
                                <h4 class="mx-auto">No Reviews Available</h4>
                            @endforelse

                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                <img src="{{asset('upload/images/tree3.webp')}}" class="img-fluid treeThree" alt="">
                </div>
            </div>
        </div>
    </section>

    <section class="qualitySec">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-4">
                    <div class="qualityWrap" data-aos="fade-up">
                        <img src="{{ pagesSingleImage('Home', 'all_natural_section_first_image') }}" class="img-fluid" alt="">
                        <h3>{{ $pageData['Home']['all_natural_section_heading'] ?? '' }}</h3>
                        {!! $pageData['Home']['all_natural_section_description'] ?? ''!!}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="qualityWrap" data-aos="fade-up">
                        <img src="{{ pagesSingleImage('Home', 'top_quality_section_first_image') }}
                            " class="img-fluid" alt="">
                        <h3>{{ $pageData['Home']['top_quality_section_heading'] ?? '' }}</h3>
                        {!!$pageData['Home']['top_quality_section_description'] ?? ''!!}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="hitSec">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="hitHeading" data-aos="fade-up">
                        <span class="smallHeading">{{ $pageData['Home']['brand_top_hits_heading'] ?? '' }}</span>
                        <h2 class="secHeading">{{ $pageData['Home']['brand_top_hits_sub_heading'] ?? '' }}</h2>
                        {!!$pageData['Home']['brand_top_hits_description'] ?? '' !!}
                        <a href="{{route('shop')}}" class="borderBtn">SHOP NOW</a>
                    </div>
                </div>

                @forelse($get_brands as $brand)
                    @forelse($brand->product as $product)
                        <div class="col-md-4">
                            <div class="productWrap" data-aos="fade-up">
                                <figure>
                                    <img src="{{$product->productImage('product_main_image') ? : ''}}" class="img-fluid" alt="">
                                </figure>
                                <div class="productContent">
                                    <ul class="topIcon">
                                        <li><span>-11%</span></li>
                                        <li><span>Featured</span></li>
                                    </ul>
                                    <h3>{{$product->name ? : ''}}</h3>
                                    <p>{!! \Illuminate\Support\Str::limit(strip_tags($product->description), 70, '...') !!}</p>
                                    <ul>
                                        <li><i class="fas fa-star"></i></li>
                                        <li><i class="fas fa-star"></i></li>
                                        <li><i class="fas fa-star"></i></li>
                                        <li><i class="fas fa-star"></i></li>
                                        <li><i class="fas fa-star"></i></li>
                                    </ul>
                                    @if ($product->productVariation->first())
                                        <a href="#">
                                            <del>${{ $product->productVariation->first()->variant_compare_at_price ? : '' }}</del>
                                            ${{ $product->productVariation->first()->variant_price ? : '' }}
                                        </a>
                                    @else
                                        <p>No price available</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <h4 class="mx-auto">No Products Available for This Brand</h4>
                    @endforelse
                @empty
                    <h4 class="mx-auto">No Brands Available</h4>
                @endforelse
            </div>
        </div>
    </section>

    <section class="serviceSec">
        <div class="container">
            <div class="row">

                @forelse($get_spacific_products as $spacific_product)
                <div class="col-md-4" data-aos="fade-up">
                    <a href="{{route('product.detail',['slug'=>$spacific_product->slug] ? : '')}}">
                    <div class="serviceWraps">
                        <img src="{{
                        $spacific_product->productImage('product_main_image') ?:
                        ($spacific_product->productVariation->first() && $spacific_product->productVariation->first()->productVariationImage()->first()
                            ? $spacific_product->productVariation->first()->productVariationImage()->first()->getUrl()
                            : asset('upload/No-Image.png'))
                                }}" class="img-fluid" alt="">
                        <div class="serviceContent">
                            <h3>{{$spacific_product->product_name ? : ''}}</h3>
                        </div>
                    </div>
                    </a>
                </div>
                @empty
                    <h4 class="mx-auto">Spacific Product Not Available</h4>
                @endforelse

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

    <section class="newsSec">
        <div class="container">
            <div class="newsHeading text-center" data-aos="fade-up">
                <span class="smallHeading">{{ $pageData['Blog']['home_section_top_title'] ?? '' }}</span>
                <h2 class="secHeading">{{ $pageData['Blog']['home_section_heading'] ?? '' }}</h2>
            </div>
            <div class="swiper newsSlider" data-aos="fade-up">
                <div class="swiper-wrapper">
                    @forelse($get_blogs as $blog)
                        <div class="swiper-slide">
                            <div class="newsWraps">
                                <figure>
                                    <img src="{{$blog->blogImage('blog_first_image')}}" class="img-fluid" alt="">
                                </figure>
                                <div class="newsContent">
                                    <div class="newsDate">{{$blog->created_at->format('F d, Y')}}</div>
                                    <h3>{{$blog->title ? : ''}}</h3>
                                    {!! \Illuminate\Support\Str::limit(strip_tags($blog->first_description), 80, '...') !!}

                                    <ul>
                                        <li><span>Cosmetic</span></li>
                                        <li><span>Fashion</span></li>
                                    </ul>
                                    <a href="{{route('blog.detail',['id'=>$blog->id])}}" class="borderBtn">Read More</a>
                                </div>
                            </div>
                        </div>
                    @empty
                        <h2>Blog Data Not Available</h2>
                    @endforelse
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

    <section class="subscribeSec">
        <div class="container">
            <div class="row align-items-center no-gutters">
                <div class="col-md-6">
                    <div class="subscribeContent" data-aos="fade-up">
                        <figure>
                            <img src="{{asset('upload/images/subscribeImg.webp')}}" class="img-fluid" alt="">
                            <h4>{{ $pageData['Home']['subscribe_to_our_newsletter_heading'] ?? '' }}</h4>
                        </figure>
                        <p>{{ $pageData['Home']['subscribe_to_our_newsletter_sub_heading'] ?? '' }}.</p>
                        <form class="subscribeForm">
                            <input type="text" placeholder="Your Email">
                            <button>Subscribe</button>
                        </form>
                    </div>
                </div>
                <div class="col-md-6" data-aos="fade-up">
                    <figure>
                        <img src="{{ pagesSingleImage('Home', 'subscribe_to_our_newsletter_image') }}" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="instaSec">
        <div class="swiper instaSlider">
            <div class="swiper-wrapper">
                @forelse($get_instagrams as $instagram)
                <div class="swiper-slide">
                    <div class="instaWrap">
                        <img src="{{$instagram->instagramImage('instagram_image') ? : ''}}" class="img-fluid" alt="">
                    </div>
                </div>
                @empty
                    <h2>Instagram Data Not Available</h2>
                @endforelse

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

@endsection