<style>
  #loading-msg {
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #6e8cd7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease;
}

#loading-msg.show {
  visibility: visible;
  opacity: 1;
}

#loading-msg p {
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
}

#loading-bar {
  width: 0%;
  height: 10px;
  background-color: #fff;
}
</style>

<form action="index.php?ToDo=appverifica" name="News" method="post">
  <div class="BodyContainer">
    <h4>Seja Bem vindo ao Instalador Automático de Módulos ou Adicionais </h4>
      <div class="row">
        <div style="display: {{ERROR_hide|safe}};">
          <div class="alert alert-danger" role="alert" >
            <center><strong>Erro: {{ERROR|safe}} - Entre em contato com o suporte.</strong></center><br>
            
          </div>
        </div>
        <!-- <div id="OrdersStatus" style="display: block; ">{{Msg|safe}}</div> -->
        <div class="panel-body">
          <div class="form-group">
            <div class="col-md-12">
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-1 col-form-label">Serial:</label>
                <div class="col-sm-11">
                  <input type="text" class="form-control-plaintext" id="serial" name="serial" value="{{Serial|safe}}" required>
                  <i style="display: {{btn_atualiza|safe}};"class="fa fa-check" aria-hidden="true"></i>
                  <i style="display: {{btn_erro|safe}};"class="fa fa-thumbs-o-down" aria-hidden="true"></i>
                  <small class="form-text text-muted" style="display: {{btn_verifica|safe}};"><br>Informe o serial recebido em sua compra.</small>
                  <small class="form-text text-muted" style="display: {{btn_atualiza|safe}};"><br>Licença verificada com sucesso!</small>
                </div>
              </div>
              <div class="col-md-6">
                  <button style="display: {{btn_verifica|safe}};" type="submit" name="verificar" class="btn btn-default">Verificar Serial</button>
                  <div style="display: {{btn_atualiza|safe}};">
                    <div class="alert alert-success" role="alert" >
                      <br>
                      <center><strong> Produto</strong>: {{app_nome|safe}}</center>
                      <br>
                      <center><button type="submit" id="instalar" name="instalar" class="btn btn-primary btn-lg"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Iniciar instalação <i class="fa fa-hand-o-left" aria-hidden="true"></i></button></center><br>
                      <div id="loading-msg">
                        <div id="loading-bar"></div>
                      </div>
                      <script>
                        document.getElementById('instalar').addEventListener('click', function() {
                          this.textContent = 'Aguarde...'; 
                        });

                        const button = document.querySelector('#instalar');
                        const loadingMsg = document.querySelector('#loading-msg');
                        const loadingBar = document.querySelector('#loading-bar');

                        button.addEventListener('click', () => {
                          loadingMsg.classList.add('show');

                          let progress = 0;
                          const interval = setInterval(() => {
                            if (progress >= 100) {
                              clearInterval(interval);
                              loadingMsg.classList.remove('show');
                            } else {
                              progress++;
                              loadingBar.style.width = progress + '%';
                            }
                          }, 40);
                        });
                      </script>
                      
                       <center><strong>Atenção</strong>: se o produto não correnponde ao comprado, não inicie a instalação e entre em contato com o suporte.</center>
                    </div>
                  </div>
                  <div style="display: {{btn_erro|safe}};">
                    <div class="alert alert-danger" role="alert" >
                      <center><strong>{{Erro|safe}}</strong></center><br>
                      <center><button style="display: {{btn_novamente|safe}};" type="submit" id="status" onclick="status()" name="verificar" class="btn btn-default">Verificar novamente</button></center>
                      <br>
                      
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
