@extends('layouts.app')
@section('title', $product->exists ? 'Edit Product' : 'New Product')

@php
    $restaurantDepartmentId = $departments->firstWhere('slug', 'restaurant')?->id;
    $barDepartmentId = $departments->firstWhere('slug', 'bar')?->id;
    $restaurantSections = $sections->where('type', 'restaurant')->values();
    $barSections = $sections->where('type', 'bar')->values();
    $restaurantCategories = $categories->where('department_id', $restaurantDepartmentId)->values();
    $barCategories = $categories->where('department_id', $barDepartmentId)->values();
@endphp

@section('content')
<div class="max-w-3xl space-y-6" x-data="productForm({
    departmentId: '{{ old('department_id', $product->department_id) }}',
    restaurantId: '{{ $restaurantDepartmentId }}',
    barId: '{{ $barDepartmentId }}',
    sectionId: '{{ old('section_id', $product->section_id) }}',
    categoryId: '{{ old('category_id', $product->category_id) }}'
})">
    <div>
        <h1 class="text-xl font-bold">{{ $product->exists ? 'Edit product' : 'New Product' }}</h1>
        <p class="text-sm text-ink-muted">Choose the department first. Restaurant and Bar are separate departments, and each can have many sections.</p>
    </div>

    <form method="POST" enctype="multipart/form-data" action="{{ $product->exists ? route('inventory.products.update', $product) : route('inventory.products.store') }}" class="card card-pad space-y-5">
        @csrf
        @if ($product->exists) @method('PUT') @endif

        <div class="rounded-lg border border-primary-200 bg-primary-50 p-3 text-sm text-ink-muted">
            <strong>{{ \App\Models\Department::nameFor('restaurant', 'Restaurant') }}:</strong> menu item — enter selling price only; stock, buying cost and reorder control come from ingredients/recipes.<br>
            <strong>{{ \App\Models\Department::nameFor('bar', 'Bar') }}:</strong> stocked product — enter buying price, selling price and opening quantity.
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="field-label">Product name</label>
                <input type="text" name="name" value="{{ old('name', $product->name) }}" class="input" required>
            </div>
            <div>
                <label class="field-label">SKU</label>
                <input type="text" name="sku" value="{{ old('sku', $product->sku) }}" class="input">
                <p class="text-xs text-ink-faint mt-1">Optional.</p>
            </div>
        </div>

        <div class="grid sm:grid-cols-3 gap-4">
            <div>
                <label class="field-label">Department</label>
                <select name="department_id" class="input" x-model="departmentId" @change="departmentChanged()" required>
                    <option value="">Select department…</option>
                    @foreach ($departments as $dept)
                        @if (in_array($dept->slug, ['restaurant', 'bar'], true))
                            <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                        @endif
                    @endforeach
                </select>
            </div>
            <div>
                <div class="flex items-center justify-between"><label class="field-label">Category</label><a href="{{ route('inventory.categories.index') }}" class="text-xs text-primary-600 font-semibold hover:underline">Manage categories</a></div>
                {{-- Keep separate native selects instead of <template x-if> inside <select>.
                     Some browsers silently discard/rearrange template children of a native
                     select, which caused only one category to appear. --}}
                <select name="category_id" class="input" x-model="categoryId" x-show="isRestaurant" x-bind:disabled="!isRestaurant" x-cloak>
                    <option value="">—</option>
                    @foreach ($restaurantCategories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
                <select name="category_id" class="input" x-model="categoryId" x-show="isBar" x-bind:disabled="!isBar" x-cloak>
                    <option value="">—</option>
                    @foreach ($barCategories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div x-show="isBar" x-cloak>
                <label class="field-label">Unit</label>
                <select name="unit_id" class="input" x-bind:disabled="!isBar">
                    <option value="">—</option>
                    @foreach ($units as $unit)
                        <option value="{{ $unit->id }}" @selected(old('unit_id', $product->unit_id) == $unit->id)>{{ $unit->name }} ({{ $unit->abbreviation }})</option>
                    @endforeach
                </select>
            </div>
            
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="field-label">Section</label>
                <select name="section_id" class="input" x-model="sectionId">
                    <option value="">— Main/default section</option>
                    @foreach ($restaurantSections as $section)
                        <option x-show="isRestaurant" value="{{ $section->id }}">{{ $section->name }}</option>
                    @endforeach
                    @foreach ($barSections as $section)
                        <option x-show="isBar" value="{{ $section->id }}">{{ $section->name }}</option>
                    @endforeach
                </select>
                <p class="text-xs text-ink-faint mt-1">Restaurant products use Restaurant sections. Bar products use Bar sections.</p>
            </div>
            <div>
                <label class="field-label">Product image</label>
                <input type="file" name="image" accept="image/*" class="input">
                @if ($product->image_path)
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($product->image_path) }}" class="mt-2 h-16 w-16 rounded-lg object-cover" alt="">
                @endif
            </div>
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="field-label">Selling price</label>
                <input type="number" step="0.01" min="0" name="selling_price" value="{{ old('selling_price', $product->selling_price) }}" class="input" required>
            </div>
            <div x-show="isBar" x-cloak>
                <label class="field-label">Buying price</label>
                <input type="number" step="0.01" min="0" name="cost_price" value="{{ old('cost_price', $product->cost_price) }}" class="input" x-bind:disabled="!isBar">
            </div>
            <input x-show="isRestaurant" x-cloak type="hidden" name="cost_price" value="0">
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="field-label">Tax type</label>
                <select name="tax_type" class="input">
                    <option value="vatable" @selected(old('tax_type', $product->tax_type?->value) == 'vatable')>VAT Applicable</option>
                    <option value="zero_rated" @selected(old('tax_type', $product->tax_type?->value) == 'zero_rated')>Zero-Rated</option>
                    <option value="exempt" @selected(old('tax_type', $product->tax_type?->value) == 'exempt')>Exempt</option>
                </select>
            </div>
            <div x-show="isRestaurant" x-cloak>
                <label class="field-label">Kitchen station</label>
                <input type="text" name="kitchen_station" value="{{ old('kitchen_station', $product->kitchen_station) }}" class="input" placeholder="e.g. Grill, Bakery">
            </div>
        </div>

        <div class="flex flex-wrap gap-6 pt-1">
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="levy_applicable" value="1" @checked(old('levy_applicable', $product->levy_applicable)) class="rounded border-border text-primary-500 focus:ring-primary-200">
                Levy applicable
            </label>
            <label x-show="isRestaurant" x-cloak class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="has_recipe" value="1" @checked(old('has_recipe', $product->has_recipe)) class="rounded border-border text-primary-500 focus:ring-primary-200">
                Has recipe (deduct ingredients automatically)
            </label>
            <label x-show="isRestaurant" x-cloak class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="is_direct_sale" value="1" @checked(old('is_direct_sale', $product->is_direct_sale)) class="rounded border-border text-primary-500 focus:ring-primary-200">
                Direct sale
            </label>
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $product->is_active ?? true)) class="rounded border-border text-primary-500 focus:ring-primary-200">
                Active
            </label>
            <input type="hidden" name="track_stock" value="0" x-show="isRestaurant">
            <input type="hidden" name="track_stock" value="1" x-show="isBar">
        </div>

        <div x-show="isBar" x-cloak class="space-y-4">
            <div class="rounded-lg border border-primary-200 bg-primary-50 p-3 text-sm text-ink-muted">
                <strong>{{ \App\Models\Department::nameFor('bar', 'Bar') }} stock:</strong> enter the buying price, selling price and opening quantity. The quantity is tracked as normal product stock.
            </div>
            <div>
                <label class="field-label">Opening quantity</label>
                <input type="number" step="0.01" min="0" name="opening_stock" value="{{ old('opening_stock', '') }}" class="input">
                @if ($product->exists)<p class="text-xs text-ink-faint mt-1">For later stock changes, use Stock → Opening stock / adjustments.</p>@endif
            </div>
            <div>
                <label class="field-label">Low-stock alert quantity</label>
                <input type="number" step="0.01" min="0" name="reorder_level" value="{{ old('reorder_level', $product->reorder_level ?? 0) }}" class="input">
                <p class="text-xs text-ink-faint mt-1">Show this item in low-stock alerts when available stock reaches this level.</p>
            </div>
            <div>
                <label class="field-label">Opening stock store</label>
                <select name="opening_stock_store_id" class="input">
                    <option value="">Select store…</option>
                    @foreach ($stores as $store)
                        <option value="{{ $store->id }}">{{ $store->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div x-show="isRestaurant" x-cloak class="rounded-lg border border-success/30 bg-success/5 p-3 text-sm text-ink-muted">
            <strong>{{ \App\Models\Department::nameFor('restaurant', 'Restaurant') }} menu item:</strong> no stock quantity, buying price or reorder level is required here. The recipe consumes ingredient stock automatically when the item is sold/produced.
        </div>

        <div class="flex justify-end gap-2 pt-2 border-t border-border">
            <a href="{{ route('inventory.products.index') }}" class="btn-secondary">Cancel</a>
            <button type="submit" class="btn-primary">Save product</button>
        </div>
    </form>
</div>

<script>
function productForm(initial) {
    return {
        ...initial,
        get isRestaurant() { return String(this.departmentId) === String(this.restaurantId) },
        get isBar() { return String(this.departmentId) === String(this.barId) },
        departmentChanged() {
            const validSection = this.isRestaurant
                ? @json($restaurantSections->pluck('id')->map(fn($id) => (string) $id)->values())
                : @json($barSections->pluck('id')->map(fn($id) => (string) $id)->values());
            const validCategory = this.isRestaurant
                ? @json($restaurantCategories->pluck('id')->map(fn($id) => (string) $id)->values())
                : @json($barCategories->pluck('id')->map(fn($id) => (string) $id)->values());
            if (!validSection.includes(String(this.sectionId))) this.sectionId = '';
            if (!validCategory.includes(String(this.categoryId))) this.categoryId = '';
        }
    }
}
</script>
@endsection