@php
    use function Modules\Core\Settings\Helpers\setting;
    use App\Models\OfertaAcademica;
    $ofertas = OfertaAcademica::select('id','nombre')
        ->where('activo', 1)
        ->orderBy('orden')
        ->get();
@endphp

<div>

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



                    <div class="[&_label]:text-[#007e7f] [&_label]:font-semibold [&_label]:text-lg
                                [&_input]:bg-white [&_input]:border-0 [&_input]:rounded-xl
                                [&_input]:py-4 [&_input]:px-4 [&_input]:focus:ring-2 [&_input]:focus:ring-[#007e7f] [&_input::placeholder]:text-[#007d7e]">
                        <x-form.input label="Nombre completo*" error="contactMessage.name"
                            wire:model="contactMessage.name" type="text"
                            placeholder="Ingresa tu nombre completo" />
                    </div>

                    <div class="[&_label]:text-[#007e7f] [&_label]:font-semibold [&_label]:text-lg
                                [&_input]:bg-white [&_input]:border-0 [&_input]:rounded-xl
                                [&_input]:py-4 [&_input]:px-4 [&_input]:focus:ring-2 [&_input]:focus:ring-[#007e7f] [&_input::placeholder]:text-[#007d7e]">
                        <x-form.input label="Tu Correo electrónico*" error="contactMessage.email"
                            wire:model="contactMessage.email" type="email"
                            placeholder="Ingresa tu dirección de correo electrónico" />
                    </div>

                    <div class="[&_label]:text-[#007e7f] [&_label]:font-semibold [&_label]:text-lg
                                [&_input]:bg-white [&_input]:border-0 [&_input]:rounded-xl
                                [&_input]:py-4 [&_input]:px-4 [&_input]:focus:ring-2 [&_input]:focus:ring-[#007e7f] [&_input::placeholder]:text-[#007d7e]">
                        <x-form.input label="Número de celular" error="contactMessage.phone"
                            wire:model="contactMessage.phone" type="tel"
                            placeholder="Ingresa tu número de celular a 10 digitos" />
                    </div>

                    <div class="[&_label]:text-[#007e7f] [&_label]:font-semibold [&_label]:text-lg
                                [&_select]:bg-white [&_select]:border-0 [&_select]:rounded-xl
                                [&_select]:py-4 [&_select]:px-4 
                                [&_select]:focus:ring-2 [&_select]:focus:ring-[#007e7f]
                                [&_select]:text-gray-800
                                [&_select:invalid]:text-[#007d7e]">
                        <x-form.select 
                            label="Te interesa cursar"
                            error="contactMessage.oferta_academica"
                            wire:model="contactMessage.oferta_academica"
                            :options="$ofertas->pluck('nombre','id')"
                            placeholder="Selecciona una carrera"
                        />
                    </div>
                    <div class="[&_label]:text-[#007e7f] [&_label]:font-semibold [&_label]:text-lg
                                [&_select]:bg-white [&_select]:border-0 [&_select]:rounded-xl
                                [&_select]:py-4 [&_select]:px-4 
                                [&_select]:focus:ring-2 [&_select]:focus:ring-[#007e7f]
                                [&_select]:text-gray-800
                                [&_select:invalid]:text-[#007d7e]">

                        <x-form.select 
                            label="¿Cómo prefieres que te contactemos?"
                            error="contactMessage.medio_contacto"
                            wire:model="contactMessage.medio_contacto"
                            required
                            :options="[
                                'whatsapp' => 'WhatsApp',
                                'telefono' => 'Llamada telefónica',
                                'email' => 'Correo electrónico'
                            ]"
                            placeholder="Selecciona una opción"
                        />
                    </div>
                    <div class="[&_label]:text-[#007e7f] [&_label]:font-semibold [&_label]:text-lg
                                [&_textarea]:bg-white [&_textarea]:border-0 [&_textarea]:rounded-xl
                                [&_textarea]:py-4 [&_textarea]:px-4 
                                [&_textarea]:focus:ring-2 [&_textarea]:focus:ring-[#007e7f]
                                [&_textarea::placeholder]:text-[#007d7e]
                                [&_textarea::placeholder]:opacity-100">

                        <x-form.text-area 
                            label="Mensaje"
                            wire:model="contactMessage.message"
                            error="contactMessage.message"
                            placeholder="Escribe tu mensaje"
                            rows="1" 
                        />
                    </div>


                    <div class="col-span-1 lg:col-span-2 flex justify-center mt-4">

                        <button type="submit"
                            data-sitekey="{{ setting('site.captcha_public') }}"
                            data-callback='handle'
                            data-action='submit'
                            wire:loading.attr="disabled"
                            class="w-full md:w-[280px] bg-[#0f7f7e] text-white font-medium py-4 rounded-full 
                                hover:bg-[#0c6b6a] transition duration-300 tracking-wide">

                            <span wire:loading>
                                <x-vaadin-spinner-third class="w-5 h-5 text-white animate-spin mx-auto" />
                            </span>

                            <span wire:loading.remove>
                                SOLICITAR INFORMACIÓN
                            </span>

                        </button>

                    </div>



            </form>



</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