@extends('layouts.app')

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

@section('content')
<div class="mx-auto max-w-2xl">
    <h1 class="mb-6 text-2xl font-bold">Подать объявление</h1>

    @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.store') }}" enctype="multipart/form-data"
          x-data="adForm()" class="space-y-6">
        @csrf

        {{-- Категория (каскад) --}}
        <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>
        </div>

        {{-- Основное --}}
        <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') }}" required maxlength="255" class="input" placeholder="Например, iPhone 13 128 ГБ">
            </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') }}" 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'))
                               class="rounded border-gray-300 text-brand-500 focus:ring-brand-300">
                        Цена «от» (покажем «от XXX ₽»)
                    </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" placeholder="Опишите товар или услугу">{{ old('description') }}</textarea>
            </div>

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

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

        {{-- Характеристики (динамически по категории) --}}
        <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 + ']'" 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 + ']'" 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 + ']'" class="input">
                    </template>
                    <template x-if="attr.type === 'text' || !['select','bool','number'].includes(attr.type)">
                        <input type="text" :name="'attributes[' + attr.key + ']'" class="input">
                    </template>
                </div>
            </template>
        </div>

        {{-- Расположение --}}
        <div class="card space-y-3 p-5" x-data="addressMap({{ $currentCity?->lat ?? 55.751244 }}, {{ $currentCity?->lng ?? 37.618423 }})" 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-3 p-5">
            <label class="block text-sm font-semibold text-gray-800">Фотографии <span class="text-red-500">*</span> <span class="text-muted">(минимум 1, до {{ config('placeo.ad_max_photos') }})</span></label>
            <input type="file" name="photos[]" accept="image/*" multiple required @change="onPhotos($event)" class="text-sm">
            <div class="grid grid-cols-4 gap-2 sm:grid-cols-6" x-show="photos.length" x-cloak>
                <template x-for="(p, i) in photos" :key="i">
                    <div class="aspect-square overflow-hidden rounded-lg border border-gray-200">
                        <img :src="p.url" class="h-full w-full object-cover" alt="">
                    </div>
                </template>
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="btn-brand px-6" :disabled="!leafId" :class="!leafId && 'opacity-50 cursor-not-allowed'">
                Опубликовать
            </button>
        </div>
    </form>
</div>
@endsection