@extends('layout.front.master')

@section('title', 'Contacto | ' . config('site.name'))
@section('description', 'Contacta a ' . config('site.name') . '. Respondemos en menos de 24 horas. Agenda una reunion o escribinos por WhatsApp.')

@section('content')
@include('layout.front.partials.page-header-accounting-1', [
    'pageTitle' => config('site.contact.page_heading', 'Hablemos de tu proyecto'),
    'pageLabel' => config('site.modules.contact.page_header.title', 'CONTACTO'),
    'pageSubtitle' => config('site.contact.page_subtitle', 'Respondemos en menos de 24 horas'),
])

<div class="container-fluid px-0" style="background-color: var(--secondary);">
<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" role="alert">
                <strong>¡Mensaje Enviado!</strong> Hemos recibido tu mensaje con éxito.
            </div>

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

            <!-- Formulario — Bold Edge Card -->
            <div style="background-color: var(--dark); border-radius: 12px; padding: 2rem; margin-bottom: 2rem;">
                <form id="contactForm" class="contact-form js-recaptcha-form custom-form-style-1" data-recaptcha-action="contact" action="{{ route('front.contact.store') }}" method="POST" aria-label="Formulario de contacto">
                    @csrf
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label class="form-label mb-1 text-2" for="name" style="color: var(--quaternary);">{{ config('site.contact.label_name', '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 style="background-color: var(--dark); border: 1px solid var(--light-rgba-20); color: var(--light);">
                        </div>
                        <div class="form-group col-md-6">
                            <label class="form-label mb-1 text-2" for="email" style="color: var(--quaternary);">{{ config('site.contact.label_email', '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 style="background-color: var(--dark); border: 1px solid var(--light-rgba-20); color: var(--light);">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label class="form-label mb-1 text-2" for="phone" style="color: var(--quaternary);">{{ config('site.contact.label_phone', '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 style="background-color: var(--dark); border: 1px solid var(--light-rgba-20); color: var(--light);">
                        </div>
                        <div class="form-group col-md-6">
                            <label class="form-label mb-1 text-2" for="subject" style="color: var(--quaternary);">{{ config('site.contact.label_subject', '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 style="background-color: var(--dark); border: 1px solid var(--light-rgba-20); color: var(--light);">
                                <option value="" style="color: var(--quaternary);">{{ config('site.contact.subject_placeholder', '¿En qué podemos ayudarte?') }}</option>
                                @php
                                    $subjects = config('site.contact.subjects', []);
                                    if (is_string($subjects)) { $subjects = json_decode($subjects, true) ?? []; }
                                    if (empty($subjects)) {
                                        $subjects = ['Consulta General', 'Sitio Web Profesional', 'Desarrollo a Medida', 'Consultoría Digital', 'Dominios y Emails', 'Solicitar Cotización', 'Soporte Técnico'];
                                    }
                                @endphp
                                @foreach($subjects as $subject)
                                <option value="{{ $subject }}">{{ $subject }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-12 mb-4">
                            <label class="form-label mb-1 text-2" for="message" style="color: var(--quaternary);">{{ config('site.contact.label_message', '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="{{ config('site.contact.message_placeholder', 'Contanos sobre tu negocio y qué necesitás...') }}" style="background-color: var(--dark); border: 1px solid var(--light-rgba-20); color: var(--light);"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-12 mb-3">
                            <button type="submit" class="btn btn-primary btn-modern" data-loading-text="{{ config('site.contact.submit_loading', 'Enviando...') }}">{{ config('site.contact.submit_label', 'Enviar Mensaje') }}</button>
                        </div>
                    </div>
                </form>
            </div>

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

            <!-- Calendly CTA — solo se renderiza si el cliente configuró su booking_url -->
            @if(config('site.booking_url'))
            <div class="mb-4 p-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10); border-radius: 8px;">
                <h5 style="color: var(--light);">{{ config('site.contact.calendly_heading', __('Agendá una reunión')) }}</h5>
                <p style="color: var(--quaternary);">{{ config('site.contact.calendly_subtitle', __('30 minutos. Sin compromiso.')) }}</p>
                <a href="{{ config('site.booking_url') }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-rounded w-100">
                    <i class="far fa-calendar-alt me-2"></i>{{ config('site.contact.calendly_button', __('Elegir horario')) }}
                </a>
            </div>
            @endif

            <!-- WhatsApp CTA -->
            @if(config('site.social_media.whatsapp.active'))
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                <a href="{{ config('site.social_media.whatsapp.url') }}" target="_blank" rel="noopener noreferrer" class="btn btn-rounded w-100 mb-4" style="background-color: #25D366; color: white;">
                    <i class="fab fa-whatsapp me-2"></i>{{ config('site.contact.whatsapp_label', 'Escribinos por WhatsApp') }}
                </a>
            </div>
            @endif

            <div class="overflow-hidden mb-1">
                <h4 class="mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="500" style="color: var(--primary);"><strong>{{ config('site.contact.sidebar_heading', 'Escribinos') }}</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="600" style="color: var(--quaternary);">{{ config('site.contact.sidebar_subtitle', 'Respondemos en menos de 24 horas. Si preferís, agendá directamente una reunión por Calendly.') }}</p>
            </div>

            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                <h4 class="pt-4" style="color: var(--primary);"><strong>{{ config('site.contact.location_heading', 'Dónde estamos') }}</strong></h4>
                <address>
                    <ul class="list list-icons list-icons-style-2 mt-2">
                        <li style="color: var(--quaternary);"><i class="fas fa-map-marker-alt top-6" style="color: var(--primary); border-color: var(--primary);"></i> <strong style="color: var(--light);">Ubicación:</strong> {{ config('site.contact.address', '') }}</li>
                        @if(config('site.contact.phone'))
                        <li style="color: var(--quaternary);"><i class="fas fa-phone top-6" style="color: var(--primary); border-color: var(--primary);"></i> <strong style="color: var(--light);">{{ config('site.contact.label_phone_sidebar', 'Teléfono:') }}</strong> {{ config('site.contact.phone') }}</li>
                        @endif
                        <li style="color: var(--quaternary);"><i class="fas fa-envelope top-6" style="color: var(--primary); border-color: var(--primary);"></i> <strong style="color: var(--light);">Email:</strong> <a style="color: var(--primary);" href="mailto:{{ config('site.contact.email', '') }}">{{ config('site.contact.email', '') }}</a></li>
                    </ul>
                </address>

                <h4 class="pt-5" style="color: var(--primary);"><strong>{{ config('site.contact.hours_heading', 'Horarios') }}</strong></h4>
                @php
                    $hoursDetail = config('site.contact.hours_detail', []);
                    if (is_string($hoursDetail)) { $hoursDetail = json_decode($hoursDetail, true) ?? []; }
                    if (empty($hoursDetail)) {
                        $hoursDetail = [
                            ['day' => 'Lunes a Viernes', 'hours' => '9:00 a 16:00 hs'],
                            ['day' => 'Sábados', 'hours' => 'Cerrado'],
                            ['day' => 'Domingos', 'hours' => 'Cerrado'],
                        ];
                    }
                @endphp
                <ul class="list list-icons mt-2">
                    @foreach($hoursDetail as $schedule)
                    <li style="color: var(--quaternary);"><i class="far fa-clock top-6" style="color: var(--primary);"></i> {{ $schedule['day'] }} - {{ $schedule['hours'] }}</li>
                    @endforeach
                </ul>
            </div>

        </div>

    </div>

</div>
</div>

<style>
    /* Bold Edge — Dark Contact Form Styles */
    #contactForm .form-control:focus {
        background-color: var(--dark);
        border-color: var(--primary);
        color: var(--light);
        box-shadow: 0 0 0 0.2rem var(--primary-rgba-20);
    }
    #contactForm .form-control::placeholder {
        color: var(--quaternary);
        opacity: 0.6;
    }
    #contactForm select option {
        background-color: var(--dark);
        color: var(--light);
    }
</style>

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

                    // Envío real con fetch
                    fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || document.querySelector('input[name="_token"]')?.value,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            name: name,
                            email: email,
                            phone: phone,
                            subject: subject,
                            message: message
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            successAlert.classList.remove('d-none');
                            errorAlert.classList.add('d-none');
                            form.reset();
                            successAlert.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        } else {
                            throw new Error(data.message || 'Error al enviar');
                        }
                    })
                    .catch(error => {
                        errorMessage.textContent = error.message || 'Ocurrió un error. Por favor intenta nuevamente.';
                        errorAlert.classList.remove('d-none');
                        successAlert.classList.add('d-none');
                        errorAlert.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    })
                    .finally(() => {
                        submitButton.textContent = originalText;
                        submitButton.disabled = false;
                    });
                } else {
                    errorAlert.classList.remove('d-none');
                    successAlert.classList.add('d-none');
                    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