@extends('layouts.frontend.app')
@section('content')
<style>
</style>
<section class="container-fluid banner" >
   <div class="row">
      <div class="col-md-12 p-0">
         <div class="swiper myFirstSwiper">
            <!-- note: corrected class name -->
            <div class="swiper-wrapper">
               @if (count($sliders) > 0)
               @foreach($sliders as $sl)
               <div class="swiper-slide">
                  <img src="{{asset('uploads/sliders/'.$sl->image)}}" alt="Banner 1">
               </div>
               @endforeach
               @endif
            </div>
            <!-- Navigation Buttons -->
            <div class="swiper-button-prev main-button-prev "></div>
            <div class="swiper-button-next main-button-next"></div>
            <!-- Pagination Dots -->
            <div class="swiper-pagination"></div>
         </div>
      </div>
      {{-- 
      <div class="col-md-3">
         <div class='div-h-pr'>
            <div class="h-pr">
               <div class="img-h-pr">
                  <img src="https://www.bookswagon.com/productimages/images200/702/9780963270702.jpg" alt="">
               </div>
               <div class="cn-h-pr">
                  <h4>Thinking, Fast and Slow..</h4>
                  <p class='c--p'>Moonshot: The Indigenous C..</p>
                  <p class='rating-hr'><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-muted" > </i></p>
                  <div class='ff-hr'>
                     <p class='rat--pr-h'>₹1,759</p>
                     <a href="javascript:void(0)" class="shop-now"><i class="fa fa-shopping-bag" title="Buy Now"></i> Shop Now</a>
                  </div>
               </div>
            </div>
            <div class="h-pr">
               <div class="img-h-pr">
                  <img src="https://www.bookswagon.com/productimages/mainimages/266/9789387779266.jpg" alt="">
               </div>
               <div class="cn-h-pr">
                  <h4>Thinking, Fast and Slow..</h4>
                  <p class='c--p'>Moonshot: The Indigenous C..</p>
                  <p class='rating-hr'><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-muted" > </i></p>
                  <div class='ff-hr'>
                     <p class='rat--pr-h'>₹1,759</p>
                     <a href="javascript:void(0)" class="shop-now"><i class="fa fa-shopping-bag" title="Buy Now"></i> Shop Now</a>
                  </div>
               </div>
            </div>
            <div class="h-pr">
               <div class="img-h-pr">
                  <img src="https://www.bookswagon.com/productimages/images200/807/9781421522807.jpg" alt="">
               </div>
               <div class="cn-h-pr">
                  <h4>Thinking, Fast and Slow..</h4>
                  <p class='c--p'>Moonshot: The Indigenous C..</p>
                  <p class='rating-hr'><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-warning" > </i><i class="fas fa-star text-muted" > </i></p>
                  <div class='ff-hr'>
                     <p class='rat--pr-h'>₹1,759</p>
                     <a href="javascript:void(0)" class="shop-now"><i class="fa fa-shopping-bag" title="Buy Now"></i> Shop Now</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
      --}}
   </div>
