@extends('layouts.app')

@section('title', $currentCategory ? $currentCategory->name . ' — Produtos Mangolê' : 'Produtos Mangolê')
@section('description', 'Descubra os produtos disponíveis nas lojas Mangolê. Alimentação, bebidas, higiene e muito mais com qualidade e preço justo.')

@section('content')
<x-container class="py-8 lg:py-12">
    <div class="mb-8">
        <h1 class="text-3xl lg:text-4xl font-bold text-gray-900">
            {{ $currentCategory ? $currentCategory->name : 'Produtos' }}
        </h1>
        <p class="mt-2 text-gray-600 text-lg">
            @if ($currentCategory)
                Conheça os produtos disponíveis na categoria {{ mb_strtolower($currentCategory->name) }}.
            @else
                Descubra a variedade de produtos disponíveis nas lojas Mangolê.
            @endif
        </p>
    </div>

    {{-- Barra secundária: dropdown categorias + pesquisa --}}
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between bg-white rounded-xl border border-gray-200 p-3 sm:p-4">
        <div x-data="{ open: false }" class="relative shrink-0">
            <button type="button" @click="open = !open" @click.away="open = false"
                    class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-brand focus:outline-none focus:ring-2 focus:ring-brand/50 transition">
                <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z"/>
                </svg>
                <span>{{ $currentCategory ? $currentCategory->name : 'Catálogo de Produtos' }}</span>
                <svg class="h-4 w-4 text-gray-400 transition-transform duration-200" :class="open ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
                </svg>
            </button>
            <div x-show="open" x-cloak
                 class="absolute left-0 top-full mt-1 z-50 w-64 origin-top-right rounded-xl border border-gray-200 bg-white p-1.5 shadow-lg ring-1 ring-black/5">
                <a href="{{ route('produtos') }}"
                   class="block rounded-lg px-3 py-2 text-sm transition {{ !request('category_id') ? 'bg-brand-50 text-brand font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                    Todas as categorias
                </a>
                @foreach ($categories as $cat)
                    <a href="{{ route('produtos', ['category_id' => $cat->id] + request()->except('category_id', 'page')) }}"
                       class="block rounded-lg px-3 py-2 text-sm transition {{ request('category_id') == $cat->id ? 'bg-brand-50 text-brand font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                        {{ $cat->name }}
                    </a>
                @endforeach
            </div>
        </div>

        <form method="GET" action="{{ route('produtos') }}" class="flex-1 max-w-md">
            @if (request('category_id'))
                <input type="hidden" name="category_id" value="{{ request('category_id') }}">
            @endif
            @if (request('brand_id'))
                <input type="hidden" name="brand_id" value="{{ request('brand_id') }}">
            @endif
            <div class="relative">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
                </svg>
                <input type="text" name="search" value="{{ request('search') }}"
                       placeholder="O que procura?"
                       class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 text-sm focus:ring-2 focus:ring-brand focus:border-brand outline-none transition">
            </div>
        </form>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <div class="lg:col-span-1 space-y-6">
            <form method="GET" action="{{ route('produtos') }}" id="filters-form">
                <div class="bg-white rounded-xl border border-gray-200 p-5 space-y-5">
                    <div>
                        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Categorias</h3>
                        <div class="space-y-1">
                            <a href="{{ route('produtos') }}"
                               class="block px-3 py-2 text-sm rounded-lg transition {{ !request('category_id') ? 'bg-brand-50 text-brand font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                                Todas as categorias
                            </a>
                            @foreach ($categories as $cat)
                                <a href="{{ route('produtos', ['category_id' => $cat->id] + request()->except('category_id', 'page')) }}"
                                   class="block px-3 py-2 text-sm rounded-lg transition {{ request('category_id') == $cat->id ? 'bg-brand-50 text-brand font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                                    {{ $cat->name }}
                                </a>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Marcas</h3>
                        <div class="space-y-1">
                            <a href="{{ route('produtos', request()->except('brand_id', 'page')) }}"
                               class="block px-3 py-2 text-sm rounded-lg transition {{ !request('brand_id') ? 'bg-brand-50 text-brand font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                                Todas as marcas
                            </a>
                            @foreach ($brands as $b)
                                <a href="{{ route('produtos', ['brand_id' => $b->id] + request()->except('brand_id', 'page')) }}"
                                   class="block px-3 py-2 text-sm rounded-lg transition {{ request('brand_id') == $b->id ? 'bg-brand-50 text-brand font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                                    {{ $b->name }}
                                </a>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Ordenar</h3>
                        <select name="sort" onchange="this.form.submit()"
                                class="w-full px-3 py-2.5 rounded-lg border border-gray-300 text-sm focus:ring-2 focus:ring-brand focus:border-brand outline-none transition bg-white">
                            <option value="sort_order" {{ request('sort', 'sort_order') === 'sort_order' ? 'selected' : '' }}>Destaque</option>
                            <option value="name" {{ request('sort') === 'name' ? 'selected' : '' }}>Nome A-Z</option>
                            <option value="-name" {{ request('sort') === '-name' ? 'selected' : '' }}>Nome Z-A</option>
                            <option value="price" {{ request('sort') === 'price' ? 'selected' : '' }}>Preço (menor)</option>
                            <option value="-price" {{ request('sort') === '-price' ? 'selected' : '' }}>Preço (maior)</option>
                        </select>
                    </div>

                    @if (request()->anyFilled(['search', 'category_id', 'brand_id', 'sort']) && request('sort') !== 'sort_order')
                        <a href="{{ route('produtos') }}"
                           class="inline-flex items-center justify-center gap-1 w-full px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition">
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                            Limpar filtros
                        </a>
                    @endif
                </div>
            </form>

            @if ($campaigns->isNotEmpty())
            <div class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-xl border border-amber-200 p-5">
                <h3 class="text-sm font-semibold text-amber-800 uppercase tracking-wider mb-3">Campanhas activas</h3>
                <div class="space-y-3">
                    @foreach ($campaigns as $c)
                        <div class="text-sm">
                            <p class="font-medium text-amber-900">{{ $c->name }}</p>
                            <p class="text-amber-700 text-xs mt-0.5">{{ Str::limit($c->objective, 80) }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        <div class="lg:col-span-3">
            @if ($products->isEmpty())
                <div class="text-center py-16 bg-white rounded-xl border border-gray-200">
                    <svg class="w-16 h-16 mx-auto text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />
                    </svg>
                    <h3 class="mt-4 text-lg font-semibold text-gray-900">Nenhum produto encontrado</h3>
                    <p class="mt-1 text-sm text-gray-500">Tente alterar os filtros ou explorar outras categorias.</p>
                    <a href="{{ route('produtos') }}" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-brand hover:text-brand-700">
                        Ver todos os produtos
                    </a>
                </div>
            @else
                <p class="text-sm text-gray-500 mb-4">
                    <span class="font-semibold text-gray-900">{{ $products->total() }}</span> produto{{ $products->total() !== 1 ? 's' : '' }} encontrado{{ $products->total() !== 1 ? 's' : '' }}
                </p>
                <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5">
                    @foreach ($products as $product)
                        <x-product-card :product="$product" />
                    @endforeach
                </div>

                @if ($products->hasPages())
                <div class="mt-8">
                    {{ $products->appends(request()->except('page'))->links() }}
                </div>
                @endif
            @endif
        </div>
    </div>
</x-container>
@endsection
