@extends('layout.front.master')

@section('title', __('Contacto') . ' | ' . config('site.name'))
@section('description', __('Ponte en contacto con nosotros. Completa el formulario y te responderemos a la brevedad.'))
@section('keywords', __('contacto, formulario de contacto, consulta, cotización, soporte'))
@section('og_title', __('Contacto') . ' | ' . config('site.name'))
@section('og_description', __('Ponte en contacto con nosotros. Completa el formulario y te responderemos a la brevedad.'))

@section('content')

    @include('layout.front.partials.page-header-digital-agency-2', [
        'pageTitle' => __('Contacto'),
        'pageLabel' => __('CONTACTO'),
        'pageSubtitle' => __('Estamos para ayudarte. Escríbenos y te respondemos a la brevedad.'),
    ])

    <div style="background: var(--secondary);">
        <div class="container container-xl-custom py-5">
            <div class="row py-4">

                @php
                    $authUser = auth()->user();
                    $isLoggedClient = $authUser && $authUser->hasRole('Client');
                @endphp

                {{-- Formulario --}}
                <div class="col-lg-7 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="650">

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

                    {{-- Banner: invitación a registrarse para mejor experiencia (solo guests) --}}
                    @guest
                    <div class="alert d-flex align-items-start gap-3 mb-4" style="background: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-20); color: var(--light);">
                        <i class="fas fa-info-circle text-color-primary mt-1 text-4"></i>
                        <div class="flex-grow-1">
                            <strong class="d-block mb-1">¿Ya tenés cuenta en BewPro?</strong>
                            <span class="text-2 opacity-9 d-block mb-2">Iniciá sesión para gestionar tus consultas en un panel personal con seguimiento de cada conversación.</span>
                            <a href="{{ route('login') }}" class="btn btn-sm btn-outline-light rounded-0 text-2 me-2">{{ __('Iniciar sesión') }}</a>
                            <a href="{{ route('register') }}" class="btn btn-sm btn-primary rounded-0 text-2">{{ __('Crear cuenta gratis') }}</a>
                        </div>
                    </div>
                    @endguest

                    {{-- Banner: Client logueado abre ticket --}}
                    @if($isLoggedClient)
                    <div class="alert d-flex align-items-start gap-3 mb-4" style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: var(--light);">
                        <i class="fas fa-check-circle mt-1 text-4" style="color: #10b981;"></i>
                        <div class="flex-grow-1">
                            <strong class="d-block mb-1">Hola {{ $authUser->first_name ?: explode('@', $authUser->email)[0] }} 👋</strong>
                            <span class="text-2 opacity-9 d-block">
                                Tu mensaje se va a abrir como un ticket en
                                <a href="{{ route('client.support.index') }}" class="text-color-primary">tu panel de soporte</a>.
                                Vas a recibir las respuestas por email + ahí mismo.
                            </span>
                        </div>
                    </div>
                    @endif

                    {{-- Alertas --}}
                    <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 — Dark Card --}}
                    <div style="background-color: var(--secondary-100); border-radius: 0; padding: 2rem; margin-bottom: 2rem;">
                        <form id="contactForm" class="contact-form-recaptcha-v3 custom-form-style-1" action="{{ route('front.contact.store') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label class="form-label mb-1 text-2" style="color: var(--quaternary);">{{ __('Nombre Completo') }}</label>
                                    <input type="text" value="{{ $authUser->name ?? old('name') }}" data-msg-required="{{ __('Por favor ingresa tu nombre.') }}" maxlength="100" class="form-control text-3 h-auto py-2" name="name" id="name" required {{ $isLoggedClient ? 'readonly' : '' }} style="background-color: var(--secondary-100); border: 1px solid var(--primary-rgba-20); color: var(--light);">
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="form-label mb-1 text-2" style="color: var(--quaternary);">{{ __('Correo Electrónico') }}</label>
                                    <input type="email" value="{{ $authUser->email ?? old('email') }}" 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 {{ $isLoggedClient ? 'readonly' : '' }} style="background-color: var(--secondary-100); border: 1px solid var(--primary-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" style="color: var(--quaternary);">{{ __('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" style="background-color: var(--secondary-100); border: 1px solid var(--primary-rgba-20); color: var(--light);">
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="form-label mb-1 text-2" style="color: var(--quaternary);">{{ __('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(--secondary-100); border: 1px solid var(--primary-rgba-20); color: var(--light);">
                                        <option value="" style="color: var(--quaternary);">{{ __('Selecciona un asunto...') }}</option>
                                        <option value="Consulta General">{{ __('Consulta General') }}</option>
                                        <option value="Solicitar Cotización">{{ __('Solicitar Cotización') }}</option>
                                        <option value="Soporte Técnico">{{ __('Soporte Técnico') }}</option>
                                        <option value="Otro">{{ __('Otro') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-12 mb-4">
                                    <label class="form-label mb-1 text-2" style="color: var(--quaternary);">{{ __('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="{{ __('Contanos cómo podemos ayudarte...') }}" style="background-color: var(--secondary-100); border: 1px solid var(--primary-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="{{ __('Enviando...') }}">{{ __('Enviar Mensaje') }}</button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>

                {{-- Sidebar --}}
                <div class="col-lg-5">
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">

                        <h4 class="mb-3" style="color: var(--primary);"><strong>{{ __('Contacto directo') }}</strong></h4>
                        <p class="text-4 mb-4" style="color: var(--quaternary);">{{ __('Respondemos en menos de 24 horas.') }}</p>

                        <ul class="list list-unstyled mt-3">
                            @if(config('site.contact.email'))
                                <li class="d-flex align-items-center gap-3 mb-4">
                                    <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0" style="width: 48px; height: 48px; background: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-20);">
                                        <i class="fas fa-envelope" style="color: var(--primary);"></i>
                                    </div>
                                    <div>
                                        <span class="d-block text-3 font-weight-semibold" style="color: var(--light);">Email</span>
                                        <a style="color: var(--primary);" href="mailto:{{ config('site.contact.email') }}">{{ config('site.contact.email') }}</a>
                                    </div>
                                </li>
                            @endif
                            @if(config('site.contact.phone'))
                                <li class="d-flex align-items-center gap-3 mb-4">
                                    <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0" style="width: 48px; height: 48px; background: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-20);">
                                        <i class="fas fa-phone" style="color: var(--primary);"></i>
                                    </div>
                                    <div>
                                        <span class="d-block text-3 font-weight-semibold" style="color: var(--light);">{{ __('Teléfono') }}</span>
                                        <a style="color: var(--primary);" href="tel:{{ config('site.contact.phone') }}">{{ config('site.contact.phone') }}</a>
                                    </div>
                                </li>
                            @endif
                            @if(config('site.contact.address'))
                                <li class="d-flex align-items-center gap-3 mb-4">
                                    <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0" style="width: 48px; height: 48px; background: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-20);">
                                        <i class="fas fa-map-marker-alt" style="color: var(--primary);"></i>
                                    </div>
                                    <div>
                                        <span class="d-block text-3 font-weight-semibold" style="color: var(--light);">{{ __('Ubicación') }}</span>
                                        <span style="color: var(--quaternary);">{{ config('site.contact.address') }}</span>
                                    </div>
                                </li>
                            @endif
                        </ul>

                        {{-- Horarios (solo si hay config) --}}
                        @php $hours = config('site.contact.hours'); @endphp
                        @if($hours)
                        <div class="d-flex align-items-center gap-3 mb-4">
                            <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0" style="width: 48px; height: 48px; background: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-20);">
                                <i class="far fa-clock" style="color: var(--primary);"></i>
                            </div>
                            <div>
                                <span class="d-block text-3 font-weight-semibold" style="color: var(--light);">{{ __('Horarios') }}</span>
                                <span style="color: var(--quaternary);">{{ is_array($hours) ? implode(' | ', $hours) : $hours }}</span>
                            </div>
                        </div>
                        @endif

                        {{-- Redes sociales --}}
                        @php
                            $activeSocials = collect(config('site.social_media', []))->filter(fn($s) => !empty($s['active']) && !empty($s['url']));
                        @endphp
                        @if($activeSocials->count() > 0)
                        <div class="pt-4 mt-2" style="border-top: 1px solid var(--primary-rgba-10);">
                            <ul class="social-icons social-icons-clean social-icons-icon-primary social-icons-big m-0">
                                @foreach($activeSocials as $key => $social)
                                    <li class="social-icons-{{ $key }}">
                                        <a href="{{ $social['url'] }}" target="_blank" rel="noopener noreferrer" title="{{ $social['title'] }}" aria-label="{{ $social['title'] }}">
                                            <i class="{{ $social['icon'] }}"></i>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        @endif

                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection

@section('css')
<style>
    /* Dark Contact Form Styles — demo-digital-agency-2 */
    #contactForm .form-control:focus {
        background-color: var(--secondary-100);
        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(--secondary-100);
        color: var(--light);
    }
</style>
@endsection

@section('js')
<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 || !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.") }}';
                }

                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