<?php
session_start();
date_default_timezone_set('Asia/Jakarta');
include 'koneksi.php';

if(isset($_SESSION['login']))       { header("Location: dashboard.php");       exit(); }
if(isset($_SESSION['siswa_login'])) { header("Location: dashboard_siswa.php"); exit(); }

$error     = '';
$activeTab = isset($_POST['tab']) ? $_POST['tab'] : (isset($_GET['tab']) ? $_GET['tab'] : 'admin');

if(isset($_POST['login_admin'])){
    $activeTab = $_POST['tab'] ?? 'admin';
    $username  = trim(mysqli_real_escape_string($conn, $_POST['username'] ?? ''));
    $password  = trim($_POST['password'] ?? '');
    if(empty($username)||empty($password)){ $error='Username dan password wajib diisi!'; }
    else{
        $q = mysqli_query($conn,"SELECT id,nama,username,role,foto,status FROM users WHERE username='".mysqli_real_escape_string($conn,$username)."' AND password='".md5($password)."' AND status='Aktif' LIMIT 1");
        if($q && mysqli_num_rows($q)===1){
            $u=mysqli_fetch_assoc($q);
            $_SESSION['login']=true; $_SESSION['user_id']=$u['id']; $_SESSION['nama']=$u['nama'];
            $_SESSION['username']=$u['username']; $_SESSION['role']=$u['role']; $_SESSION['foto']=$u['foto'];
            mysqli_query($conn,"UPDATE users SET last_login=NOW() WHERE id={$u['id']}");
            header("Location: dashboard.php"); exit();
        } else { $error='Username atau password salah, atau akun tidak aktif!'; }
    }
}

if(isset($_POST['login_siswa'])){
    $activeTab='siswa';
    $nis  = trim(mysqli_real_escape_string($conn, $_POST['nis']  ?? ''));
    $nisn = trim(mysqli_real_escape_string($conn, $_POST['nisn'] ?? ''));
    if(empty($nis)||empty($nisn)){ $error='NIS dan NISN wajib diisi!'; }
    else{
        $q = mysqli_query($conn,"SELECT id,nis,nisn,nama,kelas,jk,foto,status_siswa,email,no_telp,tempat_lahir,tanggal_lahir,agama,kewarganegaraan,alamat,kota,provinsi,tahun_masuk FROM siswa WHERE nis='$nis' AND nisn='$nisn' AND status_siswa='Aktif' LIMIT 1");
        if($q && mysqli_num_rows($q)===1){
            $s=mysqli_fetch_assoc($q);
            $_SESSION['siswa_login']=true; $_SESSION['siswa_id']=$s['id']; $_SESSION['siswa_nama']=$s['nama'];
            $_SESSION['siswa_nis']=$s['nis']; $_SESSION['siswa_nisn']=$s['nisn']; $_SESSION['siswa_kelas']=$s['kelas'];
            $_SESSION['siswa_jk']=$s['jk']; $_SESSION['siswa_foto']=$s['foto']; $_SESSION['siswa_data']=$s;
            header("Location: dashboard_siswa.php"); exit();
        } else { $error='NIS atau NISN salah, atau akun tidak aktif!'; }
    }
}
$isSiswa = ($activeTab==='siswa');
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Portal Akademik — MA As-Syafi'iyah 02</title>
<link rel="icon" href="assets/sekolah.png">
<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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Josefin+Sans:wght@300;400;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ══════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════ */
:root{
    --ink:     #0D1B2A;   /* deep midnight navy */
    --ink-m:   #162335;
    --ink-l:   #1E3050;
    --gold:    #C8A951;   /* antique gold */
    --gold-l:  #DFC06A;
    --gold-d:  #A8893A;
    --gold-fg: #F5E6B8;   /* light gold text */
    --parch:   #F8F2E3;   /* parchment */
    --parch-d: #EDE3CC;
    --parch-dk:#D4C49A;
    --warm:    #7A6545;
    --warm-l:  #A08860;
    --ecru:    #FAF7F0;
    --white:   #FFFFFF;
    --err:     #8B1A1A;
    --grn:     #1A5C35;
    --shadow:  rgba(13,27,42,.5);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}

