@include('layouts.header')

<style>
  .swatch-color.disabled {
    opacity: 0.3;
    pointer-events: none;
    border: 1px dashed #ccc;
  }
  .swatch-color.active {
      border: 2px solid #000;
  }
  .swat {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.875rem;
    border: 1px solid #e4e4e4;
    padding: 0 0.8125rem;
}
  .swat.active {
  border: 2px solid black;
  font-weight: bold;
}

</style>

  <main>
    <div class="mb-md-1 pb-md-3"></div>
    <section class="product-single container product-single__type-9">
      <div class="row">
        <div class="col-lg-7 d-flex">
          

<div class="large-5 column order-2">
  <div class="xzoom-container">
    <img class="xzoom" id="xzoom-default" src="{{ asset('uploads/products/'  . $product_detail->featured_image ?? '') }}" xoriginal="{{ asset('uploads/products/'  . $product_detail->featured_image ?? '') }}" />
  </div>
</div>
<div class="xzoom-thumbs d-flex flex-column order-1">
  <a href="{{ asset('uploads/products/' . $product_detail->featured_image ?? '') }}">
    <img class="xzoom-gallery" width="80" src="{{ asset('uploads/products/' . $product_detail->featured_image ?? '') }}" xpreview="{{ asset('uploads/products/' . $product_detail->featured_image ?? '') }}">
  </a>
  @if(isset($product_detail->bulk_images) && !empty($product_detail->bulk_images))
  @foreach(json_decode($product_detail->bulk_images) as $images)
  <a href="{{ asset('uploads/products/' . $images ?? '') }}">
    <img class="xzoom-gallery" width="80" src="{{ asset('uploads/products/' . $images ?? '') }}" xpreview="{{ asset('uploads/products/' . $images ?? '') }}">
  </a>
  @endforeach
  @endif
  <!-- <a href="images/products/product_0-1.jpg">
    <img class="xzoom-gallery" width="80" src="{{ asset('assets/images/products/product_0-1.jpg') }}" xpreview="images/products/product_0-1.jpg">
  </a>
  <a href="images/products/product_0-2.jpg">
    <img class="xzoom-gallery" width="80" src="{{ asset('assets/images/products/product_0-2.jpg') }}" xpreview="images/products/product_0-2.jpg">
  </a>
  <a href="images/products/product_0-3.jpg">
    <img class="xzoom-gallery" width="80" src="{{ asset('assets/images/products/product_0-3.jpg') }}" xpreview="images/products/product_0-3.jpg">
  </a> -->
