<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><?php echo $title; ?></title>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <?php if (app_favicon_url() !== ''): ?>
  <link rel="icon" type="image/x-icon" href="<?php echo app_favicon_url(); ?>">
  <?php endif; ?>

  <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=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0/css/adminlte.min.css">
  <link rel="stylesheet" href="<?php echo base_url('assets/css/payroll-red.css'); ?>">
</head>
<body class="hold-transition login-page payroll-login-page">
<?php
  $login_error = $this->session->flashdata('login_error');
  $old_username = $this->session->flashdata('old_username');
?>

<div class="login-box">
  <div class="login-logo">
    <a href="<?php echo site_url('login'); ?>">
      <?php if (company_logo_url() !== ''): ?>
      <img src="<?php echo company_logo_url(); ?>" alt="Logo" style="max-height:60px;width:auto;display:block;margin:0 auto 8px;">
      <?php endif; ?>
      <?php echo strtoupper(app_name()); ?>
    </a>
    <p class="subtitle"><?php echo app_subtitle(); ?></p>
  </div>

  <div class="card">
    <div class="card-body login-card-body">
      <p class="login-box-msg">Silakan masuk untuk memulai penggajian</p>

      <?php if (!empty($login_error)): ?>
        <div class="alert alert-danger alert-login" role="alert">
          <i class="fa fa-exclamation-triangle mr-1"></i><?php echo html_escape($login_error); ?>
        </div>
      <?php endif; ?>

      <?php echo form_open('login', array('id' => 'form-login', 'novalidate' => 'novalidate')); ?>
        <div class="form-group mb-3">
          <label for="username" class="form-label">Username</label>
          <div class="login-input-wrap">
            <i class="fa fa-user left-icon"></i>
            <input id="username"
                   name="username"
                   type="text"
                   class="form-control <?php echo ($this->form_validation->error('username')) ? 'is-invalid' : ''; ?>"
                   placeholder="Masukkan username"
                   value="<?php echo html_escape((string) $old_username); ?>"
                   autocomplete="username"
                   required>
            <?php if ($this->form_validation->error('username')): ?>
              <div class="invalid-feedback"><?php echo $this->form_validation->error('username'); ?></div>
            <?php endif; ?>
          </div>
        </div>

        <div class="form-group mb-4">
          <label for="password" class="form-label">Password</label>
          <div class="login-input-wrap">
            <i class="fa fa-lock left-icon"></i>
            <input id="password"
                   name="password"
                   type="password"
                   class="form-control <?php echo ($this->form_validation->error('password')) ? 'is-invalid' : ''; ?>"
                   placeholder="Masukkan password"
                   autocomplete="current-password"
                   required>
            <span data-toggle-target="#password" class="fa fa-eye field-icon toggle-password" title="Tampilkan/sembunyikan password"></span>
            <?php if ($this->form_validation->error('password')): ?>
              <div class="invalid-feedback"><?php echo $this->form_validation->error('password'); ?></div>
            <?php endif; ?>
          </div>
        </div>

        <button type="submit" class="btn btn-danger btn-login btn-block">
          <i class="fa fa-sign-in mr-1"></i> MASUK
        </button>
      <?php echo form_close(); ?>

      <p class="demo-credential mt-3">
        <i class="fa fa-info-circle mr-1"></i>
        Demo: <strong>superadmin</strong> / <strong>Admin123!</strong>
      </p>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
  // Toggle password visibility
  $('.toggle-password').on('click', function () {
    $(this).toggleClass('fa-eye fa-eye-slash');
    var $input = $($(this).data('toggle-target'));
    $input.attr('type', $input.attr('type') === 'password' ? 'text' : 'password');
  });

  // Remove error state on typing
  $('#username, #password').on('input', function () {
    $(this).removeClass('is-invalid');
  });
});
</script>
</body>
</html>
