@extends('layouts.storefront')

@section('title', $metaTitle)
@section('meta_description', $metaDescription)

@section('content')

<div class="sf-container" x-data="{ mobileFiltersOpen: false }">
    {{-- Ekmek Kırıntısı (Breadcrumb) --}}
    <x-storefront.breadcrumb :items="[$category->name => '']" />

    {{-- Kategori Başlığı ve Açıklaması --}}
    <header class="sf-category-header">
        <h1 class="sf-category-title">{{ $category->name }}</h1>
        @if($category->description)
            <p class="sf-category-desc">{{ $category->description }}</p>
        @endif
    </header>

    {{-- Alt Kategoriler --}}
    @if($subcategories->count() > 0)
        <section aria-labelledby="subcategories-grid" class="mb-6">
            <div class="sf-category-grid" id="subcategories-grid">
                @foreach($subcategories as $sub)
                    <x-storefront.category-card :category="$sub" />
                @endforeach
            </div>
        </section>
    @endif

    {{-- Kategori Üst Bannerı --}}
    @include('storefront.components.campaign-banner-section', ['position' => 'category_top_banner', 'limit' => 1])

    <div class="sf-catalog-layout">

        {{-- Filtre Sidebar --}}
        <aside class="sf-filter-sidebar" :class="{ 'active': mobileFiltersOpen }">
            <div class="sf-filter-sidebar-header">
                <h2 class="sf-filter-sidebar-heading">Filtrele & Sırala</h2>
                <button type="button" class="sf-filter-sidebar-close" @click="mobileFiltersOpen = false" aria-label="Kapat">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <x-storefront.filter-sidebar :availableFilters="$availableFilters" :context="['category_slug' => $category->slug]" />
        </aside>
        <div class="sf-filter-sidebar-overlay" x-show="mobileFiltersOpen" @click="mobileFiltersOpen = false" style="display: none;"></div>

        {{-- Katalog İçerik Alanı --}}
        <div class="sf-catalog-content">
            {{-- Sonuç Toolbar --}}
            <div class="sf-results-toolbar">
                <div class="sf-results-count">
                    Toplam <strong>{{ $products->total() }}</strong> ürün listeleniyor.
                </div>
                
                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-secondary sf-filter-mobile-toggle" @click="mobileFiltersOpen = true">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="16" height="16">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                        </svg>
                        Filtrele
                    </button>
                    
                    <form action="{{ request()->url() }}" method="GET" class="sf-sort-form">
                        {{-- Parametreleri kaybetmemek için --}}
                        @foreach(request()->except('sort', 'page') as $key => $value)
                            @if(is_array($value))
                                @foreach($value as $k => $v)
                                    @if(is_array($v))
                                        @foreach($v as $subV)
                                            <input type="hidden" name="{{ $key }}[{{ $k }}][]" value="{{ $subV }}">
                                        @endforeach
                                    @else
                                        <input type="hidden" name="{{ $key }}[]" value="{{ $v }}">
                                    @endif
                                @endforeach
                            @else
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endif
                        @endforeach

                        <label for="sort" class="form-label text-sm fw-medium m-0">Sırala:</label>
                        <select name="sort" id="sort" class="form-control sf-sort-select" onchange="this.form.submit()">
                            <option value="newest" {{ $sort === 'newest' ? 'selected' : '' }}>Yeni Eklenenler</option>
                            <option value="price_asc" {{ $sort === 'price_asc' ? 'selected' : '' }}>Fiyat (Artan)</option>
                            <option value="price_desc" {{ $sort === 'price_desc' ? 'selected' : '' }}>Fiyat (Azalan)</option>
                            <option value="name_asc" {{ $sort === 'name_asc' ? 'selected' : '' }}>Ada Göre (A-Z)</option>
                            <option value="name_desc" {{ $sort === 'name_desc' ? 'selected' : '' }}>Ada Göre (Z-A)</option>
                            <option value="rating_desc" {{ $sort === 'rating_desc' ? 'selected' : '' }}>En Yüksek Puan</option>
                            <option value="popular" {{ $sort === 'popular' ? 'selected' : '' }}>Çok Satanlar</option>
                        </select>
                    </form>
                </div>
            </div>

            {{-- Ürün Listesi --}}
            @if($products->count() > 0)
                <div class="sf-product-grid" id="category-products-grid">
                    @foreach($products as $product)
                        <x-storefront.product-card :product="$product" />
                    @endforeach
                </div>

                {{-- Sayfalama --}}
                <div class="mt-8">
                    {{ $products->appends(request()->except('page'))->links('components.storefront.pagination') }}
                </div>
            @else
                <div class="sf-empty-state">
                    <svg class="sf-empty-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.25">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                    </svg>
                    <h3 class="sf-empty-title">Ürün Bulunamadı</h3>
                    <p class="sf-empty-desc">Bu kategoride veya uygulanan filtrelerde satışa sunulmuş ürün bulunmamaktadır.</p>
                </div>
            @endif
        </div>
    </div>
</div>

@endsection