$('#tutorial').on('click', function () {
  $(document).ready(async function () {
      const driver = new Driver({
          doneBtnText: 'Sair',
          closeBtnText: 'Fechar',
          nextBtnText: 'Próximo',
          prevBtnText: 'Anterior',
          allowClose: false,
          animate: true
      });

      driver.defineSteps([{
          element: '#campostuor',
          popover: {
              title: 'Dados Gerais',
              description: 'Aqui estão os campos disponíveis para o cadastro, os campos obrigatórios terão o * ao lado do nome.',
              position: 'top'
          }
      },
      {
          element: '#checkAtivo',
          popover: {
              title: 'Ativo',
              description: 'Aqui, definimos a marca como ativa.',
              position: 'top'
          }
      },
      {
          element: '#txtCodigo',
          popover: {
              title: 'Código',
              description: 'O campo de código é preenchido automaticamente após gravar o registro.',
              position: 'top'
          }
      },
      {
          element: '#txtDescricao',
          popover: {
              title: 'Campos Obrigatórios',
              description: 'Neste campo adicionamos a descrição para a Marca.',
              position: 'top'
          }
      },
      {
          element: '#txtOrdem',
          popover: {
              title: 'Ordem',
              description: 'Este campo, podemos adicionar um número da ordem, ou seguir com o número, que é gerado sequencialmente.',
              position: 'top'
          }
      },
      {
          element: "#btnVoltar",
          popover: {
              title: "Botão Voltar",
              description:
                  "Ao clicar nesse botão você retorna para a tela de consulta.",
              position: "left",
          },
      },
      {
          element: '#gravar',
          popover: {
              title: 'Botão Gravar',
              description: 'Clique aqui para gravar a marca.',
              position: 'left'
          }
      }
      ]);
      driver.start();
  });
});

$(document).ready(async function () {

  $('#checkAtivo').attr('checked', true);

  $('#btnVoltar').on('click', async function () {
      await deletaRegistro('MARCA', getCookie('usuario'), marca);
      window.location.href = `${BASE_URI}/marca`;
  });

  $(document).ready(function () {

      $('#txtCodigo').prop('disabled', true);

      $('#msform').validate({
          debug: false,
          ignore: "",
          rules: {
              txtDescricao: {
                  required: true,
              },
          },
          messages: {
              txtDescricao: {
                  required: "Informe uma descrição válida."
              },
          },
          errorElement: 'span',
          errorPlacement(error, element) {
              error.addClass('invalid-feedback');
              element.closest('.form-group').append(error);
          },
          highlight(element) {
              $(element).addClass('is-invalid');
          },
          unhighlight(element) {
              $(element).removeClass('is-invalid');
          }
      });

      $('.radio-group .radio').click(function () {
          $(this).parent().find('.radio').removeClass('selected');
          $(this).addClass('selected');
      });

      $(".submit").click(function () {
          return false;
      });
  });

  let queryString = window.location.href;
  let parametros = queryString.split('/');
  let marca = parametros[parametros.length - 1];

  try {
      let response1 = await requisicao('GET', '/Sisplan/Funcoes/v1/pesquisa?',
          `JSON={ "tabela":"marca", 
              "camposSelect":["count(CODIGO) as CONTAGEM"], 
              "where": ["1 = 1"]}`, null);
      let jsonStr1 = await response1.json();
      $('#txtOrdem').val(jsonStr1.RESULT[0][0].CONTAGEM + 1);
  } catch (error) {
      console.error(error);
  }

  if (marca != '' && marca != 'create') {

      if (await liberarRegistro('MARCA', marca) == false) {
          window.location.href = '../marca';
      } else {

          try {
              $.LoadingOverlay("show");
              try {
                  let response = await requisicao('GET', '/Sisplan/Funcoes/v1/pesquisa?',
                      `JSON={ "tabela":"marca", 
                  "camposSelect":["codigo", "descricao", "ativo", "ordem"], 
                  "where": ["codigo = '${marca}'"]}`, null);

                  if (!response) {
                      return;
                  }
                  let jsonStr = await response.json();
                  if (response.status != 200) {
                      msgErro(jsonStr.RESULT[0].mensagem);
                      return;
                  }

                  $('#txtCodigo').val(jsonStr.RESULT[0][0].CODIGO);
                  $('#txtDescricao').val(jsonStr.RESULT[0][0].DESCRICAO);
                  $('#txtOrdem').val(jsonStr.RESULT[0][0].ORDEM);

                  if (jsonStr.RESULT[0][0].ATIVO == 'S') {
                      $('#checkAtivo').prop('checked', true);
                  } else {
                      $('#checkAtivo').prop('checked', false);
                  }

              } catch (error) {
                  console.error(error);
                  msgErro(`Não foi possível buscar os dados do tamanho: ${error}`);
              }
          } finally {
              $.LoadingOverlay('hide');
          }
      }
  };

  $("#gravar").click(

      async function () {

          let validator = $("#msform").validate();
          validator.form();
          let erros = 0;
          erros = validator.numberOfInvalids();

          if (erros == 0) {
              try {
                  $.LoadingOverlay("show");

                  let marcaClasse = {};

                  marcaClasse.CODIGO = $('#txtCodigo').val() == '' ? await RetornaProximo('marca', 'marca', 'CODIGO', 3) : $('#txtCodigo').val();
                  marcaClasse.DESCRICAO = $('#txtDescricao').val().toUpperCase();
                  marcaClasse.ORDEM = $('#txtOrdem').val();

                  if ($('#checkAtivo').prop('checked')) {
                      marcaClasse.ATIVO = 'S';
                  } else {
                      marcaClasse.ATIVO = 'N';
                  }

                  let response = await requisicao('POST', '/Sisplan/Cadastros/v1/marca?', `JSON=${encodeURIComponent(JSON.stringify(marcaClasse))}`, null);

                  if (!response) {
                      $.LoadingOverlay("hide");
                      return;
                  };

                  let jsonStr = await response.json();
                  if (response.status != 200) {
                      $.LoadingOverlay("hide");
                      msgErro(jsonStr.mensagem);
                      return;
                  }
                  $.LoadingOverlay("hide");
                  toastr.success(
                      `Cadastro efetuado com sucesso!
                      Marca: ${marcaClasse.CODIGO}`,
                      '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,
                      onHidden() {
                          window.location.href = `${BASE_URI}/marca`;
                      }
                  }
                  ).css({
                      "margin-top": "20%",
                      "width": "500px",
                      "max-width": "500px"
                  });

              } catch (error) {
                  console.error(error);
                  $.LoadingOverlay("hide");
                  msgErro(`Não foi possível gravar os dados do tamanho: ${error}`);
              }
          }
      });
});