<?php
require 'config.php';
require 'includes/functions.php';
if (!empty($_SESSION['role']) && $_SESSION['role'] === 'mahasiswa') { header('Location: mahasiswa/dashboard.php'); exit; }
if (!empty($_SESSION['role']) && $_SESSION['role'] === 'admin') { header('Location: admin/dashboard.php'); exit; }
$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';
    if ($username === '' || $password === '') {
        $error = 'NIM/Username dan password wajib diisi.';
    } else {
        // Coba sebagai mahasiswa (login pakai NIM)
        $stmt = $pdo->prepare("SELECT * FROM mahasiswa WHERE nim = ?");
        $stmt->execute([$username]);
        $mhs = $stmt->fetch();
        if ($mhs && password_verify($password, $mhs['password'])) {
            $_SESSION['role'] = 'mahasiswa';
            $_SESSION['nim'] = $mhs['nim'];
            $_SESSION['nama'] = $mhs['nama'];
            header('Location: mahasiswa/dashboard.php');
            exit;
        }
        // Coba sebagai admin
        $stmt = $pdo->prepare("SELECT * FROM admin WHERE username = ?");
        $stmt->execute([$username]);
        $adm = $stmt->fetch();
        if ($adm && password_verify($password, $adm['password'])) {
            $_SESSION['role'] = 'admin';
            $_SESSION['admin_id'] = $adm['id'];
            $_SESSION['admin_nama'] = $adm['nama'];
            header('Location: admin/dashboard.php');
            exit;
        }
        $error = 'NIM/Username atau password salah.';
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Penilaian Mandiri KKM 2026</title>
<link rel="stylesheet" href="assets/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,600&display=swap" rel="stylesheet">
<style>
  :root{
    --navy-900:#0a1930;
    --navy-800:#0f2544;
    --navy-700:#16325c;
    --gold-500:#d4af37;
    --gold-300:#e9c767;
    --gold-100:#fbf1cf;
    --text-900:#0f172a;
    --text-600:#5b6478;
    --text-400:#94a1b8;
    --danger:#ffb4b0;
    --danger-bg:rgba(185,28,28,0.35);
  }
  *{box-sizing:border-box;}
  html,body{ height:100%; }
  body{
    margin:0;
    font-family:'Plus Jakarta Sans','Segoe UI',sans-serif;
    color:#fff;
    -webkit-font-smoothing:antialiased;
  }

  /* ===== FULL-BLEED BACKGROUND ===== */
  .bg-photo{
    position:fixed;
    inset:0;
    z-index:0;
    background-image:url('assets/img/banner-kkm.jpg');
    background-size:cover;
    background-position:center 30%;
    animation:zoomBg 22s ease-in-out infinite alternate;
  }
  @keyframes zoomBg{
    0%{ transform:scale(1); }
    100%{ transform:scale(1.06); }
  }
  .bg-photo::before{
    /* darken + navy tint for legibility, stronger on the left where text sits */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(100deg, rgba(8,17,34,0.90) 0%, rgba(8,17,34,0.66) 38%, rgba(8,17,34,0.34) 62%, rgba(8,17,34,0.58) 100%),
      linear-gradient(0deg, rgba(8,17,34,0.58) 0%, rgba(8,17,34,0.08) 30%, rgba(8,17,34,0.08) 70%, rgba(8,17,34,0.68) 100%);
  }
  .bg-photo::after{
    content:"";
    position:absolute; inset:0;
    box-shadow:inset 0 0 140px rgba(0,0,0,0.55);
    pointer-events:none;
  }

  .login-wrap{
    position:relative;
    z-index:1;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:48px 64px;
    flex-wrap:wrap;
  }

  /* ===== LEFT: BRAND TEXT OVER PHOTO ===== */
  .brand-side{
    max-width:520px;
    flex:1 1 420px;
    animation:fadeInUp .8s ease both;
  }
  @keyframes fadeInUp{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .brand-logos{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:34px;
  }
  .brand-logos img{
    height:56px; width:56px;
    object-fit:cover;
    border-radius:50%;
    background:#fff;
    padding:3px;
    box-shadow:0 8px 20px rgba(0,0,0,0.45), 0 0 0 1.5px rgba(212,175,55,0.55);
  }
  .brand-logos .divider{ width:1px; height:32px; background:rgba(255,255,255,0.3); }

  .brand-eyebrow{
    display:inline-block;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--gold-300);
    background:rgba(212,175,55,0.14);
    border:1px solid rgba(212,175,55,0.4);
    padding:6px 16px;
    border-radius:999px;
    margin-bottom:20px;
    backdrop-filter:blur(4px);
  }

  .brand-side h1{
    font-family:'Playfair Display', 'Plus Jakarta Sans', serif;
    font-style:italic;
    font-weight:700;
    font-size:44px;
    line-height:1.18;
    margin:0 0 16px;
    text-shadow:0 6px 24px rgba(0,0,0,0.5);
  }
  .brand-side h1 span{
    display:block;
    font-style:normal;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:800;
    font-size:15px;
    letter-spacing:0.4px;
    color:var(--gold-300);
    margin-top:10px;
  }

  .brand-side p.desc{
    font-size:14.5px;
    line-height:1.75;
    color:rgba(255,255,255,0.82);
    margin:0 0 32px;
    max-width:440px;
    text-shadow:0 2px 10px rgba(0,0,0,0.4);
  }

  .brand-stats{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  .brand-stats .stat{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.18);
    backdrop-filter:blur(8px);
    border-radius:14px;
    padding:14px 20px;
    min-width:110px;
    transition:transform .2s ease, background .2s ease;
  }
  .brand-stats .stat:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,0.14);
  }
  .brand-stats .stat .num{ font-size:22px; font-weight:800; color:var(--gold-300); line-height:1; }
  .brand-stats .stat .lbl{ font-size:11px; font-weight:600; color:rgba(255,255,255,0.7); margin-top:5px; }

  /* ===== RIGHT: GLASS LOGIN CARD ===== */
  .form-side{
    flex:0 1 400px;
    width:100%;
    max-width:400px;
    animation:fadeInUp .8s ease .1s both;
  }
  .login-box{
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(18px);
    border-radius:22px;
    padding:36px 32px;
    box-shadow:0 25px 60px -18px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.4) inset;
    color:var(--text-900);
  }
  .login-box .badge-top{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:700;
    color:var(--navy-800);
    background:var(--gold-100);
    padding:5px 12px;
    border-radius:999px;
    margin-bottom:14px;
  }
  .login-box h2{
    font-size:21px;
    font-weight:800;
    color:var(--navy-900);
    margin:0 0 6px;
  }
  .login-box p.sub{
    font-size:13px;
    color:var(--text-600);
    margin:0 0 24px;
    line-height:1.5;
  }

  .alert{
    border-radius:12px;
    padding:12px 16px;
    font-size:13.5px;
    font-weight:600;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:8px;
    background:#fde2e1;
    color:#b91c1c;
  }

  .field{ margin-bottom:18px; }
  .field label{
    display:block;
    font-size:12.5px;
    font-weight:700;
    color:var(--text-600);
    margin-bottom:6px;
  }
  .input-wrap{ position:relative; }
  .input-wrap input{
    width:100%;
    padding:13px 14px;
    font-size:14px;
    font-weight:600;
    color:var(--navy-900);
    border:1.5px solid #e2e6ee;
    border-radius:10px;
    background:#fbfcfe;
    font-family:inherit;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .input-wrap input#password{ padding-right:44px; }
  .input-wrap input:focus{
    outline:none;
    border-color:var(--gold-500);
    box-shadow:0 0 0 3px rgba(212,175,55,0.18);
    background:#fff;
  }
  .toggle-eye{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; padding:4px;
    color:var(--text-400); display:flex; align-items:center;
  }
  .toggle-eye:hover{ color:var(--navy-700); }
  .toggle-eye svg{ width:18px; height:18px; }

  .btn-block{
    width:100%;
    padding:14px;
    font-size:14.5px;
    font-weight:800;
    color:#0a1930;
    background:linear-gradient(120deg, var(--gold-300), var(--gold-500));
    border:none;
    border-radius:12px;
    cursor:pointer;
    box-shadow:0 8px 18px -6px rgba(212,175,55,0.5);
    transition:transform .15s ease, box-shadow .15s ease;
    font-family:inherit;
  }
  .btn-block:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -6px rgba(212,175,55,0.6); }
  .btn-block:active{ transform:translateY(0); }

  .hint-box{
    margin-top:20px;
    padding:11px 14px;
    background:var(--gold-100);
    border-radius:10px;
    font-size:11.5px;
    color:#8a6d1a;
    font-weight:600;
    text-align:center;
    line-height:1.5;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width:980px){
    .login-wrap{
      flex-direction:column;
      justify-content:center;
      align-items:stretch;
      padding:32px 22px;
      gap:28px;
    }
    .bg-photo{ background-position:center 22%; }
    .bg-photo::before{
      background:
        linear-gradient(180deg, rgba(8,17,34,0.75) 0%, rgba(8,17,34,0.4) 35%, rgba(8,17,34,0.55) 65%, rgba(8,17,34,0.9) 100%);
    }
    .brand-side{ max-width:none; text-align:center; }
    .brand-logos{ justify-content:center; margin-bottom:20px; }
    .brand-side h1{ font-size:30px; }
    .brand-side p.desc{ margin-left:auto; margin-right:auto; }
    .brand-stats{ justify-content:center; }
    .form-side{ max-width:420px; margin:0 auto; }
  }
  @media (max-width:460px){
    .login-box{ padding:28px 22px; border-radius:18px; }
    .brand-side h1{ font-size:25px; }
  }
