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

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

include 'koneksi.php';

$error = '';
$success = '';

if(isset($_POST['login'])){
    $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 {
        // Login pakai NIS + NISN sebagai password
        $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){
            $siswa = mysqli_fetch_assoc($q);
            $_SESSION['siswa_login']  = true;
            $_SESSION['siswa_id']     = $siswa['id'];
            $_SESSION['siswa_nama']   = $siswa['nama'];
            $_SESSION['siswa_nis']    = $siswa['nis'];
            $_SESSION['siswa_nisn']   = $siswa['nisn'];
            $_SESSION['siswa_kelas']  = $siswa['kelas'];
            $_SESSION['siswa_jk']     = $siswa['jk'];
            $_SESSION['siswa_foto']   = $siswa['foto'];
            $_SESSION['siswa_data']   = $siswa;
            header("Location: dashboard_siswa.php"); exit();
        } else {
            $error = 'NIS atau NISN salah, atau akun tidak aktif!';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>🎒 Portal Siswa — Login</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=Nunito:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
    --gr:#10B981;--gr-d:#059669;--gr-xd:#047857;
    --gr-lt:#D1FAE5;--gr-pl:#ECFDF5;
    --em:#34D399;--cy:#6EE7B7;
    --am:#F59E0B;--vi:#8B5CF6;--ro:#F43F5E;
    --bg:#F0FDF4;--sf:#FFF;
    --tx:#064E3B;--txm:#6EE7B7;--txd:#047857;
    --bd:#A7F3D0;--sh:rgba(16,185,129,.15);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'Nunito',sans-serif}
body{background:var(--bg);display:flex;min-height:100vh;overflow:hidden}

/* ── Left Panel ── */
.lp{flex:1;background:linear-gradient(160deg,#047857 0%,#10B981 45%,#34D399 80%,#6EE7B7 100%);
    position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:3rem;overflow:hidden}
.lp-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.o1{width:350px;height:350px;top:-80px;right:-60px;animation:spin1 18s linear infinite}
.o2{width:220px;height:220px;bottom:-40px;left:-60px;animation:spin1 12s linear infinite reverse}
.o3{width:130px;height:130px;top:45%;right:15%;animation:bob 5s ease-in-out infinite}
.o4{width:70px;height:70px;top:20%;left:20%;border-radius:24px;animation:bob 4s ease-in-out infinite .8s}
@keyframes spin1{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* floating emojis */
.fem{position:absolute;font-size:52px;opacity:.12;pointer-events:none}
.fe1{top:8%;left:8%;animation:fe1 20s ease-in-out infinite}
.fe2{top:60%;right:8%;font-size:68px;animation:fe2 15s ease-in-out infinite 2s}
.fe3{bottom:12%;left:12%;font-size:44px;animation:fe1 22s ease-in-out infinite 4s}
.fe4{top:28%;right:22%;font-size:56px;animation:fe2 18s ease-in-out infinite 1s}
@keyframes fe1{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(18px,-22px) rotate(8deg)}}
@keyframes fe2{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,16px) rotate(-6deg)}}

.lp-cont{position:relative;z-index:2;text-align:center;color:white;max-width:400px}
.school-logo{width:90px;height:90px;background:rgba(255,255,255,.22);backdrop-filter:blur(12px);
    border:3px solid rgba(255,255,255,.4);border-radius:28px;display:flex;align-items:center;
    justify-content:center;margin:0 auto 1.5rem;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.school-logo img{width:70px;height:70px;object-fit:contain}
.lp-tag{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.18);
    backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);border-radius:50px;
    padding:.375rem 1.125rem;font-size:.78rem;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;margin-bottom:1rem}
