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

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

    <x-form.input label="Nombre completo" error="contactMessage.name" required wire:model="contactMessage.name" type="text"  />
    {{-- <x-form.input label="Apellido" error="contactMessage.last" required wire:model="contactMessage.last" type="text" /> --}}
    <x-form.input label="Dirección" error="contactMessage.address" wire:model="contactMessage.address" required type="text"   />
    <x-form.input label="Colonia" error="contactMessage.colonia" wire:model="contactMessage.colonia" required type="text"   />
    <x-form.input label="Ciudad" error="contactMessage.city" wire:model="contactMessage.city" required type="text"   />
    <x-form.input label="Estado" error="contactMessage.state" wire:model="contactMessage.state" required type="text"   />
    <x-form.input label="Número de teléfono" error="contactMessage.phone" wire:model="contactMessage.phone" required type="tel"   />
    <x-form.input label="WhatsApp" error="contactMessage.whatsapp" wire:model="contactMessage.whatsapp" required type="tel"   />
    <x-form.input label="Motivo de contacto" error="contactMessage.motivo" wire:model="contactMessage.motivo" required type="tel"   />
    <x-form.input label="Correo electrónico" error="contactMessage.email" required wire:model="contactMessage.email" type="email" />
    <x-form.text-area label="Comentario y/o sugerencia:" wire:model="contactMessage.message" error="contactMessage.message" />
    <span class="flex flex-col justify-self-end">
        <div class="h-5"></div>
        <button type="sumbit" data-sitekey="{{ setting('site.captcha_public') }}" data-callback='handle'
        data-action='submit' wire:loading.attr="disabled"
        class="flex py-2 px-8 font-bold text-white uppercase g-recaptcha hvr-pulse-grow font-poppins bg-[#57989c] hover:bg-[#3b6668]">
        <span wire:loading>
            <x-vaadin-spinner-third class="w-5 h-5 text-white animate-spin" />
        </span>
        <span wire:loading.remove>ENVIAR</span>
        </button>
    </span>
    <div></div>
    <p  class="text-primario text-left">Los campos marcados con * son necesarios.</p>
</form>

@push('scripts')
    @if (setting('site.captcha_private') && setting('site.captcha_public'))
        <script src="https://www.google.com/recaptcha/api.js?render={{ setting('site.captcha_public') }}"></script>
        <script>
            function handle(e) {
                grecaptcha.ready(function() {
                    grecaptcha.execute("{{ setting('site.captcha_public') }}", {
                            action: 'submit'
                        })
                        .then(function(token) {
                            @this.set('captcha', token);
                        });
                })
            }
        </script>
    @endif
@endpush