@extends('layouts.user')



@section('content')

<!-- page-title -->

<div class="page-title" style="background-image: url({{ asset('user_assets/images/section/page-title.jpg') }});">

    <div class="container-full">

        <div class="row">

            <div class="col-12">

                <h3 class="heading text-center">Products</h3>

                <ul class="breadcrumbs d-flex align-items-center justify-content-center">

                    <li><a class="link" href="{{ url('/') }}">Homepage</a></li>

                    <li><i class="icon-arrRight"></i></li>

                    <li>Products</li>

                </ul>

            </div>

        </div>

    </div>

</div>

<!-- /page-title -->

<!-- Filter Offcanvas -->

<div class="offcanvas offcanvas-start" tabindex="-1" id="filterShop" aria-labelledby="filterShopLabel">

    <div class="offcanvas-header">

        <h5 class="offcanvas-title" id="filterShopLabel">Filter Products</h5>

        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>

    </div>

    <div class="offcanvas-body">

        <form id="filterForm" action="{{ url('/product') }}" method="GET">

            <!-- Hidden inputs to hold selected categories and subcategories -->

            <input type="hidden" name="category[]" id="categoryInput" value="{{ implode(',', (array)request()->input('category')) }}">

            <input type="hidden" name="sub_category[]" id="subCategoryInput" value="{{ implode(',', (array)request()->input('sub_category')) }}">



            <!-- Categories Filter -->

            <div class="widget-facet facet-categories">

                <h6 class="facet-title">Product Categories</h6>

                <ul class="facet-content">

                    @foreach($categories as $category)

                    @php

                        $isActive = in_array($category->category_id, (array)request()->input('category', []));

                    @endphp

                    <li>

                        <a href="javascript:void(0);" class="categories-item {{ $isActive ? 'active' : '' }}" data-id="{{ $category->category_id }}">

                            {{ $category->category_name }}

                            <span class="count-cate">({{ $category->products_count ?? 0 }})</span>

                        </a>

                    </li>

                    @endforeach

                </ul>

            </div>



            <!-- Subcategories Filter -->

            <div class="widget-facet facet-categories">

                <h6 class="facet-title">Product Subcategories</h6>

                <ul class="facet-content">

                    @foreach($subCategories as $subCategory)

                    @php

                        $isActive = in_array($subCategory->sub_category_id, (array)request()->input('sub_category', []));

                    @endphp

                    <li>

                        <a href="javascript:void(0);" class="categories-item {{ $isActive ? 'active' : '' }}" data-id="{{ $subCategory->sub_category_id }}">

                            {{ $subCategory->sub_category_name }}

                            <span class="count-cate">({{ $subCategory->products_count ?? 0 }})</span>

                        </a>

                    </li>

                    @endforeach

                </ul>

            </div>



            <!-- Price Filter -->

            <div class="widget-facet facet-price">

                <h6 class="facet-title">Price</h6>

                @php

                    $minPrice = $products->min('sale_price') ?? 0;

                    $maxPrice = $products->max('sale_price') ?? 500;

                @endphp

                <div class="price-val-range" id="price-value-range" data-min="{{ $minPrice }}" data-max="{{ $maxPrice }}"></div>

                <div class="box-price-product">

                    <div class="box-price-item">

                        <span class="title-price">Min price</span>

                        <div class="price-val" id="price-min-value" data-currency="$">{{ $minPrice }}</div>

                    </div>

                    <div class="box-price-item">

                        <span class="title-price">Max price</span>

                        <div class="price-val" id="price-max-value" data-currency="$">{{ $maxPrice }}</div>

                    </div>

                </div>

            </div>



            <!-- Size Filter -->

            <div class="widget-facet facet-size">

                <h6 class="facet-title">Size</h6>

                <div class="facet-size-box size-box">

                    @php

                        $sizes = $variants->where('variable_name', 'Size')

                                          ->pluck('variable_value')

                                          ->unique();

                    @endphp

                    @foreach($sizes as $size)

                        <span class="size-item size-check">{{ $size }}</span>

                    @endforeach

                </div>

            </div>



            <!-- Color Filter -->

            <div class="widget-facet facet-color">

                <h6 class="facet-title">Colors</h6>

                <div class="facet-color-box">

                    @php

                        $colors = $variants->where('variable_name', 'Color')

                                           ->pluck('variable_value')

                                           ->unique();

                        $colorClasses = [

                            'Pink'       => 'bg-light-pink-2',

                            'Red'        => 'bg-red',

                            'Beige'      => 'bg-beige-2',

                            'Orange'     => 'bg-orange-2',

                            'Green'      => 'bg-light-green',

                            'Black'      => 'bg-main',

                            'White'      => 'bg-white line-black',

                            'Purple'     => 'bg-purple-3',

                            'Grey'       => 'bg-grey',

                            'Light Blue' => 'bg-light-blue-5',

                            'Dark Blue'  => 'bg-dark-blue',

                        ];

                    @endphp

                    @foreach($colors as $color)

                        <div class="color-item color-check">

                            <span class="color {{ $colorClasses[$color] ?? 'bg-grey' }}"></span>{{ $color }}

                        </div>

                    @endforeach

                </div>

            </div>



            <!-- Availability Filter -->

            <div class="widget-facet facet-fieldset">

                <h6 class="facet-title">Availability</h6>

                <div class="box-fieldset-item">

                    <fieldset class="fieldset-item">

                        <input type="radio" name="availability" class="tf-check" id="inStock" value="in-stock" {{ request()->input('availability') === 'in-stock' ? 'checked' : '' }}>

                        <label for="inStock">In stock <span class="count-stock">({{ $variants->where('stock', '>', 0)->count() }})</span></label>

                    </fieldset>

                    <fieldset class="fieldset-item">

                        <input type="radio" name="availability" class="tf-check" id="outStock" value="out-of-stock" {{ request()->input('availability') === 'out-of-stock' ? 'checked' : '' }}>

                        <label for="outStock">Out of stock <span class="count-stock">({{ $variants->where('stock', '<=', 0)->count() }})</span></label>

                    </fieldset>

                    <fieldset class="fieldset-item">

                        <input type="radio" name="availability" class="tf-check" id="allStock" value="" {{ !request()->input('availability') ? 'checked' : '' }}>

                        <label for="allStock">All <span class="count-stock">({{ $variants->count() }})</span></label>

                    </fieldset>

                </div>

            </div>



            <button type="submit" class="btn btn-primary">Apply Filters</button>

            <button type="button" id="reset-filter" class="btn btn-secondary mt-2">Reset Filters</button>

        </form>

    </div>