</section>
<section class="container silder-content mt-5 mb-5">
   <div class="silder-content d-flex justify-content-center">
      <div class="ticker_label_title ticker-title newsmatic-ticker-label">
         <span class="icon">
         <i class="fas fa-rss"></i>
         </span>
         <span class="ticker_label_title_string">Podcasts</span>
      </div>
      <div class="Marquee">
         <div class="Marquee-content" id="marquee">
            @if(count($podcasts) > 0)
            @foreach ($podcasts as $pod)
            @php
            $url = $pod->video_url;
            $videoId = '';
            if (strpos($url, 'watch?v=') !== false) {
            $videoId = explode('watch?v=', $url)[1];
            } elseif (strpos($url, 'youtu.be/') !== false) {
            $videoId = explode('youtu.be/', $url)[1];
            }
            $thumbnail = "https://img.youtube.com/vi/$videoId/hqdefault.jpg";
            @endphp
            {{-- YouTube video design --}}
            <div class="Marquee-tag">
               <a href="{{ $url }}" target="_blank" class="card-design d-flex align-items-center gap-3 text-decoration-none">
                  <div class="card-video" style="width: 40px; height: 40px; overflow: hidden; border-radius: 8px;">
                     <img src="{{ $thumbnail }}" alt="{{ $pod->title }}" width="70" height="70" style="object-fit: cover;">
                  </div>
                  <div class="card-content2">
                     <p class="mb-0 fw-bold text-dark">{{ $pod->title }}</p>
                     <p class="date-show mb-0 text-muted">{{ $pod->created_at->format('F d, Y') }}</p>
                  </div>
               </a>
            </div>
            {{-- Image design (if available) --}}
            @if(count($podcasts) > 0)
            @foreach ($events as $pod)
            <div class="Marquee-tag event-marquee">
               <div class="marquee-content d-flex">
                  <a href="javascript:void(0)" 
                     onclick="openImageModal('{{ asset('uploads/events/'.$pod->image) }}')" 
                     class="d-flex align-items-center  text-decoration-none gap-2 text-black   ">
                     <div class="card-video" style="width: 40px; height: 40px; overflow: hidden; border-radius: 8px; ">
                        <img src="{{ asset('uploads/events/'.$pod->image) }}" alt="{{ $pod->title }}"  style="object-fit: cover;">
                     </div>
                     <div class="card-content2">
                        <p class="mb-0 fw-bold text-dark">{{ $pod->title }}</p>
                        <p class="date-show mb-0 text-muted">{{ $pod->date->format('F d, Y') }}</p>
                     </div>
                  </a>
                  <p class="event-tag">Event</p>
               </div>
            </div>
            @endforeach
            @endif
            @endforeach
            @endif
         </div>
      </div>
      {{-- Modal --}}
      <div class="modal fade" id="imageModal" tabindex="-1">
         <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
               <div class="modal-body text-center">
                  <img id="modalImage" src="" class="img-fluid rounded" alt="Preview">
               </div>
            </div>
         </div>
      </div>
      <script>
         function openImageModal(src) {
             document.getElementById('modalImage').src = src;
             var myModal = new bootstrap.Modal(document.getElementById('imageModal'));
             myModal.show();
         }
      </script>
      <div class="silder-btn">
         <button id="toggleBtn" class="silder-btn-pause"><i class="fas fa-play"></i></button>
      </div>
   </div>
</section>
<!-- <section class="container mt-5 mb-5">
   <div class="hero-1">
       <img src="{{asset('frontend/assets/images/trending.jpg')}}" alt="">
   </div>
   </section> -->


