@extends('layouts.app')

@php
    use Illuminate\Support\Str;
    $metaTitle = $category->meta_title ?: $category->name;
    $metaDesc  = $category->meta_description
        ?: Str::limit(strip_tags($category->description ?? ''), 160);
    $metaKeys  = $category->meta_keywords ?? null; // dacă ai coloană
@endphp

@section('title', $metaTitle)
@section('meta_description', $metaDesc)
@if($metaKeys) @section('meta_keywords', $metaKeys) @endif
@section('canonical', route('category.show', $category->slug))

@push('styles')
    <style>
        /* ===== Look & feel premium ===== */
        .section-hero {
            background:
                radial-gradient(900px 500px at 7% -10%, rgba(13,110,253,.10), transparent 60%),
                radial-gradient(700px 400px at 95% 0%, rgba(32,201,151,.10), transparent 60%);
            border-radius: 1rem;
        }

        .fade-up { animation: fadeUp .35s ease both; }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

        .card-product {
            border: 1px solid var(--bs-border-color);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
            border-radius: .85rem;
            overflow: hidden;
            background: #fff;
        }
        .card-product:hover {
            transform: translateY(-3px);
            box-shadow: 0 1rem 2rem rgba(0,0,0,.08);
            border-color: rgba(13,110,253,.35);
        }
        .card-product .thumb {
            aspect-ratio: 1 / 1;
            object-fit: cover;
            width: 100%;
            display: block;
            transition: transform .25s ease;
        }
        .card-product:hover .thumb { transform: scale(1.03); }
        .card-product .brand { font-size: .8rem; opacity: .7; }
        .card-product .price { font-weight: 700; }

        .badge-soft {
            background: rgba(13,110,253,.1);
            color: #0d6efd;
            border-radius: 999px;
        }

        /* ===== Sidebar ===== */
        .sidebar-card {
            border: 1px solid var(--bs-border-color);
            border-radius: .85rem;
        }
        .sidebar-card .card-header {
            background: transparent;
            border-bottom: 1px dashed var(--bs-border-color);
        }
        .filter-chip {
            font-size: .85rem; border: 1px dashed var(--bs-border-color);
            padding: .25rem .5rem; border-radius: 999px; margin-right: .25rem;
        }

        /* ===== Treemap (mosaic) ===== */
        .treemap {
            display: flex; flex-wrap: wrap; gap: .5rem;
        }
        .treemap a {
            display: flex; flex-direction: column; justify-content: center;
            border-radius: .75rem; padding: .75rem .85rem; text-decoration: none;
            color: inherit; background: var(--bs-light);
            border: 1px solid var(--bs-border-color);
            min-width: calc(50% - .25rem);
            transition: .18s ease;
        }
        .treemap a:hover { background: rgba(13,110,253,.06); border-color:#0d6efd; }
        .treemap .count { font-size: .8rem; opacity: .7; }

        /* Dimensiunea fiecărui tile ~ proporțională cu numărul de produse */
        .treemap a[data-weight="0"] { flex: 1 1 48%; }
        .treemap a[data-weight="1"] { flex: 1 1 48%; }
        .treemap a[data-weight="2"] { flex: 2 1 48%; }
        .treemap a[data-weight="3"] { flex: 3 1 48%; }
        .treemap a[data-weight="4"] { flex: 4 1 48%; }
        .treemap a[data-weight="5"] { flex: 5 1 48%; }

        /* ===== Dual range (min/max) ===== */
        .range-wrap { position: relative; height: 2.25rem; }
        .range-wrap input[type="range"] {
            position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
            width: 100%; pointer-events: none; -webkit-appearance:none; background: none;
        }
        .range-wrap input[type="range"]::-webkit-slider-thumb {
            pointer-events: all; width: 1rem; height: 1rem; border-radius: 50%;
            background: #0d6efd; -webkit-appearance:none;
        }
        .range-track {
            position: absolute; left:0; right:0; top:50%; transform:translateY(-50%);
            height: 4px; background: var(--bs-border-color); border-radius: 999px;
        }
        .range-progress {
            position: absolute; height: 4px; background: #0d6efd; border-radius: 999px;
            top:50%; transform:translateY(-50%);
        }

        /* ===== Toolbar ===== */
        .toolbar .form-select, .toolbar .form-check { font-size: .95rem; }

        /* ===== Pagination nicer spacing ===== */
        .pagination { margin-bottom: 0; }
    </style>
@endpush

@section('content')
    <div class="container py-4">
        {{-- HERO --}}
        <div class="section-hero p-4 mb-4 fade-up">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                <div>
                    <h1 class="mb-1 mt-2">{{ $category->name }}</h1>

                    {{-- Breadcrumb frumos --}}
                    @if(!empty($breadcrumb))
                        <div class="small mt-1">
                            <span class="text-secondary">Casa</span>
                            @foreach($breadcrumb as $i => $node)
                                <span class="text-secondary mx-1">›</span>
                                @if($i < count($breadcrumb) - 1)
                                    <a href="{{ route('category.show', $node->slug) }}" class="link-secondary link-underline-opacity-0 link-underline-opacity-75-hover">
                                        {{ $node->name }}
                                    </a>
                                @else
                                    <span class="fw-semibold">{{ $node->name }}</span>
                                @endif
                            @endforeach
                        </div>
                    @endif

                    @if($category->meta_description)
                        <div class="text-secondary mt-2">{{ $category->meta_description }}</div>
                    @endif
                </div>

            </div>
        </div>

        <div class="row g-4">
            {{-- SIDEBAR --}}
            <aside class="col-lg-3">
                <div class="sidebar-card card mb-3 fade-up" style="animation-delay:.05s">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <strong>Sottocategorie</strong>
                        @if(($subcatTotalDistinct ?? 0) > 0)
                            <span class="text-secondary small">{{ $subcatTotalDistinct }} prodotti</span>
                        @endif
                    </div>
                    <div class="card-body">
                        @if($subcats->count())
                            <div class="treemap">
                                @php
                                    $max = max(1, $subcats->max('computed_products_count'));
                                @endphp
                                @php $max = max(1, (int)$subcats->max('computed_products_count')); @endphp
                                @foreach($subcats as $sc)
                                    @php
                                        $cnt = (int)($sc->computed_products_count ?? 0);
                                        $w = (int) round(($cnt / $max) * 5);
                                    @endphp
                                    <a href="{{ route('category.show', $sc->slug) }}" data-weight="{{ $w }}">
                                        <div class="fw-semibold">{{ $sc->name }}</div>
                                    </a>
                                @endforeach
                            </div>
                        @else
                            <div class="text-secondary small">Non ha sottocategorie.</div>
                        @endif
                    </div>
                </div>


            </aside>

            {{-- GRID PRODUSE --}}
            <div class="col-lg-9">
                @if($products->count())
                    {{-- Rezumat filtre active --}}
                    <div class="mb-2">

                        @forelse(($brandOptions ?? collect())->whereIn('id', $selectedBrandIds ?? []) as $b)
                            <span class="filter-chip">{{ $b->name }}</span>
                        @empty @endforelse
                        @if(request('min')!==null || request('max')!==null)
                            <span class="filter-chip">
                            Preț: {{ (int)($priceMin ?? $minBound) }}–{{ (int)($priceMax ?? $maxBound) }}
                        </span>
                        @endif
                    </div>

                    <div class="row g-3">
                        @foreach($products as $p)
                            <div class="col-6 col-md-4 col-xl-3 fade-up">
                                <a href="{{ route('product.show',$p->slug) }}" class="card-product d-block h-100">
                                    <img class="thumb" src="{{ $p->mainImage
                                    ? Storage::disk($p->mainImage->disk ?? 'public')->url($p->mainImage->path)
                                    : asset('assets/img/product/default.webp') }}"
                                         alt="{{ $p->name }}">
                                    <div class="p-3">
                                        @if($p->brand)
                                            <div class="brand">{{ $p->brand->name }}</div>
                                        @endif
                                        <div class="mt-1 text-truncate" title="{{ $p->name }}">{{ $p->name }}</div>
                                        <div class="price mt-2">{{ number_format($p->price, 2) }}€</div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>

                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <small class="text-secondary">
                            Mostrato {{ $products->firstItem() }}–{{ $products->lastItem() }} da {{ $products->total() }}
                        </small>
                        {{ $products->links('pagination::bootstrap-5') }}
                    </div>
                @else
                    <div class="alert alert-info">Non ci sono prodotti in questa categoria.</div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        /* ===== Dual-range price sync ===== */
        (function(){
            const f = document.getElementById('filtersForm');
            if(!f) return;

            const rMin = document.getElementById('rangeMin');
            const rMax = document.getElementById('rangeMax');
            const iMin = document.getElementById('inputMin');
            const iMax = document.getElementById('inputMax');
            const hMin = document.getElementById('hiddenMin');
            const hMax = document.getElementById('hiddenMax');
            const progress = document.getElementById('priceProgress');

            const minBound = +rMin.min, maxBound = +rMin.max;

            function clamp(){
                let a = Math.min(+rMin.value, +rMax.value);
                let b = Math.max(+rMin.value, +rMax.value);
                rMin.value = a; rMax.value = b;
                iMin.value = a; iMax.value = b;
                hMin.value = a; hMax.value = b;
                updateBar();
            }

            function updateBar(){
                const left = ((+rMin.value - minBound) / (maxBound - minBound)) * 100;
                const right = ((+rMax.value - minBound) / (maxBound - minBound)) * 100;
                progress.style.left = left + '%';
                progress.style.right = (100 - right) + '%';
            }

            rMin.addEventListener('input', clamp);
            rMax.addEventListener('input', clamp);
            iMin.addEventListener('change', () => { rMin.value = Math.max(minBound, Math.min(+iMin.value, +rMax.value)); clamp(); });
            iMax.addEventListener('change', () => { rMax.value = Math.min(maxBound, Math.max(+iMax.value, +rMin.value)); clamp(); });

            updateBar();
        })();
    </script>
@endpush