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

<div>

    <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 text-white [&_label]:text-white">

                <div class="lg:col-span-12 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="Teléfono / Whatsapp"
                    />
            
                    <x-form.text-area
                        label="{{ __('Mensaje') }}"
                        wire:model="contactMessage.message"
                        error="contactMessage.message"
                        placeholder="Escribe tu mensaje"
                        rows="5"
                    />
            
                </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