<?php include 'get_profil.php'; ?>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><?php echo htmlspecialchars($profil['profil_nama']); ?></title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="assets/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="assets/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="assets/plugins/iCheck/square/blue.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
  <!-- SweetAlert2 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
  <style>
    /* Custom CSS untuk memperbesar SweetAlert */
    .swal2-popup {
      font-size: 1.6rem !important;
      padding: 2.5rem !important;
    }
    .swal2-title {
      font-size: 2.2rem !important;
      margin-bottom: 1.5rem !important;
    }
    .swal2-content {
      font-size: 1.6rem !important;
      line-height: 1.6 !important;
    }
    .swal2-confirm, .swal2-cancel {
      font-size: 1.4rem !important;
      padding: 0.8rem 2rem !important;
      border-radius: 0.5rem !important;
    }
    .swal2-icon {
      width: 6rem !important;
      height: 6rem !important;
      margin: 1.5rem auto 2rem !important;
    }
    .swal2-icon .swal2-icon-content {
      font-size: 4rem !important;
    }
    .swal2-close {
      font-size: 2rem !important;
      width: 2.5rem !important;
      height: 2.5rem !important;
    }
    
    /* Styling untuk logo di login-logo */
    .login-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
    }
    .login-logo img {
      max-width: 100px;
      max-height: 100px;
      width: auto;
      height: auto;
      object-fit: contain;
      margin-bottom: 12px;
      display: block;
    }
    .login-logo a {
      display: block;
      margin-top: 0;
      line-height: 1.4;
      text-decoration: none;
      font-size: 22px;
      text-align: center;
      word-wrap: break-word;
      max-width: 100%;
      padding: 0 10px;
    }
    .login-logo a:hover {
      text-decoration: none;
      color: #444;
    }
    .login-logo a b {
      font-weight: 400;
      letter-spacing: 0.5px;
    }
  </style>
</head>

<body class="hold-transition login-page">
  <div class="login-box">
    <div class="login-logo">
      <?php 
      $logo_path = '';
      if(!empty($profil['profil_logo']) && file_exists('gambar/logo/'.$profil['profil_logo'])){
        $logo_path = 'gambar/logo/'.$profil['profil_logo'];
      } else if(file_exists('LOGO.png')){
        $logo_path = 'LOGO.png';
      }
      
      if($logo_path){
        echo '<img src="'.$logo_path.'" alt="Logo">';
      }
      ?>
      <a href="#"><b><?php echo htmlspecialchars($profil['profil_nama']); ?></b></a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
      <p class="login-box-msg">Sign in to start your session</p>

      <form action="periksa_login.php" method="POST" id="loginForm">
        <div class="form-group has-feedback">
          <input type="text" class="form-control" placeholder="Username" name="username" required="required" autocomplete="off">
          <span class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" class="form-control" placeholder="Password" name="password" required="required" autocomplete="off">
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="checkbox icheck">
              <label>
                <input type="checkbox"> Remember Me
              </label>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-xs-4">
            <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
          </div>
          <!-- /.col -->
        </div>
      </form>

    </div>
    <!-- /.login-box-body -->
  </div>
  <!-- /.login-box -->

    <script src="assets/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="assets/plugins/iCheck/icheck.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
    $(function () {
      $('input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
      });
    });
    
    $(document).ready(function() {
      // SweetAlert untuk notifikasi dari URL parameter
      <?php
      if (isset($_GET['alert'])) {
        if ($_GET['alert'] == "gagal") {
          ?>
          Swal.fire({
            icon: 'error',
            title: 'Login Gagal!',
            text: 'Username atau Password yang Anda masukkan salah!',
            confirmButtonColor: '#d33',
            confirmButtonText: 'OK',
            timer: 4000,
            timerProgressBar: true
          });
          <?php
        } else if ($_GET['alert'] == "logout") {
          ?>
          Swal.fire({
            icon: 'success',
            title: 'Berhasil Logout!',
            text: 'Anda telah berhasil logout dari sistem.',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'OK',
            timer: 3000,
            timerProgressBar: true
          });
          <?php
        } else if ($_GET['alert'] == "belum_login") {
          ?>
          Swal.fire({
            icon: 'warning',
            title: 'Akses Ditolak!',
            text: 'Anda harus login terlebih dahulu untuk mengakses halaman tersebut.',
            confirmButtonColor: '#ffc107',
            confirmButtonText: 'OK',
            timer: 4000,
            timerProgressBar: true
          });
          <?php
        }
      }
      ?>

      // Loading indicator saat form submit
      $('#loginForm').on('submit', function() {
        Swal.fire({
          title: 'Memproses...',
          text: 'Mohon tunggu, sedang memverifikasi data login',
          allowOutsideClick: false,
          allowEscapeKey: false,
          showConfirmButton: false,
          didOpen: () => {
            Swal.showLoading();
          }
        });
      });
    });
    </script>

</body>

</html>