body{
    font-family:'Josefin Sans',sans-serif;
    background:var(--ink);
    display:flex;min-height:100vh;
}

/* ══════════════════════════════════════════════
   LEFT PANEL
══════════════════════════════════════════════ */
.lp{
    flex:1;
    position:relative;
    overflow:hidden;
    display:flex;flex-direction:column;
    justify-content:center;align-items:center;
    padding:3.5rem;
    background:var(--ink);
}

/* ── SVG Art Deco Background ── */
.lp-canvas{
    position:absolute;inset:0;
    pointer-events:none;
    overflow:hidden;
}
.lp-canvas svg{
    position:absolute;inset:0;
    width:100%;height:100%;
}

/* ── Animated gradient pulse ── */
.lp::before{
    content:'';
    position:absolute;inset:0;
    background:radial-gradient(ellipse 80% 60% at 60% 40%, rgba(200,169,81,.07) 0%, transparent 70%);
    animation:pulse 8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

/* ── Left content ── */
.lp-body{
    position:relative;z-index:2;
    text-align:center;
    max-width:430px;
    animation:fadeUp .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Seal / Logo */
.seal-wrap{
    position:relative;
    width:128px;height:128px;
    margin:0 auto 2rem;
}
.seal-ring{
    position:absolute;inset:0;
    border-radius:50%;
    border:1px solid rgba(200,169,81,.3);
    animation:spinRing 30s linear infinite;
}
.seal-ring2{
    position:absolute;inset:10px;
    border-radius:50%;
    border:1px dashed rgba(200,169,81,.18);
    animation:spinRing 20s linear infinite reverse;
}
@keyframes spinRing{to{transform:rotate(360deg)}}
.seal{
    position:absolute;inset:16px;
    border-radius:50%;
    background:radial-gradient(circle at 38% 35%,var(--ink-l),var(--ink));
    border:2px solid var(--gold);
    box-shadow:
        0 0 0 4px rgba(200,169,81,.1),
        0 0 40px rgba(200,169,81,.15),
        0 16px 48px rgba(0,0,0,.6);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}
.seal img{
    width:56px;height:56px;
    object-fit:contain;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

/* Top rule */
.top-rule{
    display:flex;align-items:center;gap:.75rem;
    margin-bottom:1rem;
}
.rule-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-d))}
.rule-gem{
    width:6px;height:6px;
    background:var(--gold);
    transform:rotate(45deg);
    flex-shrink:0;
}

/* School name */
.lp-super{
    font-family:'Josefin Sans',sans-serif;
    font-size:.62rem;font-weight:700;
    letter-spacing:.3em;text-transform:uppercase;
    color:var(--gold-d);
    margin-bottom:.5rem;
}
.lp-name{
    font-family:'Cormorant Garamond',serif;
    font-size:2.75rem;font-weight:600;
    color:var(--white);
    line-height:1.15;
    letter-spacing:.01em;
    text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.lp-name em{
    color:var(--gold-l);
    font-style:italic;
    font-weight:400;
    display:block;
    font-size:3rem;
}
.lp-tagline{
    font-size:.72rem;font-weight:300;
    letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.38);
    margin-top:.625rem;
}

/* Bottom rule */
.bot-rule{
    display:flex;align-items:center;gap:.75rem;
    margin:1.5rem 0;
}
.bot-rule-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(200,169,81,.3),transparent)}
.bot-rule-fleur{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--gold-d);opacity:.7;flex-shrink:0}

/* Feature list */
.feat-list{display:flex;flex-direction:column;gap:.6rem;width:100%;text-align:left}
.feat{
    display:flex;align-items:center;gap:.875rem;
    padding:.8rem 1.1rem;
    border:1px solid rgba(200,169,81,.1);
    background:rgba(200,169,81,.04);
    transition:all .3s ease;
    position:relative;
}
.feat::before{
    content:'';
    position:absolute;left:0;top:0;bottom:0;
    width:2px;
    background:var(--gold-d);
    opacity:0;
    transition:opacity .3s;
}
.feat:hover{background:rgba(200,169,81,.09);border-color:rgba(200,169,81,.25)}
.feat:hover::before{opacity:1}
.feat-ico{
    width:34px;height:34px;flex-shrink:0;
    border:1px solid rgba(200,169,81,.25);
    display:flex;align-items:center;justify-content:center;
    font-size:.95rem;
    background:rgba(200,169,81,.06);
}
.feat-tx strong{
    font-family:'Josefin Sans',sans-serif;
    font-size:.775rem;font-weight:600;
    color:rgba(255,255,255,.82);
    display:block;letter-spacing:.04em;
}
.feat-tx span{
    font-size:.68rem;font-weight:300;
    color:rgba(255,255,255,.38);letter-spacing:.03em;
}