<section class="section-trending">
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-12 ">
            <div class="search-item d-flex justify-content-between">
               <h1 class="card-title">Now Trending</h1>
               <a href="{{route('products.load',['type'=>'now-trending'])}}" class="view-btn">View All </a>
            </div>
            <div class="row position-relative">
               <!-- Swiper -->
               <div class="swiper myProductSwiper">
                  <div class="swiper-wrapper">
                     @if(count($tradingProducts) > 0)
                     @foreach ($tradingProducts as $pro)
                      
                     <div class="swiper-slide">
                        <div class="product-card">
                           <div class="card-img">
                              @if(!empty($pro['total_discount_price']))
                              <div class="badge">{{ $pro['product_discount_price'] ?? ''}}%</div>
                              @endif
                              <a href="{{route('product.details',['slug'=>$pro['slug']])}}">
                                 <div class="product-tumb">
                                    <img src="{{ asset($pro['product_image']) }}" alt="">
                                  
                                 </div>
                              </a>
                           </div>
                           <div class="product-details">
                              <div class="product-p pb-2">
                                 <h4>
                                    <a href="{{route('product.details',['slug'=>$pro['slug']])}}">
                                    {{ Str::limit($pro['product_name'] ?? '', 25, '..') }}
                                    </a>
                                 </h4>
                                 <p>{{ Str::limit($pro['product_sub_title'] ?? '', 20, '..') }}</p>
                                 <span>{{ Str::limit($pro['product_book_author']) }}</span>
                              </div>
                              <div class="product-bottom-details">
                                 <div class="product-bottom-details-div">
                                    <div class="star-img d-flex gap-1"> 
                                       @for($i = 1; $i <= 5; $i++)
                                       @if($i <= $pro['rating'])
                                       <i class="fas fa-star text-warning" style="font-size:14px;"></i>
                                       @else
                                       <i class="far fa-star text-muted" style="font-size:14px;"></i>
                                       @endif
                                       @endfor
                                    </div>
                                    <span class="rating-count">({{$pro['reviews_count']}})</span>
                                 </div>
                                 <div class="product-links">
                                    @if($pro['product_stock_quantity'] > 0)
                                    {{-- In Stock --}}
                                    @if(Auth::check())
                                    <a href="javascript:void(0)" onclick="addToWishlist({{ $pro['product_id'] }}, this)">
                                      <i class="fa fa-heart {{ in_array($pro['product_id'], $wishlistProductIds) ? 'cust-dange' : '' }}" title="Add to Wishlist"></i>
                                    </a>
                                    <a href="javascript:void(0)" onclick="addToCart({{ $pro['product_id'] }})">
                                    <i class="fa fa-shopping-cart" title="Add to Cart"></i>
                                    </a>
                                    @else
                                    <a href="javascript:void(0)" onclick="showLoginPopup()">
                                    <i class="fa fa-heart" title="Add to Wishlist"></i>
                                    </a>
                                    <a href="javascript:void(0)" onclick="showLoginPopup()">
                                    <i class="fa fa-shopping-cart" title="Add to Cart"></i>
                                    </a>
                                    @endif
                                    @else
                                    {{-- Out of Stock --}}
                                    <a class="disabled" aria-disabled="true">
                                    <i class="fa fa-heart" title="Add to Wishlist"></i>
                                    </a>
                                    <a class="disabled" aria-disabled="true">
                                    <i class="fa fa-shopping-cart" title="Add to Cart"></i>
                                    </a>
                                    @endif
                                 </div>
                              </div>
                              <div class="price-data text-start ">
                                 @if(isset($pro['total_discount_price']) && $pro['total_discount_price'])
                                 <div class='curreny-or'>
                                    <span class="current-price text-success fw-bold">
                                    ₹{{ number_format($pro['total_discount_price'], 0) }}
                                    </span>
                                    <del class="original-price text-muted ms-2">
                                    ₹{{ number_format($pro['product_price'], 0) }}
                                    </del> 
                                 </div>
                                 @if(!empty($pro['product_discount_price']))
                                 <span class="badge bg-danger ms-2">
                                 {{ $pro['product_discount_price'] }}%
                                 </span>
                                 @endif
                                 @else
                                 <span class="current-price text-dark fw-bold">
                                 ₹{{ number_format($pro['product_price'], 0) }}
                                 </span>
                                 @endif
                                 @if($pro['product_stock_quantity'] > 0)
                                 @if(Auth::check())
                                 {{-- Logged-in & In Stock --}}
                                 <a href="javascript:void(0)" onclick="buyNow({{ $pro['product_id'] }})" class="shop-now">
                                 <i class="fa fa-shopping-bag" title="Buy Now"></i> Shop Now
                                 </a>
                                 @else
                                 {{-- Guest & In Stock --}}
                                 <a href="javascript:void(0)" onclick="showLoginPopup()" class="shop-now">
                                 <i class="fa fa-shopping-bag" title="Buy Now"></i> Shop Now
                                 </a>
                                 @endif
                                 @else
                                 {{-- Out of Stock (All Users) --}}
                                 <div class="d-flex  mt-2 gap-1">
                                    <a class="shop-now disabled px-0" aria-disabled="true">
                                    <i class="fa fa-times-circle"></i>
                                    Out of Stock
                                    </a>
                                    @if(Auth::check())
                                    {{-- Logged-in users only --}}
                                    <a class="shop-now notify px-0" href="javascript:void(0)" onclick="notifyMe({{ $pro['product_id'] }})">
                                    <i class="bi bi-bell-fill"></i> 
                                    Notify Me
                                    </a>
                                    @endif
                                 </div>
                                 @endif
                              </div>
                           </div>
                        </div>
                     </div>
                     @endforeach
                     @endif
                  </div>
               </div>
               <!-- Swiper Navigation Buttons OUTSIDE -->
               <div class="swiper-button-prev trending-prev custom-prev">
               </div>
               <div class="swiper-button-next trending-next custom-next">
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
{{-- 
<section class="container mt-5 mb-5">
   <div class="hero-1">
      <img src="{{asset('frontend/assets/images/commic-book.jpg')}}" alt="">
   </div>
</section >
--}}
<section class='section-bestseller'>
   <section class="container-fluid">
      <div class="row">
         <div class="col-md-12 ">
            <div class="search-item d-flex justify-content-between">
               <h1 class="card-title">Best Seller</h1>
               <a href="{{route('products.load',['type'=>'bestseller'])}}" class="view-btn">View All</a>
            </div>
            <div class="row position-relative">
               <!-- Swiper -->
               <div class="swiper bestseller">
                  <div class="swiper-wrapper">
                     @if(count($bestSellerProducts ) > 0)
                     @foreach ($bestSellerProducts  as $pro)
                      

                     <div class="swiper-slide">
                        <div class="product-card">
                           <div class="card-img">
                              @if(!empty($pro['total_discount_price']))
                              <div class="badge">{{ $pro['product_discount_price'] ?? ''}}%</div>
                              @else
                              @endif
                              <a href="{{route('product.details',['slug'=>$pro['slug']])}}">
                                 <div class="product-tumb">
                                    <img src="{{ asset($pro['product_image']) }}" alt="">
                                 
                                 </div>
                              </a>
                           </div>
                           <div class="product-details">
                              <div class="product-p pb-2">
                                 <h4>
                                    <a href="{{route('product.details',['slug'=>$pro['slug']])}}">
                                    {{ Str::limit($pro['product_name'] ?? '', 25, '..') }}
                                    </a>
                                 </h4>
                                 <p> {{ Str::limit($pro['product_name'] ?? '', 20, '..') }}</p>
                                 <span>{{$pro['product_book_author']}}</span>
                              </div>
                              <div class="product-bottom-details">
                                 <div class="product-bottom-details-div">
                                    <div class="star-img d-flex gap-1">
                                       @for($i = 1; $i <= 5; $i++)
                                       @if($i <= $pro['rating'])
                                       <i class="fas fa-star text-warning" style="font-size:14px;"></i>
                                       @else
                                       <i class="far fa-star text-muted" style="font-size:14px;"></i>
                                       @endif
                                       @endfor
                                    </div>
                                    <span class="rating-count">({{$pro['reviews_count']}})</span>
                                 </div>
                                 <div class="product-links">
                                    @if($pro['product_stock_quantity'] > 0)
                                    {{-- In Stock --}}
                                    @if(Auth::check())
                                    <a href="javascript:void(0)" onclick="addToWishlist({{ $pro['product_id'] }},this)">
                                    <i class="fa fa-heart {{ in_array($pro['product_id'], $wishlistProductIds) ? 'cust-dange' : '' }}" title="Add to Wishlist"></i>
                                    </a>
                                    <a href="javascript:void(0)" onclick="addToCart({{ $pro['product_id'] }})">
                                    <i class="fa fa-shopping-cart" title="Add to Cart"></i>
                                    </a>
                                    @else
                                    <a href="javascript:void(0)" onclick="showLoginPopup()">
                                    <i class="fa fa-heart" title="Add to Wishlist"></i>
                                    </a>
                                    <a href="javascript:void(0)" onclick="showLoginPopup()">
                                    <i class="fa fa-shopping-cart" title="Add to Cart"></i>
                                    </a>
                                    @endif
                                    @else
                                    {{-- Out of Stock --}}
                                    <a class="disabled" aria-disabled="true">
                                    <i class="fa fa-heart" title="Add to Wishlist"></i>
                                    </a>
                                    <a class="disabled" aria-disabled="true">
                                    <i class="fa fa-shopping-cart" title="Add to Cart"></i>
                                    </a>
                                    @endif
                                 </div>
                              </div>
                              <div class="price-data text-start">
                                 @if(!empty($pro['total_discount_price']))
                                 <div class='curreny-or'>
                                    <span class="current-price text-success fw-bold">₹{{ number_format($pro['total_discount_price']), 2 }}</span>
                                    <del class="original-price text-muted ms-2">₹{{number_format($pro['product_price']), 2 }}</del>
                                 </div>
                                 @else
                                 <span class="current-price text-dark fw-bold">₹{{ number_format($pro['product_price']), 2 }}</span>
                                 @endif
                                 @if($pro['product_stock_quantity'] > 0)
                                 @if(Auth::check())
                                 {{-- Logged-in & In Stock --}}
                                 <a href="javascript:void(0)" onclick="buyNow({{ $pro['product_id'] }})" class="shop-now">
                                 <i class="fa fa-shopping-bag" title="Buy Now"></i> Shop Now
                                 </a>
                                 @else
                                 {{-- Guest & In Stock --}}
                                 <a href="javascript:void(0)" onclick="showLoginPopup()" class="shop-now">
                                 <i class="fa fa-shopping-bag" title="Buy Now"></i> Shop Now
                                 </a>
                                 @endif
                                 @else
                                 {{-- Out of Stock (All Users) --}}
                                 <div class="d-flex  mt-2 gap-1">
                                    <a class="shop-now disabled px-0" aria-disabled="true">
                                    <i class="fa fa-times-circle"></i>
                                    Out of Stock
                                    </a>
                                    @if(Auth::check())
                                    {{-- Logged-in users only --}}
                                    <a class="shop-now notify px-0" href="javascript:void(0)" onclick="notifyMe({{ $pro['product_id'] }})">
                                    <i class="bi bi-bell-fill"></i> 
                                    Notify Me
                                    </a>
                                    @endif
                                 </div>
                                 @endif
                              </div>
                           </div>
                        </div>
                     </div>
                     @endforeach
                     @endif
                  </div>
               </div>
               <!-- Swiper Navigation Buttons OUTSIDE -->
               <div class="swiper-button-prev bestSeller-button-prev custom-prev ">
               </div>
               <div class="swiper-button-next bestSeller-button-next custom-next ">
               </div>
            </div>
         </div>
      </div>
   </section>
