$(document).ready(async function () {
    var ultimaColunaOrdenada = {
        nome: '',
        ordenacao: 'ASC'
    };

    $('#tutorial').on('click', function () {
        $(document).ready(async function () {
            const driver = new Driver({
                doneBtnText: 'Sair',
                closeBtnText: 'Fechar',
                nextBtnText: 'Próximo',
                prevBtnText: 'Anterior',
                allowClose: false
            });
            driver.defineSteps([{
                element: '#btnFiltros',
                popover: {
                    title: 'Botão Filtros',
                    description: 'Clique aqui para abrir os filtros e realizar alguma consulta.',
                    position: 'right'
                }
            },
            {
                element: '#btnImprimir',
                popover: {
                    title: 'Botão Imprimir',
                    description: 'Clique aqui para Imprimir um relatório.',
                    position: 'right'
                }
            }
            ]);
            driver.start();
        });
    });

    let colunas = JSON.parse(localStorage.getItem('colunasInvisiveisRelatorios'));
    $('#cbContemEstoque').prop('checked', true)
    // aqui so valida se nao existe tem que criar para nao dar erro
    if (colunas == null || colunas.relEstoqueMat == undefined) {
        localStorage.setItem('colunasInvisiveisRelatorios', JSON.stringify({ ...colunas, relEstoqueMat: [] }));
        colunas = JSON.parse(localStorage.getItem('colunasInvisiveisRelatorios'));
    }

    // confirma as colunas
    $('#btnConfirmarColunas').on('click', async function () {
        try {
            $.LoadingOverlay('show');

            const novasColunas = retornaNovasColunasInvisiveis();
            localStorage.setItem('colunasInvisiveisRelatorios', JSON.stringify({ ...colunas, relEstoqueMat: novasColunas }))

            $('#tabelaRelEstoqueMatb2b').DataTable().columns().visible(true);

            $('#tabelaRelEstoqueMatb2b').DataTable().columns().every(
                function () {
                    if ((novasColunas).indexOf(this.dataSrc()) != -1) {
                        this.visible(false);
                    }
                })

        } finally {
            $.LoadingOverlay('hide');
            $('#modal-ColunasVisiveis').modal('hide');
        }
    })

    await preencheOrdenacaoTela('RelEstoqueMatB2B');

    $('#txtOrdem').val('3');

    // const filtroDeposito = await retornaDepositoUsuario(getCookie('cod_usuario'));

    const filtroDeposito = await buscaDepositoEmpresaUsuario();

    componenteFiltro('material', true);
    componenteFiltro('cor', true);
    componenteFiltro('depositoUsuario', true);
    componenteFiltro('grupoMA', true);
    componenteFiltro('colecao', true);
    componenteFiltro('qualidade', true);
    componenteFiltro('subGrupo', true);
    componenteFiltro('lote', true);
    componenteFiltro('unidade', true);

    await carregaValoresPadroes();

    $('#btnFiltros').on('click', async function () {
        $('#modal-filtros').modal('show');
    });

    async function carregaValoresPadroes() {
        const pesquisa = {
            camposSelect: ['CAMPO', 'VALOR'],
            tabela: 'TABPADRAO',
            where: [`TABELA = 'ESTOQUE'`]
        }
        const jsonStr = await retornaJsonPesquisaPadrao(JSON.stringify(pesquisa));

        jsonStr.map(item => {
            switch (item.CAMPO) {
                case 'DEPOSITO': {
                    if (item.VALOR != '') {
                        adicionaValorPadraoVarios('depositoUsuario', item.VALOR, 'VALOR PADRÃO');
                    }
                    break;
                }
                case 'QUALIDADE': {
                    if (item.VALOR != '') {
                        adicionaValorPadraoVarios('qualidade', item.VALOR, 'VALOR PADRÃO');
                    }
                    break;
                }
            }
        });
    };

    limparFiltros(true);

    $('#btnImprimir').on('click', async function () {
        try {
            $.LoadingOverlay('show');
            try {
                let url = `/sisplan/impressao/v1/estoqueb2b?`;

                const item = 'M';

                const filtros = await retornaFiltros();
                const params = `CODIGO=${filtros.codigo}&DEPOSITO=${filtros.deposito}&COR=${filtros.cor}&COLECAO=${filtros.colecao}&GRUPO=${filtros.grupo}&QUALIDADE=${filtros.qualidade}&TIPOITEM=${item}&CONTEMESTOQUE=${$('#cbContemEstoque').prop('checked')}&SUBGRUPO=${filtros.subGrupo}&LOTE=${filtros.lote}&UNIDADE=${filtros.unidade}&REGIAO=${filtros.regiao}`;
                const ordem = `&TELA_ORDENACAO=RelEstoqueMatB2B&ORDEM_ORDENACAO=${$('#txtOrdem').val()}`;
                const bImprimeAutomatico = await verificaImprimirAutomatico('RelEstoqueMatB2B');
                let arquivo = await GeraRelatorio(`${url}${params}${ordem}`, 'POST', 1000000, false, 'RelEstoqueMatB2B');
                if (arquivo != undefined) {
                    if (!bImprimeAutomatico) {
                        window.open(`${BASE_URI}/relatorios_api/pdf/${arquivo}`, '_blank');
                    }
                    await limparRelatorios();
                }

            } catch (error) {
                console.error(error);
            }
        } finally {
            $.LoadingOverlay('hide');
        }
    });

    async function retornaFiltros() {

        let dep = await formataListas($('#txtDepositoUsuario').val().toString());

        if (dep == '') {
            dep = filtroDeposito;
        }

        const filtros = {
            tipoItem: 'MATERIAL',
            tabelaEstoque: 'MAT_ITEN',
            campoQualidade: 'QUALIDADE',
            codigo: await formataListas($('#txtMaterial').val().toString()),
            cor: await formataListas($('#txtCor').val().toString()),
            colecao: await formataListas($('#txtColecao').val().toString()),
            grupo: await formataListas($('#txtGrupoMA').val().toString()),
            subGrupo: await formataListas($('#txtSubGrupo').val().toString()),
            qualidade: await formataListas($('#txtQualidade').val().toString()),
            lote: await formataListas($('#txtLote').val().toString()),
            unidade: await formataListas($('#txtUnidade').val().toString()),
            regiao: pegaChave(await CopiaParametro('PEDIDOB2B', 3)),
            deposito: dep
        }

        return filtros;
    }

    async function buscaDados(colunaOrdenacao = '') {
        if ($.fn.DataTable.isDataTable('#tabelaRelEstoqueMatb2b')) {
            $("#tabelaRelEstoqueMatb2b").DataTable().destroy();
            $("#tabelaRelEstoqueMatb2b").empty();
        }

        ultimaColunaOrdenada.nome = colunaOrdenacao.replaceAll(' ASC', '').replaceAll(' DESC', '');
        ultimaColunaOrdenada.ordenacao = colunaOrdenacao.indexOf(' ASC') > -1 ? 'ASC' : 'DESC';

        try {
            try {
                $.LoadingOverlay("show");
                const filtros = await retornaFiltros();
                const item = 'M';
                const params = `CODIGO=${filtros.codigo}&DEPOSITO=${filtros.deposito}&COR=${filtros.cor}&COLECAO=${filtros.colecao}&GRUPO=${filtros.grupo}&QUALIDADE=${filtros.qualidade}&TIPOITEM=${item}&CONTEMESTOQUE=${$('#cbContemEstoque').prop('checked')}&SUBGRUPO=${filtros.subGrupo}&LOTE=${filtros.lote}&UNIDADE=${filtros.unidade}&REGIAO=${filtros.regiao}&`;

                const url = `/sisplan/impressao/v1/estoqueb2b?`;
                const response = await requisicao('GET', `${url}${params}`, '', 1000000);

                if (!response) {
                    return;
                }

                const jsonStr = await await response.json();
                if (response.status != 200) {
                    msgErro(jsonStr.mensagem);
                    return;
                }

                if (jsonStr.length == 0) {
                    msgAlerta('Nenhum registro encontrado!');
                    return;
                }

                const data = jsonStr.map((result) => {
                    const color = result.RGB.match(/(\d{3})/g).join('-').split('-');
                    return {
                        ...result,
                        RGB: `<div class="corRGB" style="background-color: RGB(${color[0]},${color[1]}, ${color[2]}); width: 60px; height: 25px;"></div>`,
                    }
                })

                const keys = Object.keys(data[0]);
                const dataSetCols = [];

                for (var k in keys) {
                    dataSetCols.push({
                        'title': keys[k],
                        'data': keys[k]
                    });
                };

                $('#tabelaRelEstoqueMatb2b').DataTable({
                    destroy: true,
                    info: false,
                    order: false,
                    paging: true,
                    lengthChange: true, // habilita o select para mudar a quantidade de itens por página
                    lengthMenu: [10, 25, 50, 100], // opções disponíveis no select
                    pageLength: 10,
                    filter: false,
                    language: {
                        sEmptyTable: 'Nenhum registro encontrado',
                        sInfo: '_TOTAL_ registros',
                        sInfoEmpty: ' 0 registros',
                        sInfoFiltered: '(Filtrados de _MAX_ registros)',
                        sInfoPostFix: '',
                        sInfoThousands: '.',
                        sLengthMenu: '_MENU_ resultados',
                        sLoadingRecords: 'Carregando...',
                        sProcessing: 'Processando...',
                        sZeroRecords: 'Nenhum registro encontrado',
                        sSearch: 'Pesquisar Cor',
                        oPaginate: {
                            sNext: 'Próximo',
                            sPrevious: 'Anterior',
                            sFirst: 'Primeiro',
                            sLast: 'Último',
                        },
                        oAria: {
                            sSortAscending: ': Ordenar colunas de forma ascendente',
                            sSortDescending: ': Ordenar colunas de forma descendente',
                        },
                    },
                    autoWidth: true,
                    colReorder: true,
                    data: data,
                    columns: dataSetCols,
                });
                $($($('#tabelaCor_wrapper')[0]).children()[0]).css({ 'flex-direction': 'row-reverse' });
                $($($($('#tabelaCor_wrapper')[0]).children()[0]).children()[1]).addClass('d-flex justify-content-start');

                $('#btnGravarCor').removeClass('d-none');

                $('.corRGB').on('click', function () {
                    $('.corMaterialPreview').attr('style', `${$(this).attr('style').split(';')[0]}; width: 100%; height: 100%; min-width: 150px; min-height: 150px;`);
                    $('#imagemodal').modal('show');
                });

                const colunasInvisiveis = JSON.parse(localStorage.getItem('colunasInvisiveisRelatorios'));

                $('#tabelaRelEstoqueMatb2b_length').prepend('<button class="buttonColVis" id="buttonColVis"><i class="fas fa-cogs"></i></button>');
                $('#tabelaRelEstoqueMatb2b_length').prepend('<button class="buttonExcel" id="buttonExcel"><i class="fas fa-file-excel"></i></button>');

                $('#buttonColVis').prop('title', 'Configurar colunas visíveis')
                $('#buttonExcel').prop('title', 'Exportar')

                $('#buttonColVis').on('click', async function () {
                    $.LoadingOverlay('show');
                    $('#modal-ColunasVisiveis').modal('show');
                    $.LoadingOverlay('hide');
                });

                $('#buttonExcel').on('click', async function () {
                    const filtros = await retornaFiltros();
                    const item = 'M';
                    const params = `CODIGO=${filtros.codigo}&DEPOSITO=${filtros.deposito}&COR=${filtros.cor}&COLECAO=${filtros.colecao}&GRUPO=${filtros.grupo}&QUALIDADE=${filtros.qualidade}&TIPOITEM=${item}&CONTEMESTOQUE=${$('#cbContemEstoque').prop('checked')}&SUBGRUPO=${filtros.subGrupo}&LOTE=${filtros.lote}&UNIDADE=${filtros.unidade}&REGIAO=${filtros.regiao}&`;
                    const url = `/sisplan/impressao/v1/estoqueb2b?`;

                    await exportaCSV(url, params, false, null, 'Relatório de Estoque de Material', '#tabelaRelEstoqueMatb2b');
                })

                $('#tabelaRelEstoqueMatb2b').DataTable().columns().every(
                    function () {
                        if ((colunasInvisiveis.relEstoqueMat).indexOf(this.dataSrc()) != -1) {
                            this.visible(false);
                        }
                    })

                $('#tabelaRelEstoqueMatb2b th').on('click', async function () {
                    const nomeColuna = $(this).html();
                    const novaOrdenacao = ultimaColunaOrdenada.ordenacao == 'ASC' ? 'DESC' : 'ASC';
                    const ordenacao = ultimaColunaOrdenada.nome == nomeColuna ? novaOrdenacao : 'ASC';
                    await buscaDados(nomeColuna + ' ' + ordenacao);
                });

            } catch (error) {
                console.error(error);
                msgErro('Não foi possível buscar os dados dos itens.');
            }
        } finally {
            $.LoadingOverlay("hide");
            $('#modal-filtros').modal('hide');
        }
    };

    $('#modal-ColunasVisiveis').on('show.bs.modal', function () {
        const cols = [];

        let colunasInvisiveis = JSON.parse(localStorage.getItem('colunasInvisiveisRelatorios'))

        $('#tabelaRelEstoqueMatb2b').DataTable().columns().every(function () {
            cols.push({
                'title': $(this.header()).text(),
                'data': this.dataSrc()
            })
        });

        adicionaColunas(cols, colunasInvisiveis.relEstoqueMat ?? [])
    })

    $('#btnConsultar').on('click', async function () {
        await buscaDados();
    });
});