@extends('frontend.layout.app')
@section('content')

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <style>
        .shop-category-section {
            padding: 5px 0;
            /*background: #f8f9fb;*/
        }

        .shop-container {
            width: 100%;
            margin: auto;
        }

        .shop-title {
            font-size: 42px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 18px;
            color: #e69398;
        }


        .shop-category-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 25px;
        }

        .shop-category-card {
          
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: 0.4s;
            position: relative;
            cursor: pointer;
          
        }

      .shop-category-card {
    background-color: #fbf5f5;
    display: flex;
    align-items: center;
    justify-content: center;

}

.shop-category-card img {
    width: 100px;   /* small image */
    height: auto;
    display: block;
    margin: auto;
    padding:10px 0px;
}
   .shop-category-name {
            text-align: center;
           padding: 5px 0px;
            font-size: 18px;
            font-weight: 600;
            color: #525252;
            /* background: #e69398; */
        }


        .shop-category-card:hover {
            transform: translateY(-10px);
           
        }

        .shop-category-card:hover img {
            transform: scale(1.1);
        }

        @media(max-width:992px) {
            .shop-category-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media(max-width:600px) {
            .shop-category-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .vs-carousel .slick-list {
            padding-bottom: 15px;
        }

        .shop-category-card {
            margin: 10px;
        }
    </style>
    <section class="newslider-wrapper">
         <div class="container-fluid">
        @php
            $firstCategory = $categories->first();
        @endphp

        <div class="newslider-carousel" data-container="1900" data-slidertype="responsive"
            data-navbuttons="true">

            @if (isset($banners) && count($banners))
                @foreach ($banners as $banner)
                    <div class="newslider-slide"
                        onclick="window.location='{{ route('products', $firstCategory->id) }}'"
                        style="cursor:pointer;">

                        <img width="1920" src="{{ asset('storage/banner/' . $banner->image) }}" class="newslider-bg"
                            alt="{{ $banner->imagealt ?? 'Banner' }}">
                    </div>
                @endforeach
            @else
                <div class="newslider-slide" onclick="window.location='{{ route('products', $firstCategory->id) }}'"
                    style="cursor:pointer;">

                    <img width="1920" src="{{ asset('frontend/assets/img/hero/1.jpg') }}" class="newslider-bg"
                        alt="Banner">
                </div>
            @endif

        </div>
        <!-- Custom Navigation -->
        <div class="newslider-nav">
            <div class="newslider-prev">&#10094;</div>
            <div class="newslider-next">&#10095;</div>
        </div>
        </div>
    </section>
    <!-- MARQUEE END -->
    <section class="feature-style5">
        <div class="container-style4">
            <section class="shop-category-section">
                <div class="shop-container">

                    <!--<h2 class="shop-title">Shop By Category</h2>-->

                    <div class="vs-carousel dots-spacing-0" data-slide-show="5" data-ml-slide-show="5"
                        data-lg-slide-show="5" data-md-slide-show="4" data-sm-slide-show="3" data-xs-slide-show="2"
                        data-dots="false">

                        @foreach ($categories as $category)
                            <div class="shop-category-card">

                                <a href="{{ route('products', ['id' => $category->id]) }}">

                                    <div class="shop-category-image">
                                        <img src="{{ $category->image ? asset('storage/category/' . $category->image) : asset('frontend/assets/img/no-image.png') }}"
                                            alt="{{ $category->imagealt ?? $category->heading }}">
                                    </div>

                                    <div class="shop-category-name">
                                        {{ $category->heading }}
                                    </div>

                                </a>

                            </div>
                        @endforeach

                    </div>

                </div>
            </section>
        </div>
    </section>
   <section class="fc-category-section">
    <div class="fc-category-wrapper">

        <!-- Girl Section -->
         <a href="#" >
        <div class="fc-category-card fc-girl-card">
            <img src="{{asset('frontend/assets/img/s-1.jpeg')}}" class="fc-category-img" alt="Girl Category">

            
        </div>
        </a>


        <!-- Boy Section -->
           <a href="#" >
        <div class="fc-category-card fc-boy-card">
            <img src="{{asset('frontend/assets/img/s-2.jpeg')}}" class="fc-category-img" alt="Boy Category">

           
        </div>
</a>

    </div>
</section>

<section class="bb-brand-section">
    <div class="container-fluid ">

       <h2 class="bb-title">TRENDY <span>KIDS FASHION</span></h2>

        <div class="bb-brand-grid">

            <!-- Card 1 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                    <img src="{{asset('frontend/assets/img/brands/1.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹109</div>
                </div>
                <div class="bb-brand-logo">
                   <h5>Sets & Suits </h5>
                </div>
               
            </div>

            <!-- Card 2 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                   <img src="{{asset('frontend/assets/img/brands/2.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹179</div>
                </div>
               <div class="bb-brand-logo">
                   <h5>T-Shirts </h5>
                </div>
               
            </div>

            <!-- Card 3 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                     <img src="{{asset('frontend/assets/img/brands/3.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹289</div>
                </div>
               <div class="bb-brand-logo">
                   <h5>Shorts </h5>
                </div>
               
            </div>

            <!-- Card 4 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                    <img src="{{asset('frontend/assets/img/brands/4.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹199</div>
                </div>
                <div class="bb-brand-logo">
                   <h5>Onesies & Rompers </h5>
                </div>
               
            </div>

            <!-- Card 5 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                     <img src="{{asset('frontend/assets/img/brands/5.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹199</div>
                </div>
               <div class="bb-brand-logo">
                   <h5>Onesies Multi & Value Packs</h5>
                </div>
              
            </div>

            <!-- Card 6 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                     <img src="{{asset('frontend/assets/img/brands/6.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹299</div>
                </div>
                <div class="bb-brand-logo">
                   <h5>Nightwear </h5>
                </div>
               
            </div>

             <!-- Card 7 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                    <img src="{{asset('frontend/assets/img/brands/7.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹299</div>
                </div>
                <div class="bb-brand-logo">
                   <h5>Sets & Suits</h5>
                </div>
               
            </div>

             <!-- Card 8 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                    <img src="{{asset('frontend/assets/img/brands/8.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹299</div>
                </div>
                <div class="bb-brand-logo">
                   <h5>Onesies & Rompers</h5>
                </div>
              
            </div>

             <!-- Card 9 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                    <img src="{{asset('frontend/assets/img/brands/9.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹299</div>
                </div>
                <div class="bb-brand-logo">
                   <h5>Onesies Multi & Value Packs </h5>
                </div>
               
            </div>

             <!-- Card 10 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                     <img src="{{asset('frontend/assets/img/brands/10.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹299</div>
                </div>
                <div class="bb-brand-logo">
                   <h5>Tops & T-shirts</h5>
                </div>
               
            </div>

             <!-- Card 11 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                    <img src="{{asset('frontend/assets/img/brands/11.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹299</div>
                </div>
               <div class="bb-brand-logo">
                   <h5>Nightwear</h5>
                </div>
            </div>

             <!-- Card 12 -->
            <div class="bb-brand-card">
                <div class="bb-card-image">
                    <img src="{{asset('frontend/assets/img/brands/12.webp')}}" alt="">
                    <div class="bb-price-tag">Starting ₹299</div>
                </div>
               <div class="bb-brand-logo">
                   <h5>Shorts & Skirts</h5>
                </div>
               
            </div>

        </div>

    </div>
</section>

<section class="kids-occasion-section">

    <div class="kids-container">

       

        <div class="kids-occasion-grid">

            <!-- Ethnic Collection -->
            <div class="kids-occasion-card">

                <img src="{{asset('frontend/assets/img/s-3.jpeg')}}" class="kids-occasion-img">

                <div class="kids-occasion-content">

             

                    <div class="kids-price-box">
                        <span>STARTING</span>
                        <h3>₹349</h3>
                        <a href="#" class="kids-view-btn">View All ></a>
                    </div>

                </div>

            </div>


            <!-- Party Collection -->
            <div class="kids-occasion-card">

                <img src="{{asset('frontend/assets/img/s-4.jpeg')}}" class="kids-occasion-img">

                <div class="kids-occasion-content">

                 

                    <div class="kids-price-box">
                        <span>STARTING</span>
                        <h3>₹399</h3>
                        <a href="#" class="kids-view-btn">View All ></a>
                    </div>

                </div>

            </div>

        </div>

    </div>

</section>


<section class="baby-care-section">

    <!-- Banner -->
    <div class="baby-care-banner">

        <img src="{{asset('frontend/assets/img/s-bg.jpeg')}}" class="baby-care-banner-img">


    </div>


    <!-- Category Products -->
    <div class="container-fluid mt-40">

       <div class="baby-care-grid">

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/diykits/1.webp')}}">
        <p class="baby-care-label"> Soap Making Kit</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/diykits/2.webp')}}">
        <p class="baby-care-label"> Build A Home DIY Kit</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/diykits/3.webp')}}">
        <p class="baby-care-label"> Fabric Art Unicorn </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/diykits/4.webp')}}">
        <p class="baby-care-label"> Lotus Pond Candle Making </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/diykits/5.webp')}}">
        <p class="baby-care-label">Chalk and Chuckles Flower 
</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/diykits/6.webp')}}">
        <p class="baby-care-label">Poke N Create </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/diykits/7.webp')}}">
        <p class="baby-care-label"> Build  Own Bamboo Cottage </p>
    </div>

</div>

    </div>

</section>


<section class="baby-care-section">

    <!-- Banner -->
    <div class="baby-care-banner">

        <img src="{{asset('frontend/assets/img/stem-bg.jpeg')}}" class="baby-care-banner-img">
    </div>


    <!-- Category Products -->
    <div class="container-fluid mt-40">

       <div class="baby-care-grid">

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/stemkits/1.webp')}}">
        <p class="baby-care-label">Science Kit </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/stemkits/2.webp')}}">
        <p class="baby-care-label">Pludo Spin & Orbit 
</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/stemkits/3.webp')}}">
        <p class="baby-care-label">  Science Experiment </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/stemkits/4.webp')}}">
        <p class="baby-care-label">Science Kit </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/stemkits/5.webp')}}">
        <p class="baby-care-label">Genius Box Science Lab 
</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/stemkits/6.webp')}}">
        <p class="baby-care-label">Pludo  Gyro Transmitter</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/stemkits/7.webp')}}">
        <p class="baby-care-label">SNAP Together Electronic </p>
    </div>

</div>

    </div>

</section>

<section class="baby-care-section">

    <!-- Banner -->
    <div class="baby-care-banner">

        <img src="{{asset('frontend/assets/img/art-bg.jpeg')}}" class="baby-care-banner-img">
    </div>


    <!-- Category Products -->
    <div class="container-fluid mt-40">

       <div class="baby-care-grid">

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/art-craft/1.webp')}}">
        <p class="baby-care-label"> 3 in 1 Awesome Craft Kit </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/art-craft/2.webp')}}">
        <p class="baby-care-label">Funskool Glass Painting Kit
</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/art-craft/3.webp')}}">
        <p class="baby-care-label">Doms Art Gear Kit </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/art-craft/4.webp')}}">
        <p class="baby-care-label">DOMS Champions Kit</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/art-craft/5.webp')}}">
        <p class="baby-care-label">Funskool Pop Up Greeting 
</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/art-craft/6.webp')}}">
        <p class="baby-care-label">DOMS Fun Fiesta Kit </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/art-craft/7.webp')}}">
        <p class="baby-care-label">Flair Hauser Fab Art Kit</p>
    </div>

</div>

    </div>

</section>


<section class="baby-care-section">

    <!-- Banner -->
    <div class="baby-care-banner">

        <img src="{{asset('frontend/assets/img/books-bg.jpeg')}}" class="baby-care-banner-img">
    </div>
      <div class="container-fluid mt-40">

     <div class=" books-grid ">

            <!-- Card 1 -->
            <div class="bb-brand-card books-card">
                <div class="bb-card-image books-card-image">
                    <img src="{{asset('frontend/assets/img/books/b-1.webp')}}" alt="">
                   <a href="">
                    <div class="books-categorey"> 
                        <h5>Story Books </h5>
                    </div>
                   </a>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="bb-brand-card books-card">
                <div class="bb-card-image books-card-image">
                   <img src="{{asset('frontend/assets/img/books/b-2.webp')}}" alt="">
                    <a href="">
                   <div class="books-categorey">
                         <h5>Drawing & Coloring Books </h5>
                    </div>
                     </a>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="bb-brand-card books-card">
                <div class="bb-card-image books-card-image">
                     <img src="{{asset('frontend/assets/img/books/b-3.webp')}}" alt="">
                   <a href="">
                     <div class="books-categorey">
                       <h5> Comics</h5>
                    </div>
                     </a>
                </div>
   
            </div>

            <!-- Card 4 -->
            <div class="bb-brand-card books-card">
                <div class="bb-card-image books-card-image">
                    <img src="{{asset('frontend/assets/img/books/b-4.webp')}}" alt="">
                   <a href=""> 
                    <div class="books-categorey">
                       <h5> Rhymes & Poetry</h5>
                    </div>
                     </a>
                </div>
 
            </div>

            <!-- Card 5 -->
            <div class="bb-brand-card books-card">
                <div class="bb-card-image books-card-image">
                     <img src="{{asset('frontend/assets/img/books/b-5.webp')}}" alt="">
                    <a href="">
                     <div class="books-categorey">
                      <h5>  Craft & Activity</h5>
                    </div>
                     </a>
                </div>

            </div>

            <!-- Card 6 -->
            <div class="bb-brand-card books-card">
                <div class="bb-card-image books-card-image">
                     <img src="{{asset('frontend/assets/img/books/b-6.webp')}}" alt="">
                    <a href=""> 
                     <div class="books-categorey">
                       <h5> Academic Books</h5>
                    </div>
                   </a>
                </div>
 
            </div>



        </div>
      </div>

    <!-- Category Products -->
    <div class="container-fluid mt-40">

       <div class="baby-care-grid">

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/books/1.webp')}}">
        <p class="baby-care-label">The Champak Story Box </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/books/2.webp')}}">
        <p class="baby-care-label"> Picture Book
</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/books/3.webp')}}">
        <p class="baby-care-label">Early Learning Library </p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/books/4.webp')}}">
        <p class="baby-care-label">Why Pursue a Dream</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/books/5.webp')}}">
        <p class="baby-care-label"> Set Of 10 Board Books 
</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/books/6.webp')}}">
        <p class="baby-care-label">Jungle Book (Illustrated)</p>
    </div>

    <div class="baby-care-card">
        <img src="{{asset('frontend/assets/img/books/7.webp')}}">
        <p class="baby-care-label">Magic Tree House </p>
    </div>

</div>

    </div>

</section>


    <!-- <section class="shop-by-age ">
        <div class="container">
            <div class="section-header">
                <h2 class="pt-50">SHOP BY <span>AGE</span></h2>
                <p>STEAM-filled boxes of joy for All Age Groups</p>
            </div>
            <div class="age-categories">
                @foreach ($ages as $age)
                    <div class="age-card" style="--bg:#e69398;">
                        <div class="age-img">
                            <img src="{{ asset('storage/ages/' . $age->image) }}"
                                alt="{{ $age->imagealt ?? 'Age Image' }}">
                        </div>
                        <div class="age-content">
                            <h3>{{ $age->age_range }}</h3>
                            <a href="{{ route('products.by_age', ['age_id' => $age->id]) }}" class="btn-age">Shop Now</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section> -->


    <!-- <section class="shop-by-age  space-extra-bottom pt-50">
        <div class="container">
            <div class="section-header text-center align-items-center justify-content-center">
                <h2>All <span>Products</span></h2>
                <p>Our latest offerings</p>
            </div>
            <div class="row vs-carousel" data-slide-show="4" data-ml-slide-show="4" data-lg-slide-show="4"
                data-md-slide-show="3">

                @foreach ($allproducts as $allproduct)
                    @if ($allproduct->stock > 0)
                        @php
                            $sp = $allproduct->sp ?? 0;
                            $gst = $allproduct->gst ?? 0;
                            $priceWithGst = $sp + ($sp * $gst) / 100;
                            $image = optional($allproduct->images->first())->images;
                        @endphp

                        <div class="service-style1 col-xl-3">
                            <div class="vs-product product-style1">
                                <div class="product-img">
                                    <a href="#">
                                        <img src="{{ $image ? asset('storage/product/' . $image) : asset('assets/img/no-image.png') }}"
                                            alt="Product Image" class="w-100">
                                    </a>
                                </div>

                                <div class="product-content">
                                    <span class="product-price">
                                        ₹{{ number_format($priceWithGst, 2) }}
                                        <del>₹{{ number_format($allproduct->mrp, 2) }}</del>
                                        <small style="font-size:10px;color:#666;">
                                            ({{ $gst }}% GST)
                                        </small>
                                    </span>

                                    <h3 class="product-title product-title2 home_1">
                                        <a class="text-inherit" href="#">
                                            {{ $allproduct->product_name }}
                                        </a>
                                    </h3>

                                    @auth
                                        <div class="actions">
                                            <form method="POST" action="{{ route('cart.add') }}">
                                                @csrf
                                                <input type="hidden" name="product_id" value="{{ $allproduct->id }}">
                                                <input type="hidden" name="quantity" value="1">
                                                <input type="hidden" name="sp" value="{{ $sp }}">
                                                <button type="submit" class="vs-btn">
                                                    <i class="far fa-shopping-cart"></i> Add to Cart
                                                </button>
                                            </form>

                                            <form method="POST" action="{{ route('wishlist.add') }}">
                                                @csrf
                                                <input type="hidden" name="product_id" value="{{ $allproduct->id }}">
                                                <input type="hidden" name="session_id" value="{{ session()->getId() }}">
                                                <button type="submit" class="icon-btn">
                                                    <i class="far fa-heart"></i>
                                                </button>
                                            </form>
                                        </div>
                                    @endauth

                                    @guest
                                        <div class="actions">
                                            <a href="{{ route('login') }}" class="vs-btn">
                                                <i class="far fa-shopping-cart"></i> Add to Cart
                                            </a>
                                        </div>
                                    @endguest
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach

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


    @if ($clothProducts->count())
        <!-- <section class="shop-by-age space-extra-bottom">
            <div class="container">
                <div class="section-header text-center align-items-center justify-content-center">
                    <h2>Kids Fashion <span>Products</span></h2>
                    <p>Our latest offerings</p>
                </div>

                <div class="row vs-carousel" data-slide-show="4" data-ml-slide-show="4" data-lg-slide-show="4"
                    data-md-slide-show="3">

                    @foreach ($clothProducts as $product)
                        @php
                            $sp = $product->sp ?? 0;
                            $gst = $product->gst ?? 0;
                            $priceWithGst = $sp + ($sp * $gst) / 100;
                            $image = optional($product->images->first())->images;
                        @endphp

                        @if ($product->stock > 0)
                            <div class="service-style1 col-xl-3">
                                <div class="vs-product product-style1">
                                    <div class="product-img">
                                        <a href="#">
                                            <img src="{{ $image ? asset('storage/product/' . $image) : asset('assets/img/no-image.png') }}"
                                                alt="Product Image" class="w-100">
                                        </a>
                                    </div>

                                    <div class="product-content">
                                        <span class="product-price">
                                            ₹{{ number_format($priceWithGst, 2) }}
                                            <del>₹{{ number_format($product->mrp, 2) }}</del>
                                            <small style="font-size:10px;color:#666;">
                                                ({{ $gst }}% GST)
                                            </small>
                                        </span>

                                        <h3 class="product-title product-title2 home_1">
                                            <a class="text-inherit" href="#">
                                                {{ $product->product_name }}
                                            </a>
                                        </h3>
                                        @auth
                                            <div class="actions">
                                                <form method="POST" action="{{ route('cart.add') }}">
                                                    @csrf
                                                    <input type="hidden" name="product_id" value="{{ $allproduct->id }}">
                                                    <input type="hidden" name="quantity" value="1">
                                                    <input type="hidden" name="sp" value="{{ $sp }}">
                                                    <button type="submit" class="vs-btn">
                                                        <i class="far fa-shopping-cart"></i> Add to Cart
                                                    </button>
                                                </form>

                                                <form method="POST" action="{{ route('wishlist.add') }}">
                                                    @csrf
                                                    <input type="hidden" name="product_id" value="{{ $allproduct->id }}">
                                                    <input type="hidden" name="session_id"
                                                        value="{{ session()->getId() }}">
                                                    <button type="submit" class="icon-btn">
                                                        <i class="far fa-heart"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        @endauth

                                        @guest
                                            <div class="actions">
                                                <a href="{{ route('login') }}" class="vs-btn">
                                                    <i class="far fa-shopping-cart"></i> Add to Cart
                                                </a>
                                            </div>
                                        @endguest
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach

                </div>
            </div>
        </section> -->
    @endif


    <!-- <section class="features-section">
        <div class="feature">
            <img src="{{ asset('frontend/assets/img/f-1.png') }}" alt="Free Shipping">
            <h4>Free Shipping</h4>
        </div>
        <div class="feature">
            <img src="{{ asset('frontend/assets/img/f-3.png') }}" alt="Assured Quality">
            <h4>Assured Quality</h4>
        </div>
        <div class="feature">
            <img src="{{ asset('frontend/assets/img/f-2.png') }}" alt="Secure Payment">
            <h4>Secure Payment</h4>
        </div>
        <div class="feature">
            <img src="{{ asset('frontend/assets/img/f-4.png') }}" alt="100% Purchase Protection">
            <h4>100% Purchase Protection</h4>
        </div>
        <div class="feature">
            <img src="{{ asset('frontend/assets/img/f-5.png') }}" alt="Best Price Promise">
            <h4>Best Price Promise</h4>
        </div>
    </section> -->


    <!-- <section class=" space-extra-top space-extra-bottom pt-50">
        <div class="container">
            <div class="title-area text-center">
                <h2 class="sec-title">Shop by Videos</h2>
            </div>
            <div class="row vs-carousel" data-slide-show="4" data-ml-slide-show="4" data-lg-slide-show="4"
                data-md-slide-show="3" data-sm-slide-show="1">
                @foreach ($videos as $video)
                    <div class="service-style1 col-xl-3">
                        <div class="vs-product product-style1">
                            <div class="product-img">
                                <a href="#">
                                    <iframe src="{{ $video->videolink }}" width="100%" height="400" frameborder="0"
                                        allowfullscreen style="border-radius:30px; object-fit:cover;"></iframe>
                                </a>
                            </div>
                            <div class="product-content">
                                @php
                                    $linkedProductId = $video->product_id ?? $video->product?->id;
                                @endphp
                                @php
                                    $videoSp = $video->sp ?? 0;
                                    $videoGst = $video->gst ?? 0;
                                    $videoPriceWithGst = $videoSp + ($videoSp * $videoGst) / 100;
                                @endphp
                                <span class="product-price">₹{{ number_format($videoPriceWithGst, 2) }}
                                    @if ($video->mrp)
                                        <del>₹{{ $video->mrp }}</del>
                                    @endif
                                    <small class="gst-note" style="font-size: 10px; color: #666;">({{ $videoGst }}%
                                        GST)</small>
                                </span>
                                <h3 class="product-title product-title2 home_1">
                                    <a class="text-inherit"
                                        href="#">{{ $video->product_name ?? 'Video Product' }}</a>
                                </h3>
                                <div class="actions">
                                    @auth
                                        @if (($video->stock ?? 0) > 0)
                                            <form action="{{ route('cart.add') }}" method="POST" style="display:inline;">
                                                @csrf
                                                <input type="hidden" name="video_id" value="{{ $video->id }}">
                                                @if ($linkedProductId)
                                                    <input type="hidden" name="product_id" value="{{ $linkedProductId }}">
                                                @endif
                                                <input type="hidden" name="quantity" value="1">
                                                <button type="submit" class="vs-btn" title="Add to Cart">
                                                    <i class="far fa-shopping-cart"></i>Add to Cart
                                                </button>
                                            </form>
                                        @else
                                            <button type="button" class="vs-btn" disabled
                                                style="background:#ff0000; color:#fff;">
                                                <i class="far fa-shopping-cart"></i>Out of Stock
                                            </button>
                                        @endif

                                        @if ($linkedProductId)
                                            <form action="{{ route('wishlist.add') }}" method="POST"
                                                style="display:inline;">
                                                @csrf
                                                <input type="hidden" name="product_id" value="{{ $linkedProductId }}">
                                                <button type="submit" class="icon-btn" title="Add to Wishlist"
                                                    style="background:transparent; border:none; padding:0;">
                                                    <i class="far fa-heart"></i>
                                                </button>
                                            </form>
                                        @endif
                                    @else
                                        <a href="{{ route('login') }}" class="vs-btn" title="Add to Cart">
                                            <i class="far fa-shopping-cart"></i> Add to Cart
                                        </a>
                                        <a href="{{ route('login') }}" class="icon-btn" title="Add to Wishlist">
                                            <i class="far fa-heart"></i>
                                        </a>
                                    @endauth
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section> -->


    <!-- <section class="awesome-parents">
        <div class="awesome-container">
            <div class="awesome-text">
                <h2>Hey, Awesome Parents!</h2>
                <p>
                    Get screen-free learning ideas, fun toys, and the latest product launches
                    sent straight to your WhatsApp! Stay in the loop and discover new ways to
                    help your child learn and play!
                </p>
                <a href="#" class="whatsapp-btn">WHATSAPP CHANNEL</a>
            </div>
            <div class="awesome-image">
                <img src="{{ asset('frontend/assets/img/parents.webp') }}" alt="Child playing with rainbow toy">
            </div>
        </div>
    </section> -->
    <!-- <section class="community-section">
        <div class="community-container">
            <h2>JOIN OUR COMMUNITY OF <span>500K+</span></h2>
            <p>Subscribe and get details of new arrivals, fun offers, and exciting updates directly from Cots & Cuddles!</p>
            <form action="{{ route('newsletter-store') }}" method="post" class="form-style1">
                @csrf
                <div class="form-group">
                    <input type="email" placeholder="Enter Your Email Address...">
                    <button class="vs-btn" type="submit">Subscribe</button>
                </div>
            </form>
        </div>
    </section> -->
    <!-- <section class=" space-extra">
        <div class="container">
            <div class="title-area">
                <h2 class="text-center mt-n2">We Are Also Available At</h2>
            </div>
            <div class="row vs-carousel gx-10" data-slide-show="4" data-ml-slide-show="4" data-lg-slide-show="4"
                data-md-slide-show="2" data-sm-slide-show="2">
                @foreach ($brands as $brand)
                    <div class="col-auto">
                        <div class="brand-style1"><img src="{{ asset('storage/brand/' . basename($brand->image)) }}"
                                alt="brand"></div>
                    </div>
                @endforeach

            </div>
        </div>
    </section> -->
    <section class="space space-extra-bottom blogs-section">
        <div class="container">
            <div class="title-area text-center">
                <h2 class="sec-title">The Juno & Jenny Blogs</h2>
            </div>
            <div class="row vs-carousel" data-slide-show="4" data-md-slide-show="4">
                @foreach ($blogs as $blog)
                    <div class="col-xl-3">
                        <div class="vs-blog blog-style1">
                            <div class="blog-img">
                                <img src="{{ $blog->image ? asset('storage/blog/' . $blog->image) : asset('frontend/assets/img/no-image.png') }}"
                                    alt="{{ $blog->imagealt ?? \Illuminate\Support\Str::limit(strip_tags($blog->title), 40) }}"
                                    class="w-100" width="395" height="395"
                                    style="object-fit:cover; aspect-ratio:1/1; max-width:395px; max-height:395px;">
                            </div>
                            <div class="blog-content">
                                <a href="{{ route('blogdetails', ['slug' => $blog->slug]) }}" class="blog-date">
                                    <i class="fal fa-calendar-alt"></i>
                                    {{ \Carbon\Carbon::parse($blog->created_at)->format('M d, Y') }}
                                </a>
                                <h3 class="blog-title h5">
                                    <a href="{{ route('blogdetails', ['slug' => $blog->slug]) }}">
                                        {{ $blog->title }}
                                    </a>
                                </h3>
                               
                            </div>
                            <a href="{{ route('blogdetails', ['slug' => $blog->slug]) }}" class="blog-btn">
                                Read More <i class="far fa-angle-right"></i>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- <section class="space-extra-bottom space-extra-top   pb-50">
        <div class="container">
            <div class="row justify-content-between text-center text-md-start">
                <div class="col-md-auto">
                    <div class="title-area">
                        <h2 class="sec-title">Hear It From Lansford Family</h2>
                    </div>
                </div>
                <div class="col-md-auto align-self-end">
                    <div class="sec-btns">
                        <button class="icon-btn" data-slick-prev=".catslider1"><i class="far fa-arrow-left"></i></button>
                        <button class="icon-btn" data-slick-next=".catslider1"><i
                                class="far fa-arrow-right"></i></button>
                    </div>
                </div>
            </div>
            <div class="row vs-carousel gx-15 catslider1" data-slide-show="4" data-lg-slide-show="4"
                data-md-slide-show="3" data-sm-slide-show="1" data-xs-slide-show="1">
                @forelse ($testimonials as $testimonial)
                    <div class="col-xl-3">
                        <div class="vs-product product-style1">
                            @if ($testimonial->video_link)
                                <iframe src="{{ $testimonial->video_link }}"
                                    style="width:100%; height:500px; border-radius:30px; object-fit:cover;"
                                    frameborder="0" allowfullscreen>
                                </iframe>
                            @else
                                <div class="d-flex align-items-center justify-content-center"
                                    style="width:100%; height:500px; background:#f0f0f0; border-radius:30px;">
                                    <span class="text-muted">No Video</span>
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info mt-4 text-center">
                            No testimonials available at this time.
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section> -->
<!-- 
    @if ($playtimes)
        <section class="science-playtime-section">
            <div class="science-playtime-wrapper">
                <a href="{{ route('about') }}" class="science-playtime-image">
                    <img style="width:550px; height:378px" src="{{ asset('storage/playtime/' . $playtimes->image) }}"
                        class="w-100" alt="The Science of Playtime" loading="lazy">
                </a>
                <div class="science-playtime-content">
                    <h2>{{ $playtimes->title }}</h2>
                    <p>
                        {!! $playtimes->description !!}
                    </p>
                    <a href="{{ route('about') }}" class="btn-primary">Read Our Story</a>
                </div>
            </div>
        </section>
    @endif -->

    <div data-bg-src="assets/img/bg/bg-h-1-1.jpg">
        <div class="vs-wave-shape  ">
            <svg viewBox="0 0 1920 295" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="wave-path" fill-rule="evenodd" clip-rule="evenodd"
                    d="M1920 295V202.758C1906.48 131.342 1843.63 77.168 1768.34 77.168C1739.37 77.168 1711.54 85.1814 1687.4 100.128C1650.68 38.4074 1584.56 0 1511.11 0C1412.1 0 1329.2 70.2842 1309.68 163.577C1294.03 136.928 1265.08 119 1232 119C1215.11 119 1198.88 123.673 1184.8 132.389C1163.39 96.397 1124.83 74 1082 74C1022.17 74 972.422 118.018 963.444 175.369C947.459 160.855 926.246 152 903 152C886.11 152 869.88 156.673 855.803 165.389C834.387 129.397 795.832 107 753 107C710.158 107 672.487 129.569 651.251 163.442C635.542 150.075 615.199 142 593 142C576.11 142 559.88 146.673 545.803 155.389C524.387 119.397 485.832 97 443 97C400.012 97 362.23 119.723 341.034 153.789C324.552 132.631 298.841 119 270 119C253.11 119 236.88 123.673 222.803 132.389C201.387 96.397 162.832 74 120 74C53.8333 74 0.000244141 127.833 0.000244141 194C0.000244141 194.41 0.000244141 194.835 0.0152435 195.245L0.000244141 195.248V295H1920Z" />
            </svg>
        </div>
    </div>
    <script>
        var swiper = new Swiper(".shopCategorySwiper", {
            slidesPerView: 5,
            spaceBetween: 25,
            loop: true,

            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },

            breakpoints: {
                320: {
                    slidesPerView: 2
                },
                600: {
                    slidesPerView: 3
                },
                992: {
                    slidesPerView: 4
                },
                1200: {
                    slidesPerView: 5
                }
            }
        });
    </script>
@endsection