</section>
<section class='section-freeship'>
   <div class="container">
      <div class="row">
         <div class="col-xl-3 col-md-6 col-sm-6 col-6">
            <div class="single-feature mb-40 style_three" style="background: #ffffff ">
               <div class="feature-icon"><img
                  src="http://popconcult.techsaga.live/frontend/assets/images/free-delivery_small.png" alt=""></div>
               <div class="feature-content">
                  <h4 style="color: #333333">Free Shipping</h4>
                  <p style="color: #333333">Order over ₹100</p>
               </div>
            </div>
         </div>
         <div class="col-xl-3 col-md-6 col-sm-6 col-6">
            <div class="single-feature mb-40 style_three" style="background: #ffffff ">
               <div class="feature-icon"><img src="http://popconcult.techsaga.live/frontend/assets/images/shield_small.png"
                  alt=""></div>
               <div class="feature-content">
                  <h4 style="color: #242424">Secure Payment</h4>
                  <p style="color: #757575">100% Secure Payment</p>
               </div>
            </div>
         </div>
         <div class="col-xl-3 col-md-6 col-sm-6 col-6">
            <div class="single-feature mb-40 style_three" style="background: #ffffff ">
               <div class="feature-icon"><img
                  src="http://popconcult.techsaga.live/frontend/assets/images/best-price_small.png" alt=""></div>
               <div class="feature-content">
                  <h4 style="color: #242424">Best Price</h4>
                  <p style="color: #757575">Guaranteed Low Cost</p>
               </div>
            </div>
         </div>
         <div class="col-xl-3 col-md-6 col-sm-6 col-6">
            <div class="single-feature mb-40 style_three" style="background: #ffffff ">
               <div class="feature-icon"><img src="http://popconcult.techsaga.live/frontend/assets/images/return_small.png"
                  alt=""></div>
               <div class="feature-content">
                  <h4 style="color: #242424">Easy Return</h4>
                  <p style="color: #757575">Within 30 Days returns</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
{{-- 
<section class="container mt-5 mb-5">
   <div class="hero-1">
      <img src="{{asset('frontend/assets/images/dc.jpg')}}" alt="">
   </div>
</section>
--}}
<section class='arrivals-section'>
   <section class="container-fluid  ">
      <div class="row">
         <div class="col-md-12 ">
            <div class="search-item d-flex justify-content-between">
               <h1 class="card-title">New Arrivals</h1>
               <a href="{{route('products.load',['type'=>'new-arrival'])}}" class="view-btn">View All</a>
            </div>
            <div class="row position-relative">
               <!-- Swiper -->
               <div class="swiper newarrivals">
                  <div class="swiper-wrapper">
                     @if(count($newArrivalProducts) > 0)
                     @foreach ($newArrivalProducts  as $pro)
                     <div class="swiper-slide">
                        <div class="product-card">
                           <div class="card-img">
                              @if(!empty($pro['total_discount_price']))
                              <div class="badge">{{ $pro['product_discount_price'] ?? ''}}%</div>
                              @else
                              @endif
                              <a href="{{route('product.details',['slug'=>$pro['slug']])}}">
                                 <div class="product-tumb">
                                   <img src="{{ asset($pro['product_image']) }}" alt="">
                                  
                                 </div>
                              </a>
                           </div>
                           <div class="product-details">
                              <div class="product-p pb-2">
                                 <h4>
                                    <a href="{{route('product.details',['slug'=>$pro['slug']])}}">
                                    {{ Str::limit($pro['product_name'] ?? '', 25, '..') }}
                                    </a>
                                 </h4>
                                 <p>  {{ Str::limit($pro['product_name'] ?? '', 20, '..') }}</p>
                                 <span>{{$pro['product_book_author']}}</span>
                              </div>
                              <div class="product-bottom-details">
                                 <div class="product-bottom-details-div">
                                    <div class="star-img d-flex gap-1">
                                       @for($i = 1; $i <= 5; $i++)
                                       @if($i <= $pro['rating'])
                                       <i class="fas fa-star text-warning" style="font-size:14px;"></i>
                                       @else
                                       <i class="far fa-star text-muted" style="font-size:14px;"></i>
                                       @endif
                                       @endfor
                                    </div>
                                    <span class="rating-count">({{$pro['reviews_count']}})</span>
                                 </div>
                                 <div class="product-links">
                                    @if($pro['product_stock_quantity'] > 0)
                                    {{-- In Stock --}}
                                    @if(Auth::check())
                                    <a href="javascript:void(0)" onclick="addToWishlist({{ $pro['product_id'] }},this)">
                                    <i class="fa fa-heart {{ in_array($pro['product_id'], $wishlistProductIds) ? 'cust-dange' : '' }}" title="Add to Wishlist"></i>
                                    </a>
                                    <a href="javascript:void(0)" onclick="addToCart({{ $pro['product_id'] }})">
                                    <i class="fa fa-shopping-cart" title="Add to Cart"></i>
                                    </a>
                                    @else
                                    <a href="javascript:void(0)" onclick="showLoginPopup()">
                                    <i class="fa fa-heart" title="Add to Wishlist"></i>
                                    </a>
                                    <a href="javascript:void(0)" onclick="showLoginPopup()">
                                    <i class="fa fa-shopping-cart" title="Add to Cart"></i>
                                    </a>
                                    @endif
                                    @else
                                    {{-- Out of Stock --}}
                                    <a class="disabled" aria-disabled="true">
                                    <i class="fa fa-heart" title="Add to Wishlist"></i>
                                    </a>
                                    <a class="disabled" aria-disabled="true">
                                    <i class="fa fa-shopping-cart" title="Add to Cart"></i>
                                    </a>
                                    @endif
                                 </div>
                              </div>
                              <div class="price-data text-start">
                                 @if(!empty($pro['total_discount_price']))
                                 <div class="curreny-or">
                                    <span class="current-price text-success fw-bold">₹{{ number_format($pro['total_discount_price']), 2 }}</span>
                                    <del class="original-price text-muted ms-2">₹{{ number_format($pro['product_price']), 2 }}</del>
                                 </div>
                                 @else
                                 <span class="current-price text-dark fw-bold">₹{{ number_format($pro['product_price']), 2 }}</span>
                                 @endif
                                 @if($pro['product_stock_quantity'] > 0)
                                 @if(Auth::check())
                                 {{-- Logged-in & In Stock --}}
                                 <a href="javascript:void(0)" onclick="buyNow({{ $pro['product_id'] }})" class="shop-now">
                                 <i class="fa fa-shopping-bag" title="Buy Now"></i> Shop Now
                                 </a>
                                 @else
                                 {{-- Guest & In Stock --}}
                                 <a href="javascript:void(0)" onclick="showLoginPopup()" class="shop-now">
                                 <i class="fa fa-shopping-bag" title="Buy Now"></i> Shop Now
                                 </a>
                                 @endif
                                 @else
                                 {{-- Out of Stock (All Users) --}}
                                 <div class="d-flex  mt-2 gap-1">
                                    <a class="shop-now disabled px-0" aria-disabled="true">
                                    <i class="fa fa-times-circle"></i>
                                    Out of Stock
                                    </a>
                                    @if(Auth::check())
                                    {{-- Logged-in users only --}}
                                    <a class="shop-now notify px-0" href="javascript:void(0)" onclick="notifyMe({{ $pro['product_id'] }})">
                                    <i class="bi bi-bell-fill"></i> 
                                    Notify Me
                                    </a>
                                    @endif
                                 </div>
                                 @endif
                               
                              </div>
                           </div>
                        </div>
                     </div>
                     @endforeach
                     @endif
                  </div>
               </div>
               <!-- Swiper Navigation Buttons OUTSIDE -->
               <div class="swiper-button-prev newarrivals-button-prev custom-prev ">
               </div>
               <div class="swiper-button-next newarrivals-button-next custom-next ">
               </div>
            </div>
         </div>
      </div>
   </section>
