$dataGridInsumoEstoques = null; 
let connected = false;
$(document).ready(function () {
    window.jsPDF = window.jspdf.jsPDF;
    inicializarGrids();
});


function inicializarGrids() {
    $dataGridInsumoEstoques = $("#tbdInsumoEstoques").dxDataGrid({
        dataSource: storeInsumoEstoques,
        remoteOperations: true,
        onToolbarPreparing: function (e) {
            var dataGrid = e.component;
            e.toolbarOptions.items.unshift(
                {
                    location: 'after',
                    widget: 'dxButton',

                    options: {
                        icon: 'fa-duotone fa-plus-large',
                        text: 'Novo Lançamento',
                        onClick: function (e) {
                            $('#modalSalvar').modal('show')
                        },
                        hint: 'Novo Lançamento'
                    }
                },
                {
                    location: 'after',
                    widget: 'dxButton',
                    options: {
                        icon: 'refresh',
                        onClick: function () {
                            dataGrid.refresh();
                        },
                        hint: 'Atualizar'
                    }
                },
            );
        },
        repaintChangesOnly: true,
        wordWrapEnabled: false,
        showColumnLines: true,
        showRowLines: true,
        rowAlternationEnabled: true,
        showBorders: true,
        allowColumnResizing: true,
        showBorders: true,
        columnAutoWidth: true,
        allowColumnReordering: true,
        scrolling: {
            useNative: true,
            preloadEnabled: true,
            columnRenderingMode: "standard",
            showScrollbar: "always",
        },
        columnChooser: {
            enabled: true,
            mode: "select", // ou "dragAndDrop" para permitir arrastar e soltar colunas
            title: "Selecionar Colunas", // título do painel do seletor de colunas
            position: {
                of: window, at: 'top', my: 'top', offset: { y: 10 },
            },
        },
        rowAlternationEnabled: true,
        groupPanel: { visible: true },
        grouping: { autoExpandAll: true },
        filterSyncEnabled: true,
        filterPanel: { visible: true },
        filterRow: { visible: true, applyFilter: 'auto' },
        headerFilter: { visible: true },
        paging: { pageSize: 10 },
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: [10, 20, 50, 100],
            showInfo: true
        },
        summary: {
            groupItems: [
                {
                    column: 'qt_Estoque',
                    summaryType: 'sum',
                    displayFormat: 'Total: {0}',
                    alignByColumn: false
                }
            ]
        },
        sortByGroupSummaryInfo: [{
            summaryItem: 'count',
        }],
        export: {
            enabled: true,
            formats: ['pdf', 'xlsx'],
            allowExportSelectedData: true,
        },
        onExporting(e) {
            if (e.format == 'pdf') {
                const doc = new jsPDF();
                DevExpress.pdfExporter.exportDataGrid({
                    jsPDFDocument: doc,
                    component: e.component,
                }).then(() => {
                    doc.save(`Consumos_${uuidv4()}.pdf`);
                });
            } else {
                const workbook = new ExcelJS.Workbook();
                const worksheet = workbook.addWorksheet('Itens');
                DevExpress.excelExporter.exportDataGrid({
                    component: e.component,
                    worksheet,
                    keepColumnWidths: true,
                }).then(() => {
                    workbook.xlsx.writeBuffer().then((buffer) => {
                        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Produtos_${uuidv4()}.xlsx`);
                    });
                });
                e.cancel = true;
            }
        },
        onContentReady: function (e) {
            setTimeout(() => {
                permissao();
                connected = true;
            }, 500);
        }, 
        columns: [
            {
                caption: "Ações",
                fixed: true,
                width: "auto",
                class: "align-middle",
                columnResizing: false,
                cellTemplate: function (container, options) {
                    $(`<div>`)
                        .appendTo(container).dxMenu({
                            items: [
                                {
                                    icon: "fa-duotone fa-gear",
                                    items: [  
                                        {
                                            id: 1,
                                            name: 'Remover',
                                            text: 'Remover',
                                            icon: 'fa-duotone fa-times',
                                            visible: buscarDadosUsuario().tipoAcesso == 0 && options.data.id_InsumoConsumoItem === null,
                                            elementAttr: {
                                                "data-permissao": "1",
                                                "data-acesso-remove": "1.2",
                                                "data-dados": options.data,

                                            },
                                            onClick: async function (e) {
                                                await removerInsumoEstoque(e.itemData.elementAttr["data-dados"].id_InsumoEstoque)
                                                //await cancelarEntrega(e.itemData.elementAttr["data-dados"]); 
                                                //$('#modalSalvar').modal('show', e.itemData.elementAttr["data-dados"])
                                            },
                                        },
                                    ],
                                }
                            ],
                            showFirstSubmenuMode: 'onClick',
                            hideSubmenuOnMouseLeave: true,
                        });
                }
            },
            {
                caption: "N° Item",
                dataField: "nr_InsumoEstoque",
                width: "auto",
                fixed: true,
                alignment: 'center',
                dataType: 'number',
                sortOrder: 'desc'
            },
            {
                caption: "Tipo",
                dataField: "ds_Estoque",
                width: "auto",
                fixed: true,
                alignment: 'center',
                cellTemplate: function (container, options) { 
                    $(`<span class="badge badge-${options.data.tp_Estoque == 0 ? 'info' : 'danger'}">`)
                        .text(options.data.ds_Estoque)
                        .appendTo(container);
                },
            },
            {
                caption: "Item",
                dataField: "ds_Nome",
                width: "auto",
                alignment: 'center',
            },
            {
                caption: "Quantidade",
                dataField: "qt_Estoque",
                dataType: 'number',
                width: "auto",
                alignment: 'center',
            },
            {
                caption: "Saldo Total",
                dataField: "qt_Saldo",
                dataType: 'number',
                width: "auto",
                alignment: 'center',
            },
            {
                caption: "Tipo",
                dataField: "id_InsumoconsumoItem",
                width: "auto",
                alignment: 'center',
                cellTemplate: function (container, options) { 
                    $(`<span class="badge badge-${options.data.id_InsumoConsumoItem !== null ? 'secondary text-white' : 'primary text-white'}">`)
                        .text(options.data.id_InsumoConsumoItem !== null ? 'AUTOMATICO' : 'MANUAL')
                        .appendTo(container);
                },
            },
            {
                caption: "Observações",
                dataField: "ds_Observacoes",
                alignment: 'left'
            },
            {
                caption: "Usuario de Inclusão",
                dataField: "ds_UsuarioInclusao",
                alignment: 'left'
            },
            {
                caption: "Usuario de Atualização",
                dataField: "ds_UsuarioAtualizacao",
                alignment: 'left'
            }
        ],

    }).dxDataGrid("instance");
    
}