<x-layout title="Lauck - Nuevo Proveedor">
    <x-section-header subtitle="Gestión de Proveedores" title="Nuevo " highlight="Proveedor" />

    <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('suppliers.store') }}" method="POST">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                
                <div class="md:col-span-4">
                    <x-forms.label for="name" value="Nombre de la Empresa o Contacto" />
                    <x-forms.input id="name" name="name" type="text" :value="old('name')" required autofocus placeholder="Ej: Distribuidora Shimano Arg" :error="$errors->first('name')" />
                </div>
                
                <div class="md:col-span-2">
                    <x-forms.label for="phone" value="Teléfono / WhatsApp" />
                    <x-forms.input id="phone" name="phone" type="text" :value="old('phone')" placeholder="Ej: 011 4545..." :error="$errors->first('phone')" />
                </div>
                
                <div class="md:col-span-2">
                    <x-forms.label for="email" value="Correo Electrónico" />
                    <x-forms.input id="email" name="email" type="email" :value="old('email')" placeholder="ventas@proveedor.com" :error="$errors->first('email')" />
                </div>
                
                <div class="md:col-span-4">
                    <x-forms.label for="address" value="Dirección / Domicilio / Depósito" />
                    <textarea id="address" name="address" rows="3" 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 placeholder-neutral-600 dark:placeholder-gray-400" placeholder="Calle, número, galpón, ciudad...">{{ old('address') }}</textarea>
                    @error('address') 
                        <span class="text-red-500 text-xs mt-1">{{ $message }}</span> 
                    @enderror
                </div>
            </div>

            <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('suppliers.index') }}" class="text-gray-700 dark:text-gray-400 hover:text-black hover:dark:text-white font-medium 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 Proveedor
                </button>
            </div>

        </form>
    </div>
</x-layout>