</section>
<section class='section-publisher'>
   <div class="container-fluid dc_marquee position-relative">
      <h1 class="card-title mb-4">
      </h1>
       <div class="search-item d-flex justify-content-between">
               <h1 class="card-title">Enter the Publisher</h1>
               {{-- <a href="{{route('products.load',['type'=>'new-arrival'])}}" class="view-btn">View All</a> --}}
            </div>
      <!-- Prev Button -->
      <!-- <button id="dcPrevBtn">
         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="50" fill="none" viewBox="0 0 24 24"
             stroke-width="2.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
         </svg>
         </button> -->
      <div class="marquee ">
         <div class="marquee-inner" id="dcMarquee" style='position:relative;'>
            @forelse($publishedProducts as $product)
            <div class="item-wrap">
               <a href="{{ route('products.load', ['type'=>$product->publisher_name]) }}">
                  <!-- <img src="{{ asset('uploads/category/' . ($product->image_url ?? 'comming.jpg')) }}" 
                     class="card-img-top" 
                     alt="{{ $product->name ?? '' }}"> -->
                  <img src="https://www.bookswagon.com/authorimages/stephen-edwin-king.jpg" alt="">
               </a>
               <p class='autor--n'>{{$product->publisher_name}}</p>
            </div>
            @empty
            <p>No Published Products found</p>
            @endforelse
         </div>
      </div>
      <!-- Next Button -->
      <!-- <button id="dcNextBtn">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="30" height="30" viewBox="0 0 24 24"
             stroke-width="2.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
         </svg>
         </button> -->
   </div>
