<div id="modal-cliente" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 id="myModalLabel" class="modal-title">Cadastro de Cliente</h5>
        <input id="txtCodCli" class="d-none" />
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <fieldset>
          <div class="card-body">
            <form style="text-align:left!important;" id="form-cliente" name="form-cliente">
              <div class="card card-header" role="tab" id="geral">
                <a style="width:100%;" data-toggle="collapse" data-parent="#multiCollapseExample1"
                  href="#multiCollapseExample1" aria-expanded="true" aria-controls="collapseOne1">
                  <div class="row">
                    <div style="max-width:20px;margin-top:auto; margin-bottom: auto" class="col-1">
                      <i class="fas fa-angle-down"></i>
                    </div>
                    <div class="col-11">
                      <h4 class="title-page">
                        Geral
                      </h4>
                    </div>
                  </div>
                </a>
              </div>
              <div class="collapse  show" id="multiCollapseExample1">
                <div class="card card-body">
                  <div class=" tab-pane fade show active" role="tabpanel" aria-labelledby="geral-tab">
                    <div class="form-row pt-2 pl-1">
                      <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="cbConsumidorFinal" checked>
                        <label class="form-check-label pr-4" for="cbConsumidorFinal">Consumidor Final</label>
                      </div>
                      <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="cbAtivo" checked>
                        <label class="form-check-label pr-4" for="cbAtivo">Ativo</label>
                      </div>
                      <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="cbBloqueado">
                        <label class="form-check-label pr-4" for="cbBloqueado">Bloqueado</label>
                      </div>
                    </div>

                    <div class="form-row">
                      <div class="form-group group-default col-md-4 col-12">
                        <div class="relative" id="cnpjTour">
                          <label>CNPJ/CPF *</label>
                          <input type="text" class="input-default focus form-control validate" id="txtCNPJModalCli"
                            name="txtCNPJModalCli" required placeholder="CNPJ ou CPF">
                        </div>
                      </div>
                      <div class="form-group col-md-4 col-12">
                        <label>Data de cadastro</label>
                        <input type="date" class="input-default focus form-control" id="txtDataCadastro">
                      </div>
                      <div class="form-group col-md-3 col-12 d-none">
                        <label>Atual</label>
                        <input type="date" class="input-default focus form-control" id="txtDataAlteracao">
                      </div>
                      <div class="form-group col-md-4 col-12">
                        <label>Data de nascimento</label>
                        <input type="date" class="input-default focus form-control" id="txtDataNascimento"
                          name="txtDataNascimento">
                      </div>
                    </div>

                    <div class="form-row">
                      <div class="form-group col-md-4" id="nomeTour">
                        <label>Nome *</label>
                        <input type="text" class="input-default focus form-control validate" id="txtNome" name="txtNome"
                          required placeholder="Nome">
                      </div>
                      <div class="form-group col-md-4">
                        <label>Fantasia</label>
                        <input type="text" class="input-default focus form-control" name="txtFantasia" id="txtFantasia"
                          placeholder="Fantasia">
                      </div>
                      <div class="form-group col-md-4">
                        <label>Indicador da IE do destinatário</label>
                        <select id="rgIE" class="input-default custom-select">
                          <option value="" selected disabled>Selecione uma opção</option>
                          <option value="1">Contribuinte ICMS (informar a IE do destinatário)
                          </option>
                          <option value="2">Contribuinte isento de Inscrição no cadastro de
                            Contribuintes do ICMS</option>
                          <option value="9">Não Contribuinte, que pode ou não possuir
                            Inscrição Estadual no Cadastro de Contribuintes do ICMS</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-8 col-12">
                        <label>Email</label>
                        <input type="email" class="input-default focus form-control" name="txtEmail" id="txtEmail"
                          placeholder="exemplo@exemplo.com" maxlength="50">
                      </div>
                      <div class="form-group col-md-1 col-12" id="dddTelefoneTour">
                        <label>DDD *</label>
                        <input type="number" class="input-default focus form-control validate" id="txtDDD" name="txtDDD"
                          maxlength="3" required>
                      </div>
                      <div class="form-group col-md-3 col-12" id="telefoneTour">
                        <label>Telefone *</label>
                        <input type="text" class="input-default focus form-control validate" id="txtTelefone"
                          name="txtTelefone" maxlength="20" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label>Observação</label>
                      <textarea style="resize: none" id="txtObsCli" placeholder="Observação"
                        class="input-default focus form-control" rows="3"></textarea>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card card-header" role="tab">
                <a style="width:100%;" id="documentoaba" data-toggle="collapse" data-parent="#multiCollapseExample2"
                  href="#multiCollapseExample2" aria-expanded="true" aria-controls="collapseOne1">
                  <div class="row">
                    <div style="max-width:20px;margin-top:auto; margin-bottom: auto" class="col-1">
                      <i class="fas fa-angle-right"></i>
                    </div>
                    <div class="col-11">
                      <h4 class="title-page">
                        Documento
                      </h4>
                    </div>
                  </div>
                </a>
              </div>

              <div class="collapse" id="multiCollapseExample2">
                <div class="card card-body">
                  <div class="tab-pane fade show active" role="tabpanel" aria-labelledby="documento-tab">
                    <div class="form-row pt-2">
                      <div class="form-group col-md-4 col-12">
                        <label>IE</label>
                        <input type="text" class="input-default focus form-control" id="txtIE" name="txtIE"
                          placeholder="IE">
                      </div>
                      <div class="form-group col-md-4 col-12">
                        <label>RG</label>
                        <input type="text" class="input-default focus form-control" id="txtRG" name="txtRG"
                          placeholder="RG">
                      </div>

                      <div class="form-group col-md-4 col-12">
                        <label>Emissor</label>
                        <input type="text" class="input-default focus form-control" id="txtEmissor" name="txtEmissor"
                          placeholder="Emissor">
                      </div>
                    </div>


                    <div class="form-row">
                      <div class="form-group col-md-12 col-12">
                        <label>Sexo</label>
                        <select id="rgSexo" class="input-default custom-select ">
                          <option value="" selected disabled>Selecione uma opção</option>
                          <option value="M">Masculino</option>
                          <option value="F">Feminino</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card card-header" role="tab">
                <a style="width:100%;" id="endereco" data-toggle="collapse" data-parent="#multiCollapseExample3"
                  href="#multiCollapseExample3" aria-expanded="true" aria-controls="collapseOne1">
                  <div class="row">
                    <div style="max-width:20px;margin-top:auto; margin-bottom: auto" class="col-1">
                      <i class="fas fa-angle-right"></i>
                    </div>
                    <div class="col-11">
                      <h4 class="title-page">
                        Endereço
                      </h4>
                    </div>
                  </div>
                </a>
              </div>
              <div class="collapse" id="multiCollapseExample3">
                <div class="card card-body">
                  <div class="card card-header" role="tab">
                    <a style="width:100%;" id="EnderecoGeral" data-toggle="collapse" data-parent="#enderecoGeral"
                      href="#enderecoGeral" aria-expanded="true" aria-controls="collapseOne1">
                      <div class="row">
                        <div style="max-width:20px;margin-top:auto; margin-bottom: auto" class="col-1">
                          <i class="fas fa-angle-down"></i>
                        </div>
                        <div class="col-11">
                          <h4 class="title-page">
                            Geral
                          </h4>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="collapse" id="enderecoGeral">
                    <div class="card-body">
                      <div class="pt-2 form-row">
                        <div class="form-group col-md-4 col-12" id="cepTour">
                          <label>Cep *</label>
                          <input type="text" class="input-default focus form-control validate" id="txtCep" name="txtCep"
                            required>
                        </div>
                        <div class="form-group col-md-4 col-12">
                          <label>Cidade</label>
                          <input type="text" class="input-default focus form-control" name="txtCidade" id="txtCidade"
                            placeholder="Cidade" readonly>
                        </div>
                        <div class="form-group col-md-4 col-12">
                          <label>UF</label>
                          <input type="text" class="input-default focus form-control" name="txtUF" id="txtUF"
                            placeholder="UF" readonly>
                        </div>
                      </div>
                      <div class="form-group">
                        <label>Rua</label>
                        <input type="text" class="input-default focus form-control" name="txtRua" id="txtRua"
                          placeholder="Rua">
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6 col-12">
                          <label>Número</label>
                          <input type="text" class="input-default focus form-control" name="txtNumero" id="txtNumero"
                            placeholder="Número">
                        </div>
                        <div class="form-group col-md-6 col-12">
                          <label>Bairro</label>
                          <input type="text" class="input-default focus form-control" name="txtBairro" id="txtBairro"
                            placeholder="Bairro">
                        </div>
                        <div class="form-group col-md-12 col-12">
                          <label>Complemento</label>
                          <input type="text" class="input-default focus form-control" name="txtComplemento"
                            id="txtComplemento" placeholder="Complemento">
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card card-header" role="tab">
                    <a style="width:100%;" id="entrega" data-toggle="collapse" data-parent="#enderecoEntrega"
                      href="#enderecoEntrega" aria-expanded="true" aria-controls="collapseOne1">
                      <div class="row">
                        <div style="max-width:20px;margin-top:auto; margin-bottom: auto" class="col-1">
                          <i class="fas fa-angle-right"></i>
                        </div>
                        <div class="col-11">
                          <h4 class="title-page">
                            Entrega
                          </h4>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="collapse" id="enderecoEntrega">
                    <div class="card-body">
                      <div class="pt-2 form-row" id="endereco_entrega_geral">
                        <div class="form-group col-12" id="cepTour">
                          <div class="form-row pt-2">
                            <div class="form-group col-md-4 col-12">
                              <label>Cep</label>
                              <input type="text" class="input-default focus form-control" id="txtCepEntrega"
                                name="txtCepEntrega">
                            </div>
                            <div class="form-group col-md-4 col-12">
                              <label>Cidade</label>
                              <input type="text" class="input-default focus form-control" id="txtCidadeEntrega"
                                name="txtCidadeEntrega" placeholder="Cidade" readonly>
                            </div>
                            <div class="form-group col-md-4 col-12">
                              <label>UF</label>
                              <input type="text" class="input-default focus form-control" id="txtUFEntrega"
                                name="txtUFEntrega" placeholder="UF" readonly>
                            </div>
                          </div>
                          <div class="form-group">
                            <label>Rua</label>
                            <input type="text" class="input-default focus form-control" id="txtRuaEntrega"
                              name="txtRuaEntrega" placeholder="Rua">
                          </div>
                          <div class="form-row">
                            <div class="form-group col-md-6 col-12">
                              <label>Número</label>
                              <input type="text" class="input-default focus form-control" id="txtNumeroEntrega"
                                name="txtNumeroEntrega" placeholder="Número">
                            </div>
                            <div class="form-group col-md-6 col-12">
                              <label>Bairro</label>
                              <input type="text" class="input-default focus form-control" id="txtBairroEntrega"
                                name="txtBairroEntrega" placeholder="Bairro">
                            </div>
                            <div class="form-group col-md-12 col-12">
                              <label>Complemento</label>
                              <input type="text" class="input-default focus form-control" id="txtComplementoEntrega"
                                name="txtComplementoEntrega" placeholder="Complemento">
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card card-header" role="tab">
                    <a style="width:100%;" id="cobranca" data-toggle="collapse" data-parent="#enderecoCobranca"
                      href="#enderecoCobranca" aria-expanded="true" aria-controls="collapseOne1">
                      <div class="row">
                        <div style="max-width:20px;margin-top:auto; margin-bottom: auto" class="col-1">
                          <i class="fas fa-angle-right"></i>
                        </div>
                        <div class="col-11">
                          <h4 class="title-page">
                            Cobrança
                          </h4>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="collapse" id="enderecoCobranca">
                    <div class="card-body">
                      <div class="pt-2 form-row" id="endereco_cobranca_geral">
                        <div class="form-group col-12" id="cepTour">
                          <div class="pt-2 form-row">
                            <div class="form-group col-md-4 col-12">
                              <label>Cep</label>
                              <input type="text" class="input-default focus form-control" id="txtCepCobranca"
                                name="txtCepCobranca">
                            </div>
                            <div class="form-group col-md-4 col-12">
                              <label>Cidade</label>
                              <input type="text" class="input-default focus form-control" id="txtCidadeCobranca"
                                name="txtCidadeCobranca" placeholder="Cidade" readonly>
                            </div>
                            <div class="form-group col-md-4 col-12">
                              <label>UF</label>
                              <input type="text" class="input-default focus form-control" id="txtUFCobranca"
                                name="txtUFCobranca" placeholder="UF" readonly>
                            </div>
                          </div>
                          <div class="form-group">
                            <label>Rua</label>
                            <input type="text" class="input-default focus form-control" id="txtRuaCobranca"
                              name="txtRuaCobranca" placeholder="Rua">
                          </div>
                          <div class="form-row">
                            <div class="form-group col-md-6 col-12">
                              <label>Número</label>
                              <input type="text" class="input-default focus form-control" id="txtNumeroCobranca"
                                name="txtNumeroCobranca" placeholder="Número">
                            </div>
                            <div class="form-group col-md-6 col-12">
                              <label>Bairro</label>
                              <input type="text" class="input-default focus form-control" id="txtBairroCobranca"
                                name="txtBairroCobranca" placeholder="Bairro">
                            </div>
                            <div class="form-group col-md-12 col-12">
                              <label>Complemento</label>
                              <input type="text" class="input-default focus form-control" id="txtComplementoCobranca"
                                name="txtComplementoCobranca" placeholder="Complemento">
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card card-header" role="tab">
                <a style="width:100%;" id="venda" data-toggle="collapse" data-parent="#multiCollapseExample4"
                  href="#multiCollapseExample4" aria-expanded="true" aria-controls="collapseOne1">
                  <div class="row">
                    <div style="max-width:20px;margin-top:auto; margin-bottom: auto" class="col-1">
                      <i class="fas fa-angle-right"></i>
                    </div>
                    <div class="col-11">
                      <h4 class="title-page">
                        Venda
                      </h4>
                    </div>
                  </div>
                </a>
              </div>
              <div class="collapse" id="multiCollapseExample4">
                <div class="card card-body">
                  <div class="tab-pane fade show active" role="tabpanel" aria-labelledby="venda-tab">
                    <div class="pt-2 form-row">
                      <div class="col-md-6 col-12">
                        <div class="group-default form-group">
                          <label data-error="wrong" data-success="right" for="txtRepresentante">Representante</label>
                          <div class="relative">
                            <button type="button" class="btn-icon btn-icon-normal bg-danger" id="btn-representante"
                              name="btn-representante" data-button="absolute" readonly>
                              <i style="color: white;font-size:20px;margin-left:-10px;padding:0px"
                                class="fas fa-search"></i>
                            </button>
                            <input type="text" placeholder="Representante" class="input-default focus form-control"
                              id="txtRepresentante" name="txtRepresentante" readonly>
                          </div>
                        </div>
                      </div>

                      <div class="col-md-6 col-12">
                        <div class="group-default form-group">
                          <label data-error="wrong" data-success="right" for="txtTabelaModalCli">Tabela</label>
                          <div class="relative">
                            <button type="button" class="btn-icon btn-icon-normal bg-danger" id="btn-tabela-ModalCli"
                              name="btn-tabela-ModalCli" data-button="absolute" readonly>
                              <i style="color: white;font-size:20px;margin-left:-10px;padding:0px"
                                class="fas fa-search"></i>
                            </button>
                            <input type="text" placeholder="Tabela" class="input-default focus form-control"
                              id="txtTabelaModalCli" name="txtTabelaModalCli" readonly>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-4 col-12">
                        <label>Limite Crédito</label>
                        <input type="number" class="input-default focus form-control" id="txtLimiteCredito" min="0">
                      </div>
                      <div class="form-group col-md-4 col-12">
                        <label>Limite Usado</label>
                        <input type="number" class="input-default focus form-control" id="txtLimiteUsado" min="0"
                          readonly>
                      </div>
                      <div class="form-group col-md-4 col-12">
                        <label>Limite Disponível</label>
                        <input type="number" class="input-default focus form-control" id="txtLimiteDisponivel" min="0"
                          readonly>
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-4 col-12">
                        <label>Limite Fidelidade</label>
                        <input type="number" class="input-default focus form-control" id="txtLimiteFidelidade" min="0">
                      </div>
                      <div class="form-group col-md-4 col-12">
                        <label>Limite Usado</label>
                        <input type="number" class="input-default focus form-control" id="txtLimiteFidelidadeUsado"
                          min="0" readonly>
                      </div>
                      <div class="form-group col-md-4 col-12">
                        <label>Limite Disponível</label>
                        <input type="number" class="input-default focus form-control" id="txtLimiteFidelidadeDisponivel"
                          min="0" readonly>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- </div> -->
              <!-- cabo os panel -->
              <button type="button" id="btnVoltar" style="font-size:15px;"
                class="btn btn-success btn-sisp btn-lg action-button-previous" data-dismiss="modal">Voltar</button>
              <input id="btnGravar" type="submit" style="font-size:15px;"
                class="btn btn-danger btn-sisp btn-lg action-button float-right" value="Gravar">
            </form>
          </div>
        </fieldset>
      </div>
      <!-- <div class="modal-footer">
                        <button id="btnYes" type="button" class="btn btn-primary btn-sisp">Sim</button>
                        <button id="btnNo" type="button" class="btn btn-secondary btn-sisp" data-dismiss="modal">Não</button>
                    </div> -->
    </div>
  </div>
</div>
<script src="<?php echo BASE_URI; ?>/plugins/jquery/jquery.min.js"></script>
<script>
$(document).ready(async function() {
  $('#txtCNPJModalCli').focus();

  //masks
  var options = {
    onKeyPress: function(cpf, ev, el, op) {
      var masks = ['000.000.000-000', '00.000.000/0000-00'];
      $('#txtCNPJModalCli').mask((cpf.length > 14) ? masks[1] : masks[0], op);
    }
  }

  $('#txtCNPJModalCli').length > 11 ? $('#txtCNPJModalCli').mask('00.000.000/0000-00', options) : $(
    '#txtCNPJModalCli').mask('000.000.000-00#', options);

  var SPMaskBehavior = function(val) {
      return val.replace(/\D/g, '').length === 9 ? '00000-0000' : '0000-00009';
    },
    spOptions = {
      onKeyPress: function(val, e, field, options) {
        field.mask(SPMaskBehavior.apply({}, arguments), options);
      }
    };

  $('#txtTelefone').mask(SPMaskBehavior, spOptions);

  $('#txtCNPJModalCli').change(async function() {
    try {
      if ($(this).val() == '') {
        return;
      }
      $.LoadingOverlay("show");

      let validaCNPJ = formata_cpf_cnpj($('#txtCNPJModalCli').val());
      if (validaCNPJ != false) {
        $("#txtCNPJModalCli").val(validaCNPJ);
      }

      let response = await requisicao('GET', '/Sisplan/Cliente/V1/Entidade?',
        `CNPJ=${$('#txtCNPJModalCli').val()}`);

      let jsonStr = await response.json();
      if (response.status != 200) {
        $.LoadingOverlay("hide");
        msgErro(jsonStr.mensagem);
        return;
      }

      if (jsonStr.length > 0) {
        $.LoadingOverlay("hide");
        toastr.warning(
          'CNPJ/CPF informado já existe!',
          'Atençã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: async function() {
              const clienteJson = jsonStr[0];
              $('#txtCodCli').val(clienteJson.CODCLI);
              await carregaDadosCliente(clienteJson);
            }
          }
        ).css({
          "margin-top": "20%",
          "width": "500px",
          "max-width": "500px",
          "color": "black"
        });
        return;
      }
      $.LoadingOverlay("hide");

      if (!valida_cpf_cnpj($('#txtCNPJModalCli').val())) {
        $("#txtCNPJModalCli").rules('add', 'valida_cpf_cnpj');
        $('#txtCNPJModalCli').focus();
      }
      var cliente = $('#txtCodCli').val();
      if ((verifica_cpf_cnpj($('#txtCNPJModalCli').val()) == 'CNPJ') && ((cliente == 'create') && ($(
          '#txtNome').val() == ''))) {
        await buscaDadosCliente(cliente, $('#txtCNPJModalCli').val().replace(/[^0-9]/g, ''));
      }
    } catch (error) {
      console.log(error);
      $.LoadingOverlay("hide");
    }
  })

  jQuery.validator.addMethod('valida_cpf_cnpj', function(value, element) {
    return valida_cpf_cnpj(value);
  });

  // ao clicar em cliente

  //funcoes
  async function carregaDadosCliente(clienteJson) {
    const cliente = $('#txtCodCli').val();
    try {
      var response = await requisicao('GET', '/Sisplan/Funcoes/v1/pesquisa?',
        `JSON={ "tabela":"ENTIDADE", "camposSelect":["OBS"], "where": ["CODCLI = '${cliente}'"]}`, null)
      if (!response) {
        var obs = ''
        return;
      } else {
        var jsonStr = await response.json()
        if (response.status != 200) {
          $.LoadingOverlay("hide");
          msgErro(jsonStr['RESULT'][0].mensagem);
          return;
        }

        var obs = jsonStr['RESULT'][0][0].OBS;
      }
    } catch (error) {
      console.error(error);
      var obs = ''
    }

    try {
      var response = await requisicao('GET', '/sisplan/funcoes/v1/pesquisa?',
        `JSON={ "tabela":"ENTIDADE", "camposSelect":["ENTIDADE.CODREP", "REPRESEN.NOME"], "leftJoin": [{"tabela": "represen", "condicao": "entidade.codrep = represen.codrep"}], "where": ["ENTIDADE.CODCLI = '${cliente}'"]}`,
        null)
      if (!response) {
        var represen = ''
        return;
      } else {
        var jsonStr = await response.json();
        if (response.status != 200) {
          $.LoadingOverlay("hide");
          msgErro(jsonStr['RESULT'][0].mensagem);
          return;
        }

        var represen = `[${jsonStr['RESULT'][0][0].CODREP}] - ${jsonStr['RESULT'][0][0].NOME}`;
      }
    } catch (error) {
      console.error(error);
      var represen = ''
    }

    try {
      var response = await requisicao('GET', '/sisplan/funcoes/v1/pesquisa?',
        `JSON={ "tabela":"ENTIDADE", "camposSelect":["ENTIDADE.TABELA", "REGIAO.DESCRICAO"], "leftJoin": [{"tabela": "REGIAO", "condicao": "entidade.tabela = regiao.regiao"}], "where": ["ENTIDADE.CODCLI = '${cliente}'"]}`,
        null)
      if (!response) {
        var tabPreco = ''
        return;
      } else {
        var jsonStr = await response.json()
        if (response.status != 200) {
          $.LoadingOverlay("hide");
          msgErro(jsonStr['RESULT'][0].mensagem)
          return
        }

        var tabPreco = `[${jsonStr['RESULT'][0][0].TABELA}] - ${jsonStr['RESULT'][0][0].DESCRICAO}`
      }
    } catch (error) {
      console.error(error);
      var tabPreco = ''
    }

    $('#txtCNPJModalCli').val(clienteJson.CNPJ);
    $('#txtCNPJModalCli').attr('disabled', true);
    $('#txtDataCadastro').val(clienteJson.DATA_CAD);
    $('#txtDataAlteracao').val(clienteJson.DATA_BUSCA);
    $('#txtNome').val(clienteJson.NOME);
    $('#txtFantasia').val(clienteJson.FANTASIA);
    $('#txtObsCli').val(obs);
    $('#cbAtivo').prop('checked', clienteJson.ATIVO == 'S');
    $('#cbBloqueado').prop('checked', clienteJson.BLOQUEIO == 'S');
    $('#cbConsumidorFinal').prop('checked', clienteJson.CONS_FINAL == 'Sim');
    $('#txtRG').val(clienteJson.NUM_RG);
    $('#txtEmissor').val(clienteJson.EMI_RG);
    $('#txtIE').val(clienteJson.INSCRICAO);
    $('#rgSexo').val(clienteJson.SEXO == "M" ? "M" : "F").change();
    $('#txtDataNascimento').val(clienteJson.DT_NASC);
    $('#txtCep').val(clienteJson.CEP);
    $('#txtRua').val(clienteJson.ENDERECO);
    $('#txtNumero').val(clienteJson.NUMERO);
    $('#txtComplemento').val(clienteJson.COMPLEMENTO);
    $('#txtBairro').val(clienteJson.BAIRRO);
    $('#rgIE').val(clienteJson.IE_DESTINATARIO).change();

    var retorno = await BuscaCep($('#txtCep'));
    $('#txtCidade').val(retorno[0]);
    $('#txtUF').val(retorno[1]);

    $('#txtDDD').val(clienteJson.DDD_FONE);
    $('#txtTelefone').val(clienteJson.TELEFONE);
    $('#txtEmail').val(clienteJson.EMAIL);

    $('#txtCepEntrega').val(clienteJson.CEP_ENT);
    $('#txtRuaEntrega').val(clienteJson.END_ENT);
    $('#txtNumeroEntrega').val(clienteJson.NUM_ENT);
    $('#txtComplementoEntrega').val(clienteJson.COMP_ENT);
    $('#txtBairroEntrega').val(clienteJson.BAIRRO_ENT);

    var retorno = await BuscaCep($('#txtCepEntrega'));
    $('#txtCidadeEntrega').val(retorno[0]);
    $('#txtUFEntrega').val(retorno[1]);

    $('#txtCepCobranca').val(clienteJson.CEP_COB);
    $('#txtRuaCobranca').val(clienteJson.END_COB);
    $('#txtNumeroCobranca').val(clienteJson.NUM_COB);
    $('#txtComplementoCobranca').val(clienteJson.COMP_COB);
    $('#txtBairroCobranca').val(clienteJson.BAIRRO_COB);

    var retorno = await BuscaCep($('#txtCepCobranca'));
    $('#txtCidadeCobranca').val(retorno[0]);
    $('#txtUFCobranca').val(retorno[1]);
    $('#txtRepresentante').val(represen);

    $('#txtLimiteCredito').val(clienteJson.CREDITO);
    $('#txtLimiteUsado').val(clienteJson.CREDITO_UTILIZADO ?? 0);
    $('#txtLimiteDisponivel').val($('#txtLimiteCredito').val() - $('#txtLimiteUsado').val());

    $('#txtLimiteFidelidade').val(clienteJson.LIMITE_FID);
    $('#txtLimiteFidelidadeUsado').val(clienteJson.LIMITE_UTIL_FID ?? 0);
    $('#txtLimiteFidelidadeDisponivel').val($('#txtLimiteFidelidade').val() - $('#txtLimiteFidelidadeUsado')
      .val());

    $('#txtTabelaModalCli').val(tabPreco);
  }

  $('#form-cliente').validate({
    debug: false,
    ignore: "",
    rules: {
      txtCNPJModalCli: {
        required: true,
        valida_cpf_cnpj: true
      },
      txtNome: {
        required: true,
      },
      txtCep: {
        required: true,
      },
      txtDDD: {
        required: true,
      },
      txtTelefone: {
        required: true,
      }
    },
    messages: {
      txtCNPJModalCli: {
        required: "Informe um CNPJ/CPF válido.",
        valida_cpf_cnpj: "Informe um CNPJ/CPF válido."
      },
      txtNome: {
        required: "Informe um nome válido."
      },
      txtCep: {
        required: "Informe um CEP válido."
      },
      txtDDD: {
        required: "Informe um DDD válido"
      },
      txtTelefone: {
        required: "Informe um Telefone válido"
      }
    },
    errorElement: 'span',
    errorPlacement: function(error, element) {
      error.addClass('invalid-feedback');
      element.closest('.form-group').append(error);
    },
    highlight: function(element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    },
    invalidHandler: function(e, validator) {
      if (validator.errorList.length) {
        // console.log('erro no: '+$('#'+$(validator.errorList[0].element).prop('id')));
        if (validator.errorList[0].element.id == 'txtCep') {
          if (!$('#enderecoGeral').hasClass('show')) {
            // $('a[href="#' + 'endereco' + '"]').trigger('click');
            // $('#multiCollapseExample3').collapse('show');
            $('#enderecoGeral').collapse('show');
            $('#endereco').trigger('click');
          }
        }
        // $('#'+$(validator.errorList[0].element).prop('id')).closest('a').trigger('click');
        let id = $($('#' + $(validator.errorList[0].element).prop('id')).closest('.card-body').closest(
          '.collapse')).prop('id');
        if (id != 'multiCollapseExample1') {
          $("a[href='#" + id + "']").trigger('click');
        }
        // $('a[href="#' + jQuery(validator.errorList[0].element).closest(".tab-pane").attr('id') + '"]').tab('show');
      }
    },
    submitHandler: async function(form, event) {
      event.preventDefault();
      const cliente = $('#txtCodCli').val();
      if (cliente == 'create') {
        try {
          $.LoadingOverlay("show");

          let validaCNPJ = formata_cpf_cnpj($('#txtCNPJModalCli').val());
          if (validaCNPJ != false) {
            $("#txtCNPJModalCli").val(validaCNPJ)
          }

          let response = await requisicao('GET', '/Sisplan/Cliente/V1/Entidade?',
            `CNPJ=${$('#txtCNPJModalCli').val()}`);

          let jsonStr = await response.json();
          if (response.status != 200) {
            $.LoadingOverlay("hide");
            msgErro(jsonStr.mensagem);
            return;
          }

          if (jsonStr.length > 0) {
            $.LoadingOverlay("hide");
            msgAlerta('CNPJ/CPF informado já existe');
            window.location.href = '<?php echo BASE_URI; ?>/cliente/' + jsonStr[0].CODCLI;
            return;
          }

          $.LoadingOverlay("hide");
        } catch (error) {
          console.log(error);
          $.LoadingOverlay("hide");
        }
      }

      try {
        $.LoadingOverlay("show");

        //replace nos cep
        var cep = $('#txtCep').val().replace(/\D/g, '');
        var cepCobranca = $('#txtCepCobranca').val().replace(/\D/g, '');
        var cepEntrega = $('#txtCepEntrega').val().replace(/\D/g, '');

        let response = await requisicao('GET', '/sisplan/funcoes/v1/pesquisa?',
          `JSON={"tabela":"CADCEP", "camposSelect":["CEP"], "where": ["CEP = '${cep}'"]}`, null);

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

        if (jsonStr['RESULT'][0].length <= 0) {
          $.LoadingOverlay("hide");
          msgAlerta('Cep não informado ou inválido.');
          $('#txtCep').focus();
          return;
        }

        $.LoadingOverlay("hide");
      } catch (error) {
        console.log(error);
        $.LoadingOverlay("hide");
      }

      try {
        $.LoadingOverlay("show");

        var codrep = $('#txtRepresentante').val().substring(1, $('#txtRepresentante').val().indexOf(
          '] - '));
        var tabela = $('#txtTabelaModalCli').val().substring(1, $('#txtTabelaModalCli').val().indexOf(
          '] - '));

        var entidade = new Object();

        let validaCNPJ = formata_cpf_cnpj($('#txtCNPJModalCli').val());
        if (validaCNPJ != false) {
          $("#txtCNPJModalCli").val(validaCNPJ)
        }

        entidade.CNPJ = $('#txtCNPJModalCli').val();
        entidade.DATA_CAD = $('#txtDataCadastro').val() + 'T00:00:00Z';
        entidade.DATA_BUSCA = $('#txtDataAlteracao').val() + 'T00:00:00Z';
        entidade.NOME = $('#txtNome').val();
        entidade.FANTASIA = $('#txtFantasia').val();
        entidade.OBS = $('#txtObsCli').val();
        entidade.ATIVO = $('#cbAtivo').is(":checked") ? 'S' : 'N';
        entidade.BLOQUEIO = $('#cbBloqueado').is(":checked") ? 'S' : 'N';
        entidade.CONS_FINAL = $('#cbConsumidorFinal').is(":checked") ? 'S' : 'N';
        entidade.NUM_RG = $('#txtRG').val();
        entidade.EMI_RG = $('#txtEmissor').val();
        entidade.INSCRICAO = $('#txtIE').val();
        entidade.SEXO = $('#rgSexo').val();
        entidade.DT_NASC = $('#txtDataNascimento').val();
        entidade.CEP = cep;
        entidade.ENDERECO = $('#txtRua').val();
        entidade.NUMERO = $('#txtNumero').val();
        entidade.COMPLEMENTO = $('#txtComplemento').val();
        entidade.BAIRRO = $('#txtBairro').val();
        entidade.TIPO = verifica_cpf_cnpj($('#txtCNPJModalCli').val()) == 'CNPJ' ? '2' : '1';
        entidade.IE_DESTINATARIO = $('#rgIE').val();
        entidade.DDD_FONE = $('#txtDDD').val();
        entidade.TELEFONE = $('#txtTelefone').val();
        entidade.EMAIL = $('#txtEmail').val();
        validaCNPJ = verifica_cpf_cnpj(entidade.CNPJ);
        entidade.SIMPLES = validaCNPJ == 'CNPJ' ? 'N' : 'S';
        entidade.INSC_COB = $('#txtIE').val();
        entidade.CEP_COB = cepCobranca;
        entidade.END_COB = $('#txtRuaCobranca').val();
        entidade.NUM_COB = $('#txtNumeroCobranca').val();
        entidade.COMP_COB = $('#txtComplementoCobranca').val();
        entidade.BAIRRO_COB = $('#txtBairroCobranca').val();
        entidade.CEP_ENT = cepEntrega;
        entidade.END_ENT = $('#txtRuaEntrega').val();
        entidade.NUM_ENT = $('#txtNumeroEntrega').val();
        entidade.COMP_ENT = $('#txtComplementoEntrega').val();
        entidade.BAIRRO_ENT = $('#txtBairroEntrega').val();

        entidade.CREDITO = $('#txtLimiteCredito').val();
        entidade.CREDITO_UTILIZADO = $('#txtLimiteUsado').val();

        entidade.LIMITE_FID = $('#txtLimiteFidelidade').val();
        entidade.LIMITE_UTIL_FID = $('#txtLimiteFidelidadeUsado').val();

        entidade.CODREP = codrep
        entidade.TABELA = tabela


        if (cliente != 'create') {
          entidade.CODCLI = cliente
        }

        var response = await requisicao(cliente != 'create' ? 'PUT' : 'POST',
          '/Sisplan/Cliente/V1/Entidade?', '', `JSON=${encodeURIComponent(JSON.stringify(entidade))}`)

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

        var jsonStr = await response.json()
        if (response.status != 200) {
          $.LoadingOverlay("hide");
          msgErro(jsonStr.mensagem)
          return
        }
        $.LoadingOverlay("hide");
        toastr.success(
          'Cadastro efetuado 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,
            onHidden: function() {
              try {
                $('#modal-cliente').modal('hide');
                $('#txt-cliente').val();
                insereValor('#txtCliente', jsonStr[0].CODCLI, jsonStr[0].NOME);
                insereValor('#txt-cliente', jsonStr[0].CODCLI, jsonStr[0].NOME);
                $('#btn_confirmar_cliente').trigger('click');
              } catch {
                console.log('erro ao fechar o modal cliente');
              }
            }
          }
        ).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 cliente: ' + error)
      }
    }
  });

  async function BuscaCep(cepInput) {
    try {
      var cep = cepInput.val().replace('-', '').trim()
      var response = await requisicao('GET', '/sisplan/funcoes/v1/pesquisa?',
        `JSON={ "tabela":"CADCEP", "camposSelect":["CIDADE.NOME CIDADE", "CIDADE.COD_UF UF"], "leftJoin": [{"tabela": "CIDADE", "condicao": "CADCEP.CODMUN = CIDADE.CODIGO"}], "where": ["CADCEP.cep = '${cep}'"]}`,
        null)
      if (!response) {
        var cidade = ''
        var uf = ''
      } else {

        var jsonStr = await response.json()
        if (response.status != 200) {
          $.LoadingOverlay("hide");
          msgErro(jsonStr['RESULT'][0].mensagem)
          return
        }

        var cidade = jsonStr['RESULT'][0][0].CIDADE
        var uf = jsonStr['RESULT'][0][0].UF
      }
    } catch (error) {
      console.error(error);
      var cidade = ''
      var uf = ''
    }
    return [cidade, uf]
  };

  async function BuscaECadastraCep(cepInput) {
    try {
      $.LoadingOverlay("show");
      try {
        var cep = cepInput.val().replace('-', '').trim()
        var response = await requisicao('GET', '/sisplan/cep/v1/CEP?', `CEP=${cep}`, null)
        if (!response) {
          var cidade = '';
          var uf = '';
          var endereco = '';
          var bairro = '';
        } else {
          var jsonStr = await response.json();
          if (response.status != 200) {
            msgErro(jsonStr['RESULT'][0].mensagem);
            return;
          }
          var cidade = jsonStr.nOMCIDADE;
          var uf = jsonStr.eSTCEP;
          var endereco = jsonStr.nOMCEP;
          var bairro = jsonStr.bAIRRO;
        }
      } catch (error) {
        console.error(error);
        var cidade = '';
        var uf = '';
      }
      return [cidade, uf, endereco, bairro]
    } finally {
      $.LoadingOverlay("hide");
    }
  };

  $('#txtCep').blur(async function() {
    try {
      if ($(this).val() == '') {
        return;
      }
      var retorno = await BuscaECadastraCep($('#txtCep'));
      $('#txtCidade').val(retorno[0]);
      $('#txtUF').val(retorno[1]);
      $('#txtRua').val(retorno[2]);
      $('#txtBairro').val(retorno[3]);
    } catch (error) {
      msgErro('CEP Inválido, verifique.');
    }
  });


  $('#txtCepEntrega').blur(async function() {
    var retorno = await BuscaCep($('#txtCepEntrega'))
    $('#txtCidadeEntrega').val(retorno[0])
    $('#txtUFEntrega').val(retorno[1])
  });

  $('#txtCepCobranca').blur(async function() {
    var retorno = await BuscaCep($('#txtCepCobranca'))
    $('#txtCidadeCobranca').val(retorno[0])
    $('#txtUFCobranca').val(retorno[1])
  });

  async function limpaCampos() {
    $('#txtCNPJModalCli').val('');
    $('#txtCNPJModalCli').attr('disabled', false);
    //valores padrões
    $('#rgIE').val('9').change();
    $('#txtDataCadastro').val(new Date().toISOString().slice(0, 10));
    $('#txtDataAlteracao').val(new Date().toISOString().slice(0, 10));
    $('#txtDataNascimento').val('1980-01-01');
    $('#rgSexo').val("M").change();
    $('#txtCodCli').val('create');
    $('#txtNome').val('');
    $('#txtFantasia').val('');
    $('#txtObsCli').val('');
    $('#cbAtivo').prop('checked', true);
    $('#cbBloqueado').prop('checked', false);
    $('#cbConsumidorFinal').prop('checked', true);
    $('#txtRG').val('');
    $('#txtEmissor').val('');
    $('#txtIE').val('');
    $('#txtCep').val('');
    $('#txtRua').val('');
    $('#txtNumero').val('');
    $('#txtComplemento').val('');
    $('#txtBairro').val('');
    $('#txtCidade').val('');
    $('#txtUF').val('');
    $('#txtDDD').val('');
    $('#txtTelefone').val(''.TELEFONE);
    $('#txtEmail').val('');
    $('#txtCepEntrega').val('');
    $('#txtRuaEntrega').val('');
    $('#txtNumeroEntrega').val('');
    $('#txtComplementoEntrega').val('');
    $('#txtBairroEntrega').val('');
    $('#txtCidadeEntrega').val('');
    $('#txtUFEntrega').val('');
    $('#txtCepCobranca').val('');
    $('#txtRuaCobranca').val('');
    $('#txtNumeroCobranca').val('');
    $('#txtComplementoCobranca').val('');
    $('#txtBairroCobranca').val('');
    $('#txtCidadeCobranca').val('');
    $('#txtUFCobranca').val('');
    $('#txtRepresentante').val('');
    $('#txtLimiteCredito').val('');
    $('#txtLimiteUsado').val(0);
    $('#txtLimiteDisponivel').val(0);
    $('#txtLimiteFidelidade').val(0);
    $('#txtLimiteFidelidadeUsado').val(0);
    $('#txtLimiteFidelidadeDisponivel').val(0);
    $('#txtTabelaModalCli').val('');
  }

  $('#modal-cliente').on('shown.bs.modal', function() {
    limpaCampos();
  });

  $('.collapse').on('shown.bs.collapse', function(e) {
      let clicked = $(document).find("[href='#" + $(e.target).attr('id') + "']")

      clicked
        .parent()
        .find(".fa-angle-right")
        .removeClass("fa-angle-right")
        .addClass("fa-angle-down");
    })
    .on('hidden.bs.collapse', function(e) {
      let clicked = $(document).find("[href='#" + $(e.target).attr('id') + "']")

      clicked
        .parent()
        .find(".fa-angle-down")
        .removeClass("fa-angle-down")
        .addClass("fa-angle-right");
    });
});
</script>