@extends('front.include.app')
@section('meta_title', 'Heart and Bow Chain Ring | Happy Heart Ring | Upsence')
@section('meta_description', 'Discover Timeless Elegance With Heart and Bow Chain Ring And Happy Heart Ring from Upsence. Stylish, Charming, and Perfect For Any Occasion—Add Love and Sparkle To Your Jewelry Collection.')
@section('content')
<div class="preLoader black">
    {{--<img src="{{ $settings->getFirstMediaUrl('icon') ?? ''}}" alt="img">--}}
    <video src="{{asset('front/images/preloader2.mp4')}}" autoplay muted playsinline></video>
</div>
<div class="preLoader white"></div>




<section class="main-slider p-0" >
    <div class="swiper-container homeSlider">
        <div class="swiper-wrapper">
            @foreach($sliders as $slider)
            <div class="swiper-slide">
                <div class="slide-inner bg-image"
                    data-background="{{ $slider->getFirstMediaUrl('slider_images') ?? ''}}">
                    <div class="container">
                        <div class="row aic">
                            <div class="col-lg-6">
                                <div class="slideOne">
                                    <h4>{{ $slider->heading ?? ''}}</h4>
                                    <h1>{{ $slider->sub_heading ?? ''}}</h1>
                                    <p>{{ $slider->description ?? ''}}</p>
                                    <a href="{{ route('shop') }}"
                                        class="themeBtn">{{ $slider->button_text ?? ''}}</a>
                                </div>
                            </div>
                        </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>




<section class="best-seller">
    <div class="container">
        <div class="best-top" data-aos="fade-up">
            <h3>Upsence</h3>
            <h2 class="mainHead">New Arrivals</h2>
        </div>
        @if(isset($bestSallers))
        <div class="row align-items-center">
            @foreach($bestSallers as $bestSaller)
            <div class="col-md-3 col-sm-4 product_data" data-aos="fade-up">
                <div class="seller-wrap">
                    <a href="{{ route('product.detail',$bestSaller->slug) }}" class="seller-wrap__img">
                        <img src="{{ $bestSaller->getFirstMediaUrl('product_image') ?? ''}}"
                            class="img-fluid" alt="{{ $bestSaller->image_alt ?? 'img' }}">
                    </a>
                    <div class="seller-content">
                        <a href="{{ route('product.detail',$bestSaller->slug) }}"
                            class="title">{{ $bestSaller->product_name ?? ''  }}</a>
                        <p>{{$bestSaller->category->name ?? ''}}</p>
                        <h5>CAD ${{ $bestSaller->price ?? ''  }}</h5>
                        <input type="hidden" class="product_id" value="{{$bestSaller->id}}">
                    </div>
                </div>

            </div>
            @endforeach
        </div>
        @else
        <h5> Best Seller product not found</h5>
        @endif
    </div>
</section>


<section class="Categories-section">
    <div class="container-fluid p-0">
        <h2 class="mainHead" data-aos="fade-up">Categories include</h2>
        <div class="row align-items-center">
            @foreach($categories as $category)
            <div class="col-md-4 col-sm-6" data-aos="fade-up">
                <div class="categories-wrap">
                    <figure>
                        <img src="{{ $category->getFirstMediaUrl('category_image', 'thumb') }}"
                            class="img-fluid" alt="{{ $category->name }}">
                    </figure>
                    <div class="categories-cntnt">
                        <h4>about {{ $category->products->count() }} items</h4>
                        <h2>{{ $category->name }}</h2>
                        <a href="{{ route('shop', $category->slug) }}" class="themeBtn">Shop Now</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>



<section class="best-seller exclusive-secton">
    <div class="container">
        <div class="best-top" data-aos="fade-up">
            <h2 class="mainHead">Best Sellers</h2>
        </div>
        <div class="row align-items-center">
            @foreach($exlusives as $exlusive)
            <div class="col-md-3 col-sm-4 product_data" data-aos="fade-up">
                <div class="seller-wrap">
                    <a href="{{ route('product.detail',$exlusive->slug) }}" class="seller-wrap__img">
                        <img src="{{ $exlusive->getFirstMediaUrl('product_image') ??''}}" class="img-fluid"
                            alt="{{ $exlusive->image_alt ?? 'img' }}">
                    </a>
                    <div class="seller-content">
                        <a href="{{ route('product.detail',$exlusive->slug) }}"
                            class="title">{{ $exlusive->product_name ?? '' }}</a>
                        <p>{{ $exlusive->category->name ?? '' }}</p>
                        <h5>CAD ${{ $exlusive->price ?? '' }}</h5>
                    </div>
                </div>
            </div>

            @endforeach
        </div>
    </div>
