@extends('layouts.app')

@section('title', $game->name . ' - Items')

@section('content')
<div class="max-w-7xl mx-auto px-4 game-page">
    <!-- Game Hero dengan Background Blur -->
    <div class="relative mb-8 rounded-2xl overflow-hidden game-hero">
        <!-- Background Image dengan Blur -->
        <div class="absolute inset-0">
            <img src="{{ asset($game->banner ?? $game->icon) }}" 
                 alt="{{ $game->name }} Background"
                 class="w-full h-full object-cover scale-110 blur-xl opacity-40">
            <div class="absolute inset-0 bg-gradient-to-r from-[#2d1b69]/90 to-[#1a0e3e]/90"></div>
        </div>
        
        <!-- Content -->
        <div class="relative z-10 flex flex-col md:flex-row items-center gap-8 p-8 md:p-12">
            <!-- Game Logo/Icon -->
            <div class="w-32 h-32 md:w-40 md:h-40 rounded-2xl overflow-hidden shadow-2xl border-4 border-white/20 flex-shrink-0">
                <img src="{{ asset($game->icon) }}" 
                     alt="{{ $game->name }}"
                     class="w-full h-full object-cover">
            </div>
            
            <!-- Game Info -->
            <div class="flex-1 text-center md:text-left">
                <h1 class="text-4xl md:text-5xl font-bold text-white mb-3">{{ $game->name }}</h1>
                <p class="text-lg text-white/80 mb-4 max-w-2xl">
                    Temukan koleksi item terbaik untuk {{ $game->name }}. 
                    Tersedia berbagai pilihan dengan harga terbaik dan delivery instan!
                </p>
                <div class="flex flex-wrap gap-3 justify-center md:justify-start">
                    <span class="px-4 py-2 bg-white/15 backdrop-blur-sm rounded-full text-white text-sm flex items-center gap-2 border border-white/10">
                        <i data-feather="box" class="feather-icon w-4 h-4"></i>
                        {{ $products->total() }} Items
                    </span>
                    <span class="px-4 py-2 bg-white/15 backdrop-blur-sm rounded-full text-white text-sm flex items-center gap-2 border border-white/10">
                        <i data-feather="zap" class="feather-icon w-4 h-4"></i>
                        Instant Delivery
                    </span>
                    <span class="px-4 py-2 bg-white/15 backdrop-blur-sm rounded-full text-white text-sm flex items-center gap-2 border border-white/10">
                        <i data-feather="shield" class="feather-icon w-4 h-4"></i>
                        100% Safe
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter & Sorting -->
    <div class="filter-container rounded-xl p-4 mb-6">
        <div class="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
            <div class="flex flex-wrap gap-2 w-full md:w-auto">
                <!-- Filter Status -->
                <div class="flex items-center gap-2">
                    <span class="text-sm filter-label">Status:</span>
                    <select id="filterStatus" class="filter-select rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-purple-500">
                        <option value="all" {{ request('status') == 'all' ? 'selected' : '' }}>All</option>
                        <option value="in_stock" {{ request('status') == 'in_stock' ? 'selected' : '' }}>In Stock</option>
                        <option value="sale" {{ request('status') == 'sale' ? 'selected' : '' }}>On Sale</option>
                    </select>
                </div>

                <!-- Filter Harga -->
                <div class="flex items-center gap-2">
                    <span class="text-sm filter-label">Harga:</span>
                    <select id="filterPrice" class="filter-select rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-purple-500">
                        <option value="all" {{ request('price') == 'all' ? 'selected' : '' }}>All</option>
                        <option value="low" {{ request('price') == 'low' ? 'selected' : '' }}>Low to High</option>
                        <option value="high" {{ request('price') == 'high' ? 'selected' : '' }}>High to Low</option>
                    </select>
                </div>

                <!-- Search -->
                <div class="flex items-center gap-2">
                    <input type="text" 
                           id="searchProduct" 
                           placeholder="Cari item..." 
                           value="{{ request('search') }}"
                           class="filter-input rounded-lg px-3 py-2 text-sm placeholder-gray-500 focus:outline-none focus:border-purple-500 w-48">
                </div>

                <button id="applyFilter" class="btn-filter px-4 py-2 rounded-lg text-sm font-semibold transition flex items-center gap-2">
                    <i data-feather="filter" class="feather-icon w-4 h-4"></i>
                    Apply
                </button>
                <a href="{{ route('game', $game->slug) }}" class="btn-reset border rounded-lg px-4 py-2 text-sm transition flex items-center gap-2">
                    <i data-feather="rotate-ccw" class="feather-icon w-4 h-4"></i>
                    Reset
                </a>
            </div>

            <!-- Results Count -->
            <span class="text-sm result-count">
                Showing <strong class="result-count-strong">{{ $products->firstItem() ?? 0 }}</strong> - <strong class="result-count-strong">{{ $products->lastItem() ?? 0 }}</strong> of <strong class="result-count-strong">{{ $products->total() }}</strong> items
            </span>
        </div>
    </div>

    <!-- Products Grid -->
    @if($products->count() > 0)
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
        @foreach($products as $product)
        <div class="product-card rounded-xl shadow hover:shadow-xl overflow-hidden transition-all hover:-translate-y-1">
            <a href="/product/{{ $product->slug }}" class="block">
                <div class="aspect-square product-image-bg overflow-hidden relative">
                    @if($product->sale_price && $product->sale_price < $product->price)
                        @php
                            $discount = round((($product->price - $product->sale_price) / $product->price) * 100);
                        @endphp
                        <span class="absolute top-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-lg z-10">
                            -{{ $discount }}%
                        </span>
                    @endif
                    @if($product->stock == 0)
                        <span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-lg z-10">
                            Out of Stock
                        </span>
                    @endif
                    <img src="{{ asset($product->image) }}" 
                         class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" 
                         alt="{{ $product->name }}">
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-sm product-name line-clamp-2 mb-1">{{ $product->name }}</h3>
                    <div class="flex items-center gap-2">
                        @if($product->sale_price && $product->sale_price < $product->price)
                            <span class="product-price-sale font-bold text-sm">{{ currency($product->sale_price) }}</span>
                            <span class="product-price-original text-xs line-through">{{ currency($product->price) }}</span>
                        @else
                            <span class="product-price font-bold text-sm">{{ currency($product->price) }}</span>
                        @endif
                    </div>
                </div>
            </a>
            <div class="px-3 pb-3">
                <form method="POST" action="/cart/add/{{ $product->id }}" class="w-full">
                    @csrf
                    <input type="hidden" name="quantity" value="1">
                    <button type="submit" 
                            class="w-full btn-add-to-cart text-white text-xs font-bold py-2 px-3 rounded-lg transition flex items-center justify-center gap-2"
                            {{ $product->stock == 0 ? 'disabled' : '' }}>
                        <i data-feather="shopping-cart" class="feather-icon w-4 h-4"></i>
                        <span>{{ $product->stock > 0 ? 'Add to Cart' : 'Sold Out' }}</span>
                    </button>
                </form>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Pagination -->
    <div class="mt-8 pagination-wrapper">
        {{ $products->appends(request()->query())->links() }}
    </div>
    @else
    <div class="text-center py-16 empty-state">
        <i data-feather="package" class="feather-icon w-16 h-16 mx-auto mb-4"></i>
        <h3 class="text-xl font-semibold empty-title mb-2">No Items Found</h3>
        <p class="empty-text">No products available for {{ $game->name }} at the moment.</p>
        <a href="{{ route('game', $game->slug) }}" class="inline-block mt-4 btn-primary px-6 py-2 rounded-lg transition">
            View All Items
        </a>
    </div>
    @endif
