@extends('layouts.app')

@section('title', 'Редактирование объявления — Placeo')

@section('content')
<div class="mx-auto max-w-2xl">
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold">Редактирование объявления</h1>
        <a href="{{ route('cabinet.ads.index') }}" class="text-sm text-muted hover:text-brand-600">‹ К моим объявлениям</a>
    </div>

    @if ($errors->any())
        <div class="mb-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700">
            <ul class="list-inside list-disc space-y-1">
                @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('cabinet.ads.update', $ad) }}" enctype="multipart/form-data" class="space-y-6"
          @if ($canChangeCategory) x-data="adForm({{ Illuminate\Support\Js::from(['path' => $categoryPath, 'values' => (object) ($ad->attributes ?? [])]) }})" @endif>
        @csrf
        @method('PUT')

        @if ($canChangeCategory)
            {{-- Категория (каскад): объявление ещё не публиковалось — раздел можно сменить --}}
            <div class="card space-y-3 p-5">
                <label class="block text-sm font-semibold text-gray-800">Категория</label>
                <template x-for="(level, index) in levels" :key="index">
                    <select x-model="level.selected" @change="onSelect(index)" class="input">
                        <option value="">— выберите —</option>
                        <template x-for="opt in level.options" :key="opt.id">
                            <option :value="opt.id" x-text="opt.name + (opt.is_leaf ? '' : ' ›')"></option>
                        </template>
                    </select>
                </template>
                <input type="hidden" name="category_id" :value="leafId">
                <p x-show="!leafId" class="text-xs text-muted">Выберите конечную категорию, чтобы продолжить.</p>
                <p class="text-xs text-muted">Сменить раздел можно, пока объявление не опубликовано. При смене категории объявление будет отправлено на повторную модерацию.</p>
            </div>
        @else
            {{-- Категория — только для чтения (уже публиковалось) --}}
            <div class="card space-y-2 p-5">
                <label class="block text-sm font-semibold text-gray-800">Категория</label>
                <div class="flex flex-wrap items-center gap-1 text-sm text-gray-700">
                    @foreach ($breadcrumbs as $crumb)
                        @if (!$loop->first)<span class="text-muted">›</span>@endif
                        <span class="{{ $loop->last ? 'font-medium text-gray-900' : '' }}">{{ $crumb->name }}</span>
                    @endforeach
                </div>
                <p class="text-xs text-muted">Категорию изменить нельзя. Чтобы сменить раздел, создайте новое объявление.</p>
            </div>
        @endif

        {{-- Основное --}}
        <div class="card space-y-4 p-5">
            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Заголовок</label>
                <input type="text" name="title" value="{{ old('title', $ad->title) }}" required maxlength="255" class="input">
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700">Цена, ₽</label>
                    <input type="number" name="price" value="{{ old('price', $ad->price) }}" min="0" step="1" inputmode="numeric" required class="input" placeholder="Например, 15000">
                </div>
                <div class="flex items-end pb-2.5">
                    <label class="flex items-center gap-2 text-sm text-gray-700">
                        <input type="checkbox" name="price_is_from" value="1" @checked(old('price_is_from', $ad->price_is_from))
                               class="rounded border-gray-300 text-brand-500 focus:ring-brand-300">
                        Цена «от»
                    </label>
                </div>
            </div>

            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Описание</label>
                <textarea name="description" rows="6" required maxlength="10000" class="input">{{ old('description', $ad->description) }}</textarea>
            </div>

            @include('cabinet.partials.ad-phone-select', [
                'verifiedPhones' => $verifiedPhones,
                'selectedPhoneId' => (int) old('phone_id', $ad->phone_id ?? optional($verifiedPhones->firstWhere('is_primary', true))->id),
            ])

            @include('cabinet.partials.contact-method', ['selected' => old('contact_method', $ad->contact_method ?? 'all')])
        </div>

        {{-- Характеристики (динамически по выбранной категории) — для редактируемого раздела --}}
        @if ($canChangeCategory)
            <div class="card space-y-4 p-5" x-show="attrs.length" x-cloak>
                <h2 class="text-sm font-semibold text-gray-800">Характеристики</h2>
                <template x-for="attr in attrs" :key="attr.key">
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">
                            <span x-text="attr.label"></span>
                            <span x-show="attr.unit" class="text-muted" x-text="'(' + attr.unit + ')'"></span>
                        </label>
                        <template x-if="attr.type === 'select'">
                            <select :name="'attributes[' + attr.key + ']'" x-model="attrValues[attr.key]" class="input">
                                <option value="">— не выбрано —</option>
                                <template x-for="o in (attr.options || [])" :key="o">
                                    <option :value="o" x-text="o"></option>
                                </template>
                            </select>
                        </template>
                        <template x-if="attr.type === 'bool'">
                            <select :name="'attributes[' + attr.key + ']'" x-model="attrValues[attr.key]" class="input">
                                <option value="">— не выбрано —</option>
                                <option value="Да">Да</option>
                                <option value="Нет">Нет</option>
                            </select>
                        </template>
                        <template x-if="attr.type === 'number'">
                            <input type="number" :name="'attributes[' + attr.key + ']'" x-model="attrValues[attr.key]" class="input">
                        </template>
                        <template x-if="attr.type === 'text' || !['select','bool','number'].includes(attr.type)">
                            <input type="text" :name="'attributes[' + attr.key + ']'" x-model="attrValues[attr.key]" class="input">
                        </template>
                    </div>
                </template>
            </div>
        @elseif ($attrDefs->isNotEmpty())
            <div class="card space-y-4 p-5">
                <h2 class="text-sm font-semibold text-gray-800">Характеристики</h2>
                @foreach ($attrDefs as $attr)
                    @php $val = old("attributes.{$attr->key}", data_get($ad->attributes, $attr->key)); @endphp
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">
                            {{ $attr->label }}@if($attr->unit)<span class="text-muted"> ({{ $attr->unit }})</span>@endif
                        </label>
                        @if ($attr->type === 'select')
                            <select name="attributes[{{ $attr->key }}]" class="input">
                                <option value="">— не выбрано —</option>
                                @foreach (($attr->options ?? []) as $opt)
                                    <option value="{{ $opt }}" @selected((string) $val === (string) $opt)>{{ $opt }}</option>
                                @endforeach
                            </select>
                        @elseif ($attr->type === 'bool')
                            <select name="attributes[{{ $attr->key }}]" class="input">
                                <option value="">— не выбрано —</option>
                                <option value="Да" @selected($val === 'Да')>Да</option>
                                <option value="Нет" @selected($val === 'Нет')>Нет</option>
                            </select>
                        @elseif ($attr->type === 'number')
                            <input type="number" name="attributes[{{ $attr->key }}]" value="{{ $val }}" class="input">
                        @else
                            <input type="text" name="attributes[{{ $attr->key }}]" value="{{ $val }}" class="input">
                        @endif
                    </div>
                @endforeach
            </div>
        @endif

        {{-- Расположение --}}
        <div class="card space-y-3 p-5"
             x-data="addressMap({{ $currentCity?->lat ?? 55.751244 }}, {{ $currentCity?->lng ?? 37.618423 }}, {{ ($ad->lat && $ad->lng) ? Illuminate\Support\Js::from(['lat' => $ad->lat, 'lng' => $ad->lng, 'address' => $ad->address, 'city' => $ad->city?->name]) : 'null' }})"
             x-init="initMap()">
            <label class="block text-sm font-semibold text-gray-800">Расположение <span class="text-red-500">*</span></label>
            <p class="text-xs text-muted">Кликните по карте или перетащите маркер — либо впишите адрес и нажмите «Найти». Адрес и город определятся автоматически.</p>
            <div x-ref="map" class="h-72 w-full overflow-hidden rounded-lg border border-gray-200"></div>
            <div class="flex gap-2">
                <input type="text" x-model="query" class="input flex-1" placeholder="Впишите адрес и нажмите «Найти» — либо укажите точку на карте"
                       @keydown.enter.prevent="searchAddress()">
                <button type="button" @click="searchAddress()" :disabled="searching" class="btn-secondary shrink-0 whitespace-nowrap px-4">
                    <span x-show="!searching">Найти</span>
                    <span x-show="searching" x-cloak>Ищу…</span>
                </button>
            </div>
            <p class="text-xs text-red-600" x-show="notFound" x-cloak>Адрес не найден — уточните формулировку или укажите точку на карте.</p>
            <p class="text-xs text-emerald-700" x-show="address" x-cloak>
                ✓ Адрес определён по карте: <span class="font-medium" x-text="address"></span>
            </p>
            <p class="text-xs text-muted" x-show="cityName" x-cloak>
                Город: <span class="font-medium text-gray-800" x-text="cityName"></span>
            </p>
            {{-- Адрес уходит в БД только из геокодинга (reverse), ручной ввод служит лишь запросом поиска. --}}
            <input type="hidden" name="address" x-model="address">
            <input type="hidden" name="city_name" x-model="cityName">
            <input type="hidden" name="lat" x-model="lat">
            <input type="hidden" name="lng" x-model="lng">
        </div>

        {{-- Фотографии --}}
        <div class="card space-y-4 p-5"
             x-data="{ newPhotos: [], preview(e) { for (const f of Array.from(e.target.files)) this.newPhotos.push(URL.createObjectURL(f)); } }">
            <label class="block text-sm font-semibold text-gray-800">Фотографии <span class="text-muted">(минимум 1)</span></label>

            {{-- Существующие (с отметкой на удаление) --}}
            @if ($ad->photos->isNotEmpty())
                <div>
                    <p class="mb-2 text-xs text-muted">Отметьте фото, которые нужно удалить.</p>
                    <div class="grid grid-cols-4 gap-2 sm:grid-cols-6">
                        @foreach ($ad->photos as $photo)
                            <label class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg border border-gray-200">
                                <img src="{{ $photo->previewUrl() }}" class="h-full w-full object-cover" alt="">
                                <input type="checkbox" name="remove_photos[]" value="{{ $photo->id }}" class="peer absolute right-1 top-1 h-4 w-4 accent-red-500">
                                <span class="pointer-events-none absolute inset-0 hidden bg-red-500/40 peer-checked:block"></span>
                            </label>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Добавить новые --}}
            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Добавить фото <span class="text-muted">(всего до {{ config('placeo.ad_max_photos') }})</span></label>
                <input type="file" name="photos[]" accept="image/*" multiple @change="preview($event)" class="text-sm">
                <div class="mt-2 grid grid-cols-4 gap-2 sm:grid-cols-6" x-show="newPhotos.length" x-cloak>
                    <template x-for="(url, i) in newPhotos" :key="i">
                        <div class="aspect-square overflow-hidden rounded-lg border border-gray-200">
                            <img :src="url" class="h-full w-full object-cover" alt="">
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="btn-brand px-6"
                    @if ($canChangeCategory) :disabled="!leafId" :class="!leafId && 'opacity-50 cursor-not-allowed'" @endif>
                Сохранить
            </button>
        </div>
    </form>
</div>
@endsection