<?php
  session_start();
  include_once '../koneksi.php';
  if (isset($_SESSION['kode_staff'])) {
    echo '
      <script>
        window.location.replace("'.$alamat_staff.'anggota");
      </script>
    ';
  } else if (isset($_SESSION['id_staff'])) {
    echo '
      <script>
        window.location.replace("'.$alamat_staff.'verifikasi");
      </script>
    ';
  }
  if (isset($_POST['masuk'])) {
    $nama_pengguna_staff = $_POST['nama_pengguna_staff'];
    $kata_sandi_staff = $_POST['kata_sandi_staff'];
    if (preg_match('/^[a-zA-Z0-9\s]+$/', $nama_pengguna_staff)) {
      $cek_staff = mysqli_query($koneksi, "SELECT * FROM staff WHERE nama_pengguna_staff = '$nama_pengguna_staff'");
      if (mysqli_num_rows($cek_staff) == 1) {
        $data_cek_staff = mysqli_fetch_array($cek_staff);
        $id_cek_staff = $data_cek_staff['id_staff'];
        $nama_cek_staff = $data_cek_staff['nama_staff'];
        $kata_sandi_cek_staff = $data_cek_staff['kata_sandi_staff'];
        if (password_verify($kata_sandi_staff, $kata_sandi_cek_staff)) {
          $_SESSION['id_staff'] = $id_cek_staff;
          echo '
            <script>
              window.location.replace("'.$alamat_staff.'verifikasi");
            </script>
          ';
        } else {
          echo '
            <script>
              alert("Kata sandi salah, silahkan coba lagi!");
              window.location.replace("'.$alamat_staff.'masuk");
            </script>
          ';
        }
      } else {
        echo '
          <script>
            alert("Data staff tidak ditemukan, silahkan coba lagi!");
            window.location.replace("'.$alamat_staff.'keluar.php");
          </script>
        ';
      }
    } else {
      echo '
        <script>
          alert("Dilarang menggunakan spasi atau simbol!");
          window.location.replace("'.$alamat_staff.'masuk");
        </script>
      ';
    }
  }
?>
<!DOCTYPE html>
<html lang="en" class="light-style customizer-hide" dir="ltr" data-theme="theme-default" data-assets-path="assets/" data-template="vertical-menu-template">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Masuk | Panel Staff</title>
    <base href="<?php echo $alamat_staff; ?>">
    <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Icons -->
    <link rel="stylesheet" href="assets/vendor/fonts/materialdesignicons.css">
    <link rel="stylesheet" href="assets/vendor/fonts/fontawesome.css">
    <!-- Core CSS -->
    <link rel="stylesheet" href="assets/vendor/css/rtl/core.css" class="template-customizer-core-css">
    <link rel="stylesheet" href="assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <!-- Vendors CSS -->
    <link rel="stylesheet" href="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" href="assets/vendor/libs/node-waves/node-waves.css">
    <link rel="stylesheet" href="assets/vendor/libs/typeahead-js/typeahead.css">
    <!-- Vendor -->
    <link rel="stylesheet" href="assets/vendor/libs/formvalidation/dist/css/formValidation.min.css">
    <!-- Page CSS -->
    <!-- Page -->
    <link rel="stylesheet" href="assets/vendor/css/pages/page-auth.css">
    <!-- Helpers -->
    <script src="assets/vendor/js/helpers.js"></script>
    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
    <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
    <script src="assets/vendor/js/template-customizer.js"></script>
    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
    <script src="assets/js/config.js"></script>
  </head>
  <body>
    <!-- Content -->
    <div class="position-relative">
      <div class="authentication-wrapper authentication-basic container-p-y">
        <div class="authentication-inner py-4">
          <!-- Login -->
          <div class="card p-2">
            <!-- Logo -->
            <div class="app-brand justify-content-center mt-5">
              <a href="javascript:void(0);" class="app-brand-link gap-2">
                <span class="app-brand-logo demo">
                  <img src="assets/img/logo.png" alt="Logo">
                </span>
                <span class="app-brand-text demo text-heading fw-bold">Panel Staff</span>
              </a>
            </div>
            <!-- /Logo -->
            <div class="card-body mt-2">
              <h4 class="mb-2 fw-semibold"><?php echo ucapan(); ?></h4>
              <p class="mb-4">Silahkan konfirmasi Nama Pengguna dan Kata Sandi anda.</p>
              <form method="post" class="mb-3">
                <div class="form-floating form-floating-outline mb-3">
                  <input type="text" class="form-control" name="nama_pengguna_staff" autofocus required>
                  <label>Nama Pengguna</label>
                </div>
                <div class="mb-3">
                  <div class="form-password-toggle">
                    <div class="input-group input-group-merge">
                      <div class="form-floating form-floating-outline">
                        <input type="password" class="form-control" name="kata_sandi_staff" required>
                        <label>Kata Sandi</label>
                      </div>
                      <span class="input-group-text cursor-pointer">
                        <i class="mdi mdi-eye-off-outline"></i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="mb-3">
                  <button type="submit" name="masuk" class="btn btn-primary d-grid w-100">Masuk</button>
                </div>
              </form>
            </div>
          </div>
          <!-- /Login -->
          <img alt="mask" src="assets/img/illustrations/auth-basic-login-mask-light.png" class="authentication-image d-none d-lg-block" data-app-light-img="illustrations/auth-basic-login-mask-light.png" data-app-dark-img="illustrations/auth-basic-login-mask-dark.png">
        </div>
      </div>
    </div>
    <!-- / Content -->
    <!-- Core JS -->
    <!-- build:js assets/vendor/js/core.js -->
    <script src="assets/vendor/libs/jquery/jquery.js"></script>
    <script src="assets/vendor/libs/popper/popper.js"></script>
    <script src="assets/vendor/js/bootstrap.js"></script>
    <script src="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
    <script src="assets/vendor/libs/node-waves/node-waves.js"></script>
    <script src="assets/vendor/libs/hammer/hammer.js"></script>
    <script src="assets/vendor/libs/i18n/i18n.js"></script>
    <script src="assets/vendor/libs/typeahead-js/typeahead.js"></script>
    <script src="assets/vendor/js/menu.js"></script>
    <!-- endbuild -->
    <!-- Vendors JS -->
    <script src="assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js"></script>
    <script src="assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js"></script>
    <script src="assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js"></script>
    <!-- Main JS -->
    <script src="assets/js/main.js"></script>
    <!-- Page JS -->
    <script src="assets/js/pages-auth.js"></script>
  </body>
</html>
