@php
    // Ensure variables are defined for the partials
    if(isset($categories_list)) {
        $all_categories = $categories_list->where('featured',1);
        $parents = $all_categories->whereNull('parent_id')->pluck('id')->toArray();
    }
@endphp

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

@section('title') {{ $ecommerce_setting->site_title ?? 'Amna-G-Damiani - Luxury Fashion & Accessories' }} @endsection

@section('description') {{ $ecommerce_setting->site_description ?? 'Discover luxury fashion and accessories at Amna-G-Damiani. Shop the latest collections of designer clothing, bags, and accessories.' }} @endsection

@section('content')

<!-- Include Header -->
@include('ecommerce::frontend.partials.header')

<!-- Banner Header -->
<section class="themesFlat">
    <div class="container-full-2">
        <div class="s-banner-header">
            <div class="image">
                <img class="lazyload w-100" src="{{ asset('newsite/images/section/fashion-style.svg') }}" alt="Fashion">
            </div>
            <div class="bot">
                <div class="topbar-left">
                    {{-- FIXED: Make banner text dynamic --}}
                    <h6 class="text-up fw-normal text-line-clamp-1">{{ $ecommerce_setting->banner_text ?? 'Up to 50% off Amazing Products' }}</h6>
                    <div class="group-btn">
                        <a href="{{ url('shop') }}" class="tf-btn-line letter-space-0">Men</a>
                        <a href="{{ url('shop') }}" class="tf-btn-line letter-space-0">Women</a>
                    </div>
                </div>
                <span class="br-line bg-black d-none d-xl-flex"></span>
                <a href="{{ url('shop') }}" class="tf-btn-line letter-space-0">Shop</a>
            </div>
        </div>
    </div>
</section>
<!-- /Banner Header -->

<!-- Banner Slider -->
@if(isset($sliders) && $sliders->count() > 0)
<div class="tf-slideshow tf-btn-swiper-main">
    <div dir="ltr" class="swiper tf-swiper sw-slide-show slider_effect_fade" data-auto="true" data-loop="true" data-effect="fade" data-delay="3000">
        <div class="swiper-wrapper">
            @foreach($sliders as $key=>$slider)
            <div class="swiper-slide">
                <div class="slider-wrap style-2">
                    <div class="sld_image image__right">
                        <img src="{{ asset('public/frontend/images/slider/desktop/') }}/{{$slider->image1}}" alt="{{ $slider->title ?? 'Slider' }}" class="lazyload scale-item">
                    </div>
                    <div class="sld_content">
                        <div class="container">
                            <div class="row">
                                <div class="col-11">
                                    <div class="content-sld_wrap">
                                        <h1 class="title_sld text-display fade-item fade-item-2">
                                            {{ $slider->title ?? 'Modern & Minimalistic' }}
                                        </h1>
                                        <p class="sub-text_sld h6 text-black fade-item fade-item-3">
                                            {{ $slider->description ?? 'Discover our amazing collection of products designed for you.' }}
                                        </p>
                                        <div class="fade-item fade-item-4">
                                            <a href="{{ $slider->link ?? url('shop') }}" class="tf-btn animate-btn fw-normal">
                                                Shop now
                                                <i class="icon icon-arrow-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="sw-dot-default tf-sw-pagination"></div>
    </div>
</div>
@endif
<!-- /Banner Slider -->

<!-- Marquee -->
<div class="themesFlat overflow-hidden">
    @php
        // FIXED: Make marquee text dynamic from database
        $marqueeText = $ecommerce_setting->marquee_text ?? 'Minimalism Style,Accessories Design,Trend Vintage,Layering,Elegance Trend,Minimalism';
        $marqueeItems = array_filter(array_map('trim', explode(',', $marqueeText)));
    @endphp
    
    <div class="tf-marquee">
        <div class="marquee-wrap infiniteSlide" data-clone="5">
            @foreach($marqueeItems as $index => $item)
                <p class="text-display fw-bold {{ $index % 2 == 0 ? 'text-black' : 'text-clip' }}">{{ $item }}</p>
            @endforeach
        </div>
        <div class="marquee-wrap infiniteSlide" data-clone="5" data-style="right">
            @foreach(array_reverse($marqueeItems) as $index => $item)
                <p class="text-display fw-bold {{ $index % 2 == 0 ? 'text-black' : 'text-clip' }}">{{ $item }}</p>
            @endforeach
        </div>
    </div>
