@extends('layout.front.master')

@section('title', __('Contacto'))
@section('description', __('Contáctenos para conocer nuestras soluciones industriales. Technoa S.A.S - Especialistas en bombas, instrumentación y automatización industrial. Teléfono: +54 381 642 2233'))
@section('keywords', config('site.seo.keywords') . ', contacto, consulta, cotización, soporte técnico')

@section('content')

    <div class="custom-page-header border-bottom-light">
    <section class="page-header page-header-modern page-header-lg overlay overlay-light overlay-show overlay-op-9 m-0" style="background-image: url({{ asset('cd-project/img/demos/transportation-logistic/contact/contact-page-header.jpg') }}); background-size: cover; background-position: center;">
        <div class="container container-xl-custom py-4">
                <div class="row">
                    <div class="col">
                        <ul class="breadcrumb text-4 font-weight-semi-bold mb-2">
                        <li><a href="{{ url('/') }}" class="text-color-primary text-decoration-none text-capitalize">{{ __('Inicio') }}</a></li>
                        <li class="text-color-primary active text-capitalize">{{ __('Contacto') }}</li>
                        </ul>
                    <h1 class="text-color-tertiary font-weight-semi-bold text-9">{{ __('Contacto') }}</h1>
                    </div>
                </div>
            </div>
        </section>
    </div>
