@extends('front.layouts.app')
@section('content')

    <!-- MAIN HERO SECTION -->
    <section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                @forelse($home_slider as $val)
                    <div class="swiper-slide">
                        <img src="{{ $val->image }}" class="img-fluid" alt="">
                        <div class="slide-inner">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="heroText active">
                                            <h1 data-swiper-parallax="-200">{{ $val->title }}</h1>
                                            <p data-swiper-parallax="-100">{!! $val->detail !!}</p>
                                            <div>
                                                <a href="#" class="themeBtn">Shop Now</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <p>No slider are available!!</p>
                @endforelse

            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>
    <!-- !MAIN HERO SECTION -->


    <!-- PRODUCT SECTION -->
    <section class="product-section">
        <div class="container">
            <h2 class="heading text-center mb-4" data-aos="fade-up">See Our Categories</h2>
            <div class="swiper-controls-wrapper" data-aos="fade-up">
                <div class="swiper categorySlider">
                    <div class="swiper-wrapper">

                        @forelse($category as $val)
                            <div class="swiper-slide">
                                <a href="{{route('front.all.product',  ['filtercate[]' => $val->name] )}}" class="category-item">
                                    <figure>
                                        <img src="{{ $val->image }}" class="img-fluid" alt="">
                                    </figure>
                                    <p>{{ $val->name }}</p>
                                </a>
                            </div>
                        @empty
                            <p>No category are available!!</p>
                        @endforelse

                    </div>
                </div>
                <div class="swiper-button-prev prev"></div>
                <div class="swiper-button-next next"></div>
            </div>

            <div class="row">
                @forelse($product as $val)
                    <div class="col-md-3">
                        <div class="product-card" data-aos="fade-up" data-aos-delay="50">
                            @if($val->sale == '1')
                                <span class="salebadge">Sale</span>
                            @endif
                            <figure>
                                <a href="{{ route('front.sale') }}">
                                    <img src="{{ $val->image }}" class="img-fluid" alt="">
                                </a>
                            </figure>
                            <div>
                                <a href="#">
                                    <p>{{ $val->name }}</p>
                                </a>
                                <ul class="rating">
                                    <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>
                                    <li><span>1 review</span></li>
                                </ul>
                                <p class="price">$.
                                    @php
                                        $formattedPrice = \App\Helper\PriceHelper::formatPrice($val->price);
                                        $formattedSalePrice = \App\Helper\PriceHelper::formatPrice($val->sale_price);
                                    @endphp
                                @if($val->sale == 1)

                                        {{ $formattedSalePrice ?? ''}}
                                        <del>$. {{ $formattedPrice ?? '' }}</del>
                                    @else


                                        {{ $formattedPrice ?? ''}}
                                    @endif
                                </p>
                                @if(Auth::check() && Auth::user()->hasRole('wholesaler'))
                                    <p>
                                        Wholesale Price: {{$val->dist_price ?? 'No Price'}}
                                    </p>
                                @endif

                            </div>
                        </div>
                    </div>
                @empty
                    <p>No product are available!!</p>
                @endforelse

                <div class="col-12 text-center" data-aos="fade-up">
                    <a href="{{ route('front.all.product') }}" class="btn themeBtn black">See All Product</a>
                </div>
            </div>
        </div>
    </section>
    <!-- !@PRODUCT SECTION -->

    <!-- CTA SECTION -->
    <section class="cta-section">
        <img src="{{ $home['natural_image'] ?? '' }}" alt="" class="img-fluid" data-aos="zoom-out">
        <div class="container">
            <div class="col-lg-7 col-md-8 ml-auto">
                <h2 class="heading text-white" data-aos="fade-right">{{ $content['natural_title'] ?? '' }}</h2>
                <p data-aos="fade-right">{{ $content['natural_detail'] ?? '' }}</p>
                <div data-aos="fade-right">
                    <a href="{{ route('front.all.product') }}" class="btn btnShop"><i class="fas fa-arrow-right"></i>
                        <span>Shop
                            Now</span></a>
                </div>
            </div>
        </div>
    </section>
    <!-- !@CTA SECTION -->


    <!-- PRODUCT SECTION -->
    <section class="product-section">
        <div class="container">
            <h2 class="heading text-center mb-4" data-aos="fade-up">See Our Categories</h2>
            <div class="swiper productSlider">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="product-card" data-aos="fade-up" data-aos-delay="50">
                            <span class="salebadge">Sale</span>
                            <figure>
                                <a href="">
                                    <img src="{{ asset('images/product-img5.webp') }}" class="img-fluid" alt="">
                                </a>
                            </figure>
                            <div>
                                <a href="#">
                                    <p>TT Foundation Primer</p>
                                </a>
                                <ul class="rating">
                                    <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>
                                    <li><span>1 review</span></li>
                                </ul>
                                <p class="price">$. 210.00
                                    <del>$. 220.00</del>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card" data-aos="fade-up" data-aos-delay="150">
                            <span class="salebadge">Sale</span>
                            <figure>
                                <a href="">
                                    <img src="{{ asset('images/product-img6.webp') }}" class="img-fluid" alt="">
                                </a>
                            </figure>
                            <div>
                                <a href="#">
                                    <p>Riya Concealer</p>
                                </a>
                                <ul class="rating">
                                    <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>
                                    <li><span>1 review</span></li>
                                </ul>
                                <p class="price">$. 210.00
                                    <del>$. 220.00</del>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card" data-aos="fade-up" data-aos-delay="250">
                            <span class="salebadge">Sale</span>
                            <figure>
                                <a href="">
                                    <img src="{{ asset('images/product-img7.webp') }}" class="img-fluid" alt="">
                                </a>
                            </figure>
                            <div>
                                <a href="#">
                                    <p>Zera Makeup Spray</p>
                                </a>
                                <ul class="rating">
                                    <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>
                                    <li><span>1 review</span></li>
                                </ul>
                                <p class="price">$. 210.00
                                    <del>$. 220.00</del>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card" data-aos="fade-up" data-aos-delay="350">
                            <span class="salebadge">Sale</span>
                            <figure>
                                <a href="">
                                    <img src="{{ asset('images/product-img8.webp') }}" class="img-fluid" alt="">
                                </a>
                            </figure>
                            <div>
                                <a href="#">
                                    <p>Body Spray</p>
                                </a>
                                <ul class="rating">
                                    <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>
                                    <li><span>1 review</span></li>
                                </ul>
                                <p class="price">$. 210.00
                                    <del>$. 220.00</del>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    <!-- !@PRODUCT SECTION -->


    <!-- CTA SECTION -->
    <section class="cta-section">
        <img src="{{ $home['wishlist_image'] ?? '' }}" alt="" class="img-fluid" data-aos="zoom-out">
        <div class="container">
            <div class="col-lg-7 col-md-8">
                <h2 class="heading" data-aos="fade-right">{{ $content['wishlist_title'] ?? '' }}</h2>
                <p class="text-black" data-aos="fade-right">{{ $content['wishlist_detail'] ?? '' }}</p>
                <div data-aos="fade-right">
                    <a href="{{ route('front.all.product') }}" class="btn themeBtn"><span>See All Product</span></a>
                </div>
            </div>
        </div>
    </section>
    <!-- !@CTA SECTION -->


    <!-- INSTA SECTION -->
    <section class="insta-section">
        <div class="container-fluid">
            <h2 class="heading text-center mb-4" data-aos="fade-up">Follow Us On Instagram</h2>
            <div class="row">
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-12">
                            <figure>
                                <a href="{{ $home['first_instagram_image'] }}" data-fancybox="insta images">
                                    <img src="{{ $home['first_instagram_image'] }}" class="img-fluid" alt=""
                                         data-aos="zoom-out">
                                </a>
                            </figure>
                        </div>
                        <div class="col-12">

                            <figure>
                                <a href="{{ $home['second_instagram_image'] }}" data-fancybox="insta images">
                                    <img src="{{ $home['second_instagram_image'] }}" class="img-fluid" alt=""
                                         data-aos="zoom-out">
                                </a>
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <figure>
                        <a href="{{ $home['third_instagram_image'] }}-" data-fancybox="insta images">
                            <img src="{{ $home['third_instagram_image'] }}" class="img-fluid" alt=""
                                 data-aos="zoom-out">
                        </a>
                    </figure>
                </div>
                <div class="col-md-5">
                    <div class="row">
                        <div class="col-md-6">
                            <figure>
                                <a href="{{ $home['fourth_instagram_image'] }}" data-fancybox="insta images">
                                    <img src="{{ $home['fourth_instagram_image'] }}" class="img-fluid" alt=""
                                         data-aos="zoom-out">
                                </a>
                            </figure>
                        </div>
                        <div class="col-md-6">
                            <figure>
                                <a href="{{ $home['fifth_instagram_image'] }}" data-fancybox="insta images">
                                    <img src="{{ $home['fifth_instagram_image'] }}" class="img-fluid" alt=""
                                         data-aos="zoom-out">
                                </a>
                            </figure>
                        </div>
                        <div class="col-12">
                            <figure>
                                <a href="{{ $home['six_instagram_image'] }}" data-fancybox="insta images">
                                    <img src="{{ $home['six_instagram_image'] }}" class="img-fluid" alt=""
                                         data-aos="zoom-out">
                                </a>
                            </figure>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- !@INSTA SECTION -->


@endsection