</div>
<!-- /Marquee -->

<!-- Categories -->
<div class="container">
    <div class="sect-title text-center wow fadeInUp">
        <p class="s-title h1 fw-medium mb-8">{{ $ecommerce_setting->category_title ?? 'Shop by Category' }}</p>
    </div>
    <div class="row g-4 mb-5">
        @if(isset($all_categories))
            @foreach($all_categories as $category)
                @if(in_array($category->id, $parents))
                    <div class="col-md-3 col-sm-4 col-6 mb-4">
                        <div class="card-collection hover-img4 wow fadeInUp">
                            <a href="{{ url('shop') }}/{{ $category->slug }}" class="cls_image img-style4">
                                @if(isset($category->icon))
                                    <img class="lazyload img-product" src="{{ asset('public/images/category/icons/' . $category->icon) }}" alt="{{ $category->name }}">
                                @elseif(isset($category->image))
                                    <img class="lazyload img-product" src="{{ asset('public/images/category/' . $category->image) }}" alt="{{ $category->name }}">
                                @else
                                    <img class="lazyload img-product" src="{{ asset('newsite/images/category/cate-12.jpg') }}" alt="Default Category">
                                @endif
                            </a>
                            <div class="collection_contnet">
                                <h2 class="type-semibold">
                                    <a href="{{ url('shop') }}/{{ $category->slug }}" class="name-cls link">{{ $category->name }}</a>
                                </h2>
                                @php
                                    $product_count = DB::table('products')->where('category_id', $category->id)->where('is_active', 1)->count();
                                @endphp
                                <p class="count-cls h5">{{ $product_count }} products</p>
                                <a href="{{ url('shop') }}/{{ $category->slug }}" class="tf-btn-line letter-space-0">
                                    Shop now
                                </a>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        @endif
    </div>
    <div class="text-center mt-3">
        <a class="tf-btn animate-btn" href="{{ url('shop') }}">All Categories</a>
    </div>
</div>
<!-- /Categories -->