</div>

<!-- Feather Icons -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        feather.replace();

        // Filter functionality
        const applyFilter = document.getElementById('applyFilter');
        const statusSelect = document.getElementById('filterStatus');
        const priceSelect = document.getElementById('filterPrice');
        const searchInput = document.getElementById('searchProduct');

        applyFilter.addEventListener('click', function() {
            applyFilters();
        });

        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                applyFilters();
            }
        });

        function applyFilters() {
            const params = new URLSearchParams();
            
            const status = statusSelect.value;
            if (status !== 'all') {
                params.append('status', status);
            }
            
            const price = priceSelect.value;
            if (price !== 'all') {
                params.append('price', price);
            }
            
            const search = searchInput.value.trim();
            if (search) {
                params.append('search', search);
            }
            
            const url = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
            window.location.href = url;
        }

        // Style pagination
        const pagination = document.querySelector('.pagination');
        if (pagination) {
            pagination.classList.add('flex', 'justify-center', 'gap-1', 'flex-wrap');
            pagination.querySelectorAll('a, span').forEach(el => {
                el.classList.add('px-3', 'py-1', 'rounded-lg', 'text-sm', 'transition', 'pagination-item');
                if (el.tagName === 'A') {
                    el.classList.add('pagination-link');
                }
                if (el.classList.contains('active')) {
                    el.classList.remove('bg-blue-600');
                    el.classList.add('pagination-active');
                }
                if (el.textContent === '...') {
                    el.classList.add('pagination-dots');
                }
            });
        }
    });