</style>
</head>
<body>

<div class="bg-photo"></div>

<div class="login-wrap">

  <div class="brand-side">
    <div class="brand-logos">
      <img src="assets/img/logo-uniba.png" alt="Logo Universitas Bina Bangsa">
      <div class="divider"></div>
      <img src="assets/img/kelompok90.jpeg" alt="Logo Kelompok 90" class="kelompok">
    </div>

    <span class="brand-eyebrow">KKM Berdampak &middot; Juli&ndash;Agustus 2026</span>
    <h1>Kuliah Kerja Mahasiswa
      <span>UNIVERSITAS BINA BANGSA &middot; KELOMPOK 90</span>
    </h1>
    <p class="desc">
      Sistem Penilaian Mandiri untuk mahasiswa peserta KKM 2026, Posko Desa Cikande, Kecamatan Jayanti, Kabupaten Tangerang. Bersama membangun desa berdaya dan berkelanjutan.
    </p>

    <div class="brand-stats">
      <div class="stat">
        <div class="num">5</div>
        <div class="lbl">Aspek Penilaian</div>
      </div>
      <div class="stat">
        <div class="num">90</div>
        <div class="lbl">Kelompok</div>
      </div>
      <div class="stat">
        <div class="num">2026</div>
        <div class="lbl">Tahun Kegiatan</div>
      </div>
    </div>
  </div>

  <div class="form-side">
    <div class="login-box">
      <span class="badge-top">Portal Login</span>
      <h2>Selamat Datang</h2>
      <p class="sub">Masuk untuk mengisi penilaian mandiri rekan kelompok Anda.</p>

      <?php if ($error): ?>
        <div class="alert">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="9"></circle><line x1="12" y1="8" x2="12" y2="13"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
          <?= e($error) ?>
        </div>
      <?php endif; ?>

      <form method="POST">
        <div class="field">
          <label for="username">NIM (Mahasiswa) / Username Admin</label>
          <div class="input-wrap">
            <input type="text" id="username" name="username" required autofocus value="<?= e($_POST['username'] ?? '') ?>">
          </div>
        </div>
        <div class="field">
          <label for="password">Password</label>
          <div class="input-wrap">
            <input type="password" id="password" name="password" required>
            <button type="button" class="toggle-eye" data-target="password" aria-label="Tampilkan password">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"></path><circle cx="12" cy="12" r="3"></circle></svg>
            </button>
          </div>
        </div>
        <button type="submit" class="btn-block">Masuk</button>
      </form>

      <div class="hint-box">Password default mahasiswa = NIM masing-masing</div>
    </div>
  </div>

</div>

<script>
  document.querySelectorAll('.toggle-eye').forEach(btn => {
    btn.addEventListener('click', () => {
      const input = document.getElementById(btn.dataset.target);
      input.type = input.type === 'password' ? 'text' : 'password';
    });
  });
</script>

</body>
</html>