</div>
  </div>
        <div class="col-lg-5">
          <div class="d-flex justify-content-between mb-4 pb-md-2">
            <div class="breadcrumb mb-0 d-none d-md-block flex-grow-1">
              <a href="#" class="menu-link menu-link_us-s text-uppercase fw-medium">Home</a>
              <span class="breadcrumb-separator menu-link fw-medium ps-1 pe-1">/</span>
              <a href="#" class="menu-link menu-link_us-s text-uppercase fw-medium">{{ $category ?? '' }}</a>
            </div><!-- /.breadcrumb -->
    
           
          </div>
          <h1 id="product-name" class="product-single__name">{{ $product_detail->name ?? '' }}</h1>
          <div class="product-single__rating">
            <div class="reviews-group d-flex">
              <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
              <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
              <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
              <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
              <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
            </div>
            <span class="reviews-note text-lowercase text-secondary ms-1">8k+ reviews</span>
          </div>
          <div class="product-single__price" id="product-price">
            <!-- <span class="current-price">Rs. 449</span> -->
            @if(isset($product_detail->selling_price) && $product_detail->selling_price != 0)
            <span class="money price price-old">Rs. {{ $product_detail->mrp ?? ''}}</span>
             <span class="money price pr-color">Rs. {{ $product_detail->selling_price ?? ''}}</span>
            @else
            <span class="money price">Rs. {{ $product_detail->mrp ?? ''}}</span>
            @endif
          </div>
          <div class="product-single__short-desc">
            <p>Phasellus sed volutpat orci. Fusce eget lore mauris vehicula elementum gravida nec dui. Aenean aliquam varius ipsum, non ultricies tellus sodales eu. Donec dignissim viverra nunc, ut aliquet magna posuere eget.</p>
          </div>
          <!-- <form name="addtocart-form" method="post"> -->
            <div class="product-single__swatches">
              
              <div class="product-swatch text-swatches">
                <label>Sizes</label>
                <div class="swatch-list"> 
                  
                  @foreach($sizeProducts as $size)
                  @php
                      $selectedSize = request()->get('size');
                  @endphp
                   
                    <label class="swat js-swatch-size {{ strtolower($selectedSize) === strtolower($size->size) ? 'active' : '' }}" data-size="{{ $size->size }}">{{ strtoupper($size->size) }}</label>
                  @endforeach
                  
                                
                </div>
                <a href="#" class="sizeguide-link" data-bs-toggle="modal" data-bs-target="#sizeGuide">Size Guide</a>
              </div>
              <div class="product-swatch color-swatches">
                <label>Color</label>
                <div class="swatch-list">
                  <div class="swatch-list">
                  @foreach($colorProducts as $product)
                  @php
                    $colorCode = strtolower($product->color);
                    $selectedColor = strtolower(request()->get('color'));
                  @endphp
                        <input type="checkbox" class="js-swatch-color"
                          data-product-id="{{ $product->product_id }}"
                          data-color="{{ $colorCode }}"
                          value="{{ $colorCode }}"
                          {{ $colorCode === $selectedColor ? 'checked' : '' }}
                          title="{{ ucfirst($product->color) }}">
                        <label
                          class="swatch swatch-color js-swatch-color"
                          data-product-id="{{ $product->product_id }}"
                          data-color="{{ $colorCode }}"
                          title="{{ ucfirst($product->color) }}"
                          style="background-color: {{ $product->color }};">
                        </label>
                  @endforeach
                  </div>

                </div>
              </div>
            </div>
          
            <div class="product-single__addtocart">
              <!--<div class="qty-control position-relative">-->
              <!--  <input type="number" name="quantity" value="1" min="1" class="qty-control__number text-center">-->
              <!--  <div class="qty-control__reduce">-</div>-->
              <!--  <div class="qty-control__increase">+</div>-->
              <!--</div>-->
              @if(isset($product_detail->stock) && $product_detail->stock != 0)
              <a href="#" class="btn btn-light btn-light-color mt-3 mb-3 d-block">Buy Now</a>
              <a href="{{ route('add.cart', ['product_id'=>$product_detail->id]) }}" class="btn btn-primary btn-addtocart" data-aside="cartDrawer">Add to Cart</a>
              @else
              <div style="background-color: #fceaea; padding: 12px 16px; border-radius: 6px; color: #d8000c; font-weight: 500;">
                <p style="margin: 0;">Oops! This product is out of stock right now. Please check back soon.</p>
              </div>
              @endif
              <!-- <button type="submit" class="btn btn-primary btn-addtocart js-open-aside" data-aside="cartDrawer">Add to Cart</button> -->
            </div>
          <!-- </form> -->
          <div class="product-single__addtolinks">
            <a href="#" class="menu-link menu-link_us-s add-to-wishlist"><svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><use href="#icon_heart" /></svg><span>Add to Wishlist</span></a>
            <share-button class="share-button">
              <button class="menu-link menu-link_us-s to-share border-0 bg-transparent d-flex align-items-center">
                <svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg"><use href="#icon_sharing" /></svg>
                <span>Share</span>
              </button>
              <details id="Details-share-template__main" class="m-1 xl:m-1.5" hidden="">
                <summary class="btn-solid m-1 xl:m-1.5 pt-3.5 pb-3 px-5">+</summary>
                <div id="Article-share-template__main" class="share-button__fallback flex items-center absolute top-full left-0 w-full px-2 py-4 bg-container shadow-theme border-t z-10">
                  <div class="field grow mr-4">
                    <label class="field__label sr-only" for="url">Link</label>
                    <input type="text" class="field__input w-full" id="url" value="https://uomo-crystal.myshopify.com/blogs/news/go-to-wellness-tips-for-mental-health" placeholder="Link" onclick="this.select();" readonly="">
                  </div>
                  <button class="share-button__copy no-js-hidden">
                    <svg class="icon icon-clipboard inline-block mr-1" width="11" height="13" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 11 13">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M2 1a1 1 0 011-1h7a1 1 0 011 1v9a1 1 0 01-1 1V1H2zM1 2a1 1 0 00-1 1v9a1 1 0 001 1h7a1 1 0 001-1V3a1 1 0 00-1-1H1zm0 10V3h7v9H1z" fill="currentColor"></path>
                    </svg>
                    <span class="sr-only">Copy link</span>
                  </button>
                </div>
              </details>
            </share-button>
            <script src="js/details-disclosure.js" defer="defer"></script>
            <script src="js/share.js" defer="defer"></script>
          </div>
          <div class="product-single__meta-info">
            <div class="meta-item">
              <label>SKU:</label>
              <span>N/A</span>
            </div>
            <div class="meta-item">
              <label>Categories:</label>
              <span>Casual & Urban Wear, Jackets, Men</span>
            </div>
            <div class="meta-item">
              <label>Tags:</label>
              <span>biker, black, bomber, leather</span>
            </div>
          </div>
          <div id="product_single_details_accordion" class="product-single__details-accordion accordion">
            <div class="accordion-item">
              <h5 class="accordion-header" id="accordion-heading-11">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-1" aria-expanded="true" aria-controls="accordion-collapse-1">
                  Description
                  <svg class="accordion-button__icon" viewBox="0 0 14 14"><g aria-hidden="true" stroke="none" fill-rule="evenodd"><path class="svg-path-vertical" d="M14,6 L14,8 L0,8 L0,6 L14,6"></path><path class="svg-path-horizontal" d="M14,6 L14,8 L0,8 L0,6 L14,6"></path></g></svg>
                </button>
              </h5>
              <div id="accordion-collapse-1" class="accordion-collapse collapse show" aria-labelledby="accordion-heading-11" data-bs-parent="#product_single_details_accordion">
                <div class="accordion-body">
                  <div class="product-single__description">
                    <h3 class="block-title mb-4">Sed do eiusmod tempor incididunt ut labore</h3>
                    <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                    <div class="row">
                      <div class="col-lg-6">
                        <h3 class="block-title">Why choose product?</h3>
                        <ul class="list text-list">
                          <li>Creat by cotton fibric with soft and smooth</li>
                          <li>Simple, Configurable (e.g. size, color, etc.), bundled</li>
                          <li>Downloadable/Digital Products, Virtual Products</li>
                        </ul>
                      </div>
                      <div class="col-lg-6">
                        <h3 class="block-title">Sample Number List</h3>
                        <ol class="list text-list">
                          <li>Create Store-specific attrittbutes on the fly</li>
                          <li>Simple, Configurable (e.g. size, color, etc.), bundled</li>
                          <li>Downloadable/Digital Products, Virtual Products</li>
                        </ol>
                      </div>
                    </div>
                    <h3 class="block-title mb-0">Lining</h3>
                    <p class="content">100% Polyester, Main: 100% Polyester.</p>
                  </div>
                </div>
              </div>
            </div><!-- /.accordion-item -->

            <div class="accordion-item">
              <h5 class="accordion-header" id="accordion-heading-2">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-2" aria-expanded="false" aria-controls="accordion-collapse-2">
                  Additional Information
                  <svg class="accordion-button__icon" viewBox="0 0 14 14"><g aria-hidden="true" stroke="none" fill-rule="evenodd"><path class="svg-path-vertical" d="M14,6 L14,8 L0,8 L0,6 L14,6"></path><path class="svg-path-horizontal" d="M14,6 L14,8 L0,8 L0,6 L14,6"></path></g></svg>
                </button>
              </h5>
              <div id="accordion-collapse-2" class="accordion-collapse collapse" aria-labelledby="accordion-heading-2" data-bs-parent="#product_single_details_accordion">
                <div class="accordion-body">
                  <div class="product-single__addtional-info">
                    <div class="item">
                      <label class="h6">Weight</label>
                      <span>1.25 kg</span>
                    </div>
                    <div class="item">
                      <label class="h6">Dimensions</label>
                      <span>90 x 60 x 90 cm</span>
                    </div>
                    <div class="item">
                      <label class="h6">Size</label>
                      <span>XS, S, M, L, XL</span>
                    </div>
                    <div class="item">
                      <label class="h6">Color</label>
                      <span>Black, Orange, White</span>
                    </div>
                    <div class="item">
                      <label class="h6">Storage</label>
                      <span>Relaxed fit shirt-style dress with a rugged</span>
                    </div>
                  </div>
                </div>
              </div>
            </div><!-- /.accordion-item -->

            <div class="accordion-item">
              <h5 class="accordion-header" id="accordion-heading-3">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-3" aria-expanded="false" aria-controls="accordion-collapse-3">
                  Reviews (3)
                  <svg class="accordion-button__icon" viewBox="0 0 14 14"><g aria-hidden="true" stroke="none" fill-rule="evenodd"><path class="svg-path-vertical" d="M14,6 L14,8 L0,8 L0,6 L14,6"></path><path class="svg-path-horizontal" d="M14,6 L14,8 L0,8 L0,6 L14,6"></path></g></svg>
                </button>
              </h5>
              <div id="accordion-collapse-3" class="accordion-collapse collapse" aria-labelledby="accordion-heading-3" data-bs-parent="#product_single_details_accordion">
                <div class="accordion-body">
                  <h2 class="product-single__reviews-title">Reviews</h2>
                  <div class="product-single__reviews-list">
                    <div class="product-single__reviews-item">
                      <div class="customer-avatar">
                        <img loading="lazy" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
                      </div>
                      <div class="customer-review">
                        <div class="customer-name">
                          <h6>Janice Miller</h6>
                          <div class="reviews-group d-flex">
                            <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
                            <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
                            <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
                            <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
                            <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
                          </div>
                        </div>
                        <div class="review-date">April 06, 2023</div>
                        <div class="review-text">
                          <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est…</p>
                        </div>
                      </div>
                    </div>
                    <div class="product-single__reviews-item">
                      <div class="customer-avatar">
                        <img loading="lazy" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
                      </div>
                      <div class="customer-review">
                        <div class="customer-name">
                          <h6>Benjam Porter</h6>
                          <div class="reviews-group d-flex">
                            <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
                            <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
                            <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
                            <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
                            <svg class="review-star" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><use href="#icon_star" /></svg>
                          </div>
                        </div>
                        <div class="review-date">April 06, 2023</div>
                        <div class="review-text">
                          <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est…</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="product-single__review-form">
                    <form name="customer-review-form">
                      <h5>Be the first to review “Message Cotton T-Shirt”</h5>
                      <p>Your email address will not be published. Required fields are marked *</p>
                      <div class="select-star-rating">
                        <label>Your rating *</label>
                        <span class="star-rating">
                          <svg class="star-rating__star-icon" width="12" height="12" fill="#ccc" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.1429 5.04687C11.1429 4.84598 10.9286 4.76562 10.7679 4.73884L7.40625 4.25L5.89955 1.20312C5.83929 1.07589 5.72545 0.928571 5.57143 0.928571C5.41741 0.928571 5.30357 1.07589 5.2433 1.20312L3.73661 4.25L0.375 4.73884C0.207589 4.76562 0 4.84598 0 5.04687C0 5.16741 0.0870536 5.28125 0.167411 5.3683L2.60491 7.73884L2.02902 11.0871C2.02232 11.1339 2.01563 11.1741 2.01563 11.221C2.01563 11.3951 2.10268 11.5558 2.29688 11.5558C2.39063 11.5558 2.47768 11.5223 2.56473 11.4754L5.57143 9.89509L8.57813 11.4754C8.65848 11.5223 8.75223 11.5558 8.84598 11.5558C9.04018 11.5558 9.12054 11.3951 9.12054 11.221C9.12054 11.1741 9.12054 11.1339 9.11384 11.0871L8.53795 7.73884L10.9688 5.3683C11.0558 5.28125 11.1429 5.16741 11.1429 5.04687Z"/>
                          </svg>
                          <svg class="star-rating__star-icon" width="12" height="12" fill="#ccc" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.1429 5.04687C11.1429 4.84598 10.9286 4.76562 10.7679 4.73884L7.40625 4.25L5.89955 1.20312C5.83929 1.07589 5.72545 0.928571 5.57143 0.928571C5.41741 0.928571 5.30357 1.07589 5.2433 1.20312L3.73661 4.25L0.375 4.73884C0.207589 4.76562 0 4.84598 0 5.04687C0 5.16741 0.0870536 5.28125 0.167411 5.3683L2.60491 7.73884L2.02902 11.0871C2.02232 11.1339 2.01563 11.1741 2.01563 11.221C2.01563 11.3951 2.10268 11.5558 2.29688 11.5558C2.39063 11.5558 2.47768 11.5223 2.56473 11.4754L5.57143 9.89509L8.57813 11.4754C8.65848 11.5223 8.75223 11.5558 8.84598 11.5558C9.04018 11.5558 9.12054 11.3951 9.12054 11.221C9.12054 11.1741 9.12054 11.1339 9.11384 11.0871L8.53795 7.73884L10.9688 5.3683C11.0558 5.28125 11.1429 5.16741 11.1429 5.04687Z"/>
                          </svg>
                          <svg class="star-rating__star-icon" width="12" height="12" fill="#ccc" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.1429 5.04687C11.1429 4.84598 10.9286 4.76562 10.7679 4.73884L7.40625 4.25L5.89955 1.20312C5.83929 1.07589 5.72545 0.928571 5.57143 0.928571C5.41741 0.928571 5.30357 1.07589 5.2433 1.20312L3.73661 4.25L0.375 4.73884C0.207589 4.76562 0 4.84598 0 5.04687C0 5.16741 0.0870536 5.28125 0.167411 5.3683L2.60491 7.73884L2.02902 11.0871C2.02232 11.1339 2.01563 11.1741 2.01563 11.221C2.01563 11.3951 2.10268 11.5558 2.29688 11.5558C2.39063 11.5558 2.47768 11.5223 2.56473 11.4754L5.57143 9.89509L8.57813 11.4754C8.65848 11.5223 8.75223 11.5558 8.84598 11.5558C9.04018 11.5558 9.12054 11.3951 9.12054 11.221C9.12054 11.1741 9.12054 11.1339 9.11384 11.0871L8.53795 7.73884L10.9688 5.3683C11.0558 5.28125 11.1429 5.16741 11.1429 5.04687Z"/>
                          </svg>
                          <svg class="star-rating__star-icon" width="12" height="12" fill="#ccc" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.1429 5.04687C11.1429 4.84598 10.9286 4.76562 10.7679 4.73884L7.40625 4.25L5.89955 1.20312C5.83929 1.07589 5.72545 0.928571 5.57143 0.928571C5.41741 0.928571 5.30357 1.07589 5.2433 1.20312L3.73661 4.25L0.375 4.73884C0.207589 4.76562 0 4.84598 0 5.04687C0 5.16741 0.0870536 5.28125 0.167411 5.3683L2.60491 7.73884L2.02902 11.0871C2.02232 11.1339 2.01563 11.1741 2.01563 11.221C2.01563 11.3951 2.10268 11.5558 2.29688 11.5558C2.39063 11.5558 2.47768 11.5223 2.56473 11.4754L5.57143 9.89509L8.57813 11.4754C8.65848 11.5223 8.75223 11.5558 8.84598 11.5558C9.04018 11.5558 9.12054 11.3951 9.12054 11.221C9.12054 11.1741 9.12054 11.1339 9.11384 11.0871L8.53795 7.73884L10.9688 5.3683C11.0558 5.28125 11.1429 5.16741 11.1429 5.04687Z"/>
                          </svg>
                          <svg class="star-rating__star-icon" width="12" height="12" fill="#ccc" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.1429 5.04687C11.1429 4.84598 10.9286 4.76562 10.7679 4.73884L7.40625 4.25L5.89955 1.20312C5.83929 1.07589 5.72545 0.928571 5.57143 0.928571C5.41741 0.928571 5.30357 1.07589 5.2433 1.20312L3.73661 4.25L0.375 4.73884C0.207589 4.76562 0 4.84598 0 5.04687C0 5.16741 0.0870536 5.28125 0.167411 5.3683L2.60491 7.73884L2.02902 11.0871C2.02232 11.1339 2.01563 11.1741 2.01563 11.221C2.01563 11.3951 2.10268 11.5558 2.29688 11.5558C2.39063 11.5558 2.47768 11.5223 2.56473 11.4754L5.57143 9.89509L8.57813 11.4754C8.65848 11.5223 8.75223 11.5558 8.84598 11.5558C9.04018 11.5558 9.12054 11.3951 9.12054 11.221C9.12054 11.1741 9.12054 11.1339 9.11384 11.0871L8.53795 7.73884L10.9688 5.3683C11.0558 5.28125 11.1429 5.16741 11.1429 5.04687Z"/>
                          </svg>
                        </span>
                        <input type="hidden" id="form-input-rating" value="">
                      </div>
                      <div class="mb-4">
                        <textarea id="form-input-review" class="form-control form-control_gray" placeholder="Your Review" cols="30" rows="8"></textarea>
                      </div>
                      <div class="form-label-fixed mb-4">
                        <label for="form-input-name" class="form-label">Name *</label>
                        <input id="form-input-name" class="form-control form-control-md form-control_gray">
                      </div>
                      <div class="form-label-fixed mb-4">
                        <label for="form-input-email" class="form-label">Email address *</label>
                        <input id="form-input-email" class="form-control form-control-md form-control_gray">
                      </div>
                      <div class="form-check mb-4">
                        <input class="form-check-input form-check-input_fill" type="checkbox" value="" id="remember_checkbox">
                        <label class="form-check-label" for="remember_checkbox">
                          Save my name, email, and website in this browser for the next time I comment.
                        </label>
                      </div>
                      <div class="form-action">
                        <button type="submit" class="btn btn-primary">Submit</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div><!-- /.accordion-item -->
          </div>
        </div>
      </div>
    </section>
    <section class="products-carousel container">
      <h2 class="h3 text-uppercase mb-4 pb-xl-2 mb-xl-4">Related <strong>Products</strong></h2>

      <div id="related_products" class="position-relative">
        <div class="swiper-container js-swiper-slider"
          data-settings='{
            "autoplay": false,
            "slidesPerView": 4,
            "slidesPerGroup": 4,
            "effect": "none",
            "loop": true,
            "pagination": {
              "el": "#related_products .products-pagination",
              "type": "bullets",
              "clickable": true
            },
            "navigation": {
              "nextEl": "#related_products .products-carousel__next",
              "prevEl": "#related_products .products-carousel__prev"
            },
            "breakpoints": {
              "320": {
                "slidesPerView": 2,
                "slidesPerGroup": 2,
                "spaceBetween": 14
              },
              "768": {
                "slidesPerView": 3,
                "slidesPerGroup": 3,
                "spaceBetween": 24
              },
              "992": {
                "slidesPerView": 4,
                "slidesPerGroup": 4,
                "spaceBetween": 30
              }
            }
          }'>
          <div class="swiper-wrapper">
          @if(isset($related_product) && !empty($related_product))
          @foreach($related_product as $product)
          <div class="swiper-slide product-card">
            <div class="pc__img-wrapper">
                <a href="javascript:void(0);">
                    <img loading="lazy" src="{{ asset('uploads/products/'.$product->featured_image ?? '') }}" width="330" height="400" alt="{{ $product->name }}" class="pc__img">
                    <img loading="lazy" src="{{ asset('uploads/products/'.$product->featured_image ?? '') }}" width="330" height="400" alt="{{ $product->name }}" class="pc__img pc__img-second">
                </a>
                <a href="{{ route('add.cart', ['product_id'=>$product->id]) }}" class="pc__atc btn anim_appear-bottom btn position-absolute border-0 text-uppercase fw-medium js-add-cart" data-aside="cartDrawer" title="Add To Cart">Add To Cart</a>
                <!-- <button class="pc__atc btn anim_appear-bottom btn position-absolute border-0 text-uppercase fw-medium js-add-cart js-open-aside" data-aside="cartDrawer" title="Add To Cart">Add To Cart</button> -->
            </div>

            <div class="pc__info position-relative">
                <p class="pc__category">{{ $category }}</p>
                <h6 class="pc__title">
                    <a href="javascript:void(0);">
                        {{ $product->name ?? ''}}
                    </a>
                </h6>
                <div class="product-card__price d-flex justify-content-center">
                    <!-- <span class="money price">Rs. {{ $product->mrp ?? ''}}</span> -->
                     @if(isset($product->selling_price) && $product->selling_price != 0)
                      <span class="money price price-old">Rs. {{ $product->mrp ?? ''}}</span>
                      <span class="money price pr-color">Rs. {{ $product->selling_price ?? ''}}</span>
                      @else
                      <span class="money price">Rs. {{ $product->mrp ?? ''}}</span>
                      @endif
                </div>

                <button class="pc__btn-wl position-absolute top-0 end-0 bg-transparent border-0 js-add-wishlist" title="Add To Wishlist">
                    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <use href="#icon_heart" />
                    </svg>
                </button>
            </div>
        </div>
        @endforeach 
        @endif
          </div><!-- /.swiper-wrapper -->
        </div><!-- /.swiper-container js-swiper-slider -->

        <div class="products-carousel__prev position-absolute top-50 d-flex align-items-center justify-content-center">
          <svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><use href="#icon_prev_md" /></svg>
        </div><!-- /.products-carousel__prev -->
        <div class="products-carousel__next position-absolute top-50 d-flex align-items-center justify-content-center">
          <svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><use href="#icon_next_md" /></svg>
        </div><!-- /.products-carousel__next -->

        <div class="products-pagination mt-4 mb-5 d-flex align-items-center justify-content-center"></div>
        <!-- /.products-pagination -->
      </div><!-- /.position-relative -->

    </section><!-- /.products-carousel container -->
  </main>
  <div class="mb-5 pb-xl-5"></div>