/* Footer year */
.lp-year{
    margin-top:1.75rem;
    font-size:.62rem;font-weight:300;
    letter-spacing:.22em;text-transform:uppercase;
    color:rgba(255,255,255,.22);
    display:flex;align-items:center;gap:.75rem;
}
.lp-year::before,.lp-year::after{
    content:'';flex:1;height:1px;
    background:rgba(255,255,255,.08);
}

/* ══════════════════════════════════════════════
   RIGHT PANEL
══════════════════════════════════════════════ */
.rp{
    width:500px;flex-shrink:0;
    background:var(--parch);
    display:flex;flex-direction:column;
    justify-content:center;align-items:center;
    padding:3rem 2.75rem;
    overflow-y:auto;
    position:relative;
    box-shadow:-12px 0 60px rgba(0,0,0,.4);
}

/* gold stripe top */
.rp::before{
    content:'';
    position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,var(--gold-d) 0%,var(--gold-l) 50%,var(--gold-d) 100%);
}

/* subtle paper lines */
.rp::after{
    content:'';
    position:absolute;inset:0;
    pointer-events:none;
    background-image:repeating-linear-gradient(
        0deg,transparent,transparent 31px,
        rgba(122,101,69,.04) 31px,rgba(122,101,69,.04) 32px
    );
}

.rp-inner{
    width:100%;max-width:370px;
    position:relative;z-index:1;
}

/* ── Header ── */
.rp-head{
    text-align:center;
    margin-bottom:1.75rem;
    animation:fadeUp .7s .1s cubic-bezier(.16,1,.3,1) both;
}
.rp-emblem{
    width:58px;height:58px;
    border-radius:50%;
    background:var(--ink);
    border:2px solid var(--gold-d);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto .875rem;
    box-shadow:0 4px 16px rgba(0,0,0,.2);
    overflow:hidden;
}
.rp-emblem img{width:40px;height:40px;object-fit:contain}
.rp-school-name{
    font-family:'Cormorant Garamond',serif;
    font-size:1.25rem;font-weight:600;
    color:var(--ink);letter-spacing:.02em;
    line-height:1.3;
}
.rp-school-sub{
    font-size:.62rem;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;
    color:var(--warm);margin-top:.2rem;
}

/* ── Ornament divider ── */
.orn{
    display:flex;align-items:center;gap:.6rem;
    margin:1.375rem 0;
}
.orn-l{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--parch-dk))}
.orn-r{flex:1;height:1px;background:linear-gradient(90deg,var(--parch-dk),transparent)}
.orn-c{
    font-family:'Cormorant Garamond',serif;
    font-size:.72rem;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;
    color:var(--warm-l);
    white-space:nowrap;
}

/* ── Role Tabs ── */
.role-tabs{
    display:grid;grid-template-columns:repeat(4,1fr);
    border:1.5px solid var(--parch-dk);
    overflow:hidden;
    margin-bottom:1.625rem;
    animation:fadeUp .7s .2s cubic-bezier(.16,1,.3,1) both;
}
.rtab{
    padding:.55rem .25rem .5rem;
    background:var(--parch-d);
    border:none;border-right:1.5px solid var(--parch-dk);
    font-family:'Josefin Sans',sans-serif;
    font-size:.58rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--warm-l);
    cursor:pointer;
    transition:all .2s;
    display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.rtab:last-child{border-right:none}
.rtab .rtico{font-size:1.125rem;line-height:1}
.rtab:hover:not(.act-s):not(.act-g){background:var(--parch);color:var(--ink)}

/* active staff/admin/guru */
.act-s{
    background:var(--ink) !important;
    color:var(--gold-fg) !important;
    position:relative;
}
.act-s::after{
    content:'';
    position:absolute;bottom:0;left:0;right:0;height:2px;
    background:var(--gold);
}
/* active siswa */
.act-g{
    background:var(--grn) !important;
    color:rgba(255,255,255,.9) !important;
    position:relative;
}
.act-g::after{
    content:'';
    position:absolute;bottom:0;left:0;right:0;height:2px;
    background:#4ADE80;
}

/* ── Form heading ── */
.fm-title{
    font-family:'Cormorant Garamond',serif;
    font-size:1.8rem;font-weight:600;
    color:var(--ink);
    letter-spacing:.01em;line-height:1.2;
    margin-bottom:.2rem;
    animation:fadeUp .6s .3s cubic-bezier(.16,1,.3,1) both;
}
.fm-sub{
    font-size:.68rem;font-weight:300;
    letter-spacing:.1em;color:var(--warm);
    margin-bottom:1.375rem;
    animation:fadeUp .6s .35s cubic-bezier(.16,1,.3,1) both;
}

/* ── Alert ── */
.alert{
    display:flex;align-items:flex-start;gap:.625rem;
    padding:.75rem .9rem;
    border-left:3px solid var(--err);
    background:rgba(139,26,26,.07);
    margin-bottom:1.125rem;
    animation:shake .4s ease;
}
.alert-icon{font-size:.9rem;flex-shrink:0;margin-top:.05rem}
.alert p{font-size:.78rem;font-weight:600;color:var(--err);letter-spacing:.02em;line-height:1.45}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-5px)}
    40%{transform:translateX(5px)}
    60%{transform:translateX(-3px)}
    80%{transform:translateX(3px)}
}

/* ── Fields ── */
.fg{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1rem}
.flbl{
    font-size:.6rem;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;
    color:var(--warm);
    display:flex;align-items:center;gap:.375rem;
}
.flbl-gem{
    width:4px;height:4px;
    background:var(--gold-d);
    transform:rotate(45deg);
    display:inline-block;
    flex-shrink:0;
}
.fi-wr{position:relative}
.fi{
    width:100%;
    padding:.8rem 2.5rem .8rem 2.5rem;
    background:var(--white);
    border:none;
    border-bottom:1.5px solid var(--parch-dk);
    border-left:2px solid transparent;
    font-family:'Josefin Sans',sans-serif;
    font-size:.875rem;font-weight:400;
    color:var(--ink);
    transition:all .22s;
    outline:none;
    letter-spacing:.03em;
}
.fi::placeholder{color:var(--parch-dk);font-weight:300;letter-spacing:.04em}
.fi:focus{
    background:var(--ecru);
    border-bottom-color:var(--ink);
    border-left-color:var(--gold);
    box-shadow:0 4px 16px rgba(13,27,42,.07);
}
.fi-pfx{
    position:absolute;left:.75rem;top:50%;
    transform:translateY(-50%);
    font-size:.875rem;color:var(--parch-dk);
    pointer-events:none;transition:color .2s;
}
.fi:focus ~ .fi-pfx,
.fi-wr:focus-within .fi-pfx{color:var(--gold-d)}
.fi-sfx{
    position:absolute;right:.75rem;top:50%;
    transform:translateY(-50%);
    background:none;border:none;
    font-size:.8rem;color:var(--warm-l);
    cursor:pointer;padding:.25rem;
    font-family:'Josefin Sans',sans-serif;
    transition:color .2s;
}
.fi-sfx:hover{color:var(--ink)}
.fi-hint{
    font-size:.65rem;font-weight:300;
    letter-spacing:.06em;color:var(--warm-l);
    padding-left:.25rem;
}

/* form panel anim */
.fpanel{display:none}
.fpanel.show{display:block;animation:fadeUp .35s ease-out}

/* ── Gold rule before button ── */
.gold-rule{
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold-d) 30%,var(--gold-l) 50%,var(--gold-d) 70%,transparent);
    margin:.875rem 0 .875rem;
    opacity:.5;
}

/* ── Submit Button ── */
.btn{
    width:100%;
    padding:.9rem 1.5rem;
    border:none;
    font-family:'Josefin Sans',sans-serif;
    font-size:.75rem;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:.875rem;
    transition:all .28s cubic-bezier(.34,1.56,.64,1);
    position:relative;overflow:hidden;
}
.btn::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 60%);
    pointer-events:none;
}
.btn-navy{
    background:var(--ink);
    color:var(--gold-l);
    box-shadow:0 6px 24px rgba(13,27,42,.35);
}
.btn-navy:hover{
    background:var(--ink-l);
    transform:translateY(-2px);
    box-shadow:0 10px 32px rgba(13,27,42,.45);
}
.btn-grn{
    background:var(--grn);
    color:rgba(255,255,255,.92);
    box-shadow:0 6px 24px rgba(26,92,53,.3);
}
.btn-grn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 32px rgba(26,92,53,.4);
}
.btn:active{transform:translateY(0)}
.btn-arrow{
    font-size:1.1rem;
    transition:transform .25s;
}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* ── Info box ── */
.ibox{
    margin-top:1rem;
    padding:.75rem .9rem;
    border:1px solid var(--parch-dk);
    background:rgba(212,196,154,.15);
    display:flex;gap:.625rem;
}
.ibox-dot{
    width:5px;height:5px;
    background:var(--gold-d);
    transform:rotate(45deg);
    flex-shrink:0;margin-top:.35rem;
}
.ibox p{
    font-size:.72rem;font-weight:300;
    color:var(--warm);letter-spacing:.03em;line-height:1.65;
}
.ibox p strong{font-weight:700;color:var(--ink)}