</section>


<section class="insta-section">
    <div class="container-fluid">
        <h2 class="mainHead text-center mb-4" data-aos="fade-up">Follow Us On Instagram</h2>
        <div class="row align-items-center">
            <div class="col-md-3 col-sm-4" data-aos="fade-up">
                <div class="instawrap">
                    <img src="{{asset('front/images/insta1.webp')}}" class="img-fluid" alt="">
                    <div class="insta-cntnt">
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4" data-aos="fade-up" data-aos-delay="300">
                <div class="instawrap">
                    <img src="{{asset('front/images/insta2.webp')}}" class="img-fluid" alt="Knot Ring">
                    <div class="insta-cntnt">
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4" data-aos="fade-up" data-aos-delay="500">
                <div class="instawrap">
                    <img src="{{asset('front/images/insta3.webp')}}" class="img-fluid" alt="">
                    <div class="insta-cntnt">
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4" data-aos="fade-up" data-aos-delay="700">
                <div class="instawrap">
                    <img src="{{asset('front/images/insta4.webp')}}" class="img-fluid" alt="">
                    <div class="insta-cntnt">
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4" data-aos="fade-up">
                <div class="instawrap">
                    <img src="{{asset('front/images/insta5.webp')}}" class="img-fluid" alt="Daily Ring">
                    <div class="insta-cntnt">
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4" data-aos="fade-up" data-aos-delay="300">
                <div class="instawrap">
                    <img src="{{asset('front/images/insta6.webp')}}" class="img-fluid" alt="">
                    <div class="insta-cntnt">
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4" data-aos="fade-up" data-aos-delay="500">
                <div class="instawrap">
                    <img src="{{asset('front/images/insta7.webp')}}" class="img-fluid" alt="">
                    <div class="insta-cntnt">
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4" data-aos="fade-up" data-aos-delay="700">
                <div class="instawrap">
                    <img src="{{asset('front/images/insta8.webp')}}" class="img-fluid" alt="">
                    <div class="insta-cntnt">
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="testimonial-seciton">
    <div class="container">
        <h2 class="mainHead text-center" data-aos="fade-up">Testimonials</h2>
        <div class="row">
            <div class="col-md-12" data-aos="fade-up">
                <div class="swiper reviewSlider">
                    <div class="swiper-wrapper">
                        @foreach($testimonials as $testimonial)
                        <div class="swiper-slide">
                            <div class="reviewMain">
                                <figure>
                                    <img src="{{asset('front/images/testi-img1.webp')}}" class="img-fluid" alt="">
                                </figure>
                                <p>{!! $testimonial->description ?? '' !!}</p>
                                <div class="reviewcntnt">
                                    <h2>{{ $testimonial->heading ?? '' }}<span>{{ $testimonial->state ?? '' }} , {{ $testimonial->created_at->diffForHumans() ?? '' }}</span></h2>
                                    <ul class="star-review">
                                        <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>
                                </div>
                            </div>
                        </div>
                        @endforeach
{{--                        <div class="swiper-slide">--}}
{{--                            <div class="reviewMain">--}}
{{--                                <figure>--}}
{{--                                    <img src="{{asset('front/images/testi-img1.webp')}}" class="img-fluid" alt="">--}}
{{--                                </figure>--}}
{{--                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem--}}
{{--                                    Ipsum has been the industry's standard dummy text ever since the also the leap--}}
{{--                                    into electronic typesetting, remaining essentially unchanged. </p>--}}
{{--                                <div class="reviewcntnt">--}}
{{--                                    <h2>Monica Stoung <span>New York , 4 months ago</span></h2>--}}
{{--                                    <ul class="star-review">--}}
{{--                                        <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>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="swiper-slide">--}}
{{--                            <div class="reviewMain">--}}
{{--                                <figure>--}}
{{--                                    <img src="{{asset('front/images/testi-img1.webp')}}" class="img-fluid" alt="">--}}
{{--                                </figure>--}}
{{--                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem--}}
{{--                                    Ipsum has been the industry's standard dummy text ever since the also the leap--}}
{{--                                    into electronic typesetting, remaining essentially unchanged. </p>--}}
{{--                                <div class="reviewcntnt">--}}
{{--                                    <h2>Monica Stoung <span>New York , 4 months ago</span></h2>--}}
{{--                                    <ul class="star-review">--}}
{{--                                        <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>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection