<?php include('./header.php'); ?>
<style type="text/css">
  .logo img {
    width: 150px;
  }

  .container .form-outer {
    width: 100%;
    overflow: hidden;
  }

  .borderRed {
    border-color: red !important;
  }

  .form-outer .formulario {
    display: flex;
    width: 400%;
  }

  .form-outer .formulario .page {
    width: 25%;
    transition: margin-left 0.3s ease-in-out;
  }

  .form-outer .formulario .page .field {
    display: flex;
  }

  .form-outer .formulario .page .field button:hover {
    background-color: #66009f;
    border-color: #66009f;
  }

  .form-outer .formulario .page .field button {
    background-color: #560085;
    border-color: #560085;
  }

  .formulario .page .btns button.prev {
    margin-right: 3px !important;
    font-size: 17px;
  }

  .formulario .page .btns button.next {
    margin-left: 3px !important;
  }

  .container .progress-barra {
    display: flex;
    justify-content: space-between;
  }

  .container .progress-barra .step {
    position: relative;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .progress-barra .step p {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
    transition: 0.2s;
  }

  .progress-barra .step p.active {
    color: #560085;
  }

  .progress-barra .step .bullet {
    position: relative;
    height: 35px;
    width: 35px;
    border: 2px solid #666;
    display: inline-block;
    border-radius: 50%;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .progress-barra .step .bullet.active {
    border-color: #560085;
    background: #560085;
  }

  .progress-barra .step .bullet span {
    font-weight: 500;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .progress-barra .step .bullet.active span {
    display: none;
  }

  .progress-barra .step:last-child .bullet:before,
  .progress-barra .step:last-child .bullet:after {
    display: none;
  }

  .progress-barra .step .bullet:before,
  .progress-barra .step .bullet:after {
    position: absolute;
    content: '';
    right: -20.7rem;
    height: 3px;
    width: 20.7rem;
    background: #666;
  }

  .progress-barra .step .bullet.active:after {
    background: #560085;
    transform: scaleX(0);
    transform-origin: left;
    animation: animate 0.3s linear forwards;
  }

  @keyframes animate {
    100% {
      transform: scaleX(1);
    }
  }

  .progress-barra .step .check {
    position: absolute;
    font-size: 15px;
    color: #666;
    display: none;
  }

  .progress-barra .step .check.active {
    display: block;
    color: #fff;
  }
</style>

<body class="hold-transition layout-top-nav">
  <div class="wrapper">
    <div class="preloader flex-column justify-content-center align-items-center">
    </div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <div class="content-header">
        <div class="container-fluid">
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

      <section class="content">
        <div class="container-fluid">
          <div class="row">
            <!-- SELECT2 EXAMPLE -->
            <div class="col-md-12">
              <div class="card card-default">
                <div class="card-body button-nav">
                  <div class="row float-right">
                    <div class="col-md-12">
                      <button class="btn btn-primary">Pré-visualizar</button>
                      <button class="btn btn-primary">Importar</button>
                      <button class="btn btn-primary">Exportar</button>
                      <button class="btn btn-primary" id="btn">Novo Documento</button>
                    </div>
                  </div>
                  <!-- /.row -->
                </div>
                <!-- /.card-body -->
              </div>
            </div>
            <div class="col-md-12">
              <div class="card card-default">
                <div class="card-header">
                  <h3 class="card-title">Listagem de Documentos</h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                      <i class="fas fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                      <i class="fas fa-times"></i>
                    </button>
                  </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                  <table id="tabelaDocumento" class="table table-bordered table-striped" style="line-height: 0.8;">
                    <thead>
                      <tr style="text-align: center;">
                        <th title="Identificador Documento">Id. Documento</th>
                        <th title="Código do Documento">Código do Documento</th>
                        <th title="Descrição do Documento">Descrição</th>
                        <th title="Estado do Documento">Estado</th>
                        <th title="Opções"><i class="fa-solid fa-screwdriver-wrench"></i></th>
                      </tr>
                    </thead>
                    <tbody id="corpoTabela" style="text-align: center;">

                    </tbody>
                  </table>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                  Listagem dos Documentos.
                </div>
              </div>
            </div>
          </div>
          <!-- /.card -->
        </div>
        <!-- /.container-fluid -->
      </section>
      <div class="modal fade" id="modal-documento">
        <div class="modal-dialog modal-xl">
          <div class="modal-content">
            <div class="modal-header">
              <div class="container">
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                  <small aria-hidden="true">
                    <small class="fas fa-close"></small>
                  </small>
                </button>
                <div class="progress-barra">
                  <div class="step">
                    <p style="margin: 0;">Tipo Documento</p>
                    <div class="bullet">
                      <span style="color: #666;">1</span>
                      <div class="check fas fa-check"></div>
                    </div>
                  </div>
                  <div class="step">
                    <p style="margin: 0;">Operações Documento</p>
                    <div class="bullet">
                      <span style="color: #666;">2</span>
                      <div class="check fas fa-check"></div>
                    </div>
                  </div>
                  <div class="step">
                    <p style="margin: 0;">Finalizar</p>
                    <div class="bullet">
                      <span style="color: #666;">3</span>
                      <div class="check fas fa-check"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-body">
              <div class="container">
                <div class="card-body form-outer" style="padding: 0;">
                  <div class="formulario">
                    <div class="page slidePage">
                      <div class="row">
                        <div class="col-md-12">
                          <h5 style="margin-bottom: 1rem; justify-content: center;"><span id="doOpcao"></span> - <span id="codigo"></span></h5>
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group" style="margin-bottom: 0;">
                                <small class="required">Código do Documento</small>
                                <input type="text" class="form-control" id="codigoDocumento" name="codigoDocumento" placeholder="Código do Documento" title="Código do Documento" required>
                                <small>Mensagem de erro</small>
                              </div>
                              <div class="form-group" style="margin-bottom: 0;">
                                <small class="required">Descrição do Documento</small>
                                <input type="text" class="form-control" id="descricao" name="descricao" placeholder="Descrição do Documento" title="Descrição do Documento" required>
                                <small>Mensagem de erro</small>
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group" style="margin-bottom: 0;">
                                <small class="required">Tipo de Documento</small>
                                <select class="form-control select2" style="width: 100%;" id="tipoDocumento" name="tipoDocumento">
                                  <option value="0">Selecione o Tipo Documento</option>
                                  <option value="venda">Venda</option>
                                  <option value="compra">Compra</option>
                                  <option value="contaCorrente">Conta Corrente</option>
                                  <option value="stock">Stock</option>
                                </select>
                                <small>Mensagem de erro</small>
                              </div>
                              <div class="form-group" style="margin-bottom: 0;">
                                <small class="required">Natureza do Documento</small>
                                <select class="form-control select2" style="width: 100%;" id="naturezaDocumento" name="naturezaDocumento">
                                  <option value="0">Selecione a Natureza</option>
                                </select>
                                <small>Mensagem de erro</small>
                              </div>
                            </div>
                            <div class="col-md-12" id="itens"></div>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="form-group margem">
                            <small>Mensagem de erro</small>
                            <div class="form-group field btns">
                              <button name="btn-submit" id="btn-submit-next" class="btn btn-block btn-primary nextBtn" style="margin-top: 0;">
                                Seguinte
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="page" style="position: relative;">
                      <div class="row">
                        <div class="col-md-12" id="operacoes">
                        </div>
                      </div>
                      <div class="col-md-12" style="padding: 14px 0 0 0; bottom: 0; position: absolute;">
                        <div class="form-group field btns">
                          <button name="btn-submit" id="btn-submit" class="btn btn-block btn-primary prev-1 prev" style="margin-top: 0;">
                            Anterior
                          </button>
                          <button name="btn-submit" id="btn-submit" class="btn btn-block btn-primary submit next" style="margin-top: 0; margin-left: 3px !important;">
                            Gravar Artigo
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <div class="col-md-12" style="opacity: 0;" id="footerPagamento">
                <h4 style="display: flex; align-items: center; justify-content: space-between;"><span id="totalEntregue">ENTREGUE</span><span id="entregueSpan">0,00 Kzs</span></h4>
                <h4 style="display: flex; align-items: center; justify-content: space-between;"><span class="text-danger" id="totalText">TOTAL</span><span id="totalSpan">0,00 Kzs</span></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="modal-docNext">
        <div class="modal-dialog modal-xl">
          <div class="modal-content">
            <div class="modal-header">
              <div class="container">
                <div class="progress-barra">
                  <div class="step">
                    <p style="margin: 0;">Tipo Documento</p>
                    <div class="bullet">
                      <span style="color: #666;">1</span>
                      <div class="check fas fa-check"></div>
                    </div>
                  </div>
                  <div class="step">
                    <p style="margin: 0;">Operações Documento</p>
                    <div class="bullet">
                      <span style="color: #666;">2</span>
                      <div class="check fas fa-check"></div>
                    </div>
                  </div>
                  <div class="step">
                    <p style="margin: 0;">Finalizar</p>
                    <div class="bullet">
                      <span style="color: #666;">3</span>
                      <div class="check fas fa-check"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-body">
              <div class="container">
                <div class="card-body form-outer" style="padding: 0;">
                  <div class="formulario">
                    <div class="page slidePage">
                      <div class="row">
                        <div class="col-md-12">
                          <h5 style="margin-bottom: 1rem; justify-content: center;"><span id="doOpcao"></span> - <span id="codigo"></span></h5>
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group" style="margin-bottom: 0;">
                                <small class="required">Operação Stock</small>
                                <select class="form-control select2" style="width: 100%;" id="operacaoStock" name="operacaoStock">

                                  <option value="semAccao">Sem Ação</option>
                                  <option value="entrada">Entrada</option>
                                  <option value="saida">Saída</option>
                                  <option value="transferenciaArmazem">Transferência Armazém</option>
                                  <option value="inventario">Inventário</option>
                                </select>
                                <small>Mensagem de erro</small>
                              </div>
                              <div class="form-group" style="margin-bottom: 0;">
                                <small class="required">Conta Corrente</small>
                                <select class="form-control select2" style="width: 100%;" id="contaCorrente" name="contaCorrente">

                                  <option value="credito">Crédito</option>
                                  <option value="debito">Débito</option>
                                  <option value="semAccao">Sem Ação</option>
                                </select>
                                <small>Mensagem de erro</small>
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group" style="margin-bottom: 0;">
                                <small class="required">Operação Caixa</small>
                                <select class="form-control select2" style="width: 100%;" id="operacaoCaixa" name="operacaoCaixa">

                                  <option value="credito">Crédito</option>
                                  <option value="debito">Débito</option>
                                  <option value="semAccao">Sem Ação</option>
                                </select>
                                <small>Mensagem de erro</small>
                              </div>
                              <div class="form-group" style="margin-bottom: 0;">
                                <small class="required">Tipo Entidade</small>
                                <select class="form-control select2" style="width: 100%;" id="tipoEntidade" name="tipoEntidade">

                                  <option value="1">Fornecedor</option>
                                  <option value="2">Cliente</option>
                                </select>
                                <small>Mensagem de erro</small>
                              </div>
                            </div>
                            <div class="col-md-12" id="itens"></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group margem">
                            <small>Mensagem de erro</small>
                            <div class="form-group field btns">
                              <button name="btn-submit" id="btn-submit-preview" class="btn btn-block btn-primary nextBtn" style="margin-top: 0;">
                                Anterior
                              </button>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group margem">
                            <small>Mensagem de erro</small>
                            <div class="form-group field btns">
                              <button name="btn-submit" id="btn-submit-final" class="btn btn-block btn-primary nextBtn" style="margin-top: 0;">
                                Finalizar
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="page" style="position: relative;">
                      <div class="row">
                        <div class="col-md-12" id="operacoes">
                        </div>
                      </div>
                      <div class="col-md-12" style="padding: 14px 0 0 0; bottom: 0; position: absolute;">
                        <div class="form-group field btns">
                          <button name="btn-submit" id="btn-submit" class="btn btn-block btn-primary prev-1 prev" style="margin-top: 0;">
                            Anterior
                          </button>
                          <button name="btn-submit" id="btn-submit" class="btn btn-block btn-primary submit next" style="margin-top: 0; margin-left: 3px !important;">
                            Gravar Artigo
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <div class="col-md-12" style="opacity: 0;" id="footerPagamento">
                <h4 style="display: flex; align-items: center; justify-content: space-between;"><span id="totalEntregue">ENTREGUE</span><span id="entregueSpan">0,00 Kzs</span></h4>
                <h4 style="display: flex; align-items: center; justify-content: space-between;"><span class="text-danger" id="totalText">TOTAL</span><span id="totalSpan">0,00 Kzs</span></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="modal-artigo">
        <div class="modal-dialog modal-xl">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Artigos</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <table id="tabelaArtigoListagem" class="table table-hover table-bordered table-striped" style="line-height: 0.8;">
                <thead>
                  <tr style="text-align: center;">
                    <th title="Referência">Referência</th>
                    <th title="Descrição do Artigo">Descrição</th>
                    <th title="Família">Família</th>
                    <th title="Preço do Artigo (S/Imp)">Preço (S/Imp)</th>
                    <th title="Preço do Artigo (C/Imp)">Preço (C/Imp)</th>
                    <th title="Qtd. Stock">Qtd. Stock</th>
                  </tr>
                </thead>
                <tbody style="text-align: center;">
                </tbody>
              </table>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
              <button type="button" class="btn btn-primary">Confirmar</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    </div>
    <div class="modal fade" id="modal-updateUsuario">
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header" style="padding: 0.5rem;">
            <h3 class="card-title p-3">Documento: <span id="nomeModal"></span></h3>
          </div>
          <div class="modal-body" style="padding-bottom: 0px;">
            <div class="row">
              <div class="col-md-12">
                <form name="tabelaInfo">
                  <table name="tabelaInfo" class="table table-sm table-bordered" style="min-width: 100%;
                      max-width: 100%;">
                    <tr name="linhaItem">
                      <td style="width: 400px;">
                        <div class="form-group margem wrapper-info" style="margin-top: 1rem;">
                          <div class="caixa image-info" id="imagemInfo">
                            <i class="fas fa-image"></i>
                          </div>
                        </div>
                      </td>
                      <td style="padding: 20px 0px 0px 10px;">
                        <p>Id. do Documento: <span id="codigoInfo"></span></p>
                        <p>Nome: <span id="nomeInfo"></span></p>
                        <p>Género: <span id="generoInfo"></span></p>
                        <p>Bilhete de identidade: <span id="biInfo"></span></p>
                        <p>E-mail: <span id="emailInfo"></span></p>
                        <p>Nome Documento: <span id="nomeUsuarioInfo"></span></p>
                        <p>Tipo Documento: <span id="tipoUsuarioInfo"></span></p>
                      </td>
                    </tr>
                  </table>
                </form>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.content-wrapper -->
    <?php include('footer.php'); ?>
</body>

</html>
<script>
  let idCliente;
  let valorLinha;
  let totalDoc;
  let pendenteVerify;
  let totalImposto = [];
  let dataHoraFormatada;
  let resizedImage;

  $(document).ready(function() {
    $(function() {
      //Initialize Select2 Elements
      $('.select2').select2()

      //Initialize Select2 Elements
      $('.select2bs4').select2({
        theme: 'bootstrap4'
      })
    });
  });

  let urlToFile = (url) => {
    let arr = url.split(",");
    let mime = arr[0].match(/:(.*?);/)[1];
    let data = arr[1];

    let dataString = atob(data);
    let n = dataString.length;
    let dataArr = new Uint8Array(n);
    while (n--) {
      dataArr[n] = dataString.charCodeAt(n);
    }
    let file = new File([dataArr], 'File.jpg', {
      type: mime
    });
    return file;
  }

  $(document).ready(function() {
    const img_input = document.querySelector("#file");
    img_input.addEventListener("change", function() {
      const reader = new FileReader();
      reader.addEventListener("load", () => {
        const imgElement = document.createElement("img");
        imgElement.src = reader.result;
        imgElement.onload = function(e) {
          const canvas = document.createElement("canvas");
          const MAX_WIDTH = 400;
          const scaleSize = MAX_WIDTH / e.target.width;
          canvas.width = MAX_WIDTH;
          canvas.height = e.target.height * scaleSize;
          const ctx = canvas.getContext("2d");
          ctx.drawImage(e.target, 0, 0, canvas.width, canvas.height);

          const srcEncoded = ctx.canvas.toDataURL(e.target, "image/jpeg");
          resizedImage = urlToFile(srcEncoded);
        }

        const uploaded_image = reader.result;
        document.querySelector(".image-container").style.backgroundImage = `url(${uploaded_image})`;
      });
      reader.readAsDataURL(this.files[0]);
      document.querySelector(".image-container").querySelector("i").style.display = "none";
    });
  });

  $(document).ready(function() {
    $.ajax({
      url: "includes/read/codigoDocumento.inc.php",
      type: "post",
      dataType: "json",
      data: {
        codigo: 2
      },
      success: function(data) {
        codigo.innerText = "<?php echo date("Y"); ?>" + "/" + data[0]["contador"];
      }
    });
  });


  function actualizarDataHora() {
    const dataActual = new Date();

    // Obtenha o ano, mês, dia, hora e minutos
    const ano = dataActual.getFullYear();
    const mes = formatoDoisDigitos(dataActual.getMonth() + 1);
    const dia = formatoDoisDigitos(dataActual.getDate());
    const hora = formatoDoisDigitos(dataActual.getHours());
    const minutos = formatoDoisDigitos(dataActual.getMinutes());
    dataHoraFormatada = `${ano}-${mes}-${dia}T${hora}:${minutos}`;

    function formatoDoisDigitos(valor) {
      return valor < 10 ? `0${valor}` : valor;
    }
  }

  setInterval(actualizarDataHora, 1000);
  // Função para formatar valores com dois dígitos
  actualizarDataHora();


  $(document).on('click', '#tabelaDocumento tbody tr', function() {
    var isSelected = $(this).hasClass('selected');
    $('#tabelaDocumento tbody tr').removeClass('selected');
    if (!isSelected) {
      $(this).addClass('selected');
    }
  });
</script>
<script type="module">
  /*import {
    initializeApp
  } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js'
  import {
    getAnalytics
  } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-analytics.js'
  import {
    getAuth
  } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-auth.js'
  import {
    getFirestore,
    collection,
    addDoc,
    getDocs
  } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-firestore.js'

  const firebaseConfig = {
    apiKey: "AIzaSyAYl5f_OOc_aosK9sURTixa1tCckK6lpMY",
    authDomain: "serra-trucks-d2fe5.firebaseapp.com",
    projectId: "serra-trucks-d2fe5",
    storageBucket: "serra-trucks-d2fe5.appspot.com",
    messagingSenderId: "698670207304",
    appId: "1:698670207304:web:c117cd4d8d8f1816c0e37d",
    measurementId: "G-W6ZYHPBKPF"
  };

  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);*/

  let linha;
  $(document).ready(function() {
    $.ajax({
      url: "includes/read/tipoUsuario.inc.php",
      type: "post",
      dataType: "json",
      success: function(data) {
        let select = "";
        select += "<option value='0'>Selecione um Tipo de Usuario</option>";
        for (var key in data) {
          select += "<option value=" + data[key]['idTipoUsuario'] + ">" + data[key]['nome'] + "</option>";
        }
        $("#idTipoUsuario").html(select);
      }
    });
  });

  function updateLinha(linha) {
    $.ajax({
      url: "includes/read/queryUser.inc.php",
      type: "post",
      dataType: "json",
      data: {
        idUsuario: linha[0].innerText,
      },
      success: function(data) {
        for (var key in data) {
          linha[1].innerText = data[key]["nome"];
          linha[2].innerText = data[key]["genero"];
          linha[3].innerText = data[key]["bi"];
          linha[4].innerText = data[key]["email"];
          linha[5].innerText = data[key]["nomeUsuario"];
          linha[6].innerText = data[key]["tipoUsuario"];
        }
      }
    });
  }

  function insertLinha(id) {
    $.ajax({
      url: "includes/read/queryUser.inc.php",
      type: "post",
      dataType: "json",
      data: {
        idUsuario: id,
      },
      success: function(data) {
        console.log("Documento: ", data);
        for (var key in data) {
          var novaLinha = {
            idUsuario: data[key]["idUsuario"],
            nome: data[key]["nome"],
            genero: data[key]["genero"],
            bi: data[key]["bi"],
            email: data[key]["email"],
            nomeUsuario: data[key]["nomeUsuario"],
            tipoUsuario: data[key]["tipoUsuario"],
          };
          $('#tabelaDocumento').DataTable().row.add(novaLinha).draw(false);
        }
      }
    });
  }

  $(document).on("change", "#tipoDocumento", function(e) {
    e.preventDefault();
    let select = "";
    select += "<option value='0'>Selecione a Natureza</option>";
    if ($(this).val() == "venda") {
      select += `<option value="factura">Factura</option>
      <option value="facturaRecibo">Factura Recibo</option>
      <option value="notaDebito">Nota de Débito</option>
      <option value="notaCredito">Nota de Crédito</option>
      <option value="facturaProforma">Factura Proforma</option>
      <option value="documentoInterno">Documento Interno</option>
      `;
    } else if ($(this).val() == "compra") {
      select += `<option value="vFactura">V/Factura</option>
      <option value="vFacturaRecibo">V/Factura Recibo</option>
      <option value="vNotaDebito">V/Nota de Débito</option>
      <option value="vNotaCredito">V/Nota de Crédito</option>
      <option value="vFacturaProforma">V/Factura Proforma</option>
      <option value="documentoInterno">Documento Interno</option>
      `;
    } else if ($(this).val() == "contaCorrente") {
      select += `<option value="recibo">Recibo</option>
      <option value="pagamentoFornecedor">Pagamento ao Fornecedor</option>
      `;
    } else if ($(this).val() == "stock") {
      select += `<option value="documentoInterno">Documento Interno</option>`;
    } else if ($(this).val() == "remessaBancaria") {
      select += `<option value="remessaBancaria">Remessa Bancária</option>`;
    }
    $("#naturezaDocumento").html(select);
  });

  $(document).on("change", "#naturezaDocumento", function(e) {
    e.preventDefault();
    let selectItens = "";
    let selectOperacoes = "";
    if ($(this).val() == "factura") {
      selectItens += `<div class="row">
        <div class="col-md-4">
        <div class="form-group" style="margin-top: .4rem;">
          <small>Mensagem de erro</small>
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" name="precoComImposto" id="precoComImposto" value="0">
            <label class="custom-control-label" for="precoComImposto">Preços C/Imp. - Inactivo</label>
          </div>
        </div>
        </div>
        <div class="col-md-4">
        <div class="form-group" style="margin-top: .4rem;">
          <small>Mensagem de erro</small>
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" name="estado" id="estado" value="0">
            <label class="custom-control-label" for="estado">Estado - Activo</label>
          </div>
        </div>
        </div>
        <div class="col-md-4">
          <div class="form-group" style="margin-top: .4rem;">
            <small>Mensagem de erro</small>
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" name="adiantamento" id="adiantamento" value="0">
              <label class="custom-control-label" for="adiantamento">Adiantamento - Inactivo</label>
            </div>
          </div>
        </div></div>`;
      selectOperacoes += `<div class="row">
          <div class="col-md-3">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Stock</small>
            <select class="form-control select2" style="width: 100%;" id="stock" name="stock">
              <option value="semAccao">Sem Acção</option>
              <option value="entrada">Entrada</option>
              <option value="saida">Saída</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
          </div>
          <div class="col-md-3">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Conta Corrente</small>
            <select class="form-control select2" style="width: 100%;" id="contaCorrente" name="contaCorrente">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-3">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Caixa</small>
            <select class="form-control select2" style="width: 100%;" id="caixa" name="caixa">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-3">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Movimentar</small>
            <select class="form-control select2" style="width: 100%;" id="movimentar" name="movimentar">
              <option value="ambos">Ambos</option>
              <option value="contaCorrente">Conta Corrente</option>
              <option value="caixa">Caixa</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
      </div>`;
    } else if ($(this).val() == "facturaRecibo") {
      selectItens += `<div class="row">
    <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="precoComImposto" id="precoComImposto" value="0">
        <label class="custom-control-label" for="precoComImposto">Preços C/Imp. - Inactivo</label>
      </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="estado" id="estado" value="0">
        <label class="custom-control-label" for="estado">Estado - Activo</label>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="adiantamento" id="adiantamento" value="0">
        <label class="custom-control-label" for="adiantamento">Adiantamento - Inactivo</label>
      </div>
    </div>
  </div></div>`;
      selectOperacoes += `<div class="row">
          <div class="col-md-3">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Stock</small>
            <select class="form-control select2" style="width: 100%;" id="stock" name="stock">
              <option value="semAccao">Sem Acção</option>
              <option value="entrada">Entrada</option>
              <option value="saida">Saída</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
          </div>
          <div class="col-md-3">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Conta Corrente</small>
            <select class="form-control select2" style="width: 100%;" id="contaCorrente" name="contaCorrente">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-3">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Caixa</small>
            <select class="form-control select2" style="width: 100%;" id="caixa" name="caixa">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-3">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Movimentar</small>
            <select class="form-control select2" style="width: 100%;" id="movimentar" name="movimentar">
              <option value="ambos">Ambos</option>
              <option value="contaCorrente">Conta Corrente</option>
              <option value="caixa">Caixa</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
      </div>`;
    } else if ($(this).val() == "notaDebito") {
      selectItens += `<div class="row">
    <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="precoComImposto" id="precoComImposto" value="0">
        <label class="custom-control-label" for="precoComImposto">Preços C/Imp. - Inactivo</label>
      </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="estado" id="estado" value="0">
        <label class="custom-control-label" for="estado">Estado - Activo</label>
      </div>
    </div>
    </div>
  </div>`;
      selectOperacoes += `<div class="row">
          <div class="col-md-3">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Stock</small>
            <select class="form-control select2" style="width: 100%;" id="stock" name="stock">
              <option value="semAccao">Sem Acção</option>
              <option value="entrada">Entrada</option>
              <option value="saida">Saída</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
          </div>
          <div class="col-md-3">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Conta Corrente</small>
            <select class="form-control select2" style="width: 100%;" id="contaCorrente" name="contaCorrente">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-3">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Caixa</small>
            <select class="form-control select2" style="width: 100%;" id="caixa" name="caixa">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-3">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Movimentar</small>
            <select class="form-control select2" style="width: 100%;" id="movimentar" name="movimentar">
              <option value="ambos">Ambos</option>
              <option value="contaCorrente">Conta Corrente</option>
              <option value="caixa">Caixa</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
      </div>`;
    } else if ($(this).val() == "notaCredito") {
      selectItens += `<div class="row">
    <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="precoComImposto" id="precoComImposto" value="0">
        <label class="custom-control-label" for="precoComImposto">Preços C/Imp. - Inactivo</label>
      </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="estado" id="estado" value="0">
        <label class="custom-control-label" for="estado">Estado - Activo</label>
      </div>
    </div>
    </div>
  </div>`;
      selectOperacoes += `<div class="row">
          <div class="col-md-4">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Stock</small>
            <select class="form-control select2" style="width: 100%;" id="stock" name="stock">
              <option value="semAccao">Sem Acção</option>
              <option value="entrada">Entrada</option>
              <option value="saida">Saída</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
          </div>
          <div class="col-md-4">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Conta Corrente</small>
            <select class="form-control select2" style="width: 100%;" id="contaCorrente" name="contaCorrente">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-4">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Caixa</small>
            <select class="form-control select2" style="width: 100%;" id="caixa" name="caixa">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-4">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Movimentar</small>
            <select class="form-control select2" style="width: 100%;" id="movimentar" name="movimentar">
              <option value="ambos">Ambos</option>
              <option value="contaCorrente">Conta Corrente</option>
              <option value="caixa">Caixa</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-4">
        <div class="form-group" style="margin-bottom: 0;">
          <small class="required">Valido Por (dias)</small>
          <input type="number" class="form-control" id="validoDias" name="validoDias" placeholder="Valido Por (dias)" title="Valido Por (dias)" required>
          <small>Mensagem de erro</small>
        </div>
        </div>
        <div class="col-md-4">
        <div class="form-group" style="margin-bottom: 0;">
          <small class="required">Dedutível a partir de (dias)</small>
          <input type="number" class="form-control" id="dedutivelDias" name="dedutivelDias" placeholder="Dedutível a partir de (dias)" title="Dedutível a partir de (dias)" required>
          <small>Mensagem de erro</small>
        </div>
        </div>
      </div>`;
    } else if ($(this).val() == "facturaProforma") {
      selectItens += `<div class="row">
    <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="precoComImposto" id="precoComImposto" value="0">
        <label class="custom-control-label" for="precoComImposto">Preços C/Imp. - Inactivo</label>
      </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="estado" id="estado" value="0">
        <label class="custom-control-label" for="estado">Estado - Activo</label>
      </div>
    </div>
    </div>
  </div>`;
      selectOperacoes += `<div class="row">
          <div class="col-md-3">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Stock</small>
            <select class="form-control select2" style="width: 100%;" id="stock" name="stock">
              <option value="semAccao">Sem Acção</option>
              <option value="entrada">Entrada</option>
              <option value="saida">Saída</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
          </div>
          <div class="col-md-3">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Conta Corrente</small>
            <select class="form-control select2" style="width: 100%;" id="contaCorrente" name="contaCorrente">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-3">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Caixa</small>
            <select class="form-control select2" style="width: 100%;" id="caixa" name="caixa">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-3">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Movimentar</small>
            <select class="form-control select2" style="width: 100%;" id="movimentar" name="movimentar">
              <option value="ambos">Ambos</option>
              <option value="contaCorrente">Conta Corrente</option>
              <option value="caixa">Caixa</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
      </div>`;
    } else if ($(this).val() == "documentoInterno") {
      selectItens += `<div class="row">
    <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="precoComImposto" id="precoComImposto" value="0">
        <label class="custom-control-label" for="precoComImposto">Preços C/Imp. - Inactivo</label>
      </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="form-group" style="margin-top: .4rem;">
      <small>Mensagem de erro</small>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="estado" id="estado" value="0">
        <label class="custom-control-label" for="estado">Estado - Activo</label>
      </div>
    </div>
    </div>
    </div>`;
      selectOperacoes += `<div class="row">
          <div class="col-md-3">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Stock</small>
            <select class="form-control select2" style="width: 100%;" id="stock" name="stock">
              <option value="semAccao">Sem Acção</option>
              <option value="entrada">Entrada</option>
              <option value="saida">Saída</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
          </div>
          <div class="col-md-3">
          <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Conta Corrente</small>
            <select class="form-control select2" style="width: 100%;" id="contaCorrente" name="contaCorrente">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-3">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Caixa</small>
            <select class="form-control select2" style="width: 100%;" id="caixa" name="caixa">
              <option value="semAccao">Sem Acção</option>
              <option value="credito">Crédito</option>
              <option value="debito">Débito</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
        <div class="col-md-3">
        <div class="form-group" style="margin-bottom: 0;">
            <small class="required">Movimentar</small>
            <select class="form-control select2" style="width: 100%;" id="movimentar" name="movimentar">
              <option value="ambos">Ambos</option>
              <option value="contaCorrente">Conta Corrente</option>
              <option value="caixa">Caixa</option>
            </select>
            <small>Mensagem de erro</small>
          </div>
        </div>
      </div>`;
    }

    $("#itens").html(selectItens);
    $("#operacoes").html(selectOperacoes);
  });

  $(document).on("change", "#precoComImposto", function(e) {
    e.preventDefault();
    var labelPrecoComImposto = document.querySelector("label[for='precoComImposto']");
    if (precoComImposto.checked == true) {
      precoComImposto.value = 1;
      labelPrecoComImposto.innerText = "Preços C/Imp. - Activo";
    } else {
      precoComImposto.value = 0;
      labelPrecoComImposto.innerText = "Preços C/Imp. - Inactivo";
    }
  });

  $(document).on("change", "#estado", function(e) {
    e.preventDefault();
    var labelEstado = document.querySelector("label[for='estado']");
    if (estado.checked == true) {
      estado.value = 1;
      labelEstado.innerText = "Estado - Inactivo";
    } else {
      estado.value = 0;
      labelEstado.innerText = "Estado - Activo";
    }
  });

  $(document).on("change", "#adiantamento", function(e) {
    e.preventDefault();
    var labelAdiantamento = document.querySelector("label[for='adiantamento']");
    if (adiantamento.checked == true) {
      adiantamento.value = 0;
      labelAdiantamento.innerText = "Adiantamento - Activo";
    } else {
      adiantamento.value = 1;
      labelAdiantamento.innerText = "Adiantamento - Inactivo";
    }
  });

  $(document).ready(function() {
    $.ajax({
      url: "includes/read/tipoDoc.inc.php",
      type: "post",
      dataType: "json"
    }).done(function(data) {
      console.log(data);
      $("#tabelaDocumento").DataTable({
        select: 'single',
        "aaData": data,
        "columns": [{
          data: "idTipoDoc"
        }, {
          data: "codigo"
        }, {
          data: "nome"
        }, {
          data: "estado",
          render: function(data) {
            if (data == 0) {
              return "<small class='badge badge-success'>Activo</small>";
            } else if (data == 1) {
              return "<small class='badge badge-danger'>Inactivo</small>";
            }
          }
        }, {
          data: null,
          render: function(data, type, row) {
            return `
            <div id="dropdownOpcoes" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="display:flex; align-items: center; justify-content: space-around;"><button class="btn btn-outline-primary opcoes" style="padding: .2rem .7rem; line-height: 1; border: none;"><i class="fa-solid fa-ellipsis-vertical"></i></button></div>
            <ul aria-labelledby="dropdownOpcoes" class="dropdown-menu border-0 shadow">
              <li style="padding: 0 .4rem;"><a href="#" class="dropdown-item btn-more" style="padding: .8rem; border-radius: 5px;">Informações</a></li>
              <li style="padding: 0 .4rem;"><a href="#" class="dropdown-item btn-update" style="padding: .8rem; border-radius: 5px;">Editar</a></li>
              <li style="padding: 0 .4rem;"><a href="#" class="dropdown-item btn-delete" style="padding: .8rem; border-radius: 5px;">Eliminar</a></li>
            </ul>`;
          }
        }],
        columnDefs: [{
          targets: -1,
          orderable: false
        }],
        "responsive": true,
        "lengthChange": false,
        "autoWidth": false,
        "language": idiomaPortugues,
        lengthMenu: [
          [7, 25, 50, -1],
          [10, 25, 50, 'All']
        ],
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
      }).buttons().container().appendTo('#tabelaDocumento_wrapper .col-md-6:eq(0)');
    });
  });

  var idiomaPortugues = {
    buttons: {
      copy: "Copiar",
      print: "Imprimir",
      colvis: "Visibilidade"
    },
    "sProcessing": "A processar...",
    "sLengthMenu": "Mostrar _MENU_ dos registros",
    "sZeroRecords": "Sem resultados!",
    "sEmptyTable": "Tabela sem dados disponíveis",
    "sInfo": "De _START_ à _END_ de um total de _TOTAL_ registros",
    "sInfoEmpty": "De 0 à 0 de um total de 0 registros",
    "sInfoFiltered": "(filtrado de um total de _MAX_ registros)",
    "sInfoPostFix": "",
    "sSearch": "Pesquisar:",
    "sUrl": "",
    "sInfoThousands": ",",
    "sLoadingRecords": "A carregar...",
    "oPaginate": {
      "sFirst": "Primeira",
      "sLast": "Última",
      "sNext": "Seguinte",
      "sPrevious": "Anterior"
    },
    "oAria": {
      "sSortAscending": ": Activar para ordenar a coluna de forma ascendente",
      "sSortDescending": ": Activar para ordenar a coluna de forma descendente"
    }
  }

  $('#tabelaDocumento tbody').on('click', 'td', function() {
    let tabela = document.getElementById("tabelaDocumento");

    for (let i = 1; i < tabela.rows.length; i++) {
      tabela.rows[i].ondblclick = function() {
        linha = this.cells[0].parentElement;
        idUsuario = this.cells[0].innerHTML;
        nomeEdit = this.cells[1];
        generoEdit = this.cells[2];
        biEdit = this.cells[3];
        emailEdit = this.cells[4];
        nomeUsuarioEdit = this.cells[5];

        console.log(idUsuario);
        ajax();
        //$('#modal-lg').modal('show');
        //this.classList.remove("selected");
      }
    }
  });

  function reload() {
    $('#modal-documento').modal('hide');
    resetForm();
    loadNovoId();
    codigoDocumento.value = "";
    codigoDocumento.parentElement.querySelectorAll("small")[1].style.visibility = "hidden";
    codigoDocumento.className = "form-control";
    descricao.value = "";
    descricao.parentElement.querySelectorAll("small")[1].style.visibility = "hidden";
    descricao.className = "form-control";

    document.querySelector(".submit").removeAttribute('disabled');
  }

  $(document).on("click", "#btn", function(e) {
    e.preventDefault();
    doOpcao.innerText = "Novo Documento";
    reload();

    $('#modal-documento').modal('show');
    $(function() {
      //Initialize Select2 Elements
      $('.select2').select2()

      //Initialize Select2 Elements
      $('.select2bs4').select2({
        theme: 'bootstrap4'
      })
    })
    /*$('#modal-documento').modal({
      backdrop: 'static'
    }, 'show');*/
  });

  let codDoc = ""
  let descr = ""
  let tipoDoc = ""
  let natureza = ""
  let operacaoStock = ""
  let contaCorrente = ""
  let operacaoCaixa = ""
  let tipoEntidade = ""
  $(document).on("click", "#btn-submit-next", function(e) {
    codDoc = $("#codigoDocumento").val()
    descr = $("#descricao").val()
    tipoDoc = $("#tipoDocumento").val()
    natureza = $("#naturezaDocumento").val()
    if ((codDoc != "" || codDoc != null) && (descr != "" || descr != null) && (tipoDoc != 0 && natureza != 0)) {
      e.preventDefault();
      doOpcao.innerText = "Seguinte";
      reload();
      $('#modal-documento').modal('hide');
      $('#modal-docNext').modal('show');
      $(function() {
        //Initialize Select2 Elements
        $('.select2').select2()

        //Initialize Select2 Elements
        $('.select2bs4').select2({
          theme: 'bootstrap4'
        })
      })
      /*$('#modal-documento').modal({
        backdrop: 'static'
      }, 'show');*/
    } else {
      $(function() {
        //booleano = false;
        var Toast = Swal.mixin({
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000
        });
        Toast.fire({
          icon: 'error',
          title: 'Preencha devidamente todos os campos.'
        });
      });
    }
  });

  $(document).on("click", "#btn-submit-preview", function(e) {
    e.preventDefault();
    doOpcao.innerText = "Anterior";
    $("#codigoDocumento").val(codDoc)
    $("#descricao").val(descr)
    //reload();
    $('#modal-documento').modal('show');
    $('#modal-docNext').modal('hide');

    /*$('#modal-documento').modal({
      backdrop: 'static'
    }, 'show');*/
  });

  operacaoStock = $("#operacaoStock").val()
  contaCorrente = $("#contaCorrente").val()
  operacaoCaixa = $("#operacaoCaixa").val()
  tipoEntidade = $("#tipoEntidade").val()
  $("#btn-submit-final").click(function(e) {
    if (operacaoStock != 0 && contaCorrente != 0 && operacaoCaixa != 0 && tipoEntidade != 0) {

      $.ajax({
        url: "includes/create/tipoDoc.inc.php",
        type: "post",
        dataType: "json",
        data: {
          codDoc: JSON.stringify(codDoc),
          descr: JSON.stringify(descr),
          tipoDoc: JSON.stringify(tipoDoc),
          natureza: JSON.stringify(natureza),
          operacaoStock: JSON.stringify(operacaoStock),
          contaCorrente: JSON.stringify(contaCorrente),
          operacaoCaixa: JSON.stringify(operacaoCaixa),
          tipoEntidade: JSON.stringify(tipoEntidade)
        },
        success: function(data) {
          console.log(data)
        },
        error: (msg) => {
          console.log(msg);
        }
      });
    } else {
      alert(operacaoStock + " " + contaCorrente + " " + operacaoCaixa + " " + tipoEntidade)
      $(function() {
        //booleano = false;
        var Toast = Swal.mixin({
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000
        });
        Toast.fire({
          icon: 'error',
          title: 'Selecione as Opções em todos os campos.'
        });
      });
    }
  })




  function ajax(idUsuario) {
    $.ajax({
      url: "includes/read/queryUser.inc.php",
      type: "post",
      dataType: "json",
      data: {
        idUsuario: idUsuario
      },
      success: function(data) {
        console.log("Resultados: ", data);
        imagemInfo = document.getElementById("imagemInfo");
        img = document.querySelector(".image-info");

        imgUpdate = document.querySelector(".image-container");

        for (var key in data) {
          if (data[key]['imagem'] != null) {
            img.querySelector("i").style.display = "none";
            imagemInfo.style.backgroundImage = "url('images/usuario/" + data[key]['imagem'] + "')";
            console.log("Tem imagem!");
          } else {
            console.log("Não tem imagem!");
            img.querySelector("i").style.display = "block";
            imagemInfo.style.backgroundImage = "url('images/usuario/" + data[key]['imagem'] + "')";
          }

          nomeModal.innerText = data[key]['nome'];
          codigoInfo.innerText = data[key]['idUsuario'];
          nomeInfo.innerText = data[key]['nome'];
          nomeUsuarioInfo.innerText = data[key]['nomeUsuario'];
          generoInfo.innerText = data[key]['genero'];
          biInfo.innerText = data[key]['bi'];
          emailInfo.innerText = data[key]['email'];
          enderecoInfo.innerText = data[key]['endereco'];
          telefoneInfo.innerText = data[key]['telefone'];
          dataNascInfo.innerText = data[key]['dataNasc'];
          dataAdesaoInfo.innerText = data[key]['dataAdesao'];
          estadoInfo.innerText = data[key]['estado'];
          tipoUsuarioInfo.innerText = data[key]['tipoUsuario'];

          imgUpdate.style.backgroundImage = "url('images/usuario/" + data[key]['imagem'] + "')";
          imgUpdate.querySelector("i").style.display = "none";

          nome.value = data[key]['nome'];
          nomeUsuario.value = data[key]['nomeUsuario'];

          $('#genero').val(data[key]['genero']);
          $('#genero').select2().trigger('change');

          email.value = data[key]['email'];
          bi.value = data[key]['bi'];

          $('#idTipoUsuario').val(data[key]['idTipoUsuario']);
          $('#idTipoUsuario').select2().trigger('change');
        }
      }
    }).done(function(data) {
      $('#modal-updateUsuario').modal('show');
    });
  }

  function detalhes(id) {
    $.ajax({
      url: "includes/read/queryUser.inc.php",
      type: "post",
      dataType: "json",
      data: {
        idUsuario: id
      },
      success: function(data) {
        for (var key in data) {
          nomeModal.innerText = data[key]["nome"];
          if (data[key]["imagem"] != null) {
            imagemInfo.querySelector('i').style.display = "none";
            imagemInfo.style.backgroundImage = `url('./images/usuario/${data[key]["imagem"]}')`;
          } else {
            imagemInfo.querySelector('i').style.display = "block";
            imagemInfo.style.backgroundImage = ``;
          }
          codigoInfo.innerText = data[key]["idUsuario"];
          nomeInfo.innerText = data[key]["nome"];
          generoInfo.innerText = data[key]["genero"];
          biInfo.innerText = data[key]["bi"];
          emailInfo.innerText = data[key]["email"];
          nomeUsuarioInfo.innerText = data[key]["nomeUsuario"];
          tipoUsuarioInfo.innerText = data[key]["tipoUsuario"];
        }
      }
    });
  }

  $('#tabelaDocumento').on('click', '.btn-more', function(e) {
    e.preventDefault();
    $('#modal-updateUsuario').modal('show');
    linha = $(this).closest('tr').find('td');
    detalhes($(this).closest('tr').find('td')[0].textContent);
  });

  $('#tabelaDocumento').on('click', '.btn-update', function(e) {
    e.preventDefault();
    linha = $(this).closest('tr').find('td');
    doOpcao.innerText = "Editar Documento";
    resetForm();
    $('#modal-documento').modal('show');
    let id = $(this).closest('tr').find('td')[0].textContent;
    $.ajax({
      url: "includes/read/queryUser.inc.php",
      type: "post",
      dataType: "json",
      data: {
        idUsuario: id
      },
      success: function(data) {
        let imagem = document.querySelector('.image-container');
        let iconImage = imagem.querySelector('i');
        for (var key in data) {
          codigo.innerText = data[key]["idUsuario"];
          if (data[key]["imagem"] != null) {
            imagem.style.backgroundImage = `url('./images/usuario/${data[key]["imagem"]}')`;
            iconImage.style.display = "none";
          } else {
            imagem.style.backgroundImage = ``;
            iconImage.style.display = "block";
          }

          if (data[key]["nome"] != "") {
            nome.value = data[key]["nome"];
          } else {
            nome.value = "";
          }

          $('#genero').val(data[key]['genero']);
          $('#genero').select2().trigger('change');

          if (data[key]["bi"] != "") {
            bi.value = data[key]["bi"];
          } else {
            bi.value = "";
          }

          if (data[key]["email"] != "") {
            email.value = data[key]["email"];
          } else {
            email.value = "";
          }

          if (data[key]["nomeUsuario"] != "") {
            nomeUsuario.value = data[key]["nomeUsuario"];
          } else {
            nomeUsuario.value = "";
          }

          $('#idTipoUsuario').val(data[key]['idTipoUsuario']);
          $('#idTipoUsuario').select2().trigger('change');
        }
        console.log(data)
      }
    });
  });

  $('#tabelaDocumento').on('click', '.btn-delete', function(e) {
    e.preventDefault();
    linha = $(this).closest('tr').find('td');
    let id = $(this).closest('tr').find('td')[0].textContent;
    let nome = $(this).closest('tr').find('td')[1].textContent;
    swal.fire({
        title: "Tem a certeza que pretende eliminar Documento?",
        text: "Documento: " + nome,
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: 'Confirmar',
        confirmButtonColor: '#560085',
        cancelButtonText: 'Cancelar',
        cancelButtonColor: '#560085',
      })
      .then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: "includes/delete/usuario.inc.php",
            type: "post",
            dataType: "json",
            data: {
              idUsuario: id
            },
            success: function(data) {
              console.log(data);
              swal.fire({
                title: "Documento " + nome + " eliminado com sucesso!",
                icon: "success",
                confirmButtonText: 'Confirmar',
                confirmButtonColor: '#560085',
              });
              $('#tabelaDocumento').DataTable().row(linha).remove().draw(false);
            },
            error: function(data) {
              swal.fire({
                title: "Erro ao eliminar Documento!",
                text: "Erro ao apagar Documento: " + nome + " !",
                icon: "error",
                confirmButtonText: 'Confirmar',
                confirmButtonColor: '#560085',
              });
            }
          });
        }
      });
  });

  function loadNovoId() {
    $.ajax({
      url: "includes/read/codigoUsuario.inc.php",
      type: "post",
      dataType: "json",
      success: function(data) {
        codigo.innerText = data;
      }
    });
  }

  $('#tabelaArtigo').on('click', '.remove_row', function(e) {
    e.preventDefault();
    var table = $('#tabelaArtigo').DataTable();
    var row = $(this).closest('tr');
    if ($('#tabelaArtigo tbody tr').length > 1) {
      table.row(row).remove().draw();
    } else {
      row.find('.inputSearchArtigo').val("");
      row.find('.descricao').val("");
      row.find('.qtd').val(1);
      row.find('.preco').val("");
      row.find('.desconto').val("0,00%");
      row.find('.imposto').val(0);
      row.find('.imposto').select2().trigger('change');
      row.find('.total').val("");
    }
    totalDocumento();
  });

  $('#tabelaArtigo').on('keypress', '.inputSearchArtigo', function() {
    if (event.which === 13) {
      event.preventDefault();
      funcaoQueryArtigo($(this).val(), $(this));
      totalDocumento();
    }
  });

  $('#tabelaArtigo').on('focusout', '.inputSearchArtigo', function() {
    event.preventDefault();
    if (this.value == "") {
      $(this).closest('tr').find('.inputSearchArtigo').val("");
      $(this).closest('tr').find('.descricao').val("");
      $(this).closest('tr').find('.qtd').val(1);
      $(this).closest('tr').find('.preco').val("");
      $(this).closest('tr').find('.desconto').val("0,00%");
      $(this).closest('tr').find('.imposto').val(0);
      $(this).closest('tr').find('.imposto').select2().trigger('change');
      $(this).closest('tr').find('.total').val("");
    } else {
      funcaoQueryArtigo($(this).val(), $(this));
    }
    totalDocumento();
  });

  $(document).on("click", ".submit", function(e) {
    e.preventDefault();
    if (nome.value != '' && email.value != '' && genero.value != 0 && idTipoUsuario.value != 0 && nomeUsuario.value != '' && bi.value != '') {
      let img = $("#file")[0].files;
      usuario(img);
    }
  });

  /*async function createUsuario(img) {
    try {
      const docRef = await addDoc(collection(db, "user"), {
        isVerified: false,
        username: nomeUsuario.value,
        password: "admin"
      });
      console.log("Document written with ID: ", docRef.id);
    } catch (e) {
      console.error("Error adding document: ", e);
    }
    $.ajax({
      url: "includes/create/usuario.inc.php",
      type: "post",
      data: {
        nome: nome.value,
        nomeUsuario: nomeUsuario.value,
        genero: genero.value,
        email: email.value,
        bi: bi.value,
        idTipoUsuario: idTipoUsuario.value
      },
      success: function(data) {
        swal.fire({
          title: "Cadastro efectuado com sucesso!",
          text: "Documento " + nome.value + " cadastrado!",
          confirmButtonText: 'Confirmar',
          confirmButtonColor: '#560085',
          icon: "success",
        }).then(() => {
          if (img[0] != null) {
            foto(data, img);
          }
        });
        nome.value = "";
        nome.className = "form-control";
        nomeUsuario.value = "";
        nomeUsuario.className = "form-control";
        $('#genero').val(0);
        $('#genero').select2().trigger('change');
        email.value = "";
        email.className = "form-control";
        bi.value = "";
        bi.className = "form-control";
        $('#idTipoUsuario').val(0);
        $('#idTipoUsuario').select2().trigger('change');
        let smallIdTipoUsuario = idTipoUsuario.parentElement.querySelectorAll("small")[1];
        smallIdTipoUsuario.style.visibility = "hidden";
        let smallGenero = genero.parentElement.querySelectorAll("small")[1];
        smallGenero.style.visibility = "hidden";
      },
      error: function(data) {
        swal.fire({
          title: "Erro ao cadastrar Documento!",
          text: "Erro ao cadastrar Documento: " + nome.value + " !",
          confirmButtonText: 'Confirmar',
          confirmButtonColor: '#560085',
          icon: "error",
        });
      }
    }).done(function(data) {
      console.log(data);
    });
  }*/

  function usuario(img) {
    if (doOpcao.innerText == "Novo Documento") {
      $.ajax({
        url: "includes/create/usuario.inc.php",
        type: "post",
        data: {
          nome: nome.value,
          nomeUsuario: nomeUsuario.value,
          genero: genero.value,
          email: email.value,
          bi: bi.value,
          idTipoUsuario: idTipoUsuario.value
        },
        success: function(data) {
          swal.fire({
            title: "Cadastro efectuado com sucesso!",
            text: "Documento " + nome.value + " cadastrado!",
            confirmButtonText: 'Confirmar',
            confirmButtonColor: '#560085',
            icon: "success",
          }).then(() => {
            if (img[0] != null) {
              foto(data, img);
            }
          });
          insertLinha(data);
          reload();
        },
        error: function(data) {
          swal.fire({
            title: "Erro ao cadastrar Documento!",
            text: "Erro ao cadastrar Documento: " + nome.value + " !",
            confirmButtonText: 'Confirmar',
            confirmButtonColor: '#560085',
            icon: "error",
          });
        }
      }).done(function(data) {
        console.log(data);
      });
    } else {
      $.ajax({
        url: "includes/update/usuario.inc.php",
        type: "post",
        data: {
          idUsuario: codigo.innerText,
          nome: nome.value,
          nomeUsuario: nomeUsuario.value,
          genero: genero.value,
          email: email.value,
          bi: bi.value,
          idTipoUsuario: idTipoUsuario.value
        },
        success: function(data) {
          swal.fire({
            title: "Informações Actualizadas com sucesso!",
            text: "Documento " + nome.value + ".",
            confirmButtonText: 'Confirmar',
            confirmButtonColor: '#560085',
            icon: "success",
          }).then(() => {
            if (img[0] != null) {
              foto(codigo.innerText, img);
            }
          });
          updateLinha(linha);
          reload();
        },
        error: function(data) {
          swal.fire({
            title: "Erro ao cadastrar Documento!",
            text: "Erro ao cadastrar Documento: " + nome.value + " !",
            confirmButtonText: 'Confirmar',
            confirmButtonColor: '#560085',
            icon: "error",
          });
        }
      }).done(function(data) {
        console.log(data);
      });
    }
  }

  function foto(identificador, img) {
    let form_data = new FormData();
    form_data.append('id', identificador);
    form_data.append('imagem', resizedImage);

    $.ajax({
      url: "includes/create/fotoUsuario.inc.php",
      type: "post",
      data: form_data,
      cache: false,
      contentType: false,
      processData: false,
      success: function(data) {
        console.log(data);
      }
    });
  }

  $(document).on("click", "#btn-delete", function(e) {
    e.preventDefault();
    console.log(idUsuario);
    swal.fire({
        title: "Tem a certeza que pretende eliminar usuario?",
        text: "usuario: " + nome.value,
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: 'Confirmar',
        confirmButtonColor: '#560085',
        cancelButtonText: 'Cancelar',
        cancelButtonColor: '#560085',
      })
      .then((result) => {
        if (result.isConfirmed) {
          if (idUsuario != 1) {
            $.ajax({
              url: "php/delete/usuario.php",
              type: "post",
              dataType: "json",
              data: {
                idUsuario: idUsuario
              },
              success: function(data) {
                console.log(data);
                swal.fire({
                  title: "usuario " + nome.value + " eliminado com sucesso!",
                  icon: "success",
                  confirmButtonText: 'Confirmar',
                  confirmButtonColor: '#560085',
                });
                $('#tabelaDocumento').DataTable().row(linha).remove().draw(false);
              },
              error: function(data) {
                swal.fire({
                  title: "Erro ao eliminar usuario!",
                  text: "Erro ao apagar usuario: " + nome.value + " !",
                  icon: "error",
                  confirmButtonText: 'Confirmar',
                  confirmButtonColor: '#560085',
                });
              }
            });
          } else {
            swal.fire({
              title: "Erro ao eliminar Documento!",
              text: "Documento: " + nome.value + " não pode ser eliminado!",
              confirmButtonText: 'Confirmar',
              confirmButtonColor: '#560085',
              icon: "error",
            });
          }
        }
      });
  });
</script>
<script src="./validation/parametroUsuario.js"></script>