<?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">Novo Trabalhador</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">Banco de Horas</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>Nome Funcionário</th>
                                    <th>Horas Trabalhadas</th>
                                    <th>Horas Extras</th>
                                    <th>Faltas (em Horas)</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 Banco de Horas
                        </div>
                     </div>
                  </div>
               </div>
               <!-- /.card -->
            </div>
            <!-- /.container-fluid -->
         </section>


      </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>