<?php
session_start();
include "config.php";

if(isset($_POST['login'])){
    $username = trim($_POST['username']);
    $password = $_POST['password'];

    $stmt = $koneksi->prepare("SELECT id_user, username, password, role, full_name FROM users WHERE username=?");
    $stmt->bind_param("s",$username);
    $stmt->execute();
    $stmt->store_result();

    if($stmt->num_rows === 1){
        $stmt->bind_result($id_user, $uname, $passdb, $role, $full_name);
        $stmt->fetch();
        $user = [
            'id_user'   => $id_user,
            'username'  => $uname,
            'password'  => $passdb,
            'role'      => $role,
            'full_name' => $full_name
        ];

        if($password === $user['password']){
            $_SESSION['id_user']   = $user['id_user'];
            $_SESSION['username']  = $user['username'];
            $_SESSION['role']      = $user['role'];
            $_SESSION['full_name'] = $user['full_name'];

            if ($user['role'] === 'super_user') {
                header("Location: manage_users.php");
            } else {
                header("Location: dashboard.php");
            }
            exit;
        } else {
            $error = "Password salah!";
        }
    } else {
        $error = "Username tidak ditemukan!";
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sistema Arkivu | MSSI Login</title>
  <link rel="icon" type="image/png" href="favicon2.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">

  <style>
    /* ============================================================
       TOKENS
       ============================================================ */
    :root {
      --e9:  #021a13;
      --e8:  #052e1c;
      --e7:  #064e2e;
      --e6:  #0a6b3e;
      --e5:  #0f8a52;
      --e4:  #18a866;
      --e3:  #3ecf8e;
      --e2:  #a7f3cc;
      --e1:  #d1fae5;
      --e0:  #f0fdf7;
      --gold:#c9a84c;
      --gold-lt:#f0d98a;
      --ink: #0a1a10;
      --mist:#f5f9f6;
      --slate:#4a5a52;
      --border-light: rgba(62,207,142,.18);
      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body:    'Outfit', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--e9);
      font-family: var(--font-body);
      overflow: hidden;
      position: relative;
    }

    /* ── background ── */
    .bg-layer {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }
    .bg-mesh {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 20% 0%,   rgba(10,107,62,.55) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 100%,  rgba(15,138,82,.35) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 60% 40%,   rgba(62,207,142,.08) 0%, transparent 50%),
        linear-gradient(160deg, #021a13 0%, #030f09 60%, #010d07 100%);
    }
    /* subtle grid lines */
    .bg-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(62,207,142,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(62,207,142,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    /* decorative rings */
    .ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(62,207,142,.07);
    }
    .ring-1 { width:700px; height:700px; top:-200px; left:-200px; }
    .ring-2 { width:500px; height:500px; top:-100px; left:-100px; border-color: rgba(62,207,142,.05); }
    .ring-3 { width:900px; height:900px; bottom:-300px; right:-250px; border-color: rgba(62,207,142,.05); }
    /* floating particles */
    .particle {
      position: absolute;
      border-radius: 50%;
      background: var(--e3);
      opacity: .12;
      animation: drift linear infinite;
    }
    @keyframes drift {
      0%   { transform: translateY(0)   rotate(0deg); opacity:.12; }
      50%  { opacity:.22; }
      100% { transform: translateY(-80vh) rotate(360deg); opacity:0; }
    }
    .p1{width:4px;height:4px;  left:12%; bottom:0; animation-duration:18s; animation-delay:0s;}
    .p2{width:6px;height:6px;  left:27%; bottom:0; animation-duration:22s; animation-delay:3s;}
    .p3{width:3px;height:3px;  left:55%; bottom:0; animation-duration:16s; animation-delay:6s;}
    .p4{width:5px;height:5px;  left:72%; bottom:0; animation-duration:20s; animation-delay:1s;}
    .p5{width:4px;height:4px;  left:88%; bottom:0; animation-duration:25s; animation-delay:9s;}
    .p6{width:3px;height:3px;  left:40%; bottom:0; animation-duration:19s; animation-delay:5s;}

    /* ── card ── */
    .login-shell {
      position: relative;
      z-index: 10;
      width: 900px;
      max-width: 98vw;
      display: flex;
      border-radius: 24px;
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(62,207,142,.12),
        0 32px 80px rgba(0,0,0,.7),
        0 0 120px rgba(10,107,62,.2) inset;
      animation: cardIn .8s cubic-bezier(.22,.9,.36,1) both;
    }
    @keyframes cardIn {
      from { opacity:0; transform: translateY(28px) scale(.97); }
      to   { opacity:1; transform: translateY(0)    scale(1); }
    }

    /* ── LEFT PANEL ── */
    .panel-left {
      width: 42%;
      flex-shrink: 0;
      background:
        linear-gradient(160deg, rgba(6,78,46,.95) 0%, rgba(2,22,13,.98) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 44px 36px;
      position: relative;
      overflow: hidden;
    }
    .panel-left::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 260px; height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(62,207,142,.14) 0%, transparent 70%);
      pointer-events: none;
    }
    .panel-left::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -60px;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(62,207,142,.10) 0%, transparent 70%);
      pointer-events: none;
    }

    /* divider accent line */
    .accent-line {
      position: absolute;
      top: 0; right: 0;
      width: 1px; height: 100%;
      background: linear-gradient(to bottom,
        transparent 0%,
        rgba(62,207,142,.25) 25%,
        rgba(62,207,142,.4) 50%,
        rgba(62,207,142,.25) 75%,
        transparent 100%);
    }

    .logo-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      z-index: 1;
    }
    .logo-ring {
      width: 140px; height: 140px;
      border-radius: 50%;
      border: 1px solid rgba(62,207,142,.2);
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(6,78,46,.5);
      box-shadow: 0 0 40px rgba(62,207,142,.12), 0 0 0 8px rgba(62,207,142,.04);
    }
    .logo-ring img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
    }

    .brand-label {
      font-family: var(--font-display);
      color: var(--e3);
      font-size: 11px;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      font-weight: 500;
      opacity: .8;
    }

    /* ticker */
    .ticker-wrap {
      z-index: 1;
      width: 100%;
      overflow: hidden;
      background: rgba(62,207,142,.06);
      border: 1px solid rgba(62,207,142,.12);
      border-radius: 40px;
      padding: 8px 0;
    }
    .ticker-inner {
      display: flex;
      white-space: nowrap;
      animation: ticker 20s linear infinite;
      color: var(--e2);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: .5px;
    }
    .ticker-inner span { padding: 0 32px; }
    .ticker-dot {
      color: var(--e4);
      opacity: .6;
    }
    @keyframes ticker {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* institution footer */
    .inst-footer {
      z-index: 1;
      text-align: center;
    }
    .inst-name {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      color: var(--e2);
      letter-spacing: .6px;
      line-height: 1.55;
      margin-bottom: 6px;
    }
    .inst-sub {
      font-size: 10.5px;
      color: rgba(167,243,204,.45);
      letter-spacing: .4px;
      line-height: 1.6;
    }
    .inst-year {
      margin-top: 14px;
      font-size: 10px;
      color: rgba(167,243,204,.3);
      letter-spacing: 2px;
    }

    /* stats row */
    .stat-row {
      z-index: 1;
      display: flex;
      gap: 20px;
      width: 100%;
    }
    .stat-item {
      flex: 1;
      text-align: center;
      background: rgba(62,207,142,.06);
      border: 1px solid rgba(62,207,142,.1);
      border-radius: 10px;
      padding: 10px 8px;
    }
    .stat-num {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      color: var(--e3);
      line-height: 1;
    }
    .stat-lbl {
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(167,243,204,.45);
      margin-top: 4px;
    }

    /* ── RIGHT PANEL ── */
    .panel-right {
      flex: 1;
      background: #f8fdf9;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 52px 48px;
      position: relative;
    }
    /* subtle corner accent */
    .panel-right::before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 120px; height: 120px;
      background: radial-gradient(circle at top right, rgba(15,138,82,.06), transparent 70%);
    }

    .form-eyebrow {
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--e5);
      font-weight: 600;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .form-eyebrow::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, var(--e2), transparent);
    }

    .form-title {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.15;
      margin-bottom: 4px;
    }
    .form-subtitle {
      font-size: 13px;
      color: var(--slate);
      margin-bottom: 32px;
    }

    /* error alert */
    .alert-error {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fff1f0;
      border: 1px solid #fca5a5;
      border-left: 3px solid #dc2626;
      color: #991b1b;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 22px;
      animation: shakeIn .3s ease;
    }
    @keyframes shakeIn {
      0%,100%{transform:translateX(0)}
      25%{transform:translateX(-6px)}
      75%{transform:translateX(6px)}
    }

    /* field group */
    .field {
      margin-bottom: 18px;
    }
    .field label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--slate);
      margin-bottom: 7px;
    }
    .field-wrap {
      position: relative;
    }
    .field-wrap input {
      width: 100%;
      height: 48px;
      border: 1.5px solid #d4e8da;
      border-radius: 10px;
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--ink);
      background: #ffffff;
      padding: 0 44px 0 16px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .field-wrap input:focus {
      border-color: var(--e5);
      box-shadow: 0 0 0 3px rgba(15,138,82,.1);
    }
    .field-wrap input::placeholder { color: #b0bfb5; }
    .field-icon {
      position: absolute;
      right: 14px; top: 50%;
      transform: translateY(-50%);
      color: #a0b0a8;
      font-size: 13px;
      pointer-events: none;
      transition: color .2s;
    }
    .field-wrap input:focus ~ .field-icon { color: var(--e5); }

    /* toggle password */
    .toggle-pass {
      position: absolute;
      right: 14px; top: 50%;
      transform: translateY(-50%);
      color: #a0b0a8;
      font-size: 13px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      transition: color .2s;
    }
    .toggle-pass:hover { color: var(--e5); }

    /* btn login */
    .btn-login {
      width: 100%;
      height: 50px;
      background: linear-gradient(135deg, var(--e7) 0%, var(--e5) 100%);
      border: none;
      border-radius: 10px;
      color: #fff;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      box-shadow: 0 6px 20px rgba(10,107,62,.28);
      transition: all .25s ease;
      margin-bottom: 12px;
      position: relative;
      overflow: hidden;
    }
    .btn-login::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
    }
    .btn-login:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(10,107,62,.38);
    }
    .btn-login:active { transform: translateY(0); }

    /* btn secondary */
    .btn-back {
      width: 100%;
      height: 44px;
      background: transparent;
      border: 1.5px solid #d4e8da;
      border-radius: 10px;
      color: var(--slate);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      transition: all .2s ease;
    }
    .btn-back:hover {
      background: var(--e0);
      border-color: var(--e3);
      color: var(--e7);
      text-decoration: none;
    }

    /* secure badge */
    .secure-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 22px;
      font-size: 10.5px;
      color: #a0b0a8;
      letter-spacing: .4px;
    }
    .secure-badge i { color: var(--e4); font-size: 11px; }
    .secure-dot { width:3px; height:3px; border-radius:50%; background:#c0d4c8; }

    /* ── RESPONSIVE ── */
    @media (max-width: 700px) {
      .login-shell { flex-direction: column; width: 98vw; border-radius: 18px; }
      .panel-left {
        width: 100%;
        padding: 32px 24px 28px;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
      }
      .stat-row, .ticker-wrap { display: none; }
      .accent-line { display: none; }
      .panel-right { padding: 36px 24px; }
      .form-title { font-size: 26px; }
    }
  </style>
</head>
<body>

<!-- Background -->
<div class="bg-layer">
  <div class="bg-mesh"></div>
  <div class="bg-grid"></div>
  <div class="ring ring-1"></div>
  <div class="ring ring-2"></div>
  <div class="ring ring-3"></div>
  <div class="particle p1"></div>
  <div class="particle p2"></div>
  <div class="particle p3"></div>
  <div class="particle p4"></div>
  <div class="particle p5"></div>
  <div class="particle p6"></div>
</div>

<!-- Card -->
<div class="login-shell">

  <!-- LEFT -->
  <div class="panel-left">
    <div class="accent-line"></div>

    <div class="logo-wrap">
      <div class="logo-ring">
        <img src="mssi_logo.png" alt="MSSI Logo" onerror="this.style.display='none'">
      </div>
      <div class="brand-label">MSSI · Sistema Arkivu</div>
    </div>

    <!-- <div class="stat-row">
      <div class="stat-item">
        <div class="stat-num">24/7</div>
        <div class="stat-lbl">Aksisu</div>
      </div>
      <div class="stat-item">
        <div class="stat-num">256</div>
        <div class="stat-lbl">Bit Seguru</div>
      </div>
      <div class="stat-item">
        <div class="stat-num">2026</div>
        <div class="stat-lbl">Versaun</div>
      </div>
    </div> -->

    <div class="ticker-wrap">
      <div class="ticker-inner" id="ticker">
        <span>Sistema Arkivu Dokumentos Pagamento</span>
        <span class="ticker-dot">◆</span>
        <span>Direccao Geral Dos Servicos Corporativos</span>
        <span class="ticker-dot">◆</span>
        <span>Direccao de Planeamento Finansas e Orsamento</span>
        <span class="ticker-dot">◆</span>
        <span>Ministériu Solidariedade Sosiál no Inkluzaun</span>
        <span class="ticker-dot">◆</span>
        <!-- duplicate for seamless loop -->
        <span>Sistema Arkivu Dokumentos Pagamento</span>
        <span class="ticker-dot">◆</span>
        <span>Direccao Geral Dos Servicos Corporativos</span>
        <span class="ticker-dot">◆</span>
        <span>Direccao de Planeamento Finansas e Orsamento</span>
        <span class="ticker-dot">◆</span>
        <span>Ministériu Solidariedade Sosiál no Inkluzaun</span>
        <span class="ticker-dot">◆</span>
      </div>
    </div>

    <div class="inst-footer">
      <div class="inst-name">
        DIRECCAO GERAL DOS<br>SERVICOS CORPORATIVOS
      </div>
      <div class="inst-sub">
        MINISTÉRIO DA SOLIDARIEDADE<br>SOCIAL E INCLUSÃO
      </div>
      <div class="inst-year">© 2026</div>
    </div>
  </div>

  <!-- RIGHT -->
  <div class="panel-right">

    <div class="form-eyebrow">MSSI Sistema Finansas</div>
    <div class="form-title">Por favór Login</div>
    <div class="form-subtitle">Tama ho sertifikasaun ofisiál ita nian</div>

    <?php if(isset($error)): ?>
    <div class="alert-error">
      <i class="fas fa-exclamation-circle"></i>
      <?= htmlspecialchars($error) ?>
    </div>
    <?php endif; ?>

    <form method="POST" autocomplete="off">

      <div class="field">
        <label>Username</label>
        <div class="field-wrap">
          <input type="text" name="username"
                 placeholder="Tama ita nia username"
                 required autofocus
                 value="<?= isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>">
          <i class="fas fa-user field-icon"></i>
        </div>
      </div>

      <div class="field">
        <label>Password</label>
        <div class="field-wrap">
          <input type="password" name="password" id="passInput"
                 placeholder="Tama ita nia password"
                 required>
          <button type="button" class="toggle-pass" onclick="togglePass()" id="eyeBtn">
            <i class="fas fa-eye-slash" id="eyeIcon"></i>
          </button>
        </div>
      </div>

      <button type="submit" name="login" class="btn-login">
        <i class="fas fa-sign-in-alt"></i> Tama Sistema
      </button>

      <a href="http://localhost/home/" class="btn-back">
        <i class="fas fa-arrow-left"></i> Fila Ba Home
      </a>

    </form>

    <div class="secure-badge">
      <i class="fas fa-shield-alt"></i>
      Konexaun Seguru
      <span class="secure-dot"></span>
      Enkriptadu SSL
      <span class="secure-dot"></span>
      Privadu
    </div>

  </div>
</div>

<script>
  function togglePass() {
    const input   = document.getElementById('passInput');
    const icon    = document.getElementById('eyeIcon');
    const visible = input.type === 'text';
    input.type = visible ? 'password' : 'text';
    icon.classList.toggle('fa-eye',      visible);
    icon.classList.toggle('fa-eye-slash', !visible);
  }
</script>
</body>
</html>