</div>



<!-- Reset Filter Script -->

<script>

    document.getElementById('reset-filter').addEventListener('click', function() {

        document.querySelectorAll('#filterForm input').forEach(input => input.checked = false);

        document.querySelector('#filterForm').submit();

    });

</script>



<section class="flat-spacing">

    <div class="container">

        <!-- Shop controls -->

        <div class="tf-shop-control">

            <div class="tf-control-filter">

                <a href="#filterShop" data-bs-toggle="offcanvas" aria-controls="filterShop" class="tf-btn-filter">

                    <span class="icon icon-filter"></span><span class="text">Filters</span>

                </a>

                <div class="d-none d-lg-flex shop-sale-text">

                    <i class="icon icon-checkCircle"></i>

                    <p class="text-caption-1">Shop sale items only</p>

                </div>

            </div>

            <ul class="tf-control-layout">

                <li class="tf-view-layout-switch sw-layout-list list-layout" data-value-layout="list">

                    <div class="item">

                        <svg class="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

                            <circle cx="3" cy="6" r="2.5" stroke="#181818"/>

                            <rect x="7.5" y="3.5" width="12" height="5" rx="2.5" stroke="#181818"/>

                            <circle cx="3" cy="14" r="2.5" stroke="#181818"/>

                            <rect x="7.5" y="11.5" width="12" height="5" rx="2.5" stroke="#181818"/>

                        </svg>     

                    </div>

                </li>

                <li class="tf-view-layout-switch sw-layout-2" data-value-layout="tf-col-2">

                    <div class="item">

                        <svg class="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

                            <circle cx="6" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="14" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="6" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="14" cy="14" r="2.5" stroke="#181818"/>

                        </svg>   

                    </div>

                </li>

                <li class="tf-view-layout-switch sw-layout-3" data-value-layout="tf-col-3">

                    <div class="item">

                        <svg class="icon" width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">

                            <circle cx="3" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="11" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="19" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="3" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="11" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="19" cy="14" r="2.5" stroke="#181818"/>

                        </svg>                                    

                    </div>

                </li>

                <li class="tf-view-layout-switch sw-layout-4 active" data-value-layout="tf-col-4">

                    <div class="item">

                        <svg class="icon" width="30" height="20" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">

                            <circle cx="3" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="11" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="19" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="27" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="3" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="11" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="19" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="27" cy="14" r="2.5" stroke="#181818"/>

                        </svg>

                    </div>

                </li>

                <li class="tf-view-layout-switch sw-layout-5" data-value-layout="tf-col-5">

                    <div class="item">

                        <svg class="icon" width="38" height="20" viewBox="0 0 38 20" fill="none" xmlns="http://www.w3.org/2000/svg">

                            <circle cx="3" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="11" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="19" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="27" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="35" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="3" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="11" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="19" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="27" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="35" cy="14" r="2.5" stroke="#181818"/>

                        </svg>                                    

                    </div>

                </li>

                <li class="tf-view-layout-switch sw-layout-6" data-value-layout="tf-col-6">

                    <div class="item">

                        <svg class="icon" width="46" height="20" viewBox="0 0 46 20" fill="none" xmlns="http://www.w3.org/2000/svg">

                            <circle cx="3" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="11" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="19" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="27" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="35" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="43" cy="6" r="2.5" stroke="#181818"/>

                            <circle cx="3" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="11" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="19" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="27" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="35" cy="14" r="2.5" stroke="#181818"/>

                            <circle cx="43" cy="14" r="2.5" stroke="#181818"/>

                        </svg>   

                    </div>

                </li>

            </ul>

            <div class="tf-control-sorting">

                <p class="d-none d-lg-block text-caption-1">Sort by:</p>

                <div class="tf-dropdown-sort" data-bs-toggle="dropdown">

                    <div class="btn-select">

                        <span class="text-sort-value">{{ request()->input('sort', 'Best selling') }}</span>

                        <span class="icon icon-arrow-down"></span>

                    </div>

                    <div class="dropdown-menu">

                        <div class="select-item" data-sort-value="best-selling"><span class="text-value-item">Best selling</span></div>

                        <div class="select-item" data-sort-value="a-z"><span class="text-value-item">Alphabetically, A-Z</span></div>

                        <div class="select-item" data-sort-value="z-a"><span class="text-value-item">Alphabetically, Z-A</span></div>

                        <div class="select-item" data-sort-value="price-low-high"><span class="text-value-item">Price, low to high</span></div>

                        <div class="select-item" data-sort-value="price-high-low"><span class="text-value-item">Price, high to low</span></div>

                    </div>

                </div>

            </div>

        </div>



        <div class="wrapper-control-shop">

            <div class="meta-filter-shop">

                <div id="product-count-grid" class="count-text"></div>

                <div id="product-count-list" class="count-text"></div>

                <div id="applied-filters">

                    @if(request()->has('brand') || request()->has('category') || request()->has('availability'))

                        @foreach(request()->input('brand', []) as $brand)

                            <span class="filter-tag" data-type="brand" data-value="{{ $brand }}">{{ ucfirst($brand) }} <i class="icon icon-close remove-filter"></i></span>

                        @endforeach

                        @foreach(request()->input('category', []) as $catId)

                            @php $category = $categories->find($catId); @endphp

                            @if($category)

                                <span class="filter-tag" data-type="category" data-value="{{ $catId }}">{{ $category->category_name }} <i class="icon icon-close remove-filter"></i></span>

                            @endif

                        @endforeach

                        @if(request()->input('availability') === 'in-stock')

                            <span class="filter-tag" data-type="availability" data-value="in-stock">In Stock <i class="icon icon-close remove-filter"></i></span>

                        @elseif(request()->input('availability') === 'out-of-stock')

                            <span class="filter-tag" data-type="availability" data-value="out-of-stock">Out of Stock <i class="icon icon-close remove-filter"></i></span>

                        @endif

                    @endif

                </div>

                <button id="remove-all" class="remove-all-filters text-btn-uppercase" style="{{ request()->has('brand') || request()->has('category') || request()->has('availability') ? '' : 'display: none;' }}">

                    REMOVE ALL <i class="icon icon-close"></i>

                </button>

            </div>



            <div class="tf-list-layout wrapper-shop" id="listLayout">

                @foreach($products as $product)

                    @php

                        $variant = $product->variants->first();

                        $mrp = $variant->mrp ?? $product->product_base_mrp;

                        $price = $variant->sale_price ?? $variant->mrp ?? $product->product_base_price;

                        $discount = $mrp && $price < $mrp ? round((($mrp - $price) / $mrp) * 100) : 0;

                        $productVariants = $variants->where('product_id', $product->product_id);

                        $groupedVariants = $productVariants->groupBy('variable_name');

                    @endphp

                    <div class="card-product style-list" data-availability="{{ $variant ? 'In stock' : 'Out of stock' }}" data-brand="{{ $product->brand ?? 'N/A' }}">

                        <div class="card-product-wrapper card-rect">

    <a href="{{ url('product-details/'.$product->product_id) }}" class="product-img">

        <img class="lazyload img-product"
             data-src="{{ $product->product_thumbnail }}"
             src="{{ $product->product_thumbnail }}"
             alt="{{ $product->product_name }}"
             id="product-img-{{ $product->product_id }}">

        @if($variant)
            <img class="lazyload img-hover"
                 data-src="{{ $variant->image ?? $product->product_thumbnail }}"
                 src="{{ $variant->image ?? $product->product_thumbnail }}"
                 alt="{{ $product->product_name }}"
                 id="product-img-hover-{{ $product->product_id }}">
        @endif

    </a>

    @if($discount > 0)
        <div class="on-sale-wrap">
            <span class="on-sale-item">-{{ $discount }}%</span>
        </div>
    @endif

