@php
    /**
     * @var \App\Domain\Catalog\Models\Product $product
     * @var \Illuminate\Support\Collection<int, string> $categoryOptions
     * @var \Illuminate\Support\Collection<int, string> $brandOptions
     * @var \Illuminate\Support\Collection<int, string> $unitOptions
     */
@endphp

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="md:col-span-2">
        <x-input-label for="name" :value="__('Name')" />
        <x-text-input
            id="name"
            name="name"
            type="text"
            class="mt-1 block w-full"
            :value="old('name', $product->name)"
            required
            autofocus
        />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="slug" :value="__('Slug')" />
        <x-text-input
            id="slug"
            name="slug"
            type="text"
            class="mt-1 block w-full"
            :value="old('slug', $product->slug)"
            placeholder="{{ __('Leave blank to generate from the name') }}"
        />
        <x-input-error :messages="$errors->get('slug')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="sku" :value="__('SKU')" />
        <x-text-input
            id="sku"
            name="sku"
            type="text"
            class="mt-1 block w-full font-mono"
            :value="old('sku', $product->sku)"
            required
        />
        <x-input-error :messages="$errors->get('sku')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="barcode" :value="__('Barcode')" />
        <x-text-input
            id="barcode"
            name="barcode"
            type="text"
            class="mt-1 block w-full font-mono"
            :value="old('barcode', $product->barcode)"
            placeholder="{{ __('Optional - UPC/EAN or internal code') }}"
        />
        <x-input-error :messages="$errors->get('barcode')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="status" :value="__('Status')" />
        <select
            id="status"
            name="status"
            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
            required
        >
            @foreach (\App\Domain\Catalog\Enums\ProductStatus::cases() as $status)
                <option value="{{ $status->value }}" @selected(old('status', $product->status?->value ?? 'active') === $status->value)>
                    {{ $status->label() }}
                </option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('status')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="category_id" :value="__('Category')" />
        <select
            id="category_id"
            name="category_id"
            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
            required
        >
            <option value="">{{ __('Select a category') }}</option>
            @foreach ($categoryOptions as $id => $name)
                <option value="{{ $id }}" @selected((int) old('category_id', $product->category_id) === $id)>
                    {{ $name }}
                </option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('category_id')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="brand_id" :value="__('Brand')" />
        <select
            id="brand_id"
            name="brand_id"
            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
        >
            <option value="">{{ __('None') }}</option>
            @foreach ($brandOptions as $id => $name)
                <option value="{{ $id }}" @selected((int) old('brand_id', $product->brand_id) === $id)>
                    {{ $name }}
                </option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('brand_id')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="unit_id" :value="__('Unit')" />
        <select
            id="unit_id"
            name="unit_id"
            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
            required
        >
            <option value="">{{ __('Select a unit') }}</option>
            @foreach ($unitOptions as $id => $name)
                <option value="{{ $id }}" @selected((int) old('unit_id', $product->unit_id) === $id)>
                    {{ $name }}
                </option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('unit_id')" class="mt-2" />
    </div>

    <div class="md:col-span-2">
        <x-input-label for="description" :value="__('Description')" />
        <textarea
            id="description"
            name="description"
            rows="3"
            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
        >{{ old('description', $product->description) }}</textarea>
        <x-input-error :messages="$errors->get('description')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="purchase_price" :value="__('Purchase price')" />
        <x-text-input
            id="purchase_price"
            name="purchase_price"
            type="number"
            step="0.01"
            min="0"
            class="mt-1 block w-full"
            :value="old('purchase_price', $product->purchase_price)"
            required
        />
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('The price paid to the supplier for new stock.') }}</p>
        <x-input-error :messages="$errors->get('purchase_price')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="cost" :value="__('Cost')" />
        <x-text-input
            id="cost"
            name="cost"
            type="number"
            step="0.01"
            min="0"
            class="mt-1 block w-full"
            :value="old('cost', $product->cost)"
            required
        />
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('The current costing basis used for margin - may differ from purchase price over time.') }}</p>
        <x-input-error :messages="$errors->get('cost')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="selling_price" :value="__('Selling price')" />
        <x-text-input
            id="selling_price"
            name="selling_price"
            type="number"
            step="0.01"
            min="0"
            class="mt-1 block w-full"
            :value="old('selling_price', $product->selling_price)"
            required
        />
        <x-input-error :messages="$errors->get('selling_price')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="minimum_stock" :value="__('Minimum stock')" />
        <x-text-input
            id="minimum_stock"
            name="minimum_stock"
            type="number"
            min="0"
            class="mt-1 block w-full"
            :value="old('minimum_stock', $product->minimum_stock ?? 0)"
            required
        />
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('Reorder threshold used later for low-stock alerts.') }}</p>
        <x-input-error :messages="$errors->get('minimum_stock')" class="mt-2" />
    </div>

    @if ($product->exists)
        <div class="md:col-span-2 rounded-md bg-gray-50 dark:bg-gray-900/40 px-4 py-3 flex flex-wrap gap-x-8 gap-y-1 text-sm">
            <span class="text-gray-500 dark:text-gray-400">
                {{ __('Margin:') }}
                <span class="font-semibold text-gray-900 dark:text-gray-100 tabular-nums">{{ number_format($product->margin, 2) }}</span>
            </span>
            <span class="text-gray-500 dark:text-gray-400">
                {{ __('Margin %:') }}
                <span class="font-semibold text-gray-900 dark:text-gray-100 tabular-nums">{{ number_format($product->margin_percentage, 2) }}%</span>
            </span>
        </div>
    @endif
</div>