@extends('layouts.front-layout')
@section('title') Home @endsection
@section('content')
<style>
.reviewSec {
    background: url('your-pattern.png') repeat; /* Optional: use your background image */
    background-color: #e9d5cc; /* Creamy background as seen */
    padding: 50px 0;
}

.video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 400px;
    width: 100%;
}

.video-wrapper video {
    max-width: 100%;
    height: auto;
    border-radius: 12px; /* Optional styling */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Optional styling */
}
</style>
<section class="marqueSec">
        <ul class="marqueListing">
            <li><span>FREE SHIPPING OVER $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="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" style="background-size: contain !important; background-image: url('{{ $slider->sliderImage('slider_image') ?? '' }}');"-->
                        <!-- data-background="{{ asset('front-assets/images/new-ban1.png')}}">-->

                        
                        <div class="slide-inner bg-image" style="background-size: contain !important; background-image: url('{{ $slider->sliderImage('slider_image') ?? '' }}');"
                             data-background="{{ asset('front-assets/images/home_banner.jpg')
                              }}">
                            
                            
                            <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 $product)
{{--                                @forelse($brand 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->product_name ? : ''}}</h3>
{{--                                                    @dd($product->name )--}}
                                                  <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>


                                                    <a>
                                                        @if ($product->product_price == null)
                                                            @if ($product->productVariation->first())

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


                                @empty
                                    <h4 class="mx-auto">No Products Available for This Brand</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>{{ $pageData['Home']['best_of_skincare_sub_heading'] ?? '' }}</h2>
                            <a href="{{route('peaches.cream')}}" 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('imperceptible.setting.powder')}}" class="borderBtn">Explore</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- KALEIIM Mega Menu Section (Initially Hidden) -->
        <div class="mega-menu" style="display: none;">
            <div class="row">
                <div class="col-md-2">
                    <div class="mega-menu__links">
                        <h3>KALEIIM</h3>
                        <ul>
                            <li><a href="{{route('about')}}">About KALEIIM</a></li>
                            <li><a href="#">KALEIIM's Looks</a></li>
                            <li><a href="{{route('shop.kaleiim.faves.product')}}">Shop KALEIIM's Faves</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="mega-menu__box">
                        <figure>
                            <img src="{{asset('upload/images/mega-menu1.png')}}" alt="image" class="img-fluid">
                        </figure>
                        <div class="mega-menu__boxContent">
                            <h4 class="title">KALEIIM’S STANDOUT BEAUTY MOMENTS</h4>
                            <p>
                                No matter how busy the day gets, there’s always time for a look that turns heads.
                                At KALEIIM, we believe in the power of makeup to bring out the best in you.
                                Want to see the details behind our most striking looks and how to recreate them?
                            </p>
                            <a href="#" class="themeBtn">Learn More</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="{{route('about')}}" 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-12">
                    <h2 class="secHeading text-center mb-4"  data-aos="fade-up">Podcast</h2>

                    <div class="swiper" data-aos="fade-up">
                        <div class="video-wrapper">
                            <video autoplay muted loop playsinline controls style="max-width: 523px;height: 688px;">
                                <source src="{{ asset('upload/images/copy_731682F0-E66B-4E05-A016-F205DEE955DC(2).mp4
                                ') }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>

                        </div>
                        {{-- <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->reviewsImage('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="productHeading text-center mt-5 mb-2" data-aos="fade-up">
                <span class="smallHeading">Branded</span>
                <h2 class="secHeading">Top Hits</h2>
            </div>
            <div class="row justify-content-center">

                @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') ?? 'path/to/default/image.jpg'}}" 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>Kaleiim</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 no-gutters">
<div class="col-12 d-flex justify-content-center align-items-center flex-column text-center py-5">
                    <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 class="h-100"> --}}
                        {{-- <img src="{{ pagesSingleImage('Home', 'subscribe_to_our_newsletter_image') }}" class="img-fluid h-100" 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 --}}
                {{-- @forelse($get_instagrams as $instagram) --}}
                <div class="swiper-slide">
                    <div class="">
                        <h2>Alopecia</h2>
                        {{-- <img src="{{$instagram->instagramImage('instagram_image') ? : ''}}" class="img-fluid" alt=""> --}}
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="">
                        <h2>Makeup</h2>
                        {{-- <img src="{{$instagram->instagramImage('instagram_image') ? : ''}}" class="img-fluid" alt=""> --}}
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="">
                        <h2>Strength</h2>
                        {{-- <img src="{{$instagram->instagramImage('instagram_image') ? : ''}}" class="img-fluid" alt=""> --}}
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="">
                        <h2>Empathy</h2>
                        {{-- <img src="{{$instagram->instagramImage('instagram_image') ? : ''}}" class="img-fluid" alt=""> --}}
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="">
                        <h2>Creativity</h2>
                        {{-- <img src="{{$instagram->instagramImage('instagram_image') ? : ''}}" class="img-fluid" alt=""> --}}
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="">
                        <h2>Self Love</h2>
                        {{-- <img src="{{$instagram->instagramImage('instagram_image') ? : ''}}" class="img-fluid" alt=""> --}}
                    </div>
                </div>
                {{-- @empty
                    <h2>Instagram Data Not Available</h2>
                @endforelse --}}

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

@endsection