</div>

<!-- ADD THIS CSS -->
<style>
    .card-rect {
        border-radius: 0 !important;   /* Sharp rectangle corners */
        overflow: hidden;              /* Clean edges */
    }
</style>


                        <div class="card-product-info">

                            <a href="{{ url('product-details/'.$product->product_id) }}" class="title link">{{ $product->product_name }}</a>

                            <div class="price" id="price-{{ $product->product_id }}">

                                @if($mrp && $price < $mrp)

                                    <span class="old-price">₹{{ number_format($mrp, 2) }}</span>

                                @endif

                                <span class="current-price">₹{{ number_format($price, 2) }}</span>

                            </div>

                            <p class="description text-secondary text-line-clamp-2">{{ strip_tags($product->description ?? '') }}</p>

                            <div class="variant-wrap-list">

                                @if($groupedVariants->count() > 0)

                                @foreach($groupedVariants as $variableName => $variants)

                                    @php

                                        $uniqueOptions = $variants->pluck('variable_value')->unique();

                                    @endphp

                                    <div class="tf-sticky-atc-size d-flex gap-12 align-items-center mb-2">

                                        <div class="tf-sticky-atc-infos-title text-title">{{ ucfirst($variableName) }}:</div>

                                        <ul class="list-{{ strtolower($variableName) }}-product d-flex gap-8">

                                            @if(strtolower($variableName) == 'color')

                                                @foreach($uniqueOptions as $option)

                                                    @php

                                                        $colorVariant = $variants->where('variable_value', $option)->first();

                                                        $isAvailable = $colorVariant && $colorVariant->stock > 0;

                                                        $colorClasses = [

                                                            'Pink' => 'bg-light-pink-2',

                                                            'Red' => 'bg-red',

                                                            'Beige' => 'bg-beige-2',

                                                            'Orange' => 'bg-orange-2',

                                                            'Green' => 'bg-light-green',

                                                            'Black' => 'bg-main',

                                                            'White' => 'bg-white line-black',

                                                            'Purple' => 'bg-purple-3',

                                                            'Grey' => 'bg-grey',

                                                            'Light Blue' => 'bg-light-blue-5',

                                                            'Dark Blue' => 'bg-dark-blue',

                                                        ];

                                                    @endphp

                                                    <li class="list-color-item color-swatch {{ $loop->first ? 'active' : '' }} {{ !$isAvailable ? 'type-disable' : '' }}">

                                                        <input type="radio" 

                                                               name="sticky-{{ strtolower($variableName) }}-{{ $product->product_id }}" 

                                                               id="sticky-values-{{ strtolower($variableName) }}-{{ strtolower($option) }}-{{ $product->product_id }}" 

                                                               value="{{ $option }}"

                                                               data-sale="{{ $colorVariant->sale_price ?? $product->product_base_price }}" 

                                                               data-stock="{{ $colorVariant->stock ?? 0 }}"

                                                               data-image="{{ $colorVariant->image ?? $product->product_thumbnail }}"

                                                               data-product-id="{{ $product->product_id }}"

                                                               {{ $loop->first ? 'checked' : '' }}

                                                               {{ !$isAvailable ? 'disabled' : '' }}>

                                                        <label class="swatch-value {{ $colorClasses[$option] ?? 'bg-grey' }}" 

                                                               for="sticky-values-{{ strtolower($variableName) }}-{{ strtolower($option) }}-{{ $product->product_id }}" 

                                                               data-value="{{ $option }}">

                                                            <span class="d-none text-capitalize">{{ $option }}</span>

                                                        </label>

                                                    </li>

                                                @endforeach

                                            @else

                                                @foreach($uniqueOptions as $option)

                                                    @php

                                                        $optionVariant = $variants->where('variable_value', $option)->first();

                                                        $isAvailable = $optionVariant && $optionVariant->stock > 0;

                                                    @endphp

                                                    <li class="list-size-item size-swatch {{ $loop->first ? 'active' : '' }} {{ !$isAvailable ? 'type-disable' : '' }}">

                                                        <input type="radio" 

                                                               name="sticky-{{ strtolower($variableName) }}-{{ $product->product_id }}" 

                                                               id="sticky-values-{{ strtolower($variableName) }}-{{ strtolower($option) }}-{{ $product->product_id }}" 

                                                               value="{{ $option }}"

                                                               data-sale="{{ $optionVariant->sale_price ?? $product->product_base_price }}" 

                                                               data-stock="{{ $optionVariant->stock ?? 0 }}"

                                                               data-image="{{ $optionVariant->image ?? $product->product_thumbnail }}"

                                                               data-product-id="{{ $product->product_id }}"

                                                               {{ $loop->first ? 'checked' : '' }}

                                                               {{ !$isAvailable ? 'disabled' : '' }}>

                                                        <label class="swatch-value size-btn" 

                                                               for="sticky-values-{{ strtolower($variableName) }}-{{ strtolower($option) }}-{{ $product->product_id }}" 

                                                               data-value="{{ $option }}">

                                                            <span class="text-title">{{ $option }}</span>

                                                        </label>

                                                    </li>

                                                @endforeach

                                            @endif

                                        </ul>

                                    </div>

                                @endforeach

                                @endif

                                <div class="list-product-btn">

    <form action="{{ url('cart/add/'.$product->product_id) }}"
          method="POST"
          id="cart-form-{{ $product->product_id }}">

        @csrf

        <input type="hidden" name="product_id" value="{{ $product->product_id }}">
        <input type="hidden" name="product_name" value="{{ $product->product_name }}">
        <input type="hidden" name="product_price" value="{{ $price }}" id="cart-price-{{ $product->product_id }}">
        <input type="hidden" name="product_image" value="{{ $product->product_thumbnail }}" id="cart-image-{{ $product->product_id }}">
        <input type="hidden" name="variant_id" id="variant-id-{{ $product->product_id }}">

        <button type="submit"
                class="btn-main-product btn-rect"
                id="add-to-cart-{{ $product->product_id }}">
            Add To cart
        </button>

    </form>

    <a href="javascript:void(0);"
       class="box-icon wishlist btn-icon-action toggle-wishlist"
       data-product-id="{{ $product->product_id }}">
        <span class="icon icon-heart"></span>
        <span class="tooltip">Wishlist</span>
    </a>