</script>

<style>
    /* ===== DARK/LIGHT MODE VARIABLES ===== */
    .game-page {
        --game-bg-filter: #181025;
        --game-border-filter: #2b2140;
        --game-text-filter: #9ca3af;
        --game-input-bg: #120b21;
        --game-input-border: #2b2140;
        --game-input-text: #ffffff;
        --game-card-bg: #181025;
        --game-card-border: #2b2140;
        --game-card-hover-border: #7c3aed;
        --game-name-color: #ffffff;
        --game-price-color: #a78bfa;
        --game-price-original: #6b7280;
        --game-btn-bg: linear-gradient(135deg, #7c3aed, #6d28d9);
        --game-btn-hover: linear-gradient(135deg, #6d28d9, #5b21b6);
        --game-result-count: #9ca3af;
        --game-result-strong: #ffffff;
        --game-empty-title: #ffffff;
        --game-empty-text: #9ca3af;
        --game-select-bg: #120b21;
        --game-select-text: #ffffff;
        --game-select-border: #2b2140;
        --game-pagination-link: #181025;
        --game-pagination-border: #2b2140;
        --game-pagination-text: #d1d5db;
        --game-pagination-active: #7c3aed;
        --game-pagination-hover: #2b2140;
    }

    /* Light Mode Override */
    .game-page.light-mode {
        --game-bg-filter: #f3f4f6;
        --game-border-filter: #e5e7eb;
        --game-text-filter: #6b7280;
        --game-input-bg: #ffffff;
        --game-input-border: #d1d5db;
        --game-input-text: #111827;
        --game-card-bg: #ffffff;
        --game-card-border: #e5e7eb;
        --game-card-hover-border: #7c3aed;
        --game-name-color: #111827;
        --game-price-color: #7c3aed;
        --game-price-original: #9ca3af;
        --game-btn-bg: linear-gradient(135deg, #7c3aed, #6d28d9);
        --game-btn-hover: linear-gradient(135deg, #6d28d9, #5b21b6);
        --game-result-count: #6b7280;
        --game-result-strong: #111827;
        --game-empty-title: #111827;
        --game-empty-text: #6b7280;
        --game-select-bg: #ffffff;
        --game-select-text: #111827;
        --game-select-border: #d1d5db;
        --game-pagination-link: #ffffff;
        --game-pagination-border: #e5e7eb;
        --game-pagination-text: #4b5563;
        --game-pagination-active: #7c3aed;
        --game-pagination-hover: #f3f4f6;
    }

    /* Apply Dark Mode by default (theme 'dark') */
    .game-page {
        /* Gunakan variabel default dark */
    }

    /* Jika light mode, tambahkan class light-mode ke .game-page */
    html:not(.dark) .game-page {
        --game-bg-filter: #f3f4f6;
        --game-border-filter: #e5e7eb;
        --game-text-filter: #6b7280;
        --game-input-bg: #ffffff;
        --game-input-border: #d1d5db;
        --game-input-text: #111827;
        --game-card-bg: #ffffff;
        --game-card-border: #e5e7eb;
        --game-card-hover-border: #7c3aed;
        --game-name-color: #111827;
        --game-price-color: #7c3aed;
        --game-price-original: #9ca3af;
        --game-result-count: #6b7280;
        --game-result-strong: #111827;
        --game-empty-title: #111827;
        --game-empty-text: #6b7280;
        --game-select-bg: #ffffff;
        --game-select-text: #111827;
        --game-select-border: #d1d5db;
        --game-pagination-link: #ffffff;
        --game-pagination-border: #e5e7eb;
        --game-pagination-text: #4b5563;
        --game-pagination-active: #7c3aed;
        --game-pagination-hover: #f3f4f6;
    }

    /* ===== STYLES ===== */
    .filter-container {
        background: var(--game-bg-filter);
        border: 1px solid var(--game-border-filter);
    }

    .filter-label {
        color: var(--game-text-filter);
    }

    .filter-select {
        background: var(--game-select-bg);
        border: 1px solid var(--game-select-border);
        color: var(--game-select-text);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 32px;
    }

    .filter-select option {
        background: var(--game-select-bg);
        color: var(--game-select-text);
    }

    .filter-input {
        background: var(--game-input-bg);
        border: 1px solid var(--game-input-border);
        color: var(--game-input-text);
    }

    .filter-input::placeholder {
        color: var(--game-text-filter);
    }

    .btn-filter {
        background: var(--game-btn-bg);
        color: white;
        border: none;
        cursor: pointer;
    }

    .btn-filter:hover {
        background: var(--game-btn-hover);
    }

    .btn-reset {
        background: transparent;
        border-color: var(--game-border-filter);
        color: var(--game-text-filter);
    }

    .btn-reset:hover {
        border-color: var(--game-price-color);
        color: var(--game-name-color);
    }

    .result-count {
        color: var(--game-result-count);
    }

    .result-count-strong {
        color: var(--game-result-strong);
    }

    .product-card {
        background: var(--game-card-bg);
        border: 1px solid var(--game-card-border);
    }

    .product-card:hover {
        border-color: var(--game-card-hover-border);
    }

    .product-image-bg {
        background: var(--game-input-bg);
    }

    .product-name {
        color: var(--game-name-color);
    }

    .product-price {
        color: var(--game-price-color);
    }

    .product-price-sale {
        color: var(--game-price-color);
    }

    .product-price-original {
        color: var(--game-price-original);
    }

    .btn-add-to-cart {
        background: var(--game-btn-bg);
    }

    .btn-add-to-cart:hover:not(:disabled) {
        background: var(--game-btn-hover);
    }

    .btn-add-to-cart:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .empty-title {
        color: var(--game-empty-title);
    }

    .empty-text {
        color: var(--game-empty-text);
    }

    .btn-primary {
        background: var(--game-btn-bg);
        color: white;
        border: none;
        cursor: pointer;
    }

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

    /* Pagination */
    .pagination-wrapper .pagination-item {
        background: var(--game-pagination-link);
        border-color: var(--game-pagination-border);
        color: var(--game-pagination-text);
    }

    .pagination-wrapper .pagination-link {
        background: var(--game-pagination-link);
        border: 1px solid var(--game-pagination-border);
        color: var(--game-pagination-text);
    }

    .pagination-wrapper .pagination-link:hover {
        background: var(--game-pagination-hover);
        color: var(--game-name-color);
    }

    .pagination-wrapper .pagination-active {
        background: var(--game-pagination-active) !important;
        border-color: var(--game-pagination-active) !important;
        color: white !important;
    }

    .pagination-wrapper .pagination-dots {
        background: transparent !important;
        border: none !important;
        color: var(--game-text-filter) !important;
    }

    /* Line clamp */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .aspect-square {
        aspect-ratio: 1 / 1;
    }

    .hover\:-translate-y-1:hover {
        transform: translateY(-0.25rem);
    }

    .transition-transform {
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }

    .duration-300 {
        transition-duration: 300ms;
    }

    .hover\:scale-105:hover {
        transform: scale(1.05);
    }

    .backdrop-blur-sm {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* Game Hero tetap konsisten di kedua mode */
    .game-hero .bg-gradient-to-r {
        background: linear-gradient(to right, rgba(45, 27, 105, 0.9), rgba(26, 14, 62, 0.9)) !important;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: var(--game-input-bg);
    }
    ::-webkit-scrollbar-thumb {
        background: var(--game-border-filter);
        border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--game-price-color);
    }
</style>

@endsection