@extends('front.layout.app')


    @section('content')
        <div class="ageGate">
            <div class="ageGate-wrapper">
                <figure class="ageGate-img">
                    <img src="{{ asset('assets/images/ageGate-img.jpg') }}" alt="image" class="img-fluid">
                </figure>
                <div class="ageGate-content">
                    <figure>
                        <img src="{{ asset('assets/images/logo.webp') }}" alt="image" class="img-fluid">
                    </figure>
                    <div>
                        <h3>Are you at least 21?</h3>
                        <label id="checkbox-text" class="ageGate-checkbox">
                            <input type="checkbox">
                            <span>
                                Yes, I am at least 21 years of age or am otherwise a
                                qualified patient.
                            </span>
                        </label>
                    </div>
                    <div class="ageGate-bottom">
                        <button class="enterButton" tabindex="-1" type="button" disabled="">
                            Enter Site
                        </button>
                        <h6 class="mb-0">
                            By entering this site, you accept our use of cookies and agree to our
                            <a href="">Privacy Policy</a>
                            &amp;
                            <a href="">Terms of Use</a>.
                        </h6>
                    </div>
                </div>
            </div>
        </div>

        <section class="main-slider p-0" id="mainSlider">
            <div class="swiper-container homeSlider">
                @foreach ($sliders as $slider)
                    <div class="swiper-slide">
                        <div class="slide-inner bg-image" data-background="{{ $slider->sliderImages('slider_img') }}">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-lg-4">
                                        <div class="slideOne">
                                            <h2>{{ $slider->heading }}</h2>
                                            <a href="{{ route('front.shop') }}" class="themeBtn">{{ $slider->button }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
        <section class="shop-main">
            <div class="container-fluid">
                <div class="flower-heading" data-aos="fade-up">
                    <h3>{{ $homeData->catagory_heading_1 }}</h3>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="swiper shopSlider" data-aos="zoom-in">
                            <div class="swiper-wrapper">
                                @foreach ($categories as $category)
                                    <div class="swiper-slide">
                                        <div class="shop-card">
                                            <a href="{{ route('front.shop', $category->slug) }}">
                                                <span>{{ $category->name }}</span>
                                                <figure><img src="{{ $category->categoryImage() }}" class="img-fluid"
                                                        alt="img">
                                                </figure>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
           {{-- @dd($categoriesProduct) --}}
        @foreach ($categoriesProduct as $categoryProduct)
            <section class="flower-main pb-0">
                <div class="container-fluid">
                    <div class="flower-heading" data-aos="fade-up">
                        <h3>{{ $categoryProduct->name }}</h3>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="swiper flowerSlider" data-aos="zoom-in">
                                <div class="swiper-wrapper">
                                    @forelse($categoryProduct->productsWithoutOrders as $product)
                                        @if ($product->featured_on_homepage)
                                            <div class="swiper-slide">
                                                <a href="{{ route('front.shop.product', ['slug' => $product->slug]) }}">
                                                    <div class="flower-card">
                                                        <figure>

                                                            <img src="{{ $product->productImage() }}" class="img-fluid"
                                                                alt="{{ $product->product_alt ?? 'img' }}">
                                                        </figure>
                                                        <div class="flower-content">
                                                            <h3>{{ $product->Category->name ?? '' }}</h3>
                                                            <h4>{{ $product->name ?? '' }}</h4>
                                                            <h5> ${{ $product->price ?? '' }}
                                                            </h5>
                                                            <div class="d-flex">
                                                                @if ($product->strain_type)
                                                                    <span>{{ $product->strain_type }}</span>
                                                                @endif


                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                    @empty
                                        <p>Sorry! No product found</p>
                                    @endforelse
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endforeach

        {{--    Fouvourite Products --}}

        <section class="flower-main">
            <div class="container-fluid">
                <div class="flower-heading" data-aos="fade-up">
                    <h3>Favorites</h3>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="swiper flowerSlider" data-aos="zoom-in">
                            <div class="swiper-wrapper">
                                @forelse($favouriteProducts as $product)
                                    <div class="swiper-slide">
                                        <a href="{{ route('front.shop.product', ['slug' => $product->slug]) }}">
                                            <div class="flower-card">
                                                <figure>

                                                    <img src="{{ $product->productImage() }}" class="img-fluid"
                                                        alt="{{ $product->product_alt ?? 'img' }}">
                                                </figure>
                                                <div class="flower-content">
                                                    {{-- <h3>{{ $product->Category->name ?? '' }}</h3> --}}
                                                    <h4>{{ $product->name ?? '' }}</h4>
                                                    <h5> ${{ $product->price ?? '' }}
                                                    </h5>
                                                    <div class="d-flex">
                                                        @if ($product->strain_type)
                                                            <span>{{ $product->strain_type }}</span>
                                                        @endif

                                                        {{-- <h6>THC: {{ $product->thc_percentage ?? '0' }}%</h6> --}}
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @empty
                                    <p>Sorry! No product found</p>
                                @endforelse
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- <section class="deals-main">
            <div class="container-fluid">
                <div class="swiper dealSlider" data-aos="fade-right">
                    <div class="swiper-wrapper">
                        @forelse($footerSliders as $footerSlider)
                            <div class="swiper-slide">
                                <div class="deals-card">
                                    <a href="{{ route('front.shop', $footerSlider->slug) }}">
                                    <figure>
                                        <img src="{{ $footerSlider->categoryImage() ?: asset('images/default-image.jpg') }}"
                                            class="img-fluid" alt="img">
                                    </figure>
                                    </a>
                                    <div class="deals-content">
                                        <h2>{{ $footerSlider->name ?? 'No Heading Available' }}</h2>
                                        <p>{{ $footerSlider->description ?? '' }}</p>
                                        <a href="#">{{ $footerSlider->button ?? 'Learn More' }}</a>
                                    </div>
                                </div>
                            </div>

                        @empty
                            <div class="no-items-found">
                                <h3>No items found</h3>
                            </div>
                        @endforelse
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </section> --}}

        <section class="shop-main">
            <div class="container-fluid">
                <div class="flower-heading" data-aos="fade-up">
                    <h3>Categories</h3>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="swiper shopSlider" data-aos="zoom-in">
                            <div class="swiper-wrapper">
                                @foreach ($categories as $category)
                                    <div class="swiper-slide">
                                        <div class="shop-card">
                                            <a href="{{ route('front.shop', $category->slug) }}">
                                                <span>{{ $category->name }}</span>
                                                <figure><img src="{{ $category->categoryImage() }}" class="img-fluid"
                                                        alt="img">
                                                </figure>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <style>
            .no-items-found {
                margin-left: 50px;
            }
        </style>
    @endsection