@extends('layouts.merchant')

@section('title', $product ? 'Редактирование товара' : 'Новый товар')

@php($input = 'w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--color-primary)] disabled:cursor-not-allowed disabled:bg-[#F3F4F6] disabled:text-[var(--color-muted)]')
@php($lbl = 'mb-1.5 block text-sm font-semibold text-[var(--color-ink)]')
{{-- Товары из YML-фида: название, цена и наличие приходят из выгрузки и здесь не редактируются. --}}
@php($fromFeed = (bool) $product?->yml_feed_id)
@php($initChars = old('characteristics', $product?->characteristics->map(fn ($c) => ['name' => $c->name, 'value' => $c->value, 'unit' => $c->unit])->all()) ?: [['name' => '', 'value' => '', 'unit' => '']])

@section('content')
<div class="max-w-2xl">
    <h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">{{ $product ? 'Редактирование товара' : 'Новый товар' }}</h1>

    @if ($errors->any())
        <div class="mt-4 rounded-[var(--radius-md)] bg-[#FDECEE] px-4 py-3 text-sm font-semibold text-[var(--color-sale)]">Проверьте правильность заполнения формы.</div>
    @endif

    @if ($fromFeed)
        <div class="mt-4 flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-primary-soft)] px-4 py-3 text-sm text-[var(--color-primary-dark)]">
            <i data-lucide="info" class="mt-0.5 h-4 w-4 shrink-0"></i>
            <span>Название, цена и наличие берутся из вашей выгрузки (YML-фида, кабинета Ozon или Wildberries) и здесь не редактируются — меняйте их в источнике, они обновятся автоматически. Описание, фото, характеристики и акции править можно.</span>
        </div>
    @endif

    <form method="POST" enctype="multipart/form-data"
          action="{{ $product ? route('merchant.products.update', $product) : route('merchant.products.store') }}"
          class="mt-6 space-y-4 rounded-[var(--radius-lg)] bg-white p-6 shadow-[var(--shadow-card)]">
        @csrf
        @if ($product) @method('PUT') @endif

        {{-- Выбор категории с поиском, а не список на девять тысяч строк: найти
             в нём нужное нельзя, и «возможности выбрать категорию» фактически не
             было. Тот же компонент, что в сопоставлении фида, — но без «сборной»
             и буфера обмена: здесь один товар, копировать нечего. --}}
        @php($currentCategoryId = (int) old('category_id', $product?->category_id))
        <script>window.__teeuCats = @json(collect($categories)->map(fn ($label, $id) => ['id' => (string) $id, 'label' => $label])->values(), JSON_UNESCAPED_UNICODE);</script>

        <div x-data="catPicker('{{ $currentCategoryId ?: '' }}', @js($categories[$currentCategoryId] ?? ''), false)"
             @click.outside="open = false" @keydown.escape="open = false">
            <span class="{{ $lbl }}">Категория</span>
            <div class="relative">
                <input type="hidden" name="category_id" :value="selectedId">
                <button type="button" @click="toggle()" :title="selectedLabel"
                        class="flex w-full items-start justify-between gap-2 rounded-[var(--radius-md)] border-[1.5px] bg-white px-4 py-3 text-left text-[15px] outline-none transition"
                        :class="open ? 'border-[var(--color-primary)]' : 'border-[#E1E4EA]'">
                    <span class="leading-snug" :class="selectedLabel ? 'text-[var(--color-ink)]' : 'text-[var(--color-muted)]'"
                          x-text="selectedLabel || '— выберите категорию —'"></span>
                    <i data-lucide="chevron-down" class="mt-0.5 h-4 w-4 shrink-0 text-[var(--color-muted)] transition-transform" :class="{ 'rotate-180': open }"></i>
                </button>
                <div x-show="open" x-cloak x-transition
                     class="absolute left-0 right-0 top-full z-30 mt-1 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white shadow-[var(--shadow-frame)]">
                    <div class="border-b border-[var(--color-line)] p-2">
                        <input x-ref="search" x-model="q" type="text" placeholder="Поиск категории…" @click.stop
                               class="w-full rounded-[var(--radius-sm)] border-[1.5px] border-[#E1E4EA] px-2.5 py-1.5 text-sm outline-none focus:border-[var(--color-primary)]">
                    </div>
                    <div class="max-h-60 overflow-y-auto py-1">
                        <template x-for="c in items" :key="c.id">
                            <button type="button" @click="pick(c)" x-text="c.label" :title="c.label"
                                    class="block w-full px-3 py-1.5 text-left text-sm leading-snug text-[var(--color-ink)] hover:bg-[var(--color-primary-soft)]"></button>
                        </template>
                        <template x-if="items.length === 0">
                            <div class="px-3 py-2 text-sm text-[var(--color-muted)]">Ничего не найдено</div>
                        </template>
                    </div>
                </div>
            </div>
            @if ($product?->yml_feed_id)
                <p class="mt-1 text-xs text-[var(--color-muted)]">
                    Выбранная здесь категория остаётся за товаром: ни импорт, ни автоматический разбор её больше не меняют.
                </p>
            @endif
            @error('category_id')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
        </div>

        <label class="block"><span class="{{ $lbl }}">Название</span>
            @if ($fromFeed)
                <input value="{{ $product?->title }}" class="{{ $input }}" disabled>
                <span class="mt-1 block text-xs text-[var(--color-muted)]">Из фида — изменить нельзя.</span>
            @else
                <input name="title" value="{{ old('title', $product?->title) }}" class="{{ $input }}">
                @error('title')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
            @endif
        </label>

        <div class="grid gap-4 sm:grid-cols-2">
            <label class="block"><span class="{{ $lbl }}">Цена, ₽</span>
                @if ($fromFeed)
                    <input type="number" step="0.01" value="{{ $product?->price }}" class="{{ $input }}" disabled>
                    <span class="mt-1 block text-xs text-[var(--color-muted)]">Из фида — изменить нельзя.</span>
                @else
                    <input name="price" type="number" step="0.01" value="{{ old('price', $product?->price) }}" class="{{ $input }}">
                    @error('price')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
                @endif
            </label>
            <label class="block"><span class="{{ $lbl }}">Наличие</span>
                <select name="availability" class="{{ $input }}" @disabled($fromFeed)>
                    @foreach (\App\Enums\Availability::cases() as $a)
                        <option value="{{ $a->value }}" @selected(old('availability', $product?->availability?->value) === $a->value)>{{ $a->label() }}</option>
                    @endforeach
                </select>
                @if ($fromFeed)
                    <span class="mt-1 block text-xs text-[var(--color-muted)]">Из фида — изменить нельзя.</span>
                @endif
            </label>
        </div>

        {{-- Promotion (Deals of the day) --}}
        @php($saleOn = (bool) old('on_sale', $product && $product->discount_percent))
        <div x-data="{ on: {{ $saleOn ? 'true' : 'false' }}, pct: {{ (int) old('discount_percent', $product?->discount_percent ?: 0) }}, price: {{ (float) old('price', $product?->price ?: 0) }} }"
             class="rounded-[var(--radius-md)] border border-[var(--color-line)] bg-[#F9FAFB] p-4">
            <label class="flex items-center gap-2">
                <input type="checkbox" name="on_sale" value="1" x-model="on">
                <span class="text-sm font-bold text-[var(--color-ink)]">Участвует в акции «Deals of the day»</span>
            </label>
            <div x-show="on" x-cloak class="mt-3 grid gap-4 sm:grid-cols-3">
                <label class="block"><span class="{{ $lbl }}">Скидка, %</span>
                    <input name="discount_percent" type="number" min="1" max="99" x-model.number="pct" value="{{ old('discount_percent', $product?->discount_percent) }}" class="{{ $input }}">
                    @error('discount_percent')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
                </label>
                <label class="block"><span class="{{ $lbl }}">Начало</span>
                    <input name="sale_starts_at" type="datetime-local" value="{{ old('sale_starts_at', $product?->sale_starts_at?->format('Y-m-d\TH:i')) }}" class="{{ $input }}">
                </label>
                <label class="block"><span class="{{ $lbl }}">Окончание</span>
                    <input name="sale_ends_at" type="datetime-local" value="{{ old('sale_ends_at', $product?->sale_ends_at?->format('Y-m-d\TH:i')) }}" class="{{ $input }}">
                    @error('sale_ends_at')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
                </label>
            </div>
            <p x-show="on && pct > 0" x-cloak class="mt-2 text-sm text-[var(--color-slate)]">
                Цена по акции:
                <span class="font-bold text-[var(--color-sale)]" x-text="new Intl.NumberFormat('ru-RU').format(Math.round(price * (1 - pct/100))) + ' ₽'"></span>
            </p>
        </div>

        <label class="block"><span class="{{ $lbl }}">Описание</span>
            <textarea name="description" rows="5" class="{{ $input }}">{{ old('description', $product?->description) }}</textarea>
        </label>

        @if ($product?->hasAiDescription())
            <label class="block">
                <span class="{{ $lbl }}">Уникальное описание (AI)</span>
                <span class="mb-1 block text-xs text-[var(--color-muted)]">Показывается на карточке вместо обычного. Можно отредактировать; очистите поле, чтобы вернуть исходное описание.</span>
                <textarea name="ai_description" rows="6" class="{{ $input }}">{{ old('ai_description', $product?->ai_description) }}</textarea>
            </label>
        @endif

        <div class="grid gap-4 sm:grid-cols-3">
            <label class="block"><span class="{{ $lbl }}">Бренд</span><input name="vendor" value="{{ old('vendor', $product?->vendor) }}" class="{{ $input }}"></label>
            <label class="block"><span class="{{ $lbl }}">Артикул</span><input name="vendor_code" value="{{ old('vendor_code', $product?->vendor_code) }}" class="{{ $input }}"></label>
            <label class="block"><span class="{{ $lbl }}">Штрихкод</span><input name="barcode" value="{{ old('barcode', $product?->barcode) }}" class="{{ $input }}"></label>
        </div>

        {{-- Characteristics (repeatable) --}}
        <div x-data="{ items: @js($initChars) }">
            <span class="{{ $lbl }}">Характеристики</span>
            <template x-for="(item, i) in items" :key="i">
                <div class="mb-2 grid grid-cols-[1fr_1fr_auto] gap-2">
                    <input :name="`characteristics[${i}][name]`" x-model="item.name" placeholder="Название" class="{{ $input }}">
                    <input :name="`characteristics[${i}][value]`" x-model="item.value" placeholder="Значение" class="{{ $input }}">
                    <button type="button" @click="items.splice(i, 1)" class="px-2 text-[var(--color-muted)] hover:text-[var(--color-sale)]"><i data-lucide="trash-2" class="h-4 w-4"></i></button>
                </div>
            </template>
            <button type="button" @click="items.push({name:'',value:'',unit:''}); $nextTick(() => window.dispatchEvent(new Event('teeu:icons')))" class="text-sm font-semibold text-[var(--color-primary)]">+ Добавить характеристику</button>
        </div>

        {{-- Images --}}
        <div>
            <span class="{{ $lbl }}">Фотографии (до 10)</span>
            @if ($product && $product->images->isNotEmpty())
                <div class="mb-3 flex flex-wrap gap-3">
                    @foreach ($product->images as $image)
                        <label class="relative block">
                            <img src="{{ $image->previewUrl() }}" class="h-20 w-20 rounded-[var(--radius-sm)] bg-white object-contain" alt="">
                            <span class="mt-1 flex items-center gap-1 text-xs text-[var(--color-muted)]">
                                <input type="checkbox" name="delete_images[]" value="{{ $image->id }}"> удалить
                            </span>
                        </label>
                    @endforeach
                </div>
            @endif
            <input type="file" name="images[]" accept="image/jpeg,image/png,image/webp,image/gif" multiple class="text-sm">
            @error('images.*')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
        </div>

        <button type="submit" class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-6 py-3 text-[15px] font-bold text-white shadow-[var(--shadow-primary)] hover:bg-[var(--color-primary-dark)]">Сохранить</button>
    </form>
</div>
@endsection