@php
 $all_categories = $categories_list->where('featured',1);
 $parents = $all_categories->whereNull('parent_id')->pluck('id')->toArray();
@endphp

@extends('ecommerce::frontend.layout.main2')

@if($product->image!==null)
@php
 $images = explode(',', $product->image);
 $product->image = $images[0];
@endphp
@endif

@section('title'){{ $product->meta_title ?? $product->name ?? 'Ochaka - Multipurpose eCommerce HTML Template' }}@endsection

@section('description'){{ $product->meta_description ?? $product->name ?? 'Themesflat Ochaka - A modern and elegant Multipurpose eCommerce' }}@endsection

@section('content')

@include('ecommerce::frontend.partials.header')

 <div id="wrapper">
        <!-- Page Title -->
        <section class="s-page-title style-2">
            <div class="container">
                <div class="content">
                    <ul class="breadcrumbs-page">
                        <li><a href="{{ url('/') }}" class="h6 link">Home</a></li>
                        <li class="d-flex"><i class="icon icon-caret-right"></i></li>
                        <li><a href="{{ url('/shop') }}" class="h6 link">Shop</a></li>
                        <li class="d-flex"><i class="icon icon-caret-right"></i></li>
                        <li>
                            <h6 class="current-page fw-normal">{{ $product->name }}</h6>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- /Page Title -->
        <!-- Product Main -->
        <section class="flat-single-product flat-spacing-3">
            <div class="tf-main-product section-image-zoom">
                <div class="container">
                    <div class="row">
                        <!-- Product Images -->
                        <div class="col-md-6">
                            <div class="tf-product-media-wrap sticky-top">
                                <div class="product-thumbs-slider thumbs-bottom">
                                    <div class="flat-wrap-media-product">
                                        <div dir="ltr" class="swiper tf-product-media-main" id="gallery-swiper-started">
                                            <div class="swiper-wrapper">
                                                @php
                                                    $images = explode(',', $product->image);
                                                    $main_image = (
                                                        empty($product->image) ||
                                                        $product->image === 'zummXD2dvAtI.png' ||
                                                        empty($images[0])
                                                    ) ? 'no-image.jpg' : $images[0];
                                                @endphp
                                                <div class="swiper-slide">
                                                    <a href="{{ asset('public/images/product/') }}/{{$main_image}}" target="_blank" class="item"
                                                        data-pswp-width="860px" data-pswp-height="1146px">
                                                        <img class="tf-image-zoom lazyload ex1" data-zoom="{{ asset('public/images/product/') }}/{{$main_image}}"
                                                            data-src="{{ asset('public/images/product/') }}/{{$main_image}}"
                                                            src="{{ asset('public/images/product/') }}/{{$main_image}}" alt="{{ $product->name }}">
                                                    </a>
                                                </div>
                                                @if(isset($images) && count($images) > 1)
                                                    @foreach($images as $key => $image)
                                                        @if($key > 0 && $image !== 'zummXD2dvAtI.png')
                                                        <div class="swiper-slide" @if($product->variant_option) data-size="{{ $product->variant_value[0] ? explode(',', $product->variant_value[0])[$key % count(explode(',', $product->variant_value[0]))] : '' }}" @endif @if($product->variant_option && isset($product->variant_value[1])) data-color="{{ explode(',', $product->variant_value[1])[$key % count(explode(',', $product->variant_value[1]))] }}" @endif>
                                                            <a href="{{ asset('public/images/product/') }}/{{$image}}" target="_blank" class="item"
                                                                data-pswp-width="860px" data-pswp-height="1146px">
                                                                <img class="tf-image-zoom lazyload ex1" data-zoom="{{ asset('public/images/product/') }}/{{$image}}"
                                                                    data-src="{{ asset('public/images/product/') }}/{{$image}}"
                                                                    src="{{ asset('public/images/product/') }}/{{$image}}" alt="{{ $product->name }}">
                                                            </a>
                                                        </div>
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div dir="ltr" class="swiper tf-product-media-thumbs other-image-zoom" data-direction="horizontal"
                                        data-preview="4" data-space="12">
                                        <div class="swiper-wrapper stagger-wrap">
                                            <div class="swiper-slide stagger-item">
                                                <div class="item">
                                                    <img class="lazyload" data-src="{{ asset('public/images/product/') }}/{{$main_image}}"
                                                        src="{{ asset('public/images/product/') }}/{{$main_image}}" alt="{{ $product->name }}">
                                                </div>
                                            </div>
                                            @if(isset($images) && count($images) > 1)
                                                @foreach($images as $key => $image)
                                                    @if($key > 0 && $image !== 'zummXD2dvAtI.png')
                                                    <div class="swiper-slide stagger-item" @if($product->variant_option) data-size="{{ $product->variant_value[0] ? explode(',', $product->variant_value[0])[$key % count(explode(',', $product->variant_value[0]))] : '' }}" @endif @if($product->variant_option && isset($product->variant_value[1])) data-color="{{ explode(',', $product->variant_value[1])[$key % count(explode(',', $product->variant_value[1]))] }}" @endif>
                                                        <div class="item">
                                                            <img class="lazyload" data-src="{{ asset('public/images/product/') }}/{{$image}}"
                                                                src="{{ asset('public/images/product/') }}/{{$image}}" alt="{{ $product->name }}">
                                                        </div>
                                                    </div>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Product Images -->
                        <!-- Product Info -->
                        <div class="col-md-6">
                            <div class="tf-product-info-wrap position-relative">
                                <div class="tf-zoom-main sticky-top"></div>
                                <div class="tf-product-info-list other-image-zoom">
                                    <h2 class="product-info-name">{!! $product->name !!}</h2>
                                    <div class="product-info-meta">
                                        <div class="rating">
                                            <div class="d-flex gap-4">
                                                @for($i = 1; $i <= 5; $i++)
                                                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M14 5.4091L8.913 5.07466L6.99721 0.261719L5.08143 5.07466L0 5.4091L3.89741 8.7184L2.61849 13.7384L6.99721 10.9707L11.376 13.7384L10.097 8.7184L14 5.4091Z"
                                                            fill="#EF9122" />
                                                    </svg>
                                                @endfor
                                            </div>
                                            <div class="reviews text-main">({{ $product->reviews_count ?? 0 }} review)</div>
                                        </div>
                                        <div class="people-add text-primary">
                                            <i class="icon icon-shopping-cart-simple"></i>
                                            <span class="h6">{{ $product->recent_orders_count ?? mt_rand(5, 20) }} people just added this product to their cart</span>
                                        </div>
                                    </div>
                                    <div class="tf-product-heading">
                                        <div class="product-info-price price-wrap">
                                            @if(($product->promotion == 1) && (($product->last_date > date('Y-m-d')) || !isset($product->last_date)))
                                                <span class="price-new price-on-sale h2 fw-4">{{ $currency->symbol ?? $currency->code }}{{ $product->promotion_price }}</span>
                                                <span class="price-old h6">{{ $currency->symbol ?? $currency->code }}{{ $product->price }}</span>
                                                <p class="badges-on-sale h6 fw-semibold">
                                                    <span class="number-sale" data-person-sale="{{ round(($product->price - $product->promotion_price) / $product->price * 100) }}">
                                                        -{{ round(($product->price - $product->promotion_price) / $product->price * 100) }}%
                                                    </span>
                                                </p>
                                            @else
                                                <span class="price-new price-on-sale h2 fw-4">{{ $currency->symbol ?? $currency->code }}{{ $product->price }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="tf-product-info-liveview">
                                        <div class="liveview-count">
                                            <i class="icon icon-view"></i>
                                            <span class="count fw-6 h6">{{ mt_rand(10, 50) }}</span>
                                        </div>
                                        <p class="fw-6 h6">People are viewing this right now</p>
                                    </div>
                                    <div class="tf-product-variant">
                                        @if($product->variant_option)
                                            @foreach($product->variant_option as $key => $variant_option)
                                                <div class="variant-picker-item variant-{{ $key == 0 ? 'size' : 'color' }}">
                                                    <div class="variant-picker-label">
                                                        <div class="h4 fw-semibold">
                                                            {{ $variant_option }}
                                                            <span class="variant-picker-label-value value-current{{ $key == 0 ? 'Size' : 'Color' }}">{{ explode(',', $product->variant_value[$key])[0] }}</span>
                                                        </div>
                                                        @if($key == 0)
                                                        <a href="#size-guide" data-bs-toggle="modal" class="size-guide link h6 fw-medium">
                                                            <i class="icon icon-ruler"></i>
                                                            Size Guide
                                                        </a>
                                                        @endif
                                                    </div>
                                                    <div class="variant-picker-values">
                                                        @php
                                                            $val_list = explode(',',$product->variant_value[$key]);
                                                        @endphp
                                                        @if($key == 0)
                                                            @foreach($val_list as $val)
                                                            <span class="size-btn variant_val" data-size="{{ $val }}">{{ $val }}</span>
                                                            @endforeach
                                                        @else
                                                            @foreach($val_list as $val)
                                                            <div class="hover-tooltip tooltip-bot color-btn variant_val" data-color="{{ $val }}">
                                                                <span class="check-color bg-{{ $val == 'Blue' ? 'blue-1' : ($val == 'Gray' ? 'caramel' : ($val == 'Pink' ? 'hot-pink' : ($val == 'Green' ? 'dark-jade' : 'white'))) }}"></span>
                                                                <span class="tooltip">{{ $val }}</span>
                                                            </div>
                                                            @endforeach
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <form method="post" id="add_to_cart_{{ $product->id }}">
                                        @csrf
                                        <div class="tf-product-total-quantity">
                                            <div class="group-btn">
                                                <div class="wg-quantity">
                                                    <button type="button" class="btn-quantity btn-decrease quantity-left-minus">
                                                        <i class="icon icon-minus"></i>
                                                    </button>
                                                    <input type="number" class="quantity-product input-number" name="qty" value="1" min="1" max="{{ $product->qty }}">
                                                    <button type="button" class="btn-quantity btn-increase quantity-right-plus">
                                                        <i class="icon icon-plus"></i>
                                                    </button>
                                                </div>
                                                @if($product->in_stock == 1)
                                                <button type="button" class="tf-btn animate-btn btn-add-to-cart add-to-cart" data-id="{{ $product->id }}" @if($product->is_variant == 1) disabled @endif>
                                                    ADD TO CART
                                                    <i class="icon icon-shopping-cart-simple"></i>
                                                </button>
                                                @else
                                                <button type="button" class="tf-btn animate-btn" disabled>
                                                    OUT OF STOCK
                                                </button>
                                                @endif
                                                <button type="button" class="hover-tooltip tooltip-bot box-icon btn-add-wishlist add-to-wishlist" data-id="{{ $product->id }}">
                                                    <span class="icon icon-heart"></span>
                                                    <span class="tooltip">Add to Wishlist</span>
                                                </button>
                                                <a href="#compare" data-bs-toggle="offcanvas" class="hover-tooltip tooltip-top box-icon">
                                                    <span class="icon icon-compare"></span>
                                                    <span class="tooltip">Compare</span>
                                                </a>
                                            </div>
                                            <a href="javascript:void(0)" class="tf-btn btn-primary w-100 buy-it-now" data-id="{{ $product->id }}" @if($product->is_variant == 1) disabled @endif>BUY IT NOW</a>
                                        </div>
                                    </form>
                                   
                                    <div class="tf-product-delivery-return">
                                        <div class="product-delivery">
                                            <div class="icon icon-clock-cd"></div>
                                            <p class="h6">Estimate delivery times: <span class="fw-7 text-black">7-20 days</span> (International),
                                                <span class="fw-7 text-black">2-4 days</span> (United States).
                                            </p>
                                        </div>
                                        <div class="product-delivery return">
                                            <div class="icon icon-compare"></div>
                                            <p class="h6">Return within <span class="fw-7 text-black">30 days</span> of purchase. Duties & taxes are
                                                non-refundable.</p>
                                        </div>
                                    </div>
                                   
                                    <ul class="tf-product-cate-sku">
                                        <li class="item-cate-sku h6">
                                            <span class="label fw-6 text-black">SKU:</span>
                                            <a href="#" class="value link text-main-2">{{ $product->code ?? 'N/A' }}</a>
                                        </li>
                                        <li class="item-cate-sku h6">
                                            <span class="label fw-6 text-black">Categories:</span>
                                            <span class="value text-main-2">{{ $category->name ?? 'N/A' }}</span>
                                        </li>
                                        <li class="item-cate-sku h6">
                                            <span class="label fw-6 text-black">Tags:</span>
                                            <span class="value text-main-2">{{ $product->tags ?? 'N/A' }}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- /Product Info -->
                    </div>
                </div>
            </div>
            <div class="tf-sticky-btn-atc">
                <div class="container">
                    <div class="tf-height-observer w-100 d-flex align-items-center">
                        <div class="tf-sticky-atc-product d-flex align-items-center">
                            <div class="tf-mini-cart-item align-items-start">
                                <div class="tf-mini-cart-image">
                                    <img class="lazyload" data-src="{{ asset('public/images/product/') }}/{{$main_image}}"
                                        src="{{ asset('public/images/product/') }}/{{$main_image}}" alt="{{ $product->name }}">
                                </div>
                                <div class="tf-mini-cart-info">
                                    <h6 class="title">
                                        <a href="{{ url('/product') }}/{{$product->slug}}/{{$product->id}}" class="link text-line-clamp-1">{{ $product->name }}</a>
                                    </h6>
                                    <div class="size">
                                        <div class="text-small text-main-2 sub">Size: <span id="sticky-size">M</span></div>
                                        <div class="text-small text-main-2 sub">Color: <span id="sticky-color">Blue</span></div>
                                    </div>
                                    <div class="h6 fw-semibold">
                                        @if(($product->promotion == 1) && (($product->last_date > date('Y-m-d')) || !isset($product->last_date)))
                                            {{ $currency->symbol ?? $currency->code }}{{ $product->promotion_price }}
                                        @else
                                            {{ $currency->symbol ?? $currency->code }}{{ $product->price }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tf-sticky-atc-infos">
                            <form class="" id="sticky_add_to_cart_{{ $product->id }}">
                                @csrf
                                @if($product->variant_option)
                                    <div class="tf-sticky-atc-variant-price">
                                        <h6 class="title">Size:</h6>
                                        <div class="tf-select style-1">
                                            <select class="font-sora sticky-size-select" id="sticky-size-select">
                                                @php
                                                    $val_list = explode(',',$product->variant_value[0]);
                                                @endphp
                                                @foreach($val_list as $val)
                                                <option>{{ $val }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                @endif
                                <div class="tf-product-info-quantity">
                                    <h6 class="title">Quantity:</h6>
                                    <div class="wg-quantity">
                                        <button type="button" class="btn-quantity minus-btn">
                                            <i class="icon icon-minus"></i>
                                        </button>
                                        <input type="number" class="quantity-product sticky-quantity" name="qty" value="1" min="1" max="{{ $product->qty }}">
                                        <button type="button" class="btn-quantity plus-btn">
                                            <i class="icon icon-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="tf-sticky-atc-btns">
                                    @if($product->in_stock == 1)
                                    <button type="button" class="tf-btn animate-btn btn-add-to-cart add-to-cart-sticky" data-id="{{ $product->id }}" @if($product->is_variant == 1) disabled @endif>
                                        Add to cart
                                        <i class="icon icon-shopping-cart-simple"></i>
                                    </button>
                                    @else
                                    <button type="button" class="tf-btn animate-btn" disabled>
                                        OUT OF STOCK
                                    </button>
                                    @endif
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </section>
        <!-- /Product Main -->
       
        <!-- Product Description -->
        <section class="themesFlat">
            <div class="container">
                <div class="flat-animate-tab tab-style-1">
                    <ul class="menu-tab menu-tab-1" role="tablist">
                        <li class="nav-tab-item" role="presentation">
                            <a href="#descriptions" class="tab-link active" data-bs-toggle="tab">Descriptions</a>
                        </li>
                       
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane wd-product-descriptions active show" id="descriptions" role="tabpanel">
                            <div class="tab-descriptions">
                                <div class="h6 desc">{!! $product->product_details !!}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /Product Description -->
        
        <!-- Also Like -->
        @if(isset($related_products) && count($related_products) > 0)
        <section class="flat-spacing-3">
            <div class="container">
                <h1 class="sect-title text-center">You May Also Like</h1>
                <div dir="ltr" class="swiper tf-swiper wrap-sw-over" data-preview="4" data-tablet="3" data-mobile-sm="2" data-mobile="2"
                    data-space-lg="48" data-space-md="30" data-space="12" data-pagination="2" data-pagination-sm="2" data-pagination-md="3"
                    data-pagination-lg="4">
                    <div class="swiper-wrapper">
                        @foreach($related_products as $related_product)
                        <div class="swiper-slide">
                            <div class="card-product">
                                <div class="card-product_wrapper">
                                    <a href="{{ url('/product') }}/{{$related_product->slug}}/{{$related_product->id}}" class="product-img">
                                        @php
                                            $related_images = explode(',', $related_product->image);
                                            $related_main_image = (
                                                empty($related_product->image) ||
                                                $related_product->image === 'zummXD2dvAtI.png' ||
                                                empty($related_images[0])
                                            ) ? 'no-image.jpg' : $related_images[0];
                                        @endphp
                                        <img class="lazyload img-product" src="{{ asset('public/images/product/') }}/{{$related_main_image}}"
                                            data-src="{{ asset('public/images/product/') }}/{{$related_main_image }}" alt="{{ $related_product->name }}">
                                        @if(isset($related_images[1]) && $related_images[1] !== 'zummXD2dvAtI.png')
                                        <img class="lazyload img-hover" src="{{ asset('public/images/product/') }}/{{$related_images[1] }}" data-src="{{ asset('public/images/product/') }}/{{$related_images[1] }}"
                                            alt="{{ $related_product->name }}">
                                        @endif
                                    </a>
                                    <div class="variant-box">
                                        @if($related_product->variant_option && isset($related_product->variant_value[0]))
                                        <ul class="product-size_list">
                                            @php
                                                $related_val_list = explode(',',$related_product->variant_value[0]);
                                            @endphp
                                            @foreach($related_val_list as $val)
                                            <li class="size-item h6">{{ $val }}</li>
                                            @endforeach
                                        </ul>
                                        @endif
                                    </div>
                                    <ul class="product-action_list">
                                        <li>
                                            <button type="button" class="hover-tooltip tooltip-left box-icon add-to-cart-related" data-id="{{ $related_product->id }}">
                                                <span class="icon icon-shopping-cart-simple"></span>
                                                <span class="tooltip">Add to cart</span>
                                            </button>
                                        </li>
                                        <li class="wishlist">
                                            <button type="button" class="hover-tooltip tooltip-left box-icon add-to-wishlist" data-id="{{ $related_product->id }}">
                                                <span class="icon icon-heart"></span>
                                                <span class="tooltip">Add to Wishlist</span>
                                            </button>
                                        </li>
                                        <li class="compare">
                                            <a href="#compare" data-bs-toggle="offcanvas" class="hover-tooltip tooltip-left box-icon">
                                                <span class="icon icon-compare"></span>
                                                <span class="tooltip">Compare</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#quickView" data-bs-toggle="modal" class="hover-tooltip tooltip-left box-icon">
                                                <span class="icon icon-view"></span>
                                                <span class="tooltip">Quick view</span>
                                            </a>
                                        </li>
                                    </ul>
                                    @if(($related_product->promotion == 1) && (($related_product->last_date > date('Y-m-d')) || !isset($related_product->last_date)))
                                    <ul class="product-badge_list">
                                        <li class="product-badge_item flash-sale"><i class="icon icon-thunder"></i> Flash sale</li>
                                    </ul>
                                    @endif
                                </div>
                                <div class="card-product_info">
                                    <a href="{{ url('/product') }}/{{$related_product->slug}}/{{$related_product->id }}" class="name-product h4 link">{{ $related_product->name }}</a>
                                    <div class="price-wrap">
                                        @if(($related_product->promotion == 1) && (($related_product->last_date > date('Y-m-d')) || !isset($related_product->last_date)))
                                        <span class="price-old h6 fw-normal">{{ $currency->symbol ?? $currency->code }}{{ $related_product->price }}</span>
                                        <span class="price-new h6">{{ $currency->symbol ?? $currency->code }}{{ $related_product->promotion_price }}</span>
                                        @else
                                        <span class="price-new h6">{{ $currency->symbol ?? $currency->code }}{{ $related_product->price }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="sw-dot-default tf-sw-pagination"></div>
                </div>
            </div>
        </section>
        @endif
        <!-- /Also Like -->
    </div>

    <!-- Floating Cart Icon -->
    <div class="floating-cart-icon" id="floating-cart-icon">
        <i class="icon icon-shopping-cart-simple"></i>
        <span class="cart-count cart-count">{{ $total_qty ?? 0 }}</span>
    </div>

    <style>
        .floating-cart-icon {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: #c8102e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            transition: all 0.3s ease;
        }
        
        .floating-cart-icon:hover {
            transform: scale(1.1);
            background-color: #333;
        }
        
        .floating-cart-icon .cart-count {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #ff5252;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }
    </style>
@endsection

@section('script')
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.6.1/jquery.zoom.min.js"></script>
<script src="{{ asset('public/frontend/js/swiper.min.js') }}"></script>
<script type="text/javascript">
    "use strict";

    // Store max quantity for validation
    var maxQty = {{ $product->qty }};

    // Initialize Swiper for sliders
    if ($('.tf-swiper').length > 0) {
        $('.tf-swiper').each(function() {
            var swiper = new Swiper(this, {
                slidesPerView: $(this).data('preview') || 4,
                spaceBetween: $(this).data('space') || 30,
                loop: $(this).data('loop') || false,
                pagination: {
                    el: '.tf-sw-pagination',
                    clickable: true,
                },
                autoplay: {
                    delay: $(this).data('delay') || 3000,
                },
                breakpoints: {
                    320: {
                        slidesPerView: $(this).data('mobile') || 1,
                        spaceBetween: $(this).data('space') || 10,
                    },
                    640: {
                        slidesPerView: $(this).data('mobile-sm') || 2,
                        spaceBetween: $(this).data('space-md') || 20,
                    },
                    768: {
                        slidesPerView: $(this).data('tablet') || 3,
                        spaceBetween: $(this).data('space-md') || 20,
                    },
                    1024: {
                        slidesPerView: $(this).data('preview') || 4,
                        spaceBetween: $(this).data('space-lg') || 30,
                    }
                }
            });
        });
    }

    // Initialize product gallery swiper
    if ($('#gallery-swiper-started').length > 0) {
        var gallerySwiper = new Swiper('#gallery-swiper-started', {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            thumbs: {
                swiper: {
                    el: '.tf-product-media-thumbs',
                    slidesPerView: 4,
                    spaceBetween: 12,
                    direction: 'horizontal',
                }
            }
        });
    }

    // ZOOM
    $('.ex1').zoom();

    // Sync sticky quantity with main quantity
    function syncQuantity(sourceInput, targetInput) {
        var value = parseInt(sourceInput.val());
        if (value < 1) value = 1;
        if (value > maxQty) value = maxQty;
        targetInput.val(value);
    }

    // Variant selection
    @if($product->is_variant == 1)
    $(document).on('click', '.variant_val', function() {
        var parentVariant = $(this).closest('.variant-picker-item');
        parentVariant.find('.variant_val').removeClass('selected');
        $(this).addClass('selected');

        // Update label
        if($(this).data('size')) {
            $('.value-currentSize').text($(this).data('size'));
        }
        if($(this).data('color')) {
            $('.value-currentColor').text($(this).data('color'));
        }

        // Enable buttons if all variants selected
        if($('.variant_val.selected').length == {{count($product->variant_option)}}) {
            $('.add-to-cart').attr('disabled', false);
            $('.add-to-cart-sticky').attr('disabled', false);
            $('.buy-it-now').attr('disabled', false);
        } else {
            $('.add-to-cart').attr('disabled', true);
            $('.add-to-cart-sticky').attr('disabled', true);
            $('.buy-it-now').attr('disabled', true);
        }
    });

    // Update sticky variant when changed
    $(document).on('change', '.sticky-size-select', function() {
        $('#sticky-size').text($(this).val());
    });
    @endif

    // Quantity buttons - Main section (FIXED: increment by 1 only)
    $(document).on('click', '.quantity-left-minus', function(e) {
        e.preventDefault();
        var input = $(this).closest('.wg-quantity').find('input[name="qty"]');
        var value = parseInt(input.val());
        if (value > 1) {
            input.val(value - 1).trigger('change');
        }
    });

    $(document).on('click', '.quantity-right-plus', function(e) {
        e.preventDefault();
        var input = $(this).closest('.wg-quantity').find('input[name="qty"]');
        var value = parseInt(input.val());
        if (value < maxQty) {
            input.val(value + 1).trigger('change');
        } else {
            $('.alert').addClass('alert-custom show');
            $('.alert-custom .message').html('Maximum available quantity is ' + maxQty);
            setTimeout(function() {
                $('.alert').removeClass('show');
            }, 3000);
        }
    });

    // Quantity buttons - Sticky section (FIXED: increment by 1 only)
    $(document).on('click', '.minus-btn', function(e) {
        e.preventDefault();
        var input = $(this).closest('.wg-quantity').find('.sticky-quantity');
        var value = parseInt(input.val());
        if (value > 1) {
            input.val(value - 1).trigger('change');
        }
    });

    $(document).on('click', '.plus-btn', function(e) {
        e.preventDefault();
        var input = $(this).closest('.wg-quantity').find('.sticky-quantity');
        var value = parseInt(input.val());
        if (value < maxQty) {
            input.val(value + 1).trigger('change');
        } else {
            $('.alert').addClass('alert-custom show');
            $('.alert-custom .message').html('Maximum available quantity is ' + maxQty);
            setTimeout(function() {
                $('.alert').removeClass('show');
            }, 3000);
        }
    });

    // Sync quantities when changed manually
    $(document).on('change', 'input[name="qty"]', function() {
        var value = parseInt($(this).val());
        if (value < 1) value = 1;
        if (value > maxQty) {
            value = maxQty;
            $('.alert').addClass('alert-custom show');
            $('.alert-custom .message').html('Maximum available quantity is ' + maxQty);
            setTimeout(function() {
                $('.alert').removeClass('show');
            }, 3000);
        }
        $(this).val(value);
        // Sync with sticky quantity
        $('.sticky-quantity').val(value);
    });

    $(document).on('change', '.sticky-quantity', function() {
        var value = parseInt($(this).val());
        if (value < 1) value = 1;
        if (value > maxQty) {
            value = maxQty;
            $('.alert').addClass('alert-custom show');
            $('.alert-custom .message').html('Maximum available quantity is ' + maxQty);
            setTimeout(function() {
                $('.alert').removeClass('show');
            }, 3000);
        }
        $(this).val(value);
        // Sync with main quantity
        $('input[name="qty"]').val(value);
    });

    // Add to cart functionality - Main section (FIXED: gets correct quantity)
    $(document).on('click', '.add-to-cart', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        
        // Get quantity from the main form - FIXED
        var qty = $('#add_to_cart_' + id + ' input[name="qty"]').val();
        
        @if($product->is_variant == 1)
        var variant = [];
        $('.variant_val.selected').each(function(){
            variant.push($(this).text().trim());
        });
        
        if(variant.length === 0) {
            $('.alert').addClass('alert-custom show');
            $('.alert-custom .message').html('Please select product options');
            setTimeout(function() {
                $('.alert').removeClass('show');
            }, 4000);
            return false;
        }
        @endif
        
        var route = "{{ route('addToCart') }}";
        var btn = $(this);
        var btn_text = btn.html();
        
        btn.html('<span class="spinner-border spinner-border-sm" role="status"><span class="sr-only">...</span></span>');

        $.ajax({
            url: route,
            type: "POST",
            data: {
                @if($product->is_variant == 1)
                product_id: id+','+variant,
                qty: qty,
                variant: variant,
                @else
                product_id: id,
                qty: qty,
                variant: 0,
                @endif
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response) {
                    $('.alert').addClass('alert-custom show');
                    $('.alert-custom .message').html(response.success);
                    $('.cart-count').html(response.total_qty);
                    updateCartSidebar();
                    btn.html(btn_text);
                    setTimeout(function() {
                        $('.alert').removeClass('show');
                    }, 4000);
                    $('#shoppingCart').offcanvas('show');
                }
            },
            error: function(xhr, status, error) {
                btn.html(btn_text);
                $('.alert').addClass('alert-custom show');
                $('.alert-custom .message').html('Error adding product to cart');
                setTimeout(function() {
                    $('.alert').removeClass('show');
                }, 4000);
            }
        });
    });

    // Add to cart functionality - Sticky section (FIXED: gets correct quantity)
    $(document).on('click', '.add-to-cart-sticky', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        
        // Get quantity from sticky form - FIXED
        var qty = $('#sticky_add_to_cart_' + id + ' .sticky-quantity').val();
        
        @if($product->is_variant == 1)
        var variant = [];
        $('.variant_val.selected').each(function(){
            variant.push($(this).text().trim());
        });
        
        if(variant.length === 0) {
            $('.alert').addClass('alert-custom show');
            $('.alert-custom .message').html('Please select product options');
            setTimeout(function() {
                $('.alert').removeClass('show');
            }, 4000);
            return false;
        }
        @endif
        
        var route = "{{ route('addToCart') }}";
        var btn = $(this);
        var btn_text = btn.html();
        
        btn.html('<span class="spinner-border spinner-border-sm" role="status"><span class="sr-only">...</span></span>');

        $.ajax({
            url: route,
            type: "POST",
            data: {
                @if($product->is_variant == 1)
                product_id: id+','+variant,
                qty: qty,
                variant: variant,
                @else
                product_id: id,
                qty: qty,
                variant: 0,
                @endif
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response) {
                    $('.alert').addClass('alert-custom show');
                    $('.alert-custom .message').html(response.success);
                    $('.cart-count').html(response.total_qty);
                    updateCartSidebar();
                    btn.html(btn_text);
                    setTimeout(function() {
                        $('.alert').removeClass('show');
                    }, 4000);
                    $('#shoppingCart').offcanvas('show');
                }
            },
            error: function(xhr, status, error) {
                btn.html(btn_text);
                $('.alert').addClass('alert-custom show');
                $('.alert-custom .message').html('Error adding product to cart');
                setTimeout(function() {
                    $('.alert').removeClass('show');
                }, 4000);
            }
        });
    });

    // Buy it now functionality (FIXED: gets correct quantity)
    $(document).on('click', '.buy-it-now', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        
        // Get quantity from main form - FIXED
        var qty = $('#add_to_cart_' + id + ' input[name="qty"]').val();
        
        @if($product->is_variant == 1)
        var variant = [];
        $('.variant_val.selected').each(function(){
            variant.push($(this).text().trim());
        });
        
        if(variant.length === 0) {
            $('.alert').addClass('alert-custom show');
            $('.alert-custom .message').html('Please select product options');
            setTimeout(function() {
                $('.alert').removeClass('show');
            }, 4000);
            return false;
        }
        @endif
        
        var route = "{{ route('addToCart') }}";
        var btn = $(this);
        var btn_text = btn.html();
        
        btn.html('<span class="spinner-border spinner-border-sm" role="status"><span class="sr-only">...</span></span>');

        $.ajax({
            url: route,
            type: "POST",
            data: {
                @if($product->is_variant == 1)
                product_id: id+','+variant,
                qty: qty,
                variant: variant,
                @else
                product_id: id,
                qty: qty,
                variant: 0,
                @endif
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response) {
                    $('.cart-count').html(response.total_qty);
                    btn.html(btn_text);
                    window.location.href = "{{ url('checkout') }}";
                }
            },
            error: function(xhr, status, error) {
                btn.html(btn_text);
                $('.alert').addClass('alert-custom show');
                $('.alert-custom .message').html('Error adding product to cart');
                setTimeout(function() {
                    $('.alert').removeClass('show');
                }, 4000);
            }
        });
    });

    // Add to cart for related products
    $(document).on('click', '.add-to-cart-related', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        var route = "{{ route('addToCart') }}";
        var btn = $(this);
        var btn_html = btn.html();
        
        btn.html('<span class="spinner-border spinner-border-sm"></span>');

        $.ajax({
            url: route,
            type: "POST",
            data: {
                product_id: id,
                qty: 1,
                variant: 0,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response) {
                    $('.alert').addClass('alert-custom show');
                    $('.alert-custom .message').html(response.success);
                    $('.cart-count').html(response.total_qty);
                    updateCartSidebar();
                    btn.html(btn_html);
                    setTimeout(function() {
                        $('.alert').removeClass('show');
                    }, 4000);
                    $('#shoppingCart').offcanvas('show');
                }
            },
            error: function() {
                btn.html(btn_html);
                $('.alert').addClass('alert-custom show');
                $('.alert-custom .message').html('Error adding product to cart');
                setTimeout(function() {
                    $('.alert').removeClass('show');
                }, 4000);
            }
        });
    });

    // Function to update cart sidebar
    function updateCartSidebar() {
        var route = "{{ route('cart') }}";
        $.ajax({
            url: route,
            type: "GET",
            success: function(response) {
                if (response.cart) {
                    $('.tf-mini-cart-items').html('');
                    $.each(response.cart, function(index, value) {
                        var image = value.image.split(',');
                        var variant = '';
                        var true_variant = '';
                        var id = value.id;
                        if(value.variant != 0){
                            true_variant = value.variant;
                            variant = '(<span>'+ value.variant.join(' | ') +'</span>)'; 
                            id = value.id+'-'+value.variant.join('-')
                        }
                        var item = '<div class="tf-mini-cart-item file-delete" id="cart-item-' + id + '"><div class="tf-mini-cart-image"><img class="lazyload" src="{{ asset("public/images/product/")}}/'+image[0]+'" alt="img-product"></div><div class="tf-mini-cart-info"><div class="text-small text-main-2 sub">Product</div><h6 class="title"><a href="{{ url("product")}}/' + value.slug + '/' + value.id + '" class="link text-line-clamp-1">' + value.name + '</a></h6><div class="d-flex justify-content-between align-items-center"><div class="h6 fw-semibold"><span class="number">' + value.qty + 'x</span><span class="price text-primary tf-mini-card-price">{{$currency->symbol}}' + (value.total_price / value.qty).toFixed(2) + '</span></div><i class="icon link icon-close remove-from-cart" data-id="' + value.id + '" data-variant="' + true_variant + '"></i></div></div></div>';
                        $('.tf-mini-cart-items').append(item);
                    });
                    $('.tf-totals-total-value').html('{{$currency->symbol}}' + response.subTotal.toFixed(2));
                    $('.prd-count').html(response.total_qty);
                    $('.cart-count').html(response.total_qty);

                    if (parseFloat(response.subTotal) < 1) {
                        $('.tf-mini-cart-items').html('<div class="box-text_empty type-shop_cart"><div class="shop-empty_top"><span class="icon"><i class="icon-shopping-cart-simple"></i></span><h3 class="text-emp fw-normal">Your cart is empty</h3><p class="h6 text-main">Your cart is currently empty. Let us assist you in finding the right product</p></div><div class="shop-empty_bot"><a href="{{ url("shop") }}" class="tf-btn animate-btn">Shopping</a><a href="{{ url("/") }}" class="tf-btn style-line">Back to home</a></div></div>');
                        $('.tf-mini-cart-bottom-wrap').addClass('d-none');
                    } else {
                        $('.tf-mini-cart-bottom-wrap').removeClass('d-none');
                    }
                }
            },
        });
    }

    // Remove from cart
    $(document).on('click', '.remove-from-cart', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        var variant = $(this).data('variant');

        var route = "{{ route('removeFromCart') }}";

        $.ajax({
            url: route,
            type: "POST",
            data: {
                product_id: id,
                variant: variant,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response) {
                    $('.alert').addClass('alert-custom show');
                    $('.alert-custom .message').html(response.success);
                    $('.cart-count').html(response.total_qty);
                    updateCartSidebar();
                    setTimeout(function() {
                        $('.alert').removeClass('show');
                    }, 4000);
                }
            },
        });
    });

    // Wishlist functionality
    $(document).on('click', '.add-to-wishlist', function(e) {
        e.preventDefault();
        @if(auth()->user() && (auth()->user()->role_id == 5 || auth()->user()->role_id == 1))
        var product_id = $(this).data('id');
        $(this).find('span').css('color','var(--theme-color)');
        $(this).removeClass('add-to-wishlist');
        $.ajax({
            type: "get",
            url: "{{url('customer/wishlist')}}/" + product_id,
            success: function(data) {
                if(data == 'fail'){
                    $('.alert').addClass('alert-custom show');
                    $('.alert-custom .message').html('{{trans("file.Product already on wishlist")}}');
                } else {
                    $('.alert').addClass('alert-custom show');
                    $('.alert-custom .message').html('{{trans("file.Product added to wishlist")}}');
                }
                setTimeout(function() {
                    $('.alert').removeClass('show');
                }, 4000);
            }
        })  
        @else
            $('.alert').addClass('alert-custom show');
            $('.alert-custom .message').html('{{trans("file.Please login first")}}');
            setTimeout(function() {
                $('.alert').removeClass('show');
            }, 4000);
        @endif
    });

    // Floating cart icon click handler
    $(document).on('click', '#floating-cart-icon', function() {
        $('#shoppingCart').offcanvas('show');
    });

    // Initialize cart sidebar when page loads
    $(document).ready(function() {
        updateCartSidebar();
    });
