@extends('layouts.app')

@section('title', __('layout.navigation.gold_products'))

@php
    function getCurrencySymbol($currency) {
        $symbols = [
            'USD' => '$',
            'usd' => '$',
            'EUR' => '€',
            'eur' => '€',
            'GBP' => '£',
            'gbp' => '£',
            'ILS' => '₪',
            'ils' => '₪',
            'SAR' => 'ر.س',
            'sar' => 'ر.س',
            'AED' => 'د.إ',
            'aed' => 'د.إ',
            'KWD' => 'د.ك',
            'kwd' => 'د.ك',
            'BHD' => 'ب.د',
            'bhd' => 'ب.د',
            'QAR' => 'ر.ق',
            'qar' => 'ر.ق',
            'OMR' => 'ر.ع',
            'omr' => 'ر.ع',
            'JOD' => 'د.أ',
            'jod' => 'د.أ',
            'LBP' => 'ل.ل',
            'lbp' => 'ل.ل',
            'EGP' => 'ج.م',
            'egp' => 'ج.م',
        ];
        return $symbols[$currency] ?? '$';
    }
@endphp

@section('content')
@php($goldProducts = trans('gold_products'))
@php($isRtl = app()->getLocale() === 'ar')
<div class="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
    <div class="flex flex-col md:flex-row">
        <!-- Mobile Sidebar Toggle -->
        <div class="md:hidden bg-gray-800/95 backdrop-blur-xl border-b border-gray-700 p-4">
            <button onclick="toggleSidebar()" class="flex items-center space-x-2 px-4 py-2 bg-yellow-500/10 text-yellow-300 rounded-lg border border-yellow-500/20">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
                <span>{{ __('gold_products.filters') }}</span>
            </button>
        </div>

        <!-- Sidebar -->
        <aside id="sidebar" class="w-full md:w-64 bg-gray-800/95 backdrop-blur-xl border-r border-gray-700 md:min-h-screen md:sticky md:top-0 hidden md:block">
            <div class="p-4 md:p-6">
                <!-- Mobile Close Button -->
                <div class="md:hidden flex justify-between items-center mb-6">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 md:w-10 md:h-10 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl flex items-center justify-center">
                            <img src="{{ asset('Sbaekfinalogo/IMG_3112-Photoroom.png') }}" alt="Sbaek" class="w-6 h-6 md:w-8 md:h-8 object-contain">
                        </div>
                        <div>
                            <h2 class="text-base md:text-lg font-bold text-white">{{ __('gold_products.sbaek_gold') }}</h2>
                            <p class="text-xs text-gray-400">{{ __('gold_products.premium_collection') }}</p>
                        </div>
                    </div>
                    <button onclick="toggleSidebar()" class="p-2 bg-gray-700/50 text-gray-300 rounded-lg hover:bg-gray-600 transition-colors duration-200">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <!-- Navigation -->
                <nav class="space-y-1 mb-6 md:mb-8">
                    <a href="{{ route('home') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-gray-700 transition-all duration-200">
                        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a2 2 0 002 2h10a2 2 0 002-2v-10M9 21V9a2 2 0 012-2h2a2 2 0 012 2v12"/>
                        </svg>
                        {{ __('layout.navigation.home') }}
                    </a>
                    <a href="{{ route('gold.products') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">
                        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        {{ __('layout.navigation.gold_products') }}
                    </a>
                    <a href="{{ route('gold.prices') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-gray-700 transition-all duration-200">
                        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                        </svg>
                        {{ __('layout.navigation.gold_prices') }}
                    </a>
                    <a href="{{ route('cart.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-gray-700 transition-all duration-200">
                        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                        {{ $isRtl ? 'السلة' : 'Shopping Cart' }}
                    </a>
                </nav>

                <!-- Categories Filter -->
                <div class="mb-6 md:mb-8">
                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">{{ __('gold_products.categories') }}</h3>
                    <div class="space-y-1">
                        @foreach($categorySections as $section)
                            @php($category = $section['key'])
                            <button onclick="filterCategory('{{ $category }}')" class="w-full text-left px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg transition-all duration-200 category-btn" data-category="{{ $category }}">
                                {{ $category === 'other' ? trans('gold_products.other_category') : ucwords($category) }}
                                <span class="float-right text-xs bg-gray-600 px-2 py-1 rounded-full">{{ $section['total'] }}</span>
                            </button>
                        @endforeach
                        <button onclick="filterCategory('all')" class="w-full text-left px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg transition-all duration-200 category-btn active" data-category="all">
                            {{ __('gold_products.all_products') }}
                            <span class="float-right text-xs bg-yellow-500/20 text-yellow-300 px-2 py-1 rounded-full">{{ $totalProducts }}</span>
                        </button>
                    </div>
                </div>

                <!-- Price Range -->
                <div>
                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">{{ __('gold_products.price_range') }}</h3>
                    <div class="space-y-3">
                        <input type="range" id="priceRange" min="0" max="10000" value="10000" class="w-full" oninput="updatePriceFilter(this.value)">
                        <div class="flex justify-between text-xs text-gray-400">
                            <span>0</span>
                            <span id="priceValue">10,000</span>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 p-4 md:p-8">
            <!-- Header -->
            <div class="mb-6 md:mb-8">
                <div class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 rounded-2xl p-4 md:p-8 border border-yellow-500/20">
                    <div class="max-w-3xl">
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="px-3 py-1 bg-yellow-500/20 text-yellow-300 rounded-full text-sm font-medium border border-yellow-500/30">
                                {{ $goldProducts['badge'] }}
                            </span>
                            <span class="px-3 py-1 bg-white/10 text-white rounded-full text-sm font-medium border border-white/20">
                                {{ $goldProducts['total_label'] }}: {{ $totalProducts }}
                            </span>
                        </div>
                        <h1 class="text-2xl md:text-4xl font-bold text-white mb-2 md:mb-4">{{ $goldProducts['title'] }}</h1>
                        <p class="text-sm md:text-lg text-gray-300 mb-4 md:mb-6">{{ $goldProducts['subtitle'] }}</p>
                        <div class="flex flex-wrap gap-2 md:gap-3">
                            @auth
                                <a href="{{ route('cart.index') }}" class="px-4 py-2 md:px-6 md:py-3 bg-yellow-500 text-black font-semibold rounded-xl hover:bg-yellow-400 transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-yellow-500/25 text-sm md:text-base">
                                    <span class="flex items-center space-x-2">
                                        <svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                                        </svg>
                                        <span>{{ $isRtl ? 'السلة' : 'View Cart' }}</span>
                                    </span>
                                </a>
                            @endauth
                            @guest
                                <a href="{{ route('login') }}" class="px-4 py-2 md:px-6 md:py-3 bg-yellow-500 text-black font-semibold rounded-xl hover:bg-yellow-400 transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-yellow-500/25 text-sm md:text-base">
                                    <span class="flex items-center space-x-2">
                                        <svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
                                        </svg>
                                        <span>{{ $isRtl ? 'تسجيل الدخول' : 'Login' }}</span>
                                    </span>
                                </a>
                                <a href="{{ route('register') }}" class="px-4 py-2 md:px-6 md:py-3 bg-gray-700 text-white font-semibold rounded-xl hover:bg-gray-600 transition-all duration-200 text-sm md:text-base">
                                    <span class="flex items-center space-x-2">
                                        <svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                                        </svg>
                                        <span>{{ $isRtl ? 'إنشاء حساب' : 'Register' }}</span>
                                    </span>
                                </a>
                            @endguest
                            <a href="{{ route('gold.prices') }}" class="px-4 py-2 md:px-6 md:py-3 bg-gray-700 text-white font-semibold rounded-xl hover:bg-gray-600 transition-all duration-200 text-sm md:text-base">
                                {{ $isRtl ? 'الأسعار الحالية' : 'Current Prices' }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Search and Sort -->
            <div class="mb-4 md:mb-6 flex flex-col gap-3 md:flex-row md:gap-4 md:items-center md:justify-between">
                <div class="flex-1 min-w-[200px] md:min-w-[300px]">
                    <div class="relative">
                        <input type="text" id="searchInput" placeholder="{{ __('gold_products.search_placeholder') }}" class="w-full px-3 py-2 md:px-4 md:py-3 pl-10 md:pl-12 bg-gray-800/60 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent text-sm md:text-base" onkeyup="searchProducts(this.value)">
                        <svg class="absolute left-3 md:left-4 top-2.5 md:top-3.5 w-4 h-4 md:w-5 md:h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                </div>
                <select id="sortSelect" class="px-3 py-2 md:px-4 md:py-3 bg-gray-800/60 border border-gray-700 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 text-sm md:text-base" onchange="sortProducts(this.value)">
                    <option value="name">{{ __('gold_products.sort_name') }}</option>
                    <option value="price-low">{{ __('gold_products.sort_price_low') }}</option>
                    <option value="price-high">{{ __('gold_products.sort_price_high') }}</option>
                    <option value="category">{{ __('gold_products.sort_category') }}</option>
                </select>
            </div>

            <!-- Products Grid -->
            <div id="productsContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
                @foreach($categorySections as $section)
                    @php($category = $section['key'])
                    @foreach($section['products'] as $product)
                        <div class="product-card bg-gray-800/60 backdrop-blur-sm rounded-2xl border border-gray-700 overflow-hidden hover:border-yellow-500/30 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl hover:shadow-yellow-500/10" data-category="{{ $category }}" data-price="{{ $product->price ?? 0 }}" data-name="{{ strtolower($product->name) }}">
                            <div class="relative">
<img src="{{ $product->image_path ? (Str::startsWith($product->image_path, 'http') ? $product->image_path : asset($product->image_path)) : ($product->image_url ?: asset('hero.png')) }}" 
     alt="{{ $product->name }}" 
     loading="lazy"
     onerror="this.onerror=null; this.src='{{ asset('hero.png') }}';"
     class="w-full h-32 md:h-48 object-cover bg-gray-900">                                <div class="absolute top-2 md:top-3 right-2 md:right-3">
                                    <span class="px-2 py-1 bg-black/60 backdrop-blur-sm text-yellow-300 text-xs font-medium rounded-full border border-yellow-500/30">
                                        {{ $category === 'other' ? trans('gold_products.other_category') : ucwords($category) }}
                                    </span>
                                </div>
                            </div>
                            <div class="p-4 md:p-6">
                                <h3 class="text-base md:text-lg font-semibold text-white mb-2">{{ $product->name }}</h3>
                                @if($product->price)
                                    <div class="text-xl md:text-2xl font-bold text-yellow-400 mb-3 md:mb-4">{{ getCurrencySymbol($product->currency ?? 'USD') }}{{ number_format($product->price, 2) }}</div>
                                @endif
                                @auth
                                    @if($product->price)
                                        <form action="{{ route('cart.add') }}" method="POST" class="w-full">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                                            <input type="hidden" name="quantity" value="1">
                                            <button type="submit" class="w-full px-3 py-2 md:px-4 md:py-3 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black font-semibold rounded-xl hover:from-yellow-600 hover:to-yellow-700 transition-all duration-200 transform hover:scale-105 text-sm md:text-base">
                                                {{ $isRtl ? 'أضف للسلة' : 'Add to Cart' }}
                                            </button>
                                        </form>
                                    @endif
                                @endauth
                                @guest
                                    @if($product->price)
                                        <a href="{{ route('login') }}" class="w-full px-3 py-2 md:px-4 md:py-3 bg-gradient-to-r from-gray-600 to-gray-700 text-white font-semibold rounded-xl hover:from-gray-700 hover:to-gray-800 transition-all duration-200 transform hover:scale-105 text-center block text-sm md:text-base">
                                            {{ $isRtl ? 'سجل دخولك للشراء' : 'Login to Purchase' }}
                                        </a>
                                    @endif
                                @endguest
                            </div>
                        </div>
                    @endforeach
                @endforeach
            </div>

            <!-- Empty State -->
            <div id="emptyState" class="hidden text-center py-12 md:py-16">
                <div class="inline-flex items-center justify-center w-16 h-16 md:w-20 md:h-20 bg-gray-800 rounded-full mb-4 md:mb-6">
                    <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </div>
                <h3 class="text-xl md:text-2xl font-bold text-white mb-2">{{ __('gold_products.no_products_found') }}</h3>
                <p class="text-gray-400 mb-4 md:mb-6 text-sm md:text-base">{{ __('gold_products.adjust_search') }}</p>
                <button onclick="resetFilters()" class="px-4 py-2 md:px-6 md:py-3 bg-yellow-500 text-black font-semibold rounded-xl hover:bg-yellow-400 transition-all duration-200 text-sm md:text-base">
                    {{ __('gold_products.reset_filters') }}
                </button>
            </div>
        </main>
    </div>
</div>

<style>
.category-btn.active {
    background-color: rgba(250, 204, 21, 0.1);
    color: rgb(250, 204, 21);
    border-color: rgba(250, 204, 21, 0.3);
}

.product-card.hidden {
    display: none;
}

/* Mobile sidebar styles */
@media (max-width: 768px) {
    #sidebar.mobile-open {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        overflow-y: auto;
    }
}
</style>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    sidebar.classList.toggle('mobile-open');
    
    // Add overlay when sidebar is open
    if (sidebar.classList.contains('mobile-open')) {
        const overlay = document.createElement('div');
        overlay.id = 'mobile-overlay';
        overlay.className = 'fixed inset-0 bg-black/50 z-40';
        overlay.onclick = toggleSidebar;
        document.body.appendChild(overlay);
        document.body.style.overflow = 'hidden';
    } else {
        const overlay = document.getElementById('mobile-overlay');
        if (overlay) {
            overlay.remove();
        }
        document.body.style.overflow = '';
    }
}

