@extends('layouts.frontend.app')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<link rel="stylesheet" href="https://awik.io/demo/webshop-zoom/drift-basic.min.css">
<style>
   :root {
   --primary-color: #3a86ff;
   --secondary-color: #ff006e;
   --dark-color: #14213d;
   : #f8f9fa;
   }
   body {
   }
   .product-container {
   background-color: white;
   border-radius: 15px;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
   overflow: hidden;
   margin-top: 30px;
   }
   .product-image2 {
   position: relative;
   overflow: hidden;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   min-height: 400px;
   }
   .product-image-placeholder {
   font-size: 5rem;
   color: #14213d;
   opacity: 0.3;
   }
   .product-info {
   padding: 2rem 4rem;
   text-align: left;
   }
   .product-title {
   font-size: 26px;
   font-weight: 700;
   color: #14213d;
   margin-bottom: 0.5rem;
   text-transform: uppercase;
   }
   .product-author {
   font-size: 1rem;
   color: #6c757d;
   margin-bottom: 1.5rem;
   }
   .product-price {
   display: flex;
   align-items: center;
   margin-bottom: 1.5rem;
   }
   .current-price {
   font-size: 20px;
   font-weight: 700;
   color:  #ff006e;
   margin-right: 1rem;
   }
   .original-price {
   font-size: 20px;
   text-decoration: line-through;
   color: #6c757d;
   }
   .discount-badge {
   background-color:  #ff006e;
   color: white;
   padding: 0.3rem 0.8rem;
   border-radius: 30px;
   font-weight: 600;
   margin-left: 1rem;
   font-size: 0.9rem;
   }
   .stock-info {
   display: flex;
   align-items: center;
   margin-bottom: 1.5rem;
   }
   .stock-badge {
   padding: 0.4rem 1rem;
   border-radius: 30px;
   font-weight: 600;
   font-size: 0.9rem;
   }
   .in-stock {
   background-color: #d1e7dd;
   color: #0f5132;
   }
   .low-stock {
   background-color: #fff3cd;
   color: #856404;
   }
   .action-buttons {
   margin: 2rem 0;
   }
   .btn-add-to-cart {
   background-color: #3a86ff;
   color: white;
   padding: 0.8rem 2rem;
   font-weight: 600;
   border-radius: 30px;
   border: none;
   transition: all 0.3s;
   }
   .btn-add-to-cart:hover {
   background-color: #2563eb;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
   .btn-buy-now {
   background-color:  #ff006e;
   color: white;
   padding: 0.8rem 2rem;
   font-weight: 600;
   border-radius: 30px;
   border: none;
   transition: all 0.3s;
   }
   .btn-buy-now:hover {
   background-color: #d90057;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
   .product-meta {
   background-color: #f8f9fa;
   padding: 1.5rem;
   border-radius: 10px;
   margin-top: 2rem;
   }
   .meta-title {
   font-weight: 600;
   color: var(--dark-color);
   margin-bottom: 0.5rem;
   }
   .description-box {
   padding: 1.5rem;
   background-color: white;
   border-radius: 10px;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   margin-top: 2rem;
   }
   .social-sharing {
   display: flex;
   gap: 10px;
   margin-top: 1.5rem;
   }
   .social-icon {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   color: white;
   text-decoration: none;
   transition: all 0.3s;
   }
   .social-icon:hover {
   transform: translateY(-3px);
   }
   .facebook {
   background-color: #3b5998;
   }
   .twitter {
   background-color: #1da1f2;
   }
   .pinterest {
   background-color: #bd081c;
   }
   @media (max-width: 768px) {
   .product-image2 {
   min-height: 300px;
   }
   .product-title {
   font-size: 1.8rem;
   }
   .action-buttons .btn {
   width: 100%;
   margin-bottom: 10px;
   }
   }
   .thumb-img {
   height: 7rem;
   display: block;
   margin: 0 auto 10px;
   cursor: pointer;
   border: 2px solid transparent;
   transition: transform 0.2s, border 0.2s;
   }
   .thumb-img:hover,
   .thumb-img.active {
   /* transform: scale(1.05); */
   border: 2px solid #007bff;
   }
   .product-image2 img {
   max-height: 400px;
   object-fit: contain;
   }
   /* Container with hidden overflow */
   .thumb-container {
   position: relative;
   max-height: 420px;
   overflow: hidden;
   }
   .thumb-images {
   display: flex;
   flex-direction: column;
   transition: transform 0.4s ease-in-out;
   }
   /* Arrow buttons */
   .arrow-btn {
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   background: rgb(0 0 0 / 84%);
   border: none;
   color: white;
   font-size: 18px;
   cursor: pointer;
   z-index: 10;
   width: 100%;
   height: 28px;
   /* border-radius: 50%; */
   display: flex
   ;
   justify-content: center;
   align-items: center;
   }
   /* .arrow-btn.top { top: 5px; } */
   .arrow-btn.bottom { bottom: 0px; }
   .arrow-btn:disabled {
   background: rgb(0 0 0 / 74%);
   cursor: not-allowed;
   }
   /* .columns {
   margin: 0 auto;
   max-width: 900px;
   } */
   .details {
   position: relative;
   width: 100%;
   height: 100%;
   max-height: 475px;
   float: left;
   object-fit: cover
   }
   .column{
   padding: 0 10px!important;
   }
   .star-rating {
   direction: rtl;
   display: inline-flex;
   font-size: 2rem;
   }
   .star-rating input[type="radio"] {
   display: none;
   }
   .star-rating label {
   color: #ccc;
   cursor: pointer;
   }
   .star-rating input[type="radio"]:checked ~ label,
   .star-rating label:hover,
   .star-rating label:hover ~ label {
   color: gold;
   }
   .order-p p{
   font-size:14px;
   }
   .order-sift {

    background: #fff;
    padding: 16px 5px !important;}
</style>
<section class="pr-detail">
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-3">
            @php
            $images = is_array($product['product_image']) 
            ? $product['product_image'] 
            : explode(',', $product['product_image']); 
            @endphp
            <div class="product-mimage" id="zoom-container">
               <img id="mainImage" src="{{ $images[0] }}" alt="">
               <div id="zoom-result"></div>
            </div>
            <div class="pr-bottom-image">
               @if(count($images) > 1)
               @foreach($images as $img)
               <img class="thumb" src="{{ $img }}" alt="">
               @endforeach
               @endif
            </div>
         </div>
         <div class="col-md-6 pr-deytail-col">
            <div class="pr-detail-d">
               <h3 class="heading-p">{{ $product['product_name']}}  <span>{{ $product['product_format']}} – {{ $product['publication_date']}}</span></h3>
               <a href="#admin" class="admin-p">by <b>{{$product['product_book_author']}}</b> (Author) </a></br>
               | 
               <p class="rating-pr">
                  <span>{{ number_format($averageRating, 1) }} </span> 
                  <span>
                  @for ($i = 1; $i <= 5; $i++)
                  @if ($i <= floor($averageRating))
                  <i class="fas fa-star text-warning"></i>
                  @elseif ($i - $averageRating <= 0.5)
                  <i class="fas fa-star-half-alt text-warning"></i>
                  @else
                  <i class="far fa-star text-warning"></i>
                  @endif
                  @endfor
                  </span> 
                  <span>({{ $totalReviews }})</span>
               </p>
            </div>
            <div class="pr-detail-d">
               <h3 class="heading-p">
                  {{ ($product['product_available'] ?? 0) > 0 ? "Available" : "Out Of Stock" }}
               </h3>
               <p class="admin-p">
                  Ships within <b>{{ $product['ships_within'] }}</b>
               </p>
               @if(Auth::check() && ($product['product_available'] ?? 0) <= 0)
               <a href="javascript:void(0)" onclick="notifyMe({{ $product['product_id'] }})" class="shop-now">
               <i class="bi bi-bell-fill"></i> Notify Me
               </a>
               @endif
            </div>
            <div class="order-des">
               @php
               $desc = strip_tags($product['title_description']);
               $words = explode(' ', $desc);
               @endphp
               <p>
                  {!! implode(' ', array_slice($words, 0, 50)) !!}
                  @if(count($words) > 50)
                  ... <a href="javascript:void(0)" id="readMoreBtn" style="color:blue">Read More</a>
                  @endif
               </p>
            </div>
            <style>
               .order-sift{max-width:1100px;margin:0 auto;background:#fff;padding:16px;border-radius:10px;
                  /* box-shadow:0 6px 20px rgba(20,20,40,0.06) */
               }
               .order-siftt{overflow:hidden;position:relative}
               .slider-track{display:flex;transition:transform 400ms ease}
               .order-p{flex:0 0 auto;padding:12px;text-align:center}
               .order-p img{max-width:100%;height:60px;object-fit:contain;margin-bottom:8px}
               .order-p p{margin:6px 0 0;font-size:13px;color:#333}
               .order-p a{text-decoration:none;color:#be2e00;font-weight:600}
               .slider-arrows{display:flex;gap:8px;    justify-content: space-between;margin-top:10px}
               /* .btn{border:0;padding:8px 12px;border-radius:6px;cursor:pointer;background:#67a099;color:#fff} */
               .slider-arrows button{
               background:none;
               border:none;
               position:absolute;
               box-shadow:none!important;
               }
               #prevBtnpr{
               left:0px;
               top: 35%;
               }
               #nextBtnnpr{
               right:0px;
               top: 35%;
               }
               .view-all-pr{
               border: 1px solid #E65425;
               color: #E65425;
               padding: 5px 10px;
               float: right;
               }
               .btn:disabled{opacity:.5;cursor:default}
            </style>
            <div class="order-sift order-siftt border-0">
               <div class="tracker">
  <div class="slider-track" id="sliderTrack">
                  <div class="order-p">
                     <p>ISBN-10</p>
                     <img src="http://popconcult.techsaga.live/frontend/assets/images/prlicon1.png" alt="">
                     <a href="">{{$product['product_isbn_10']}} </a>
                  </div>
                  <div class="order-p">
                     <p>ISBN-13</p>
                     <img src="http://popconcult.techsaga.live/frontend/assets/images/prlicon2.png" alt="">
                     <a href="">{{$product['product_isbn_13']}}</a>
                  </div>
                  <div class="order-p">
                     <p>Page Number</p>
                     <img src="http://popconcult.techsaga.live/frontend/assets/images/prlicon3.png" alt="">
                     <a href="">{{$product['product_page_count']}}</a>
                  </div>
                  <div class="order-p">
                     <p>Language</p>
                     <img src="http://popconcult.techsaga.live/frontend/assets/images/prlicon4.png" alt="">
                     <a href="">{{$product['product_language']}}</a>
                  </div>
                  <div class="order-p">
                     <p>Imprint</p>
                     <img src="http://popconcult.techsaga.live/frontend/assets/images/prlicon7.png" alt="">
                   
                  </div>
                  <div class="order-p">
                     <p>Width (gr)</p>
                     <img src="http://popconcult.techsaga.live/frontend/assets/images/prlicon5.png" alt="">
                     <a href="">{{$product['product_width']}}</a>
                  </div>
                  {{-- 
                  <div class="order-p">
                     <p>Dimention(mm)</p>
                     <img src="http://popconcult.techsaga.live/frontend/assets/images/prlicon6.png" alt="">
                     <a href="">{{$product['product_isbn_10']}}</a>
                  </div>
                  --}}
                  <div class="order-p">
                     <a href="#prr-detail" class='view-all-pr'>View All</a>
                  </div>
               </div>
               <div class="slider-arrows">
                  <button class="btn" id="prevBtnpr"><i class="bi bi-chevron-left"></i></button>
                  <button class="btn" id="nextBtnnpr"><i class="bi bi-chevron-right"></i></button>
               </div>
               </div>
             
             
            </div>
            {{-- <a href="#prr-detail" class="view-all-pr">View All</a>  --}}
         </div>
         <div class="col-md-3">
            <div class="payy-rs">
               <div class="price-pr">
                  @if(!empty($product['total_discount_price']))
                  <p class="price-pr1"><span>{{$product['product_discount_price']}}% OFF</span> </p>
                  <p class="mrp-pr">M.R.P. <small style='text-decoration: line-through;'>₹{{ number_format($product['product_price']),2 }}</small> <br>
                  <span>  ₹{{ number_format($product['total_discount_price']), 2 }}</span></p>
                  @else
                  <p class="mrp-pr">M.R.P. <span> ₹{{ number_format($product['total_discount_price']), 2 }}</span></p>
                  @endif
                  <p class="inclusive">Inclusive of all taxes</p>
                  <p class="delivery"><i class="bi bi-truck"></i> FREE delivery <b>{{ $deliveryEstimate['estimated_date'] }}.</b></p>
                  @if(Auth::check())
                  <p class="location-pr"><i class="fa-solid fa-location-dot"></i> Deliver to {{ $deliveryEstimate['user_name'] }} {{ $deliveryEstimate['city'] }} {{ $deliveryEstimate['pincode'] }}</p>
                  @else
                  <p class="location-pr"><i class="fa-solid fa-location-dot"></i> to see delivery info</p>
                  @endif
                  <div class="de-pr-main">
                     <p class="de-pr"><span>Delivered by</span> <span>popconcult</span></p>
                     <p class="de-pr"><span>Sold by</span> <span class="de-m">{{$product['seller_name']}}</span></p>
                     <p class="de-pr"><span>Payment</span> <span class="de-m">Secure transaction</span></p>
                  </div>
               </div>
               @if($product['product_stock_quantity'] > 0)
               @if(Auth::check())
               <div class="product-links-pr mt-3 ">
                  <a class="add-to-cart" href="javascript:void(0)" onclick="addToCart({{ $product['product_id'] }})">
                  <i class="bi bi-cart-check-fill"></i> Add to Cart
                  </a>
                  <a class="buy-now" href="javascript:void(0)" onclick="buyNow({{ $product['product_id'] }})">
                  <i class="bi bi-bag-fill"></i> Buy Now
                  </a>
                  <a class="add-to-wish mt-3" href="javascript:void(0)" onclick="addToWishlist({{ $product['product_id'] }},this)">
                    <i class="bi bi-heart-fill {{ in_array($product['product_id'], $wishlistProductIds) ? 'cust-dange' : '' }}" title="Add to Wishlist">Add to Wishlist</i>
                 
                  </a>
               </div>
               @else
               <div class="product-links-pr">
                  <a class="add-to-cart" href="javascript:void(0)" onclick="showLoginPopup()">
                  <i class="bi bi-cart-check-fill"></i> Add to Cart
                  </a>
                  <a class="buy-now" href="javascript:void(0)" onclick="showLoginPopup()">
                  <i class="bi bi-bag-fill"></i> Buy Now
                  </a>
                  <a class="add-to-wish mt-3" href="javascript:void(0)" onclick="showLoginPopup()">
                  <i class="bi bi-heart-fill"></i> Add to Wishlist
                  </a>
               </div>
               @endif
               @else
               <div class="product-links-pr">
                  <a class="add-to-cart disabled" aria-disabled="true">
                  <i class="bi bi-cart-check-fill"></i> Out of Stock
                  </a>
                  @if(Auth::check())
                  <a class="buy-now" href="javascript:void(0)" onclick="notifyMe({{ $product['product_id'] }})">
                  <i class="bi bi-bag-fill"></i> Notify Me
                  </a>
                  @endif
               </div>
               @endif
            </div>
         </div>
      </div>
      <div class="row row-desc-pr">
         <div class="col-12" id="fullDescription">
            <h5>Product description</h5>
            <p>{!! $product['title_description'] !!}</p>
            <div id="admin">
               <h5>About the Author</h5>
               <p><b>{{$product['product_book_author']}}</b> {!! $product['author_details'] !!}</p>
            </div>
         </div>
      </div>
   </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 Sellers</h1>
                 <a href="{{route('products.load',['type'=>'bestseller'])}}" class="view-btn">View All</a>
            </div>
            <div class="row position-relative">
               <!-- Swiper -->
               <div class="swiper myProductSwiper swiper-initialized swiper-horizontal">
                  <div class="swiper-wrapper" id="swiper-wrapper-1f0f8fea1cc5a5a1" aria-live="polite"
                     style="">
                     @if(count($bestSellers) > 0)
                     @foreach ($bestSellers 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="https://www.bookswagon.com/productimages/images200/717/9780812976717.jpg" alt="">
                                    <!-- <img src="{{($pro['product_image'])}}" alt="{{($pro['product_name'])}}"> -->
                                 </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>{{ $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>
                                 </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">
                                 <div class="curreny-or">
                                    @if(!empty($pro['total_discount_price']))
                                    <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>
                                    @else
                                    <span class="current-price text-dark fw-bold">₹{{ number_format($pro['product_price']), 2 }}</span>
                                    @endif
                                 </div>
                                 @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>
                  <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
               </div>
               <!-- Swiper Navigation Buttons OUTSIDE -->
               <div class="swiper-button-prev trending-prev custom-prev" tabindex="0" role="button" aria-label="Previous slide"
                  aria-controls="swiper-wrapper-1f0f8fea1cc5a5a1">
               </div>
               <div class="swiper-button-next trending-next custom-next" tabindex="0" role="button" aria-label="Next slide"
                  aria-controls="swiper-wrapper-1f0f8fea1cc5a5a1">
               </div>
            </div>
         </div>
      </div>
   </section>
</section>
<section class='product-detail-section'>
   <div class="container-fluid">
   <div class="row row-pr-ddetail" id="prr-detail">
      <div class="col-md-12">
         <h5>Product Details</h5>
         <div class="pr-d">
            <div class="pr-dd">
               <p><b>ISBN-13: </b>{{ $product['product_isbn_13'] }}</p>
            </div>
            <div class="pr-dd">
               <p><b>ISBN-10: </b>{{ $product['product_isbn_10'] }}</p>
            </div>
            <div class="pr-dd">
               <p><b>Publisher: </b>{{$product['product_publisher_name']}}</p>
            </div>
            <div class="pr-dd">
               <p><b>Weight: </b>{{$product['weight']}}</p>
            </div>
            <div class="pr-dd">
               <p><b>Publisher Date: </b>{{$product['publication_date']}}</p>
            </div>
            <div class="pr-dd">
               <p><b>Binding: </b>{{$product['product_format']}}</p>
            </div>
            {{-- 
            <div class="pr-dd">
               <p><b>Depth: </b>{{$product['product_width']}}</p>
            </div>
            --}}
            <div class="pr-dd">
               <p><b>Language: </b>{{$product['product_language']}}</p>
            </div>
            <div class="pr-dd">
               <p><b>Height: </b>{{$product['product_height']}}</p>
            </div>
            <div class="pr-dd">
               <p><b>No of Pages: </b>{{$product['product_page_count']}}</p>
            </div>
           
        
          
       
            <div class="pr-dd">
               <p><b>Width: </b>{{$product['product_width']}}</p>
            </div>
         </div>
      </div>
   </div>
   <!-- <div class="row row-pr-ddetail" id="">
      <div class="col-md-12">
         <h5>Related Categories</h5>
        
         <div>
            {{-- <ul class="list-unstyled blacklistreview">
               <li><a href="">Fiction</a> <a href=""><i class="bi bi-chevron-right"></i> Graphic novels</a></li>
               <li><a href="">Fiction</a> <a href=" "><i class="bi bi-chevron-right"></i> Graphic novels</a> <a href=""><i class="bi bi-chevron-right"></i> Graphic novels: manga</a></li>
               <li><a href="">Fiction</a> <a href=" "><i class="bi bi-chevron-right"></i> Graphic novels</a> <a href=""><i class="bi bi-chevron-right"></i> Graphic novels: literary memoirs</a></li>
            </ul> --}}
           
      
      
         </div>
      </div>
      </div>
      </div> -->
</section>
<section class='related-pr'>
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-12 ">
            <div class="search-item d-flex justify-content-between flex-wrap gap-3">
               <h1 class="card-title">Related Product</h1>
                 <a href="{{route('products.load',['type'=>$product['product_id']])}}" class="view-btn">View All</a>
            </div>
            <div class="row position-relative">
               <div class="swiper newarrivals">
                  <div class="swiper-wrapper">
                     @if(count($relatedProducts ) > 0)
                     @foreach ($relatedProducts  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="https://www.bookswagon.com/productimages/mainimages/345/9781416903345.jpg" alt="">
                                    <!-- <img src="{{($pro['product_image'])}}" alt="{{($pro['product_name'])}}"> -->
                                 </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>{{ $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>
                                 </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">
                                 <div class="curreny-or">
                                    @if(!empty($pro['total_discount_price']))
                                    <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>
                                    @else
                                    <span class="current-price text-dark fw-bold">₹{{ number_format($pro['product_price']), 2 }}</span>
                                    @endif
                                 </div>
                                 @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>
               <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>
   </div>
</section>
<section>
   <div class="container-fluid">
      <div class="row row-pr-ddetail" id="prr-detail">
         <div class="col-md-12">
            {{-- Review Summary --}}
            <h5>Customer Reviews <span>({{ $totalReviews }})</span></h5>
            <div class="reviews-summary">
               <div class="row">
                  <div class="col-lg-4">
                     <div class="overall-rating">
                        <div class="rating-number">{{ number_format($averageRating, 1) }}</div>
                        <div class="rating-stars">
                           @for ($i = 1; $i <= 5; $i++)
                           @if ($i <= floor($averageRating))
                           <i class="bi bi-star-fill"></i>
                           @elseif ($i - $averageRating <= 0.5)
                           <i class="bi bi-star-half"></i>
                           @else
                           <i class="bi bi-star"></i>
                           @endif
                           @endfor
                        </div>
                        <div class="rating-count">Based on {{ $totalReviews }} reviews</div>
                     </div>
                  </div>
                  <div class="col-lg-8">
                     <div class="rating-breakdown">
                        @for ($i = 5; $i >= 1; $i--)
                        @php
                        $count = $starCounts[$i] ?? 0;
                        $percentage = $totalReviews ? ($count / $totalReviews) * 100 : 0;
                        @endphp
                        <div class="rating-bar">
                           <div class="rating-label">{{ $i }} star{{ $i > 1 ? 's' : '' }}</div>
                           <div class="progress">
                              <div class="progress-bar" role="progressbar" 
                                 style="width: {{ $percentage }}%;" 
                                 aria-valuenow="{{ $percentage }}" aria-valuemin="0" aria-valuemax="100">
                              </div>
                           </div>
                           <div class="rating-count">{{ $count }}</div>
                        </div>
                        @endfor
                     </div>
                  </div>
               </div>
            </div>
            {{-- Review List --}}
            <div class="reviews-list mt-4">
               @forelse($reviews as $review)
               <div class="review-item mb-4">
                  <div class="review-header d-flex justify-content-between">
                     <div class="reviewer-info d-flex">
                        <img src="{{ asset('/' . ($review->user->user_profile ?? 'profile.png')) }}" 
                           alt="Reviewer" class="reviewer-avatar">
                        <div class="ms-2">
                           <h5 class="reviewer-name">{{ ucwords($review->name) ?? $review->user->name }}</h5>
                           <div class="review-date">{{formatCustomDate($review->created_at) }}</div>
                        </div>
                     </div>
                     <div class="review-rating">
                        @for ($i = 1; $i <= 5; $i++)
                        <i class="bi {{ $i <= $review->rating ? 'bi-star-fill' : 'bi-star' }}"></i>
                        @endfor
                     </div>
                  </div>
                  <h5 class="review-title">{{ $review->title }}</h5>
                  <div class="review-content">
                     <p>{!! $review->review !!}</p>
                  </div>
               </div>
               @empty
               <p>No reviews yet.</p>
               @endforelse
            </div>
            {{-- Review Form --}}
            <div class="review-form-container mt-5">
               <h4>Write a Review</h4>
               <form class="review-form dynamic-form" id="ratingErrorSub" action="{{ route('review.store') }}" method="post">
                  @csrf
                  <input type="hidden" name="product_id" value="{{ $product['product_id'] }}">
                  <div class="rating-select mb-4">
                     <label class="form-label">Your Rating</label>
                     <div class="star-rating">
                    
                           @foreach(range(5, 1) as $star)
                              <input type="radio" id="star{{ $star }}" name="rating" value="{{ $star }}"
                                       oninvalid="this.setCustomValidity('Please select a rating')"
                                       oninput="this.setCustomValidity('')">
                              <label for="star{{ $star }}" title="{{ $star }} star{{ $star > 1 ? 's' : '' }}">
                                    <i class="bi bi-star-fill"></i>
                              </label>
                           @endforeach
                        </div>
                        <span id="ratingErrorDisp" style="color:red;"></span>
                  </div>
                  <div class="row g-3 mb-3">
                     <div class="col-md-6">
                        <label for="review-name" class="form-label">Your Name</label>
                        <input type="text" name="name" value="" class="form-control" id="review-name" placeholder="Your Name">
                     </div>
                     <div class="col-md-6">
                        <label for="review-email" class="form-label">Your Email</label>
                        <input type="email" name="email" value="{{ Auth::check() ? ucwords(Auth::user()->email) : '' }}"  class="form-control" id="review-email" placeholder="Your Email" readonly>
                     </div>
                  </div>
                  <div class="mb-3">
                     <label for="review-title" class="form-label">Review Title</label>
                     <input type="text" name="title" class="form-control" id="review-title" placeholder="Review Title">
                  </div>
                  <div class="mb-4">
                     <label for="review-content" class="form-label">Your Review</label>
                     <textarea class="form-control" name="review" id="review-content" rows="4"></textarea>
                  </div>
                  <div class="text-center">
                     @if (Auth::check())
                     <button type="submit" class="btn btn-primary">Submit Review</button>
                     @else
                     <button type="button" class="btn btn-primary" onclick="showLoginPopup()">Submit Review</button>
                     @endif
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</section>
<script src='https://awik.io/demo/webshop-zoom/Drift.min.js'></script>
<script>


   //read more
   document.getElementById('readMoreBtn')?.addEventListener('click', function() {
       document.getElementById('fullDescription').style.display = 'block';
       document.getElementById('fullDescription').scrollIntoView({ behavior: 'smooth' });
   });
   
   
   
   
   
   
   
   
      new Drift(document.querySelector('#mainImage'), {
      paneContainer: document.querySelector('.details'),
      inlinePane: 769,
      inlineOffsetY: -85,
      containInline: true,
      hoverBoundingBox: true
      }); 
      
      
         document.addEventListener("DOMContentLoaded", function() {
          const mainImage = document.getElementById("mainImage");
          const thumbnails = document.querySelectorAll(".thumb-img");
          const thumbWrapper = document.getElementById("thumbWrapper");
          const topBtn = document.getElementById("topBtn");
          const bottomBtn = document.getElementById("bottomBtn");
      
          let scrollIndex = 0;
          const itemHeight = 130; // thumbnail approx height (img + margin)
          const containerHeight = 420;
      
          function updateButtons() {
            const totalItems = thumbWrapper.children.length;
            const visibleItems = Math.floor(containerHeight / itemHeight);
            topBtn.disabled = scrollIndex === 0;
            bottomBtn.disabled = scrollIndex >= totalItems - visibleItems;
          }
      
          topBtn.addEventListener("click", () => {
            if (scrollIndex > 0) {
              scrollIndex--;
              thumbWrapper.style.transform = `translateY(-${scrollIndex * itemHeight}px)`;
              updateButtons();
            }
          });
      
          bottomBtn.addEventListener("click", () => {
            const totalItems = thumbWrapper.children.length;
            const visibleItems = Math.floor(containerHeight / itemHeight);
            if (scrollIndex < totalItems - visibleItems) {
              scrollIndex++;
              thumbWrapper.style.transform = `translateY(-${scrollIndex * itemHeight}px)`;
              updateButtons();
            }
          });
      
          updateButtons(); // initialize
      
          // Thumbnail click + hover
          thumbnails.forEach(thumb => {
      thumb.addEventListener("click", function() {
        const largeImage = this.getAttribute("data-large");
        const zoomImage = this.getAttribute("data-zoom"); // zoom wali image
      
        mainImage.src = largeImage;
        mainImage.setAttribute("data-zoom", zoomImage); // yaha update hoga
      
        thumbnails.forEach(t => t.classList.remove("active"));
        this.classList.add("active");
      });
      
      thumb.addEventListener("mouseover", function() {
        const largeImage = this.getAttribute("data-large");
        const zoomImage = this.getAttribute("data-zoom");
      
        mainImage.src = largeImage;
        mainImage.setAttribute("data-zoom", zoomImage);
      });
      });
      
        });
      
       
</script>
{{-- ======product zoom script========== --}}
<script>
   const zoomContainer = document.getElementById('zoom-container');
   const mainImage = document.getElementById('mainImage');
   const zoomResult = document.getElementById('zoom-result');
   const thumbs = document.querySelectorAll('.pr-bottom-image img.thumb');
   
   thumbs.forEach(thumb => {
       thumb.addEventListener('click', () => {
           mainImage.src = thumb.src;
           zoomResult.style.backgroundImage = `url('${thumb.src}')`;
       });
   });
   
   zoomContainer.addEventListener('mousemove', function(e) {
       zoomResult.style.display = 'block';
       const rect = mainImage.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
   
       const xPercent = (x / rect.width) * 100;
       const yPercent = (y / rect.height) * 100;
   
       zoomResult.style.backgroundImage = `url('${mainImage.src}')`;
       zoomResult.style.backgroundPosition = `${xPercent}% ${yPercent}%`;
   });
   
   zoomContainer.addEventListener('mouseleave', () => {
       zoomResult.style.display = 'none';
   });
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function(){
  var $track = $('#sliderTrack');
  var $slides = $track.children('.order-p');
  var slidesToShow = 5;
  var slideCount = $slides.length;
  var currentIndex = 0;

  // 🔹 Responsive width calculation
  function calcSizes(){
    var w = $(window).width();

    if (w < 480) slidesToShow = 2;
    else if (w < 700) slidesToShow = 4;
    else if (w < 900) slidesToShow = 4;
    else if (w < 1100) slidesToShow = 4;
    else slidesToShow = 4;

    var slideWidth = (100 / slidesToShow) + '%';
    $slides.css('width', slideWidth);

    // keep index within limit on resize
    var maxStart = Math.max(0, slideCount - slidesToShow + 1);
    if (currentIndex > maxStart) currentIndex = maxStart;

    moveTo(currentIndex);
  }

  // 🔹 Move slider to index
  function moveTo(index){
    var maxStart = Math.max(0, slideCount - slidesToShow + 1);

    if (index < 0) index = 0;
    if (index > maxStart) index = maxStart;
    currentIndex = index;

    var px = (100 / slidesToShow) * -currentIndex;
    $track.css('transform', 'translateX(' + px + '%)');

    $('#prevBtnpr').prop('disabled', currentIndex === 0);
    $('#nextBtnnpr').prop('disabled', currentIndex === maxStart);
  }

  // 🔹 Button events
  $('#nextBtnnpr').on('click', function(){ moveTo(currentIndex + 1); });
  $('#prevBtnpr').on('click', function(){ moveTo(currentIndex - 1); });

  // 🔹 Window resize responsiveness
  $(window).on('resize', calcSizes);
  calcSizes(); // initial setup
});
</script>
</script>
@endsection