document.addEventListener('DOMContentLoaded', function () {

    const table = $('#tablaProductos').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        pageLength: 6,
        lengthChange: false,
        info: true,
        autoWidth: false,

        columnDefs: [
            { orderable: false, targets: -1 }
        ],

        dom:
            "<'row mb-3'<'col-md-8'f><'col-md-4 text-end'l>>" +
            "<'row'<'col-12'tr>>" +
            "<'row mt-3'<'col-md-5'i><'col-md-7'p>>",

        language: {
            search: "",
            searchPlaceholder: "Buscar productos...",
            zeroRecords: "No se encontraron productos",
            info: "Mostrando _START_ a _END_ de _TOTAL_ productos",
            infoEmpty: "No hay productos para mostrar",
            infoFiltered: "(filtrado de _MAX_ productos totales)",
            paginate: {
                next: "›",
                previous: "‹"
            }
        }
    });

    // Mover buscador al bloque izquierdo
    $('.dataTables_filter')
        .addClass('d-flex align-items-center gap-2')
        .appendTo('#filtrosIzquierda');

    $('#filtrosIzquierda').append($('#columnFilter'));

    const searchInput = $('.dataTables_filter input');

    $('#columnFilter').on('change', function () {
        const colIndex = $(this).val();

        table.search('').columns().search('').draw();

        searchInput.off('keyup').on('keyup', function () {
            if (colIndex === "") {
                table.search(this.value).draw();
            } else {
                table.column(colIndex).search(this.value).draw();
            }
        });
    });

    // (Para poder guardar todos los datos en caso de que el producto no esté visible)

    $('form').on('submit', function () {

        const form = this;

        // Eliminar hidden generados anteriormente
        $(form).find('.dt-hidden').remove();

        // Recorrer TODAS las filas del DataTable
        table.rows().every(function () {

            const row = $(this.node());
            const checkbox = row.find('input[name="ids[]"]');

            if (checkbox.is(':checked')) {

                const id = checkbox.val();
                const cantidad = row.find('input[name="cantidades[' + id + ']"]').val();
                const costo = row.find('input[name="costos[' + id + ']"]').val();

                // ID
                $('<input>')
                    .attr('type', 'hidden')
                    .attr('name', 'ids[]')
                    .val(id)
                    .addClass('dt-hidden')
                    .appendTo(form);

                // Cantidad
                $('<input>')
                    .attr('type', 'hidden')
                    .attr('name', 'cantidades[' + id + ']')
                    .val(cantidad)
                    .addClass('dt-hidden')
                    .appendTo(form);

                // Costo
                $('<input>')
                    .attr('type', 'hidden')
                    .attr('name', 'costos[' + id + ']')
                    .val(costo)
                    .addClass('dt-hidden')
                    .appendTo(form);
            }
        });
    });
});