$(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();
    });
  });

  await preencheOrdenacaoTela('RelSolicita');

  $('#btnLimparFiltros').on('click', async function () {
    setarDataAtual('dtCadastroDe', true);
    setarDataAtual('dtCadastroAte');
    setarDataAtual('dtEntregaDe', true);
    setarDataAtual('dtEntregaAte');

    $('#btnLimpaProduto').trigger('click');
    $('#btnLimpaMaterial').trigger('click');
    $('#btnLimpaNumero').trigger('click');
    $('#btnLimpaSolicitante').trigger('click');
    $('#btnLimpaGrupoMat').trigger('click');
    $('#btnLimpaSubGrupo').trigger('click');
    $('#btnLimpaTipo').trigger('click');
    $('#btnLimpaCentroCusto').trigger('click');
    $('#btnLimpaCliente').trigger('click');
    $('#btnLimpaComprador').trigger('click');
    $('#btnLimpaStatus').trigger('click');
    $('#btnLimpaCor').trigger('click');
    $('#btnLimpaDeposito').trigger('click');
  });

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

  $('#rdTipoProduto, #rdTipoMaterial, #rdTipoTodos').on('change', function () {
    $('#txtProduto').empty().trigger('change')
    $('#txtMaterial').empty().trigger('change')

    if ($('#rdTipoTodos').is(':checked')) {
      $('#inputMaterial').removeClass('d-none')
      $('#inputProduto').removeClass('d-none')
      $('#inputSubGrupo').removeClass('d-none')
      $('#inputGrupoMat').removeClass('d-none')

    } else if ($('#rdTipoProduto').is(':checked')) {
      $('#inputMaterial').addClass('d-none')
      $('#inputSubGrupo').addClass('d-none')
      $('#inputGrupoMat').addClass('d-none')
      $('#inputProduto').removeClass('d-none')
    } else {
      $('#inputMaterial').removeClass('d-none')
      $('#inputSubGrupo').removeClass('d-none')
      $('#inputGrupoMat').removeClass('d-none')
      $('#inputProduto').addClass('d-none')
    }
  });

  function retornarFiltroEmpresas() {
    if ($('.empresa_selecionada:checked').length > 0) {
      const filtro = $('.empresa_selecionada:checked').toArray().reduce((acc, current) => {
        const label = $(`label[for="${current.id}"]`).text()
        const empresa = label.split(' - ')[0].trim()
        if (!acc) {
          return `'${empresa}'`
        }

        return acc + `, '${empresa}'`
      }, '')

      return filtro
    }


    return `'${getCookie('empresa').replace('_', '')}'`
  }

  async function retornarFiltros() {
    const cadastroDe = $('#dtCadastroDe').val()
    const cadastroAte = $('#dtCadastroAte').val()
    const entregaDe = $('#dtEntregaDe').val()
    const entregaAte = $('#dtEntregaAte').val()
    const numeros = await formataListas($('#txtNumero').val().toString())
    const produtos = await formataListas($('#txtProduto').val().toString())
    const materiais = await formataListas($('#txtMaterial').val().toString())
    const solicitantes = await formataListas($('#txtSolicitante').val().toString())
    const gruposMaterial = await formataListas($('#txtGrupoMat').val().toString())
    const subgruposMaterial = await formataListas($('#txtSubGrupo').val().toString())
    const tipos = await formataListas($('#txtTipo').val().toString())
    const cores = await formataListas($('#txtCor').val().toString())
    const centrosCusto = await formataListas($('#txtCentroCusto').val().toString())
    const clientes = await formataListas($('#txtCliente').val().toString())
    const compradores = await formataListas($('#txtComprador').val().toString())
    const status = await formataListas($('#txtStatus').val().toString())
    const depositos = await formataListas($('#txtDeposito').val().toString())
    const statusOc = $('input[name="statusOC"]:checked').val()
    const statusLiberacao = $('input[name="statusLib"]:checked').val()
    let valores = []
    $('input[name="sitItens"]:checked').each(function () {
      valores.push("'" + $(this).val() + "'");
    });
    const situacaoItens = valores.join(',')
    valores = []
    $('input[name="statusItens"]:checked').each(function () {
      valores.push("'" + $(this).val() + "'");
    });
    const statusItens = valores.join(',')
    const tipoItem = $('input[name="tipo"]:checked').val()
    const empresas = retornarFiltroEmpresas()

    let codigos = ''
    if (produtos) {
      codigos = produtos
    }

    if (materiais) {
      if (codigos) {
        codigos = `, ${materiais}`
      } else {
        codigos = materiais
      }
    }

    return {
      cadastro: {
        de: cadastroDe,
        ate: cadastroAte,
      },
      entrega: {
        de: entregaDe,
        ate: entregaAte,
      },
      numeros,
      codigos,
      compradores,
      tipos,
      solicitantes,
      gruposMaterial,
      subgruposMaterial,
      cores,
      centrosCusto,
      clientes,
      empresas,
      depositos,
      status,
      statusOc,
      statusLiberacao,
      situacaoItens,
      statusItens,
      tipoItem,
    }
  }

  retornaHintRelatorio('btnImprimir', 'RelSolicita');

  $('#btnImprimir').on('click', async function () {
    try {
      $.LoadingOverlay('show');
      try {
        const filtros = await retornarFiltros();
        const bImprimeAutomatico = await verificaImprimirAutomatico('RelSolicita');
        const arquivo = await GeraRelatorio(`/sisplan/relsolicita/v1/impressao?`, 'POST', 3600000, false, 'RelSolicita', 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()
    carregarTabelaItens(filtros, ordenacao)
    $('#modal-filtros').modal('hide')
  }

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

    const columns = [
      { title: "Número", data: 'numero' },
      { title: "Cor", data: 'cor' },
      {
        title: "Qtde",
        data: 'qtde',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      {
        title: "Qtde Cancelada",
        data: 'qtdeCancelada',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      { title: "Situação", data: 'situacao' },
      { title: "Especifica", data: 'especifica' },
      { title: "Código", data: 'codigo' },
      { title: "Descrição", data: 'descricao' },
      { title: "Unidade", data: 'unidade' },
      { title: "Uni. Compra", data: 'unidadeCompra' },
      { title: "Ordem", data: 'ordem' },
      {
        title: "Qtde baixada",
        data: 'qtdeBaixada',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      { title: "Tamanho", data: 'tam' },
      { title: "Tipo Item", data: 'tipoItem' },
      {
        title: "Data",
        data: 'data',
        render: function (data) {
          return retornarDataISOEmYMD({ dataISO: data, reverso: true, usarUTC: true })
        }
      },
      { title: "Solicitante", data: 'solicitante' },
      { title: "Status", data: 'status' },
      { title: "Cliente", data: 'cliente' },
      { title: "Nome Cliente", data: 'nomeCliente' },
      {
        title: "Entrega",
        data: 'entrega',
        render: function (data) {
          return retornarDataISOEmYMD({ dataISO: data, reverso: true, usarUTC: true })
        }
      },
      { title: "Tipo", data: 'tipo' },
      { title: "Obs", data: 'obs' },
      { title: "Setor", data: 'setor' },
      { title: "Número OF", data: 'numeroOf' },
      {
        title: "Valor",
        data: 'valor',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      {
        title: "Emissão",
        data: 'emissao',
        render: function (data) {
          return retornarDataISOEmYMD({ dataISO: data, reverso: true, usarUTC: true })
        }
      },
      { title: "Nome", data: 'nome' },
      { title: "Desc. Cor", data: 'descCor' },
      { title: "Comp1", data: 'comp1' },
      {
        title: "Entrega Item",
        data: 'entregaItem',
        render: function (data) {
          return retornarDataISOEmYMD({ dataISO: data, reverso: true, usarUTC: true })
        }
      },
      { title: "Depósito", data: 'deposito' },
      { title: "Centro Custo", data: 'centroCusto' },
      { title: "Desc. Centro Custo", data: 'descCentroCusto' },
      { title: "Comprador", data: 'comprador' },
      { title: "Comprador Nome", data: 'nomeComprador' },
      { title: "Ordem Compra", data: 'ordemCompra' },
      { title: "Número Cotação", data: 'cotacao' },
      { title: "Empresa", data: 'empresa' },
      { title: "Id Sol. Item", data: 'idSolIten' },
      { title: "Id Cotação", data: 'idCotacao' },
      { title: "Sit. Cotação", data: 'situacaoCotacao' },
      { title: "Complemento Cor", data: 'complementoCor' },
      { title: "Fornecedor Material", data: 'fornecedor' },
      { title: "Nome Fornc. Mat.", data: 'nomeFornecedor' },
      { title: "Classe Gerencial", data: 'classeGerencial' },
      { title: "Desc. Classe Ger.", data: 'descClasseGerencial' },
      {
        title: "Preço",
        data: 'preco',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      { title: "Status Material", data: 'statusItem' },
      { title: "Lista OF", data: 'listaOfs' },
      {
        title: "Divisor",
        data: 'divisor',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      { title: "Marca Material", data: 'marca' },
      { title: "Desc. Marca", data: 'descMarca' },
      { title: "Código Sit.", data: 'sitProd' },
      { title: "Desc. Sit.", data: 'descSitProd' },
      { title: "Conta Cont.", data: 'contaContabil' },
      { title: "Id Cont.", data: 'idContaContabil' },
      { title: "Desc. Conta Cont.", data: 'descContaContabil' }
    ]

    const table = $('#tabelaSolicitacoes').DataTable({
      sort: false,
      paging: true,
      destroy: true,
      lengthChange: false,
      filter: false,
      info: false,
      ordering: false,
      sorting: false,
      order: false,
      pageLength: 10,
      colReorder: true,
      serverSide: true,
      ajax: {
        url: `${getCookie('protocolo')}://${getCookie('ip_api')}/sisplan/relsolicita/v1/dados`,
        type: "POST",
        headers: {
          'Authorization': getCookie('accessToken') ? 'Bearer ' + getCookie('accessToken') : '',
        },
        data: function (data) {
          const { start, length, draw } = data;
          return JSON.stringify({
            filtros,
            ordenacao,
            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: '20rem',
      select: {
        style: 'single',
        toggleable: false,
      },
    })

    table.off('select')
    table.on('select', function (_e, _dt, type, indexes) {
      if (type === 'row') {
        const [data] = table.rows(indexes[0]).data().toArray()
        if (!data) {
          return
        }
        carregarDadosItem(data.codigo, data.cor)
      }
    })
  }

  async function carregarDadosItem(codigo, cor) {
    try {
      $.LoadingOverlay('show')
      const dados = await buscarDadosItem(codigo, cor)

      if (!dados) {
        return
      }

      criarTabelaCompras(dados.itensOc)
      criarTabelaConsumos(dados.consumos)
      criarTabelaUltimasCompras(dados.ultimasCompras)
    } finally {
      $.LoadingOverlay('hide')
    }
  }

  function criarTabelaCompras(data = []) {
    if ($.fn.DataTable.isDataTable('#tabelaCompras')) {
      $('#tabelaCompras').DataTable().destroy()
      $('#tabelaCompras').empty()
    }

    const columns = [
      {
        data: 'qtde',
        title: 'Qtde',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      {
        data: 'codigo',
        title: 'Código',
      },
      {
        data: 'descricao',
        title: 'Descrição',
      },
      {
        data: 'cor',
        title: 'Cor',
      },
      {
        data: 'descCor',
        title: 'Desc. Cor',
      },
      {
        data: 'tam',
        title: 'Tam',
      },
      {
        data: 'numero',
        title: 'Número',
      },
      {
        data: 'entrega',
        title: 'Entrega',
        render: function (data) {
          return retornarDataISOEmYMD({ dataISO: data, reverso: true, usarUTC: true })
        }
      },
      {
        data: 'fornecedor',
        title: 'Fornecedor',
      },
      {
        data: 'nome',
        title: 'Nome',
      },
    ]

    $('#tabelaCompras').DataTable({
      sort: false,
      paging: false,
      destroy: true,
      lengthChange: false,
      filter: false,
      info: false,
      ordering: false,
      sorting: false,
      order: false,
      autoWidth: true,
      data,
      columns,
      scrollY: '15rem',
      scrollX: true,
      scrollCollapse: true,
    })
  }

  function criarTabelaConsumos(data = []) {
    if ($.fn.DataTable.isDataTable('#tabelaConsumos')) {
      $('#tabelaConsumos').DataTable().destroy()
      $('#tabelaConsumos').empty()
    }

    const columns = [
      {
        data: 'codigo',
        title: 'Código',
      },
      {
        data: 'descricao',
        title: 'Descrição',
      },
      {
        data: 'cor',
        title: 'Cor',
      },
      {
        data: 'descCor',
        title: 'Desc. Cor',
      },
      {
        data: 'qtde',
        title: 'Qtde',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      {
        data: 'dataMovimento',
        title: 'Data Movimento',
        render: function (data) {
          return retornarDataISOEmYMD({ dataISO: data, reverso: true, usarUTC: true })
        }
      },
    ]

    $('#tabelaConsumos').DataTable({
      sort: false,
      paging: false,
      destroy: true,
      lengthChange: false,
      filter: false,
      info: false,
      ordering: false,
      sorting: false,
      order: false,
      autoWidth: true,
      data,
      columns,
      scrollY: '15rem',
      scrollX: true,
      scrollCollapse: true,
    })
  }

  function criarTabelaUltimasCompras(data = []) {
    if ($.fn.DataTable.isDataTable('#tabelaUltCompra')) {
      $('#tabelaUltCompra').DataTable().destroy()
      $('#tabelaUltCompra').empty()
    }

    const columns = [
      {
        data: 'numero',
        title: 'Número',
      },
      {
        data: 'codcre',
        title: 'Codcre',
      },
      {
        data: 'nome',
        title: 'Nome',
      },
      {
        data: 'ordem',
        title: 'Ordem',
      },
      {
        data: 'qtde',
        title: 'Qtde',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      {
        data: 'qtdeEstoque',
        title: 'Qtde Estoque',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      {
        data: 'valor',
        title: 'Valor',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      {
        data: 'desconto',
        title: 'Desconto',
        className: 'text-right',
        render: function (data) {
          return retornarFloatFormatadoEmMonetario({ valor: data, quantidadeCasasDecimais: 2 })
        }
      },
      {
        data: 'entrada',
        title: 'Entrada',
        render: function (data) {
          return retornarDataISOEmYMD({ dataISO: data, reverso: true, usarUTC: true })
        }
      },
    ]

    $('#tabelaUltCompra').DataTable({
      sort: false,
      paging: false,
      destroy: true,
      lengthChange: false,
      filter: false,
      info: false,
      ordering: false,
      sorting: false,
      order: false,
      autoWidth: true,
      data,
      columns,
      scrollY: '15rem',
      scrollX: true,
      scrollCollapse: true,
    })
  }

  async function buscarDadosItem(codigo, cor) {
    try {
      const response = await requisicao('GET', '/sisplan/relsolicita/v1/dadositem?', `CODIGO=${encodeURIComponent(codigo)}&COR=${encodeURIComponent(cor)}`, null, 1800000);
      const dados = await response.json()

      if (!dados) {
        return
      }

      const { mensagem, resultado } = dados
      if (mensagem?.codigo !== 200) {
        throw mensagem?.mensagem
      }

      return resultado
    } catch (error) {
      console.error(error);
      msgErro('Não foi possível buscar os dados.');
    }
  }

  $('#btnSelecionarEmpresas').on('click', function () {
    carregaEmpresasDisponiveis();
  });

  function addPesquisaAutocompleta() {
    componenteFiltro('produto', true, true);
    componenteFiltro('material', true, true);
    componenteFiltro('cor', true, true);
    componenteFiltro('subGrupo', true, true);
    componenteFiltro('tipo', true, true);
    componenteFiltro('status', true, true);
    componenteFiltro('cliente', true, true);
    componenteFiltro('centroCusto', true, true);
    componenteFiltro('deposito', true, true);

    $('#txtSolicitante').pesquisa_variosServerside(1, `{"tabela":"PESSOAL", "camposSelect":[ "CODIGO", "NOME" ]}`, "CODIGO", "NOME")
    $('#btnSolicitante').pesquisa_serversideSel('#txtSolicitante', `{"tabela":"PESSOAL", "camposSelect":[ "CODIGO", "NOME" ]}`, 'Pesquisa Solicitante');
    $('#btnLimpaSolicitante').on('click', function () { $('#txtSolicitante').empty().trigger('change') })

    $('#txtGrupoMat').pesquisa_variosServerside(1, `{"tabela":"GRUPO_MA", "camposSelect":[ "GRUPO_MA.CODIGO", "GRUPO_MA.DESCRICAO" ]}`, "ID", "NOME")
    $('#btnGrupoMat').pesquisa_serversideSel('#txtGrupoMat', `{"tabela":"GRUPO_MA", "camposSelect":[ "GRUPO_MA.CODIGO", "GRUPO_MA.DESCRICAO" ]}`, 'Pesquisa Grupo de Material');
    $('#btnLimpaGrupoMat').on('click', function () { $('#txtGrupoMat').empty().trigger('change') })

    $('#txtNumero').pesquisa_variosServerside(1, `{"tabela":"SOL_COMPRA", "camposSelect":[ "NUMERO", "SOLICITANTE" ]}`, "NUMERO", "SOLICITANTE")
    $('#btnNumero').pesquisa_serversideSel('#txtNumero', `{"tabela":"SOL_COMPRA", "camposSelect":[ "NUMERO", "SOLICITANTE" ]}`, 'Pesquisa Solicitação');
    $('#btnLimpaNumero').on('click', function () { $('#txtNumero').empty().trigger('change') })

    $('#txtComprador').pesquisa_variosServerside(1, `{"tabela":"ENTIDADE", "camposSelect":[ "CODCLI", "NOME", "FANTASIA" ]}`, "CODCLI", "NOME", "FANTASIA")
    $('#btnComprador').pesquisa_serversideSel('#txtComprador', `{"tabela":"ENTIDADE", "camposSelect":[ "CODCLI", "NOME", "FANTASIA" ]}`, 'Pesquisa Cliente');
    $('#btnLimpaComprador').on('click', function () { $('#txtComprador').empty().trigger('change') })
  }

  $('#tabCompras').on('click', async function () {
    $('#divConsumos').addClass('d-none')
    $('#divUltCompra').addClass('d-none')
    $('#divCompras').removeClass('d-none')
  })

  $('#tabConsumos').on('click', async function () {
    $('#divCompras').addClass('d-none')
    $('#divUltCompra').addClass('d-none')
    $('#divConsumos').removeClass('d-none')
  })
  $('#tabUltCompra').on('click', async function () {
    $('#divCompras').addClass('d-none')
    $('#divConsumos').addClass('d-none')
    $('#divUltCompra').removeClass('d-none')
  })

  $("#tabCompras, #tabConsumos, #tabUltCompra").on('click', async function () {
    setTimeout(() => {
      $('#tabelaCompras').DataTable().columns.adjust().draw(false);
      $('#tabelaConsumos').DataTable().columns.adjust().draw(false);
      $('#tabelaUltCompra').DataTable().columns.adjust().draw(false);
    }, 175);
  });

  $('#nav-tab').prop('disabled', true)

  function innitDateAtual() {
    setarDataAtual('dtCadastroDe', true);
    setarDataAtual('dtCadastroAte');
    setarDataAtual('dtEntregaDe', true);
    setarDataAtual('dtEntregaAte');
  }

  addPesquisaAutocompleta();
  innitDateAtual();
});