@php
    use function Modules\Core\Settings\Helpers\setting;
@endphp

<div>
    <form wire:submit.prevent="store" class="grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-6">

        {{-- Columna Izquierda --}}
        <div class="flex flex-col gap-6">
            <x-form.input
                label="{{ __('Nombre de contacto principal*') }}"
                error="supplierRequest.name"
                required
                wire:model="supplierRequest.name"
                type="text"
                placeholder="Ingresa el nombre del contacto principal" />

            <x-form.input
                label="{{ __('Tu Correo electrónico*') }}"
                error="supplierRequest.email"
                required
                wire:model="supplierRequest.email"
                type="email"
                placeholder="Ingresa tu dirección de correo electrónico" />

            <x-form.input
                label="{{ __('Ciudad y Estado') }}"
                error="supplierRequest.city"
                wire:model="supplierRequest.city"
                type="text"
                placeholder="Ingresa tu ciudad y estado" />
        </div>

        {{-- Columna Derecha --}}
        <div class="flex flex-col gap-6">
            <x-form.input
                label="{{ __('Empresa / Razón social*') }}"
                error="supplierRequest.company"
                required
                wire:model="supplierRequest.company"
                type="text"
                placeholder="Ingresa el nombre de tu empresa" />

            <x-form.input
                label="{{ __('Teléfono con 10 dígitos*') }}"
                error="supplierRequest.phone"
                required
                wire:model="supplierRequest.phone"
                type="tel"
                placeholder="Ingresa tu número de teléfono a 10 dígitos" />

            <x-form.text-area
                label="{{ __('Comentarios') }}"
                wire:model="supplierRequest.comments"
                error="supplierRequest.comments"
                placeholder="Escribe tu mensaje"
                rows="4" />
        </div>

        {{-- Botón Enviar --}}
        <div class="lg:col-span-2">
            <button
                type="submit"
                data-sitekey="{{ setting('site.captcha_public') }}"
                data-callback='handleSupplier'
                data-action='submit'
                wire:loading.attr="disabled"
                class="bg-black text-white font-bold py-3 px-10 uppercase hover:bg-gray-800 transition duration-300">
                <span wire:loading>
                    <x-vaadin-spinner-third class="w-5 h-5 text-white animate-spin" />
                </span>
                <span wire:loading.remove>{{ __('ENVIAR') }}</span>
            </button>
        </div>

    </form>
</div>

@push('scripts')
    @if (setting('site.captcha_private') && setting('site.captcha_public'))
        <script>
            function handleSupplier(e) {
                grecaptcha.ready(function() {
                    grecaptcha.execute("{{ setting('site.captcha_public') }}", {
                            action: 'submit'
                        })
                        .then(function(token) {
                            @this.set('captcha', token);
                        });
                });
            }
        </script>
    @endif
@endpush