<!-- New Arrivals -->
<div class="flat-spacing flat-animate-tab">
    <div class="container">
        <div class="sect-title wow fadeInUp">
            <p class="s-title h1 fw-medium text-center mb-24">{{ $ecommerce_setting->new_arrivals_title ?? 'New Arrivals' }}</p>
            <ul class="tab-product_list" role="tablist">
               <li class="nav-tab-item" role="presentation">
                    <a href="#trending" data-bs-toggle="tab" class="tf-btn-line tf-btn-tab">
                        TRENDING
                    </a>
                </li>
                <li class="nav-tab-item" role="presentation">
                    <a href="#best-seller" data-bs-toggle="tab" class="tf-btn-line tf-btn-tab active">
                        Best seller
                    </a>
                </li>
                <li class="nav-tab-item" role="presentation">
                    <a href="#on-sale" data-bs-toggle="tab" class="tf-btn-line tf-btn-tab">
                        On sale
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="tab-pane" id="trending" role="tabpanel">
                <div dir="ltr" class="swiper tf-swiper wrap-sw-over wow fadeInUp" 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">
                        @php
                            $trending_products = DB::table('products')
                                ->where('is_active', 1)
                                ->where('is_online', 1)
                                ->orderBy('created_at', 'desc')
                                ->limit(8)
                                ->get();
                        @endphp
                        @foreach($trending_products as $product)
                        <div class="swiper-slide">
                            <div class="card-product">
                                <div class="card-product_wrapper">
                                    <a href="{{ url('product/'.$product->slug.'/'.$product->id) }}" class="product-img">
                                        @php
                                            $images = explode(',', $product->image);
                                            $main_image = (
                                                empty($product->image) ||
                                                $product->image === 'zummXD2dvAtI.png' ||
                                                empty($images[0])
                                            ) ? 'no-image.jpg' : $images[0];
                                            
                                            $hover_image = (!empty($product->image) && isset($images[1]) && !empty($images[1])) ? $images[1] : $main_image;
                                        @endphp
                                        <img class="lazyload img-product" src="{{ asset('public/images/product/'.$main_image) }}" alt="Product">
                                        <img class="lazyload img-hover" src="{{ asset('public/images/product/'.$hover_image) }}" alt="Product">
                                    </a>
                                    <div class="variant-box">
                                        <ul class="product-size_list">
                                            <li class="size-item h6">XS</li>
                                            <li class="size-item h6">M</li>
                                        </ul>
                                    </div>
                                    <ul class="product-action_list">
                                        <li>
                                            <button type="button" class="hover-tooltip tooltip-left box-icon add-to-cart-home" data-id="{{ $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="{{ $product->id }}">
                                                <span class="icon icon-heart"></span>
                                                <span class="tooltip">Add to Wishlist</span>
                                            </button>
                                        </li>
                                    </ul>
                                    @if($product->promotion_price)
                                    <ul class="product-badge_list">
                                        <li class="product-badge_item flash-sale"><i class="icon icon-thunder"></i> Flash sale</li>
                                    </ul>
                                    @endif
                                    <div class="product-countdown">
                                        <div class="js-countdown cd-has-zero" data-timer="25472" data-labels="d : ,h : ,m : ,s"></div>
                                    </div>
                                </div>
                                <div class="card-product_info">
                                    <a href="{{ url('product/'.$product->slug.'/'.$product->id) }}" class="name-product h4 link">{{ $product->name }}</a>
                                    <div class="price-wrap">
                                        @if($product->promotion_price)
                                            <span class="price-old h6 fw-normal">{{ $currency->symbol ?? $currency->code }}{{ number_format($product->price, 2) }}</span>
                                            <span class="price-new h6">{{ $currency->symbol ?? $currency->code }}{{ number_format($product->promotion_price, 2) }}</span>
                                        @else
                                            <span class="price-new h6">{{ $currency->symbol ?? $currency->code }}{{ number_format($product->price, 2) }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="sw-dot-default tf-sw-pagination"></div>
                </div>
            </div>
            <div class="tab-pane active show" id="best-seller" role="tabpanel">
                <div dir="ltr" class="swiper tf-swiper wrap-sw-over wow fadeInUp" 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">
                        @php
                            $best_seller_products = DB::table('products')
                            ->where('is_active', 1)
                            ->where('is_online', 1)
                            ->whereNotNull('image')
                            ->where('image', '!=', '')
                            ->where('image', '!=', 'zummXD2dvAtI.png')
                            ->orderBy('created_at', 'desc')
                            ->limit(8)
                            ->get();
                        @endphp
                        @foreach($best_seller_products as $product)
                        <div class="swiper-slide">
                            <div class="card-product">
                                <div class="card-product_wrapper">
                                    <a href="{{ url('product/'.$product->slug.'/'.$product->id) }}" class="product-img">
                                        @php
                                            $images = explode(',', $product->image);
                                            $main_image = (
                                                empty($product->image) ||
                                                $product->image === 'zummXD2dvAtI.png' ||
                                                empty($images[0])
                                            ) ? 'no-image.jpg' : $images[0];
                                            
                                            $hover_image = (!empty($product->image) && isset($images[1]) && !empty($images[1])) ? $images[1] : $main_image;
                                        @endphp
                                        <img class="lazyload img-product" src="{{ asset('public/images/product/'.$main_image) }}" alt="Product">
                                        <img class="lazyload img-hover" src="{{ asset('public/images/product/'.$hover_image) }}" alt="Product">
                                    </a>
                                    <ul class="product-action_list">
                                        <li>
                                            <button type="button" class="hover-tooltip tooltip-left box-icon add-to-cart-home" data-id="{{ $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="{{ $product->id }}">
                                                <span class="icon icon-heart"></span>
                                                <span class="tooltip">Add to Wishlist</span>
                                            </button>
                                        </li>
                                    </ul>
                                    @if($product->promotion_price)
                                    <ul class="product-badge_list">
                                        <li class="product-badge_item h6 sale">{{ round((($product->price - $product->promotion_price) / $product->price) * 100) }}% OFF</li>
                                    </ul>
                                    @endif
                                    <div class="product-countdown">
                                        <div class="js-countdown cd-has-zero" data-timer="25472" data-labels="d : ,h : ,m : ,s"></div>
                                    </div>
                                </div>
                                <div class="card-product_info">
                                    <a href="{{ url('product/'.$product->slug.'/'.$product->id) }}" class="name-product h4 link">{{ $product->name }}</a>
                                    <div class="price-wrap">
                                        @if($product->promotion_price)
                                            <span class="price-old h6 fw-normal">{{ $currency->symbol ?? $currency->code }}{{ number_format($product->price, 2) }}</span>
                                            <span class="price-new h6">{{ $currency->symbol ?? $currency->code }}{{ number_format($product->promotion_price, 2) }}</span>
                                        @else
                                            <span class="price-new h6">{{ $currency->symbol ?? $currency->code }}{{ number_format($product->price, 2) }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="sw-dot-default tf-sw-pagination"></div>
                </div>
            </div>
            <div class="tab-pane" id="on-sale" role="tabpanel">
                <div dir="ltr" class="swiper tf-swiper wrap-sw-over wow fadeInUp" 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">
                        @php
                            $on_sale_products = DB::table('products')
                                ->where('is_active', 1)
                                ->where('is_online', 1)
                                ->whereNotNull('promotion_price')
                                ->limit(8)
                                ->get();
                        @endphp
                        @foreach($on_sale_products as $product)
                        <div class="swiper-slide">
                            <div class="card-product">
                                <div class="card-product_wrapper">
                                    <a href="{{ url('product/'.$product->slug.'/'.$product->id) }}" class="product-img">
                                        @php
                                            $images = explode(',', $product->image);
                                            $main_image = (
                                                empty($product->image) ||
                                                $product->image === 'zummXD2dvAtI.png' ||
                                                empty($images[0])
                                            ) ? 'no-image.jpg' : $images[0];
                                            
                                            $hover_image = (!empty($product->image) && isset($images[1]) && !empty($images[1])) ? $images[1] : $main_image;
                                        @endphp
                                        <img class="lazyload img-product" src="{{ asset('public/images/product/'.$main_image) }}" alt="Product">
                                        <img class="lazyload img-hover" src="{{ asset('public/images/product/'.$hover_image) }}" alt="Product">
                                    </a>
                                    <div class="variant-box">
                                        <ul class="product-size_list">
                                            <li class="size-item h6">XS</li>
                                            <li class="size-item h6">S</li>
                                            <li class="size-item h6">M</li>
                                        </ul>
                                    </div>
                                    <ul class="product-action_list">
                                        <li>
                                            <button type="button" class="hover-tooltip tooltip-left box-icon add-to-cart-home" data-id="{{ $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="{{ $product->id }}">
                                                <span class="icon icon-heart"></span>
                                                <span class="tooltip">Add to Wishlist</span>
                                            </button>
                                        </li>
                                    </ul>
                                    <ul class="product-badge_list">
                                        <li class="product-badge_item h6 hot">Hot</li>
                                    </ul>
                                </div>
                                <div class="card-product_info">
                                    <a href="{{ url('product/'.$product->slug.'/'.$product->id) }}" class="name-product h4 link">{{ $product->name }}</a>
                                    <div class="price-wrap">
                                        @if($product->promotion_price)
                                            <span class="price-old h6 fw-normal">{{ $currency->symbol ?? $currency->code }}{{ number_format($product->price, 2) }}</span>
                                            <span class="price-new h6">{{ $currency->symbol ?? $currency->code }}{{ number_format($product->promotion_price, 2) }}</span>
                                        @else
                                            <span class="price-new h6">{{ $currency->symbol ?? $currency->code }}{{ number_format($product->price, 2) }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="sw-dot-default tf-sw-pagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /New Arrivals -->

{{-- REMOVED: "Our Collection" section with Lorem ipsum dummy text --}}
{{-- This should be made dynamic from collections table or removed --}}

<!-- Dynamic Widgets Section -->
@if(isset($widgets) && $widgets->count() > 0)
    @foreach($widgets as $widget)
        @if($widget->name == 'category-slider-widget')
            @include('ecommerce::frontend.includes.category-slider-widget')
        @endif

        @if($widget->name == 'brand-slider-widget')
            @include('ecommerce::frontend.includes.brand-slider-widget')
        @endif

        @if($widget->name == 'product-category-widget')
            @include('ecommerce::frontend.includes.product-category-widget')
        @endif

        @if($widget->name == 'product-collection-widget')
            @include('ecommerce::frontend.includes.product-collection-widget')
        @endif

        @if($widget->name == 'text-widget')
            @include('ecommerce::frontend.includes.text-widget')
        @endif

        @if($widget->name == 'tab-product-category-widget')
            @include('ecommerce::frontend.includes.tab-product-category-widget')
        @endif

        @if($widget->name == 'tab-product-collection-widget')
            @include('ecommerce::frontend.includes.tab-product-collection-widget')
        @endif
    @endforeach
@endif

<!-- Box Icon -->
<div class="flat-spacing">
    <div class="container">
        <div dir="ltr" class="swiper tf-swiper" data-preview="4" data-tablet="3" data-mobile-sm="2" data-mobile="1" data-space-lg="97"
            data-space-md="33" data-space="13" data-pagination="1" data-pagination-sm="2" data-pagination-md="3" data-pagination-lg="4">
            <div class="swiper-wrapper">
                @php
                    // FIXED: Make feature boxes dynamic
                    $features = [
                        [
                            'icon' => 'icon-package',
                            'title' => $ecommerce_setting->feature_1_title ?? '30 days return',
                            'text' => $ecommerce_setting->feature_1_text ?? '30 day money back guarantee'
                        ],
                        [
                            'icon' => 'icon-calender',
                            'title' => $ecommerce_setting->feature_2_title ?? '3 year warranty',
                            'text' => $ecommerce_setting->feature_2_text ?? 'Manufacturer\'s defect'
                        ],
                        [
                            'icon' => 'icon-boat',
                            'title' => $ecommerce_setting->feature_3_title ?? 'Free shipping',
                            'text' => $ecommerce_setting->feature_3_text ?? 'Free Shipping for orders over ' . ($currency->symbol ?? '') . number_format($ecommerce_setting->free_shipping_from ?? 4000, 0)
                        ],
                        [
                            'icon' => 'icon-headset',
                            'title' => $ecommerce_setting->feature_4_title ?? 'Online support',
                            'text' => $ecommerce_setting->feature_4_text ?? '24 hours a day, 7 days a week'
                        ],
                    ];
                @endphp
                
                @foreach($features as $index => $feature)
                <div class="swiper-slide">
                    <div class="box-icon_V01 wow fadeInLeft" data-wow-delay="{{ $index * 0.1 }}s">
                        <span class="icon">
                            <i class="{{ $feature['icon'] }}"></i>
                        </span>
                        <div class="content">
                            <h4 class="title fw-normal">{{ $feature['title'] }}</h4>
                            <p class="text">{{ $feature['text'] }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="sw-dot-default tf-sw-pagination"></div>
        </div>
    </div>
</div>
<!-- /Box Icon -->

<!-- Include Footer -->

@endsection

@section('script')
<script type="text/javascript">
    "use strict";

    // 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,
                    }
                }
            });
        });
    }

    // Add to cart functionality for home page
    $(document).on('click', '.add-to-cart-home', 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);
            }
        });
    });

    //SEARCH FIELD SUGGESTION
    $('#search').on('input', function() {
        var item = $('#search').val();
        if (item.length > 3) {
            $('.search_result').css('display','block').html('<div class="d-block text-center"><div class="spinner-border text-secondary" role="status"><span class="sr-only">Loading...</span></div></div>');
            $.ajax({
                type: "get",
                url: "{{url('search')}}/" + item,
                success: function(data) {
                    $('.search_result').html('').css('height','200px');
                    $.each(data,function(key, value){ 
                        var image = value.image.split(',');
                        var url = "{{url('/product')}}/"+value.slug+"/"+value.id;
                        $('.search_result').append('<a href="'+url+'"><img src="{{asset("public/images/product/small/")}}/'+image[0]+'"><h4>'+value.name+'</h4></a>')
                    })
                }
            })  
        } else if (item.length < 3) {
            $('.search_result').html('').css('display','none');
        }
    });

    // 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 sidebar 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 (FIXED: Now updates count in header)
    $(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")}}');

                    // Update count in both headers
                    $('.wishlist .count').each(function() {
                        var currentCount = parseInt($(this).text()) || 0;
                        $(this).text(currentCount + 1).removeClass('d-none');
                    });
                }
                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
    });

    // Initialize cart sidebar when page loads
    $(document).ready(function() {
        updateCartSidebar();
    });
</script>
@endsection