@extends('user.layout')

@section('title','শপ')

@push('head')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
:root {
    --primary: #0759ff;
    --primary-dark: #0045cc;
    --primary-gradient: linear-gradient(135deg, #0759ff, #0045cc);
    --bg: #f6f9fc;
    --surface: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --danger: #ef4444;

    --shadow-small: 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-medium: 0 8px 20px rgba(7, 89, 255, 0.08);
}

.shop-page {
    background: var(--bg);
    min-height: 100vh;
    padding: 12px 10px 100px;
    font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
    color: var(--text);
}

.shop-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero & Banner Box */
.shop-hero-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    box-shadow: var(--shadow-small);
    margin-bottom: 16px;
}

.shop-banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 12px;
    object-fit: cover;
}

/* Search Bar */
.shop-search {
    height: 48px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    overflow: hidden;
    margin-bottom: 10px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.shop-search:focus-within {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(7, 89, 255, 0.12);
}

.search-icon {
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.shop-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.shop-search button {
    width: 54px;
    border: 0;
    background: var(--primary-gradient);
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.policy-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: #eaf2ff;
    border: 1px dashed #b6d4fe;
    color: var(--primary);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 800;
}

/* Shortcuts Grid (5 items) */
.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 14px 0 20px;
}

.shortcut-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-small);
    transition: transform 150ms ease, border-color 150ms ease;
}

.shortcut-card:active {
    transform: scale(0.96);
}

.shortcut-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 15px;
    margin-bottom: 6px;
}

