$('#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 filtrar a consulta.',
                    position: 'right'
                }
            },
            {
                element: '#btnNovoRepresentante',
                popover: {
                    title: 'Botão Incluir',
                    description: 'Clique aqui para iniciar o cadastro de um representante.',
                    position: 'right'
                }
            },
            {
                element: '#tabelaRepresentante',
                popover: {
                    title: 'Tabela Representante',
                    description: 'Aqui estão os dados dos representantes cadastrados.',
                    position: 'top'
                }
            }
        ]);
        driver.start();
    });
});
$(document).ready(async function () {
    const permissaoUsuarioLogado = await permissaoAcessos("CADCARACTERISTICA");
    const habilitaCampoMaterial = await CopiaParametro('PEDIDO', 19) == 1;

    componenteFiltro('linha', true)
    componenteFiltro('grupo', true)
    componenteFiltro('etiqueta', true)
    componenteFiltro('faixa', true)
    componenteFiltro('linha', false, false, 'LinhaDuplicar')
    componenteFiltro('grupo', false, false, 'GrupoDuplicar')
    componenteFiltro('etiqueta', false, false, 'EtiquetaDuplicar')

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

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

    $('#btnLimparFiltros').on('click', function () {
        $('#txtLinha').empty().trigger('change')
        $('#txtGrupo').empty().trigger('change')
        $('#txtEtiqueta').empty().trigger('change')
        $('#txtFaixa').empty().trigger('change')
    })

    async function retornaFiltros() {
        const linha = await formataListas($('#txtLinha').val().toString())
        const grupo = await formataListas($('#txtGrupo').val().toString())
        const etiqueta = await formataListas($('#txtEtiqueta').val().toString())
        const faixa = await formataListas($('#txtFaixa').val().toString())

        return {
            linha,
            grupo,
            etiqueta,
            faixa
        }
    }

    $('#btnConfirmar').on('click', async function () {
        $.LoadingOverlay('show')
        try {
            const linha = pegaChave('#txtLinhaDuplicar')
            const grupo = pegaChave('#txtGrupoDuplicar')
            const etiqueta = pegaChave('#txtEtiquetaDuplicar')

            await validacaoCamposDuplicar(linha, grupo, etiqueta)
            await duplicarDados(linha, grupo, etiqueta)
        } catch (error) {
            console.error(error)
            msgAlerta(error.message)
        } finally {
            $.LoadingOverlay('hide')
        }
    })

    async function duplicarDados(linha, grupo, etiqueta) {
        $.LoadingOverlay('show')
        try {
            const params = `&ID=${$('#idDuplicar').val()}` +
                `&LINHA_NOVO=${linha}` +
                `&GRUPO_NOVO=${grupo}` +
                `&ETIQUETA_NOVO=${etiqueta}`;

            const response = await requisicao('POST', '/sisplan/cadcaracteristica/v1/duplicarregistro?', params, '', 600000)

            if (!response) {
                return
            }

            if (response.status === 200) {
                criaMensagemSucesso('Caracteristica duplicada com sucesso.');
                $('#txtLinhaDuplicar').val('')
                $('#txtGrupoDuplicar').val('')
                $('#txtEtiquetaDuplicar').val('')
                $('#txtFaixaDuplicar').val('')
                $('#btnConsultar').trigger('click')
            }

        } catch (e) {
            console.log(e)
            msgErro('Não foi possível duplicar os dados.')
        } finally {
            $('#modal-duplicar').modal('hide')
            $.LoadingOverlay('hide')
        }
    }

    async function validacaoCamposDuplicar(linha, grupo, etiqueta) {
        if (linha === '') {
            throw new Error(`Favor informar uma linha.`)
        }

        if (grupo === '') {
            throw new Error(`Favor informar um grupo.`)
        }

        if (etiqueta === '') {
            throw new Error(`Favor informar uma etiqueta.`)
        }

        if (await Existe('CARACT', ['COD_LINHA', 'COD_GRUPO', 'COD_ETQ'], [linha, grupo, etiqueta])) {
            throw new Error(`Já existe uma característica com o código linha: ${linha}, código grupo: ${grupo}, código etiqueta: ${etiqueta}. Não será possível duplicar.`);
        }
    };

    async function buscaDados() {
        $('#btnConsultar').prop('disabled', true)
        $.LoadingOverlay('show')
        try {
            const filtros = await retornaFiltros()

            const response = await requisicao('GET', '/sisplan/cadcaracteristica/v1/buscadadosacesso?', `&FILTROS=${encodeURIComponent(JSON.stringify(filtros))}`, '', 600000)

            if (!response) {
                return
            }

            const jsonStr = await response.json()

            criaTabelaDados(jsonStr)
        } catch (e) {
            console.log(e)
            msgErro('Não foi possível buscar os dados.')
        } finally {
            $('#modal-filtros').modal('hide')
            $.LoadingOverlay('hide')
            $('#btnConsultar').prop('disabled', false)
        }
    }

    function retornaBotaoOpcoes(data, temMockup) {
        var retorno = '<div title="' + data + '"> ' +
            '    <button class="btn btn-info btn-sm dropdown-toggle btnVerificaOpcoes" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ' +
            '      ' + data + ' ' +
            '    </button> ' +
            '    <div class="dropdown-menu"> ' +
            '    <button class="dropdown-item" title="Editar" id="btnEditar">Editar</button>     ' +
            '    <button class="dropdown-item" title="Excluir" id="btnExcluir">Excluir</button>     ' +
            `    ${temMockup === 'S' ? `<button class="dropdown-item" title="Visualize o mockup vinculado com a linha, grupo e etiqueta cadastrados." id="btnVisualizar">Ver Mockup</button>` : ''}      ` +
            '    <button class="dropdown-item" title="Duplicar" id="btnDuplicar">Duplicar</button>     ' +
            '</div>';
        return retorno;
    };

    function criaTabelaDados(data) {
        if ($.fn.DataTable.isDataTable('#tabelaDados')) {
            $('#tabelaDados').DataTable().destroy();
            $('#tabelaDados').empty();
        };

        const columns = [
            { data: 'ID', title: 'Id' },
            { data: 'ETIQUETA', title: 'Etiqueta' },
            { data: 'DESC_ETIQUETA', title: 'Desc. Etiqueta' },
            { data: 'GRUPO', title: 'Grupo' },
            { data: 'DESC_GRUPO', title: 'Desc. Grupo' },
            { data: 'LINHA', title: 'Linha' },
            { data: 'DESC_LINHA', title: 'Desc. Linha' },
            { data: 'FAIXA', title: 'Faixa' },
            { data: 'DESC_FAIXA', title: 'Desc. Faixa' },
            { data: 'DESCRICAO', title: 'Descrição' },
            { data: 'POSSUIMOCKUP', title: 'Possui Mockup' },
            { data: 'TEMPO_COST', title: 'Tempo Cost.' },
            { data: 'VALOR_COST', title: 'Valor Cost.' },
            { data: 'VALOR_LINHA', title: 'Valor Linha' },
            { data: 'MARGEM', title: 'Margem' },
            { data: 'CODFIS', title: 'Codfis' },
            { data: 'MARKUP', title: 'Markup' },
            { data: 'DESC_MARKUP', title: 'Desc. Markup' },
            { data: 'VIRADA', title: 'Virada' },
            { data: 'ATIVO', title: 'Ativo' }
        ];

        if (habilitaCampoMaterial) {
            columns.push({ data: 'MATERIAL', title: 'Material' })
            columns.push({ data: 'DESC_MATERIAL', title: 'Desc. Material' })
        }

        $("#tabelaDados").DataTable({
            sort: true,
            paging: false,
            destroy: true,
            lengthChange: false,
            filter: false,
            columnDefs: [
                {
                    targets: [0], render: function (data, type, row) {
                        return retornaBotaoOpcoes(data, row.POSSUIMOCKUP);
                    },
                }
                //     {
                //         targets: [6, 7, 8, 9, 10, 12, 13, 14],
                //         render: function (data) {
                //             if (!data) {
                //                 return parseFloat(0).toFixed(4);
                //             }
                //             return parseFloat(data).toFixed(4);
                //         }
                // }
            ],
            autoWidth: true,
            data,
            columns
        }).draw(false);
    }

    $("#tabelaDados").on("click", "#btnEditar", async function () {
        if (permissaoUsuarioLogado.ALTERA == 'S') {
            const data = $("#tabelaDados")
                .DataTable()
                .row($(this).parents("tr"))
                .data()
            const registroLiberado = await liberarRegistro("CADCARACTERISTICA", data.ID)
            if (registroLiberado) {
                window.location.href = `cadcaracteristica/${data.ID}`
            }
        } else {
            msgAlertaSemConfirmacao("Sem permissão para alterar!");
        }
    });

    $("#tabelaDados").on("dblclick", "tr", async function () {
        if (permissaoUsuarioLogado.ALTERA == 'S') {
            let data = $("#tabelaDados").DataTable().row($(this)).data();
            let registroLiberado = await liberarRegistro("CADCARACTERISTICA", data.ID)
            if (registroLiberado) {
                window.location.href = `cadcaracteristica/${data.ID}`;
            }
        } else {
            msgAlertaSemConfirmacao("Sem permissão para alterar!");
        }
    });

    $("#tabelaDados").on("click", "#btnExcluir", async function () {
        $.LoadingOverlay("show");
        try {
            if (permissaoUsuarioLogado.EXCLUI == "S") {
                const row = $("#tabelaDados").DataTable().row($(this).parents("tr"))
                await excluiCaracteristica(row)
            } else {
                msgAlertaSemConfirmacao("Sem permissão para excluir!");
            }
        } finally {
            $.LoadingOverlay("hide");
        }
    })

    $("#tabelaDados").on("click", "#btnVisualizar", async function () {
        $.LoadingOverlay("show");
        try {
            const rowData = $("#tabelaDados").DataTable().row($(this).parents("tr")).data();
            const blob = await buscarMockup(`${rowData.ID}.svg`)
            const url = URL.createObjectURL(blob);
            $(".imagepreview").attr('src', url);
            $('#imagemodal').modal('show');
        } finally {
            $.LoadingOverlay("hide");
        }
    })

    $("#tabelaDados").on("click", "#btnDuplicar", async function () {
        const row = $("#tabelaDados").DataTable().row($(this).parents("tr"))
        const data = row.data()
        $('#idDuplicar').val(data.ID)
        $('#modal-duplicar').modal('show');
    })

    $('#btnIncluir').on('click', function () {
        if (permissaoUsuarioLogado.ALTERA == 'S') {
            window.location.href = `cadcaracteristica/create`
        } else {
            msgAlertaSemConfirmacao("Sem permissão para incluir!")
        }
    })

    async function excluiCaracteristica(row) {
        const data = row.data()
        const { ID } = data
        const response = await requisicao("DELETE", `/sisplan/cadcaracteristica/V1/excluiregistro?`, `ID=${ID}`, '', 600000)

        if (!response) {
            return
        }

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

        toastr.success("Exclusão efetuada com sucesso!", "Confirmação", {
            toastClass: "alert",
            iconClasses: {
                error: "alert-error",
                info: "alert-info",
                success: "alert-success",
                warning: "alert-warning",
            },
            positionClass: "toast-top-center",
            progressBar: true,
            timeOut: 3000,
            fadeOut: 1000,
            async onHidden() {
                row.remove().draw(false)
            },
        }).css({
            "margin-top": "20%",
            width: "500px",
            "max-width": "500px",
        })
    }

    $('#btnConsultar').trigger('click')
});