@extends('layouts.app', ['title' => 'Beauty Supplies & Salon Care'])

@section('content')
<div class="space-y-10" x-data="{ mobileFilterOpen: false }">

    <!-- Page Header -->
    <header class="text-center md:text-left space-y-3 max-w-3xl">
        <span class="text-xs font-bold text-[#526048] tracking-widest uppercase block font-sans">
            Professional Beauty Store
        </span>
        <h1 class="font-serif text-4xl sm:text-5xl font-semibold text-[#1b1c19]">
            Explore Our Collection
        </h1>
        <!-- <p class="text-sm sm:text-base text-[#444840] leading-relaxed font-normal">
            Discover a world of beauty with our curated selection of professional skincare, hair care, and nail essentials. Expertly crafted for salons and spas that demand quality, performance, and results.
        </p> -->
    </header>

    <!-- Mobile Quick Filter Toggle Button -->
    <div class="lg:hidden flex items-center justify-between gap-4 p-4 bg-white rounded-2xl border border-[#e4e2dd] shadow-xs">
        <button type="button"
                @click="mobileFilterOpen = !mobileFilterOpen"
                class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-[#526048]">
            <span class="material-symbols-outlined text-lg">tune</span>
            <span x-text="mobileFilterOpen ? 'Hide Filters' : 'Filter Categories & Equipment'"></span>
        </button>
        @if (request()->hasAny(['category', 'search', 'sort']))
            <a href="{{ route('products.index') }}" class="text-xs font-bold text-rose-700 hover:underline">
                Reset
            </a>
        @endif
    </div>

    <!-- Main Content Layout: Sidebar Filters + Product Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

        <!-- Sidebar Filters -->
        <aside class="lg:col-span-3 bg-white p-6 rounded-3xl border border-[#e4e2dd] shadow-xs space-y-6 lg:sticky lg:top-28"
               :class="{ 'hidden lg:block': !mobileFilterOpen, 'block': mobileFilterOpen }">
            <div class="flex items-center justify-between pb-4 border-b border-[#f0eee9]">
                <h2 class="font-serif text-xl font-semibold text-[#1b1c19]">Filters</h2>
                <a href="{{ route('products.index') }}" class="text-xs font-bold text-[#526048] hover:underline">
                    Clear All
                </a>
            </div>

            <!-- Search Filter -->
            <form method="GET" action="{{ route('products.index') }}" class="space-y-6">
                <div>
                    <label for="search-input" class="block text-xs font-bold uppercase tracking-wider text-[#444840] mb-2 font-sans">
                        Keyword
                    </label>
                    <div class="relative">
                        <input type="text"
                               id="search-input"
                               name="search"
                               value="{{ request('search') }}"
                               placeholder="Search hair dryer, serum, polish..."
                               class="w-full pl-9 pr-3 py-2 text-xs rounded-xl border border-[#c5c8bd] bg-[#fbf9f4] text-[#1b1c19] focus:outline-none focus:border-[#526048]">
                        <span class="material-symbols-outlined absolute left-2.5 top-2 text-[#75786f] text-base pointer-events-none">search</span>
                    </div>
                </div>

                <!-- Categories -->
                <div class="space-y-2">
                    <label class="block text-xs font-bold uppercase tracking-wider text-[#444840] font-sans">
                        Category
                    </label>
                    <div class="space-y-1.5 text-xs">
                        @php
                            $activeCategory = request('category');
                        @endphp
                        <label class="flex items-center gap-2 cursor-pointer text-[#444840] hover:text-[#526048]">
                            <input type="radio" name="category" value="" {{ empty($activeCategory) ? 'checked' : '' }} onchange="this.form.submit()" class="text-[#526048] focus:ring-[#526048]">
                            <span>All Collections</span>
                        </label>
                        @foreach ($categories as $cat)
                            <label class="flex items-center gap-2 cursor-pointer text-[#444840] hover:text-[#526048]">
                                <input type="radio" name="category" value="{{ $cat }}" {{ $activeCategory === $cat ? 'checked' : '' }} onchange="this.form.submit()" class="text-[#526048] focus:ring-[#526048]">
                                <span>{{ $cat }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>

                <!-- Popular Tags / Quick Categories -->
                <div class="space-y-2 pt-4 border-t border-[#f0eee9]">
                    <label class="block text-xs font-bold uppercase tracking-wider text-[#444840] font-sans">
                        Popular Searches
                    </label>
                    <div class="flex flex-wrap gap-1.5">
                        @foreach (['Skincare', 'Hair Care', 'Manicure', 'Pedicure', 'Salon Tools', 'Serum', 'Equipment'] as $tag)
                            <a href="{{ route('products.index', array_merge(request()->query(), ['search' => $tag])) }}"
                               class="px-2.5 py-1 rounded-full text-[11px] font-medium border {{ request('search') === $tag ? 'bg-[#526048] text-white border-[#526048]' : 'bg-[#fbf9f4] text-[#444840] border-[#e4e2dd] hover:border-[#526048]' }} transition-colors">
                                {{ $tag }}
                            </a>
                        @endforeach
                    </div>
                </div>

                <!-- Sort Order -->
                <div class="space-y-2 pt-4 border-t border-[#f0eee9]">
                    <label for="sort-select" class="block text-xs font-bold uppercase tracking-wider text-[#444840] font-sans">
                        Sort By
                    </label>
                    <select id="sort-select" name="sort" onchange="this.form.submit()"
                            class="w-full px-3 py-2 text-xs rounded-xl border border-[#c5c8bd] bg-[#fbf9f4] text-[#1b1c19] focus:outline-none focus:border-[#526048]">
                        <option value="latest" {{ request('sort') === 'latest' ? 'selected' : '' }}>Terbaru</option>
                        <option value="price_low" {{ request('sort') === 'price_low' ? 'selected' : '' }}>Harga Terendah ke Tertinggi</option>
                        <option value="price_high" {{ request('sort') === 'price_high' ? 'selected' : '' }}>Harga Tertinggi ke Terendah</option>
                        <option value="name_asc" {{ request('sort') === 'name_asc' ? 'selected' : '' }}>Abjad (A-Z)</option>
                    </select>
                </div>
            </form>
        </aside>

        <!-- Product Grid List -->
        <section class="lg:col-span-9 space-y-6">

            <!-- Result Count & Quick Category Pills -->
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-2 border-b border-[#e4e2dd]">
                <p class="text-xs text-[#75786f]">
                    Showing <strong class="text-[#1b1c19]">{{ $products->count() }}</strong> of <strong class="text-[#1b1c19]">{{ $products->total() }}</strong> beauty & salon supplies
                </p>

                <!-- Quick Category Selector on mobile -->
                <div class="flex gap-2 overflow-x-auto pb-1 max-w-full">
                    <a href="{{ route('products.index') }}"
                       class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap {{ empty(request('category')) ? 'bg-[#526048] text-white' : 'bg-white border border-[#e4e2dd] text-[#444840]' }}">
                        All
                    </a>
                    @foreach ($categories as $cat)
                        <a href="{{ route('products.index', ['category' => $cat]) }}"
                           class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap {{ request('category') === $cat ? 'bg-[#526048] text-white' : 'bg-white border border-[#e4e2dd] text-[#444840]' }}">
                            {{ $cat }}
                        </a>
                    @endforeach
                </div>
            </div>

            @if ($products->count() > 0)
                <div class="grid grid-cols-2 sm:grid-cols-2 xl:grid-cols-3 gap-3 sm:gap-6">
                    @foreach ($products as $product)
                        <article class="product-card group bg-white rounded-2xl sm:rounded-3xl overflow-hidden border border-[#e4e2dd] shadow-xs flex flex-col justify-between">
                            <div>
                                <!-- Image Container -->
                                <a href="{{ route('products.show', $product->slug) }}" class="block relative aspect-square sm:aspect-4/5 bg-[#f5f3ee] overflow-hidden cursor-pointer">
                                    @if ($product->image_path)
                                        <img src="{{ asset('storage/' . $product->image_path) }}"
                                             alt="{{ $product->name }}"
                                             class="product-image w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                    @else
                                        <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuBibuhHxUJLdf_pQVBJ8O3mkbFjY9SdZekA22sUQaSOE7tHITOjB60vCaAvasUauX5gxLObxevOBIrJgQOwiUsmwkBpnyZrLYvcA5g7K6JGR7UTTE0fSyVwpJoWv2XybAkRDvyaT9qWW7Uz8mTU-Mnydeqe7IQulo5O6DGnVSTa0d86DWkM1Rv6Q5yZ6mBiq1SNSeybpehPxwJcEg5veFMVjslRcXU_Kj2_FMbhUVVJoTp1EV_Rshn1_A"
                                             alt="{{ $product->name }}"
                                             class="product-image w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                    @endif

                                    <div class="absolute top-2 left-2 sm:top-4 sm:left-4 flex flex-col gap-1 pointer-events-none">
                                        @if ($product->is_featured)
                                            <span class="bg-[#526048] text-white px-2 py-0.5 sm:px-3 sm:py-1 rounded-full text-[9px] sm:text-[10px] font-bold uppercase tracking-wider shadow-xs flex items-center gap-0.5">
                                                <span class="material-symbols-outlined text-[11px] sm:text-[12px]">star</span>
                                                <span>Signature</span>
                                            </span>
                                        @endif
                                        <span class="bg-[#fbf9f4]/90 backdrop-blur-xs px-2 py-0.5 sm:px-3 sm:py-1 rounded-full text-[9px] sm:text-[10px] font-bold uppercase tracking-wider text-[#526048] truncate max-w-[120px] sm:max-w-none">
                                            {{ $product->category ?? 'Beauty Supplies' }}
                                        </span>
                                    </div>
                                </a>

                                <!-- Body -->
                                <div class="p-3 sm:p-6 space-y-1.5 sm:space-y-2">
                                    <span class="text-[10px] sm:text-[11px] text-[#75786f] uppercase tracking-wider font-semibold block truncate">
                                        {{ $product->weight_grams }}g • Lombok Beauty
                                    </span>
                                    <h3 class="font-serif text-xs sm:text-xl font-semibold text-[#1b1c19] group-hover:text-[#526048] transition-colors leading-snug line-clamp-2">
                                        <a href="{{ route('products.show', $product->slug) }}">
                                            {{ $product->name }}
                                        </a>
                                    </h3>
                                    <p class="hidden sm:block text-xs text-[#444840] line-clamp-2 leading-relaxed">
                                        {{ $product->short_description ?: $product->description }}
                                    </p>
                                </div>
                            </div>

                            <!-- Footer Card Action -->
                            <div class="p-3 sm:p-6 pt-0">
                                <div class="pt-2 sm:pt-4 border-t border-[#f0eee9] flex items-center justify-between gap-1">
                                    <div>
                                        <span class="text-[9px] sm:text-[10px] text-[#75786f] uppercase block">Price</span>
                                        <span class="font-serif text-xs sm:text-lg font-bold text-[#1b1c19]">
                                            Rp {{ number_format($product->price, 0, ',', '.') }}
                                        </span>
                                    </div>

                                    @if ($product->stock > 0)
                                        <form method="POST" action="{{ route('cart.store') }}">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                                            <input type="hidden" name="quantity" value="1">
                                            <button type="submit" class="inline-flex items-center justify-center p-2 sm:px-4 sm:py-2 rounded-full bg-[#526048] text-white text-xs font-semibold tracking-wide hover:bg-[#6a795f] transition-colors shadow-xs" title="Tambah ke keranjang">
                                                <span class="material-symbols-outlined text-base">add_shopping_cart</span>
                                                <span class="hidden sm:inline sm:ml-1.5">Add</span>
                                            </button>
                                        </form>
                                    @else
                                        <span class="px-2 py-0.5 sm:px-3 sm:py-1 rounded-full bg-stone-100 text-stone-500 text-[10px] sm:text-xs font-medium">
                                            Habis
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                <div class="pt-8">
                    {{ $products->links() }}
                </div>
            @else
                <div class="bg-white rounded-3xl border border-[#e4e2dd] p-16 text-center space-y-4">
                    <span class="material-symbols-outlined text-[#526048] text-5xl">search_off</span>
                    <h3 class="font-serif text-2xl font-semibold text-[#1b1c19]">No Products Found</h3>
                    <p class="text-xs text-[#444840] max-w-md mx-auto">
                        We couldn't find any beauty supplies matching your search criteria. Try clearing the filter or searching for another keyword.
                    </p>
                    <div>
                        <a href="{{ route('products.index') }}" class="inline-flex items-center px-6 py-3 rounded-full bg-[#526048] text-white text-xs font-bold uppercase tracking-wider hover:bg-[#6a795f] transition-colors">
                            View All Products
                        </a>
                    </div>
                </div>
            @endif
        </section>
    </div>
</div>
@endsection