document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById("applicationForm") || document.getElementById("formCaptura");
    if (!form) return; // Si no hay formulario, salimos y evitamos errores


    // Función para mostrar alertas
    function showAlert(formElement, message, type = 'danger') {
        let alertDiv = formElement.querySelector('.alert-container');
        if (!alertDiv) {
            alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-container`;
            alertDiv.style.marginTop = '15px';
            formElement.prepend(alertDiv);
        }
        alertDiv.textContent = message;
        alertDiv.style.display = 'block';
        setTimeout(() => {
            alertDiv.style.display = 'none';
        }, 5000);
    }

    // Contadores globales
    let educationCount = 1;
    let experienceCount = 1;

    // Función común para agregar campos (educación y experiencia)
    function addField(containerId, fieldType, maxCount, fieldHTML) {
        const container = document.getElementById(containerId);
        let count = fieldType === 'Education' ? educationCount : experienceCount;

        if (count >= maxCount) {
            showAlert(form, `Solo puedes agregar hasta ${maxCount} registros de ${fieldType}`, 'warning');
            return;
        }

        container.insertAdjacentHTML('beforeend', fieldHTML(count));
        count++;

        if (fieldType === 'Education') {
            educationCount = count;
            if (educationCount >= maxCount) document.getElementById(`addEducation`).disabled = true;
        } else {
            experienceCount = count;
            if (experienceCount >= maxCount) document.getElementById(`addExperience`).disabled = true;
        }

        // Evento para eliminar el campo
        const removeBtn = container.lastElementChild.querySelector('.remove-field');
        removeBtn.addEventListener('click', function() {
            this.closest(`.${fieldType.toLowerCase()}-item`).remove();
            if (fieldType === 'Education') educationCount--;
            else experienceCount--;

            document.getElementById(`add${fieldType}`).disabled = false;
        });
    }

    // Creación de campos de educación y experiencia
    function createEducationHTML(newIndex) {
        return `
        <div class="education-item row g-3 mb-3 border-top pt-3">
            <div class="col-md-6">
                <label class="form-label">Institución *</label>
                <input type="text" class="form-control" name="education[${newIndex}][institucion]" required>
                <div class="invalid-feedback">Por favor ingrese la institución</div>
            </div>
            <div class="col-md-6">
                <label class="form-label">Título Obtenido *</label>
                <input type="text" class="form-control" name="education[${newIndex}][titulo]" required>
                <div class="invalid-feedback">Por favor ingrese el título obtenido</div>
            </div>
            <div class="col-md-4">
                <label class="form-label">Fecha de Inicio *</label>
                <input type="month" class="form-control" name="education[${newIndex}][inicio]" required>
                <div class="invalid-feedback">Por favor ingrese la fecha de inicio</div>
            </div>
            <div class="col-md-4">
                <label class="form-label">Fecha de Término</label>
                <input type="month" class="form-control" name="education[${newIndex}][fin]">
            </div>
            <div class="col-md-4">
                <label class="form-label">¿Estudia actualmente aquí?</label>
                <select class="form-select" name="education[${newIndex}][actualmente]">
                    <option value="0">No</option>
                    <option value="1">Sí</option>
                </select>
            </div>
            <div class="col-12 text-end">
                <button type="button" class="btn btn-sm btn-outline-danger remove-field">
                    <i class="fas fa-trash me-1"></i> Eliminar
                </button>
            </div>
        </div>
        `;
    }

    function createExperienceHTML(newIndex) {
        return `
        <div class="experience-item row g-3 mb-3 border-top pt-3">
            <div class="col-md-6">
                <label class="form-label">Empresa *</label>
                <input type="text" class="form-control" name="experience[${newIndex}][empresa]" required>
            </div>
            <div class="col-md-6">
                <label class="form-label">Puesto *</label>
                <input type="text" class="form-control" name="experience[${newIndex}][puesto]" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Fecha de Inicio *</label>
                <input type="month" class="form-control" name="experience[${newIndex}][inicio]" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Fecha de Término</label>
                <input type="month" class="form-control" name="experience[${newIndex}][fin]">
            </div>
            <div class="col-md-4">
                <label class="form-label">¿Trabaja Actualmente?</label>
                <select class="form-select" name="experience[${newIndex}][trabaja_actualmente]">
                    <option value="0">No</option>
                    <option value="1">Sí</option>
                </select>
            </div>
            <div class="col-12 text-end">
                <button type="button" class="btn btn-sm btn-outline-danger remove-field">
                    <i class="fas fa-trash me-1"></i> Eliminar
                </button>
            </div>
        </div>
        `;
    }

    document.getElementById('addEducation').addEventListener('click', function() {
        addField('educationContainer', 'Education', 2, createEducationHTML);
    });

    document.getElementById('addExperience').addEventListener('click', function() {
        addField('experienceContainer', 'Experience', 2, createExperienceHTML);
    });

    // Formateo del teléfono
    const phoneInput = document.getElementById('telefono');
    if (phoneInput) {
        phoneInput.addEventListener('input', function(e) {
            const value = e.target.value.replace(/\D/g, '');
            e.target.value = value.length > 3 ? `(${value.slice(0,3)}) ${value.slice(3,7)} ${value.slice(7,10)}` : value;
        });
    }

    // Evento de envío del formulario (nuevo código agregado)
    form.addEventListener("submit", async function(event) {
        event.preventDefault(); // Evita el comportamiento por defecto de enviar el formulario y recargar la página

        // Validar el formulario antes de enviar
        if (!form.checkValidity()) {
            event.stopPropagation();
            form.classList.add('was-validated');
            showAlert(form, "Por favor complete todos los campos requeridos", 'danger');
            return;
        }

        const formData = new FormData(form);
        
        // Convertir educación y experiencia en JSON antes de enviarlas
        let educacion = [];
        let experiencia = [];

        document.querySelectorAll('.education-item').forEach(item => {
            educacion.push({
                institucion: item.querySelector('input[name^="education["]').value,
                titulo: item.querySelector('input[name^="education["][name$="[titulo]"]').value,
                inicio: item.querySelector('input[name^="education["][name$="[inicio]"]').value,
                fin: item.querySelector('input[name^="education["][name$="[fin]"]').value || null,
                actualmente: item.querySelector('select[name^="education["][name$="[actualmente]"]').value
            });
        });

        document.querySelectorAll('.experience-item').forEach(item => {
            experiencia.push({
                empresa: item.querySelector('input[name^="experience["][name$="[empresa]"]').value,
                puesto: item.querySelector('input[name^="experience["][name$="[puesto]"]').value,
                inicio: item.querySelector('input[name^="experience["][name$="[inicio]"]').value,
                fin: item.querySelector('input[name^="experience["][name$="[fin]"]').value || null,
                actualmente: item.querySelector('select[name^="experience["][name$="[trabaja_actualmente]"]').value
            });
        });

        formData.append("educacion", JSON.stringify(educacion));
        formData.append("experiencia", JSON.stringify(experiencia));

        // Si existe el campo PDV sugerido (solo en capture.php), lo añadimos
            const pdvSugeridoInput = document.getElementById("pdv_sugerido");
            if (pdvSugeridoInput) {
                const pdvValue = pdvSugeridoInput.value.trim().normalize("NFD").replace(/[\u0300-\u036f]/g, "").toUpperCase();
                formData.append("pdv_sugerido", pdvValue);
            }
    
        try {
            let response = await fetch("../../backend/perfil/guardar_aspirante.php", {
                method: "POST",
                body: formData
            });

            let result = await response.json();

            if (result.status === "success") {
                // Mostrar modal con folio
                document.getElementById('folioGenerado').textContent = result.folio;
                const modal = new bootstrap.Modal(document.getElementById('modalFolioGenerado'));
                modal.show();
            
                form.reset();
                form.classList.remove('was-validated');
            
                // Resetear contadores
                educationCount = 1;
                experienceCount = 1;
                document.getElementById('educationContainer').innerHTML = '';
                document.getElementById('experienceContainer').innerHTML = '';
            
                // Habilitar botones de agregar
                document.getElementById('addEducation').disabled = false;
                document.getElementById('addExperience').disabled = false;
            }
             else {
                showAlert(form, "Error al registrar aspirante: " + result.message, 'danger');
            }
        } catch (error) {
            console.error("Error en la solicitud:", error);
            showAlert(form, "Hubo un problema al enviar los datos.", 'danger');
        }
    });
});