</div>

<!-- ADD THIS CSS -->
<style>
    /* Sharp rectangle button */
    .btn-rect {
        border-radius: 0 !important;
    }

    /* Hover color: #006361 (60% opacity) */
    .btn-main-product.btn-rect:hover {
        background: rgba(0, 99, 97, 0.6) !important;
    }
</style>


                            </div>

                        </div>

                    </div>

                @endforeach

                <!-- pagination -->

                <ul class="wg-pagination">

                    {!! $products->appends(request()->query())->links('pagination::bootstrap-5') !!}

                </ul>

            </div>



            <!-- <div class="tf-grid-layout wrapper-shop tf-col-4" id="gridLayout">

                @foreach($products as $product)

                    @php

                        $variant = $product->variants->first();

                        $mrp = $variant->mrp ?? $product->product_base_mrp;

                        $price = $variant->sale_price ?? $variant->mrp ?? $product->product_base_price;

                        $discount = $mrp && $price < $mrp ? round((($mrp - $price) / $mrp) * 100) : 0;

                        $productVariants = $variants->where('product_id', $product->product_id);

                        $groupedVariants = $productVariants->groupBy('variable_name');

                    @endphp

                    <div class="card-product style-2 grid" data-availability="{{ $variant ? 'In stock' : 'Out of stock' }}" data-brand="{{ $product->brand ?? 'N/A' }}">

                        <div class="card-product-wrapper">

                            <a href="{{ url('product-details/'.$product->product_id) }}" class="product-img d-block">

                                <img class="lazyload img-product" data-src="{{ $product->product_thumbnail }}" src="{{ $product->product_thumbnail }}" alt="{{ $product->product_name }}" id="grid-product-img-{{ $product->product_id }}">

                                @if($variant)

                                    <img class="lazyload img-hover" data-src="{{ $variant->image ?? $product->product_thumbnail }}" src="{{ $variant->image ?? $product->product_thumbnail }}" alt="{{ $product->product_name }}" id="grid-product-img-hover-{{ $product->product_id }}">

                                @endif

                            </a>

                            @if($discount > 0)

                                <div class="on-sale-wrap"><span class="on-sale-item">-{{ $discount }}%</span></div>

                            @endif

                            <div class="list-product-btn">

                                <form action="{{ url('cart/add/'.$product->product_id) }}" method="POST" id="grid-cart-form-{{ $product->product_id }}">

                                    @csrf

                                    <input type="hidden" name="product_id" value="{{ $product->product_id }}">

                                    <input type="hidden" name="product_name" value="{{ $product->product_name }}">

                                    <input type="hidden" name="product_price" value="{{ $price }}" id="grid-cart-price-{{ $product->product_id }}">

                                    <input type="hidden" name="product_image" value="{{ $product->product_thumbnail }}" id="grid-cart-image-{{ $product->product_id }}">

                                    <input type="hidden" name="variant_id" id="grid-variant-id-{{ $product->product_id }}">

                                    <button type="submit" class="box-icon quickadd" id="grid-add-to-cart-{{ $product->product_id }}">

                                        <span class="icon icon-ShoppingBagOpen"></span>

                                        <span class="tooltip">Add To Cart</span>

                                    </button>

                                </form>

                                <a href="javascript:void(0);" class="box-icon wishlist btn-icon-action toggle-wishlist" data-product-id="{{ $product->product_id }}">

                                    <span class="icon icon-heart"></span>

                                    <span class="tooltip">Wishlist</span>

                                </a>

                            </div>

                        </div>

                        <div class="card-product-info">

                            <a href="{{ url('product-details/'.$product->product_id) }}" class="title link">{{ $product->product_name }}</a>

                            <div class="price" id="grid-price-{{ $product->product_id }}">

                                @if($mrp && $price < $mrp)

                                    <span class="old-price">₹{{ number_format($mrp, 2) }}</span>

                                @endif

                                <span class="current-price">₹{{ number_format($price, 2) }}</span>

                            </div>

                            @if($groupedVariants->count() > 0)

                            <div class="variant-wrap-grid">

                                @foreach($groupedVariants as $variableName => $variants)

                                    @php

                                        $uniqueOptions = $variants->pluck('variable_value')->unique();

                                    @endphp

                                    <div class="tf-sticky-atc-size d-flex gap-8 align-items-center mb-2">

                                        <div class="tf-sticky-atc-infos-title text-title">{{ ucfirst($variableName) }}:</div>

                                        <ul class="list-{{ strtolower($variableName) }}-product d-flex gap-8">

                                            @if(strtolower($variableName) == 'color')

                                                @foreach($uniqueOptions as $option)

                                                    @php

                                                        $colorVariant = $variants->where('variable_value', $option)->first();

                                                        $isAvailable = $colorVariant && $colorVariant->stock > 0;

                                                        $colorClasses = [

                                                            'Pink' => 'bg-light-pink-2',

                                                            'Red' => 'bg-red',

                                                            'Beige' => 'bg-beige-2',

                                                            'Orange' => 'bg-orange-2',

                                                            'Green' => 'bg-light-green',

                                                            'Black' => 'bg-main',

                                                            'White' => 'bg-white line-black',

                                                            'Purple' => 'bg-purple-3',

                                                            'Grey' => 'bg-grey',

                                                            'Light Blue' => 'bg-light-blue-5',

                                                            'Dark Blue' => 'bg-dark-blue',

                                                        ];

                                                    @endphp

                                                    <li class="list-color-item color-swatch {{ $loop->first ? 'active' : '' }} {{ !$isAvailable ? 'type-disable' : '' }}">

                                                        <input type="radio" 

                                                               name="grid-{{ strtolower($variableName) }}-{{ $product->product_id }}" 

                                                               id="grid-values-{{ strtolower($variableName) }}-{{ strtolower($option) }}-{{ $product->product_id }}" 

                                                               value="{{ $option }}"

                                                               data-sale="{{ $colorVariant->sale_price ?? $product->product_base_price }}" 

                                                               data-stock="{{ $colorVariant->stock ?? 0 }}"

                                                               data-image="{{ $colorVariant->image ?? $product->product_thumbnail }}"

                                                               data-product-id="{{ $product->product_id }}"

                                                               {{ $loop->first ? 'checked' : '' }}

                                                               {{ !$isAvailable ? 'disabled' : '' }}>

                                                        <label class="swatch-value {{ $colorClasses[$option] ?? 'bg-grey' }}" 

                                                               for="grid-values-{{ strtolower($variableName) }}-{{ strtolower($option) }}-{{ $product->product_id }}" 

                                                               data-value="{{ $option }}">

                                                            <span class="d-none text-capitalize">{{ $option }}</span>

                                                        </label>

                                                    </li>

                                                @endforeach

                                            @else

                                                @foreach($uniqueOptions as $option)

                                                    @php

                                                        $optionVariant = $variants->where('variable_value', $option)->first();

                                                        $isAvailable = $optionVariant && $optionVariant->stock > 0;

                                                    @endphp

                                                    <li class="list-size-item size-swatch {{ $loop->first ? 'active' : '' }} {{ !$isAvailable ? 'type-disable' : '' }}">

                                                        <input type="radio" 

                                                               name="grid-{{ strtolower($variableName) }}-{{ $product->product_id }}" 

                                                               id="grid-values-{{ strtolower($variableName) }}-{{ strtolower($option) }}-{{ $product->product_id }}" 

                                                               value="{{ $option }}"

                                                               data-sale="{{ $optionVariant->sale_price ?? $product->product_base_price }}" 

                                                               data-stock="{{ $optionVariant->stock ?? 0 }}"

                                                               data-image="{{ $optionVariant->image ?? $product->product_thumbnail }}"

                                                               data-product-id="{{ $product->product_id }}"

                                                               {{ $loop->first ? 'checked' : '' }}

                                                               {{ !$isAvailable ? 'disabled' : '' }}>

                                                        <label class="swatch-value size-btn" 

                                                               for="grid-values-{{ strtolower($variableName) }}-{{ strtolower($option) }}-{{ $product->product_id }}" 

                                                               data-value="{{ $option }}">

                                                            <span class="text-title">{{ $option }}</span>

                                                        </label>

                                                    </li>

                                                @endforeach

                                            @endif

                                        </ul>

                                    </div>

                                @endforeach

                            </div>

                            @endif

                        </div>

                    </div>

                @endforeach

                pagination -->

                <!-- <ul class="wg-pagination justify-content-center">

                    {!! $products->appends(request()->query())->links('pagination::bootstrap-5') !!}

                </ul>

            </div>  -->

        </div>

    </div>

