@php($editing = $product->exists)
<x-layouts.admin :title="$editing ? 'Edit product' : 'Add product'" :header="$editing ? $product->name : 'Add product'">
    <x-slot:actions><a href="{{ route('admin.products.index') }}" class="btn-light"><x-icon name="arrow-left" class="size-4" /> Back</a></x-slot:actions>
    <form method="POST" action="{{ $editing ? route('admin.products.update', $product) : route('admin.products.store') }}" enctype="multipart/form-data" class="grid gap-6 xl:grid-cols-3"
          x-data="{ division: @js(old('division', $product->division?->value)) }">
        @csrf
        @if ($editing) @method('PUT') @endif
        <div class="space-y-6 xl:col-span-2">
            <x-admin.card title="Product details">
                <div class="grid gap-4 sm:grid-cols-2">
                    <x-form.input name="name" label="Product name" :value="$product->name" required class="sm:col-span-2" />
                    <x-form.input name="price" label="Price ($)" type="number" step="0.01" :value="$product->price" help="Leave empty to show “Request a quote”." />
                    <x-form.input name="compare_at_price" label="Compare-at price ($)" type="number" step="0.01" :value="$product->compare_at_price" help="Optional original price, shown crossed out." />
                    <x-form.input name="sku" label="SKU" :value="$product->sku" />
                    <x-form.input name="stock" label="Stock quantity" type="number" :value="$product->stock" />
                    <x-form.textarea name="short_description" label="Short summary" rows="2" :value="$product->short_description" class="sm:col-span-2" />
                    <x-form.textarea name="description" label="Full description" rows="6" :value="$product->description" class="sm:col-span-2" />
                    <x-form.textarea name="disclaimer" label="Product disclaimer" rows="2" :value="$product->disclaimer" class="sm:col-span-2" help="e.g. FDA statement for wellness products, warranty note for appliances." />
                </div>
            </x-admin.card>
        </div>
        <div class="space-y-6">
            <x-admin.card title="Organization">
                <div class="space-y-4">
                    <div>
                        <label for="division" class="form-label">Division</label>
                        <select id="division" name="division" x-model="division" class="form-input">
                            @foreach ($divisions as $division)<option value="{{ $division->value }}">{{ $division->label() }}</option>@endforeach
                        </select>
                    </div>
                    <div>
                        <label for="category_id" class="form-label">Category</label>
                        <select id="category_id" name="category_id" class="form-input">
                            <option value="">Uncategorized</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" x-show="division === @js($category->division->value)" @selected(old('category_id', $product->category_id) == $category->id)>{{ $category->name }}</option>
                            @endforeach
                        </select>
                        @error('category_id')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <x-form.image name="image" label="Product image" :current="$product->image" />
                    <x-form.checkbox name="is_active" label="Visible on website" :checked="$product->is_active" />
                    <x-form.checkbox name="is_featured" label="Featured" :checked="$product->is_featured" help="Wellness featured products show on the home page." />
                    <button class="btn-gold w-full">{{ $editing ? 'Save changes' : 'Create product' }}</button>
                </div>
            </x-admin.card>
        </div>
    </form>
</x-layouts.admin>