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

<div class="bg-[#edeff1]">
    {{-- Active tab quotation --}}
    @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 y empresa') }}
                    </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 completo*') }}" error="quotation.name" required
                        wire:model="quotation.name" type="text" placeholder="Ingresa tu nombre completo" />

                    <x-form.input label="{{ __('Puesto en la empresa*') }}" error="quotation.job_title" required
                        wire:model="quotation.job_title" type="text" placeholder="Ej. Gerente de compras" />

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

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

                    <x-form.input label="{{ __('Cantidad de pares aproximada*') }}" error="quotation.pairs_quantity"
                        required wire:model="quotation.pairs_quantity" type="number" placeholder="Cantidad estimada" />




                </div>

                {{-- Right Column --}}
                <div class="lg:col-span-5 flex flex-col gap-6">

                    <x-form.input label="{{ __('Empresa*') }}" error="quotation.company" required
                        wire:model="quotation.company" type="text" placeholder="Nombre de la empresa" />

                    <x-form.input label="{{ __('RFC') }}" error="quotation.rfc" wire:model="quotation.rfc"
                        type="text" placeholder="RFC de la empresa" />

                    <x-form.input label="{{ __('Ciudad y Estado*') }}" error="quotation.city" required
                        wire:model="quotation.city" type="text" placeholder="Ciudad y Estado" />

                    <x-form.input label="{{ __('Giro de la empresa*') }}" error="quotation.business_turn" required
                        wire:model="quotation.business_turn" type="text"
                        placeholder="Ej. Construcción, Manufactura" />

                    <x-form.text-area label="{{ __('Observaciones*') }}" wire:model="quotation.observations" required
                        error="quotation.observations" placeholder="Escribe tus observaciones o detalles adicionales"
                        rows="3" />


                </div>

                <div class="lg:col-start-2">
                    <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"></div>

        @include('pages.home.sections.beneficios')

    </div>
</div>


@push('after-css')
    <link rel="preload" href="{{ asset('plugins/glide/glide.core.min.css') }}" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="{{ asset('plugins/glide/glide.theme.min.css') }}" as="style"
        onload="this.onload=null;this.rel='stylesheet'">

    <noscript>
        <link rel="stylesheet" href="{{ asset('plugins/glide/glide.core.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/glide/glide.theme.min.css') }}">
    </noscript>
@endpush


@push('scripts')
    <script src="{{ asset('plugins/glide/glide.min.js') }}" defer></script>
    @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