</section>



<!-- Styles for circular variant selection -->

<style>

    .list-color-product, .list-size-product {

        list-style: none;

        padding: 0;

        margin: 0;

        display: flex;

        gap: 8px;

    }

    .list-color-item, .list-size-item {

        position: relative;

        display: inline-block;

    }

    .color-swatch input, .size-swatch input {

        display: none;

    }

    .color-swatch .swatch-value {

        display: inline-block;

        width: 24px;

        height: 24px;

        border-radius: 50%;

        cursor: pointer;

        border: 2px solid transparent;

        transition: border 0.3s ease;

    }

    .size-swatch .swatch-value {

        display: inline-block;

        width: 32px;

        height: 32px;

        border-radius: 50%;

        cursor: pointer;

        border: 2px solid transparent;

        transition: border 0.3s ease;

        text-align: center;

        line-height: 28px;

        background: #f5f5f5;

    }

    .color-swatch input:checked + .swatch-value, .size-swatch input:checked + .swatch-value {

        border: 2px solid #181818;

    }

    .color-swatch .type-disable .swatch-value, .size-swatch .type-disable .swatch-value {

        opacity: 0.5;

        cursor: not-allowed;

    }

    .line-black {

        border: 1px solid #181818;

    }

</style>



<!-- JavaScript for dynamic variant updates and polling -->

