// Punto de entrada para el script de la página del profesor
function init() {
    setUpModal(); // Inicializa el modal
    setUpCategoryAndSubcategorySelects(); // Inicializa los selects de categoría y subcategoría

    // Obtiene el botón de envío del formulario
    const submitButton = document.getElementById("submitCreateCourse");

    // Verifica si el botón existe
    if (!submitButton) return;

    // Event listener para abrir el modal
    submitButton.addEventListener("click", function (event) {
        event.preventDefault();

        // Validar el formulario antes de enviarlo
        const form = validateForm();

        // Si el formulario no es válido, no se envía
        if (!form) {
            return;
        }

        // Si el formulario es válido, enviar el formulario
        submitForm(form);
    });
}

// Función para enviar el formulario
function submitForm(form) {
    const action = form.getAttribute("action");
    const formData = new FormData(form);

    fetch(action, {
        method: "POST",
        headers: {
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
        },
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.course && data.course.id) {
            window.location.href = `/teacher/course/${data.course.id}/edit`;
        } else {
            // Manejar error de validación o respuesta inesperada
            console.log("An error occurred. Please check your input and try again.");
        }
    })
    .catch(error => {
        console.log("An error occurred. Please try again. " + error);
    });
}

// Migrado a utils.js para ser reutilizado
// function setUpCategoryAndSubcategorySelects() {
//     const selectCategory = document.getElementById("courseCategory");
//     const containerSubcategory = document.getElementById(
//         "subcategoryContainer"
//     );
//     const selectSubcategory = document.getElementById("courseSubcategory");

//     if (!selectCategory || !containerSubcategory || !selectSubcategory) return;

//     selectCategory.addEventListener("change", function () {
//         const selectedCategoryId = selectCategory.value;

//         // Mostrar el contenedor de subcategorías
//         containerSubcategory.classList.remove("d-none");
//         containerSubcategory.classList.add("d-block");

//         // Limpiar subcategorías anteriores
//         selectSubcategory.innerHTML =
//             '<option value="" disabled selected>Select a subcategory</option>';

//         // Buscar la categoría seleccionada en el array JS
//         const category = window.categoriesWithSubcategories.find(
//             (cat) => cat.id == selectedCategoryId
//         );

//         // Si la categoría tiene subcategorías, añadirlas al select
//         if (category && Array.isArray(category.subcategories)) {
//             // Añadir las subcategorías al select
//             category.subcategories.forEach((subcat) => {
//                 const option = document.createElement("option");
//                 option.value = subcat.id;
//                 option.textContent = subcat.name;
//                 selectSubcategory.appendChild(option);
//             });
//         }
//     });
// }

// Esta función se usa para limpiar el modal
function clearModal() {
    const form = document.getElementById("createCourseForm");
    const containerSubcategory = document.getElementById(
        "subcategoryContainer"
    );
    const selectSubcategory = document.getElementById("courseSubcategory");

    // Limpiar el formulario
    if (form) form.reset();

    // Limpiar los mensajes de error
    const inputs = form.querySelectorAll(".form-custom");

    inputs.forEach((input) => {
        // Limpiar el valor del input
        clearInvalidFeedback(input);
    });

    if (containerSubcategory) {
        containerSubcategory.classList.remove("d-block");
        containerSubcategory.classList.add("d-none");
    }

    if (selectSubcategory) {
        selectSubcategory.innerHTML =
            '<option value="" disabled selected>Select a subcategory</option>';
    }
}

// Esta función se usa para inicializar el modal
function setUpModal() {
    // Obtiene el modal y el botón de envío
    const modalElement = document.getElementById("createCourseModal");

    if (!modalElement) return;

    // Inicializa el modal de Bootstrap
    let modal = bootstrap.Modal.getInstance(modalElement);
    if (!modal) {
        modal = new bootstrap.Modal(modalElement);
    }

    // Event listener para abrir el modal
    modalElement.addEventListener("hide.bs.modal", function () {
        const active = document.activeElement;
        if (modalElement.contains(active)) {
            active.blur();
        }
    });

    // Event listener para limpiar el modal al cerrarlo
    modalElement.addEventListener("hidden.bs.modal", clearModal);
}

function showInvalidFeedback(input, message) {
    if (!input) return;
    input.classList.add("is-invalid");
    const feedback = input.parentElement.querySelector(".invalid-feedback");
    if (feedback) {
        feedback.textContent = message;
        feedback.classList.remove("d-none");
    }
}

function clearInvalidFeedback(input) {
    if (!input) return;
    input.classList.remove("is-invalid");
    const feedback = input.parentElement.querySelector(".invalid-feedback");
    if (feedback) {
        feedback.textContent = "";
        feedback.classList.add("d-none");
    }
}

// Función para validar el formulario
function validateForm() {
    const form = document.getElementById("createCourseForm");
    const title = form.title;
    const description = form.description;
    const category = form.category_id;
    const subcategory = form.subcategory_id;

    let valid = true;

    // Title
    if (!title.value.trim()) {
        showInvalidFeedback(title, "Please enter a course title.");
        valid = false;
    } else {
        clearInvalidFeedback(title);
    }

    // Description
    if (!description.value.trim()) {
        showInvalidFeedback(description, "Please enter a description.");
        valid = false;
    } else {
        clearInvalidFeedback(description);
    }

    // Category
    if (!category.value) {
        showInvalidFeedback(category, "Please select a category.");
        valid = false;
    } else {
        clearInvalidFeedback(category);
    }

    // Subcategory
    if (!subcategory.value) {
        showInvalidFeedback(subcategory, "Please select a subcategory.");
        valid = false;
    } else {
        clearInvalidFeedback(subcategory);
    }

    // En caso que no sea válido, no se envía el formulario
    if (!valid) {
        return false;
    }

    // Si el formulario es válido devuelvo el formulario
    return form;
}

// Esta función se usa para inicializar el script
document.addEventListener("DOMContentLoaded", init);
