{% extends 'base.html.twig' %}
{% block title %}Contacto - Tierra a la Vista{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
.error-msg-custom {
color: #dc3545;
font-size: 0.75rem;
margin-top: 5px;
display: none;
}
.input-form.is-invalid-field {
border-color: #dc3545 !important;
}
textarea {
width: 100%;
border: 0 !important;
outline: none !important;
background: transparent !important;
resize: none;
padding: 5px 0 !important;
min-height: 100px;
}
.input-form label {
display: block;
font-weight: bold;
margin-bottom: 5px;
color: #2C2C29;
}
form ul {
list-style: none;
padding-left: 0;
margin-top: 5px;
}
form ul li {
color: #dc3545;
font-size: 0.75rem;
}
</style>
{% endblock %}
{% block body %}
<div class="nosotros-contacto py-5">
<div class="container-tierra">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<div class="text-center mb-5">
<img src="/images/svg/chat-black.svg" alt="" class="icon mb-3" style="width: 50px; height: 50px;"/>
<h1 class="fw-bold">Contáctanos</h1>
</div>
{% for message in app.flashes('error') %}
<div class="alert alert-danger text-center mb-4">
{{ message }}
</div>
{% endfor %}
<div class="form-container-nosotros">
{{ form_start(form, {'attr': {'id': 'nosotros-contacto-form', 'novalidate': 'novalidate'}}) }}
<div class="form-group mb-4">
<div class="input-form">
{{ form_label(form.nombre) }}
{{ form_widget(form.nombre, {'attr': {'class': 'js-validate validate-text'}}) }}
</div>
<div class="error-msg-custom" id="error-nombre">Este campo es obligatorio</div>
{{ form_errors(form.nombre) }}
</div>
<div class="form-group mb-4">
<div class="input-form">
{{ form_label(form.apellido) }}
{{ form_widget(form.apellido, {'attr': {'class': 'js-validate validate-text'}}) }}
</div>
<div class="error-msg-custom" id="error-apellido">Este campo es obligatorio</div>
{{ form_errors(form.apellido) }}
</div>
<div class="form-group mb-4">
<div class="input-form">
{{ form_label(form.telefono) }}
{{ form_widget(form.telefono, {'attr': {'class': 'js-validate validate-number'}}) }}
</div>
<div class="error-msg-custom" id="error-telefono">Este campo es obligatorio</div>
{{ form_errors(form.telefono) }}
</div>
<div class="form-group mb-4">
<div class="input-form">
{{ form_label(form.correo) }}
{{ form_widget(form.correo, {'attr': {'class': 'js-validate', 'data-validate': 'email'}}) }}
</div>
<div class="error-msg-custom" id="error-correo">Ingrese un correo electrónico válido</div>
{{ form_errors(form.correo) }}
</div>
<div class="form-group mb-4">
<div class="input-form">
{{ form_label(form.documento) }}
{{ form_widget(form.documento, {'attr': {'class': 'js-validate'}}) }}
</div>
<div class="error-msg-custom" id="error-documento">Este campo es obligatorio</div>
{{ form_errors(form.documento) }}
</div>
<div class="form-group mb-5">
<div class="input-form" style="height: auto;">
{{ form_label(form.comentario) }}
{{ form_widget(form.comentario) }}
</div>
</div>
<div class="text-center">
<button type="submit" class="btn-g borde px-5 py-3">Enviar</button>
<div class="mt-4">
<a href="{{ path('nosotros', {'_locale': locale}) }}" class="text-dark small text-decoration-none">← Volver a Nosotros</a>
</div>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('nosotros-contacto-form');
const inputsText = document.querySelectorAll('.validate-text');
inputsText.forEach(input => {
input.addEventListener('input', function () {
this.value = this.value.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑ\s]/g, '');
});
});
const inputsNumber = document.querySelectorAll('.validate-number');
inputsNumber.forEach(input => {
input.addEventListener('input', function () {
this.value = this.value.replace(/\D/g, '');
});
});
const allInputs = form.querySelectorAll('input, textarea');
allInputs.forEach(input => {
input.addEventListener('input', function() {
const group = this.closest('.form-group');
if (this.value.trim() !== '') {
group?.querySelector('.input-form')?.classList.remove('is-invalid-field');
group?.querySelector('.error-msg-custom') ? group.querySelector('.error-msg-custom').style.display = 'none' : null;
const errorList = group?.querySelector('ul');
if (errorList) errorList.style.display = 'none';
}
});
});
const validateField = (field) => {
if (!field) return true;
const value = field.value.trim();
const type = field.getAttribute('data-validate');
const group = field.closest('.form-group');
const container = group?.querySelector('.input-form');
const errorDiv = group?.querySelector('.error-msg-custom');
let isValid = true;
if (type === 'email') {
isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
} else {
isValid = value !== '';
}
if (!isValid) {
container?.classList.add('is-invalid-field');
if (errorDiv) errorDiv.style.display = 'block';
} else {
container?.classList.remove('is-invalid-field');
if (errorDiv) errorDiv.style.display = 'none';
}
return isValid;
};
form.addEventListener('submit', function(e) {
let isFormValid = true;
const fieldsToValidate = form.querySelectorAll('.js-validate');
fieldsToValidate.forEach(field => {
if (!validateField(field)) {
isFormValid = false;
}
});
if (!isFormValid) {
e.preventDefault();
if (typeof Swal !== 'undefined') {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Por favor, revisa los errores en el formulario.',
confirmButtonColor: '#2C2C29'
});
}
} else {
// Deshabilitar botón para evitar múltiples envíos
const submitBtn = form.querySelector('button[type="submit"]');
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.innerText = 'Enviando...';
}
}
});
// Alerta de éxito
{% for message in app.flashes('success') %}
if (typeof Swal !== 'undefined') {
Swal.fire({
icon: 'success',
title: '¡Enviado!',
text: '{{ message }}',
confirmButtonColor: '#2C2C29'
});
}
{% endfor %}
});
</script>
{% endblock %}