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

<div>
    @include('layout.partials.contact-header')

    <div class="py-9 text-center">
        <div class="h-4"></div>

        <div class="container px-4 lg:px-0">
            <div class="lg:grid lg:grid-cols-12">
                <div class="col-start-2 col-span-10">
                    <h1 class="text-3xl font-bold text-black mb-8 text-left">
                        {{ __('Datos de contacto') }}
                    </h1>
                </div>
            </div>

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

                {{-- Left Column --}}
                <div class="lg:col-start-2 lg:col-span-5 flex flex-col gap-6">
                    <x-form.input label="{{ __('Nombre de contacto principal*') }}" error="contactMessage.name" required
                        wire:model="contactMessage.name" type="text"
                        placeholder="Ingresa el nombre del contacto principal" />

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

                    <x-form.input label="{{ __('Número de teléfono') }}" error="contactMessage.phone"
                        wire:model="contactMessage.phone" required type="tel"
                        placeholder="Ingresa tu número de teléfono a 10 digitos" />

                    <x-form.text-area label="{{ __('Mensaje') }}" wire:model="contactMessage.message"
                        error="contactMessage.message" placeholder="Escribe tu mensaje" rows="5" />
                </div>

                {{-- Right Column --}}
                <div class="lg:col-span-5 flex flex-col gap-6">
                    <x-form.input label="{{ __('Ciudad y Estado') }}" error="contactMessage.city"
                        wire:model="contactMessage.city" required type="text"
                        placeholder="Ingresa tu ciudad y estado" />

                    <x-form.input label="{{ __('Asunto') }}" error="subject" wire:model="subject" type="text"
                        placeholder="Ingresa el asunto" />

                    <x-form.input label="{{ __('Horario de preferencia') }}" error="schedule" wire:model="schedule"
                        type="text" placeholder="" />

                    <div class="mt-auto">
                        <button type="submit" data-sitekey="{{ setting('site.captcha_public') }}"
                            data-callback='handle' data-action='submit' wire:loading.attr="disabled"
                            class="w-full lg:w-48 bg-black text-white font-bold py-3 uppercase hover:bg-gray-800 transition duration-300 rounded">
                            <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>
                </div>

            </form>
        </div>
        <div class="h-10 2xl:h-40"></div>
    </div>
</div>


@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