<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="utf-8" />
  <title>Login - Plataforma de Gestão Magistral</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="Guilherme Bathist" name="author" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- App favicon -->
  <link rel="shortcut icon" href="../assets/images/logo-sm.png">

  <!-- App css -->
  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="../assets/css/icons.min.css" rel="stylesheet" type="text/css" />
  <link href="../assets/css/app.min.css" rel="stylesheet" type="text/css" />
  <link href="../assets/css/style.css" rel="stylesheet" type="text/css" />

  <!--Material Icon -->
  <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">

</head>


<body class="login-bg">
  <form id="form" method="post" onsubmit="return CamposNull()" action="login/banco.php">
    <div class="account-pages login mt-5 mb-5">
      <div class="container">
        <div class="row justify-content-center">

          <div class="col-md-8 col-lg-6 col-xl-5">

            <div class="card mt-5">

              <div class="card-body p-4">

                <div class="text-center mb-4">
                  <img src="../assets/images/logo-sm.png" alt="" class="w-25">
                  <h1><i class="mdi mdi-login-variant"></i> Login</h1>
                  <hr>
                </div>

                <form action="#">

                  <div class="form-group mb-3">
                    <label for="txtNome"><i class="mdi mdi-account"></i> Login</label>
                    <input class="form-control" type="text" id="txtNome" name="txtNome" required="" placeholder="Digite seu usuário">
                  </div>

                  <div class="form-group mb-3">
                    <label for="txtSenha"><i class="mdi mdi-key-variant"></i> Senha</label>
                    <input class="form-control" type="password" required="" name="txtSenha" id="txtSenha" placeholder="Digite sua senha">
                    <span class="btn-show-pass"> <i class="mdi mdi-eye show_password"></i> </span>
                  </div>

                  <div class="form-group mb-0 text-center">

                    <button class="btn btn-primary btn-block" type="submit">Entrar</button>
                  </div>

                </form>

              </div> <!-- end card-body -->
            </div>
            <!-- end card -->

          </div> <!-- end col -->
        </div>
        <!-- end row -->
      </div>
      <!-- end container -->
    </div>
    <!-- end page -->

    <!-- Vendor js -->
    <script src="../assets/js/vendor.min.js"></script>

    <!-- App js -->
    <script src="../assets/js/app.min.js"></script>


    <!-- Modal de sucesso -->
    <div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content bg-success">
          <div class="modal-body">
            <div class="row align-items-center">
              <div class="col-10">
                <h3 class="text-white">Login Efetuado com Sucesso!</h3>
              </div>
              <div class="col text-right">
                <i class="mdi mdi-close-circle text-white" data-bs-dismiss="modal" aria-label="Close" style="font-size: 2rem; cursor: pointer;"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal de erro -->
    <div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-md">
        <div class="modal-content bg-danger">
          <div class="modal-body">
            <div class="row align-items-center">
              <div class="col-10">
                <h3 class="text-white">
                  <?php
                  $status = $_GET['status'] ?? '';
                  $message = $_GET['message'] ?? '';
                  if ($message == '') {
                    $message = 'Usuário e/ou Senha inválidos';
                  }
                  if ($status === 'erro' && !empty($message)) {
                    echo htmlspecialchars(urldecode($message));
                  }
                  ?>
                </h3>
              </div>
              <div class="col text-right">
                <i class="mdi mdi-close-circle text-white" data-bs-dismiss="modal" aria-label="Close" style="font-size: 2rem; cursor: pointer;"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      function showModals() {
        const urlParams = new URLSearchParams(window.location.search);
        const status = urlParams.get('status');

        if (status === 'sucesso') {
          const successModal = new bootstrap.Modal(document.getElementById('successModal'));
          successModal.show();
          setTimeout(() => {
            successModal.hide();
          }, 5000);
        } else if (status === 'erro') {
          const errorModal = new bootstrap.Modal(document.getElementById('errorModal'));
          errorModal.show();
          setTimeout(() => {
            errorModal.hide();
          }, 5000);
        }
      }

      document.addEventListener('DOMContentLoaded', showModals);

      $(document).ready(function() {
        var showPass = 0;
        $('.btn-show-pass').on('click', function() {
          var passwordInput = $(this).prev('input');
          if (showPass == 0) {
            passwordInput.attr('type', 'text');
            $(this).find('i').removeClass('mdi-eye');
            $(this).find('i').addClass('mdi-eye-off');
            showPass = 1;
          } else {
            passwordInput.attr('type', 'password');
            $(this).find('i').addClass('mdi-eye');
            $(this).find('i').removeClass('mdi-eye-off');
            showPass = 0;
          }
        });
      });
    </script>

    <style>
      .form-group {
        position: relative;
      }

      .btn-show-pass {
        position: absolute;
        top: 74%;
        right: 10px;
        /* Ajuste este valor conforme necessário para alinhar o botão */
        transform: translateY(-50%);
        cursor: pointer;
      }

      .form-control {
        padding-right: 40px;
        /* Adicione espaço à direita para o botão */
      }
    </style>
</body>

</html>