@extends('frontend.layouts.app', ['title' => 'ZAKH offers elegant and trendy ladies fashion, featuring stylish outfits, accessories, and timeless essentials for the modern woman'])

<style>
    .mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.my-mfp-zoom-in.mfp-ready {
        top: 100px !important;
        height: 0px !important;
    }

    .shop-modern.shop-wrapper {
        display: grid !important;
        height: auto !important;
        position: relative !important;
    }


    .shop-modern.grid-4col {
        grid-template-columns: repeat(4, 1fr);
        gap: 0px;
    }


    .shop-modern .grid-sizer {
        display: none;
    }


    .shop-modern .grid-item {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
    }


    @media (max-width: 1199px) {
        .shop-modern.xl-grid-3col {
            grid-template-columns: repeat(3, 1fr) !important;
        }

        .shop-modern .grid-item {
            left: auto !important;
            top: auto !important;
        }
    }


    @media (max-width: 767px) {
        .shop-modern.sm-grid-2col {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 20px;
        }


        .shop-modern .shop-buttons-wrap {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .shop-modern .shop-buttons-wrap .btn {
            padding: 8px 15px;
            font-size: 13px;
        }

        .shop-modern .shop-buttons-wrap .button-text {
            display: none;
        }

        .shop-modern .shop-buttons-wrap .icon-feather-shopping-bag::after {
            content: "Add";
            margin-left: 5px;
            font-size: 12px;
        }
    }


    @media (max-width: 575px) {
        .shop-modern.xs-grid-1col {
            grid-template-columns: 1fr !important;
            gap: 20px;
        }

        / .shop-modern .shop-hover a {
            width: 45px !important;
            height: 45px !important;
        }
    }


    .shop-modern .shop-image img {
        width: 100%;
        height: 300px;
        aspect-ratio: 1/1;
        object-fit: cover;
    }


    .shop-modern .shop-box {
        width: 100%;
        margin-bottom: 10px;
    }


    @media (max-width: 991px) {


        .shop-modern .shop-hover {
            opacity: 1 !important;
            visibility: visible !important;
        }


        .shop-modern .shop-footer .fs-19 {
            font-size: 16px !important;
        }

        .shop-modern .shop-footer .fs-16 {
            font-size: 14px !important;
        }


        .col-lg-9.ps-5 {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }
    }


    .shop-modern+.w-100.d-flex {
        margin-top: 40px;
    }

    @media (max-width: 767px) {
        .shop-modern+.w-100.d-flex {
            margin-top: 30px;
        }

          .mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-ready {
        top: 100px !important;
        height: 0px !important;
    }
    }

  
</style>
@section('content')
    <!-- start section -->
    @php
        // $isInWishlist = $wishlist->contains('product_id', $response['id']);
        $isInWishlist = false;
        $sessionWishlistData = session('wishlist') ?? [];
        if (auth()->user()) {
            $isInWishlist = $wishlist->contains('product_id', $response['id']);
        } else {
            foreach ($sessionWishlistData as $key => $value) {
                // dd($value['product_id'],$response['id']);
                if ($value['product_id'] == $response['id']) {
                    $isInWishlist = true;
                }
            }
        }
    @endphp
    <section class="top-space-margin-s bg-gradient-very-light-gray pt-20px pb-20px ps-45px pe-45px sm-ps-15px sm-pe-15px">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-12 breadcrumb breadcrumb-style-01 fs-14">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('index') }}">Home</a></li>

                        @php
                            $previousUrl = url()->previous();
                            $currentUrl = url()->current();

                            // Define route-to-label mapping
                            $routeLabels = [
                                route('checkout.index') => 'Checkout',
                                route('getCartItems') => 'Shopping Cart',
                            ];

                            // Check if previous URL matches any of our defined routes
                            $showPrevious = false;
                            $previousLabel = '';
                            $previousLink = '';

                            foreach ($routeLabels as $url => $label) {
                                if (strpos($previousUrl, $url) !== false || $previousUrl === $url) {
                                    $showPrevious = true;
                                    $previousLabel = $label;
                                    $previousLink = $url;
                                    break;
                                }
                            }

                            // Check if coming from shop/category page and preserve full URL with filters
                            $categoryPagePattern = url('categories/' . $response['category']->slug);
                            if (
                                !$showPrevious &&
                                strpos($previousUrl, $categoryPagePattern) !== false &&
                                $previousUrl !== $currentUrl
                            ) {
                                $showPrevious = true;
                                $previousLabel = $response['category']->title;
                                $previousLink = $previousUrl; // Use full previous URL to preserve query params
                            }
                        @endphp

                        @if ($showPrevious && $previousUrl !== $currentUrl)
                            <li class="breadcrumb-item"><a href="{{ $previousLink }}">{{ $previousLabel }}</a></li>
                        @else
                            {{-- Default to category page --}}
                            <li class="breadcrumb-item"><a
                                    href="{{ url('categories/' . $response['category']->slug) }}">{{ $response['category']->title }}</a>
                            </li>
                        @endif

                        <li class="breadcrumb-item active">{{ $response['name'] }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- end section -->


    <!-- start section -->
    <section class="prod-single-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 pe-50px md-pe-15px md-mb-40px">
                    <div class="row overflow-hidden position-relative">
                        <!-- Main Product Image Slider -->
                        <div
                            class="col-12 col-lg-10 position-relative order-lg-2 product-image slider_images ps-30px md-ps-15px">
                            <div class="swiper product-image-slider"
                                data-slider-options='{ "spaceBetween": 10, "loop": true, "autoplay": { "delay": 3000, "disableOnInteraction": true }, "watchOverflow": true, "navigation": { "nextEl": ".slider-product-next", "prevEl": ".slider-product-prev" }, "thumbs": { "swiper": { "el": ".product-image-thumb", "slidesPerView": "auto", "spaceBetween": 15, "direction": "vertical", "navigation": { "nextEl": ".swiper-thumb-next", "prevEl": ".swiper-thumb-prev" } } } }'
                                data-thumb-slider-md-direction="horizontal">
                                <div class="swiper-wrapper">
                                    @php
                                        if ($response['product_video']) {
                                            array_push($response['images'], ['image' => $response['product_video']]);
                                        }
                                        foreach ($response['variations'] as $variation) {
                                            $response['images'][] = [
                                                'image' => $variation['image'],
                                            ];
                                        }
                                    @endphp
                                    {{-- @dd($response['images'] ,$response ) --}}
                                    @foreach ($response['images'] as $index => $media)
                                        @php
                                            $extension = pathinfo($media['image'], PATHINFO_EXTENSION);
                                            $videoExtensions = [
                                                'mp4',
                                                'webm',
                                                'ogg',
                                                'mov',
                                                'avi',
                                                'wmv',
                                                'flv',
                                                'mkv',
                                            ];
                                            $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'];
                                            $isVideo = in_array(strtolower($extension), $videoExtensions);
                                            $isImage = in_array(strtolower($extension), $imageExtensions);
                                            $mediaSrc = asset('storage/' . $media['image']);
                                        @endphp

                                        <!-- Slider item -->
                                        <div class="swiper-slide gallery-box">
                                            @if ($isVideo)
                                                <!-- Video Slide -->
                                                <div class="video-wrapper position-relative">
                                                    <video id="main-video-{{ $index }}"
                                                        class="w-100 main-slider-video" controls autoplay="autoplay"
                                                        playsinline webkit-playsinline muted preload="metadata">
                                                        <source src="{{ $mediaSrc }}" type="video/mp4">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                </div>
                                            @elseif($isImage)
                                                <!-- Image Slide -->
                                                <a href="{{ $mediaSrc }}" data-group="lightbox-gallery"
                                                    title="Product image">
                                                    <img class="w-100" src="{{ $mediaSrc }}" alt="">
                                                </a>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <!-- Thumbnail Slider -->
                        <div class="col-12 col-lg-2 order-lg-1 position-relative single-product-thumb">
                            <div class="swiper-container product-image-thumb slider-vertical">
                                <div class="swiper-wrapper">

                                    @foreach ($response['images'] as $index => $media)
                                        @php
                                            $extension = pathinfo($media['image'], PATHINFO_EXTENSION);
                                            $videoExtensions = ['mp4', 'webm', 'ogg', 'mov'];
                                            $isVideo = in_array(strtolower($extension), $videoExtensions);
                                            $mediaSrc = asset('storage/' . $media['image']);
                                        @endphp

                                        <div class="swiper-slide thumb-slide">
                                            @if ($isVideo)
                                                <!-- Video Thumbnail -->
                                                <div class="video-thumb-wrapper position-relative">
                                                    <!-- Static thumbnail or placeholder -->
                                                    <div class="video-thumb-placeholder">
                                                        <img src="{{ asset('images/video-thumb.jpg') }}" class="w-100"
                                                            alt="Video thumbnail"
                                                            onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'%3E%3Crect fill=\'%23333\' width=\'100\' height=\'100\'/%3E%3Cpath fill=\'%23fff\' d=\'M40 30 L70 50 L40 70 Z\'/%3E%3C/svg%3E';">
                                                    </div>
                                                    <!-- Video indicator -->
                                                    <span class="video-badge">
                                                        <i class="fas fa-play"></i>
                                                    </span>
                                                </div>
                                            @else
                                                <!-- Image Thumbnail -->
                                                <img class="w-100" src="{{ $mediaSrc }}" alt="Product thumbnail">
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-6 product-info">
                    <h4 class="alt-font text-dark-gray fw-500 mb-5px">{{ $response['name'] }}</h5>

                        @php
                            $mrp = $response['variations'][0]['mrp'] ?? $response['base_mrp'];
                            $price = $response['variations'][0]['price'] ?? $response['base_price'];
                            $percentOff =
                                $mrp > 0 && $price > 0 ? number_format((($mrp - $price) / $mrp) * 100, 2, '.', '') : 0;
                        @endphp
                        <script>
                            window.variationsData = @json($response['variations'] ?? []);
                        </script>

                        <div class="product-price mb-10px">
                            <span class="text-dark-gray fs-28 xs-fs-24 fw-700 ls-minus-1px" id="product-price"><del
                                    class="text-medium-gray me-10px fw-400">
                                    ₹{{ $mrp }}</del>₹{{ number_format($price, 0, '.', ',') }}</span> <span
                                class="discount">{{ $percentOff }}% off</span>
                        </div>
                        {{-- <p>{{ $response['description'] }}
                        </p> --}}

                        @if (!empty($response['variation_attributes']))
                            @foreach ($response['variation_attributes'] as $attributeName => $attributeValues)
                                @php
                                    // Normalize attribute names
                                    $sizeVariants = ['S', 'M', 'L', 'XL', 'XXL', 'XXXL', 'Size'];
                                    $isSize = in_array($attributeName, $sizeVariants);
                                    $displayName = $isSize ? 'Size' : 'Color';
                                    $attributeType = $isSize ? 'Size' : 'Color';
                                @endphp

                                <div
                                    class="d-flex align-items-center {{ $attributeType === 'Color' ? 'mb-20px color-options' : 'mb-35px size-options' }}">
                                    <label class="text-dark-gray alt-font me-15px fw-500">{{ $attributeType }}</label>

                                    @if ($attributeType === 'Color')
                                        {{-- Color Options --}}
                                        <ul class="shop-color mb-0">
                                            @foreach ($attributeValues as $index => $attribute)
                                                @php
                                                    // Check if this color option has any stock
                                                    $hasStock = false;
                                                    if (!empty($response['variations'])) {
                                                        foreach ($response['variations'] as $variation) {
                                                            if ($variation['stock'] > 0) {
                                                                foreach ($variation['attributes'] as $attr) {
                                                                    if (
                                                                        $attr['name'] === 'Color' &&
                                                                        strtolower($attr['value']) ===
                                                                            strtolower($attribute['value'])
                                                                    ) {
                                                                        $hasStock = true;
                                                                        break 2;
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                    $stockClass = $hasStock ? '' : 'out-of-stock-variation';
                                                    $colorValue = strtolower(str_replace(' ', '', $attribute['value']));
                                                    $uniqueId = 'color-' . ($index + 1);
                                                @endphp
                                                <li>
                                                    <input class="d-none " type="radio" id="{{ $uniqueId }}"
                                                        name="color" {{ $index === 0 ? 'checked' : '' }}>
                                                    <label for="{{ $uniqueId }}">
                                                        <span {{ !$hasStock ? 'title=Out-of-Stock' : '' }}
                                                            data-attr="{{ $attributeType }}"
                                                            data-value="{{ $colorValue }}"
                                                            data-id="{{ $attribute['id'] }}"
                                                            class="attribute-btn {{ $index === 0 ? 'selected attribute_seletion' : '' }} {{ $stockClass }}"
                                                            style="background-color: {{ $colorValue }};"></span>
                                                    </label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @else
                                        {{-- Size Options --}}
                                        <ul class="shop-size mb-0">
                                            @foreach ($attributeValues as $index => $attribute)
                                                @php
                                                    // Check if this size option has any stock
                                                    $hasStock = false;
                                                    if (!empty($response['variations'])) {
                                                        foreach ($response['variations'] as $variation) {
                                                            if ($variation['stock'] > 0) {
                                                                foreach ($variation['attributes'] as $attr) {
                                                                    if (
                                                                        $attr['name'] === 'Size' &&
                                                                        strtolower($attr['value']) ===
                                                                            strtolower($attribute['value'])
                                                                    ) {
                                                                        $hasStock = true;
                                                                        break 2;
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                    $stockClass = $hasStock ? '' : 'out-of-stock-variation';
                                                    $sizeValue = strtolower(str_replace(' ', '', $attribute['value']));
                                                    $uniqueId = 'size-' . ($index + 1);
                                                @endphp
                                                <li>
                                                    <input class="d-none " type="radio" id="{{ $uniqueId }}"
                                                        name="size" {{ $index === 0 ? 'checked' : '' }}>
                                                    <label for="{{ $uniqueId }}">
                                                        <span {{ !$hasStock ? 'title=Out-of-Stock' : '' }}
                                                            data-attr="{{ $attributeType }}"
                                                            data-value="{{ $sizeValue }}"
                                                            data-id="{{ $attribute['id'] }}"
                                                            class=" attribute-btn {{ $index === 0 ? 'selected attribute_seletion' : '' }} {{ $stockClass }}">{{ strtoupper($attribute['value']) }}</span>
                                                    </label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                        <div class="feature-box-content mb-5">
                            <a href="#modal-popup2"class="text-decoration-line-bottom fw-600 text-dark-gray modal-popup">Size
                                Chart</a></span>


                            <div id="modal-popup2"
                                class=" mfp-hide  col-md-8  mx-auto bg-white text-center modal-popup-main p-20px">
                                <span class="text-dark-gray fw-600 fs-24 mb-10px d-block">Size Chart</span>
                                <div class="modal-content-area">
                                    <div class="modal-content-area-in">
                                        @if ($response['size_guide_images'])
                                            <img class="size-guides"
                                                src="{{ asset('storage/' . $response['size_guide_images']) }}"
                                                alt="">
                                        @else
                                            <img class="size-guides" src="{{ asset('storage/sizeguide-clothes-en.jpg') }}"
                                                alt="">
                                        @endif
                                    </div>
                                </div>

                            </div>

                        </div>
                        <style>

                        </style>
                        {{-- @dd($response) --}}




                        <div class="d-flex align-items-center flex-column flex-sm-row mb-20px position-relative">
                            <div class="quantity me-15px xs-mb-15px order-1">
                                <button type="button" class="qty-minus">-</button>
                                <input class="qty-text qty" type="text" id="qty" value="1"
                                    aria-label="submit" />
                                <button type="button" class="qty-plus">+</button>
                            </div>
                            <a
                                class="btn btn-cart btn-extra-large btn-switch-text btn-box-shadow btn-none-transform btn-dark-gray left-icon btn-round-edge border-0 me-15px xs-me-0 order-3 order-sm-2 add-to-cartJS">
                                <span>
                                    <span><i class="feather icon-feather-shopping-bag"></i></span>
                                    <span class="btn-double-text ls-0px " data-text="Add to cart">Add to cart</span>
                                </span>
                            </a>


                            <a
                                class="btn btn-cart btn-extra-large btn-switch-text btn-box-shadow btn-none-transform btn-dark-gray left-icon btn-round-edge border-0 me-15px xs-me-0 order-3 order-sm-2  buy_nowJS">
                                <span>
                                    <span><i class="feather icon-feather-shopping-bag"></i></span>
                                    <span class="btn-double-text ls-0px " data-text="Buy Now">Buy Now</span>
                                </span>
                            </a>
                            <a data-id="{{ $response['id'] }}" {{-- onclick="addTowishListClass(this)" --}}
                                class=" {{ $isInWishlist ? 'remove-from-wishlist liked' : 'add-to-wishlist' }} wishlist d-flex align-items-center justify-content-center border border-radius-5px border-color-extra-medium-gray order-2 order-sm-3">
                                <i class="feather icon-feather-heart icon-small text-dark-gray"></i>
                            </a>
                        </div>
                        <div class="product-share" id="productShare"
                            data-url="{{ route('single.product.view', ['slug' => $response['slug']]) }}"
                            data-title="{{ $response['name'] }}"
                            data-text="{{ Str::limit($response['description'], 140) }}">


                            {{-- Product share block (Blade) --}}
                            <div class="product-share" id="productShare"
                                data-url="{{ route('single.product.view', ['slug' => $response['slug']]) }}"
                                data-title="{{ $response['name'] }}"
                                data-text="{{ Str::limit($response['description'], 140) }}">
                                <div class="ps-left">
                                    <span class="share-label">Share</span>

                                    <button type="button" id="nativeShareBtn" class="share-btn share-primary"
                                        title="Share" aria-label="Share">
                                        <i class="fa-solid fa-share-nodes" aria-hidden="true"></i>
                                    </button>
                                </div>

                                <div class="share-buttons" role="group" aria-label="Share product">
                                    <button type="button" id="copyLinkBtn" class="share-btn" title="Copy link"
                                        aria-label="Copy link">
                                        <i class="fa-solid fa-link" aria-hidden="true"></i>
                                        <span class="btn-text">Copy</span>
                                    </button>

                                    <a id="whatsappShare" class="share-btn" target="_blank" rel="noopener"
                                        title="WhatsApp" aria-label="Share on WhatsApp">
                                        <i class="fa-brands fa-whatsapp" aria-hidden="true"></i>
                                    </a>

                                    <a id="facebookShare" class="share-btn" target="_blank" rel="noopener"
                                        title="Facebook" aria-label="Share on Facebook">
                                        <i class="fa-brands fa-facebook-f" aria-hidden="true"></i>
                                    </a>

                                    <a id="twitterShare" class="share-btn" target="_blank" rel="noopener"
                                        title="X (Twitter)" aria-label="Share on X (Twitter)">
                                        <i class="fa-brands fa-twitter" aria-hidden="true"></i>
                                    </a>

                                    <a id="telegramShare" class="share-btn" target="_blank" rel="noopener"
                                        title="Telegram" aria-label="Share on Telegram">
                                        <i class="fa-brands fa-telegram-plane" aria-hidden="true"></i>
                                    </a>

                                    <a id="emailShare" class="share-btn" href="#" title="Email"
                                        aria-label="Share by Email">
                                        <i class="fa-solid fa-envelope" aria-hidden="true"></i>
                                    </a>
                                </div>

                                <div id="shareToast" role="status" aria-live="polite" class="share-toast"
                                    aria-hidden="true"></div>
                            </div>

                            <div id="shareToast" role="status" aria-live="polite" class="share-toast" hidden></div>
                        </div>
                        <div class="d-flex align-items-center flex-column flex-sm-row mb-20px position-relative">


                        </div>

                        <div class="mb-20px h-1px w-100 bg-extra-medium-gray d-block"></div>
                        <div class="row mb-15px">

                            <div class="col-12 icon-with-text-style-08">
                                <div class="feature-box feature-box-left-icon d-inline-flex align-middle">
                                    <div class="feature-box-icon me-10px">
                                        <i
                                            class="feather icon-feather-truck top-8px position-relative align-middle text-dark-gray"></i>
                                    </div>
                                    <div class="feature-box-content">
                                        <span><span class="alt-font text-dark-gray fw-500">Estimated delivery:</span>

                                            3–7 business days</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 icon-with-text-style-08 mb-10px">
                                <div class="feature-box feature-box-left-icon d-inline-flex align-middle">
                                    <div class="feature-box-icon me-10px">
                                        <i
                                            class="feather icon-feather-archive top-8px position-relative align-middle text-dark-gray"></i>
                                    </div>
                                    <div class="feature-box-content">
                                        <span><span class="alt-font text-dark-gray fw-500">Free shipping &
                                                returns</span>
                                            {{-- On all orders over ₹50 --}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="feature-box feature-box-left-icon coupon_code">
                                    <div class="feature-box-icon me-5px">
                                        <i
                                            class="feather icon-feather-scissors top-9px position-relative text-dark-gray icon-small"></i>
                                    </div>
                                    <div class="feature-box-content">
                                        <span class="d-inline-block text-dark-gray align-middle alt-font fw-500 ">
                                            <a href="#modal-popup4"class=" fw-600 text-dark-gray popup-with-zoom-anim">Click
                                                here to view coupon code</a></span>
                                        <!-- start modal pop-up -->
                                        <div wire:ignore.self id="modal-popup4"
                                            class="zoom-anim-dialog mfp-hide  col-md-4  mx-auto bg-white text-center modal-popup-main p-20px">
                                            <span class="text-dark-gray fw-600 fs-24 mb-10px d-block">Coupon List</span>
                                            <div class="modal-content-area">
                                                @foreach ($coupons as $coupon)
                                                    <div class="modal-content-area-in">
                                                        <div class="CouponList-text">
                                                            <p class="coupon-text">
                                                                {{ $coupon['coupon_description'] ?? 'Coupon Description' }}
                                                            </p>
                                                            <div class="CouponList-text-po">
                                                                <div class="List-text-b">
                                                                    <input type="text"
                                                                        value="{{ $coupon['coupon_code'] }}"
                                                                        class="coupon-input" required
                                                                        placeholder="coupon code" readonly>
                                                                </div>
                                                                <div class="CouponList-btn">
                                                                    <button type="button"
                                                                        class="appl-bt-pop lose btn apply-coupon-btn copy-coupon-code"
                                                                        data-coupon-code="{{ $coupon['coupon_code'] }}"
                                                                        data-dismiss="modal" aria-label="Close">
                                                                        <span class="button-text ">

                                                                            Copy

                                                                        </span>

                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>

                                        </div>
                                        <!-- end modal pop-up -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="bg-very-light-gray ps-30px pe-30px pt-25px pb-25px mb-20px xs-p-25px border-radius-4px">
                            <span class="alt-font fs-17 fw-500 text-dark-gray mb-15px d-block lh-initial">Guarantee
                                safe
                                and secure checkout</span>
                            <div class="payment-img">
                                <img src="{{ asset('assets/images/Mastercard-.png') }}" class="" alt="">
                                <img src="{{ asset('assets/images/Visa.png') }}" class="" alt="">
                                <img src="{{ asset('assets/images/Rupay.png') }}" class="" alt="">
                                <img src="{{ asset('assets/images/up-pi.png') }}" class="" alt="">
                                <img src="{{ asset('assets/images/internet-banking.png') }}" class=""
                                    alt="">

                            </div>
                        </div>
                        <div>
                            <div class="w-100 d-block"><span class="text-dark-gray alt-font fw-500">Category:</span>
                                {{-- @dd($response) --}}
                                <a
                                    href="{{ url('categories/' . $response['category']->slug) }}">{{ $response['category']->title }}</a>
                            </div>
                            @if ($response['tags'])
                                <div class="w-100 d-block"><span class="text-dark-gray alt-font fw-500">Tags:</span>
                                    {{-- @dd($response) --}}
                                    {{ $response['tags'] }}
                                </div>
                            @endif
                        </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end section -->

    <!-- start section -->
    <section id="tab" class="tab-view">
        <div class="container">
            <div class="row">
                <div class="col-8 tab-style-04">
                    <ul class="nav nav-tabs border-0  alt-font fs-19">

                        <li class="nav-item"><a data-bs-toggle="tab" href="#tab_five1"
                                class="nav-link active">Description<span class="tab-border bg-dark-gray"></span></a></li>

                        @if ($response['info'] != '')
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab_five2">Additional
                                    information<span class="tab-border bg-dark-gray"></span></a></li>
                        @endif
                        @if ($response['shipping'] != '')
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab_five3">Shipping and
                                    return<span class="tab-border bg-dark-gray"></span></a></li>
                        @endif

                        {{-- @if (count($matchingProducts) > 0)
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab_five4">Matching
                                    Products<span class="tab-border bg-dark-gray"></span></a></li>
                        @endif --}}

                    </ul>
                    <div class="mb-5 h-1px w-100 bg-extra-medium-gray sm-mt-10px xs-mb-8"></div>
                    <div class="tab-content">
                        <!-- start tab content -->
                        <div class="tab-pane fade in active show" id="tab_five1">
                            <p style="white-space: pre-line">{!! $response['description'] !!} </p>
                        </div>
                        <!-- end tab content -->
                        <!-- start tab content -->
                        <div class="tab-pane fade in" id="tab_five2">
                            <p style="white-space: pre-line">{{ $response['info'] }}</p>
                        </div>
                        <!-- end tab content -->
                        <!-- start tab content -->
                        <div class="tab-pane fade in" id="tab_five3">
                            <p style="white-space: pre-line">{{ $response['shipping'] }}</p>
                        </div>
                        <!-- end tab content -->
                        <!-- start tab content -->
                        {{-- <div class="tab-pane fade in" id="tab_five4">
                            <div class="fbt-container">
                                <h2 class="fbt-heading">MAKE IT A MATCH</h2>
                                @php
                                    $totalPrice = 0;
                                @endphp
                                <div class="fbt-product-list">
                                    @foreach ($matchingProducts as $product)
                                       
                                        @php
                                            $totalPrice += $product->base_price;
                                        @endphp
                                        @if ((int) $product->variation->stock > 0)
                                            <!-- Product 1 -->
                                            <div class="fbt-product-item"
                                                data-variation-id="{{ $product->variation->id }}"
                                                data-product-name="{{ $product->product_name }}"
                                                data-product-id="{{ $product->product_id }}"
                                                data-product-price="{{ $product->base_price }}">
                                                <div class="fbt-checkbox-wrapper">
                                                    <input type="checkbox" id="product1" class="fbt-checkbox" checked>
                                                </div>
                                                <img src="{{ asset('storage/' . $product->product_image) }}"
                                                    alt="Leezy Straight Leg Cargo Pants" class="fbt-product-image">
                                                <div class="fbt-product-details">
                                                    <div class="fbt-product-name">{{ $product->product_name }}
                                                    </div>
                                                    <div class="fbt-product-price">
                                                        <del>₹{{ number_format($product->base_mrp, 0) }}</del>
                                                        ₹{{ number_format($product->base_price, 0) }}
                                                    </div>

                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>

                                <div class="fbt-total-section">
                                    <div class="fbt-total-price">
                                        <span class="fbt-total-label">Total Price:</span>
                                        <span class="fbt-total-amount">Rs. {{ number_format($totalPrice, 0) }}</span>
                                    </div>
                                    <button class="fbt-add-to-cart-btn">Add to Cart</button>
                                </div>
                            </div>
                        </div> --}}
                        <!-- end tab content -->

                    </div>

                </div>
                @if (count($matchingProducts) > 0)
                    <div class="col-4">
                        <div class="fbt-container">
                            <h2 class="fbt-heading">MAKE IT A MATCH</h2>
                            @php
                                $totalPrice = 0;
                            @endphp
                            <div class="fbt-product-list">
                                @foreach ($matchingProducts as $product)
                                    {{-- @dd($product->variation) --}}
                                    @php
                                        $totalPrice += $product->base_price;
                                    @endphp
                                    @if ((int) $product->variation->stock > 0)
                                        <!-- Product 1 -->

                                        <div class="fbt-product-item" data-variation-id="{{ $product->variation->id }}"
                                            data-product-name="{{ $product->product_name }}"
                                            data-product-id="{{ $product->product_id }}"
                                            data-product-price="{{ $product->base_price }}">
                                            <div class="fbt-checkbox-wrapper">
                                                <input type="checkbox" id="product1" class="fbt-checkbox" checked>
                                            </div>
                                            <a href="{{ route('single.product.view', $product->slug) }}">
                                                <img src="{{ asset('storage/' . $product->product_image) }}"
                                                    alt="Leezy Straight Leg Cargo Pants" class="fbt-product-image">
                                            </a>
                                            <div class="fbt-product-details">
                                                <a href="{{ route('single.product.view', $product->slug) }}">
                                                    <div class="fbt-product-name">
                                                        {{ $product->product_name }}
                                                    </div>
                                                </a>
                                                <div class="fbt-product-price">
                                                    <del>₹{{ number_format($product->base_mrp, 0) }}</del>
                                                    ₹{{ number_format($product->base_price, 0) }}
                                                </div>

                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>

                            <div class="fbt-total-section">
                                <div class="fbt-total-price">
                                    <span class="fbt-total-label">Total Price:</span>
                                    <span class="fbt-total-amount">Rs.
                                        {{ number_format($totalPrice, 0) }}</span>
                                </div>
                                <button class="fbt-add-to-cart-btn">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>
    <!-- end section -->
    <!-- start section -->
    @if ($recentlyViewedProducts->where('product_id', '!=', $response['id'])->isNotEmpty())
        <section class="Recently-view">
            <div class="container">
                <div class="row mb-2">
                    <div class="col-12 text-center">
                        <h2 class="alt-font text-dark-gray mb-0 ls-minus-2px">Recently Viewed <span
                                class="text-highlight fw-600">products<span
                                    class="bg-base-color h-5px bottom-2px"></span></span></h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <ul
                            class="owl-carousel recently-viewed-product-carousel owl-theme  shop-modern shop-wrapper text-center list-unstyled">
                            {{-- <li class="grid-sizer"></li> --}}
                            @if ($recentlyViewedProducts->isNotEmpty())
                                @foreach ($recentlyViewedProducts->where('product_id', '!=', $response['id'])->reverse() as $product)
                                    @php
                                        $isInWishlistLoop = $wishlist->contains('product_id', $product->product_id);
                                    @endphp
                                    <!-- start shop item -->
                                    @if ($product->variation != null)
                                        <li class="grid-item " data-product-id="{{ $product->product_id }}">
                                            <div class="shop-box mb-10px">
                                                <div class="shop-image mb-20px">
                                                    <a href="{{ route('single.product.view', $product->slug) }}">
                                                        <img src="{{ asset('storage/' . $product->product_image) }}"
                                                            alt="{{ $product->product_name }}">
                                                        {{-- <span class="lable new">New</span> --}}
                                                        <div class="shop-overlay bg-gradient-gray-light-dark-transparent">
                                                        </div>
                                                    </a>
                                                    <div class="shop-buttons-wrap">
                                                        {{-- @dd($product) --}}
                                                        {{-- @dd($product->variation->stock ) --}}

                                                        @if ((int) $product->variation->stock > 0)
                                                            <a
                                                                class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cartJS">
                                                                <i class="feather icon-feather-shopping-bag"></i><span
                                                                    class="quick-view-text button-text">Out of stock</span>
                                                            </a>
                                                        @else
                                                            <a
                                                                class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cartJS">
                                                                <i class="feather icon-feather-shopping-bag"></i><span
                                                                    class="quick-view-text button-text">Add to cart</span>
                                                            </a>
                                                        @endif
                                                    </div>
                                                    <div class="shop-hover d-flex justify-content-center">
                                                        <ul>
                                                            <li>
                                                                <a data-id="{{ $product->product_id }}"
                                                                    {{-- onclick="addTowishListClass(this)" --}}
                                                                    class="  {{ $isInWishlistLoop ? 'remove-from-wishlist liked' : 'add-to-wishlist' }} w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px"
                                                                    data-bs-toggle="tooltip" data-bs-placement="left"
                                                                    title="{{ $isInWishlistLoop ? ' Added to wishlist' : ' Add to wishlist' }}"><i
                                                                        class="feather icon-feather-heart fs-16"></i></a>
                                                            </li>

                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="shop-footer text-center">
                                                    <a href="{{ route('single.product.view', $product->slug) }}"
                                                        class="alt-font text-dark-gray fs-19 fw-500">{{ $product->product_name }}</a>
                                                    <div class="price lh-22 fs-16">
                                                        <del>₹{{ number_format($product->base_mrp, 0) }}</del>₹{{ number_format($product->base_price, 0) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    @endif

                                    <!-- end shop item -->
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- end section -->

    @if ($related_products->where('product_id', '!=', $response['id'])->isNotEmpty())
        <!-- start section -->
        <section class="Related_pro">
            <div class="container">
                <div class="row mb-2">
                    <div class="col-12 text-center">
                        <h2 class="alt-font text-dark-gray mb-0 ls-minus-2px">Related <span
                                class="text-highlight fw-600">products<span
                                    class="bg-base-color h-5px bottom-2px"></span></span></h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">

                        <ul
                            class="owl-carousel related-product-carousel owl-theme  shop-modern shop-wrapper text-center list-unstyled">
                            {{-- <li class="grid-sizer"></li> --}}
                            {{-- @dd($related_products) --}}
                            @if ($related_products->isNotEmpty())
                                @foreach ($related_products->where('product_id', '!=', $response['id'])->reverse() as $product)
                                    @php
                                        $isInWishlistLoopRelatedProd = $wishlist->contains(
                                            'product_id',
                                            $product->product_id,
                                        );
                                    @endphp
                                    @if ($product->variation != null)
                                        <!-- start shop item -->
                                        <li class="grid-item " data-product-id="{{ $product->product_id }}">
                                            <div class="shop-box mb-10px">
                                                <div class="shop-image mb-20px">
                                                    <a href="{{ route('single.product.view', $product->slug) }}">
                                                        <img src="{{ asset('storage/' . $product->product_image) }}"
                                                            alt="{{ $product->product_name }}">
                                                        {{-- <span class="lable new">New</span> --}}
                                                        <div class="shop-overlay bg-gradient-gray-light-dark-transparent">
                                                        </div>
                                                    </a>
                                                    <div class="shop-buttons-wrap">
                                                        @if ($product->variation->stock > 0)
                                                            <a
                                                                class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cartJS">
                                                                <i class="feather icon-feather-shopping-bag"></i><span
                                                                    class="quick-view-text button-text">Out of stock</span>
                                                            </a>
                                                        @else
                                                            <a
                                                                class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cartJS">
                                                                <i class="feather icon-feather-shopping-bag"></i><span
                                                                    class="quick-view-text button-text">Add to cart</span>
                                                            </a>
                                                        @endif
                                                    </div>
                                                    <div class="shop-hover d-flex justify-content-center">
                                                        <ul>
                                                            <li>
                                                                <a data-id="{{ $product->product_id }}"
                                                                    {{-- onclick="addTowishListClass(this)" --}}
                                                                    class=" {{ $isInWishlistLoopRelatedProd ? 'remove-from-wishlist liked' : 'add-to-wishlist' }} w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px"
                                                                    data-bs-toggle="tooltip" data-bs-placement="left"
                                                                    title="{{ $isInWishlistLoopRelatedProd ? ' Added to wishlist' : ' Add to wishlist' }}"><i
                                                                        class="feather icon-feather-heart fs-16"></i></a>
                                                            </li>

                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="shop-footer text-center">
                                                    <a href="{{ route('single.product.view', $product->slug) }}"
                                                        class="alt-font text-dark-gray fs-19 fw-500">{{ $product->product_name }}</a>
                                                    <div class="price lh-22 fs-16">
                                                        <del>₹{{ number_format($product->base_mrp, 0) }}</del>₹{{ number_format($product->base_price, 0) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    @endif
                                    <!-- end shop item -->
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        {{-- Address Create Modal --}}

        <!-- end section -->
    @endif
    <script src="{{ asset('assets/js/jquery.min.js') }}"></script>

    <script>
        $(document).ready(function() {


            $('.copy-coupon-code').on('click', function() {
                const code = $(this).data('coupon-code');
                const span = $(this).find('.button-text');

                span.text("Copying...");

                navigator.clipboard.writeText(code).then(() => {
                    span.text("Copied!");
                    setTimeout(() => {
                        span.text("Copy");
                    }, 1500);
                });
            });


            $('.related-product-carousel').owlCarousel({
                loop: false,
                margin: 30,
                nav: true,
                dots: false,
                autoplay: false,
                autoplayTimeout: 4000,
                autoplayHoverPause: true,
                navText: ['<i class="feather icon-feather-arrow-left"></i>',
                    '<i class="feather icon-feather-arrow-right"></i>'
                ],
                responsive: {
                    0: {
                        items: 1
                    },
                    576: {
                        items: 2
                    },
                    768: {
                        items: 3
                    },
                    992: {
                        items: 4
                    },
                    1200: {
                        items: 5
                    }
                }
            });

            $('.recently-viewed-product-carousel').owlCarousel({
                loop: false,
                margin: 30,
                nav: true,
                dots: false,
                autoplay: false,
                autoplayTimeout: 4000,
                autoplayHoverPause: true,
                navText: ['<i class="feather icon-feather-arrow-left"></i>',
                    '<i class="feather icon-feather-arrow-right"></i>'
                ],
                responsive: {
                    0: {
                        items: 1
                    },
                    576: {
                        items: 2
                    },
                    768: {
                        items: 3
                    },
                    992: {
                        items: 4
                    },
                    1200: {
                        items: 5
                    }
                }
            });
            var variations = window.variationsData;
            if (!variations) {
                console.error('Variations not found!');
                return;
            }
            console.log(variations, 'variations');

            $('.product-gallery-item').on('click', function(e) {
                e.preventDefault();

                // Get current main image data
                var currentMainSrc = $('#product-zoom').attr('src');
                var currentMainZoom = $('#product-zoom').attr('data-zoom-image');

                // Get clicked thumbnail data
                var newImageSrc = $(this).attr('data-image');
                var newZoomImage = $(this).attr('data-zoom-image');

                // Update main product image with clicked thumbnail data
                $('#product-zoom').attr('src', newImageSrc).attr('data-zoom-image', newZoomImage);

                // Update clicked thumbnail with previous main image data
                $(this).attr('data-image', currentMainSrc).attr('data-zoom-image', currentMainZoom);
                $(this).find('img').attr('src', currentMainSrc);

                // Update active class
                $('.product-gallery-item').removeClass('active');
                $(this).addClass('active');
            });

            // Quantity Increase / Decrease
            $(".cart-plus-btn-single").click(function() {
                let $input = $(this).siblings("input.qty");
                let currentVal = parseInt($input.val()) || 0;
                $input.val(currentVal + 1).change();
            });

            $('.cart-minus-btn-single').click(function() {
                let $qty = $(this).siblings('.qty');
                let currentVal = parseInt($qty.val()) || 1;
                if (currentVal > 1) {
                    $qty.val(currentVal - 1);
                } else {
                    $qty.val(1); // Reset to 1 if it's 1 or less
                }
            });

            // Main Variables
            var selectedAttributes = {};
            var selectedVariationId = null;
            var selectedPrice = null;
            var selectedMrp = null;


            // Preselect First Size and Color (if needed)
            const firstSizeBtn = $('[data-attr="Size"]:visible').first();
            const firstColorBtn = $('[data-attr="Color"]:visible').first();

            if (firstSizeBtn.length) {
                firstSizeBtn.addClass('attribute_seletion').removeClass('btn-outline-primary selected');
                $('.size-btn-attribute').addClass('btn-outline-primary');
                $('.attribute_seletion').removeClass('btn-outline-primary');
                selectedAttributes['Size'] = {
                    id: firstSizeBtn.data('id'),
                    value: firstSizeBtn.data('value').toLowerCase().replace(/\s+/g, '')
                };
            }



            if (firstColorBtn.length) {


                firstColorBtn.addClass('attribute_seletion').removeClass('btn-outline-primary selected');
                selectedAttributes['Color'] = {
                    id: firstColorBtn.data('id'),
                    value: firstColorBtn.data('value').toLowerCase().replace(/\s+/g, '')
                };
            }

            console.log(firstColorBtn, 'firstColorBtn', selectedAttributes);
            $('[data-attr="Balck"]').each(function() {
                const btnColor = $(this).data('value').toLowerCase().replace(/\s+/g, '');

                console.log("btnColor", btnColor);
                // if (availableColors.includes(btnColor)) {

                $(this).css('background-color', btnColor);
                $(this).html(' ');
                $(this).show();
                // } else {
                //     $(this).html(' ');
                //     $(this).hide();
                // }
            });
            // Call filter colors based on selected size after preselect
            filterColorsBasedOnSize();
            checkSelection();
            updateProductDetails();

            // Attribute Button Click
            $(document).on('click', '.attribute-btn', function() {
                var attrName = $(this).data('attr');
                var attrValue = $(this).data('value');
                var attrId = $(this).data('id');

                $(this).closest('.attribute-options').find('.attribute-btn')
                    .removeClass('attribute_seletion btn-dark')
                    .addClass('btn-outline-primary');
                $(this).addClass('attribute_seletion').removeClass('btn-outline-primary');

                selectedAttributes[attrName] = {
                    id: attrId,
                    value: attrValue.toLowerCase().replace(/\s+/g, '')
                };

                if (attrName === 'Size') {
                    filterColorsBasedOnSize();
                    autoSelectFirstVisibleColor();
                }

                updateProductDetails();
                checkSelection();
            });

            function filterColorsBasedOnSize() {
                var size = selectedAttributes['Size']?.value;
                if (!size) return;

                let availableColors = [];



                variations.forEach(variation => {
                    const sizeAttr = variation.attributes.find(attr => attr.name == 'Size');
                    const colorAttr = variation.attributes_options.Color || variation.attributes_options
                        .colour; // This is already the color object

                    console.log(colorAttr, 'colorAttr', variation.attributes_options);

                    if (sizeAttr && colorAttr &&
                        sizeAttr.value.toLowerCase().replace(/\s+/g, '') === size) {

                        // Use colorAttr.name instead of colorAttr.value
                        const normalizedColor = colorAttr.name.toLowerCase().replace(/\s+/g, '');

                        console.log(availableColors, 'normalizedColor', normalizedColor, colorAttr);
                        if (!availableColors.includes(normalizedColor)) {
                            availableColors.push(normalizedColor);
                        }
                    }
                });

                $('[data-attr="colour"]').each(function() {
                    const btnColor = $(this).data('value').toLowerCase().replace(/\s+/g, '');

                    console.log("btnColor", btnColor);
                    if (availableColors.includes(btnColor)) {

                        $(this).css('background-color', btnColor);
                        $(this).html(' ');
                        $(this).show();
                    } else {
                        $(this).html(' ');
                        $(this).hide();
                    }
                });

            }

            function autoSelectFirstVisibleColor() {
                const firstVisibleColor = $('[data-attr="Color"]:visible').first();
                if (firstVisibleColor.length) {
                    firstVisibleColor.trigger('click'); // Simulate click
                }
            }

            function updateProductDetails() {
                var foundVariation = variations.find(function(variation) {
                    return variation.attributes.every(attr => {
                        var selectedAttr = selectedAttributes[attr.name];
                        if (!selectedAttr) return false;
                        return selectedAttr.value === attr.value.toLowerCase().replace(/\s+/g, '');
                    });
                });
                console.log('foundVariation', variations)
                if (foundVariation?.stock == 0) {

                    $('.add-to-cartJS').html(
                        '<span> <i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Out of stock</span> </span>'
                    );
                    $('.buy_nowJS').hide();
                    $('.add-to-cartJS').attr('disabled', true);
                    // $('.add-to-cartJS').hide();
                    $('.out-of-stock').show();

                    // $('[data--value=""]')

                } else {

                    $('.add-to-cartJS').html(
                        '<span> <i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span> </span> '
                    );
                    $('.add-to-cartJS').attr('disabled', false);
                    $('.add-to-cartJS').show();
                    $('.out-of-stock').hide();


                }

                console.log("oundVariation", foundVariation);
                if (foundVariation && foundVariation.image) {
                    console.log("foundVariation", foundVariation, "{{ $response['image'] }}");
                    selectedVariationId = foundVariation.id;
                    selectedPrice = foundVariation.price;
                    selectedMrp = foundVariation.mrp;
                    var percentOff = (selectedMrp > 0 && selectedPrice > 0) ?
                        Math.round(((selectedMrp - selectedPrice) / selectedMrp) * 100) : 0;

                    var imageUrl = `{{ asset('storage') }}/${foundVariation.image}`;
                    $('.product-image').attr('src', imageUrl);
                    $('.product-image').attr('data-zoom-image', imageUrl);
                    $('#product-price').html(
                        `<del class="text-medium-gray me-10px fw-400">₹${selectedMrp}</del>₹${selectedPrice}`);
                    $('.price-regular').text(`₹${selectedMrp}`);

                    console.log("percent-off", selectedPrice, selectedMrp)
                    $('#product-price-mrp').html(`MRP<del>₹${selectedMrp.toLocaleString('en-IN')}</del>`);
                    $('#percentage-span').text(`${percentOff}% off`);

                    $('.buy_nowJS').attr('href',
                        `{{ url('buy-now') }}/{{ $response['id'] }}/${selectedVariationId}`);

                    // $(document).on('click', '.swiper-slide', function() {
                    // Get clicked slide's image src
                    var imgSrc = $(this).find('.swiper-slide-active').attr('src');

                    // Update main image
                    $('.slider_images .swiper-slide-active img').attr('src', imageUrl);
                    // });
                    console.log(".slider_images .swiper-slide-active img", imgSrc)

                } else {
                    selectedVariationId = foundVariation.id;;
                    selectedPrice = foundVariation.price;
                    selectedMrp = foundVariation.mrp;
                    let defaultPrice = "{{ $response['base_price'] }}";
                    let defaultMrp = "{{ $response['base_mrp'] }}";
                    var percentOff = (selectedMrp > 0 && selectedPrice > 0) ?
                        Math.round(((selectedMrp - selectedPrice) / selectedMrp) * 100) : 0;

                    $('.product-image').attr('src', `{{ asset('storage/' . $response['image']) }}`);
                    $('#product-price').html(
                        `<del class="text-medium-gray me-10px fw-400">₹${selectedMrp}</del>₹${selectedPrice}`);
                    $('.price-regular').text(`₹${selectedMrp}`);
                    $('.buy_nowJS').attr('href',
                        `{{ url('buy-now') }}/{{ $response['id'] }}/${selectedVariationId}`);
                    console.log("percent-off", selectedPrice, selectedMrp)
                    $('#product-price-mrp').html(`MRP<del>₹${selectedMrp.toLocaleString('en-IN')}</del>`);
                    $('#percentage-span').text(`${percentOff}% off`);

                    var imgSrc = $(this).find('.swiper-slide-active').attr('src');

                    // Update main image
                    $('.slider_images .swiper-slide-active img').attr('src', imageUrl);
                }
            }

            function checkSelection() {
                var totalAttributes = $('.attribute-options').length;
                if (Object.keys(selectedAttributes).length === totalAttributes) {
                    $('.add-to-cartJS').prop('disabled', false);
                } else {
                    $('.add-to-cartJS').prop('disabled', true);
                }
            }

            // Add to Cart Click
            $('.add-to-cartJS').click(function() {
                // if (selectedVariationId) {
                var cartData = {
                    product_id: '{{ $response['id'] }}',
                    variation_id: selectedVariationId || "",
                    attributes: Object.values(selectedAttributes),
                    quantity: $('.qty').val() ?? 1
                };

                $.ajax({
                    url: '{{ route('addToCart') }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: cartData,
                    success: function(response) {
                        if (response.success) {
                            $('#cart-count-span').html('(' + response.cart_count +
                                ' Items)');
                            $('.cart-total-span').html(response.cart_total);

                            if (response.cart_count > 0) {
                                if ($('#cart_count_header').length > 0) {
                                    $('#cart_count_header').html(response.cart_count)
                                        .show();
                                } else {
                                    $('a.cart__btn').append(
                                        '<ins id="cart_count_header"></ins>');
                                    $('#cart_count_header').html(response.cart_count)
                                        .show();
                                }
                            } else {
                                $('#cart_count_header').hide();
                            }
                            toastr.success(response.message);



                            const productId = $(this).data('id');

                            // This sends a global event to all mounted Livewire components
                            window.dispatchEvent(
                                new CustomEvent('cart-updated')
                            );
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(error) {
                        toastr.error(error.responseJSON?.message ||
                            'Something went wrong.');
                    }
                });
                // } else {
                //     toastr.error("Please select all attributes.");
                // }
            });

            // Image Change on Hover
            $(document).on('mouseenter', '.thumbnail', function() {
                changeImage(this);
            });

            function changeImage(elem) {
                const mainImage = document.getElementById('mainImage');
                mainImage.src = elem.src;
            }

        });

        $("button.size-btn-attribute").css({
            "border": "0.1rem solid rgb(243 240 240)"
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize main swiper after DOM is ready
            setTimeout(() => {
                // Get all video elements in main slider
                const mainVideos = document.querySelectorAll('.main-slider-video');

                // Force load videos
                mainVideos.forEach(video => {
                    video.load();
                });

                // Handle swiper slide change to pause videos
                const mainSwiper = document.querySelector('.product-image-slider');
                if (mainSwiper && mainSwiper.swiper) {
                    mainSwiper.swiper.on('slideChange', function() {
                        // Pause all videos
                        mainVideos.forEach(video => {
                            video.pause();
                        });
                    });
                }

                // Generate video thumbnails dynamically (optional)
                generateVideoThumbs();
            }, 500);
        });

        // Optional: Generate video thumbnails dynamically
        function generateVideoThumbs() {
            const thumbVideos = document.querySelectorAll('.video-thumb-wrapper');

            thumbVideos.forEach((wrapper, index) => {
                // You can add dynamic thumbnail generation here if needed
                // For now, using static placeholder
            });
        }

        // Fix for iOS video playback
        if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
            document.querySelectorAll('video').forEach(video => {
                video.setAttribute('playsinline', '');
                video.setAttribute('webkit-playsinline', '');
            });
        }


        $(document).ready(function() {


            // Get elements
            const qtyInput = document.getElementById('qty');
            const minusBtn = document.querySelector('.qty-minus');
            const plusBtn = document.querySelector('.qty-plus');

            // Decrease quantity
            minusBtn.addEventListener('click', function() {
                let currentValue = parseInt(qtyInput.value) || 1;
                if (currentValue > 1) {
                    qtyInput.value = currentValue - 1;
                }
            });

            // Increase quantity
            plusBtn.addEventListener('click', function() {
                let currentValue = parseInt(qtyInput.value) || 1;
                qtyInput.value = currentValue + 1;
            });

            // Optional: Prevent non-numeric input
            qtyInput.addEventListener('input', function() {
                this.value = this.value.replace(/[^0-9]/g, '');
                if (this.value === '' || parseInt(this.value) < 1) {
                    this.value = 1;
                }
            });

            // Update total price when checkboxes change
            $('.fbt-checkbox').on('change', function() {
                updateFbtTotalPrice();
            });

            function updateFbtTotalPrice() {
                let total = 0;
                $('.fbt-product-item').each(function() {
                    const checkbox = $(this).find('.fbt-checkbox');
                    if (checkbox.is(':checked')) {
                        const price = parseFloat($(this).data('product-price')) || 0;
                        total += price;
                    }
                });
                $('.fbt-total-amount').text('₹' + total.toLocaleString('en-IN'));
            }

            // Add all checked products to cart
            $('.fbt-add-to-cart-btn').on('click', function() {
                const $button = $(this);
                const $btnText = $button.find('.btn-text');
                const $btnLoading = $button.find('.btn-loading');

                // Get all checked products
                const selectedProducts = [];
                $('.fbt-product-item').each(function() {
                    const $item = $(this);
                    const $checkbox = $item.find('.fbt-checkbox');

                    if ($checkbox.is(':checked')) {
                        selectedProducts.push({
                            product_id: $item.data('product-id'),
                            product_name: $item.data('product-name'),
                            variation_id: $item.data('variation-id') || '',
                            quantity: 1
                        });
                    }
                });

                if (selectedProducts.length === 0) {
                    toastr.warning('Please select at least one product.');
                    return;
                }

                // Disable button and show loading
                $button.prop('disabled', true);
                $btnText.hide();
                $btnLoading.show();

                // Add products sequentially
                addProductsToCart(selectedProducts, 0, $button, $btnText, $btnLoading);
            });

            function addProductsToCart(products, index, $button, $btnText, $btnLoading) {
                if (index >= products.length) {
                    // All products added successfully
                    $button.prop('disabled', false);
                    $btnText.show();
                    $btnLoading.hide();
                    toastr.success('products added to cart successfully!');

                    // Dispatch cart updated event
                    window.dispatchEvent(new CustomEvent('cart-updated'));
                    return;
                }

                const product = products[index];
                const cartData = {
                    product_id: product.product_id,
                    variation_id: product.variation_id,
                    attributes: [],
                    quantity: product.quantity
                };

                $.ajax({
                    url: '{{ route('addToCart') }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: cartData,
                    success: function(response) {
                        if (response.success) {
                            // Update cart count and total
                            $('#cart-count-span').html('(' + response.cart_count + ' Items)');
                            $('.cart-total-span').html(response.cart_total);

                            if (response.cart_count > 0) {
                                if ($('#cart_count_header').length > 0) {
                                    $('#cart_count_header').html(response.cart_count).show();
                                } else {
                                    $('a.cart__btn').append('<ins id="cart_count_header"></ins>');
                                    $('#cart_count_header').html(response.cart_count).show();
                                }
                            } else {
                                $('#cart_count_header').hide();
                            }

                            // Show individual product success message
                            if (products.length > 1) {
                                // toastr.success(product.product_name + ' added to cart');
                            }

                            // Add next product
                            addProductsToCart(products, index + 1, $button, $btnText, $btnLoading);
                        } else {
                            toastr.error(response.message || 'Failed to add ' + product.product_name);
                            // Continue with next product even if one fails
                            addProductsToCart(products, index + 1, $button, $btnText, $btnLoading);
                        }
                    },
                    error: function(error) {
                        toastr.error('Error adding ' + product.product_name);
                        // Continue with next product even if one fails
                        addProductsToCart(products, index + 1, $button, $btnText, $btnLoading);
                    }
                });
            }
        });
    </script>

    <script>
        (function() {
            const root = document.getElementById('myAccordion');
            if (!root) return;

            const allowMultiple = false; // set to true to allow multiple open items
            const items = Array.from(root.querySelectorAll('.my-accordion-item'));

            // Initialize ARIA and collapsed state
            items.forEach(item => {
                const header = item.querySelector('.my-accordion-header');
                const panel = item.querySelector('.my-accordion-panel');
                const inner = item.querySelector('.my-accordion-panel-inner');

                // Ensure panel is hidden initially
                item.setAttribute('aria-expanded', 'false');
                panel.style.maxHeight = '0px';

                // click handler
                header.addEventListener('click', () => toggleItem(item, panel, inner));

                // keyboard support: Enter & Space toggle
                header.addEventListener('keydown', (ev) => {
                    if (ev.key === 'Enter' || ev.key === ' ') {
                        ev.preventDefault();
                        header.click();
                    }
                });
            });

            function toggleItem(item, panel, inner) {
                const isOpen = item.getAttribute('aria-expanded') === 'true';

                if (!allowMultiple) {
                    // close others
                    items.forEach(other => {
                        if (other !== item) closeItem(other);
                    });
                }

                if (isOpen) closeItem(item);
                else openItem(item, panel, inner);
            }

            function openItem(item, panel, inner) {
                item.setAttribute('aria-expanded', 'true');
                const requiredHeight = inner.scrollHeight; // natural height
                panel.style.maxHeight = requiredHeight + 'px';

                // after transition, set maxHeight to none to allow dynamic content height change
                panel.addEventListener('transitionend', function handler() {
                    if (item.getAttribute('aria-expanded') === 'true') {
                        panel.style.maxHeight = 'none';
                    }
                    panel.removeEventListener('transitionend', handler);
                });
                // update header aria
                const header = item.querySelector('.my-accordion-header');
                if (header) header.setAttribute('aria-expanded', 'true');
            }

            function closeItem(item) {
                const panel = item.querySelector('.my-accordion-panel');
                const inner = item.querySelector('.my-accordion-panel-inner');

                // if maxHeight is 'none' (previously expanded), set to scrollHeight first for transition
                if (getComputedStyle(panel).maxHeight === 'none') {
                    panel.style.maxHeight = inner.scrollHeight + 'px';
                    // force a reflow so transition will run
                    // eslint-disable-next-line no-unused-expressions
                    panel.offsetHeight;
                }

                item.setAttribute('aria-expanded', 'false');
                panel.style.maxHeight = '0px';
                const header = item.querySelector('.my-accordion-header');
                if (header) header.setAttribute('aria-expanded', 'false');
            }

            // (Optional) expose methods on root for external control
            root.openIndex = (i) => {
                if (items[i]) {
                    const panel = items[i].querySelector('.my-accordion-panel');
                    const inner = items[i].querySelector('.my-accordion-panel-inner');
                    openItem(items[i], panel, inner);
                }
            };
            root.closeIndex = (i) => {
                if (items[i]) closeItem(items[i]);
            };


        })();
    </script>

    {{-- Script: include once per page (place near the bottom) --}}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('productShare');
            if (!container) return;

            const productUrl = container.dataset.url;
            const title = container.dataset.title || document.title;
            const text = container.dataset.text || '';

            const nativeShareBtn = document.getElementById('nativeShareBtn');
            const copyLinkBtn = document.getElementById('copyLinkBtn');
            const whatsappShare = document.getElementById('whatsappShare');
            const facebookShare = document.getElementById('facebookShare');
            const twitterShare = document.getElementById('twitterShare');
            const telegramShare = document.getElementById('telegramShare');
            const emailShare = document.getElementById('emailShare');
            const shareToast = document.getElementById('shareToast');

            function showToast(msg) {
                if (!shareToast) return;
                shareToast.style.display = 'block';
                shareToast.textContent = msg;
                // make visible
                requestAnimationFrame(() => {
                    shareToast.style.opacity = '1';
                    shareToast.setAttribute('aria-hidden', 'false');
                });

                clearTimeout(showToast._t);
                showToast._t = setTimeout(() => {
                    shareToast.style.opacity = '0';
                    shareToast.setAttribute('aria-hidden', 'true');
                    // hide after transition
                    setTimeout(() => {
                        shareToast.style.display = 'none';
                    }, 180);
                }, 2000);
            }

            // Native Web Share API (mobile & supported desktop)
            if (navigator.share) {
                nativeShareBtn.addEventListener('click', async () => {
                    try {
                        await navigator.share({
                            title,
                            text,
                            url: productUrl
                        });
                        showToast('Shared successfully');
                    } catch (err) {
                        // user cancelled or other error
                        console.warn('Share API error', err);
                    }
                });
            } else {
                // if not supported, make native button copy the link
                nativeShareBtn.title = 'Copy link';
                nativeShareBtn.addEventListener('click', () => {
                    doCopy(productUrl);
                });
            }

            // Copy-to-clipboard
            async function doCopy(textToCopy) {
                try {
                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        await navigator.clipboard.writeText(textToCopy);
                    } else {
                        const ta = document.createElement('textarea');
                        ta.value = textToCopy;
                        ta.style.position = 'fixed';
                        ta.style.left = '-9999px';
                        document.body.appendChild(ta);
                        ta.select();
                        document.execCommand('copy');
                        document.body.removeChild(ta);
                    }
                    showToast('Link copied to clipboard');
                } catch (e) {
                    console.error('Copy failed', e);
                    showToast('Unable to copy');
                }
            }

            copyLinkBtn.addEventListener('click', () => doCopy(productUrl));

            // Build social links
            const encodedUrl = encodeURIComponent(productUrl);
            const encodedTitle = encodeURIComponent(title);
            const encodedText = encodeURIComponent(text);

            whatsappShare.href = `https://wa.me/?text=${encodedTitle}%20-%20${encodedUrl}`;
            facebookShare.href = `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`;
            twitterShare.href = `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`;
            telegramShare.href = `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`;
            emailShare.href = `mailto:?subject=${encodedTitle}&body=${encodedText}%0A%0A${encodedUrl}`;

            // optional: open social links in a small popup to keep user on product page
            [whatsappShare, facebookShare, twitterShare, telegramShare].forEach(a => {
                a.addEventListener('click', (e) => {
                    // allow ctrl/cmd/middle-click to open in new tab normally
                    if (e.ctrlKey || e.metaKey || e.button === 1) return;
                    e.preventDefault();
                    window.open(a.href, '_blank',
                        'toolbar=0,location=0,status=0,menubar=0,width=650,height=520');
                    showToast('Opening share dialog');
                });
            });
        });
    </script>

@endsection