</section>
{{-- 
<div class="container marvel_marquee position-relative">
   <h1 class="card-title mb-4">Enter the marvel universe</h1>
   <button id="prevBtn">
      <svg
         xmlns="http://www.w3.org/2000/svg"
         width="30"
         height="50"
         fill="none"
         viewBox="0 0 24 24"
         stroke-width="2.5"
         stroke="currentColor"
         class="size-6"
         >
         <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15.75 19.5 8.25 12l7.5-7.5"
            />
      </svg>
   </button>
   <div class="marquee mb-5">
      <div class="marquee-inner">
         @forelse($mcuProducts as $product)
         <div class="item-wrap">
            <a href="{{ route('products.load', $product->slug) }}">
            <img
               src="{{ asset('uploads/category/' . ($product->image_url ?? 'comming.jpg')) }}" 
               class="card-img-top"
               alt="{{ $product->name ?? '' }}"
               />
            </a>
         </div>
         @empty
         <p>No Marvel Products found</p>
         @endforelse
         <!-- Next Button -->
      </div>
   </div>
   <button id="nextBtn">
      <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         width="30"
         height="30"
         viewBox="0 0 24 24"
         stroke-width="2.5"
         stroke="currentColor"
         class="size-6"
         >
         <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m8.25 4.5 7.5 7.5-7.5 7.5"
            />
      </svg>
   </button>
</div>
--}}
{{-- 
<div class="container dc_marquee mb-5 postion-relative">
   <h1 class="card-title mb-4">Enter the DC fandom</h1>
   <button id="prevBtndc">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="50" fill="none"
         viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
      </svg>
   </button>
   <div class="marquee2">
      <div class="marquee-inner2" id="marquee2">
         @forelse($dcProducts as $product)
         <div class="item-wrap">
            <a href="{{ route('products.load', $product->slug) }}">
            <img src="{{ asset('uploads/category/' . ($product->image_url ?? 'comming.jpg')) }}" class="card-img-top"
               alt="{{ $product->name ?? ''  }}">
            </a>
         </div>
         @empty
         <p>No DC Products found</p>
         @endforelse
      </div>
   </div>
   <button id="nextBtndc">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="30" height="30" viewBox="0 0 24 24"
         stroke-width="2.5" stroke="currentColor" class="size-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
      </svg>
   </button>
</div>
--}}

