@extends('layouts.cabinet')

@section('title', 'Настройка виджета — Placeo')

@php
    $exists = $widget->exists;
    $action = $exists ? route('cabinet.widgets.update', $widget) : route('cabinet.widgets.store');
    $cfg = array_merge(\App\Models\Widget::defaultConfig(), $widget->config ?? []);
    $initialCats = $selectedCategories->map(fn ($name, $id) => ['id' => $id, 'name' => $name])->values();
@endphp

@section('cabinet')
<div>
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold">{{ $exists ? 'Настройка виджета' : 'Новый виджет' }}</h1>
        <a href="{{ route('cabinet.widgets.index') }}" class="text-sm text-muted hover:text-brand-600">‹ К списку</a>
    </div>

    @if (session('status'))<div class="mb-4 rounded-lg bg-brand-50 px-4 py-3 text-sm text-brand-800">{{ session('status') }}</div>@endif
    @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">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>@endif

    <div class="grid gap-6 lg:grid-cols-2">
        {{-- Настройки --}}
        <form method="POST" action="{{ $action }}" class="card space-y-5 p-5" x-data="catPicker({{ Illuminate\Support\Js::from($initialCats) }})">
            @csrf
            @if ($exists) @method('PUT') @endif

            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Название</label>
                <input type="text" name="name" value="{{ old('name', $widget->name) }}" class="input" required>
            </div>

            {{-- Цвета --}}
            <style>
                .wcolor-input { -webkit-appearance: none; appearance: none; width: 100%; height: 2.5rem; padding: 0; border: 1px solid #e5e7eb; border-radius: .65rem; cursor: pointer; background: none; }
                .wcolor-input::-webkit-color-swatch-wrapper { padding: 0; }
                .wcolor-input::-webkit-color-swatch { border: none; border-radius: .6rem; }
                .wcolor-input::-moz-color-swatch { border: none; border-radius: .6rem; }
                .wcolor-hex { margin-top: 4px; text-align: center; font-size: .7rem; letter-spacing: .03em; text-transform: uppercase; color: #9aa0ad; }
                .wrange { width: 100%; accent-color: var(--brand-500, #7c3aed); }
            </style>
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                @foreach (['bg_color' => 'Фон', 'card_bg' => 'Карточки', 'button_color' => 'Кнопки', 'button_text_color' => 'Текст кнопок', 'text_color' => 'Текст'] as $key => $label)
                    <div>
                        <label class="mb-1 block text-xs text-muted">{{ $label }}</label>
                        <input type="color" name="{{ $key }}" value="{{ old($key, $cfg[$key]) }}" class="wcolor-input"
                               oninput="this.nextElementSibling.textContent = this.value">
                        <div class="wcolor-hex">{{ old($key, $cfg[$key]) }}</div>
                    </div>
                @endforeach
                <div>
                    <label class="mb-1 block text-xs text-muted">Размер шрифта</label>
                    <input type="number" name="font_size" min="12" max="22" value="{{ old('font_size', $cfg['font_size']) }}" class="input px-2 py-1.5">
                </div>
            </div>

            {{-- Прозрачность фона/карточек (для встройки на свой дизайн) --}}
            <div class="space-y-2 rounded-lg bg-gray-50 p-3">
                <label class="flex items-center gap-2.5 text-sm text-gray-700">
                    <input type="checkbox" name="bg_transparent" value="1" @checked(old('bg_transparent', $cfg['bg_transparent'] ?? false)) class="h-4 w-4 rounded border-gray-300 text-brand-500">
                    Прозрачный фон виджета
                </label>
                <label class="flex items-center gap-2.5 text-sm text-gray-700">
                    <input type="checkbox" name="card_transparent" value="1" @checked(old('card_transparent', $cfg['card_transparent'] ?? false)) class="h-4 w-4 rounded border-gray-300 text-brand-500">
                    Прозрачный фон карточек
                </label>
                <p class="text-xs text-muted">Если включено — цвет фона игнорируется, виджет берёт фон вашего сайта.</p>
            </div>

            {{-- Сетка и отображение --}}
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="mb-1 block text-xs text-muted">Размер плиток</label>
                    @php $cs = old('card_size', $cfg['card_size'] ?? 'medium'); @endphp
                    <select name="card_size" class="input px-2 py-1.5">
                        <option value="small" @selected($cs==='small')>Маленькие</option>
                        <option value="medium" @selected($cs==='medium')>Средние</option>
                        <option value="large" @selected($cs==='large')>Большие</option>
                    </select>
                </div>
                <div>
                    <label class="mb-1 block text-xs text-muted">Отображение</label>
                    @php $lay = old('layout', $cfg['layout'] ?? 'grid'); @endphp
                    <select name="layout" class="input px-2 py-1.5">
                        <option value="grid" @selected($lay==='grid')>Плитками</option>
                        <option value="list" @selected($lay==='list')>По одному в строке</option>
                    </select>
                </div>
            </div>
            {{-- Радиус скругления (отдельно для объявлений и кнопок) --}}
            @php $rc = (int) old('radius_card', $cfg['radius_card'] ?? 16); $rb = (int) old('radius_button', $cfg['radius_button'] ?? 12); @endphp
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="mb-1 flex items-center justify-between text-xs text-muted">
                        <span>Скругление объявлений</span><span id="rc-val" class="font-medium text-gray-600">{{ $rc }} px</span>
                    </label>
                    <input type="range" name="radius_card" min="0" max="30" value="{{ $rc }}" class="wrange"
                           oninput="document.getElementById('rc-val').textContent = this.value + ' px'">
                </div>
                <div>
                    <label class="mb-1 flex items-center justify-between text-xs text-muted">
                        <span>Скругление кнопок</span><span id="rb-val" class="font-medium text-gray-600">{{ $rb }} px</span>
                    </label>
                    <input type="range" name="radius_button" min="0" max="30" value="{{ $rb }}" class="wrange"
                           oninput="document.getElementById('rb-val').textContent = this.value + ' px'">
                </div>
            </div>

            {{-- Категории --}}
            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Категории объявлений</label>
                <div class="mb-2 flex flex-wrap gap-1">
                    <template x-for="c in selected" :key="c.id">
                        <span class="inline-flex items-center gap-1 rounded-full bg-brand-100 px-2.5 py-1 text-xs text-brand-800">
                            <span x-text="c.name"></span>
                            <button type="button" @click="remove(c.id)" class="text-brand-600">×</button>
                            <input type="hidden" name="category_ids[]" :value="c.id">
                        </span>
                    </template>
                    <span x-show="!selected.length" class="text-xs text-muted">Не выбрано — будут показаны все категории.</span>
                </div>
                <div class="flex flex-wrap items-end gap-2">
                    <template x-for="(level, i) in levels" :key="i">
                        <select x-model="level.selected" @change="onSelect(i)" class="input w-auto px-2 py-1.5 text-sm">
                            <option value="">—</option>
                            <template x-for="o in level.options" :key="o.id">
                                <option :value="o.id" x-text="o.name + (o.is_leaf ? '' : ' ›')"></option>
                            </template>
                        </select>
                    </template>
                    <button type="button" @click="add()" class="btn-tonal px-3 py-1.5 text-sm">+ Добавить</button>
                </div>
            </div>

            {{-- Фильтры для посетителей --}}
            <div class="space-y-2" x-data="{ showCat: {{ old('show_category_filter', $cfg['show_category_filter']) ? 'true' : 'false' }} }">
                <div class="text-sm font-medium text-gray-700">Фильтры для посетителей</div>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_category_filter" value="1" x-model="showCat" class="rounded border-gray-300 text-brand-500">
                    Фильтр по категориям
                </label>
                <div class="ml-6" x-show="showCat" x-cloak>
                    <label class="mb-1 block text-xs text-muted">Вид фильтра категорий</label>
                    @php $cfs = old('category_filter_style', $cfg['category_filter_style'] ?? 'tabs_top'); @endphp
                    <select name="category_filter_style" class="input w-auto px-2 py-1.5 text-sm">
                        <option value="tabs_top" @selected($cfs==='tabs_top')>Вкладки сверху</option>
                        <option value="tabs_left" @selected($cfs==='tabs_left')>Вкладки слева</option>
                        <option value="select" @selected($cfs==='select')>Выпадающий список</option>
                    </select>
                </div>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_price_filter" value="1" @checked(old('show_price_filter', $cfg['show_price_filter'])) class="rounded border-gray-300 text-brand-500">
                    Фильтр по цене
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_search" value="1" @checked(old('show_search', $cfg['show_search'])) class="rounded border-gray-300 text-brand-500">
                    Строка поиска
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_sort" value="1" @checked(old('show_sort', $cfg['show_sort'])) class="rounded border-gray-300 text-brand-500">
                    Сортировка
                </label>
            </div>

            {{-- Опции --}}
            <div class="space-y-2">
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="allow_posting" value="1" @checked(old('allow_posting', $cfg['allow_posting'])) class="rounded border-gray-300 text-brand-500">
                    Разрешить подачу объявлений
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="only_own" value="1" @checked(old('only_own', $cfg['only_own'])) class="rounded border-gray-300 text-brand-500">
                    Показывать только объявления, поданные с моего сайта
                </label>
            </div>

            {{-- Разрешённые домены --}}
            @php $initialDomains = old('allowed_domains', $cfg['allowed_domains'] ?? []); @endphp
            <div x-data="domainList({{ Illuminate\Support\Js::from($initialDomains) }})">
                <label class="mb-1 block text-sm font-medium text-gray-700">Разрешённые домены</label>
                <p class="mb-2 text-xs text-muted">Виджет будет работать только на этих доменах. На других сайтах он ничего не покажет. Пусто — разрешён везде.</p>

                <div class="space-y-2">
                    <template x-for="(row, i) in rows" :key="i">
                        <div class="flex flex-wrap items-center gap-2">
                            <input type="text" :name="`allowed_domains[${i}][domain]`" x-model="row.domain"
                                   placeholder="example.com" class="input w-auto flex-1 px-2 py-1.5 text-sm" autocomplete="off">
                            <input type="hidden" :name="`allowed_domains[${i}][subdomains]`" :value="row.subdomains ? '1' : '0'">
                            <label class="flex items-center gap-1.5 whitespace-nowrap text-xs text-gray-700">
                                <input type="checkbox" x-model="row.subdomains" class="rounded border-gray-300 text-brand-500">
                                с учётом поддоменов
                            </label>
                            <button type="button" @click="remove(i)" class="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-red-600" title="Удалить">×</button>
                        </div>
                    </template>
                    <p x-show="!rows.length" class="text-xs text-muted">Доменов нет — виджет работает на любом сайте.</p>
                </div>

                <button type="button" @click="add()" class="btn-tonal mt-2 px-3 py-1.5 text-sm">+ Добавить домен</button>
            </div>

            <div class="flex items-center justify-between border-t border-gray-100 pt-4">
                @if ($exists)
                    <button form="del-widget" class="text-sm text-red-600 hover:underline">Удалить</button>
                @else <span></span> @endif
                <button type="submit" class="btn-brand">{{ $exists ? 'Сохранить' : 'Создать' }}</button>
            </div>
        </form>

        @if ($exists)
            <form id="del-widget" method="POST" action="{{ route('cabinet.widgets.destroy', $widget) }}" class="hidden">@csrf @method('DELETE')</form>

            {{-- Сниппет + превью --}}
            <div class="space-y-4">
                <div class="card p-5">
                    <h2 class="mb-2 text-sm font-semibold text-gray-800">Код для вставки на сайт</h2>
                    <pre class="overflow-x-auto rounded-lg bg-gray-900 p-3 text-xs text-green-300"><code>&lt;script src="{{ url('/widget/placeo-widget.js') }}" data-key="{{ $widget->public_key }}"&gt;&lt;/script&gt;</code></pre>
                    <p class="mt-2 text-xs text-muted">Вставьте этот код в любое место на вашем сайте, где должен появиться виджет.</p>
                </div>

                <div class="card p-5">
                    <h2 class="mb-3 text-sm font-semibold text-gray-800">Предпросмотр (сохранённая версия)</h2>
                    <div id="widget-preview" class="rounded-lg border border-dashed border-gray-200 p-2"></div>
                    <script>
                        (function () {
                            var s = document.createElement('script');
                            s.src = "{{ url('/widget/placeo-widget.js') }}?v={{ $widget->updated_at?->timestamp }}";
                            s.setAttribute('data-key', "{{ $widget->public_key }}");
                            document.getElementById('widget-preview').appendChild(s);
                        })();
                    </script>
                </div>
            </div>
        @else
            <div class="card grid place-items-center p-8 text-center text-sm text-muted">
                Сохраните виджет, чтобы получить код для вставки и предпросмотр.
            </div>
        @endif
    </div>
</div>
@endsection