@props([
    'item' => null,
    'action',
    'method' => 'POST',
])

<form method="POST" action="{{ $action }}" class="space-y-6">
    @csrf
    @if($method !== 'POST')
        @method($method)
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="md:col-span-2">
            <x-form.label for="name" value="Nome do suprimento" />
            <x-form.input id="name" name="name" value="{{ old('name', $item?->name) }}" required />
            <x-form.error name="name" />
        </div>

        <div>
            <x-form.label for="unit" value="Unidade (ex.: un, cx, fardo, lt)" />
            @php
                $unitOptions = [
                    'un' => 'Unidade (un)',
                    'pct' => 'Pacote (pct)',
                    'cx' => 'Caixa (cx)',
                    'fardo' => 'Fardo',
                    'kit' => 'Kit',
                    'garrafa' => 'Garrafa',
                    'lata' => 'Lata',
                ];
            @endphp
            <select id="unit" name="unit" required
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                <option value="">Selecione…</option>
                @foreach($unitOptions as $value => $label)
                    <option value="{{ $value }}" @selected(old('unit', $item?->unit) === $value)>{{ $label }}</option>
                @endforeach
            </select>
            <x-form.error name="unit" />
        </div>

        @if(! $item)
            <div>
                <x-form.label for="current_stock" value="Estoque inicial" />
                <input type="number" step="1" min="0" id="current_stock" name="current_stock"
                       value="{{ old('current_stock', 0) }}"
                       class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40" />
                <x-form.error name="current_stock" />
            </div>
        @else
            <div>
                <x-form.label for="stock_readonly" value="Estoque atual" />
                <x-form.input id="stock_readonly" name="stock_readonly" value="{{ (int) $item->current_stock }}" readonly />
                <p class="text-xs text-gray-500 mt-1">Para aumentar ou diminuir saldo, registre uma movimentação.</p>
            </div>
        @endif

        <div class="flex items-end pb-2">
            <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                <input type="checkbox" name="is_active" value="1" @checked((bool) old('is_active', $item?->is_active ?? true))
                       class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500" />
                Item ativo
            </label>
            <x-form.error name="is_active" />
        </div>

        <div class="md:col-span-2">
            <x-form.label for="notes" value="Observações" />
            <x-form.textarea id="notes" name="notes" rows="4" :value="old('notes', $item?->notes)" />
            <x-form.error name="notes" />
        </div>
    </div>

    <div class="flex justify-end gap-3">
        <a href="{{ route('operations.supply-items.index') }}" class="text-gray-600 hover:text-gray-900">
            Cancelar
        </a>
        <x-ui.button type="submit">
            {{ $item ? 'Atualizar' : 'Salvar' }}
        </x-ui.button>
    </div>
</form>