</div>

<!-- Modal -->

<!-- Profile Modal -->

  
<script>
document.addEventListener("DOMContentLoaded", function () {
  const profileBtn = document.getElementById("mobile-togle");
  const profileContainer = document.getElementById("profileContainer");

  if (profileBtn && profileContainer) {
    // Toggle open/close when icon is clicked
    profileBtn.addEventListener("click", (e) => {
      e.stopPropagation(); // prevent window click from closing immediately
      if (profileContainer.style.display === "flex") {
        profileContainer.style.display = "none";
      } else {
        profileContainer.style.display = "flex";
      }
    });

    // Close when clicking outside the dropdown
    window.addEventListener("click", (e) => {
      if (e.target === profileContainer) {
        profileContainer.style.display = "none";
      }
    });
  } else {
    console.error("❌ ID not found: Check #profileToggle or #profileContainer in your HTML");
  }
});
</script>


<script>
   $(document).ready(function(){
     let $marquee = $("#dcMarquee");
     let marqueeWidth = $marquee.outerWidth(true);
     let containerWidth = $(".marquee").width();
     let animationDuration = marqueeWidth * 20; // speed adjust
     let anim;
   
     function startMarquee(){
       $marquee.css({left: 0});
       anim = $marquee.animate(
         { left: -marqueeWidth }, 
         animationDuration, 
         "linear", 
         startMarquee
       );
     }
   
     // start animation
     startMarquee();
   
     // stop on hover
     $(".marquee").hover(
       function() {
         $marquee.stop(); // stop animation on hover
       }, 
       function() {
         // resume animation
         let currentLeft = parseInt($marquee.css("left"));
         let remainingDistance = marqueeWidth + currentLeft; // left is negative
         let remainingTime = remainingDistance * 20; // same speed
         anim = $marquee.animate(
           { left: -marqueeWidth }, 
           remainingTime, 
           "linear", 
           startMarquee
         );
       }
     );
   });
</script>
@endsection