<?php include('./header.php'); ?>
<style type="text/css">
   .country {
      border-radius: 0.25rem;
      padding: 0.375rem 0.75rem;
   }

   .logo img {
      width: 150px;
   }

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

   .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: -31.5rem;
      height: 3px;
      width: 31rem;
      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>

<link rel="stylesheet" href="template/plugins/toastr/toastr.min.css">

<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-opcao" id="btn-import">Importar Excel</button> -->
                                 <button class="btn btn-opcao" id="btn-preview" disabled>Pré-visualizar</button>
                                 <button class="btn btn-opcao">Importar</button>
                                 <!-- <button class="btn btn-opcao botao-activo" id="btn">Nova Folha de Salário/Recibo</button> -->
                              </div>
                              <!-- /.col -->
                           </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">Folha de Salário/Recibo</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>Ref.</th>
                                    <th>Nome Funcionário</th>
                                    <th>Função</th>
                                    <th>Departamento</th>
                                    <th>Salário Base</th>
                                    <th>Salário Ilíquido</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 Folha de Pagamento
                        </div>
                     </div>
                  </div>
               </div>
               <!-- /.card -->
            </div>
            <!-- /.container-fluid -->
         </section>
         <div class="modal fade" id="modal-documento">
            <div class="modal-dialog modal-md">
               <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>
                  </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-12">
                                       <h5 style="margin-bottom: 1rem; justify-content: center;"><span id="doOpcao">Folha de Pagamento</span> - <span id="codigo">FP0/1</span></h5>
                                    </div>
                                 </div>
                                 <div class="row">
                                    <div class="col-md-12">
                                       <div class="row">
                                          <div class="col-12">
                                             <div class="form-group" style="margin-bottom: 0;">
                                                <small class="required">Funcionário</small>
                                                <select class="form-control select2" style="width: 100%;" id="idFuncionario" name="idFuncionario">
                                                   <option value="0">Selecione a Funcionário</option>
                                                </select>
                                                <small>Mensagem de erro</small>
                                             </div>
                                          </div>

                                          <div class="col-12">
                                             <div class="form-group" style="margin-bottom: 0;">
                                                <small class="required">Função</small>
                                                <select class="form-control select2" style="width: 100%;" id="idFuncao" name="idFuncao">
                                                   <option value="0">Selecione a Função</option>
                                                </select>
                                                <small>Mensagem de erro</small>
                                             </div>
                                          </div>

                                          <div class="col-12">
                                             <div class="form-group current_owner" style="margin-bottom: 0;">
                                                <small class="required">Saldo Líquido</small>
                                                <input type="text" class="form-control" id="saldoLiquido" name="saldoLiquido" placeholder="Saldo Líquido" title="Saldo Líquido" required>
                                                <small>Mensagem de erro</small>
                                             </div>
                                          </div>

                                          <div class="col-12">
                                             <div class="form-group current_owner" style="margin-bottom: 0;">
                                                <small class="required">Saldo Ilíquido</small>
                                                <input type="text" class="form-control" id="saldoIliquido" name="saldoIliquido" placeholder="Saldo Ilíquido" title="Saldo Ilíquido" required>
                                                <small>Mensagem de erro</small>
                                             </div>
                                          </div>

                                          <div class="col-12"></div>

                                       </div>
                                    </div>
                                 </div>

                                 <div class="row">
                                    <div class="col-12">
                                       <div class="form-group margem">
                                          <small>Mensagem de erro</small>
                                          <div class="form-group field btns">
                                             <button name="btn-submit" id="addDepartamento" class="btn btn-block btn-primary" style="margin-top: 0;">
                                                Adicionar
                                             </button>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="modal-footer d-none">
                     <div class="col-md-12" style="opacity: 1;" 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>
               <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
         </div>


      </div>
      <div class="modal fade" id="modal-import">
         <div class="modal-dialog modal-default">
            <div class="modal-content">
               <div class="modal-header" style="padding: 0.5rem;">
                  <h3 class="card-title p-3">Importação Excel</h3>
               </div>
               <div class="modal-body" style="padding-bottom: 0px;">
                  <div class="row">
                     <div class="col-md-12">
                        <div class="form-group" style="margin-bottom: 0;">
                           <label for="exampleInputFile">Pesquisar Ficheiro</label>
                           <div class="input-group">
                              <div class="custom-file">
                                 <input type="file" class="custom-file-input" id="exampleInputFile">
                                 <label class="custom-file-label" for="exampleInputFile">Procurar</label>
                              </div>
                              <div class="input-group-append">
                                 <span class="input-group-text" id="btnImportExcel">Carregar</span>
                              </div>
                           </div>
                           <small>Mensagem de erro</small>
                        </div>
                     </div>
                  </div>
               </div>

            </div>
            <!-- /.modal-content -->
         </div>
         <!-- /.modal-dialog -->
      </div>
      <div class="modal fade" id="modal-detalhes">
         <div class="modal-dialog modal-xl">
            <div class="modal-content">
               <div class="modal-header">
                  <h4 class="modal-title">Detalhes da Requisição</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                  </button>
               </div>
               <div class="modal-body">
                  <div class="invoice p-3 mb-3" style="height: 30rem; overflow-y: scroll;">
                     <!-- title row -->
                     <div class="row">
                        <div class="col-12">
                           <h4>
                              <span id="detalheCabecalho"></span>
                              <small class="float-right" id="detalheDataActual"></small>
                           </h4>
                        </div>
                        <!-- /.col -->
                     </div>
                     <!-- info row -->
                     <div class="row invoice-info">
                        <div class="col-sm-6 invoice-col">
                           <span>Código Requisição - <strong id="detalheCodigo"></strong></span><br>
                           <span>Requisição - </span><strong><span id="detalheDocumento"></span></strong><br>
                           <span>Estado - </span><strong><span id="detalheSerie"></span></strong><br>
                           <span>Data Criação - </span><strong><span id="detalhePrazoPagamento"></span></strong><br>
                           <span>Total - </span><strong><span id="detalheVendedor"></span></strong>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-6 invoice-col">
                           <strong><span>Entidades</span></strong><br>
                           <span>Proprietário - </span><strong><span id="detalheIdEntidade"></span></strong><br>
                           <span>Aprovador - </span><strong><span id="detalheNome"></span></strong><br>
                           <span>Criado por - </span><strong><span id="detalheMorada"></span></strong><br>
                        </div>
                     </div>
                     <!-- /.row -->

                     <!-- Table row -->
                     <div class="row" style="margin-top: 1.5rem;">
                        <div class="col-12 table-responsive">
                           <table class="table table-striped" id="" style="text-align: center;">
                              <thead>
                                 <tr>
                                    <th title="Referência da Requisição">Referência</th>
                                    <th title="Descrição">Movimento Tesoraria</th>
                                    <th title="Movimento Tesouraria">Classe Movimento</th>
                                    <th title="Aprovador">Responsável</th>
                                    <th title="Total">Total</th>
                                    <th title="Proprietário">Data Criação</th>
                                 </tr>
                              </thead>
                              <tbody id="corpoTabelaDetalhes">

                              </tbody>
                           </table>
                        </div>
                        <!-- /.col -->
                     </div>
                     <!-- /.row -->

                     <div class="row" style="display: none;">
                        <!-- accepted payments column -->
                        <div class="col-6">
                           <p class="lead">Modos de Pagamento:</p>
                           <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;" id="detalheModoPagamento">
                           </p>
                        </div>
                        <!-- /.col -->
                        <div class="col-6">
                           <p class="lead">Montante</p>

                           <div class="table-responsive">
                              <table class="table" id="detalheTabelaMontante">
                              </table>
                           </div>
                        </div>
                        <!-- /.col -->
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="modal-footer justify-content-between">
                     <button type="button" value="" class="btn btn-default" id="cancelar_req">Cancelar</button>
                     <button type="button" value="" class="btn btn-primary" id="aprovar_req">Confirmar</button>
                  </div>
               </div>
            </div>
            <!-- /.modal-content -->
         </div>
         <!-- /.modal-dialog -->
      </div>

      <!-- /.content-wrapper -->
      <?php include('footer.php'); ?>
</body>

<script src="../pos/javascript/function.js"></script>
<script src="template/plugins/toastr/toastr.min.js"></script>

</html>
<script>
   let definirProprietarioRubrica = -1;
   let storeMovimentoData = [];
   let addToObject = [];
   let AllUsers;
   let totalRequisicao = 0.00;




   $(document).ready(function() {
      // $(btn).click(function() {
      //    $('#modal-documento').modal('show');
      // });

   });
</script>
<script src="./validation/parametroArtigo.js"></script>