<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-amber-700">INTERIA</h1>
                <p class="text-stone-600 mt-2 font-medium">Jelajahi Koleksi Furniture Kami</p>
            </div>
        </div>
    </x-slot>

    <style>
        body {
            background: #ffffff;
        }

        .glass-card {
            background: white;
            backdrop-filter: blur(12px);
            border: 1px solid #e7e2d9;
            box-shadow: 0 10px 40px -15px rgba(120, 80, 50, 0.1);
        }

        .gradient-primary {
            background: linear-gradient(135deg, #fef9c3 0%, #fed7aa 50%, #fde68a 100%);
            color: #78350f !important;
            font-weight: bold;
        }

        .gradient-primary:hover {
            background: linear-gradient(135deg, #fde68a 0%, #fdba74 50%, #fef9c3 100%);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(253, 186, 116, 0.3);
        }

        .input-group {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #a8a29e;
        }

        .input-field {
            padding-left: 3rem;
            background: white;
            border: 1px solid #e7e2d9;
            color: #44403c;
            transition: all 0.3s ease;
            width: 100%;
        }

        .input-field:focus {
            border-color: #fed7aa;
            box-shadow: 0 0 0 3px rgba(253, 186, 116, 0.2);
            outline: none;
        }

        select.input-field {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2392857d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
            -webkit-appearance: none;
            appearance: none;
        }

        .product-card {
            transition: all 0.3s ease;
            background: white;
            border: 1px solid #e7e2d9;
            border-radius: 1rem;
            overflow: hidden;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px -15px rgba(253, 186, 116, 0.15);
            border-color: #fed7aa;
        }

        .stock-badge {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid #e7e2d9;
            color: #44403c;
            font-weight: 600;
            padding: 0.5rem 1rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
        }

        .price-gradient {
            background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
        }

        label {
            color: #57534e;
            font-weight: 600;
            font-size: 0.875rem;
        }
    </style>

    {{-- Removed redundant nested container to align with app layout --}}
    <div class="space-y-12">

            {{-- Search & Filter --}}
            <div class="glass-card rounded-3xl p-8 mb-12">
                <form method="GET" action="{{ route('product.index') }}">
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-6">

                        <div class="md:col-span-4">
                            <label class="block text-sm font-semibold text-stone-600 mb-3">
                                Cari Produk
                            </label>
                            <div class="input-group">
                                <div class="input-icon">
                                    <i class="fas fa-search text-stone-400"></i>
                                </div>
                                <input type="text"
                                    name="search"
                                    value="{{ request('search') }}"
                                    placeholder="Ketik nama produk..."
                                    class="w-full input-field py-3 rounded-xl">
                            </div>
                        </div>

                        <div class="md:col-span-3">
                            <label class="block text-sm font-semibold text-stone-600 mb-3">
                                Kategori
                            </label>
                            <select name="category"
                                class="w-full input-field py-3 rounded-xl">
                                <option value="">Semua Kategori</option>
                                @foreach($categories as $category)
                                <option value="{{ $category->category_id }}" {{ request('category') == $category->category_id ? 'selected' : '' }}>
                                    {{ $category->category_name }}
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="md:col-span-3">
                            <label class="block text-sm font-semibold text-stone-600 mb-3">
                                Urutkan
                            </label>
                            <select name="sort"
                                class="w-full input-field py-3 rounded-xl">
                                <option value="">Terbaru</option>
                                <option value="price_low">Harga Rendah</option>
                                <option value="price_high">Harga Tinggi</option>
                                <option value="name">Nama A-Z</option>
                            </select>
                        </div>

                        <div class="md:col-span-2 flex items-end">
                            <button type="submit"
                                class="w-full gradient-primary text-white font-semibold py-3 rounded-xl shadow-lg transition">
                                Filter
                            </button>
                        </div>

                    </div>
                </form>
            </div>

            {{-- Products --}}
            @if($products->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                @foreach ($products as $product)
                @php
                $images = is_array($product->image) ? $product->image : json_decode($product->image);
                @endphp

                <div class="product-card flex flex-col">

                    <a href="{{ route('product.show', $product->product_id) }}"
                        class="block relative bg-stone-100">
                        @if ($images && count($images) > 0)
                        <img src="{{ asset('storage/'.$images[0]) }}"
                            class="w-full h-64 object-cover hover:scale-110 transition duration-700">
                        @else
                        <div class="w-full h-64 flex items-center justify-center bg-stone-100">
                            <i class="fas fa-image text-4xl text-stone-400"></i>
                        </div>
                        @endif

                        <div class="absolute top-4 right-4">
                            @if($product->stock > 0)
                            <span class="stock-badge text-emerald-600 text-xs font-bold px-4 py-2 rounded-full">
                                Stok: {{ $product->stock }}
                            </span>
                            @else
                            <span class="stock-badge text-rose-600 text-xs font-bold px-4 py-2 rounded-full">
                                Habis
                            </span>
                            @endif
                        </div>
                    </a>

                    <div class="p-6 flex flex-col flex-1 bg-white">

                        <span class="text-amber-600 text-sm font-semibold mb-2">
                            {{ $product->category->category_name ?? 'Uncategorized' }}
                        </span>

                        <a href="{{ route('product.show', $product->product_id) }}"
                            class="font-bold text-xl text-stone-800 mb-3 hover:text-amber-600 transition">
                            {{ $product->product_name }}
                        </a>

                        <p class="text-sm text-stone-600 mb-6">
                            {{ Str::limit($product->description, 80) }}
                        </p>

                        <div class="mt-auto">
                            <p class="text-2xl font-extrabold price-gradient mb-6">
                                Rp {{ number_format($product->price, 0, ',', '.') }}
                            </p>

                            @auth
                                @if(!auth()->user()->isAdmin())
                            <div class="grid grid-cols-2 gap-3">

                                {{-- Tambah ke Keranjang --}}
                                <form action="{{ route('cart.store') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $product->product_id }}">
                                    <button type="submit"
                                        class="w-full border border-amber-700 text-amber-700 font-semibold py-3 rounded-xl hover:bg-amber-50 transition">
                                        Keranjang
                                    </button>
                                </form>

                                {{-- Beli Sekarang --}}
                                <form action="{{ route('order.buyNow') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $product->product_id }}">
                                    <button type="submit"
                                        class="w-full gradient-primary text-white font-semibold py-3 rounded-xl">
                                        Beli
                                    </button>
                                </form>
                            </div>
                                @endif
                            @endauth
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <div class="bg-white rounded-3xl p-16 text-center border border-stone-200">
                <h3 class="text-3xl font-bold text-stone-800 mb-4">
                    Produk Tidak Ditemukan
                </h3>
                <p class="text-stone-600">
                    Coba ubah filter atau kata kunci pencarian.
                </p>
            </div>
            @endif

    </div>
</x-app-layout>