<script>

    document.addEventListener('DOMContentLoaded', function() {

        // Handle variant selection and price update

        document.querySelectorAll('.color-swatch input, .size-swatch input').forEach(input => {

            input.addEventListener('change', function() {

                const productId = this.dataset.productId;

                const newPrice = parseFloat(this.dataset.sale).toFixed(2);

                const image = this.dataset.image;

                const stock = parseInt(this.dataset.stock);

                const mrp = this.dataset.mrp ? parseFloat(this.dataset.mrp).toFixed(2) : null;

                const discount = mrp && newPrice < mrp ? Math.round(((mrp - newPrice) / mrp) * 100) : 0;



                // Update price

                const priceContainer = document.querySelector(`#price-${productId}, #grid-price-${productId}`);

                if (priceContainer) {

                    priceContainer.innerHTML = `${discount > 0 ? `<span class="old-price">₹${mrp}</span>` : ''}<span class="current-price">₹${newPrice}</span>`;

                }



                // Update images

                const imgProduct = document.querySelector(`#product-img-${productId}, #grid-product-img-${productId}`);

                const imgHover = document.querySelector(`#product-img-hover-${productId}, #grid-product-img-hover-${productId}`);

                if (imgProduct) imgProduct.src = image;

                if (imgHover) imgHover.src = image;



                // Update cart form

                const cartForm = document.querySelector(`#cart-form-${productId}, #grid-cart-form-${productId}`);

                if (cartForm) {

                    cartForm.querySelector(`#cart-price-${productId}, #grid-cart-price-${productId}`).value = newPrice;

                    cartForm.querySelector(`#cart-image-${productId}, #grid-cart-image-${productId}`).value = image;

                    cartForm.querySelector(`#variant-id-${productId}, #grid-variant-id-${productId}`).value = this.id;

                }



                // Update add to cart button state

                const addToCartBtn = document.querySelector(`#add-to-cart-${productId}, #grid-add-to-cart-${productId}`);

                if (addToCartBtn) {

                    addToCartBtn.disabled = stock <= 0;

                }



                // Update active state

                const parentList = this.closest('.list-color-product, .list-size-product');

                if (parentList) {

                    parentList.querySelectorAll('.color-swatch, .size-swatch').forEach(item => item.classList.remove('active'));

                    this.parentElement.classList.add('active');

                }

            });

        });



        // Poll for database updates every 30 seconds using WebSocket or AJAX

        function pollProductUpdates() {

            const eventSource = new EventSource('{{ url('/product/updates/stream') }}');

            eventSource.onmessage = function(event) {

                const data = JSON.parse(event.data);

                data.products.forEach(product => {

                    const productId = product.product_id;

                    const variants = product.variants;



                    // Update price and images

                    const variant = variants.find(v => v.variable_value === document.querySelector(`input[name="sticky-color-${productId}"]:checked, input[name="sticky-size-${productId}"]:checked`)?.value) || variants[0];

                    const mrp = variant.mrp ?? product.product_base_mrp;

                    const price = variant.sale_price ?? variant.mrp ?? product.product_base_price;

                    const discount = mrp && price < mrp ? Math.round(((mrp - price) / mrp) * 100) : 0;



                    const priceContainer = document.querySelector(`#price-${productId}, #grid-price-${productId}`);

                    if (priceContainer) {

                        priceContainer.innerHTML = `

                            ${discount > 0 ? `<span class="old-price">₹${mrp.toFixed(2)}</span>` : ''}

                            <span class="current-price">₹${price.toFixed(2)}</span>

                        `;

                    }



                    const imgProduct = document.querySelector(`#product-img-${productId}, #grid-product-img-${productId}`);

                    const imgHover = document.querySelector(`#product-img-hover-${productId}, #grid-product-img-hover-${productId}`);

                    if (imgProduct) imgProduct.src = variant.image ?? product.product_thumbnail;

                    if (imgHover) imgHover.src = variant.image ?? product.product_thumbnail;



                    // Update cart form

                    const cartForm = document.querySelector(`#cart-form-${productId}, #grid-cart-form-${productId}`);

                    if (cartForm) {

                        cartForm.querySelector(`#cart-price-${productId}, #grid-cart-price-${productId}`).value = price;

                        cartForm.querySelector(`#cart-image-${productId}, #grid-cart-image-${productId}`).value = variant.image ?? product.product_thumbnail;

                    }



                    // Update variant options

                    variants.forEach(variant => {

                        const colorInputs = document.querySelectorAll(`input[name="sticky-color-${productId}"], input[name="grid-color-${productId}"]`);

                        const sizeInputs = document.querySelectorAll(`input[name="sticky-size-${productId}"], input[name="grid-size-${productId}"]`);



                        [colorInputs, sizeInputs].forEach(inputs => {

                            inputs.forEach(input => {

                                if (input.value === variant.variable_value && variant.variable_name.toLowerCase() === input.name.split('-')[1]) {

                                    input.dataset.sale = variant.sale_price ?? product.product_base_price;

                                    input.dataset.stock = variant.stock ?? 0;

                                    input.dataset.image = variant.image ?? product.product_thumbnail;

                                    input.dataset.mrp = variant.mrp ?? product.product_base_mrp;

                                    input.disabled = variant.stock <= 0;

                                    input.parentElement.classList.toggle('type-disable', variant.stock <= 0);

                                }

                            });

                        });

                    });

                });

            };



            eventSource.onerror = function() {

                eventSource.close();

                setTimeout(pollProductUpdates, 5000); // Retry after 5 seconds if connection fails

            };

        }



        // Start polling

        pollProductUpdates();

    });