@include('layouts.footer')

<script>
  let isManualClick = true; // Flag to detect manual click

  function triggerSizeSelection(sizeValue) {
      const matchingSize = Array.from(document.querySelectorAll('.js-swatch-size')).find(el => {
          return el.dataset.size.toLowerCase() === sizeValue.toLowerCase();
      });

      if (matchingSize) {
          isManualClick = false; // Mark that this is an auto click (not manual)
          matchingSize.click();
          isManualClick = true; // Reset after
      }
  }

  document.addEventListener("DOMContentLoaded", function () {
      const sizeSwatches = document.querySelectorAll('.js-swatch-size');
      const colorSwatches = document.querySelectorAll('.js-swatch-color');

      sizeSwatches.forEach(el => {
          el.addEventListener('click', function () {
              // Remove active class from all
              sizeSwatches.forEach(s => s.classList.remove('active'));

              // Add active class to clicked one
              this.classList.add('active');

              const selectedSize = this.dataset.size;
              const slug = '{{ $slug }}';
              const subSku = '{{ request()->sub_sku }}';

              const url = new URL(window.location.href);
              url.searchParams.set("size", selectedSize);

              if (isManualClick) {
                  // ✅ Only delete color from URL if it's a manual click
                  url.searchParams.delete('color');
                  colorSwatches.forEach(swatch => {
                   swatch.checked = false;
              });
              }

              history.replaceState(null, "", url.toString());

              console.log('Selected Size:', selectedSize);

              // Fetch valid colors based on selected size
              fetch(`https://hubto.site/griffin/public/product/filter-by-size?slug=${slug}&sub_sku=${subSku}&size=${selectedSize}`)
                  .then(res => res.json())
                  .then(data => {
                      const validColors = data.colors;

                      document.querySelectorAll('.js-swatch-color').forEach(label => {
                          const color = label.dataset.color;
                          const input = label.previousElementSibling;

                          if (validColors.includes(color)) {
                              label.classList.remove('disabled');
                              label.classList.add('active');
                              if (input && input.type === 'checkbox') {
                                  input.style.display = 'inline-block';
                                 
                                }
                          } else {
                              label.classList.remove('active');
                              label.classList.add('disabled');
                              if (input && input.type === 'checkbox') {
                              input.style.display = 'none';
                              // input.checked = false; 
                            }
                          }
                      });
                  });
          });
      });

      // ✅ Automatically activate size swatch from URL on page load
      const selectedSizeFromUrl = '{{ request()->get("size") }}';
      if (selectedSizeFromUrl) {
          triggerSizeSelection(selectedSizeFromUrl);
      }
  });