.bg-blue { background: var(--primary); }
.bg-green { background: #10b981; }
.bg-pink { background: #ec4899; }
.bg-purple { background: #8b5cf6; }
.bg-orange { background: #f97316; }

.shortcut-card span {
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

/* Section Title Row */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 12px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.section-title i {
    color: var(--primary);
}

.section-link {
    font-size: 12px;
    color: var(--primary);
    font-weight: 800;
    text-decoration: none;
}

.total-items {
    background: #e2e8f0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
}

/* Category Grid & Cards (Updated Large Sizes) */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 8px;
    margin-bottom: 22px;
}

.cat-card {
    display: block;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.cat-square {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
    transition: transform 150ms ease, border-color 150ms ease;
}

.cat-card:active .cat-square {
    transform: scale(0.96);
}

.cat-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cat-avatar {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    color: var(--primary);
    font-size: 22px;
}

.cat-name {
    display: -webkit-box;
    min-height: 28px;
    margin-top: 5px;
    padding: 0 1px;
    overflow: hidden;
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Horizontal Scroll Sections */
.new-product-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 12px;
    margin-bottom: 20px;
    scroll-snap-type: x mandatory;
}

.new-product-scroll::-webkit-scrollbar {
    display: none;
}

.new-product-card {
    min-width: 150px;
    max-width: 150px;
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Main Product Cards Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.product-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.product-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8fafc;
}

.product-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #ec4899;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    z-index: 5;
    transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
}

.fav-btn.active {
    background: #ec4899;
    color: #ffffff;
}

.fav-btn.loading {
    opacity: 0.65;
    pointer-events: none;
}

.discount-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--danger);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.product-info {
    padding: 8px 8px 6px;
}

.product-name {
    display: -webkit-box;
    min-height: 34px;
    margin-bottom: 6px;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

.price {
    color: var(--primary);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}

.old-price {
    color: var(--muted);
    font-size: 11px;
    text-decoration: line-through;
}

.product-footer {
    margin-top: auto;
    padding: 0 8px 8px;
}

.buy-btn {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    background: var(--primary-gradient);
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.buy-btn:hover {
    background: var(--primary-dark);
}

.buy-btn.disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
}

.empty-box {
    padding: 32px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

/* Infinite Scroll Indicator */
.load-more-trigger {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.load-more-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 30px;
}

.load-more-error {
    font-size: 12px;
    font-weight: 700;
    color: var(--danger);
}

/* Toast Message */
.favorite-toast {
    position: fixed;
    left: 50%;
    bottom: 88px;
    transform: translateX(-50%) translateY(20px);
    background: #0f172a;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms ease, opacity 200ms ease;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.25);
    white-space: nowrap;
}

.favorite-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.favorite-toast.success { background: #16a34a; }
.favorite-toast.remove { background: #ef4444; }
.favorite-toast.error { background: #dc2626; }

/* Responsive Media Queries */
@media(min-width: 576px) {
    .shop-page { padding: 16px 14px 100px; }
    .cat-grid { grid-template-columns: repeat(5, 1fr); gap: 12px 10px; }
    .product-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .shortcut-card span { font-size: 11px; }
}

@media(min-width: 768px) {
    .cat-grid { grid-template-columns: repeat(7, 1fr); }
    .product-grid { grid-template-columns: repeat(4, 1fr); }
}

@media(min-width: 1100px) {
    .cat-grid { grid-template-columns: repeat(8, 1fr); }
    .product-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
}
</style>
@endpush

@section('content')

@php
    $search = $search ?? request('search');
    $categoryId = $categoryId ?? request('category_id');
    $isSearchMode = !empty($search);
    $defaultProductImage = asset('images/default-product.png');
@endphp

<div class="shop-page">
    <div class="shop-container">

        {{-- Hero Header Box --}}
        <div class="shop-hero-box">
            <img src="{{ asset('images/banner/shop.png') }}" onerror="this.src='{{ asset('images/banner/1.png') }}'" class="shop-banner" alt="শপ ব্যানার">

            <form method="GET" action="{{ route('user.shop') }}" class="shop-search">
                @if($categoryId)
                    <input type="hidden" name="category_id" value="{{ $categoryId }}">
                @endif

                <div class="search-icon">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </div>

                <input type="text" name="search" value="{{ $search }}" placeholder="প্রোডাক্ট বা ক্যাটাগরি সার্চ করুন">

                <button type="button" id="searchBtn">
                    @if($isSearchMode || $categoryId)
                        <i class="fa-solid fa-xmark"></i>
                    @else
                        <i class="fa-solid fa-magnifying-glass"></i>
                    @endif
                </button>
            </form>

            <a href="/reselling-policy" class="policy-btn">
                <span>
                    <i class="fa-solid fa-book-open"></i>
                    &nbsp;&nbsp;রিসেলিং নীতিমালা ও শর্তাবলী
                </span>
                <i class="fa-solid fa-arrow-right"></i>
            </a>
        </div>

        {{-- Non-Search Elements --}}
        @if(!$isSearchMode)
            {{-- Shortcuts Row (Includes Cart) --}}
            <div class="shortcut-grid">
                <a href="{{ route('user.dashboard') }}" class="shortcut-card">
                    <div class="shortcut-icon bg-blue">
                        <i class="fa-solid fa-table-cells"></i>
                    </div>
                    <span>ড্যাশবোর্ড</span>
                </a>

                <a href="/my-orders" class="shortcut-card">
                    <div class="shortcut-icon bg-green">
                        <i class="fa-solid fa-list"></i>
                    </div>
                    <span>অর্ডার</span>
                </a>

                <a href="/cart" class="shortcut-card">
                    <div class="shortcut-icon bg-purple">
                        <i class="fa-solid fa-cart-shopping"></i>
                    </div>
                    <span>কার্ট</span>
                </a>

                <a href="{{ route('user.favorites') }}" class="shortcut-card">
                    <div class="shortcut-icon bg-pink">
                        <i class="fa-solid fa-heart"></i>
                    </div>
                    <span>ফেভারিট</span>
                </a>

                <a href="{{ auth()->check() && auth()->user()->isApprovedVendor() ? route('user.vendor.dashboard') : route('user.vendor.apply') }}" class="shortcut-card">
                    <div class="shortcut-icon bg-orange">
                        <i class="fa-solid fa-store"></i>
                    </div>
                    <span>ভেন্ডর</span>
                </a>
            </div>

            {{-- Category Section --}}
            <div class="section-title-row">
                <div class="section-title">
                    <i class="fa-solid fa-tags"></i>
                    <span>ক্যাটাগরি</span>
                </div>
            </div>

            <div class="cat-grid">
                @foreach($categories as $category)
                    @php
                        $catPhoto = $category->photo_path ?? null;
                    @endphp

                    <a href="{{ route('user.shop.category', $category->id) }}" class="cat-card">
                        <div class="cat-square">
                            @if($catPhoto)
                                <img src="{{ $catPhoto }}" class="cat-img" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" alt="{{ $category->name }}">
                                <div class="cat-avatar" style="display:none;">
                                    <i class="fa-solid fa-layer-group"></i>
                                </div>
                            @else
                                <div class="cat-avatar">
                                    <i class="fa-solid fa-layer-group"></i>
                                </div>
                            @endif
                        </div>

                        <div class="cat-name">
                            {{ $category->name }}
                        </div>
                    </a>
                @endforeach
            </div>

            {{-- Dynamic Scroll Sections --}}
            @php
                $homeSections = [
                    ['title' => 'নতুন প্রোডাক্ট','icon' => 'fa-bolt','products' => $newProducts ?? collect(),'route' => route('user.shop.new-products')],
                    ['title' => 'ফ্ল্যাশ সেল','icon' => 'fa-fire','products' => $flashSaleProducts ?? collect(),'route' => route('user.shop.section', 'flash-sale')],
                    ['title' => 'রিসেলার চয়েস','icon' => 'fa-crown','products' => $resellerChoiceProducts ?? collect(),'route' => route('user.shop.section', 'reseller-choice')],
                    ['title' => 'স্টক শেষ হওয়ার পথে','icon' => 'fa-triangle-exclamation','products' => $lowStockProducts ?? collect(),'route' => route('user.shop.section', 'low-stock')],
                ];
            @endphp

            @foreach($homeSections as $section)
                @if($section['products']->count())
                    <div class="section-title-row">
                        <div class="section-title">
                            <i class="fa-solid {{ $section['icon'] }}"></i>
                            <span>{{ $section['title'] }}</span>
                        </div>

                        <a href="{{ $section['route'] }}" class="section-link">
                            সব দেখুন
                        </a>
                    </div>

                    <div class="new-product-scroll">
                        @foreach($section['products'] as $product)
                            @php
                                $firstImage = $product->images->first();
                                $pImg = $firstImage ? $firstImage->image_url : $defaultProductImage;
                                $hasDiscount = !empty($product->display_price['has_discount']);
                                $discountPercent = $hasDiscount ? rtrim(rtrim($product->display_price['discount_percent'], '0'), '.') : null;
                            @endphp

                            <div class="product-card new-product-card">
                                <button type="button" class="fav-btn favorite-toggle {{ !empty($product->is_favorite) ? 'active' : '' }}" data-product-id="{{ $product->id }}">
                                    <i class="{{ !empty($product->is_favorite) ? 'fa-solid' : 'fa-regular' }} fa-heart"></i>
                                </button>

                                <a href="{{ route('user.product.details', $product->slug) }}" class="product-link">
                                    <div class="product-img-wrap">
                                        <img src="{{ $pImg }}" class="product-img" alt="{{ $product->name }}" loading="lazy">

                                        @if($hasDiscount)
                                            <div class="discount-badge">
                                                {{ $discountPercent }}% ছাড়
                                            </div>
                                        @endif
                                    </div>

                                    <div class="product-info">
                                        <div class="product-name">{{ $product->name }}</div>

                                        <div class="price-line">
                                            <span class="price">৳{{ number_format($product->display_price['final'], 0) }}</span>

                                            @if($hasDiscount)
                                                <span class="old-price">৳{{ number_format($product->display_price['base'], 0) }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endif
            @endforeach
        @endif

        {{-- Main Product Listing Section --}}
        <div class="section-title-row">
            <div class="section-title">
                <i class="fa-solid fa-box"></i>
                <span>{{ $isSearchMode ? 'সার্চ রেজাল্ট' : 'প্রোডাক্টসমূহ' }}</span>
            </div>

            <div class="total-items">
                {{ $products->total() }} টি
            </div>
        </div>

        @if($products->count())
            <div class="product-grid" id="productGrid">
                @foreach($products as $product)
                    @php
                        $firstImage = $product->images->first();
                        $pImg = $firstImage ? $firstImage->image_url : $defaultProductImage;
                        $detailsUrl = route('user.product.details', $product->slug);
                        $hasDiscount = !empty($product->display_price['has_discount']);
                        $discountPercent = $hasDiscount ? rtrim(rtrim($product->display_price['discount_percent'], '0'), '.') : null;
                    @endphp

                    <div class="product-card">
                        <button type="button" class="fav-btn favorite-toggle {{ !empty($product->is_favorite) ? 'active' : '' }}" data-product-id="{{ $product->id }}">
                            <i class="{{ !empty($product->is_favorite) ? 'fa-solid' : 'fa-regular' }} fa-heart"></i>
                        </button>

                        <a href="{{ $detailsUrl }}" class="product-link">
                            <div class="product-img-wrap">
                                <img src="{{ $pImg }}" class="product-img" alt="{{ $product->name }}" loading="lazy">

                                @if($hasDiscount)
                                    <div class="discount-badge">
                                        {{ $discountPercent }}% ছাড়
                                    </div>
                                @endif
                            </div>

                            <div class="product-info">
                                <div class="product-name">{{ $product->name }}</div>

                                <div class="price-line">
                                    <span class="price">৳{{ number_format($product->display_price['final'], 0) }}</span>

                                    @if($hasDiscount)
                                        <span class="old-price">৳{{ number_format($product->display_price['base'], 0) }}</span>
                                    @endif
                                </div>
                            </div>
                        </a>

                        <div class="product-footer">
                            @if($product->is_order_off)
                                <button class="buy-btn disabled" disabled>অর্ডার বন্ধ</button>
                            @elseif($product->stock <= 0)
                                <button class="buy-btn disabled" disabled>স্টক নেই</button>
                            @else
                                <a href="{{ $detailsUrl }}" style="display:block;text-decoration:none;width:100%;">
                                    <button type="button" class="buy-btn">
                                        <i class="fa-solid fa-bag-shopping"></i>
                                        অর্ডার করুন
                                    </button>
                                </a>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            <div id="loadMoreTrigger" class="load-more-trigger">
                @if($products->hasMorePages())
                    <span class="load-more-text">আরো প্রোডাক্ট লোড হচ্ছে...</span>
                @else
                    <span class="load-more-text">সব প্রোডাক্ট দেখানো হয়েছে</span>
                @endif
            </div>
        @else
            <div class="empty-box">
                কোনো প্রোডাক্ট পাওয়া যায়নি
            </div>
        @endif

    </div>
</div>

<div id="favoriteToast" class="favorite-toast"></div>

<script>
document.addEventListener('DOMContentLoaded', function(){
    'use strict';

    let toastTimer = null;

    function showFavoriteToast(message, type){
        const toast = document.getElementById('favoriteToast');
        if(!toast) return;

        if(toastTimer) clearTimeout(toastTimer);

        toast.textContent = message;
        toast.className = 'favorite-toast show ' + type;

        toastTimer = setTimeout(function(){
            toast.className = 'favorite-toast ' + type;
        }, 1700);
    }
    
    const searchBtn = document.getElementById('searchBtn');

    if(searchBtn){
        @if($isSearchMode || $categoryId)
            searchBtn.addEventListener('click', function(){
                window.location.href = "{{ route('user.shop') }}";
            });
        @else
            searchBtn.addEventListener('click', function(){
                this.closest('form').submit();
            });
        @endif
    }

    /* Favorite Toggle Action */
    document.addEventListener('click', function(e){
        const favBtn = e.target.closest('.favorite-toggle');
        if(!favBtn) return;

        e.preventDefault();
        e.stopPropagation();

        const productId = favBtn.dataset.productId;
        if(!productId) return;

        favBtn.classList.add('loading');

        fetch("{{ route('user.product.favorite.toggle') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
                "Accept": "application/json"
            },
            body: JSON.stringify({product_id: productId})
        })
        .then(response => response.json())
        .then(function(data){
            if(data.success){
                showFavoriteToast(data.favorited ? 'ফেভারিট করা হয়েছে' : 'আনফেভারিট করা হয়েছে', data.favorited ? 'success' : 'remove');

                document.querySelectorAll('.favorite-toggle[data-product-id="' + productId + '"]').forEach(function(sameBtn){
                    const sameIcon = sameBtn.querySelector('i');

                    if(data.favorited){
                        sameBtn.classList.add('active');
                        if(sameIcon){
                            sameIcon.classList.remove('fa-regular');
                            sameIcon.classList.add('fa-solid');
                        }
                    }else{
                        sameBtn.classList.remove('active');
                        if(sameIcon){
                            sameIcon.classList.remove('fa-solid');
                            sameIcon.classList.add('fa-regular');
                        }
                    }
                });
            }else{
                showFavoriteToast('ফেভারিট আপডেট করা যায়নি', 'error');
            }
        })
        .catch(function(){
            showFavoriteToast('ফেভারিট আপডেট করা যায়নি', 'error');
        })
        .finally(function(){
            document.querySelectorAll('.favorite-toggle[data-product-id="' + productId + '"]').forEach(function(sameBtn){
                sameBtn.classList.remove('loading');
            });
        });
    });

    /* Infinite Scroll Logic */
    const productGrid = document.getElementById('productGrid');
    const trigger = document.getElementById('loadMoreTrigger');

    if(!productGrid || !trigger) return;

    let nextPage = 2;
    let loading = false;
    let hasMore = @json($products->hasMorePages());

    const currentSearch = @json($search);
    const currentCategoryId = @json($categoryId);
    const defaultImage = @json($defaultProductImage);
    const shopUrl = @json(route('user.shop'));

    function escapeHtml(text){
        if(text === null || text === undefined) return '';
        return String(text).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#039;');
    }

    function productCardHtml(product){
        const image = product.image || defaultImage;
        const detailUrl = product.detail_url || '#';
        const name = escapeHtml(product.name);
        const favClass = product.is_favorite ? 'active' : '';
        const favIcon = product.is_favorite ? 'fa-solid' : 'fa-regular';

        let discount = product.has_discount ? `<div class="discount-badge">${escapeHtml(product.discount_percent)}% ছাড়</div>` : '';
        let oldPrice = product.has_discount ? `<span class="old-price">৳${escapeHtml(product.base_price)}</span>` : '';

        let button = '';
        if(product.is_order_off){
            button = `<button class="buy-btn disabled" disabled>অর্ডার বন্ধ</button>`;
        }else if(Number(product.stock) <= 0){
            button = `<button class="buy-btn disabled" disabled>স্টক নেই</button>`;
        }else{
            button = `<a href="${detailUrl}" style="display:block;text-decoration:none;width:100%;"><button type="button" class="buy-btn"><i class="fa-solid fa-bag-shopping"></i> অর্ডার করুন</button></a>`;
        }

        return `
            <div class="product-card">
                <button type="button" class="fav-btn favorite-toggle ${favClass}" data-product-id="${product.id}">
                    <i class="${favIcon} fa-heart"></i>
                </button>
                <a href="${detailUrl}" class="product-link">
                    <div class="product-img-wrap">
                        <img src="${image}" class="product-img" alt="${name}" loading="lazy">
                        ${discount}
                    </div>
                    <div class="product-info">
                        <div class="product-name">${name}</div>
                        <div class="price-line">
                            <span class="price">৳${escapeHtml(product.final_price)}</span>
                            ${oldPrice}
                        </div>
                    </div>
                </a>
                <div class="product-footer">${button}</div>
            </div>
        `;
    }

    async function loadMoreProducts(){
        if(loading || !hasMore) return;

        loading = true;
        trigger.innerHTML = '<span class="load-more-text">আরো প্রোডাক্ট লোড হচ্ছে...</span>';

        const params = new URLSearchParams();
        params.set('page', nextPage);
        params.set('ajax', '1');

        if(currentSearch) params.set('search', currentSearch);
        if(currentCategoryId) params.set('category_id', currentCategoryId);

        try{
            const res = await fetch(shopUrl + '?' + params.toString(), {
                headers:{'X-Requested-With':'XMLHttpRequest','Accept':'application/json'}
            });

            if(!res.ok) throw new Error('Request failed');

            const data = await res.json();

            if(data.products && data.products.length){
                data.products.forEach(product => productGrid.insertAdjacentHTML('beforeend', productCardHtml(product)));
            }

            hasMore = !!data.has_more;
            nextPage = data.next_page || (nextPage + 1);

            if(!hasMore){
                trigger.innerHTML = '<span class="load-more-text">সব প্রোডাক্ট দেখানো হয়েছে</span>';
            }
        }catch(e){
            trigger.innerHTML = '<span class="load-more-error">লোড করা যায়নি, আবার স্ক্রল করুন</span>';
        }

        loading = false;
    }

    if('IntersectionObserver' in window){
        const observer = new IntersectionObserver(function(entries){
            if(entries[0].isIntersecting){
                loadMoreProducts();
            }
        }, {rootMargin:'350px'});

        observer.observe(trigger);
    }
});
</script>
@endsection