@extends('layout.front.master')

@section('title', __('Soporte y Contacto') . ' | ' . config('site.name'))
@section('description', __('Centro de soporte y contacto de BewPro. Encuentra respuestas rápidas o abre un ticket con nuestro equipo.'))
@section('keywords', __('soporte, contacto, ayuda, tickets, ventas'))
@section('og_title', __('Soporte y Contacto') . ' | ' . config('site.name'))
@section('og_description', __('Centro de soporte y contacto de BewPro. Encuentra respuestas rápidas o abre un ticket con nuestro equipo.'))

@section('content')

    @include('layout.front.partials.page-header-demo-bewpro', [
        'pageTitle' => __('Soporte & Contacto'),
        'pageLabel' => __('CENTRO DE AYUDA'),
        'pageSubtitle' => __('Estamos para ayudarte. Elige el canal correcto para una respuesta más rápida.'),
    ])

    <div style="background: var(--secondary);">
        
        {{-- Intent Grid --}}
        <div class="container container-xl-custom pt-5 pb-3">
            <div class="row text-center mb-4">
                <div class="col-md-4 mb-4 mb-md-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    <div class="card border-0 deluxe-card with-border-top-primary h-100">
                        <div class="card-body p-4 p-lg-5">
                            <i class="fas fa-book text-color-primary text-8 mb-4"></i>
                            <h4 class="text-color-light font-weight-bold text-4 mb-3">Base de Conocimientos</h4>
                            <p class="text-color-light opacity-6 mb-4">Respuestas rápidas a preguntas frecuentes sobre la plataforma, pagos y configuraciones.</p>
                            <a href="{{ url('/faqs') }}" class="btn btn-outline-primary btn-modern rounded-0 btn-sm">Ver FAQs</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4 mb-md-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                    <div class="card border-0 deluxe-card with-border-top-success h-100">
                        <div class="card-body p-4 p-lg-5">
                            <i class="fas fa-life-ring text-8 mb-4" style="color: #10b981;"></i>
                            <h4 class="text-color-light font-weight-bold text-4 mb-3">Soporte Técnico</h4>
                            <p class="text-color-light opacity-6 mb-4">¿Tienes un problema con tu producto activo? Abre un ticket directamente en tu panel.</p>
                            @php
                                $authUser = auth()->user();
                                $isLoggedClient = $authUser && $authUser->hasRole('Client');
                            @endphp
                            @if($isLoggedClient)
                                <a href="{{ route('client.support.index') }}" class="btn btn-modern rounded-0 btn-sm text-color-light" style="background: #10b981; border: none;">Ir a Mis Tickets</a>
                            @else
                                <a href="{{ route('login') }}" class="btn btn-outline-light btn-modern rounded-0 btn-sm">Iniciar Sesión</a>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                    <div class="card border-0 deluxe-card with-border-top-primary h-100">
                        <div class="card-body p-4 p-lg-5">
                            <i class="fas fa-handshake text-color-primary text-8 mb-4"></i>
                            <h4 class="text-color-light font-weight-bold text-4 mb-3">Ventas y Partnerships</h4>
                            <p class="text-color-light opacity-6 mb-4">¿Quieres un plan corporativo o ser partner? Hablemos directamente.</p>
                            <a href="#contact-form-section" data-hash data-hash-offset="100" class="btn btn-outline-primary btn-modern rounded-0 btn-sm">Contactar Ventas</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Contact Form Section --}}
        <div id="contact-form-section" class="container container-xl-custom py-4 pb-5 mb-0">
            <div class="row justify-content-center">
                <div class="col-lg-8 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="650">

                    <div class="text-center mb-5">
                        <h3 class="text-color-light font-weight-bold text-6 mb-2">Envíanos un mensaje directo</h3>
                        <p class="text-color-light opacity-6">Completa el formulario y un especialista de producto se contactará contigo en menos de 24 horas.</p>
                    </div>

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

                    {{-- 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. Te responderemos pronto.') }}
                    </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 class="card border-0 deluxe-card">
                        <div class="card-body p-5">
                            <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 mb-4">
                                        <label class="form-label mb-1 text-2 font-weight-semibold text-uppercase" 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-3" name="name" id="name" required {{ $isLoggedClient ? 'readonly' : '' }} style="background-color: var(--secondary); border: 1px solid var(--primary-rgba-20); color: var(--light);">
                                    </div>
                                    <div class="form-group col-md-6 mb-4">
                                        <label class="form-label mb-1 text-2 font-weight-semibold text-uppercase" 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-3" name="email" id="email" required {{ $isLoggedClient ? 'readonly' : '' }} style="background-color: var(--secondary); border: 1px solid var(--primary-rgba-20); color: var(--light);">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6 mb-4">
                                        <label class="form-label mb-1 text-2 font-weight-semibold text-uppercase" 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-3" name="phone" id="phone" style="background-color: var(--secondary); border: 1px solid var(--primary-rgba-20); color: var(--light);">
                                    </div>
                                    <div class="form-group col-md-6 mb-4">
                                        <label class="form-label mb-1 text-2 font-weight-semibold text-uppercase" style="color: var(--quaternary);">{{ __('Motivo del contacto') }} *</label>
                                        <select data-msg-required="{{ __('Por favor selecciona un asunto.') }}" class="form-control text-3 h-auto py-3" name="subject" id="subject" required style="background-color: var(--secondary); border: 1px solid var(--primary-rgba-20); color: var(--light);">
                                            <option value="" style="color: var(--quaternary);">{{ __('Selecciona un motivo...') }}</option>
                                            <option value="Consulta Comercial / Ventas">{{ __('Consulta Comercial / Ventas') }}</option>
                                            <option value="Partnerships / Agencias">{{ __('Partnerships / Agencias') }}</option>
                                            <option value="Dudas sobre la plataforma">{{ __('Dudas sobre la plataforma') }}</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 font-weight-semibold text-uppercase" style="color: var(--quaternary);">{{ __('Mensaje') }} *</label>
                                        <textarea maxlength="5000" data-msg-required="{{ __('Por favor ingresa tu mensaje.') }}" rows="5" class="form-control text-3 h-auto py-3" name="message" id="message" required placeholder="{{ __('Cuéntanos en qué podemos ayudarte...') }}" style="background-color: var(--secondary); border: 1px solid var(--primary-rgba-20); color: var(--light);"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-12 mb-0 text-center">
                                        <button type="submit" class="btn btn-primary btn-modern font-weight-bold px-5 py-3 rounded-0 w-100" data-loading-text="{{ __('Enviando...') }}">{{ __('Enviar Mensaje') }}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- Contact Channels Footer --}}
                    <div class="row text-center mt-5">
                        @if(config('site.contact.email'))
                        <div class="col-sm-6 mb-4 mb-sm-0">
                            <i class="fas fa-envelope text-color-primary text-5 mb-2"></i>
                            <p class="text-color-light font-weight-semibold mb-0">Envíanos un email</p>
                            <a href="mailto:{{ config('site.contact.email') }}" class="text-color-primary">{{ config('site.contact.email') }}</a>
                        </div>
                        @endif
                        @if(config('site.contact.phone'))
                        <div class="col-sm-6">
                            <i class="fas fa-phone text-color-primary text-5 mb-2"></i>
                            <p class="text-color-light font-weight-semibold mb-0">Llámanos</p>
                            <a href="tel:{{ config('site.contact.phone') }}" class="text-color-primary">{{ config('site.contact.phone') }}</a>
                        </div>
                        @endif
                    </div>

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

@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