https://humanoseguros.com/wp-content/themes/humano-seguros/js/carnet-solicitud-handler.js

1document.addEventListener('DOMContentLoaded', function() {
2    const carnetForm = document.querySelector('.carnet-solicitud-form');
3    if (!carnetForm) return;
4
5    // Elementos principales
6    const selectionSection = document.getElementById('carnet-selection');
7    const formFisico = document.getElementById('form-fisico');
8    const infoDigital = document.getElementById('info-digital');
9    const cardFisico = document.getElementById('card-fisico');
10    const cardDigital = document.getElementById('card-digital');
11    const btnCancelar = document.getElementById('btn-cancelar-carnet');
12    const btnBackDigital = document.getElementById('btn-back-digital');
13
14    // Función para resetear la selección
15    function resetSelection() {
16        // Ocultar todas las secciones de contenido
17        if (formFisico) formFisico.style.display = 'none';
18        if (infoDigital) infoDigital.style.display = 'none';
19        
20        // Remover la clase selected de todos los cards
21        document.querySelectorAll('.carnet-option-card').forEach(card => {
22            card.classList.remove('selected');
23        });
24
25        // Limpiar el formulario
26        const form = carnetForm.querySelector('form');
27        if (form) {
28            form.reset();
29        }
30    }
31
32    // Función para mostrar el formulario de carnet físico
33    function showFormFisico() {
34        // Mostrar el formulario debajo de los cards
35        if (formFisico) formFisico.style.display = 'block';
36        if (infoDigital) infoDigital.style.display = 'none';
37        
38        // Agregar clase selected al card
39        if (cardFisico) cardFisico.classList.add('selected');
40        if (cardDigital) cardDigital.classList.remove('selected');
41    }
42
43    // Función para mostrar la información de carnet digital
44    function showInfoDigital() {
45        // Mostrar la información debajo de los cards
46        if (formFisico) formFisico.style.display = 'none';
47        if (infoDigital) infoDigital.style.display = 'block';
48        
49        // Agregar clase selected al card
50        if (cardDigital) cardDigital.classList.add('selected');
51        if (cardFisico) cardFisico.classList.remove('selected');
52    }
53
54    // Event listeners para los cards de selección
55    if (cardFisico) {
56        cardFisico.addEventListener('click', function() {
57            showFormFisico();
58        });
59    }
60
61    if (cardDigital) {
62        cardDigital.addEventListener('click', function() {
63            showInfoDigital();
64        });
65    }
66
67    // Event listener para el botón cancelar
68    if (btnCancelar) {
69        btnCancelar.addEventListener('click', function() {
70            resetSelection();
71        });
72    }
73
74    // Elementos del formulario
75    const nombreAsegurado = document.getElementById('nombre-asegurado');
76    const cedulaInput = document.getElementById('cedula-pasaporte-carnet');
77    const motivoComentarios = document.getElementById('motivo-comentarios');
78    const submitButton = carnetForm.querySelector('input[type="submit"]');
79
80    // Función para validar todos los campos
81    function validateForm() {
82        let isValid = true;
83
84        // Validar nombre del asegurado
85        if (!nombreAsegurado || !nombreAsegurado.value.trim()) {
86            isValid = false;
87        }
88
89        // Validar cédula/pasaporte
90        if (!cedulaInput || !cedulaInput.value.trim()) {
91            isValid = false;
92        } else {
93            // Validar longitud de cédula (9-11 dígitos)
94            const cedulaLength = cedulaInput.value.length;
95            if (cedulaLength < 9 || cedulaLength > 11) {
96                isValid = false;
97            }
98        }
99
100        // Validar motivo y comentarios
101        if (!motivoComentarios || !motivoComentarios.value.trim()) {
102            isValid = false;
103        }
104
105        // Habilitar o deshabilitar el botón de enviar
106        if (submitButton) {
107            if (isValid) {
108                submitButton.removeAttribute('disabled');
109            } else {
110                submitButton.setAttribute('disabled', 'disabled');
111            }
112        }
113
114        return isValid;
115    }
116
117    // Deshabilitar el botón de enviar por defecto
118    if (submitButton) {
119        submitButton.setAttribute('disabled', 'disabled');
120    }
121
122    // Formatear el campo de cédula/pasaporte (solo números, máximo 11 dígitos)
123    if (cedulaInput) {
124        cedulaInput.addEventListener('input', function() {
125            // Remover cualquier carácter que no sea número
126            let value = this.value.replace(/\D/g, '');
127            // Limitar a 11 dígitos
128            if (value.length > 11) {
129                value = value.substring(0, 11);
130            }
131            this.value = value;
132            // Validar el formulario en tiempo real
133            validateForm();
134        });
135    }
136
137    // Agregar event listeners para validación en tiempo real
138    if (nombreAsegurado) {
139        nombreAsegurado.addEventListener('input', validateForm);
140    }
141
142    if (motivoComentarios) {
143        motivoComentarios.addEventListener('input', validateForm);
144    }
145
146    // Validación del formulario antes de enviar
147    if (submitButton) {
148        submitButton.addEventListener('click', function(e) {
149            if (!validateForm()) {
150                e.preventDefault();
151                return false;

152            }
153        });
154    }
155
156});