.lp-title{font-size:2.875rem;font-weight:900;line-height:1.05;letter-spacing:-.02em;margin-bottom:.75rem}
.lp-title span{background:linear-gradient(90deg,#FEF08A,#86EFAC);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lp-sub{font-size:1rem;color:rgba(255,255,255,.82);font-weight:600;line-height:1.5;margin-bottom:2rem}

/* info pills */
.info-pills{display:flex;flex-direction:column;gap:.75rem;width:100%}
.ip{display:flex;align-items:center;gap:.875rem;background:rgba(255,255,255,.14);
    backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);border-radius:16px;
    padding:.875rem 1.25rem;text-align:left}
.ip-ico{font-size:1.75rem;flex-shrink:0}
.ip-tx strong{font-size:.875rem;font-weight:800;color:white;display:block}
.ip-tx span{font-size:.72rem;color:rgba(255,255,255,.75);font-weight:600}

/* ── Right Panel (Form) ── */
.rp{width:480px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;
    align-items:center;padding:3rem;background:var(--sf);overflow-y:auto}
.form-wrap{width:100%;max-width:380px}
.form-logo{display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem}
.form-logo-ico{width:48px;height:48px;background:var(--gr-pl);border:2px solid var(--bd);
    border-radius:16px;display:flex;align-items:center;justify-content:center;
    overflow:hidden;flex-shrink:0}
.form-logo-ico img{width:38px;height:38px;object-fit:contain}
.form-logo-tx strong{font-size:1rem;font-weight:800;color:var(--tx);display:block}
.form-logo-tx span{font-size:.72rem;color:var(--txm);font-weight:700}

.form-title{font-size:1.875rem;font-weight:900;color:var(--tx);letter-spacing:-.02em;margin-bottom:.375rem}
.form-sub{font-size:.875rem;color:#6B7280;font-weight:600;margin-bottom:2rem}

/* Alert */
.alert{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-radius:14px;
    margin-bottom:1.5rem;font-size:.875rem;font-weight:700;animation:slideD .4s ease-out}
.aerr{background:#FEF2F2;color:#991B1B;border:2px solid #FCA5A5}
.aok{background:var(--gr-pl);color:var(--gr-xd);border:2px solid var(--bd)}
@keyframes slideD{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* Form */
.fg{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}
.flbl{font-size:.76rem;font-weight:800;color:var(--tx);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:.35rem}
.fi-wrap{position:relative}
.fi-ico{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1.1rem;pointer-events:none}
.fi{width:100%;padding:.875rem 1rem .875rem 2.875rem;background:var(--gr-pl);
    border:2px solid var(--bd);border-radius:14px;font-size:.938rem;
    font-family:'Nunito',sans-serif;font-weight:700;color:var(--tx);
    transition:all .22s;outline:none}
.fi:focus{border-color:var(--gr);background:white;box-shadow:0 0 0 4px rgba(16,185,129,.12);transform:translateY(-1px)}
.fi::placeholder{color:#9CA3AF;font-weight:600}
.fi-hint{font-size:.72rem;color:#9CA3AF;font-weight:600;margin-top:.25rem;padding-left:.25rem}
.fi-toggle{position:absolute;right:1rem;top:50%;transform:translateY(-50%);
    background:none;border:none;font-size:1.1rem;cursor:pointer;color:#9CA3AF;padding:.25rem}

/* Login button */
.btn-login{width:100%;padding:1.1rem;background:linear-gradient(135deg,var(--gr),var(--gr-d));
    color:white;border:none;border-radius:16px;font-size:1.063rem;font-weight:800;
    font-family:'Nunito',sans-serif;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 6px 20px rgba(16,185,129,.4);display:flex;align-items:center;
    justify-content:center;gap:.625rem;margin-top:.5rem}
.btn-login:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 10px 28px rgba(16,185,129,.5)}
.btn-login:active{transform:translateY(0) scale(.99)}

/* Footer note */
.ft-note{margin-top:2rem;text-align:center;font-size:.72rem;color:#9CA3AF;font-weight:600;line-height:1.6}
.ft-note strong{color:var(--txd)}

/* Responsive */
@media(max-width:900px){
    .lp{display:none}
    .rp{width:100%;padding:2rem 1.5rem}
}
</style>
</head>
<body>

<!-- ══ LEFT PANEL ══ -->
<div class="lp">
    <div class="lp-bg">
        <div class="orb o1"></div><div class="orb o2"></div>
        <div class="orb o3"></div><div class="orb o4"></div>
        <div class="fem fe1">🎒</div><div class="fem fe2">📚</div>
        <div class="fem fe3">✏️</div><div class="fem fe4">🏫</div>
    </div>
    <div class="lp-cont">
        <div class="school-logo">
            <img src="assets/sekolah.png" alt="Logo" onerror="this.parentNode.innerHTML='🏫'">
        </div>
        <div class="lp-tag">🎓 Portal Akademik Siswa</div>
        <h1 class="lp-title">Selamat<br><span>Datang!</span></h1>
        <p class="lp-sub">Akses informasi akademik, nilai,<br>absensi dan SPP kamu dengan mudah 📊</p>
        <div class="info-pills">
            <div class="ip">
                <div class="ip-ico">📝</div>
                <div class="ip-tx">
                    <strong>Lihat Nilai & Raport</strong>
                    <span>Pantau perkembangan akademikmu</span>
                </div>
            </div>
            <div class="ip">
                <div class="ip-ico">✅</div>
                <div class="ip-tx">
                    <strong>Rekap Absensi</strong>
                    <span>Cek kehadiran setiap harinya</span>
                </div>
            </div>
            <div class="ip">
                <div class="ip-ico">💳</div>
                <div class="ip-tx">
                    <strong>Status Pembayaran SPP</strong>
                    <span>Pantau tagihan & riwayat bayar</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ══ RIGHT PANEL (FORM) ══ -->
<div class="rp">
<div class="form-wrap">
    <!-- Logo -->
    <div class="form-logo">
        <div class="form-logo-ico">
            <img src="assets/sekolah.png" alt="Logo" onerror="this.parentNode.innerHTML='🏫'">
        </div>
        <div class="form-logo-tx">
            <strong>MA As-Syafi'iyah 02</strong>
            <span>Sistem Informasi Akademik</span>
        </div>
    </div>

    <h2 class="form-title">Login Siswa 🎒</h2>
    <p class="form-sub">Gunakan NIS & NISN kamu untuk masuk</p>

    <!-- Alerts -->
    <?php if($error): ?>
    <div class="alert aerr"><span style="font-size:1.25rem">❌</span><span><?=htmlspecialchars($error)?></span></div>
    <?php endif; ?>

    <!-- Form -->
    <form method="POST" action="login_siswa.php" autocomplete="off">
        <div class="fg">
            <label class="flbl">🪪 NIS <span style="color:var(--ro);font-size:.9em">*</span></label>
            <div class="fi-wrap">
                <span class="fi-ico">🔢</span>
                <input type="text" name="nis" class="fi" placeholder="Nomor Induk Siswa"
                    value="<?=htmlspecialchars($_POST['nis']??'')?>" 
                    autocomplete="username" required>
            </div>
            <div class="fi-hint">📌 Contoh: 1111111111</div>
        </div>

        <div class="fg">
            <label class="flbl">🔑 NISN <span style="color:var(--ro);font-size:.9em">*</span></label>
            <div class="fi-wrap">
                <span class="fi-ico">🔒</span>
                <input type="password" name="nisn" id="nisnInput" class="fi"
                    placeholder="Nomor Induk Siswa Nasional"
                    autocomplete="current-password" required>
                <button type="button" class="fi-toggle" onclick="toggleNisn()" id="nisnToggle" title="Tampilkan/Sembunyikan">👁️</button>
            </div>
            <div class="fi-hint">🔐 NISN digunakan sebagai kata sandi</div>
        </div>

        <button type="submit" name="login" class="btn-login">
            <span>🚀</span>
            <span>Masuk ke Portal Siswa</span>
        </button>
    </form>

    <div class="ft-note">
        Lupa NIS atau NISN? Hubungi <strong>Tata Usaha</strong> sekolah<br>
        untuk mendapatkan bantuan akses. 📞
    </div>
</div>
</div>

<script>
let nisnVisible = false;
function toggleNisn(){
    nisnVisible = !nisnVisible;
    const inp = document.getElementById('nisnInput');
    const btn = document.getElementById('nisnToggle');
    inp.type = nisnVisible ? 'text' : 'password';
    btn.textContent = nisnVisible ? '🙈' : '👁️';
}
</script>
</body>
</html>