@extends('user.layout')

@section('title', 'Home')

@push('head')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
    :root {
        --home-primary: #0759ff;
        --home-primary-dark: #0045cc;
        --home-primary-soft: #eaf2ff;
        
        --home-background: #f6f9fc;
        --home-surface: #ffffff;
        --home-surface-soft: #f1f5f9;

        --home-text: #0f172a;
        --home-muted: #64748b;
        --home-border: #e2e8f0;
        --home-danger: #ef4444;

        --home-shadow-small: 0 2px 8px rgba(15, 35, 70, 0.04);
        --home-shadow-medium: 0 10px 25px rgba(7, 89, 255, 0.08);
    }

    /* Reset transitions for crisp performance */
    .pro-home *,
    .pro-home *::before,
    .pro-home *::after {
        box-sizing: border-box;
    }

    .pro-home {
        width: 100%;
        min-height: 100vh;
        padding: 12px 10px 90px;
        background: var(--home-background);
        color: var(--home-text);
        overflow-x: hidden;
    }

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

    /* Banner Slider */
    .banner-section {
        position: relative;
        width: 100%;
        margin-bottom: 16px;
        overflow: hidden;
        border: 1px solid var(--home-border);
        border-radius: 14px;
        background: var(--home-surface-soft);
        box-shadow: var(--home-shadow-small);
    }

    .banner-slider {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 6.5;
        overflow: hidden;
    }

    .banner-track {
        display: flex;
        width: 100%;
        height: 100%;
        transform: translate3d(0, 0, 0);
        transition: transform 400ms ease;
        will-change: transform;
    }

    .banner-slide {
        width: 100%;
        min-width: 100%;
        height: 100%;
        flex: 0 0 100%;
    }

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

    .banner-dots {
        position: absolute;
        left: 50%;
        bottom: 10px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.3);
        backdrop-filter: blur(4px);
        transform: translateX(-50%);
    }

    .banner-dot {
        width: 6px;
        height: 6px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: width 150ms ease, background-color 150ms ease;
    }

    .banner-dot.active {
        width: 16px;
        background: #ffffff;
    }

    /* Single Large Earning Projects Hero Banner */
    .earning-project-banner {
        position: relative;
        width: 100%;
        margin-bottom: 20px;
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(135deg, #0759ff 0%, #0036a8 100%);
        box-shadow: 0 8px 20px rgba(7, 89, 255, 0.22);
        transition: transform 200ms ease, box-shadow 200ms ease;
    }

    .earning-project-banner:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(7, 89, 255, 0.32);
    }

    .earning-project-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        text-decoration: none;
        color: #ffffff;
        position: relative;
        overflow: hidden;
    }

    .earning-project-link::after {
        content: "";
        position: absolute;
        right: -30px;
        top: -30px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        pointer-events: none;
    }

    .earning-project-content {
        display: flex;
        align-items: center;
        gap: 16px;
        z-index: 2;
    }

    .earning-project-icon-box {
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.25);
    }

    .earning-project-text-group {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .earning-project-title {
        font-size: 18px;
        font-weight: 900;
        letter-spacing: 0.8px;
        color: #ffffff;
        margin: 0;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .earning-project-sub {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 500;
        margin: 0;
    }

    .earning-project-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 999px;
        background: #ffffff;
        color: var(--home-primary);
        font-size: 13px;
        font-weight: 800;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: 2;
        flex-shrink: 0;
        transition: background 150ms ease, color 150ms ease;
    }

    .earning-project-banner:hover .earning-project-action {
        background: #f0f5ff;
    }

    /* Headings */
    .home-section {
        margin-bottom: 22px;
    }

    .home-section-heading {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 12px;
        color: var(--home-text);
        font-size: 15px;
        font-weight: 700;
    }

    .home-section-heading::before {
        content: "";
        width: 4px;
        height: 16px;
        flex: 0 0 4px;
        border-radius: 999px;
        background: var(--home-primary);
    }

    /* Category Grid */
    .category-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px 8px;
    }

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

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

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

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

    .category-placeholder {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        background: var(--home-primary-soft);
        color: var(--home-primary);
        font-size: 18px;
        font-weight: 700;
    }

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

    /* Centered Product Section Header */
    .product-section-title {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 14px;
        padding: 10px 14px;
        border-radius: 10px;
        background: var(--home-primary);
        color: #ffffff;
        box-shadow: var(--home-shadow-small);
    }

    .product-title-text {
        margin: 0;
        color: #ffffff;
        font-size: 15px;
        font-weight: 800;
    }

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

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

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

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

    .product-image-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--home-surface-soft);
    }

    .product-image {
        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.9);
        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: 4;
        transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
    }

    .fav-btn:hover, .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: 3;
        padding: 3px 6px;
        border-radius: 4px;
        background: var(--home-danger);
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
    }

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

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

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

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

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

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

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

    .order-button:hover {
        background: var(--home-primary-dark);
        color: #ffffff;
    }

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

    /* Social Community Section */
    .social-community {
        margin-top: 20px;
        padding: 16px;
        border: 1px solid var(--home-border);
        border-radius: 14px;
        background: var(--home-surface);
        box-shadow: var(--home-shadow-small);
        text-align: center;
    }

    .social-heading {
        margin-bottom: 12px;
    }

    .social-title {
        margin: 0 0 2px;
        color: var(--home-text);
        font-size: 14px;
        font-weight: 800;
    }

    .social-description {
        margin: 0;
        color: var(--home-muted);
        font-size: 11px;
    }

    .social-grid {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .social-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border: 1px solid var(--home-border);
        border-radius: 30px;
        background: var(--home-surface);
        color: var(--home-text);
        text-decoration: none;
        transition: border-color 150ms ease, background-color 150ms ease;
    }

    .social-link:hover {
        border-color: var(--home-primary);
        background: var(--home-primary-soft);
        color: var(--home-primary);
    }

    .social-icon { font-size: 14px; }
    .social-facebook .social-icon { color: #1877f2; }
    .social-youtube .social-icon { color: #ff0000; }
    .social-telegram .social-icon { color: #0088cc; }
    .social-whatsapp .social-icon { color: #25d366; }

    .social-name {
        font-size: 11px;
        font-weight: 700;
    }

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

    .loading-pill, .complete-pill, .error-pill {
        display: inline-flex;
        min-height: 32px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 14px;
        border: 1px solid var(--home-border);
        border-radius: 999px;
        background: var(--home-surface);
        color: var(--home-muted);
        font-size: 12px;
        font-weight: 700;
    }

    .loading-spinner {
        width: 14px;
        height: 14px;
        border: 2px solid var(--home-border);
        border-top-color: var(--home-primary);
        border-radius: 50%;
        animation: homeSpinner 600ms linear infinite;
    }

    @keyframes homeSpinner {
        to { transform: rotate(360deg); }
    }

    .empty-state {
        padding: 30px 16px;
        border: 1px solid var(--home-border);
        border-radius: 12px;
        background: var(--home-surface);
        color: var(--home-muted);
        text-align: center;
    }

    .favorite-toast {
        position: fixed;
        left: 50%;
        bottom: 88px;
        transform: translateX(-50%) translateY(20px);
        background: #0f172a;
        color: #fff;
        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; }

    /* Media Queries */
    @media (min-width: 576px) {
        .pro-home { padding: 16px 14px 90px; }
        .category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px; }
        .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    }

    @media (min-width: 768px) {
        .category-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
        .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .social-community { padding: 20px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
        .social-heading { text-align: left; margin-bottom: 0; }
        .social-grid { justify-content: flex-end; gap: 10px; }
    }

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

@section('content')

@php
    $socialLinks = $socialLinks ?? [];
    $facebook = !empty($socialLinks['facebook']) ? $socialLinks['facebook'] : '#';
    $youtube  = !empty($socialLinks['youtube']) ? $socialLinks['youtube'] : '#';
    $telegram = !empty($socialLinks['telegram']) ? $socialLinks['telegram'] : '#';
    $whatsapp = !empty($socialLinks['whatsapp']) ? $socialLinks['whatsapp'] : '#';

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

<div class="pro-home">
  <main class="home-container">

    {{-- Banner Slider --}}
    @if(!empty($sliders) && count($sliders))
      <section class="banner-section" aria-label="প্রচারমূলক ব্যানার">
        <div class="banner-slider" id="bannerSlider">
          <div class="banner-track" id="bannerTrack">
            @foreach($sliders as $slider)
              <div class="banner-slide">
                <img src="{{ $slider }}" alt="Banner {{ $loop->iteration }}" class="banner-image">
              </div>
            @endforeach
          </div>
          @if(count($sliders) > 1)
            <div class="banner-dots" id="bannerDots"></div>
          @endif
        </div>
      </section>
    @endif

    {{-- Single Big Earning Projects Banner --}}
    <section class="earning-project-banner">
      <a href="/earning-projects" class="earning-project-link">
        <div class="earning-project-content">
          <div class="earning-project-icon-box">
            <i class="fa-solid fa-rocket"></i>
          </div>
          <div class="earning-project-text-group">
            <h2 class="earning-project-title">EARNING PROJECTS</h2>
            <p class="earning-project-sub">আমাদের সেরা আর্নিং প্রজেক্টগুলো এক্সপ্লোর করুন</p>
          </div>
        </div>
        <div class="earning-project-action">
          <span>দেখুন</span>
          <i class="fa-solid fa-arrow-right"></i>
        </div>
      </a>
    </section>

    {{-- Popular Categories --}}
    @if(!empty($categories) && $categories->count())
      <section class="home-section">
        <h2 class="home-section-heading">জনপ্রিয় ক্যাটাগরি</h2>

        <div class="category-grid">
          @foreach($categories as $category)
            @php
              $categoryPhoto = $category->photo_path ?? null;
              $isActive = (string)$categoryId === (string)$category->id;
              $initial = mb_substr(trim($category->name), 0, 1);
            @endphp

            <a href="{{ route('user.shop.category', $category->id) }}" class="category-card">
              <div class="category-square">
                @if($categoryPhoto)
                  <img src="{{ $categoryPhoto }}" alt="{{ $category->name }}" class="category-image" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                  <div class="category-placeholder" style="display:none;">{{ $initial }}</div>
                @else
                  <div class="category-placeholder">{{ $initial }}</div>
                @endif
              </div>
              <div class="category-name">{{ $category->name }}</div>
            </a>
          @endforeach
        </div>
      </section>
    @endif

    {{-- Products Section --}}
    <section class="home-section">
      <div class="product-section-title">
        <h2 class="product-title-text">আপনার প্রয়োজনীয় পণ্য</h2>
      </div>

      @if($products->count())
        <div class="product-grid" id="productGrid">
          @foreach($products as $product)
            @php
              $firstImage = $product->images->first();
              $productImg = $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

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

              <a href="{{ $detailsUrl }}" class="product-main-link">
                <div class="product-image-wrapper">
                  <img src="{{ $productImg }}" alt="{{ $product->name }}" class="product-image" loading="lazy">
                  @if($hasDiscount)
                    <span class="discount-badge">{{ $discountPercent }}% ছাড়</span>
                  @endif
                </div>

                <div class="product-body">
                  <div class="product-name">{{ $product->name }}</div>
                  <div class="product-price-row">
                    <span class="current-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="order-button disabled" disabled>অর্ডার বন্ধ</button>
                @elseif($product->stock <= 0)
                  <button class="order-button disabled" disabled>স্টক নেই</button>
                @else
                  <a href="{{ $detailsUrl }}" class="order-button">
                    <i class="fa-solid fa-bag-shopping"></i> অর্ডার করুন
                  </a>
                @endif
              </div>
            </article>
          @endforeach
        </div>

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

    {{-- Official Community Section --}}
    <section class="social-community">
      <div class="social-heading">
        <h2 class="social-title">অফিসিয়াল কমিউনিটি</h2>
        <p class="social-description">নতুন অফার ও গুরুত্বপূর্ণ আপডেট পেতে যুক্ত থাকুন</p>
      </div>

      <div class="social-grid">
        <a href="{{ $facebook }}" target="_blank" class="social-link social-facebook">
          <span class="social-icon"><i class="fa-brands fa-facebook-f"></i></span>
          <span class="social-name">ফেসবুক</span>
        </a>
        <a href="{{ $youtube }}" target="_blank" class="social-link social-youtube">
          <span class="social-icon"><i class="fa-brands fa-youtube"></i></span>
          <span class="social-name">ইউটিউব</span>
        </a>
        <a href="{{ $telegram }}" target="_blank" class="social-link social-telegram">
          <span class="social-icon"><i class="fa-brands fa-telegram"></i></span>
          <span class="social-name">টেলিগ্রাম</span>
        </a>
        <a href="{{ $whatsapp }}" target="_blank" class="social-link social-whatsapp">
          <span class="social-icon"><i class="fa-brands fa-whatsapp"></i></span>
          <span class="social-name">হোয়াটসঅ্যাপ</span>
        </a>
      </div>
    </section>

  </main>
</div>

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

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

  /* Banner Slider JavaScript */
  const bannerTrack = document.getElementById('bannerTrack');
  const bannerDots = document.getElementById('bannerDots');
  const bannerSlider = document.getElementById('bannerSlider');

  if (bannerTrack) {
    const slides = Array.from(bannerTrack.children);
    let currentSlide = 0;
    let sliderTimer = null;

    if (slides.length > 1) {
      slides.forEach(function (_, index) {
        const dot = document.createElement('button');
        dot.type = 'button';
        dot.className = 'banner-dot' + (index === 0 ? ' active' : '');
        dot.addEventListener('click', function () {
          goToSlide(index);
          startSlider();
        });
        if (bannerDots) bannerDots.appendChild(dot);
      });
    }

    function goToSlide(index) {
      if (!slides.length) return;
      currentSlide = (index + slides.length) % slides.length;
      bannerTrack.style.transform = 'translate3d(-' + (currentSlide * 100) + '%, 0, 0)';

      if (bannerDots) {
        Array.from(bannerDots.children).forEach(function (dot, i) {
          dot.classList.toggle('active', i === currentSlide);
        });
      }
    }

    function startSlider() {
      stopSlider();
      if (slides.length > 1) {
        sliderTimer = setInterval(function () { goToSlide(currentSlide + 1); }, 3800);
      }
    }

    function stopSlider() {
      if (sliderTimer) clearInterval(sliderTimer);
    }

    if (bannerSlider) {
      bannerSlider.addEventListener('mouseenter', stopSlider);
      bannerSlider.addEventListener('mouseleave', startSlider);
    }

    startSlider();
  }

  /* Toast Notification */
  let toastTimer = null;
  function showToast(msg, type) {
    const toast = document.getElementById('favoriteToast');
    if (!toast) return;
    if (toastTimer) clearTimeout(toastTimer);

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

    toastTimer = setTimeout(function(){
      toast.className = 'favorite-toast ' + type;
    }, 1800);
  }

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

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

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

    btn.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(res => res.json())
    .then(data => {
      if(data.success){
        showToast(
          data.favorited ? 'ফেভারিট করা হয়েছে' : 'আনফেভারিট করা হয়েছে',
          data.favorited ? 'success' : 'remove'
        );

        document.querySelectorAll('.favorite-toggle[data-product-id="' + productId + '"]').forEach(function(el){
          const icon = el.querySelector('i');
          if(data.favorited){
            el.classList.add('active');
            if(icon) { icon.classList.remove('fa-regular'); icon.classList.add('fa-solid'); }
          } else {
            el.classList.remove('active');
            if(icon) { icon.classList.remove('fa-solid'); icon.classList.add('fa-regular'); }
          }
        });
      }
    })
    .catch(() => showToast('ত্রুটি হয়েছে', 'remove'))
    .finally(() => {
      document.querySelectorAll('.favorite-toggle[data-product-id="' + productId + '"]').forEach(el => el.classList.remove('loading'));
    });
  });

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

  if (!productGrid || !trigger) return;

  let nextPage = 2;
  let isLoading = false;
  let hasMore = @json($products->hasMorePages());
  const searchVal = @json($search);
  const categoryVal = @json($categoryId);
  const defaultImg = @json($defaultProductImage);
  const dashboardUrl = @json(route('user.dashboard'));

  function escapeHtml(str) {
    if (!str) return '';
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

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

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

    if (p.is_order_off) {
      actionBtn = `<button class="order-button disabled" disabled>অর্ডার বন্ধ</button>`;
    } else if (Number(p.stock) <= 0) {
      actionBtn = `<button class="order-button disabled" disabled>স্টক নেই</button>`;
    } else {
      actionBtn = `<a href="${detailUrl}" class="order-button"><i class="fa-solid fa-bag-shopping"></i> অর্ডার করুন</a>`;
    }

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

  async function loadMore() {
    if (isLoading || !hasMore) return;
    isLoading = true;
    trigger.innerHTML = '<span class="loading-pill"><span class="loading-spinner"></span> আরো প্রোডাক্ট লোড হচ্ছে...</span>';

    const params = new URLSearchParams();
    params.set('page', nextPage);
    params.set('ajax', '1');
    if (searchVal) params.set('search', searchVal);
    if (categoryVal) params.set('category_id', categoryVal);

    try {
      const res = await fetch(dashboardUrl + '?' + params.toString(), {
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
      });
      if (!res.ok) throw new Error('Failed');

      const data = await res.json();
      if (data.products && data.products.length) {
        const html = data.products.map(productCardHtml).join('');
        productGrid.insertAdjacentHTML('beforeend', html);
      }

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

      if (!hasMore) {
        trigger.innerHTML = '<span class="complete-pill">সব প্রোডাক্ট দেখানো হয়েছে</span>';
      }
    } catch (e) {
      trigger.innerHTML = '<span class="error-pill">লোড করা যায়নি</span>';
    } finally {
      isLoading = false;
    }
  }

  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver(function(entries) {
      if (entries[0].isIntersecting) loadMore();
    }, { rootMargin: '300px' });
    observer.observe(trigger);
  }
});
</script>
@endsection