/* ── Footer ── */
.rp-foot{
    margin-top:1.5rem;
    padding-top:1.125rem;
    border-top:1px solid var(--parch-dk);
    text-align:center;
}
.rp-foot p{
    font-size:.62rem;font-weight:300;
    color:var(--warm-l);letter-spacing:.1em;
    line-height:1.8;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media(max-width:980px){.lp{display:none}.rp{width:100%;box-shadow:none;padding:2.5rem 1.75rem}}
@media(max-width:480px){.rp{padding:2rem 1.25rem}.rp-inner{max-width:100%}}
</style>
</head>
<body>

<!-- ══ LEFT PANEL ══════════════════════════════════════════ -->
<div class="lp" id="leftPanel">

    <!-- SVG Art Deco ornaments -->
    <div class="lp-canvas">
        <svg viewBox="0 0 800 800" preserveAspectRatio="xMidYMid slice">
            <defs>
                <radialGradient id="gfade" cx="60%" cy="40%" r="60%">
                    <stop offset="0%" stop-color="#C8A951" stop-opacity="0.08"/>
                    <stop offset="100%" stop-color="#C8A951" stop-opacity="0"/>
                </radialGradient>
            </defs>
            <!-- background glow -->
            <rect width="800" height="800" fill="url(#gfade)"/>
            <!-- concentric arcs top-right -->
            <circle cx="800" cy="0" r="320" fill="none" stroke="#C8A951" stroke-width="0.8" opacity="0.12"/>
            <circle cx="800" cy="0" r="240" fill="none" stroke="#C8A951" stroke-width="0.8" opacity="0.10"/>
            <circle cx="800" cy="0" r="160" fill="none" stroke="#C8A951" stroke-width="0.8" opacity="0.08"/>
            <circle cx="800" cy="0" r="90"  fill="none" stroke="#C8A951" stroke-width="1"   opacity="0.12"/>
            <!-- bottom-left arcs -->
            <circle cx="0" cy="800" r="260" fill="none" stroke="#C8A951" stroke-width="0.6" opacity="0.07"/>
            <circle cx="0" cy="800" r="180" fill="none" stroke="#C8A951" stroke-width="0.6" opacity="0.06"/>
            <!-- diagonal parallels -->
            <line x1="-100" y1="250"  x2="900" y2="0"   stroke="#C8A951" stroke-width="0.5" opacity="0.1"/>
            <line x1="-100" y1="420"  x2="900" y2="170"  stroke="#C8A951" stroke-width="0.5" opacity="0.08"/>
            <line x1="-100" y1="620"  x2="900" y2="370"  stroke="#C8A951" stroke-width="0.5" opacity="0.06"/>
            <!-- diamond center motif -->
            <rect x="300" y="300" width="200" height="200" fill="none"
                  stroke="#C8A951" stroke-width="0.7" opacity="0.06"
                  transform="rotate(45 400 400)"/>
            <rect x="330" y="330" width="140" height="140" fill="none"
                  stroke="#C8A951" stroke-width="0.5" opacity="0.05"
                  transform="rotate(45 400 400)"/>
            <!-- corner brackets -->
            <path d="M40,40 L40,90 M40,40 L90,40" stroke="#C8A951" stroke-width="1.2" opacity="0.22" fill="none"/>
            <path d="M760,40 L760,90 M760,40 L710,40" stroke="#C8A951" stroke-width="1.2" opacity="0.22" fill="none"/>
            <path d="M40,760 L40,710 M40,760 L90,760" stroke="#C8A951" stroke-width="1.2" opacity="0.22" fill="none"/>
            <path d="M760,760 L760,710 M760,760 L710,760" stroke="#C8A951" stroke-width="1.2" opacity="0.22" fill="none"/>
            <!-- small diamond accents -->
            <rect x="396" y="72"  width="8" height="8" fill="#C8A951" opacity="0.2" transform="rotate(45 400 76)"/>
            <rect x="396" y="718" width="8" height="8" fill="#C8A951" opacity="0.2" transform="rotate(45 400 722)"/>
        </svg>
    </div>

    <div class="lp-body">
        <!-- Animated seal -->
        <div class="seal-wrap">
            <div class="seal-ring"></div>
            <div class="seal-ring2"></div>
            <div class="seal">
                <img src="assets/sekolah.png" alt="Logo" onerror="this.parentNode.innerHTML='🏛'">
            </div>
        </div>

        <!-- Top rule -->
        <div class="top-rule">
            <div class="rule-line"></div>
            <div class="rule-gem"></div>
            <div class="rule-gem" style="width:10px;height:10px;background:var(--gold-l)"></div>
            <div class="rule-gem"></div>
            <div class="rule-line" style="background:linear-gradient(90deg,var(--gold-d),transparent)"></div>
        </div>

        <!-- Name -->
        <div class="lp-super">Madrasah Aliyah</div>
        <h1 class="lp-name">As-Syafi'iyah<em>02</em></h1>
        <p class="lp-tagline">Sistem Informasi Akademik Terpadu</p>

        <!-- Bottom ornament -->
        <div class="bot-rule">
            <div class="bot-rule-line"></div>
            <span class="bot-rule-fleur">✦</span>
            <span class="bot-rule-fleur">✦</span>
            <span class="bot-rule-fleur">✦</span>
            <div class="bot-rule-line"></div>
        </div>

        <!-- Feature list -->
        <div class="feat-list" id="lpFeats"></div>

        <div class="lp-year">Tahun Pelajaran <?=date('Y').'/'.(date('Y')+1)?></div>
    </div>
</div>

<!-- ══ RIGHT PANEL ═════════════════════════════════════════ -->
<div class="rp">
<div class="rp-inner">

    <!-- Header -->
    <div class="rp-head">
        <div class="rp-emblem">
            <img src="assets/sekolah.png" alt="" onerror="this.parentNode.innerHTML='🏛'">
        </div>
        <div class="rp-school-name">MA As-Syafi'iyah 02</div>
        <div class="rp-school-sub">Portal Akademik &nbsp;·&nbsp; Bekasi</div>
    </div>

    <!-- Ornament -->
    <div class="orn">
        <div class="orn-l"></div>
        <div class="orn-c">Silakan Masuk</div>
        <div class="orn-r"></div>
    </div>

    <!-- Role Tabs -->
    <div class="role-tabs">
        <button class="rtab" id="tab-admin" onclick="switchTab('admin')">
            <span class="rtico">🔐</span>Admin
        </button>
        <button class="rtab" id="tab-guru" onclick="switchTab('guru')">
            <span class="rtico">👨‍🏫</span>Guru
        </button>
        <button class="rtab" id="tab-staff" onclick="switchTab('staff')">
            <span class="rtico">👔</span>Staff
        </button>
        <button class="rtab" id="tab-siswa" onclick="switchTab('siswa')">
            <span class="rtico">🎒</span>Siswa
        </button>
    </div>

    <!-- Alert -->
    <?php if($error): ?>
    <div class="alert">
        <span class="alert-icon">◈</span>
        <p><?=htmlspecialchars($error)?></p>
    </div>
    <?php endif; ?>

    <!-- Form title -->
    <div class="fm-title" id="fmTitle">—</div>
    <div class="fm-sub"   id="fmSub">—</div>

    <!-- ── FORM: Admin / Guru / Staff ── -->
    <div class="fpanel" id="fpanel-admin">
    <form method="POST" action="login.php" autocomplete="off">
        <input type="hidden" name="tab" id="tabVal" value="admin">

        <div class="fg">
            <label class="flbl">
                <span class="flbl-gem"></span>Username
            </label>
            <div class="fi-wr">
                <span class="fi-pfx">◈</span>
                <input type="text" name="username" class="fi"
                    placeholder="Masukkan username"
                    value="<?=htmlspecialchars($_POST['username']??'')?>"
                    autocomplete="username" required>
            </div>
        </div>

        <div class="fg">
            <label class="flbl">
                <span class="flbl-gem"></span>Password
            </label>
            <div class="fi-wr">
                <span class="fi-pfx">◈</span>
                <input type="password" name="password" id="passA" class="fi"
                    placeholder="Masukkan password"
                    autocomplete="current-password" required>
                <button type="button" class="fi-sfx" onclick="tp('passA','eyeA')" id="eyeA">LIHAT</button>
            </div>
        </div>

        <div class="gold-rule"></div>
        <button type="submit" name="login_admin" class="btn btn-navy">
            <span id="btnTxt">Masuk ke Dashboard</span>
            <span class="btn-arrow">→</span>
        </button>
    </form>
    <div class="ibox">
        <div class="ibox-dot"></div>
        <p id="iboxTxt">Login menggunakan <strong>username & password</strong> yang diberikan oleh administrator sekolah.</p>
    </div>
    </div>

    <!-- ── FORM: Siswa ── -->
    <div class="fpanel" id="fpanel-siswa">
    <form method="POST" action="login.php" autocomplete="off">
        <input type="hidden" name="tab" value="siswa">

        <div class="fg">
            <label class="flbl">
                <span class="flbl-gem"></span>NIS — Nomor Induk Siswa
            </label>
            <div class="fi-wr">
                <span class="fi-pfx">◈</span>
                <input type="text" name="nis" class="fi"
                    placeholder="Contoh: 1111111111"
                    value="<?=htmlspecialchars($_POST['nis']??'')?>"
                    autocomplete="username" required>
            </div>
        </div>

        <div class="fg">
            <label class="flbl">
                <span class="flbl-gem"></span>NISN — Kata Sandi
            </label>
            <div class="fi-wr">
                <span class="fi-pfx">◈</span>
                <input type="password" name="nisn" id="passS" class="fi"
                    placeholder="Nomor Induk Siswa Nasional"
                    autocomplete="current-password" required>
                <button type="button" class="fi-sfx" onclick="tp('passS','eyeS')" id="eyeS">LIHAT</button>
            </div>
            <div class="fi-hint">NISN digunakan sebagai kata sandi · Hubungi TU jika lupa</div>
        </div>

        <div class="gold-rule"></div>
        <button type="submit" name="login_siswa" class="btn btn-grn">
            <span>Masuk ke Portal Siswa</span>
            <span class="btn-arrow">→</span>
        </button>
    </form>
    <div class="ibox">
        <div class="ibox-dot"></div>
        <p>Masuk menggunakan <strong>NIS</strong> sebagai identitas dan <strong>NISN</strong> sebagai kata sandi. Hubungi Tata Usaha jika mengalami kendala.</p>
    </div>
    </div>

    <div class="rp-foot">
        <p>
            &copy; <?=date('Y')?> &nbsp;MA As-Syafi'iyah 02 Bekasi<br>
            Sistem Informasi Akademik &nbsp;·&nbsp; Seluruh hak dilindungi
        </p>
    </div>

</div>
</div>

<script>
const tabs = {
    admin:{
        title:"Selamat Datang, Admin",
        sub:"Akses penuh manajemen & pengaturan sistem",
        cls:"act-s",
        feats:[
            ["⚙","Kelola Data Sekolah","Siswa, nilai, SPP & arsip surat"],
            ["📊","Dashboard Statistik","Laporan & analitik real-time"],
            ["👥","Manajemen Pengguna","Atur akses guru & staff TU"],
        ],
        ibox:"Login menggunakan <strong>username & password</strong> yang diberikan oleh administrator sekolah.",
        btnTxt:"Masuk ke Dashboard",
    },
    guru:{
        title:"Selamat Datang, Guru",
        sub:"Akses input nilai, absensi & data kelas",
        cls:"act-s",
        feats:[
            ["📝","Input Nilai Siswa","Tugas, UTS, UAS & nilai akhir"],
            ["✅","Kelola Absensi","Rekap kehadiran seluruh kelas"],
            ["📚","Data Mata Pelajaran","Lihat KKM & kurikulum"],
        ],
        ibox:"Login menggunakan <strong>username & password</strong> yang diberikan oleh administrator sekolah.",
        btnTxt:"Masuk ke Dashboard",
    },
    staff:{
        title:"Selamat Datang, Staff TU",
        sub:"Akses data siswa, SPP & surat menyurat",
        cls:"act-s",
        feats:[
            ["💳","Pembayaran SPP","Catat & verifikasi transaksi"],
            ["📬","Surat Menyurat","Arsip surat masuk & keluar"],
            ["👤","Data Siswa","Biodata & riwayat akademik"],
        ],
        ibox:"Login menggunakan <strong>username & password</strong> yang diberikan oleh administrator sekolah.",
        btnTxt:"Masuk ke Dashboard",
    },
    siswa:{
        title:"Selamat Datang, Siswa",
        sub:"Lihat nilai, absensi & status pembayaran SPP",
        cls:"act-g",
        feats:[
            ["📝","Nilai & Raport","Pantau perkembangan akademikmu"],
            ["✅","Rekap Kehadiran","Cek absensi setiap harinya"],
            ["💳","Status SPP","Riwayat & tagihan pembayaran"],
        ],
        ibox:null,
        btnTxt:"Masuk ke Portal Siswa",
    },
};

let cur = '<?= $isSiswa ? "siswa" : $activeTab ?>';

function switchTab(t){
    cur = t;
    const d = tabs[t];
    const isSiswa = (t==='siswa');

    document.getElementById('fmTitle').textContent = d.title;
    document.getElementById('fmSub').textContent   = d.sub;

    document.getElementById('fpanel-admin').classList.toggle('show',!isSiswa);
    document.getElementById('fpanel-siswa').classList.toggle('show', isSiswa);

    const tv = document.getElementById('tabVal');
    if(tv) tv.value = t;

    const bt = document.getElementById('btnTxt');
    if(bt) bt.textContent = d.btnTxt;

    const ib = document.getElementById('iboxTxt');
    if(ib) ib.innerHTML = d.ibox || '';

    // tab styling
    ['admin','guru','staff'].forEach(k=>{
        document.getElementById('tab-'+k).className =
            'rtab'+(t===k?' act-s':'');
    });
    document.getElementById('tab-siswa').className =
        'rtab'+(t==='siswa'?' act-g':'');

    // left panel feats
    document.getElementById('lpFeats').innerHTML = d.feats.map(([i,s,b])=>
        `<div class="feat">
            <div class="feat-ico">${i}</div>
            <div class="feat-tx">
                <strong>${s}</strong><span>${b}</span>
            </div>
        </div>`
    ).join('');
}

function tp(id, btnId){
    const el  = document.getElementById(id);
    const btn = document.getElementById(btnId);
    const vis = el.type==='password';
    el.type = vis?'text':'password';
    btn.textContent = vis?'SEMBUNYIKAN':'LIHAT';
}

// init
switchTab(cur);
</script>
</body>
</html>