566 lines
32 KiB
PHP
566 lines
32 KiB
PHP
@extends('template.layout')
|
|
@section('title', 'Contacto - Globo Puerto Teotihuán')
|
|
|
|
@section('content')
|
|
<!-- Hero Section -->
|
|
<section class="page-header"
|
|
style="background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); margin-top: var(--navbar-height); text-align: center; padding: 4rem 2rem; position: relative; overflow: hidden;">
|
|
<div
|
|
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 2px 2px, rgba(4,205,255,0.08) 1px, transparent 1px); background-size: 40px 40px;">
|
|
</div>
|
|
<div class="container" style="position: relative; z-index: 2;">
|
|
<div
|
|
style="display: inline-flex; align-items: center; gap: 8px; background: var(--surface); backdrop-filter: blur(10px); padding: 0.5rem 1.5rem; border-radius: 50px; margin-bottom: 1.5rem;">
|
|
<i class="fas fa-headset" style="color: var(--accent);"></i>
|
|
<span
|
|
style="color: var(--text-secondary); font-size: 0.85rem;">Atención 24/7</span>
|
|
</div>
|
|
<h1
|
|
style="font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 1rem;">
|
|
¿Listo para <span
|
|
style="color: var(--accent);">volar</span>?
|
|
</h1>
|
|
<p style="color: var(--text-secondary); font-size: 1.1rem; max-width: 600px; margin: 0 auto;">
|
|
Contáctanos y comienza tu aventura en los cielos de Teotihuacán
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tarjetas de Contacto Modernas -->
|
|
<section class="contact-cards" style="padding: 4rem 2rem; max-width: var(--max-width); margin: 0 auto;">
|
|
<div class="container">
|
|
<div class="cards-grid"
|
|
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem;">
|
|
|
|
<!-- Tarjeta 1 - Ubicación -->
|
|
<div class="contact-card-modern"
|
|
style="background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 2rem; text-align: center; transition: all var(--transition-base); position: relative; overflow: hidden;">
|
|
<div
|
|
style="position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base);">
|
|
</div>
|
|
<div
|
|
style="width: 70px; height: 70px; background: var(--accent-gradient); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: transform var(--transition-fast);">
|
|
<i class="fas fa-map-marker-alt" style="font-size: 2rem; color: white;"></i>
|
|
</div>
|
|
<h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary);">
|
|
Ubicación</h3>
|
|
<p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem;">
|
|
Carretera Federal México-Tulancingo-Ecatepec Km 28.1<br>
|
|
Constitucion de 1917, 55850 San Martín Centro, Méx.
|
|
</p>
|
|
<a href="https://maps.google.com/?q=Carretera+Federal+Mexico+Tulancingo+Ecatepec+Km+28.1"
|
|
target="_blank"
|
|
style="color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; transition: gap var(--transition-fast);">
|
|
<i class="fas fa-directions"></i> Cómo llegar
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Tarjeta 2 - Teléfonos -->
|
|
<div class="contact-card-modern"
|
|
style="background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 2rem; text-align: center; transition: all var(--transition-base); position: relative; overflow: hidden;">
|
|
<div
|
|
style="position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base);">
|
|
</div>
|
|
<div
|
|
style="width: 70px; height: 70px; background: var(--accent-gradient); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: transform var(--transition-fast);">
|
|
<i class="fas fa-phone-alt" style="font-size: 2rem; color: white;"></i>
|
|
</div>
|
|
<h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary);">
|
|
Teléfonos</h3>
|
|
<div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem;">
|
|
<a href="tel:+525651292249" id="tel1-contacto"
|
|
style="display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem; background: var(--surface-light); border-radius: 12px; text-decoration: none; color: var(--text-primary); transition: all var(--transition-fast);">
|
|
<i class="fab fa-whatsapp" style="color: #25D366; font-size: 1.2rem;"></i>
|
|
<span>WhatsApp: (+52) 56 51 29 2249</span>
|
|
</a>
|
|
<a href="tel:+56 51 29 2249" id="tel3-contacto"
|
|
style="display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem; background: var(--surface-light); border-radius: 12px; text-decoration: none; color: var(--text-primary); transition: all var(--transition-fast);">
|
|
<i class="fas fa-phone" style="color: var(--accent); font-size: 1.2rem;"></i>
|
|
<span>Local: (+52) 56 51 29 2249</span>
|
|
</a>
|
|
</div>
|
|
<p
|
|
style="color: var(--text-tertiary); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 6px;">
|
|
<i class="fas fa-clock"></i>
|
|
Lunes a Domingo: 6:00 AM - 6:00 PM
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tarjeta 3 - Correo -->
|
|
<div class="contact-card-modern"
|
|
style="background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 2rem; text-align: center; transition: all var(--transition-base); position: relative; overflow: hidden;">
|
|
<div
|
|
style="position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base);">
|
|
</div>
|
|
<div
|
|
style="width: 70px; height: 70px; background: var(--accent-gradient); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: transform var(--transition-fast);">
|
|
<i class="fas fa-envelope" style="font-size: 2rem; color: white;"></i>
|
|
</div>
|
|
<h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary);">
|
|
Correo Electrónico</h3>
|
|
<a href="mailto:contacto@globopuertoteotihuacan.com"
|
|
style="color: var(--accent); text-decoration: none; word-break: break-all; display: inline-block; margin-bottom: 1rem; transition: all var(--transition-fast);">
|
|
contacto@globopuertoteotihuacan.com
|
|
</a>
|
|
<p
|
|
style="color: var(--text-tertiary); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 6px;">
|
|
<i class="fas fa-reply-all"></i>
|
|
Tiempo de respuesta: 24 horas
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sección de Contacto Principal con Formulario -->
|
|
<section class="main-contact-section" style="padding: 4rem 2rem; background: var(--secondary);">
|
|
<div class="container" style="max-width: 1200px; margin: 0 auto;">
|
|
<div class="contact-wrapper"
|
|
style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; background: var(--surface); border-radius: 32px; overflow: hidden; box-shadow: var(--shadow-lg); transition: transform var(--transition-base);">
|
|
|
|
<!-- Panel Izquierdo - Información -->
|
|
<div class="info-panel"
|
|
style="background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); padding: 3rem; position: relative; overflow: hidden;">
|
|
<div
|
|
style="position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(4,205,255,0.05) 0%, transparent 70%);">
|
|
</div>
|
|
<div style="position: relative; z-index: 2;">
|
|
<div class="block-title text-left" style="text-align: left;">
|
|
<p
|
|
style="color: var(--accent); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem;">
|
|
Contáctanos</p>
|
|
<h3
|
|
style="font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary);">
|
|
¿Tienes alguna pregunta?
|
|
</h3>
|
|
</div>
|
|
|
|
<p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 2rem;">
|
|
Estamos aquí para ayudarte. Contáctanos y uno de nuestros ejecutivos te atenderá personalmente.
|
|
</p>
|
|
|
|
<!-- Horarios -->
|
|
<div style="margin-bottom: 2rem;">
|
|
<div class="info-row"
|
|
style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface-light); border-radius: 16px; margin-bottom: 1rem; transition: all var(--transition-fast);">
|
|
<div
|
|
style="width: 45px; height: 45px; background: var(--accent-gradient); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-clock" style="color: white;"></i>
|
|
</div>
|
|
<div>
|
|
<h4 style="font-weight: 600; margin-bottom: 0.25rem; color: var(--text-primary);">
|
|
Horario de atención</h4>
|
|
<p style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
Lunes a Domingo: 6:00 AM - 6:00 PM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-row"
|
|
style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface-light); border-radius: 16px; transition: all var(--transition-fast);">
|
|
<div
|
|
style="width: 45px; height: 45px; background: var(--accent-gradient); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-reply-all" style="color: white;"></i>
|
|
</div>
|
|
<div>
|
|
<h4 style="font-weight: 600; margin-bottom: 0.25rem; color: var(--text-primary);">
|
|
Tiempo de respuesta</h4>
|
|
<p style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
Máximo 24 horas hábiles
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Redes Sociales -->
|
|
<div>
|
|
<h4 style="font-size: 1rem; margin-bottom: 1rem; color: var(--text-primary);">
|
|
Síguenos en redes</h4>
|
|
<div style="display: flex; gap: 1rem;">
|
|
<a href="https://www.facebook.com/GlobopuertoTeotihuacan/" target="_blank"
|
|
class="social-link-modern"
|
|
style="width: 45px; height: 45px; background: var(--surface-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all var(--transition-fast);">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</a>
|
|
<a href="https://www.instagram.com/globopuerto.teotihuacan/" target="_blank"
|
|
class="social-link-modern"
|
|
style="width: 45px; height: 45px; background: var(--surface-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all var(--transition-fast);">
|
|
<i class="fab fa-instagram"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel Derecho - Formulario -->
|
|
<div class="form-panel" style="padding: 3rem;">
|
|
<div style="text-align: center; margin-bottom: 2rem;">
|
|
<i class="fas fa-paper-plane"
|
|
style="font-size: 2.5rem; color: var(--accent); margin-bottom: 1rem; display: inline-block;"></i>
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; color: var(--text-primary);">
|
|
Envía tu mensaje</h3>
|
|
<p style="color: var(--text-secondary);">
|
|
Completa el formulario y te responderemos pronto
|
|
</p>
|
|
</div>
|
|
|
|
<form id="form_contacto" class="modern-form">
|
|
@csrf
|
|
<div style="display: flex; flex-direction: column; gap: 1.25rem;">
|
|
<div class="form-group-modern">
|
|
<input type="text" id="nombre_contacto" name="nombre_contacto"
|
|
placeholder="Nombre completo"
|
|
style="width: 100%; padding: 1rem; background: var(--surface-light); border: 2px solid var(--border); border-radius: 12px; color: var(--text-primary); transition: all var(--transition-fast);">
|
|
<small class="error-message" id="error_nombre"
|
|
style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
|
<div class="form-group-modern">
|
|
<input type="email" id="email_contacto" name="email_contacto"
|
|
placeholder="Correo electrónico"
|
|
style="width: 100%; padding: 1rem; background: var(--surface-light); border: 2px solid var(--border); border-radius: 12px; color: var(--text-primary); transition: all var(--transition-fast);">
|
|
<small class="error-message" id="error_email"
|
|
style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
|
|
</div>
|
|
<div class="form-group-modern">
|
|
<input type="tel" id="telefono_contacto" name="telefono_contacto"
|
|
placeholder="Teléfono"
|
|
style="width: 100%; padding: 1rem; background: var(--surface-light); border: 2px solid var(--border); border-radius: 12px; color: var(--text-primary); transition: all var(--transition-fast);">
|
|
<small class="error-message" id="error_telefono"
|
|
style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group-modern">
|
|
<select id="asunto_contacto" name="asunto_contacto"
|
|
style="width: 100%; padding: 1rem; background: var(--surface-light); border: 2px solid var(--border); border-radius: 12px; color: var(--text-primary); cursor: pointer; transition: all var(--transition-fast);">
|
|
<option value="">
|
|
Selecciona un asunto</option>
|
|
<option value="reserva">Reserva de vuelo</option>
|
|
<option value="informacion">Información general</option>
|
|
<option value="grupos">Grupos y eventos especiales</option>
|
|
<option value="queja">Sugerencia o queja</option>
|
|
</select>
|
|
<small class="error-message" id="error_asunto"
|
|
style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
|
|
</div>
|
|
|
|
<div class="form-group-modern">
|
|
<textarea id="mensaje_contacto" name="mensaje_contacto"
|
|
placeholder="Escribe tu mensaje" rows="5"
|
|
style="width: 100%; padding: 1rem; background: var(--surface-light); border: 2px solid var(--border); border-radius: 12px; color: var(--text-primary); resize: vertical; transition: all var(--transition-fast);"></textarea>
|
|
<small class="error-message" id="error_mensaje"
|
|
style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
|
|
<small class="char-counter" id="char_counter"
|
|
style="display: block; color: var(--text-tertiary); font-size: 0.7rem; margin-top: 0.25rem; text-align: right;">0
|
|
/ 500 caracteres</small>
|
|
</div>
|
|
|
|
<div class="form-group-modern">
|
|
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
|
<input type="checkbox" id="privacy_checkbox"
|
|
style="width: 18px; height: 18px; cursor: pointer;">
|
|
<span style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
Acepto la <a href="#"
|
|
style="color: var(--accent); text-decoration: none;">política de privacidad</a>
|
|
</span>
|
|
</label>
|
|
<small class="error-message" id="error_privacy"
|
|
style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
|
|
</div>
|
|
|
|
<button type="button" id="btnEnviarContacto" onclick="formularioContacto()"
|
|
style="width: 100%; padding: 1rem; background: var(--accent-gradient); border: none; border-radius: 12px; color: white; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all var(--transition-base); display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden;">
|
|
<span class="btn-text">Enviar mensaje</span>
|
|
<span class="btn-loader" style="display: none;"><i class="fas fa-spinner fa-spin"></i></span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="mensaje_div" style="margin-top: 1rem;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mapa de Ubicación -->
|
|
<section class="map-section" style="padding: 4rem 2rem; max-width: var(--max-width); margin: 0 auto;">
|
|
<div class="container">
|
|
<div class="map-container-modern"
|
|
style="background: var(--surface); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); transition: all var(--transition-base);">
|
|
<div style="padding: 1.5rem; text-align: center; border-bottom: 1px solid var(--border);">
|
|
<i class="fas fa-map-marked-alt"
|
|
style="font-size: 2rem; color: var(--accent); margin-bottom: 0.5rem; display: inline-block;"></i>
|
|
<h3 style="font-size: 1.3rem; font-weight: 700; color: var(--text-primary);">
|
|
Encuéntranos</h3>
|
|
<p style="color: var(--text-secondary); margin-top: 0.5rem;">
|
|
Visítanos en nuestras instalaciones en Teotihuacán
|
|
</p>
|
|
</div>
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3762.5432!2d-98.8595!3d19.6896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1b7c8b9e3d8f7%3A0x8b7c6f5e4d3c2b1a!2sCarretera%20Federal%20Mexico-Tulancingo%20Ecatepec%20Km%2028.1!5e0!3m2!1ses!2smx!4v1700000000000!5m2!1ses!2smx"
|
|
width="100%" height="350"
|
|
style="border:0; display: block; filter: grayscale(0.3); transition: filter var(--transition-base);"
|
|
allowfullscreen="" loading="lazy"
|
|
title="Ubicación Globopuerto Teotihuacán">
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
|
|
@push('css')
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
|
|
<link rel="stylesheet" href="{{ asset('assets/css/contacto.css') }}">
|
|
<style>
|
|
/* Estilos adicionales para hover effects */
|
|
.contact-card-modern:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.contact-card-modern:hover > div:first-child {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.contact-card-modern:hover .contact-icon {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.info-row:hover {
|
|
transform: translateX(5px);
|
|
background: var(--surface) !important;
|
|
}
|
|
|
|
.social-link-modern:hover {
|
|
transform: translateY(-3px);
|
|
background: var(--accent) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.submit-btn-modern:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(4,205,255,0.3);
|
|
}
|
|
|
|
.map-container-modern:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-xl);
|
|
}
|
|
|
|
.map-container-modern:hover iframe {
|
|
filter: grayscale(0);
|
|
}
|
|
|
|
@keyframes pulseRing {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: scale(1.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('js')
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/validator/13.11.0/validator.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Inicializar contador de caracteres
|
|
const textarea = document.getElementById('mensaje_contacto');
|
|
const counter = document.getElementById('char_counter');
|
|
|
|
if(textarea && counter) {
|
|
textarea.addEventListener('input', function() {
|
|
const count = this.value.length;
|
|
counter.textContent = count + ' / 500 caracteres';
|
|
|
|
if(count > 500) {
|
|
counter.style.color = '#ff4444';
|
|
this.style.borderColor = '#ff4444';
|
|
} else {
|
|
counter.style.color = 'var(--text-tertiary)';
|
|
this.style.borderColor = 'var(--border)';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Validaciones en tiempo real
|
|
const nombreInput = document.getElementById('nombre_contacto');
|
|
const emailInput = document.getElementById('email_contacto');
|
|
const telefonoInput = document.getElementById('telefono_contacto');
|
|
|
|
if(nombreInput) {
|
|
nombreInput.addEventListener('input', function() {
|
|
if(this.value.trim().length < 3 && this.value.trim().length > 0) {
|
|
document.getElementById('error_nombre').textContent = 'El nombre debe tener al menos 3 caracteres';
|
|
document.getElementById('error_nombre').style.display = 'block';
|
|
this.style.borderColor = '#ff4444';
|
|
} else {
|
|
document.getElementById('error_nombre').style.display = 'none';
|
|
this.style.borderColor = 'var(--border)';
|
|
}
|
|
});
|
|
}
|
|
|
|
if(emailInput) {
|
|
emailInput.addEventListener('input', function() {
|
|
const isValid = validator.isEmail(this.value);
|
|
if(!isValid && this.value.length > 0) {
|
|
document.getElementById('error_email').textContent = 'Ingresa un correo electrónico válido';
|
|
document.getElementById('error_email').style.display = 'block';
|
|
this.style.borderColor = '#ff4444';
|
|
} else {
|
|
document.getElementById('error_email').style.display = 'none';
|
|
this.style.borderColor = 'var(--border)';
|
|
}
|
|
});
|
|
}
|
|
|
|
if(telefonoInput) {
|
|
telefonoInput.addEventListener('input', function() {
|
|
const phoneRegex = /^[0-9+\-\s()]{10,15}$/;
|
|
if(!phoneRegex.test(this.value) && this.value.length > 0) {
|
|
document.getElementById('error_telefono').textContent = 'Ingresa un número de teléfono válido';
|
|
document.getElementById('error_telefono').style.display = 'block';
|
|
this.style.borderColor = '#ff4444';
|
|
} else {
|
|
document.getElementById('error_telefono').style.display = 'none';
|
|
this.style.borderColor = 'var(--border)';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Función principal para enviar el formulario
|
|
function formularioContacto() {
|
|
// Limpiar mensajes de error previos
|
|
document.querySelectorAll('.error-message').forEach(el => el.style.display = 'none');
|
|
document.querySelectorAll('input, select, textarea').forEach(el => el.style.borderColor = 'var(--border)');
|
|
|
|
let isValid = true;
|
|
|
|
// Validar nombre
|
|
const nombre = document.getElementById('nombre_contacto');
|
|
if(!nombre.value.trim()) {
|
|
showError('error_nombre', 'El nombre es obligatorio');
|
|
nombre.style.borderColor = '#ff4444';
|
|
isValid = false;
|
|
} else if(nombre.value.trim().length < 3) {
|
|
showError('error_nombre', 'El nombre debe tener al menos 3 caracteres');
|
|
nombre.style.borderColor = '#ff4444';
|
|
isValid = false;
|
|
}
|
|
|
|
// Validar email
|
|
const email = document.getElementById('email_contacto');
|
|
if(!email.value.trim()) {
|
|
showError('error_email', 'El correo electrónico es obligatorio');
|
|
email.style.borderColor = '#ff4444';
|
|
isValid = false;
|
|
} else if(!validator.isEmail(email.value.trim())) {
|
|
showError('error_email', 'Ingresa un correo electrónico válido');
|
|
email.style.borderColor = '#ff4444';
|
|
isValid = false;
|
|
}
|
|
|
|
// Validar teléfono
|
|
const telefono = document.getElementById('telefono_contacto');
|
|
const phoneRegex = /^[0-9+\-\s()]{10,15}$/;
|
|
if(telefono.value.trim() && !phoneRegex.test(telefono.value.trim())) {
|
|
showError('error_telefono', 'Ingresa un número de teléfono válido');
|
|
telefono.style.borderColor = '#ff4444';
|
|
isValid = false;
|
|
}
|
|
|
|
// Validar asunto
|
|
const asunto = document.getElementById('asunto_contacto');
|
|
if(!asunto.value) {
|
|
showError('error_asunto', 'Selecciona un asunto');
|
|
asunto.style.borderColor = '#ff4444';
|
|
isValid = false;
|
|
}
|
|
|
|
// Validar mensaje
|
|
const mensaje = document.getElementById('mensaje_contacto');
|
|
if(!mensaje.value.trim()) {
|
|
showError('error_mensaje', 'El mensaje es obligatorio');
|
|
mensaje.style.borderColor = '#ff4444';
|
|
isValid = false;
|
|
} else if(mensaje.value.trim().length > 500) {
|
|
showError('error_mensaje', 'El mensaje no puede exceder los 500 caracteres');
|
|
mensaje.style.borderColor = '#ff4444';
|
|
isValid = false;
|
|
}
|
|
|
|
// Validar checkbox de privacidad
|
|
const privacy = document.getElementById('privacy_checkbox');
|
|
if(!privacy.checked) {
|
|
showError('error_privacy', 'Debes aceptar la política de privacidad');
|
|
isValid = false;
|
|
}
|
|
|
|
if(isValid) {
|
|
// Mostrar loader
|
|
const btn = document.getElementById('btnEnviarContacto');
|
|
const btnText = btn.querySelector('.btn-text');
|
|
const btnLoader = btn.querySelector('.btn-loader');
|
|
const btnArrow = btn.querySelector('.fa-arrow-right');
|
|
|
|
btnText.textContent = 'Enviando...';
|
|
btnLoader.style.display = 'inline-block';
|
|
btnArrow.style.display = 'none';
|
|
btn.disabled = true;
|
|
|
|
// Simular envío (aquí iría tu llamada AJAX real)
|
|
setTimeout(() => {
|
|
mostrarMensaje('¡Mensaje enviado con éxito! Nos pondremos en contacto contigo pronto.', 'success');
|
|
|
|
// Resetear formulario
|
|
document.getElementById('form_contacto').reset();
|
|
|
|
// Resetear botón
|
|
btnText.textContent = 'Enviar mensaje';
|
|
btnLoader.style.display = 'none';
|
|
btnArrow.style.display = 'inline-block';
|
|
btn.disabled = false;
|
|
|
|
// Resetear contador
|
|
const counter = document.getElementById('char_counter');
|
|
if(counter) counter.textContent = '0 / 500 caracteres';
|
|
}, 2000);
|
|
}
|
|
}
|
|
|
|
function showError(elementId, message) {
|
|
const errorElement = document.getElementById(elementId);
|
|
if(errorElement) {
|
|
errorElement.textContent = message;
|
|
errorElement.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function mostrarMensaje(mensaje, tipo) {
|
|
const divMensaje = document.getElementById('mensaje_div');
|
|
if(divMensaje) {
|
|
const color = tipo === 'success' ? '#4CAF50' : '#f44336';
|
|
divMensaje.innerHTML = `
|
|
<div style="background: ${color}20; border: 2px solid ${color}; border-radius: 12px; padding: 1rem; text-align: center;">
|
|
<i class="fas ${tipo === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}" style="color: ${color}; margin-right: 10px;"></i>
|
|
<span style="color: ${color};">${mensaje}</span>
|
|
</div>
|
|
`;
|
|
|
|
setTimeout(() => {
|
|
divMensaje.innerHTML = '';
|
|
}, 5000);
|
|
}
|
|
}
|
|
</script>
|
|
@endpush |