@php
    $editing = $part->exists;
    $input = 'mt-1 block w-full min-h-12 text-base border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-lg shadow-sm';
    $section = 'rounded-xl bg-white p-4 shadow-sm sm:p-6 space-y-4';
    $heading = 'text-lg font-semibold text-gray-900';
    $categoryId = old('part_category_id', $part->part_category_id);
@endphp

<x-app-layout :title="$editing ? 'Edit '.$part->name : 'Add product'">
    <x-slot name="header">
        <a href="{{ $editing ? route('parts.show', $part) : route('parts.index') }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; {{ $editing ? $part->name : 'Parts' }}</a>
        <h1 class="text-xl font-semibold text-gray-900">{{ $editing ? 'Edit product' : ($part->parent_id ? 'Add variant' : 'Add product') }}</h1>
    </x-slot>

    <form method="POST" action="{{ $editing ? route('parts.update', $part) : route('parts.store') }}" enctype="multipart/form-data" novalidate
          x-data="partForm(@js(['models' => $models, 'selected' => $selectedModels, 'skuPreviews' => $skuPreviews, 'categoryId' => (string) $categoryId, 'subcategories' => $subcategories, 'subcategoryId' => (string) old('part_subcategory_id', $part->part_subcategory_id), 'categoryNames' => $categories->pluck('name', 'id')]))"
          @submit="saving = true"
          class="max-w-3xl mx-auto px-4 py-6 sm:px-6 lg:px-8 space-y-5">
        @csrf
        @if ($editing) @method('PUT') @endif

        @if ($errors->any())
            <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">
                Please fix the {{ $errors->count() === 1 ? 'error' : $errors->count().' errors' }} below.
            </div>
        @endif

        {{-- ========== Product ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}">Product</h2>

            <div>
                <div class="flex items-end justify-between gap-2">
                    <x-input-label for="name" value="Product name" />
                    <button type="button" @click="suggestName()" class="text-sm font-semibold text-indigo-700 underline">Suggest from model + category</button>
                </div>
                <input id="name" name="name" type="text" maxlength="200" required autocomplete="off" class="{{ $input }}" x-ref="name"
                       placeholder="e.g. iPhone 13 Display OLED" value="{{ old('name', $part->name) }}">
                <p class="mt-1 text-sm text-gray-500">Short: model + key part + type, e.g. "iPhone 13 Display OLED".</p>
                <x-input-error :messages="$errors->get('name')" class="mt-2" />
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <x-input-label for="part_category_id" value="Category" />
                    <select id="part_category_id" name="part_category_id" required class="{{ $input }}" x-model="categoryId" @change="subcategoryId = ''">
                        <option value="">Choose…</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}" @selected((string) $categoryId === (string) $category->id)>{{ $category->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error :messages="$errors->get('part_category_id')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="part_subcategory_id" value="Sub-category (optional)" />
                    <select id="part_subcategory_id" name="part_subcategory_id" class="{{ $input }}" x-model="subcategoryId" :disabled="!subsForCategory.length">
                        <option value="">None</option>
                        <template x-for="sub in subsForCategory" :key="sub.id">
                            <option :value="sub.id" x-text="sub.n" :selected="String(sub.id) === String(subcategoryId)"></option>
                        </template>
                    </select>
                    <p class="mt-1 text-sm text-gray-500" x-show="categoryId && !subsForCategory.length">No sub-categories. Add them on the category page.</p>
                    <x-input-error :messages="$errors->get('part_subcategory_id')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="brand_id" value="Brand (optional)" />
                    <select id="brand_id" name="brand_id" class="{{ $input }}">
                        <option value="">Not set</option>
                        @foreach ($brands as $brand)
                            <option value="{{ $brand->id }}" @selected((string) old('brand_id', $part->brand_id) === (string) $brand->id)>{{ $brand->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error :messages="$errors->get('brand_id')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="unit" value="Unit" />
                    <select id="unit" name="unit" class="{{ $input }}">
                        @foreach ($units as $unit)
                            <option value="{{ $unit->value }}" @selected(old('unit', $part->unit?->value ?? 'pcs') === $unit->value)>{{ $unit->label() }}</option>
                        @endforeach
                    </select>
                    <x-input-error :messages="$errors->get('unit')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="grade" value="Quality" />
                    <select id="grade" name="grade" class="{{ $input }}">
                        <option value="">Not set</option>
                        @foreach ($grades as $grade)
                            <option value="{{ $grade->value }}" @selected(old('grade', $part->grade?->value) === $grade->value)>{{ $grade->label() }}</option>
                        @endforeach
                    </select>
                    <x-input-error :messages="$errors->get('grade')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="sku" value="SKU (our code)" />
                    <input id="sku" name="sku" type="text" maxlength="50" autocomplete="off" class="{{ $input }} font-mono uppercase"
                           value="{{ old('sku', $part->sku) }}"
                           :placeholder="skuPreviews[categoryId] ? 'Auto: ' + skuPreviews[categoryId] : 'Made automatically'">
                    <p class="mt-1 text-sm text-gray-500">
                        {{ $editing ? 'You can change it. Must be different from other parts.' : 'Leave empty to make one automatically.' }}
                    </p>
                    <x-input-error :messages="$errors->get('sku')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="barcode" value="Barcode (optional)" />
                    <input id="barcode" name="barcode" type="text" maxlength="100" autocomplete="off" inputmode="text" class="{{ $input }} font-mono"
                           value="{{ old('barcode', $part->barcode) }}" placeholder="Scan or type">
                    <x-input-error :messages="$errors->get('barcode')" class="mt-2" />
                </div>
            </div>

            {{-- Variant of another product --}}
            <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 space-y-3">
                <p class="text-sm text-gray-600">
                    <strong>Variant</strong> (optional): the same product in another colour or version. Each variant is its own product with its own code and stock.
                </p>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <x-input-label for="parent_code" value="Main product code" />
                        <input id="parent_code" name="parent_code" type="text" maxlength="50" autocomplete="off" class="{{ $input }} font-mono uppercase"
                               placeholder="e.g. DSP-00012" value="{{ old('parent_code', $part->parent?->sku) }}">
                        @if ($part->parent)
                            <p class="mt-1 text-sm text-gray-500">Variant of {{ $part->parent->name }}</p>
                        @endif
                        <x-input-error :messages="array_merge($errors->get('parent_code'), $errors->get('parent_id'))" class="mt-2" />
                    </div>
                    <div>
                        <x-input-label for="variant_name" value="Variant (e.g. Black, With frame)" />
                        <input id="variant_name" name="variant_name" type="text" maxlength="100" autocomplete="off" class="{{ $input }}"
                               value="{{ old('variant_name', $part->variant_name) }}">
                        <x-input-error :messages="$errors->get('variant_name')" class="mt-2" />
                    </div>
                </div>
            </div>
        </section>

        {{-- ========== Prices and stock ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}">Prices and stock</h2>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <x-input-label for="cost_price" value="Cost price (Rs.)" />
                    <input id="cost_price" name="cost_price" type="number" step="0.01" min="0" inputmode="decimal" class="{{ $input }}"
                           placeholder="0.00" value="{{ old('cost_price', $editing ? $part->cost_price : '') }}">
                    <p class="mt-1 text-sm text-gray-500">Only admin sees this. Updated to the average when stock is bought.</p>
                    <x-input-error :messages="$errors->get('cost_price')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="selling_price" value="Retail price (Rs.)" />
                    <input id="selling_price" name="selling_price" type="number" step="0.01" min="0" inputmode="decimal" class="{{ $input }}"
                           placeholder="0.00" value="{{ old('selling_price', $part->exists || $part->parent_id ? $part->selling_price : '') }}">
                    <x-input-error :messages="$errors->get('selling_price')" class="mt-2" />
                </div>

                @foreach ($levels as $level)
                    <div>
                        <x-input-label for="price_{{ $level->id }}" :value="$level->name.' price (Rs.)'" />
                        <input id="price_{{ $level->id }}" name="prices[{{ $level->id }}]" type="number" step="0.01" min="0" inputmode="decimal" class="{{ $input }}"
                               placeholder="Same as Retail" value="{{ old('prices.'.$level->id, $levelPrices[$level->id] ?? '') }}">
                        <x-input-error :messages="$errors->get('prices.'.$level->id)" class="mt-2" />
                    </div>
                @endforeach

                <div>
                    <x-input-label for="min_selling_price" value="Minimum selling price (Rs., optional)" />
                    <input id="min_selling_price" name="min_selling_price" type="number" step="0.01" min="0" inputmode="decimal" class="{{ $input }}"
                           placeholder="No minimum" value="{{ old('min_selling_price', $part->min_selling_price) }}">
                    <p class="mt-1 text-sm text-gray-500">Staff cannot sell or invoice below this. Only an admin can.</p>
                    <x-input-error :messages="$errors->get('min_selling_price')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="tax_category" value="Tax category" />
                    <select id="tax_category" name="tax_category" class="{{ $input }}">
                        @foreach ($taxCategories as $tax)
                            <option value="{{ $tax->value }}" @selected(old('tax_category', $part->tax_category?->value ?? 'standard') === $tax->value)>{{ $tax->label() }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-sm text-gray-500">Used when VAT is turned on.</p>
                    <x-input-error :messages="$errors->get('tax_category')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="min_stock" value="Reorder level" />
                    <input id="min_stock" name="min_stock" type="number" step="1" min="0" inputmode="numeric" class="{{ $input }}"
                           placeholder="0" value="{{ old('min_stock', $part->exists ? $part->min_stock : '') }}">
                    <p class="mt-1 text-sm text-gray-500">Low stock warning at this quantity. 0 = no warning.</p>
                    <x-input-error :messages="$errors->get('min_stock')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="warranty_days" value="Warranty (days)" />
                    <input id="warranty_days" name="warranty_days" type="number" step="1" min="0" max="3650" inputmode="numeric" class="{{ $input }}"
                           placeholder="Settings default ({{ setting('warranty_days_parts') }})" value="{{ old('warranty_days', $part->warranty_days) }}">
                    <x-input-error :messages="$errors->get('warranty_days')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="location" value="Shelf / bin" />
                    <input id="location" name="location" type="text" maxlength="50" autocomplete="off" class="{{ $input }} uppercase"
                           placeholder="e.g. A3-02" value="{{ old('location', $part->location) }}">
                    <x-input-error :messages="$errors->get('location')" class="mt-2" />
                </div>

                @unless ($editing)
                    <div>
                        <x-input-label for="opening_stock" value="Stock you have now (optional)" />
                        <input id="opening_stock" name="opening_stock" type="number" step="1" min="0" inputmode="numeric" class="{{ $input }}"
                               placeholder="0" value="{{ old('opening_stock') }}">
                        <p class="mt-1 text-sm text-gray-500">Saved as "Opening stock" at your branch, at the cost price above.</p>
                        <x-input-error :messages="$errors->get('opening_stock')" class="mt-2" />
                    </div>
                @endunless
            </div>
        </section>

        {{-- ========== Compatible models ========== --}}
        <section class="{{ $section }}">
            <div>
                <h2 class="{{ $heading }}">Fits these models</h2>
                <p class="text-sm text-gray-500">One part can fit several models, e.g. the same screen for two phones.</p>
            </div>

            <template x-for="id in selected" :key="id">
                <input type="hidden" name="device_model_ids[]" :value="id">
            </template>

            {{-- Chosen --}}
            <div class="flex flex-wrap gap-2" x-show="selected.length">
                <template x-for="id in selected" :key="id">
                    <span class="inline-flex min-h-9 items-center gap-1 rounded-full bg-indigo-50 pl-3 pr-1 text-sm font-medium text-indigo-800">
                        <span x-text="label(id)"></span>
                        <button type="button" @click="toggle(id)" class="flex h-7 w-7 items-center justify-center rounded-full hover:bg-indigo-100" :title="'Remove ' + label(id)">
                            <x-icon name="close" class="h-4 w-4" />
                        </button>
                    </span>
                </template>
            </div>
            <p class="text-sm text-gray-500" x-show="!selected.length">No models chosen yet.</p>

            {{-- Search and add --}}
            <div>
                <x-input-label for="model_search" value="Add a model" />
                <input id="model_search" type="search" autocomplete="off" class="{{ $input }}" placeholder="Type to search, e.g. iPhone 13"
                       x-model="query" @keydown.enter.prevent="matches.length && toggle(matches[0].id)">
                <ul class="mt-2 max-h-64 divide-y divide-gray-100 overflow-y-auto rounded-lg border border-gray-200" x-show="query.trim().length" x-cloak>
                    <template x-for="m in matches" :key="m.id">
                        <li>
                            <button type="button" @click="toggle(m.id)" class="flex min-h-12 w-full items-center justify-between gap-3 px-3 text-left hover:bg-gray-50">
                                <span>
                                    <span class="font-medium text-gray-900" x-text="m.label"></span>
                                    <span class="text-sm text-gray-500" x-text="m.type ? '· ' + m.type : ''"></span>
                                </span>
                                <span class="text-sm font-semibold" :class="selected.includes(m.id) ? 'text-red-700' : 'text-indigo-700'"
                                      x-text="selected.includes(m.id) ? 'Remove' : 'Add'"></span>
                            </button>
                        </li>
                    </template>
                    <li x-show="!matches.length" class="px-3 py-3 text-sm text-gray-500">
                        No model found. Admin can add models under Devices.
                    </li>
                </ul>
            </div>
            <x-input-error :messages="collect($errors->get('device_model_ids'))->merge(collect($errors->get('device_model_ids.*'))->flatten())->unique()->all()" class="mt-2" />
        </section>

        {{-- ========== Photo and notes ========== --}}
        <section class="{{ $section }}">
            <h2 class="{{ $heading }}">Photo and notes</h2>

            <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
                @if ($part->photo_path)
                    <div class="shrink-0">
                        <img src="{{ $part->photoUrl(thumb: true) }}" alt="" class="h-28 w-28 rounded-lg object-cover">
                        <label class="mt-2 flex items-center gap-2 text-sm text-gray-700">
                            <input type="checkbox" name="remove_photo" value="1" class="h-5 w-5 rounded border-gray-300 text-red-600">
                            Remove photo
                        </label>
                    </div>
                @endif
                <div class="flex-1">
                    <x-input-label for="photo" :value="$part->photo_path ? 'Change photo' : 'Photo (optional)'" />
                    <input id="photo" name="photo" type="file" accept="image/*"
                           class="mt-1 block w-full text-sm text-gray-700 file:mr-3 file:min-h-11 file:rounded-lg file:border-0 file:bg-gray-800 file:px-4 file:font-semibold file:text-white">
                    <p class="mt-1 text-sm text-gray-500">Resized to 800px and kept private.</p>
                    <x-input-error :messages="$errors->get('photo')" class="mt-2" />
                </div>
            </div>

            <div>
                <x-input-label for="notes" value="Notes" />
                <textarea id="notes" name="notes" rows="3" maxlength="2000" class="{{ $input }}"
                          placeholder="e.g. Check True Tone after fitting">{{ old('notes', $part->notes) }}</textarea>
                <x-input-error :messages="$errors->get('notes')" class="mt-2" />
            </div>

            <label class="flex min-h-11 items-center gap-3">
                <input type="hidden" name="is_serialized" value="0">
                <input type="checkbox" name="is_serialized" value="1" @checked(old('is_serialized', $part->is_serialized))
                       class="h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                <span>
                    <span class="font-medium text-gray-900">Serialized</span>
                    <span class="block text-sm text-gray-500">Each unit gets its own code ({{ \App\Support\UnitCode::prefix() }}-{{ now()->format('y') }}-000123) when received, and must be scanned when used or sold. Turning this on gives codes to the stock you have now.</span>
                </span>
            </label>
            <x-input-error :messages="$errors->get('is_serialized')" />


            <label class="flex min-h-11 items-center gap-3">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $part->is_active ?? true))
                       class="h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                <span>
                    <span class="font-medium text-gray-900">In use</span>
                    <span class="block text-sm text-gray-500">Turn off for parts you no longer sell. Their history is kept.</span>
                </span>
            </label>
        </section>

        <div class="sticky bottom-20 z-10 lg:bottom-4">
            <button type="submit" class="w-full min-h-14 rounded-xl bg-indigo-600 text-lg font-semibold text-white shadow-lg hover:bg-indigo-500 disabled:opacity-70"
                    x-bind:disabled="saving">
                <span x-show="!saving">{{ $editing ? 'Save product' : 'Add product' }}</span>
                <span x-show="saving" x-cloak>Saving…</span>
            </button>
        </div>
    </form>

    <script>
        function partForm(config) {
            const byId = new Map(config.models.map(m => [m.id, m]));
            return {
                models: config.models,
                selected: config.selected.filter(id => byId.has(id)),
                skuPreviews: config.skuPreviews,
                categoryId: config.categoryId || '',
                subcategoryId: config.subcategoryId || '',
                get subsForCategory() { return config.subcategories.filter(s => String(s.c) === String(this.categoryId)); },
                // "iPhone 13 Display OLED": first chosen model (without the brand) + category + sub-category.
                suggestName() {
                    const m = byId.get(this.selected[0]);
                    const model = m ? m.label.replace(/^\S+\s+/, '') : '';
                    const sub = config.subcategories.find(s => String(s.id) === String(this.subcategoryId));
                    const name = [model, config.categoryNames[this.categoryId] || '', sub ? sub.n : ''].filter(Boolean).join(' ');
                    if (name) this.$refs.name.value = name;
                },
                query: '',
                saving: false,
                label(id) { return byId.get(id)?.label ?? ''; },
                toggle(id) {
                    this.selected = this.selected.includes(id)
                        ? this.selected.filter(x => x !== id)
                        : [...this.selected, id];
                },
                // Every word must appear: "13 pro" finds "Apple iPhone 13 Pro".
                get matches() {
                    const words = this.query.toLowerCase().split(/\s+/).filter(Boolean);
                    if (!words.length) return [];
                    return this.models
                        .filter(m => { const t = (m.label + ' ' + (m.type || '')).toLowerCase(); return words.every(w => t.includes(w)); })
                        .slice(0, 30);
                },
            };
        }
    </script>
</x-app-layout>