@extends('layouts.app')

@section('title', $category->name . ' — Placeo')

@php
    $params = array_merge(request()->query(), ['category' => $category->slug]);
    $pointsUrl = route('feed.points', $params);
    $mapCenter = [$currentCity?->lat ?? 55.751244, $currentCity?->lng ?? 37.618423];
@endphp

@section('content')
<div class="mx-auto max-w-6xl">

    {{-- Хлебные крошки --}}
    <nav class="mb-3 flex flex-wrap items-center gap-1 text-sm text-muted">
        <a href="{{ route('home') }}" class="hover:text-brand-600">Главная</a>
        @foreach ($breadcrumbs as $crumb)
            <span>›</span><a href="{{ category_url($crumb) }}" class="hover:text-brand-600">{{ $crumb->name }}</a>
        @endforeach
        <span>›</span><span class="text-gray-800">{{ $category->name }}</span>
    </nav>

    <h1 class="mb-4 text-2xl font-bold text-gray-900">{{ $cityScope ? "{$category->name} в городе {$cityScope->name}" : $category->name }}</h1>

    @if($cityScope)
        <p class="-mt-2 mb-4 text-sm text-muted">Объявления раздела «{{ $category->name }}» в городе {{ $cityScope->name }} — местные предложения показываются первыми.</p>
    @endif

    <form method="GET" action="{{ category_url($category) }}" x-data="{ view: '{{ $view }}', sidebar: false }">
        <input type="hidden" name="view" :value="view">
        @if($currentCity)<input type="hidden" name="city" value="{{ $currentCity->id }}">@endif

        {{-- Кнопка показа разделов/фильтров на мобильном --}}
        <button type="button" @click="sidebar = !sidebar"
                class="btn-ghost mb-3 flex w-full items-center justify-center gap-2 lg:hidden">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M6 12h12m-9 5.25h6" />
            </svg>
            <span x-text="sidebar ? 'Скрыть разделы и фильтры' : 'Разделы и фильтры'"></span>
        </button>

        <div class="grid gap-6 lg:grid-cols-[260px_1fr]">

            {{-- Левая колонка: меню веток + фильтры (на мобильном — по кнопке) --}}
            <aside class="space-y-5" :class="sidebar ? 'block' : 'hidden lg:block'">
                {{-- Категории ветки --}}
                <div class="card p-4">
                    @if ($parent)
                        <a href="{{ category_url($parent) }}" class="mb-2 flex items-center gap-1 text-sm font-medium text-brand-600 hover:underline">
                            ‹ {{ $parent->name }}
                        </a>
                    @endif
                    <ul class="space-y-1 text-sm">
                        @foreach ($siblings as $sib)
                            <li>
                                <a href="{{ category_url($sib) }}"
                                   class="block rounded px-2 py-1 {{ $sib->id === $category->id ? 'bg-brand-100 font-semibold text-brand-800' : 'text-gray-700 hover:bg-gray-50' }}">
                                    {{ $sib->name }}
                                </a>
                                @if ($sib->id === $category->id && $children->isNotEmpty())
                                    <ul class="ml-3 mt-1 space-y-0.5 border-l border-gray-100 pl-2">
                                        @foreach ($children as $child)
                                            <li><a href="{{ category_url($child) }}" class="block rounded px-2 py-1 text-gray-600 hover:bg-gray-50">{{ $child->name }}</a></li>
                                        @endforeach
                                    </ul>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>

                {{-- Фильтры --}}
                <div class="card space-y-4 p-4">
                    <h3 class="text-sm font-semibold text-gray-800">Фильтры</h3>

                    <div>
                        <label class="mb-1 block text-xs text-muted">Цена, ₽</label>
                        <div class="flex items-center gap-2">
                            <input type="number" name="price_min" value="{{ request('price_min') }}" placeholder="от" class="input px-2 py-1.5 text-sm">
                            <input type="number" name="price_max" value="{{ request('price_max') }}" placeholder="до" class="input px-2 py-1.5 text-sm">
                        </div>
                    </div>

                    @foreach ($filters as $filter)
                        <div>
                            <label class="mb-1 block text-xs text-muted">{{ $filter->label }}</label>
                            @if ($filter->type === 'select' || $filter->type === 'bool')
                                <select name="attr[{{ $filter->key }}]" onchange="this.form.submit()" class="input px-2 py-1.5 text-sm">
                                    <option value="">Любой</option>
                                    @foreach (($filter->type === 'bool' ? ['Да','Нет'] : ($filter->options ?? [])) as $opt)
                                        <option value="{{ $opt }}" @selected(request("attr.{$filter->key}") === (string)$opt)>{{ $opt }}{{ $filter->unit ? ' '.$filter->unit : '' }}</option>
                                    @endforeach
                                </select>
                            @elseif ($filter->type === 'number')
                                <div class="flex items-center gap-2">
                                    <input type="number" inputmode="decimal" name="attr[{{ $filter->key }}][min]" value="{{ request("attr.{$filter->key}.min") }}" placeholder="от" class="input px-2 py-1.5 text-sm">
                                    <input type="number" inputmode="decimal" name="attr[{{ $filter->key }}][max]" value="{{ request("attr.{$filter->key}.max") }}" placeholder="до" class="input px-2 py-1.5 text-sm">
                                </div>
                            @else
                                <input type="text" name="attr[{{ $filter->key }}]" value="{{ request("attr.{$filter->key}") }}" class="input px-2 py-1.5 text-sm">
                            @endif
                        </div>
                    @endforeach

                    <button type="submit" class="btn-brand w-full py-2 text-sm">Применить</button>
                </div>
            </aside>

            {{-- Правая колонка: тулбар + лента --}}
            <div>
                {{-- Тулбар --}}
                <div class="card mb-4 flex flex-wrap items-center justify-between gap-3 p-3">
                    {{-- Галочка «сначала из города» имеет смысл только при выбранном городе --}}
                    @if ($currentCity)
                        <label class="flex items-center gap-2 text-sm text-gray-700">
                            <input type="checkbox" name="city_first" value="1" onchange="this.form.submit()" @checked(request('city_first'))
                                   class="rounded border-gray-300 text-brand-500 focus:ring-brand-300">
                            Сначала из города {{ $currentCity->name }}
                        </label>
                    @endif

                    <div class="ml-auto flex items-center gap-3">
                        <select name="sort" onchange="this.form.submit()" class="input w-auto px-2 py-1.5 text-sm">
                            <option value="" @selected(!request('sort'))>Сначала новые</option>
                            <option value="price_asc" @selected(request('sort')==='price_asc')>Дешевле</option>
                            <option value="price_desc" @selected(request('sort')==='price_desc')>Дороже</option>
                        </select>

                        {{-- Переключатель вида --}}
                        <div class="flex overflow-hidden rounded-full border border-gray-200">
                            @foreach (['grid' => '▦', 'list' => '☰', 'map' => '📍'] as $mode => $icon)
                                <button type="button" @click="view='{{ $mode }}'; $nextTick(() => $root.submit())"
                                        class="px-3 py-1.5 text-sm transition"
                                        :class="view === '{{ $mode }}' ? 'bg-brand-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'">{{ $icon }}</button>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Содержимое --}}
                @if ($view === 'map')
                    <div x-data="feedMap('{{ $pointsUrl }}', {{ $mapCenter[0] }}, {{ $mapCenter[1] }})" class="relative" @keydown.escape.window="full && toggleFull()">
                        <div x-ref="map"
                             class="h-[70vh] w-full overflow-hidden rounded-xl border border-gray-200"
                             :class="full ? '!fixed !inset-0 !z-[1000] !h-screen !w-screen !rounded-none' : ''"></div>
                        {{-- Развернуть на весь экран / вернуться --}}
                        <button type="button" @click="toggleFull()"
                                class="z-[1001] grid h-10 w-10 place-items-center rounded-lg bg-white text-gray-700 shadow-md ring-1 ring-gray-200 hover:bg-gray-50"
                                :class="full ? 'fixed right-4 top-4' : 'absolute right-3 top-3'"
                                :title="full ? 'Свернуть карту' : 'На весь экран'">
                            <svg x-show="!full" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9m11.25-5.25h-4.5m4.5 0v4.5m0-4.5L15 9M3.75 20.25h4.5m-4.5 0v-4.5m0 4.5L9 15m11.25 5.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
                            </svg>
                            <svg x-show="full" x-cloak class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                @else
                    @include('partials.feed', ['ads' => $ads, 'view' => $view, 'nextUrl' => $nextUrl])
                @endif
            </div>
        </div>
    </form>
</div>
@endsection