</script>
<style>
/* Product Images - Professional Styling */
.tf-product-media-wrap {
    position: sticky;
    top: 20px;
}

.tf-product-media-main .swiper-slide {
    background: #f8f8f8;
    border-radius: 12px;
    overflow: hidden;
    padding: 20px;
}

.tf-product-media-main .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-height: 600px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Thumbnail Gallery */
.tf-product-media-thumbs .swiper-slide {
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tf-product-media-thumbs .swiper-slide:hover,
.tf-product-media-thumbs .swiper-slide-thumb-active {
    border-color: #bb9c59;
}

.tf-product-media-thumbs .swiper-slide img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

/* Product Info Section */
.tf-product-info-wrap {
    padding: 20px 0;
}

.product-info-name {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.3;
}

.product-info-price .price-new {
    color: #bb9c59;
    font-size: 36px;
    font-weight: 700;
}

.product-info-price .price-old {
    color: #999;
    text-decoration: line-through;
    font-size: 24px;
    margin-left: 12px;
}

/* Badges */
.badges-on-sale {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    margin-left: 12px;
    font-size: 14px;
}

/* Add to Cart Button */
.tf-btn.btn-add-to-cart {
    background: linear-gradient(135deg, #bb9c59 0%, #d4b574 100%);
    color: #fff;
    padding: 16px 40px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.tf-btn.btn-add-to-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(187,156,89,0.3);
}

/* Buy It Now Button */
.tf-btn.buy-it-now {
    background: #1a1a1a;
    color: #fff;
    padding: 16px 40px;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 12px;
}

.tf-btn.buy-it-now:hover {
    background: #333;
}

/* Quantity Selector */
.wg-quantity {
    display: flex;
    align-items: center;
    border: 2px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.wg-quantity button {
    width: 40px;
    height: 48px;
    background: #f8f8f8;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wg-quantity button:hover {
    background: #bb9c59;
    color: #fff;
}

.wg-quantity input {
    width: 60px;
    height: 48px;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

/* Variant Selection */
.variant-picker-item {
    margin-bottom: 24px;
}

.variant-picker-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.size-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.size-btn:hover,
.size-btn.selected {
    border-color: #bb9c59;
    background: #bb9c59;
    color: #fff;
}

/* Related Products */
.card-product {
    transition: all 0.3s ease;
}

.card-product:hover {
    transform: translateY(-8px);
}

.card-product_wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f8f8;
    margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 991px) {
    .tf-product-media-wrap {
        position: relative;
        margin-bottom: 30px;
    }
    
    .product-info-name {
        font-size: 24px;
    }
    
    .product-info-price .price-new {
        font-size: 28px;
    }
}
</style>
@endsection