<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hard API Manager</title> 
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="<%= url_base %>/css/toastr.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <link href="<%= url_base %>/css/styles.css" rel="stylesheet">
<link rel="icon" type="image/png" href="<%= url_base %>/img/favicon.png"/>	
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Hard API Manager</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse navbar-dark bg-dark" id="navbarNav">
        <ul class="navbar-nav ms-auto"style="text-align: center" >
          
          <li class="nav-item">
            <a class="nav-link" href="#">Sobre</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card">
          <div class="card-body">
			  <div class="mb-3" style="text-align: center">
            <img src="<%= url_base %>/img/logo_api.png" alt="Logo" width="125" heigt"125" class="img-fluid mb-4">
				  <p>Entre com seus dados de acesso:</p>
			  </div>
				  <div class="mb-3">
					 
            <form id="login-form">
              <div class="mb-3">
                <label for="username" class="form-label">Usuário</label>
                <input type="text" class="form-control" id="username" name="username" required>
              </div>
              <div class="mb-3">
                <label for="password" class="form-label">Senha</label>
                <input type="password"  class="form-control" id="password" name="password" required>
              </div>
              <button type="submit" style="width: 100%" class="btn btn-primary"><i class="fas fa-sign-in-alt"></i> Login</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
	</div>

<br>


  <!-- Footer -->
   <%- include('footer.ejs') %>  

  <!-- JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="<%= url_base %>/js/toastr.min.js"></script>
  <script>
    // Configuração do Toastr
    toastr.options = {
      "closeButton": true,
      "debug": false,
      "newestOnTop": true,
      "progressBar": true,
      "positionClass": "toast-top-right",
      "preventDuplicates": true,
      "onclick": null,
      "showDuration": "300",
      "hideDuration": "1000",
      "timeOut": "5000",
      "extendedTimeOut": "1000",
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "fadeIn",
      "hideMethod": "fadeOut"
    };

    // Adicionar evento de submissão ao formulário
    $('#login-form').submit(function(event) {
      event.preventDefault(); // Evitar o envio padrão do formulário
      
      // Obter dados do formulário
      const formData = $(this).serialize();
      
      // Enviar dados para o servidor via AJAX
      $.ajax({
        type: 'POST',
        url: '<%= url_base %>/manager/login',
        data: formData,
        success: function(response) {
          if (response.success) {
            // Se o login for bem-sucedido, exibir notificação de sucesso
            toastr.success(response.message);
            // Redirecionar para a página de dashboard após 1 segundo
            setTimeout(function() {
              window.location.href = '<%= url_base %>/manager/dashboard';
            }, 1000);
          } else {
            // Se o login falhar, exibir notificação de erro
            toastr.error(response.message);
          }
        },
        error: function() {
          // Se ocorrer um erro na requisição, exibir notificação de erro
          toastr.error('Erro ao enviar requisição de login. Por favor, tente novamente.');
        }
      });
    });

    // Exibir mensagem de erro se existir
    <% if (error && error.length > 0) { %>
      toastr.error('<%= error %>');
    <% } %>

    // Exibir mensagem de sucesso se existir
    <% if (success && success.length > 0) { %>
      toastr.success('<%= success %>');
    <% } %>		   
  </script>
</body>
</html>
