$(document).ready(function () {
    let select2Edu_flu_efe = [];
    let select2Bucket = [];
    let isTableLoading = true; // Flag para detectar si la tabla está cargando

    // Mostrar el overlay antes de comenzar cualquier carga
    function showOverlay() {
        $('#overlay').css('visibility', 'visible');
    }

    // Ocultar el overlay
    function hideOverlay() {
        $('#overlay').css('visibility', 'hidden');
    }

    // Función para cargar datos para Select2
    async function loadSelect2Options() {
        try {
            const edoFluDataResponse = await edu_fluData();
            const bucketDataResponse = await bucketData();
    
            let success = true;
    
            if (edoFluDataResponse.length) {
                select2Edu_flu_efe = edoFluDataResponse;
            } else {
                console.error('No se recibieron datos para Select2 (edoFluDataResponse).');
                success = false;
            }
    
            if (bucketDataResponse.length) {
                select2Bucket = bucketDataResponse;
            } else {
                console.error('No se recibieron datos para Select2 (bucketDataResponse).');
                hideOverlay();
                success = false;
            }
    
            return success; // Indica si la carga de datos de Select2 fue exitosa o falló
        } catch (error) {
            console.error('Error al cargar los datos de Select2:', error);
            select2Edu_flu_efe = [];
            select2Bucket = [];
            return false; // Indica que la carga de datos de Select2 falló
        }
    }
    // Función para inicializar Select2 para todos los elementos con las opciones cargadas
    function initializeSelect2ForAll() {
        // Inicializar Select2 para elementos con la clase selectEdoFlu
        $('.selectEdoFlu').each(function () {
            const selectId = $(this).attr('id');
            const selectedValue = $(this).data('selected-value'); // Obtener el valor seleccionado desde los datos
            
            // Inicializar Select2 solo si los datos están disponibles
            $(this).select2({
                data: select2Edu_flu_efe,
                placeholder: 'Seleccione una opción',
                width: 'resolve'
            }).val(selectedValue || '').trigger('change'); // Establecer el valor seleccionado
        });
    
        // Inicializar Select2 para elementos con la clase selectBucket
        $('.selectBucket').each(function () {
            const selectId = $(this).attr('id');
            const selectedValue = $(this).data('selected-value'); // Obtener el valor seleccionado desde los datos
            
            // Inicializar Select2 solo si los datos están disponibles
            $(this).select2({
                data: select2Bucket,
                placeholder: 'Seleccione una opción',
                width: 'resolve'
            }).val(selectedValue || '').trigger('change'); // Establecer el valor seleccionado
        });
    
        // Una vez que la tabla está completamente cargada
        isTableLoading = false;
    }

    // Función para cargar datos en la tabla
    async function cargarDatos() {
        showOverlay(); // Mostrar el overlay antes de cargar los datos
        try {
            const data = await $.ajax({
                url: 'https://panel.fivetwofive.tech/yaaxlum/public/tableConciliacionFlujos',
                method: 'GET',
                dataType: 'json'
            });

            if (!data || !data.length) {
                console.error('No se recibieron datos para la tabla.');
                return;
            }

            $('#flujoTable').DataTable().clear().destroy();
            $('#flujoTable tbody').empty();

            $.each(data, function (index, item) {
                // debugger;
                const rowIdT = (item.ID_FLUJO ? 'idrow_' + item.ID_FLUJO : 'idrowReg_' + item.ID_REGISTRO);
                const regisId = 'regis_' + item.ID_REGISTRO;
                const cuenId = 'cuent_' + item.ID_CAT;
                const cargId = 'cargId_' + item.ID_COSTO;
                const abonId = 'abonId_' + item.ID_COSTO;
                const newSelectFluEfe = (item.ID_FLUJO ? 'selectFluEfe' + item.ID_FLUJO : 'selectfluRegist' + item.ID_REGISTRO);
                const newSelectBuck= (item.ID_FLUJO ? 'selectBuck' + item.ID_FLUJO : 'selectBuckRegist' + item.ID_REGISTRO);
                const idEdoFlu = item.ID_EDO_FLU_EFE;
                const idBucket = item.ID_BUCKET;

                const isDisabled = item.ID_FLUJO !== null && idEdoFlu === null ? 'enabled' : (item.ID_FLUJO === null && idEdoFlu === null) ? 'disabled' : '';
                
                let fila = `<tr id="${rowIdT}">` +
                    '<td>' + `&nbsp;&nbsp;&nbsp;` + (item.ID_FLUJO ? item.ID_FLUJO : 'NO ASSIG.') + `</td>` +
                    `<td id="${regisId}">` + item.ID_REGISTRO + '</td>' +
                    '<td>' + item.FECHA + '</td>' +
                    `<td id="${cuenId}">` + item.CUENTA + '</td>' +
                    `<td id="${cargId}">` + item.CARGO + '</td>' +
                    `<td id="${abonId}">` + item.ABONO + '</td>' +
                    `<td>` + `<button id="ccId_${item.ID_REGISTRO}" style="margin-left:-50%;" class="btn btn-primary btn-sm">Centro de Costos</button>` + '</td>' +
                    `<td id="${'idEdoFlu' + item.ID_FLUJO}">` + 
                    `<select id="${newSelectFluEfe}" class="selectEdoFlu" style="width: 70%;" ${isDisabled} data-selected-value="${idEdoFlu}"></select>` + 
                    '</td>' +
                    `<td id="${'idBuck' + item.ID_FLUJO}">`+ `<select id="${newSelectBuck}" class="selectBucket" style="width: 70%;" ${isDisabled} data-selected-value="${idBucket}"></select>` + '</td>' +
                    '</tr>';
                $('#flujoTable tbody').append(fila);
            });

            $('#flujoTable').DataTable({
                paging: true,
                pageLength: 10,
                searching: true,
                info: true,
                ordering: false,
                lengthChange: true,
                columnDefs: [
                    { width: '5%', targets: 0 },  // Primera columna (ID)
                    { width: '5%', targets: 1 },  // Segunda columna (ID)
                    { width: '10%', targets: 2 }, // Tercera columna
                    { width: '10%', targets: 3 }, // Cuarta columna
                    { width: '10%', targets: 4 }, // Quinta columna
                    { width: '10%', targets: 5 }, // Sexta columna
                    { width: '3%', targets: 6 }, // Séptima columna
                    { width: '07%', targets: 7 }, // Octava columna (tamaño medio fijo)
                    { width: '09%', targets: 8 }  // Novena columna (tamaño grande fijo)
                ],
                language: {
                    emptyTable: 'No hay datos disponibles en la tabla',
                    info: 'Mostrando _START_ a _END_ de _TOTAL_ entradas',
                    infoEmpty: 'Mostrando 0 a 0 de 0 entradas',
                    infoFiltered: '(filtrado de _MAX_ entradas totales)',
                    lengthMenu: 'Mostrar _MENU_ entradas',
                    search: 'Buscar:',
                    zeroRecords: 'No se encontraron coincidencias',
                    paginate: {
                        first: 'Primero',
                        last: 'Último',
                        next: 'Siguiente',
                        previous: 'Anterior'
                    }
                },
                drawCallback: function () {
                    // Inicializar Select2 para todos los elementos después de que la tabla se haya dibujado
                    initializeSelect2ForAll();
                }
            });
        } catch (error) {
            console.error('Error al cargar los datos:', error);
        } finally {
            hideOverlay(); // Ocultar el overlay cuando los datos se han cargado
        }
    }
    // Llamada a la función de carga de datos
    async function init() {
        showOverlay(); // Mostrar el overlay
        const select2Loaded = await loadSelect2Options();
        if (select2Loaded) {
            await cargarDatos();
        }
    }

    init();

    // Detectar el cambio manual en el Select2
    $(document).on('select2:select', '.selectEdoFlu', function () {
        if (!isTableLoading) { // Solo hacer log si la tabla no está en proceso de carga
           
            // Encuentra el elemento <tr> más cercano
            const $row = $(this).closest('tr');
            const valueCatEdoFlu = $(this).val();
            
            // Obtén el ID del <tr>
            const rowId = $row.attr('id');
            let idFlujo;
            let idRegistro;
    
            // Verifica el formato del ID y extrae el número correspondiente
            if (rowId.startsWith('idrow_')) {
                idFlujo = rowId.split('_')[1]; // Extrae el número después de 'idrow_'
                // Encuentra el <td> con id que empieza con "regis_" 
                // Acción si el ID es del formato 'idrow'
                const regisTd = $row.find('td[id^="regis_"]');
                idRegistro = regisTd.length ? regisTd.text() : null;
                if (idFlujo) {
                    let EDO_FLU_EFE = valueCatEdoFlu;
                    $.ajax({
                        url: 'https://panel.fivetwofive.tech/yaaxlum/public/act_eduFlu', 
                        type: 'POST',
                        data: {
                            ID_FLUJO: idFlujo, 
                            EDO_FLU_EFE: EDO_FLU_EFE,
                            ID_REGISTRO:idRegistro
                        },
                        success: function(response) {
                            console.log('Todo bien con idrow');
                        },
                        error: function(xhr, status, error) {
                            console.error('Error al enviar los datos:', status, error);
                        }
                    });
                } else {
                    console.log('No se encontró idRegistro para idrow');
                }
    
            } else if (rowId.startsWith('idrowReg_')) {
                idFlujo = rowId.split('_')[1]; // Extrae el número después de 'idrowReg_' (considerando un segundo guion bajo)
                // Encuentra el <td> con id que empieza con "regis_"
                const regisTd = $row.find('td[id^="regis_"]');
                idRegistro = regisTd.length ? regisTd.text() : null;
    
                // Acción si el ID es del formato 'idrowReg'
                if (idRegistro) {
                    let EDO_FLU_EFE = valueCatEdoFlu;
                    $.ajax({
                        url: 'https://panel.fivetwofive.tech/yaaxlum/public/add_conFlu', // Cambia la URL si es diferente para 'idrowReg'
                        type: 'POST',
                        data: {
                            ID_REGISTRO: idRegistro, 
                            EDO_FLU_EFE: EDO_FLU_EFE
                        },
                        success: function(response) {
                           
                            let $row = $('#flujoTable').find(`tr[id='idrowReg_${idRegistro}']`); // Asegúrate de que el id sea correcto
                            if ($row.length) {
                                let newIdFlujo = response.newId; // Obtén el nuevo ID_FLUJO
                                // Actualiza el ID del <tr> con el nuevo ID_FLUJO
                                $row.attr('id', `idrow_${newIdFlujo}`);
                
                                // Actualiza el contenido de la celda específica
                                $row.find('td').eq(0).html(`&nbsp;&nbsp;&nbsp; ${newIdFlujo}`);
                
                                
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error al enviar los datos:', status, error);
                        }
                    });
                } else {
                    console.log('No se encontró idRegistro para idrowReg');
                }
    
            } else {
                console.log('ID desconocido:', rowId);
            }
        }
    });

    $(document).on('select2:select', '.selectBucket', function () {
        if (!isTableLoading) { // Solo hacer log si la tabla no está en proceso de carga
           
            
            // Encuentra el elemento <tr> más cercano
            const $row = $(this).closest('tr');
            const valueBucket = $(this).val();
            
            // Obtén el ID del <tr>
            const rowId = $row.attr('id');
            let idFlujo;
            let idRegistro;
            // Verifica el formato del ID y extrae el número correspondiente
            if (rowId.startsWith('idrow_')) {
                idFlujo = rowId.split('_')[1]; // Extrae el número después de 'idrow_'
                // Encuentra el <td> con id que empieza con "regis_" 
                // Acción si el ID es del formato 'idrow'
                const regisTd = $row.find('td[id^="regis_"]');
                idRegistro = regisTd.length ? regisTd.text() : null;
                if (idFlujo) {
                    let ID_BUCKET = valueBucket;
                    $.ajax({
                        url: 'https://panel.fivetwofive.tech/yaaxlum/public/act_bucketS', 
                        type: 'POST',
                        data: {
                            ID_FLUJO: idFlujo, 
                            ID_BUCKET: ID_BUCKET,
                            ID_REGISTRO: idRegistro
                        },
                        success: function(response) {
                            console.log('Todo bien con idrow');
                        },
                        error: function(xhr, status, error) {
                            console.error('Error al enviar los datos:', status, error);
                        }
                    });
                } else {
                    console.log('No se encontró idRegistro para idrow');
                }
    
            } else if (rowId.startsWith('idrowReg_')) {
                idFlujo = rowId.split('_')[1]; // Extrae el número después de 'idrowReg_' (considerando un segundo guion bajo)
                // Encuentra el <td> con id que empieza con "regis_"
                const regisTd = $row.find('td[id^="regis_"]');
                idRegistro = regisTd.length ? regisTd.text() : null;
    
                // Acción si el ID es del formato 'idrowReg'
                if (idRegistro) {
                    let ID_BUCKET = valueBucket;
                    $.ajax({
                        url: 'https://panel.fivetwofive.tech/yaaxlum/public/add_bucketS', // Cambia la URL si es diferente para 'idrowReg'
                        type: 'POST',
                        data: {
                            ID_REGISTRO: idRegistro, 
                            ID_BUCKET: ID_BUCKET
                        },
                        success: function(response) {
                           
                            let $row = $('#flujoTable').find(`tr[id='idrowReg_${idRegistro}']`); // Asegúrate de que el id sea correcto
                            if ($row.length) {
                                let newIdFlujo = response.newId; // Obtén el nuevo ID_FLUJO
                                // Actualiza el ID del <tr> con el nuevo ID_FLUJO
                                $row.attr('id', `idrow_${newIdFlujo}`);
                
                                // Actualiza el contenido de la celda específica
                                $row.find('td').eq(0).html(`&nbsp;&nbsp;&nbsp; ${newIdFlujo}`);
                                
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error al enviar los datos:', status, error);
                        }
                    });
                } else {
                    console.log('No se encontró idRegistro para idrowReg');
                }
    
            } else {
                console.log('ID desconocido:', rowId);
            }
        }
    });
});


// Manejar el clic en el botón específico
$(document).on('click', 'button[id^="ccId_"]', function () {
    // Encontrar el <tr> asociado al botón clickeado
    $('#overlay').css('visibility', 'visible');
    let $row = $(this).closest('tr');

    // Obtener el ID del <tr>
    let rowId = $row.attr('id');

    let idPrefix = rowId.split('_')[0]; // Tipo de id
    let idValue = rowId.split('_')[1]; // Valor del ID

    // Determinar el tipo y preparar el objeto de datos
    let tipo = idPrefix === 'idrowReg' ? 'ID_REGISTRO' : 'ID_PRORRATEO';

    if (idPrefix === 'idrowReg') { // NO TIENE ID DE PRORRATEO
        $.ajax({
            url: 'https://panel.fivetwofive.tech/yaaxlum/public/getCentroCostoDataConFlu', // Cambia esta URL por la URL de tu API
            type: 'GET',
            data: {
                tipo: tipo, // Agrega el tipo al objeto de datos
                idValue: idValue // Agrega el idValue al objeto de datos
            },
            success: function(response) {
                // Asegúrate de que la respuesta sea del formato correcto
                console.log(response); // Verifica la respuesta en la consola
                $('#overlay').css('visibility', 'hidden');
                let centroCostoContainer = $('#centroCostoContainer');
                centroCostoContainer.empty(); // Limpiar el contenedor antes de añadir nuevos datos

                // Crear las filas dinámicamente
                $.each(response.centroCostos, function(index, costo) {
                    let row = `
                        <div class="row mb-2">
                            <div class="col-6">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input costo-checkbox" id="costo-${costo.ID_CENTRO_COSTO}">
                                    <label class="form-check-label" for="costo-${costo.ID_CENTRO_COSTO}">${costo.CENTRO_COSTO}</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <input type="text" class="form-control costo-value" id="costo-${costo.ID_CENTRO_COSTO}-value" value="0.00">
                            </div>
                        </div>
                    `;
                    centroCostoContainer.append(row);
                });

                // Establecer el idValue en los datos del modal
                $('#modalcc').data('idValue', idValue);

                // Mostrar el modal
                $('#modalcc').modal('show');
            },
            error: function(xhr, status, error) {
                console.error('Error al obtener datos:', status, error);
                // Manejar el error aquí
            }
        });
    } else if (idPrefix === 'idrow') { 
        // TIENE ID DE PRORRATEO

        let tdElement = $row.find('td[id^="regis_"]');

        let regisId = tdElement.attr('id'); // Obtiene el ID del <td>
        let regisValue = tdElement.text();  // Obtiene el texto dentro del <td>
        
        console.log('registor', tdElement)
        console.log('ID del <tr> (idrow):', idValue);
        $.ajax({
            url: 'https://panel.fivetwofive.tech/yaaxlum/public/getCentroCostoDataConFlu', // Cambia esta URL por la URL de tu API
            type: 'GET',
            data: {
                tipo: tipo, // Agrega el tipo al objeto de datos
                idValue: regisValue // Agrega el idValue al objeto de datos
            },
            success: function(response) {
                // Asegúrate de que la respuesta sea del formato correcto
                console.log(response); // Verifica la respuesta en la consola
                $('#overlay').css('visibility', 'hidden');
                let centroCostoContainer = $('#centroCostoContainer');
                centroCostoContainer.empty(); // Limpiar el contenedor antes de añadir nuevos datos
            
                // Crear un mapa de valores para un acceso rápido
                let valoresMap = {};
                $.each(response.valoresCentroCostos, function(index, valorPro) {
                    valoresMap[valorPro.ID_CENTRO_COSTO] = valorPro.COSTO; // Aquí se usa COSTO para obtener el valor
                });
            
                // Crear las filas dinámicamente y marcar los checkboxes si ya han sido seleccionados
                $.each(response.centroCostos, function(index, costo) {
                    let isChecked = valoresMap.hasOwnProperty(costo.ID_CENTRO_COSTO) ? 'checked' : '';
                    let valorCentroCosto = valoresMap[costo.ID_CENTRO_COSTO] || '0.00'; // Asigna el valor de COSTO o 0.00 si no existe
            
                    let row = `
                        <div class="row mb-2">
                            <div class="col-6">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input costo-checkbox" id="costo-${costo.ID_CENTRO_COSTO}" ${isChecked}>
                                    <label class="form-check-label" for="costo-${costo.ID_CENTRO_COSTO}">${costo.CENTRO_COSTO}</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <input type="text" class="form-control costo-value" id="costo-${costo.ID_CENTRO_COSTO}-value" value="${valorCentroCosto}">
                            </div>
                        </div>
                    `;
                    centroCostoContainer.append(row);
                });
            
                $('#modalcc').data('idValue', idValue);
                $('#modalcc').modal('show');
            },
            error: function(xhr, status, error) {
                console.error('Error al obtener datos:', status, error);
                // Manejar el error aquí
            }
        });
        // Aquí puedes hacer lo que necesites con idValue
    } else {
        console.error('No se reconoció el ', rowId);
    }
});

// Función para manejar el cambio en los checkboxes
$(document).on('change', '.costo-checkbox', function () {
    let checkboxes = $('.costo-checkbox');
    let checkedCount = checkboxes.filter(':checked').length;
    let totalCheckboxes = checkboxes.length;

    if (totalCheckboxes === 0) return;

    let valuePerCheckbox = (checkedCount > 0) ? (1 / checkedCount).toFixed(2) : 0.00;

    checkboxes.each(function () {
        let checkboxId = $(this).attr('id');
        let valueInput = $('#' + checkboxId + '-value');
        if ($(this).is(':checked')) {
            valueInput.val(valuePerCheckbox);
        } else {
            valueInput.val('0.00');
        }
    });
});

// Función para manejar el guardado de datos
$(document).on('click', '#saveCentroCosto', function () {
    $('#modalOverlay').css('visibility', 'visible');
    // Obtener el ID del registro
    let idValue = $('#modalcc').data('idValue'); // ID del registro si es necesario

    // Crear un array para almacenar los datos de los centros de costo
    let centroCostosData = [];
    let totalValue = 0; // Variable para acumular el total de los valores

    // Recorre todos los checkboxes y sus valores correspondientes
    $('.costo-checkbox').each(function () {
        let checkboxId = $(this).attr('id');
        let isChecked = $(this).is(':checked');
        let valueInput = $('#' + checkboxId + '-value');
        let value = parseFloat(valueInput.val());
        
        if (isChecked) {
            centroCostosData.push({
                ID_CENTRO_COSTO: checkboxId.replace('costo-', ''), // Extrae el ID del checkbox
                VALUE: value // Valor del campo de texto asociado
            });
            totalValue += value; // Acumula el valor total
        }
    });

    // Validar el total de los valores
    if (totalValue !== 1.00 && totalValue !== 0) {
        alert('El prorrateo no cumple el 100%. Por favor, ajuste los valores.');
        $('#modalOverlay').css('visibility', 'hidden');
        return; // Detiene el envío si no cumple la condición
    }

    // Verificar si hay una fila existente con el ID
    let $rowReg = $('#flujoTable').find(`tr[id='idrowReg_${idValue}']`);
    let $row = $('#flujoTable').find(`tr[id='idrow_${idValue}']`);

    //Agregar sin ID_COSTO
    if ($rowReg.length > 0) {
        $.ajax({
            url: 'https://panel.fivetwofive.tech/yaaxlum/public/saveCentroCostosFlu',
            type: 'POST',
            data: JSON.stringify({
                idValue: idValue,
                centroCostos: centroCostosData
            }),
            contentType: 'application/json', // Asegúrate de especificar el tipo de contenido
            success: function(response) {
                // Actualizar la fila en la tabla
                let $row = $('#flujoTable').find(`tr[id='idrowReg_${idValue}']`); // Asegúrate de que el id sea correcto
                if ($row.length) {
                    // Actualiza el campo selectEdoFlu con el nuevo ID_BUCKET
                    let newIdCosto = response.newId; // Obtén el nuevo ID_COSTO
    
                    // Habilitar el selectEdoFlu
                    $row.find('select.selectEdoFlu').prop('disabled', false);

                    $row.find('select.selectBucket').prop('disabled', false);
    
                    // Actualiza el ID del <tr> con el nuevo ID_COSTO
                    $row.attr('id', `idrow_${newIdCosto}`);
    
                    // Actualiza el contenido de la celda específica
                    $row.find('td').eq(0).html(`&nbsp;&nbsp;&nbsp; ${newIdCosto}`);
    
                    // Re-dibuja la tabla si es necesario
                    // $('#flujoTable').DataTable().draw();
                }
                $('#modalOverlay').css('visibility', 'hidden');
                $('#modalcc').modal('hide');
            },
            error: function(xhr, status, error) {
                console.error('Error al guardar datos:', status, error);
                $('#modalOverlay').css('visibility', 'hidden');
                // Manejar el error aquí
            }
        });
    } else if ($row.length > 0) {
        // Si existe una fila con idrow_, entonces es un registro existente
        let tdElement = $row.find('td[id^="regis_"]');

        let regisId = tdElement.attr('id'); // Obtiene el ID del <td>
        let regisValue = tdElement.text();  // Obtiene el texto dentro del <td>
        // Verifica si centroCostosData es un array vacío y, si es así, agrega un objeto predeterminado
        if (Array.isArray(centroCostosData) && centroCostosData.length === 0) {
            centroCostosData.push({ ID_CENTRO_COSTO: null, VALUE: null });
        }
        $.ajax({
            url: 'https://panel.fivetwofive.tech/yaaxlum/public/saveCentroCostosFlu',
            type: 'POST',
            data: JSON.stringify({
                idValue: regisValue,
                centroCostos: centroCostosData,
                stats: "update"
            }),
            contentType: 'application/json', // Asegúrate de especificar el tipo de contenido
            success: function(response) {
                // Actualizar la fila en la tabla
                let $row = $('#flujoTable').find(`tr[id='idrowReg_${idValue}']`); // Asegúrate de que el id sea correcto
                if ($row.length) {
                    // Actualiza el campo selectEdoFlu con el nuevo ID_BUCKET
                    let newIdCosto = response.newId; // Obtén el nuevo ID_COSTO
    
                    // Habilitar el selectEdoFlu
                    $row.find('select.selectEdoFlu').prop('disabled', false);
    
                    // Actualiza el ID del <tr> con el nuevo ID_COSTO
                    $row.attr('id', `idrow_${newIdCosto}`);
    
                    // Actualiza el contenido de la celda específica
                    $row.find('td').eq(0).html(`&nbsp;&nbsp;&nbsp; ${newIdCosto}`);
    
                    // Re-dibuja la tabla si es necesario
                    // $('#flujoTable').DataTable().draw();
                }
                $('#modalOverlay').css('visibility', 'hidden');
                $('#modalcc').modal('hide');
            },
            error: function(xhr, status, error) {
                console.error('Error al guardar datos:', status, error);
                $('#modalOverlay').css('visibility', 'hidden');
                // Manejar el error aquí
            }
        });
    } else {
        // Manejar el caso donde no existe ninguna fila con los IDs especificados
        console.error('No se encontró ninguna fila con el ID especificado.');
    }
});

$('#sidebarToggle, .navbar-toggler').on('click', function () {
    $('#sidebar, #content').toggleClass('active');
});