templates/_partials/courses/_modal_solicitud.html.twig line 1

Open in your IDE?
  1. <div class="modal fade" id="solicitudModal" tabindex="-1" role="dialog" aria-labelledby="solicitudModalLabel" aria-hidden="true">
  2. <div class="modal-dialog" role="document">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <h5 class="modal-title" id="solicitudModalLabel">{{ 'modal.solicitud.title'|trans({}, 'courses')|default('Solicitar información sobre el curso') }}</h5>
  6. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  7. <span aria-hidden="true">&times;</span>
  8. </button>
  9. </div>
  10. <div class="modal-body">
  11. <form id="solicitudForm">
  12. <input type="hidden" id="actividadId" name="actividadId" value="">
  13. <input type="hidden" id="actividadTipo" name="actividadTipo" value="">
  15. <div class="form-group">
  16. <label for="nombre">{{ 'modal.solicitud.nombre'|trans({}, 'courses')|default('Nombre completo') }} *</label>
  17. <input type="text" class="form-control" id="nombre" name="nombre" required>
  18. <div class="invalid-feedback" id="error-nombre"></div>
  19. </div>
  21. <div class="form-group">
  22. <label for="email">{{ 'modal.solicitud.email'|trans({}, 'courses')|default('Correo electrónico') }} *</label>
  23. <input type="email" class="form-control" id="email" name="email" required>
  24. <div class="invalid-feedback" id="error-email"></div>
  25. </div>
  27. <div class="form-group">
  28. <label for="telefono">{{ 'modal.solicitud.telefono'|trans({}, 'courses')|default('Teléfono') }} *</label>
  29. <input type="tel" class="form-control" id="telefono" name="telefono" required>
  30. <div class="invalid-feedback" id="error-telefono"></div>
  31. </div>
  33. <div class="form-group">
  34. <label for="comentario">{{ 'modal.solicitud.comentario'|trans({}, 'courses')|default('Comentarios o consultas') }}</label>
  35. <textarea class="form-control" id="comentario" name="comentario" rows="3"></textarea>
  36. <div class="invalid-feedback" id="error-comentario"></div>
  37. </div>
  38. </form>
  39. </div>
  40. <div class="modal-footer">
  41. <button type="button" class="btn btn-secondary" data-dismiss="modal">
  42. {{ 'modal.solicitud.cancel'|trans({}, 'courses')|default('Cancelar') }}
  43. </button>
  44. <button type="button" class="btn btn-primary" id="submitSolicitud">
  45. {{ 'modal.solicitud.submit'|trans({}, 'courses')|default('Enviar solicitud') }}
  46. </button>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  52. <script>
  53. document.addEventListener('DOMContentLoaded', function() {
  54. // Inicializar los botones de solicitud
  55. const solicitudBtns = document.querySelectorAll('.btn-apply');
  56. const solicitudModal = document.getElementById('solicitudModal');
  58. // Ya no necesitamos manejar los botones de solicitud a través de JavaScript
  59. // para usuarios logueados, pero sí mantener la funcionalidad para usuarios no logueados
  60. solicitudBtns.forEach(btn => {
  61. // Solo manejamos los botones que no tienen atributo href (los que no se han convertido en enlaces)
  62. if (!btn.hasAttribute('href')) {
  63. btn.addEventListener('click', function() {
  64. const actividadId = this.dataset.actividadId;
  65. const actividadTipo = this.dataset.actividadTipo;
  67. // Mostrar el modal solo para usuarios no registrados
  68. if (!document.body.classList.contains('logged-in')) {
  69. document.getElementById('actividadId').value = actividadId;
  70. document.getElementById('actividadTipo').value = actividadTipo;
  71. $('#solicitudModal').modal('show');
  72. }
  73. });
  74. }
  75. });
  77. // Manejar el envío del formulario
  78. document.getElementById('submitSolicitud').addEventListener('click', function() {
  79. const form = document.getElementById('solicitudForm');
  80. const actividadId = document.getElementById('actividadId').value;
  81. const actividadTipo = document.getElementById('actividadTipo').value;
  83. // Limpiar mensajes de error previos
  84. form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
  85. form.querySelectorAll('.invalid-feedback').forEach(el => el.textContent = '');
  87. // Recoger datos del formulario
  88. const formData = {
  89. nombre: document.getElementById('nombre').value,
  90. email: document.getElementById('email').value,
  91. telefono: document.getElementById('telefono').value,
  92. comentario: document.getElementById('comentario').value
  93. };
  95. // Enviar solicitud
  96. enviarSolicitudUsuarioNoRegistrado(actividadTipo, actividadId, formData);
  97. });
  99. // Función para enviar solicitud de usuario no registrado
  100. function enviarSolicitudUsuarioNoRegistrado(tipo, id, formData) {
  101. fetch(`/${document.documentElement.lang}/courses/ajax/muestra-interes/${tipo}/${id}`, {
  102. method: 'POST',
  103. headers: {
  104. 'X-Requested-With': 'XMLHttpRequest',
  105. 'Content-Type': 'application/json'
  106. },
  107. body: JSON.stringify(formData),
  108. credentials: 'same-origin'
  109. })
  110. .then(response => response.json())
  111. .then(data => {
  112. if (data.success) {
  113. $('#solicitudModal').modal('hide');
  114. mostrarMensajeExito(data.message);
  116. // Limpiar formulario
  117. document.getElementById('solicitudForm').reset();
  118. } else {
  119. // Mostrar errores en el formulario
  120. if (data.errors) {
  121. Object.keys(data.errors).forEach(field => {
  122. const fieldName = field.replace(/\[|\]/g, '');
  123. const inputElement = document.getElementById(fieldName);
  124. const errorElement = document.getElementById(`error-${fieldName}`);
  126. if (inputElement && errorElement) {
  127. inputElement.classList.add('is-invalid');
  128. errorElement.textContent = data.errors[field];
  129. }
  130. });
  131. } else {
  132. mostrarMensajeError(data.message);
  133. }
  134. }
  135. })
  136. .catch(error => {
  137. console.error('Error:', error);
  138. mostrarMensajeError('{{ 'error.general'|trans({}, 'courses')|default('Ha ocurrido un error. Inténtelo de nuevo más tarde.') }}');
  139. });
  140. }
  142. // Función para mostrar mensaje de éxito
  143. function mostrarMensajeExito(mensaje) {
  144. const alertDiv = document.createElement('div');
  145. alertDiv.className = 'alert alert-success alert-dismissible fade show mt-3';
  146. alertDiv.innerHTML = `
  147. ${mensaje}
  148. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  149. <span aria-hidden="true">&times;</span>
  150. </button>
  151. `;
  153. // Insertar alerta después del primer elemento con clase container
  154. const container = document.querySelector('.container');
  155. if (container) {
  156. container.prepend(alertDiv);
  158. // Desaparecer después de 5 segundos
  159. setTimeout(() => {
  160. alertDiv.classList.remove('show');
  161. setTimeout(() => alertDiv.remove(), 150);
  162. }, 5000);
  163. }
  164. }
  166. // Función para mostrar mensaje de error
  167. function mostrarMensajeError(mensaje) {
  168. const alertDiv = document.createElement('div');
  169. alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-3';
  170. alertDiv.innerHTML = `
  171. ${mensaje}
  172. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  173. <span aria-hidden="true">&times;</span>
  174. </button>
  175. `;
  177. // Insertar alerta después del primer elemento con clase container
  178. const container = document.querySelector('.container');
  179. if (container) {
  180. container.prepend(alertDiv);
  182. // Desaparecer después de 5 segundos
  183. setTimeout(() => {
  184. alertDiv.classList.remove('show');
  185. setTimeout(() => alertDiv.remove(), 150);
  186. }, 5000);
  187. }
  188. }
  189. });
  190. </script>