function filterCategory(category) {
    // Close mobile sidebar after selecting a category if it's currently open
    if (window.innerWidth < 768) {
        const sidebar = document.getElementById('sidebar');
        if (sidebar && sidebar.classList.contains('mobile-open')) {
            toggleSidebar();
        }
    }
    
    // Update active state
    document.querySelectorAll('.category-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    document.querySelector(`[data-category="${category}"]`).classList.add('active');
    
    // Filter products
    const products = document.querySelectorAll('.product-card');
    let visibleCount = 0;
    
    products.forEach(product => {
        if (category === 'all' || product.dataset.category === category) {
            product.classList.remove('hidden');
            visibleCount++;
        } else {
            product.classList.add('hidden');
        }
    });
    
    // Show/hide empty state
    document.getElementById('emptyState').classList.toggle('hidden', visibleCount > 0);
    document.getElementById('productsContainer').classList.toggle('hidden', visibleCount === 0);
}

function updatePriceFilter(maxPrice) {
    document.getElementById('priceValue').textContent = parseInt(maxPrice).toLocaleString();
    
    const products = document.querySelectorAll('.product-card');
    let visibleCount = 0;
    
    products.forEach(product => {
        const price = parseFloat(product.dataset.price);
        if (price <= maxPrice) {
            product.classList.remove('hidden');
            visibleCount++;
        } else {
            product.classList.add('hidden');
        }
    });
    
    document.getElementById('emptyState').classList.toggle('hidden', visibleCount > 0);
    document.getElementById('productsContainer').classList.toggle('hidden', visibleCount === 0);
}

function searchProducts(query) {
    const products = document.querySelectorAll('.product-card');
    const searchTerm = query.toLowerCase();
    let visibleCount = 0;
    
    products.forEach(product => {
        const name = product.dataset.name;
        if (name.includes(searchTerm)) {
            product.classList.remove('hidden');
            visibleCount++;
        } else {
            product.classList.add('hidden');
        }
    });
    
    document.getElementById('emptyState').classList.toggle('hidden', visibleCount > 0);
    document.getElementById('productsContainer').classList.toggle('hidden', visibleCount === 0);
}

function sortProducts(sortBy) {
    const container = document.getElementById('productsContainer');
    const products = Array.from(container.querySelectorAll('.product-card:not(.hidden)'));
    
    products.sort((a, b) => {
        switch(sortBy) {
            case 'name':
                return a.dataset.name.localeCompare(b.dataset.name);
            case 'price-low':
                return parseFloat(a.dataset.price) - parseFloat(b.dataset.price);
            case 'price-high':
                return parseFloat(b.dataset.price) - parseFloat(a.dataset.price);
            case 'category':
                return a.dataset.category.localeCompare(b.dataset.category);
            default:
                return 0;
        }
    });
    
    // Re-append sorted products
    products.forEach(product => container.appendChild(product));
}

function resetFilters() {
    document.getElementById('searchInput').value = '';
    document.getElementById('priceRange').value = '10000';
    document.getElementById('sortSelect').value = 'name';
    updatePriceFilter(10000);
    filterCategory('all');
    searchProducts('');
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    filterCategory('all');
    
    // Handle window resize
    window.addEventListener('resize', function() {
        if (window.innerWidth >= 768) {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('mobile-overlay');
            sidebar.classList.remove('mobile-open');
            if (overlay) overlay.remove();
            document.body.style.overflow = '';
        }
    });
});
</script>
@endsection