</script>


  <script>
      document.addEventListener("DOMContentLoaded", function () {
          const colorSwatches = document.querySelectorAll(".js-swatch-color");

          colorSwatches.forEach(swatch => {
              swatch.addEventListener("click", function () {
                  const newProductId = this.getAttribute("data-product-id");

                  const url = new URL(window.location.href);
                  url.searchParams.set("product_id", newProductId);
                  url.searchParams.set("color", this.dataset.color);
                  // history.replaceState(null, "", url.toString());
                  window.location.href = url.toString();
              });
          });

      const selectedColor = '{{ request()->get("color") }}';
      console.log('color', selectedColor);
      
  });       
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const addToCartBtn = document.querySelector(".btn-addtocart");
    const buyNowBtn = document.querySelector(".btn-light-color");

    function hasColorSelected() {
        const url = new URL(window.location.href);
        const color = url.searchParams.get("color");
        return color && color.trim() !== "";
    }

    function showAlertIfNoColor(event) {
        if (!hasColorSelected()) {
            event.preventDefault();
            alert("Please choose a color before proceeding.");
        }
    }

    if (addToCartBtn) {
        addToCartBtn.addEventListener("click", showAlertIfNoColor);
    }

    if (buyNowBtn) {
        buyNowBtn.addEventListener("click", showAlertIfNoColor);
    }
});
</script>
