<x-layout title="Lauck - Nuevo Producto">
    <x-section-header subtitle="Inventario" title="Nuevo " highlight="Producto" />

    <div class="w-full max-w-4xl mx-auto bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-8 shadow-lg">
        <form action="{{ route('productos.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <!-- Grid Layout -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                
                <!-- Nombre -->
                <div class="md:col-span-4">
                    <x-forms.label for="name" value="Nombre del Producto" />
                    <x-forms.input id="name" name="name" type="text" :value="old('name')" required autofocus placeholder="Ej: Cámara 29 Válvula Auto" :error="$errors->first('name')" />
                </div>
                <!-- proveedor -->
                <div class="md:col-span-2">
                    <x-forms.label for="suppliers_id" value="Proveedor" />
                    <select id="suppliers_id" name="suppliers_id" required class="bg-gray-300 dark:bg-neutral-800 border border-neutral-400 dark:border-neutral-700 dark:text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5">
                        <option value="" disabled selected>Seleccione un proveedor</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}" {{ old('suppliers_id') == $supplier->id ? 'selected' : '' }}>
                                {{ $supplier->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('suppliers_id') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
                <!-- Tipo -->
                <div class="md:col-span-2">
                    <x-forms.label for="type" value="Tipo de Producto" />
                    <select id="type" name="type" class="bg-gray-300 dark:bg-neutral-800 border border-neutral-400 dark:border-neutral-700 dark:text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5">
                        <option value="accessory" {{ old('type') == 'accessory' ? 'selected' : '' }}>Accesorio</option>
                        <option value="bike" {{ old('type') == 'bike' ? 'selected' : '' }}>Bicicleta</option>
                        <option value="clothing" {{ old('type') == 'clothing' ? 'selected' : '' }}>Indumentaria</option>
                        <option value="spare" {{ old('type') == 'spare' ? 'selected' : '' }}>Repuesto</option>
                    </select>
                </div>
                <!-- Precios -->
                <div class="">
                    <x-forms.label for="price" value="Precio Venta ($)" />
                    <x-forms.input id="price" name="price" type="number" step="0.01" :value="old('price')" required :error="$errors->first('price')" />
                </div>
                <div class="">
                    <x-forms.label for="cost" value="Costo ($) - Solo Admin" />
                    <x-forms.input id="cost" name="cost" type="number" step="0.01" :value="old('cost')" :error="$errors->first('cost')" />
                </div>
                <!-- Stock -->
                <div class="">
                    <x-forms.label for="stock_quantity" value="Cantidad Inicial" />
                    <x-forms.input id="stock_quantity" name="stock_quantity" type="number" :value="old('stock_quantity', 0)" required :error="$errors->first('stock_quantity')" />
                </div>
                <div class="">
                    <x-forms.label for="min_stock_alert" value="Alerta de Stock Mínimo" />
                    <x-forms.input id="min_stock_alert" name="min_stock_alert" type="number" :value="old('min_stock_alert', 5)" required />
                </div>

                <!-- Imagen -->
                <div class="md:col-span-2">
                    <x-forms.label for="image" value="Imagen del Producto" />
                    <x-forms.input type="file" name="image" class="block w-full text-sm dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full 
                        file:border-0 file:text-sm file:font-semibold file:bg-lime-500 dark:file:bg-neon-lime file:text-neutral-900 hover:file:bg-[#b3e600] 
                    " :error="$errors->first('image')"/>
                </div>
            </div>

            <!-- Botones Acción -->
            <div class="flex items-center justify-between md:justify-end space-x-4 border-t border-neutral-400 dark:border-neutral-700 pt-6">
                <a href="{{ route('productos.index') }}" class="px-4 py-2.5 text-red-500 border border-red-500 hover:bg-red-500 hover:text-white rounded-lg font-semibold text-sm transition-colors">Cancelar</a>
                <button type="submit" class="px-6 py-2.5 bg-neutral-900 dark:bg-neon-lime text-neon-lime dark:text-neutral-900 font-bold rounded-lg hover:bg-neutral-800 hover:dark:bg-[#b3e600] transition-colors shadow-lg dark:shadow-neon-lime/20">
                    Guardar
                </button>
            </div>
        </form>
    </div>
</x-layout>