@extends('layouts.cabinet')

@section('title', 'Новый импорт — Placeo')

@section('cabinet')
<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.imports.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 $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="POST" action="{{ route('cabinet.imports.store') }}" enctype="multipart/form-data" class="space-y-6"
          x-data="{ type: '{{ old('source_type', 'file') }}' }">
        @csrf

        {{-- Источник --}}
        <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="name" value="{{ old('name') }}" maxlength="120" required class="input" placeholder="Например, Каталог поставщика">
            </div>

            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Формат</label>
                <div class="text-sm text-gray-700">YML (стандартный файл Яндекс.Маркета)</div>
                <input type="hidden" name="format" value="yml">
            </div>

            <div>
                <label class="mb-2 block text-sm font-medium text-gray-700">Откуда загружать</label>
                <div class="flex gap-2">
                    <label class="flex flex-1 cursor-pointer items-center gap-2 rounded-lg border p-3 text-sm"
                           :class="type === 'file' ? 'border-brand-400 bg-brand-50' : 'border-gray-200'">
                        <input type="radio" name="source_type" value="file" x-model="type" class="text-brand-500"> Загрузить файл
                    </label>
                    <label class="flex flex-1 cursor-pointer items-center gap-2 rounded-lg border p-3 text-sm"
                           :class="type === 'url' ? 'border-brand-400 bg-brand-50' : 'border-gray-200'">
                        <input type="radio" name="source_type" value="url" x-model="type" class="text-brand-500"> По ссылке
                    </label>
                </div>
            </div>

            {{-- Файл --}}
            <div x-show="type === 'file'">
                <label class="mb-1 block text-sm font-medium text-gray-700">YML-файл</label>
                <input type="file" name="file" accept=".yml,.xml,application/xml,text/xml" class="text-sm">
                <p class="mt-1 text-xs text-muted">Разовая обработка. Для регулярного обновления используйте загрузку по ссылке.</p>
            </div>

            {{-- Ссылка --}}
            <div x-show="type === 'url'" x-cloak class="space-y-3">
                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700">Ссылка на YML</label>
                    <input type="url" name="url" value="{{ old('url') }}" class="input" placeholder="https://site.ru/feed.yml">
                </div>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="auto_update" value="1" @checked(old('auto_update')) class="rounded border-gray-300 text-brand-500">
                    Обновлять автоматически раз в день (только цена и фото; новые товары добавляются)
                </label>
            </div>
        </div>

        {{-- Общие настройки объявлений --}}
        <div class="card space-y-4 p-5">
            <h2 class="text-sm font-semibold text-gray-800">Настройки объявлений (применятся ко всем товарам)</h2>

            @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-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>
            <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="rounded-lg bg-amber-50 px-4 py-3 text-xs text-amber-800">
            Категория каждого товара определяется автоматически по названию и описанию, затем объявление проходит модерацию. Товары без фотографий пропускаются.
        </div>

        <div class="flex justify-end">
            <button type="submit" class="btn-brand px-6">Запустить импорт</button>
        </div>
    </form>
</div>
@endsection