</script>



<script>

    // Helper function to parse existing input as array

    function parseInputValue(str) {

        if (!str) return [];

        if (Array.isArray(str)) return str;

        return str.split(',').map(Number).filter(n => !isNaN(n));

    }



    // Manage category selection

    document.querySelectorAll('.widget-facet.facet-categories .categories-item').forEach(item => {

        item.addEventListener('click', function () {

            this.classList.toggle('active');

            // Update hidden input for categories or subcategories

            let parent = this.closest('.facet-categories');

            let inputId = parent.querySelector('h6').textContent.includes('Categories') ? 'categoryInput' : 'subCategoryInput';

            let input = document.getElementById(inputId);



            // Collect active categories

            let activeIds = Array.from(parent.querySelectorAll('.categories-item.active')).map(el => el.getAttribute('data-id'));

            input.value = activeIds.join(',');

        });

    });



    // Reset filters button

    document.getElementById('reset-filter').addEventListener('click', function () {

        // Clear active class

        document.querySelectorAll('.categories-item.active').forEach(el => el.classList.remove('active'));

        // Clear hidden inputs

        document.getElementById('categoryInput').value = '';

        document.getElementById('subCategoryInput').value = '';

        // Clear checkboxes/radios for other filters

        document.querySelectorAll('#filterForm input[type="radio"]').forEach(input => input.checked = false);

        document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(input => input.checked = false);



        // Submit form without filters

        document.getElementById('filterForm').submit();

    });



    // Layout switcher (if you want to reload page with layout param)

    document.querySelectorAll('.tf-view-layout-switch').forEach(item => {

        item.addEventListener('click', function () {

            // Remove active class from all and add to clicked

            document.querySelectorAll('.tf-view-layout-switch').forEach(el => el.classList.remove('active'));

            this.classList.add('active');

            const layout = this.getAttribute('data-value-layout');



            // Update URL with layout param, preserve query string

            const url = new URL(window.location);

            url.searchParams.set('layout', layout);

            window.location = url.toString();

        });

    });



    // On page load, set layout switch button active based on URL param

    document.addEventListener('DOMContentLoaded', function () {

        let params = new URLSearchParams(window.location.search);

        let layoutParam = params.get('layout') || 'tf-col-4';

        document.querySelectorAll(`.tf-view-layout-switch[data-value-layout="${layoutParam}"]`).forEach(el => {

            el.classList.add('active');

        });

    });

</script>

@endsection