<div class="container container-xl-custom">

    <div class="row py-4">
        <div class="col-lg-7 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="650">

            <div class="offset-anchor" id="contact-sent"></div>

            <!-- Alerts con configuración Laravel -->
            <div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
                <strong>{{ __('¡Mensaje Enviado!') }}</strong> {{ __('Hemos recibido tu mensaje con éxito.') }}
                    </div>

                    <div class="contact-form-error alert alert-danger d-none mt-4">
                <strong>{{ __('¡Error!') }}</strong> {{ __('Algo salió mal al enviar tu mensaje.') }}
                        <span class="mail-error-message text-1 d-block"></span>
                    </div>

            <!-- Formulario fusionado: Layout superior + Variables Laravel -->
            <form id="contactForm" class="contact-form-recaptcha-v3 custom-form-style-1" action="php/contact-form-recaptcha-v3.php" method="POST">
                <div class="row">
                    <div class="form-group col-md-6">
                        <label class="form-label mb-1 text-2">{{ __('Nombre Completo') }}</label>
                        <input type="text" value="" data-msg-required="{{ __('Por favor ingresa tu nombre.') }}" maxlength="100" class="form-control text-3 h-auto py-2" name="name" id="name" required>
                        </div>
                    <div class="form-group col-md-6">
                        <label class="form-label mb-1 text-2">{{ __('Correo Electrónico') }}</label>
                        <input type="email" value="" data-msg-required="{{ __('Por favor ingresa tu correo electrónico.') }}" data-msg-email="{{ __('Por favor ingresa un correo válido.') }}" maxlength="100" class="form-control text-3 h-auto py-2" name="email" id="email" required>
                    </div>
                        </div>
                <div class="row">
                    <div class="form-group col-md-6">
                        <label class="form-label mb-1 text-2">{{ __('Teléfono') }}</label>
                        <input type="text" value="" data-msg-required="{{ __('Por favor ingresa tu teléfono.') }}" maxlength="100" class="form-control text-3 h-auto py-2" name="phone" id="phone" required>
                    </div>
                    <div class="form-group col-md-6">
                        <label class="form-label mb-1 text-2">{{ __('Asunto') }}</label>
                        <select data-msg-required="{{ __('Por favor selecciona un asunto.') }}" class="form-control text-3 h-auto py-2" name="subject" id="subject" required>
                            <option value="">{{ __('Selecciona un asunto...') }}</option>
                            <option value="Consulta General">{{ __('Consulta General') }}</option>
                            <option value="Bombas Industriales">{{ __('Bombas Industriales') }}</option>
                            <option value="Instrumentación">{{ __('Instrumentación') }}</option>
                            <option value="Automatización">{{ __('Automatización') }}</option>
                            <option value="Cotización">{{ __('Solicitar Cotización') }}</option>
                            <option value="Soporte Técnico">{{ __('Soporte Técnico') }}</option>
                        </select>
                        </div>
                    </div>
                    <div class="row">
                    <div class="form-group col-md-12 mb-4">
                        <label class="form-label mb-1 text-2">{{ __('Mensaje') }}</label>
                        <textarea maxlength="5000" data-msg-required="{{ __('Por favor ingresa tu mensaje.') }}" rows="6" class="form-control text-3 h-auto py-2" name="message" id="message" required placeholder="{{ __('Describe tu consulta o proyecto...') }}"></textarea>
                        </div>
                    </div>
                    <div class="row">
                    <div class="form-group col-md-12 mb-5">
                        <button type="submit" class="btn btn-primary btn-modern" data-loading-text="{{ __('Enviando...') }}">{{ __('Enviar Mensaje') }}</button>
                        </div>
                    </div>
                </form>

        </div>
        <div class="col-lg-5">

            <div class="overflow-hidden mb-1">
                <h4 class="text-primary mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200">{{ __('Contáctanos') }} <strong>{{ __('Hoy') }}</strong></h4>
            </div>
            <div class="overflow-hidden mb-3">
                <p class="lead text-4 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="400">{{ config('site.contact.form_subtitle', __('Estamos aquí para ayudarte con tus proyectos industriales. Contáctanos para recibir asesoramiento especializado.')) }}</p>
        </div>
            <div class="overflow-hidden">
                <p class="mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="600">{{ __('Responderemos tu consulta en menos de 24 horas.') }}</p>
    </div>

            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                <h4 class="text-primary pt-5">{{ __('Nuestra') }} <strong>{{ __('Oficina') }}</strong></h4>
                <ul class="list list-icons list-icons-style-3 mt-2">
                    <li><i class="fas fa-map-marker-alt top-6"></i> <strong>{{ __('Dirección:') }}</strong> {{ config('site.contact.address', __('Av. Corrientes 1234, CABA, Buenos Aires, Argentina')) }}</li>
                    @if(!empty(config('site.contact.phone')))
                    <li><i class="fas fa-phone top-6"></i> <strong>{{ __('Teléfono:') }}</strong> {{ config('site.contact.phone') }}</li>
                    @endif
                    <li><i class="fas fa-envelope top-6"></i> <strong>{{ __('Email:') }}</strong> <a href="mailto:{{ config('site.contact.email', 'info@technoa.com.ar') }}">{{ config('site.contact.email', 'info@technoa.com.ar') }}</a></li>
                </ul>

                <div class="row lightbox mt-4 mb-0 pb-0" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}">
                    <div class="col-md-4 mb-4 mb-md-0">
                        <a class="img-thumbnail p-0 border-0 d-block" href="{{ asset('cd-project/img/demos/transportation-logistic/contact/our-office-1.jpg') }}" data-plugin-options="{'type':'image'}">
                            <img class="img-fluid" src="{{ asset('cd-project/img/demos/transportation-logistic/contact/our-office-1.jpg') }}" alt="{{ __('Oficina Technoa') }}">
                        </a>
                    </div>
                    <div class="col-md-4 mb-4 mb-md-0">
                        <a class="img-thumbnail p-0 border-0 d-block" href="{{ asset('cd-project/img/demos/transportation-logistic/contact/our-office-2.jpg') }}" data-plugin-options="{'type':'image'}">
                            <img class="img-fluid" src="{{ asset('cd-project/img/demos/transportation-logistic/contact/our-office-2.jpg') }}" alt="{{ __('Oficina Technoa') }}">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a class="img-thumbnail p-0 border-0 d-block" href="{{ asset('cd-project/img/demos/transportation-logistic/contact/our-office-3.jpg') }}" data-plugin-options="{'type':'image'}">
                            <img class="img-fluid" src="{{ asset('cd-project/img/demos/transportation-logistic/contact/our-office-3.jpg') }}" alt="{{ __('Oficina Technoa') }}">
                        </a>
        </div>
                </div>

                <h4 class="text-primary pt-5">{{ __('Horarios de') }} <strong>{{ __('Atención') }}</strong></h4>
                <ul class="list list-icons list-dark mt-2">
                    <li><i class="far fa-clock top-6"></i> {{ __('Lunes a Viernes - 8:00 a 17:00 hs') }}</li>
                    <li><i class="far fa-clock top-6"></i> {{ __('Sábados - 8:00 a 12:00 hs') }}</li>
                    <li><i class="far fa-clock top-6"></i> {{ __('Domingos - Cerrado') }}</li>
                </ul>
            </div>

        </div>

    </div>

</div>

