@extends('front.layout.app')
@section('title', 'Home')
@section('content')

    <!-- <div class="preLoader black">
                <video autoplay muted>
                    <source src="{{ asset('front/images/preloader.mp4') }}" type="video/mp4">
                </video>
            </div>
            <div class="preLoader white"></div> -->

    <section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                @forelse ($sliders as $slider)
                    <div class="swiper-slide">
                        <video class="main-slider__video" autoplay loop muted>
                            <source src="{{ $slider->sliderVideo('slider_video') }}" type="video/mp4">
                        </video>
                        <div class="slide-inner bg-image" data-background="">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="slideOne">
                                            <h1>{{ $slider->title }}</h1>
                                            <p>{{ $slider->description }} <span>{{ $slider->decuraton_text }}</span></p>
                                            <a href="{{ route('front.luxury.candles') }}"
                                                class="themeBtn">{{ $slider->btn_text }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                @endforelse

            </div>
            <div class="swiper-button-next"><i class="fal fa-arrow-right"></i></div>
            <div class="swiper-button-prev"><i class="fal fa-arrow-left"></i></div>
        </div>
        <div class="scrollDown">
            <a href="#productSec"><i class="fal fa-chevron-down"></i></a>
        </div>
    </section>


    {{-- <section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <video class="main-slider__video" autoplay loop muted>
                        <source src="{{ asset('front/images/video1.mp4') }}" type="video/mp4">
                    </video>
                    <div class="slide-inner bg-image" data-background="">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="slideOne">
                                        <h1>Bring the natural aroma</h1>
                                        <p>The product is made from <span>100% Coco Apricot Créme Wax</span></p>
                                        <a href="{{ route('front.luxury.candles') }}" class="themeBtn">Shop More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <video class="main-slider__video" autoplay loop muted>
                        <source src="{{ asset('front/images/video1.mp4') }}" type="video/mp4">
                    </video>
                    <div class="slide-inner bg-image" data-background="">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="slideOne">
                                        <h1>Bring the natural aroma</h1>
                                        <p>The product is made from <span>100% Coco Apricot Créme Wax</span></p>
                                        <a href="{{ route('front.luxury.candles') }}" class="themeBtn">Shop More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"><i class="fal fa-arrow-right"></i></div>
            <div class="swiper-button-prev"><i class="fal fa-arrow-left"></i></div>
        </div>
        <div class="scrollDown">
            <a href="#productSec"><i class="fal fa-chevron-down"></i></a>
        </div>
    </section> --}}
    <section class="productSec" id="productSec">
        <div class="container">
            <h2 class="secHeading text-center" data-aos="fade-up">{{ $data->content['pro_main_heading'] ?? '' }}</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="productTabs" data-aos="fade-up">

                        <ul class="nav nav-pills" id="pills-tab" role="tablist">

                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-home-tab" data-toggle="pill"
                                    data-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                                    aria-selected="true">All Candle</button>
                            </li>
                            @forelse ($categories as $cat)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-{{ $cat->slug }}-tab" data-toggle="pill"
                                        data-target="#pills-{{ $cat->slug }}" type="button" role="tab"
                                        aria-controls="pills-{{ $cat->slug }}"
                                        aria-selected="false">{{ $cat->name }}</button>
                                </li>

                            @empty
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-contact-tab" data-toggle="pill"
                                        data-target="#pills-contact" type="button" role="tab"
                                        aria-controls="pills-contact" aria-selected="false">NO Category Found</button>
                                </li>
                            @endforelse

                        </ul>
                    </div>
                    <div class="tab-content" id="pills-tabContent" data-aos="fade-up">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab">
                            <div class="row justify-content-center">
                                @forelse ($products as $pro)
                                    @if ($pro->category_id == 1)
                                        <div class="col-md-4 col-sm-6">
                                            <a href="{{ route('front.product.detail', $pro->id) }}" class="productWraps"
                                                data-aos="zoom-in">
                                                <figure>
                                                    <img src="{{ $pro->productImage('product_image') ?: '' }}"
                                                        class="img-fluid" alt="">
                                                    <span>Sale!</span>
                                                </figure>
                                                <div class="productContent">
                                                    <h4>{{ $pro->name }}</h4>
                                                    <h5 class="price">{{ $pro->price }}</h5>
                                                </div>
                                            </a>
                                        </div>
                                    @endif
                                @empty
                                    <p>no data found</p>
                                @endforelse

                            </div>
                        </div>
                        @forelse ($categories as $cat)
                            <div class="tab-pane fade" id="pills-{{ $cat->slug }}" role="tabpanel"
                                aria-labelledby="pills-{{ $cat->slug }}-tab">
                                <div class="row justify-content-center">
                                    @foreach ($cat->products as $product)
                                        <div class="col-md-4 col-sm-6">
                                            <a href="{{ route('front.product.detail', $product->id) }}"
                                                class="productWraps" data-aos="zoom-in">
                                                <figure>
                                                    <img src="{{ $product->getFirstMediaUrl('product_image') }}"
                                                        class="img-fluid" alt="{{ $product->name }}">
                                                    <span>Sale!</span>
                                                </figure>
                                                <div class="productContent">
                                                    <h4>{{ $product->name }}</h4>
                                                    <h5 class="price">


                                                        ${{ number_format($product->price, 2) }}

                                                    </h5>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @empty
                            <div class="tab-pane fade" id="pills-no-category" role="tabpanel"
                                aria-labelledby="pills-no-category-tab">
                                <div class="row justify-content-center">
                                    <p>No categories found</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </section>
{{--    
    <section class="reviewSec">
        <video class="review__video" autoplay loop muted>
            <source src="{{ $includeCMS->cmsImages('story_image1') ?? '' }}" type="video/mp4">
        </video>
        <div class="container">
            <div class="reviewContent">
                <img src="{{ asset('front/images/quotes.webp') }}" class="img-fluid" alt="" data-aos="fade-up">
                <h5 data-aos="fade-up">{{ $includeCMS->content['home_sto1_desc'] ?? '' }}</h5>
                <span>{{ $includeCMS->content['home_sto1_info'] ?? '' }}</span>
            </div>
        </div>
    </section> --}}

    @include('front.include.story')

    <section class="candleSec">
        <div class="container-fluid p-0">
            <div class="row align-items-center">
                <div class="col-md-6 col-sm-6">
                    <div class="candleImg animImg" data-aos="zoom-in">
                        <img src="{{ $data->cmsImages('story_image2') ?? '' }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="col-md-5 col-sm-6">
                    <div class="candleContent">
                        <h2 class="secHeading" data-aos="fade-up">{{ $data->content['home_sto2_heading'] ?? '' }}</h2>
                        <p data-aos="fade-up">
                            {{ $data->content['home_sto2_desc'] ?? '' }}
                        </p>
                        <div data-aos="fade-up">
                            <a href="{{ route('front.luxury.candles') }}" class="themeBtn themeBtn1">
                                {{ $data->content['home_sto2_btn_text'] ?? '' }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="aboutSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-5">
                    <div class="aboutContent">
                        <h2 class="secHeading" data-aos="fade-up">{{ $data->content['home_sto3_heading'] ?? '' }}</h2>
                        <ul>
                            <li data-aos="fade-up">
                                <img src="{{ asset('front/images/check.webp') }}" class="img-fluid"
                                    alt=""><span>{{ $data->content['home_sto3_des1'] ?? '' }}</span>
                            </li>
                            <li data-aos="fade-up">
                                <img src="{{ asset('front/images/check.webp') }}" class="img-fluid"
                                    alt=""><span>{{ $data->content['home_sto3_des2'] ?? '' }}</span>
                            </li>
                            <li data-aos="fade-up">
                                <img src="{{ asset('front/images/check.webp') }}" class="img-fluid" alt="">
                                <span>{{ $data->content['home_sto3_des3'] ?? '' }}</span>
                            </li>
                            <li data-aos="fade-up">
                                <img src="{{ asset('front/images/check.webp') }}" class="img-fluid" alt="">
                                <span>{{ $data->content['home_sto3_des4'] ?? '' }}</span>
                            </li>
                            <li data-aos="fade-up">
                                <img src="{{ asset('front/images/check.webp') }}" class="img-fluid" alt="">
                                <span>{{ $data->content['home_sto3_des5'] ?? '' }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="aboutImages" data-aos="zoom-in">
                        <img src="{{ $data->cmsImages('story_image3') ?? '' }}" class="img-fluid" alt="">
                        <figure>
                            <img src="{{ $data->cmsImages('story_image4') ?? '' }}" class="img-fluid" alt="">
                            <img src="{{ $data->cmsImages('story_image5') ?? '' }}" class="img-fluid" alt="">
                        </figure>
                    </div>
                    <div class="aboutBtn">
                        <a href="{{ route('front.about') }}">{{ $data->content['home_sto3_btn'] ?? '' }}<img
                                src="{{ asset('front/images/arrow.webp') }}" class="img-fluid" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="burnSec">
        <div class="container">
            <h2 class="secHeading text-white text-center mb-5" data-aos="fade-up">
                {{ $data->content['home_sto4_heading'] ?? '' }}</h2>
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <div class="burnWrap" data-aos="zoom-in">
                        <figure class="animImg">
                            <img src="{{ $data->cmsImages('story_image6') ?? '' }}" class="img-fluid" alt="">
                        </figure>
                        <div class="burnContent">
                            <h3>{{ $data->content['home_sto4_img1_title'] ?? '' }}</h3>
                            {{-- <p>Amet nisl purus in mollis nunc sed viverra</p> --}}
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="burnWrap" data-aos="zoom-in">
                        <figure class="animImg">
                            <img src="{{ $data->cmsImages('story_image7') ?? '' }}" class="img-fluid" alt="">
                        </figure>
                        <div class="burnContent">
                            <h3>{{ $data->content['home_sto4_img2_title'] ?? '' }}</h3>
                            {{-- <p>Amet nisl purus in mollis nunc sed viverra</p> --}}
                        </div>
                    </div>
                </div>
                {{-- <img src="{{ asset('front/images/burnLogo.webp') }}" class="img-fluid burnLogo" alt=""> --}}
            </div>
        </div>
    </section>

    @include('front.include.gallery')
    {{-- 
<section class="trendSec">
    <div class="container">
        <h2 class="secHeading text-center" data-aos="fade-up">Trend This Year</h2>
        <div class="swiper trendSlider" data-aos="zoom-in">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product10.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product11.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product12.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product13.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product14.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product15.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product16.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product17.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product18.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product19.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="trendWrap">
                        <img src="{{ asset('front/images/product20.jpeg') }}" class="img-fluid" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-button-next"><i class="fal fa-arrow-right"></i></div>
        <div class="swiper-button-prev"><i class="fal fa-arrow-left"></i></div>
    </div>
</section>     --}}

@endsection
