$(document).ready(async function () {
  $('#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 uma consulta.',
          position: 'right'
        }
      },
      {
        element: '#btnImprimir',
        popover: {
          title: 'Botão Imprimir',
          description: 'Clique aqui para imprimir um relatório.',
          position: 'right'
        }
      },
      {
        element: '#divRelatorio',
        popover: {
          title: 'Tabela com os Dados',
          description: 'Aqui, após clicar em consultar ficam os dados filtrados.',
          position: 'bottom'
        }
      }
      ]);
      driver.start();
    });
  });

  componenteFiltro('cotacao', true, true, 'Cotacoes')
  componenteFiltro('centroCusto', true, true, 'CentrosCusto')
  componenteFiltro('itemCotacao', true, true, 'Codigos')
  componenteFiltro('fornecedor', true, true, 'Fornecedores')
  componenteFiltro('cor', true, true, 'Cores')

  await preencheOrdenacaoTela('RelCotacao');

  $('#btnLimparFiltros').on('click', async function () {
    $('#btnLimpaCotacoes').trigger('click');
    $('#btnLimpaCodigos').trigger('click');
    $('#btnLimpaFornecedores').trigger('click');
    $('#btnLimpaCores').trigger('click');
    $('#btnLimpaCentrosCusto').trigger('click');
    $('#selectSituacao').val('')
    $('#selectStatus').val('')
    $('#selectNivel').val('T')
  });

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

  async function retornarFiltros() {
    const cotacoes = $('#txtCotacoes').val()
    const codigos = await formataListas($('#txtCodigos').val().toString())
    const fornecedores = await formataListas($('#txtFornecedores').val().toString())
    const cores = await formataListas($('#txtCores').val().toString())
    const centrosCusto = await formataListas($('#txtCentrosCusto').val().toString())
    const situacao = $('#selectSituacao').val()
    const status = $('#selectStatus').val()
    const nivelLiberacao = $('#selectNivel').val()
    const ordenacao = $('#txtOrdem').val()
    const idUsuario = getCookie('id_usuario')

    return {
      filtros: {
        codigos,
        fornecedores,
        cores,
        centrosCusto,
        situacao,
        status,
      },
      ordenacao,
      cotacoes,
      idUsuario,
      nivelLiberacao,
    }
  }

  retornaHintRelatorio('btnImprimir', 'RelCotacao');

  $('#btnImprimir').on('click', async function () {
    try {
      $.LoadingOverlay('show');
      try {
        const filtros = await retornarFiltros();
        const bImprimeAutomatico = await verificaImprimirAutomatico('RelCotacao');
        const arquivo = await GeraRelatorio(`/sisplan/relcotacao/v1/impressao?`, 'POST', 3600000, false, 'RelCotacao', JSON.stringify(filtros));
        if (arquivo != undefined) {
          if (!bImprimeAutomatico) {
            window.open(`${BASE_URI}/relatorios_api/pdf/${arquivo}`, '_blank');
          }
          await limparRelatorios();
        }

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

  $('#btnConsultar').on('click', function () {
    consultar()
  })

  async function consultar() {
    const filtros = await retornarFiltros()
    const ordenacao = $('#txtOrdem').val()
    carregarTabelaCotacoes(filtros, ordenacao)
    $('#modal-filtros').modal('hide')
  }

  async function carregarTabelaCotacoes(filtros, ordenacao) {
    if ($.fn.DataTable.isDataTable('#tabelaCotacoes')) {
      $('#tabelaCotacoes').DataTable().destroy()
      $('#tabelaCotacoes').empty()
    }

    const columns = [
      {
        data: 'id',
        title: 'Id',
        visible: false,
      },
      {
        data: 'numero',
        title: 'Número',
      },
      {
        data: 'solicitacao',
        title: 'Solicitação',
      },
      {
        data: 'statusCompra',
        title: 'Status Compra',
      },
      {
        data: 'codigo',
        title: 'Código',
      },
      {
        data: 'codigo2',
        title: 'Código 2',
      },
      {
        data: 'descricao',
        title: 'Descrição',
      },
      {
        data: 'cor',
        title: 'Cor',
      },
      {
        data: 'descricaoCor',
        title: 'Descrição Cor',
      },
      {
        data: 'tamanho',
        title: 'Tamanho',
      },
      {
        data: 'unidade',
        title: 'Unidade',
      },
      {
        data: 'unidadeCompra',
        title: 'Unidade de Compra',
      },
      {
        data: 'centroCusto',
        title: 'Centro de Custo',
      },
      {
        data: 'descCentroCusto',
        title: 'Desc. Centro de Custo',
      },
      {
        data: 'idTipo',
        title: 'Id Tipo',
      },
      {
        data: 'descTipo',
        title: 'Desc. Tipo',
      },
      {
        data: 'condicaoCotacao',
        title: 'Condição Cotação',
      },
      {
        data: 'condicaoPagamento',
        title: 'Condição Pagamento',
      },
      {
        data: 'descricaoCondicaoPagamento',
        title: 'Descrição Condição Pagamento',
      },
      {
        data: 'moeda',
        title: 'Moeda',
      },
      {
        data: 'descricaoMoeda',
        title: 'Descrição Moeda',
      },
      {
        data: 'quantidadeCotada',
        title: 'Quantidade Cotada',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'quantidade',
        title: 'Quantidade',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'quantidadeOrdemCompra',
        title: 'Quantidade Ordem Compra',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'preco',
        title: 'Preço',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'precoOriginal',
        title: 'Preço Original',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'valor',
        title: 'Valor',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'percentualDesconto',
        title: 'Percentual Desconto',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'valorDesconto',
        title: 'Valor Desconto',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'frete',
        title: 'Frete',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'codigoFornecedor',
        title: 'Código Fornecedor',
      },
      {
        data: 'nomeFornecedor',
        title: 'Nome Fornecedor',
      },
      {
        data: 'tipoItem',
        title: 'Tipo',
      },
      {
        data: 'status',
        title: 'Status',
      },
      {
        data: 'indice',
        title: 'Índice',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'dataEntregaPrevista',
        title: 'Data Entrega Prevista',
        render(data) {
          return retornarDataISOEmYMD({ dataISO: data, usarUTC: true, reverso: true })
        },
      },
      {
        data: 'codigoItemFornecedor',
        title: 'Código Item Fornecedor',
      },
      {
        data: 'descricaoItemFornecedor',
        title: 'Descrição Item Fornecedor',
      },
      {
        data: 'corFornecedor',
        title: 'Cor Fornecedor',
      },
      {
        data: 'fatorConversaoFornecedor',
        title: 'Fator Conversão Fornecedor',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'entregaFornecedor',
        title: 'Entrega Fornecedor',
        render(data) {
          return retornarDataISOEmYMD({ dataISO: data, usarUTC: true, reverso: true })
        },
      },
      {
        data: 'fabricante',
        title: 'Fabricante',
      },
      {
        data: 'observacao',
        title: 'Observação',
      },
      {
        data: 'deposito',
        title: 'Depósito',
      },
      {
        data: 'descDeposito',
        title: 'Desc. Depósito',
      },
      {
        data: 'tipoFrete',
        title: 'Tipo Frete',
      },
      {
        data: 'icms',
        title: 'Icms',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'ipi',
        title: 'Ipi',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'desconto',
        title: 'Desconto',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data })
        }
      },
      {
        data: 'empresaSolicitacao',
        title: 'Empresa Solicitação',
      },
      {
        data: 'divisor',
        title: 'Divisor',
        visible: false,
      }
    ]

    $('#tabelaCotacoes').DataTable({
      sort: false,
      paging: true,
      destroy: true,
      lengthChange: false,
      filter: false,
      info: false,
      ordering: false,
      sorting: false,
      order: false,
      pageLength: 15,
      colReorder: true,
      serverSide: true,
      ajax: {
        url: `${getCookie('protocolo')}://${getCookie('ip_api')}/sisplan/relcotacao/v1/dados`,
        type: "POST",
        headers: {
          'Authorization': getCookie('accessToken') ? 'Bearer ' + getCookie('accessToken') : '',
        },
        data: function (data) {
          const { start, length, draw } = data;
          return JSON.stringify({
            ...filtros,
            paginacao: {
              quantidadeMaximaRegistros: length,
              quantidadeRegistrosPular: start,
              contadorRequisicoes: draw,
            },
            empresa: getCookie('empresa'),
          })
        },
        dataSrc: function (json) {
          if (!json || !json.data) {
            return []
          }
          return json.data
        },
        cache: true,
        beforeSend: function () {
          $.LoadingOverlay('show')
        },
        complete: function () {
          $.LoadingOverlay('hide')
        },
      },
      autoWidth: true,
      columns,
      scrollX: true,
      scrollY: '27rem',
    })
  }
});