{{--
<section class="bg-tertiary" >
    <div class="container container-xl-custom">
        <div class="row py-5 text-center">
            <h1 class="text-primary font-weight-bold mb-3">{{ config('site.contact.page_title') }}</h1>
            <div class="Contact-subtitle">{!! config('site.contact.page_subtitle') !!}</div>
        </div>
            <div class="row">
            @foreach(config('site.social_media') as $key => $social)
                @if($social['active'])
                <div class="col-lg-4">
                    <div class="feature-box feature-box-style-2 mb-3">
                        <div class="feature-box-icon pt-0">
                            <i class="{{ $social['icon'] }}"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="mb-2 text-light">{{ $social['title'] }}</h4>
                            <a href="{{ $social['url'] }}" target="_blank" class="text-decoration-none">{{ $social['title'] }}</a>
                        </div>
                    </div>
                </div>
                @endif
            @endforeach

            <div class="col-lg-4">
                <div class="feature-box feature-box-style-2 mb-3">
                    <div class="feature-box-icon pt-0">
                        <i class="icon-envelope icons"></i>
                    </div>
                    <div class="feature-box-info">
                        <h4 class="mb-2 text-light">{{ __('Correo electrónico') }}</h4>
                        <p class="text-4">
                            <a href="mailto:{{ config('site.contact.email') }}" class="text-decoration-none">{{ config('site.contact.email') }}</a>
                        </p>
                    </div>
                </div>
            </div>

            @if(!empty(config('site.contact.phone')))
            <div class="col-lg-4">
                <div class="feature-box feature-box-style-2 mb-3">
                    <div class="feature-box-icon pt-0">
                        <i class="icon-phone icons"></i>
                    </div>
                    <div class="feature-box-info">
                        <h4 class="mb-2 text-light">{{ __('Teléfono') }}</h4>
                        <p class="text-4">
                            <a href="tel:{{ config('site.contact.phone') }}" class="text-decoration-none">{{ config('site.contact.phone') }}</a>
                        </p>
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Sección inferior simplificada para evitar duplicación -->
        <div class="row py-5">
            <div class="col-lg-12 text-center">
                <h2 class="font-weight-bold text-12 ls-1 mt-2 mb-3 text-primary">{{ config('site.contact.form_title') ?? __('También puedes contactarnos por otros medios') }}</h2>
                <p class="mb-4 text-4">{{ __('Estamos disponibles en múltiples canales de comunicación') }}</p>
            </div>
        </div>

</div>
</section> --}}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('contactForm');
        const successAlert = document.querySelector('.contact-form-success');
        const errorAlert = document.querySelector('.contact-form-error');
        const errorMessage = document.querySelector('.mail-error-message');
        const submitButton = form.querySelector('button[type="submit"]');

        if (form) {
            form.addEventListener('submit', function (e) {
                e.preventDefault();

                // Validación de campos requeridos
                let isValid = true;
                const name = form.elements.name.value.trim();
                const email = form.elements.email.value.trim();
                const phone = form.elements.phone.value.trim();
                const subject = form.elements.subject.value;
                const message = form.elements.message.value.trim();

                // Validaciones
                if (!name || !email || !phone || !subject || !message) {
                    isValid = false;
                    errorMessage.textContent = '{{ __('Por favor completa todos los campos requeridos.') }}';
                }

                // Validación de email
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (email && !emailRegex.test(email)) {
                    isValid = false;
                    errorMessage.textContent = '{{ __('Por favor ingresa un correo electrónico válido.') }}';
                }

                // Validación de teléfono (básica)
                if (phone && phone.length < 8) {
                    isValid = false;
                    errorMessage.textContent = '{{ __('Por favor ingresa un teléfono válido.') }}';
                }

                if (isValid) {
                    // Mostrar loading
                    const originalText = submitButton.textContent;
                    submitButton.textContent = submitButton.getAttribute('data-loading-text') || '{{ __('Enviando...') }}';
                    submitButton.disabled = true;

                    // Simular envío exitoso (en producción, aquí iría la lógica de envío real)
                    setTimeout(() => {
                        successAlert.classList.remove('d-none');
                        errorAlert.classList.add('d-none');
                        form.reset();

                        // Restaurar botón
                        submitButton.textContent = originalText;
                        submitButton.disabled = false;

                        // Scroll al mensaje de éxito
                        successAlert.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }, 1500);
                } else {
                    errorAlert.classList.remove('d-none');
                    successAlert.classList.add('d-none');

                    // Scroll al mensaje de error
                    errorAlert.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            });

            // Remover alertas al empezar a escribir
            const inputs = form.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                input.addEventListener('input', () => {
                    if (!successAlert.classList.contains('d-none') || !errorAlert.classList.contains('d-none')) {
                        successAlert.classList.add('d-none');
                        errorAlert.classList.add('d-none');
                    }
                });
            });
        }
    });
</script>

@endsection