<?php echo $__env->make('layouts.header', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

<style>
  .swatch-color.disabled {
    opacity: 0.3;
    pointer-events: none;
    border: 1px dashed #ccc;
  }
  /* .js-swatch-color.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
    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="<?php echo e(asset('uploads/products/'  . $product_detail->featured_image ?? '')); ?>" xoriginal="<?php echo e(asset('uploads/products/'  . $product_detail->featured_image ?? '')); ?>" />
  </div>
</div>
<div class="xzoom-thumbs d-flex flex-column order-1">
  <a href="<?php echo e(asset('uploads/products/' . $product_detail->featured_image ?? '')); ?>">
    <img class="xzoom-gallery" width="80" src="<?php echo e(asset('uploads/products/' . $product_detail->featured_image ?? '')); ?>" xpreview="<?php echo e(asset('uploads/products/' . $product_detail->featured_image ?? '')); ?>">
  </a>
  <?php if(isset($product_detail->bulk_images) && !empty($product_detail->bulk_images)): ?>
  <?php $__currentLoopData = json_decode($product_detail->bulk_images); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $images): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
  <a href="<?php echo e(asset('uploads/products/' . $images ?? '')); ?>">
    <img class="xzoom-gallery" width="80" src="<?php echo e(asset('uploads/products/' . $images ?? '')); ?>" xpreview="<?php echo e(asset('uploads/products/' . $images ?? '')); ?>">
  </a>
  <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
  <?php endif; ?>
  <!-- <a href="images/products/product_0-1.jpg">
    <img class="xzoom-gallery" width="80" src="<?php echo e(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="<?php echo e(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="<?php echo e(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"><?php echo e($category ?? ''); ?></a>
            </div><!-- /.breadcrumb -->
    
           
          </div>
          <h1 id="product-name" class="product-single__name"><?php echo e($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> -->
            <?php if(isset($product_detail->selling_price) && $product_detail->selling_price != 0): ?>
            <span class="money price price-old">Rs. <?php echo e($product_detail->mrp ?? ''); ?></span>
             <span class="money price pr-color">Rs. <?php echo e($product_detail->selling_price ?? ''); ?></span>
            <?php else: ?>
            <span class="money price">Rs. <?php echo e($product_detail->mrp ?? ''); ?></span>
            <?php endif; ?>
          </div>
          <div class="product-single__short-desc">
            <?php if(isset($product_detail->product_description)): ?>
            <p><?php echo e($product_detail->product_description); ?></p>
            <?php endif; ?>
          </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"> 
                  
                  <?php $__currentLoopData = $sizeProducts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $size): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                  <?php
                      $selectedSize = request()->get('size');
                  ?>
                   
                    <label class="swat js-swatch-size <?php echo e(strtolower($selectedSize) === strtolower($size->size) ? 'active' : ''); ?>" data-size="<?php echo e($size->size); ?>"><?php echo e(strtoupper($size->size)); ?></label>
                  <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                  
                </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">
                  <?php $__currentLoopData = $colorProducts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                  <?php
                    $colorCode = strtolower($product->color);
                    $selectedColor = strtolower(request()->get('color'));               
                  ?>
                      <input type="checkbox" class="js-swatch-color"
                          data-product-id="<?php echo e($product->product_id); ?>"
                          data-color="<?php echo e($colorCode); ?>"
                          value="<?php echo e($colorCode); ?>"
                          <?php echo e($colorCode === $selectedColor ? 'checked' : ''); ?>

                          title="<?php echo e(ucfirst($product->color)); ?>">
                      <label
                          class="swatch swatch-color js-swatch-color"
                          data-product-id="<?php echo e($product->product_id); ?>"
                          data-color="<?php echo e($colorCode); ?>"
                          title="<?php echo e(ucfirst($product->color)); ?>"
                          style="background-color: <?php echo e($colorCode); ?>;">
                      </label>
                      <!-- <input type="checkbox" class="js-swatch-color"
                          data-product-id="<?php echo e($product->product_id); ?>"
                          data-color="<?php echo e($colorCode); ?>"
                          value="<?php echo e($colorCode); ?>"
                          <?php echo e($colorCode === $selectedColor ? 'checked' : ''); ?>

                          title="<?php echo e(ucfirst($product->color)); ?>">
                        
                      <lable class="js-swatch-color"><?php echo e($colorCode); ?></lable>   -->
                      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                  </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>-->
              <?php 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="<?php echo e(route('add.cart', ['product_id'=>$product_detail->id])); ?>" class="btn btn-primary btn-addtocart" data-aside="cartDrawer">Add to Cart</a>
              <?php else: ?>
              <div id="out-of-stock" 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>
              <?php 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="<?php echo e(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="<?php echo e(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">
          <?php if(isset($related_product) && !empty($related_product)): ?>
          <?php $__currentLoopData = $related_product; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
          <div class="swiper-slide product-card">
            <div class="pc__img-wrapper">
                <a href="javascript:void(0);">
                    <img loading="lazy" src="<?php echo e(asset('uploads/products/'.$product->featured_image ?? '')); ?>" width="330" height="400" alt="<?php echo e($product->name); ?>" class="pc__img">
                    <img loading="lazy" src="<?php echo e(asset('uploads/products/'.$product->featured_image ?? '')); ?>" width="330" height="400" alt="<?php echo e($product->name); ?>" class="pc__img pc__img-second">
                </a>
                <a href="<?php echo e(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"><?php echo e($category); ?></p>
                <h6 class="pc__title">
                    <a href="javascript:void(0);">
                        <?php echo e($product->name ?? ''); ?>

                    </a>
                </h6>
                <div class="product-card__price d-flex justify-content-center">
                    <!-- <span class="money price">Rs. <?php echo e($product->mrp ?? ''); ?></span> -->
                     <?php if(isset($product->selling_price) && $product->selling_price != 0): ?>
                      <span class="money price price-old">Rs. <?php echo e($product->mrp ?? ''); ?></span>
                      <span class="money price pr-color">Rs. <?php echo e($product->selling_price ?? ''); ?></span>
                      <?php else: ?>
                      <span class="money price">Rs. <?php echo e($product->mrp ?? ''); ?></span>
                      <?php 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>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> 
        <?php 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>
<?php echo $__env->make('layouts.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

<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 = '<?php echo e($slug); ?>';
              const subSku = '<?php echo e(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);
              const BASE_URL = "<?php echo e(env('APP_URL')); ?>";
              // Fetch valid colors based on selected size
              fetch(`${BASE_URL}/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;
                         // Get the corresponding input (assumes input is before the label in DOM)
                         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';
                                 // input.disabled = false;
                              }
                          } 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 = '<?php echo e(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 = '<?php echo e(request()->get("color")); ?>';
      console.log('color', selectedColor);
      
      // if (!selectedColor) {
      //     const firstColor = document.querySelector('.js-swatch-color');
      //     if (firstColor) {
      //         firstColor.click(); // simulate user click
      //     }
      // }
  });       
</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>
<?php /**PATH C:\xampp\htdocs\griffin\resources\views/product.blade.php ENDPATH**/ ?>