<?php
session_start();
date_default_timezone_set('Asia/Jakarta');
if(!isset($_SESSION['login'])){ header("Location: login.php"); exit(); }
if($_SESSION['role']==='admin'){ header("Location: dashboard.php"); exit(); }
if($_SESSION['role']==='guru'){  header("Location: dashboard_guru.php"); exit(); }
include 'koneksi.php';

$user_nama = $_SESSION['nama'] ?? 'Staff';
$user_role = $_SESSION['role'] ?? 'staff';
$hour=(int)date('H');
$hari_arr=['','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu','Minggu'];
$bulan_arr=['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];

if($hour>=5&&$hour<11)     { $salam='Selamat Pagi';  $time_period='Morning'; }
elseif($hour>=11&&$hour<15){ $salam='Selamat Siang'; $time_period='Afternoon'; }
elseif($hour>=15&&$hour<18){ $salam='Selamat Sore';  $time_period='Evening'; }
else                        { $salam='Selamat Malam'; $time_period='Night'; }

$total_siswa   = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM siswa WHERE status_siswa='Aktif'"))['c'];
$total_surat   = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM surat"))['c'];
$surat_masuk   = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM surat WHERE jenis='Masuk'"))['c'];
$surat_keluar  = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM surat WHERE jenis='Keluar'"))['c'];

$bln=date('Y-m');
$bulan_nama=$bulan_arr[(int)date('m')];

$spp_bln=mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c, SUM(nominal) total FROM spp WHERE bulan='$bulan_nama' AND tahun=YEAR(NOW())"));
$spp_bln_count = (int)($spp_bln['c']??0);
$spp_bln_total = (int)($spp_bln['total']??0);

$spp_lunas  = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM spp WHERE status LIKE '%Lunas%' AND bulan='$bulan_nama' AND tahun=YEAR(NOW())"))['c'];
$spp_belum  = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM spp WHERE status='Belum Lunas' AND bulan='$bulan_nama' AND tahun=YEAR(NOW())"))['c'];
$spp_persen = ($spp_bln_count>0)?round($spp_lunas/$spp_bln_count*100):0;

$spp_recent=[];
$qsp=mysqli_query($conn,"SELECT sp.id,sp.bulan,sp.tahun,sp.nominal,sp.status,si.nama,si.kelas FROM spp sp JOIN siswa si ON sp.siswa_id=si.id ORDER BY sp.created_at DESC LIMIT 8");
if($qsp) while($r=mysqli_fetch_assoc($qsp)) $spp_recent[]=$r;

$siswa_all = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM siswa"))['c'];
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>👔 Dashboard Staff — <?=htmlspecialchars($user_nama)?></title>
<link rel="icon" href="assets/sekolah.png">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<style>
:root{--navy:#1a2b4a;--navy-deep:#0f1829;--burgundy:#8b4049;--burgundy-deep:#6b3039;--amber:#d97706;--amber-light:#fbbf24;--amber-pale:#fef3c7;--emerald:#047857;--azure:#1e40af;--cream:#faf8f3;--bg:#fffbeb;--surface:#fff;--border:#fde68a;--border-dark:#fcd34d;--text:#451a03;--text-muted:#78716c;--shadow:rgba(217,119,6,0.08)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;display:flex}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(90deg,transparent 79px,var(--border) 79px,var(--border) 81px,transparent 81px),linear-gradient(transparent 79px,var(--border) 79px,var(--border) 81px,transparent 81px);background-size:80px 80px;opacity:.15;pointer-events:none;z-index:0}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;background:linear-gradient(180deg,var(--navy-deep) 0%,var(--navy) 100%);border-right:1px solid rgba(217,119,6,.2);z-index:100;display:flex;flex-direction:column;overflow-y:auto;box-shadow:4px 0 24px rgba(0,0,0,.1)}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
.sidebar::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--amber),var(--amber-light));border-radius:10px}
.sidebar-header{padding:2rem 1.5rem;border-bottom:1px solid rgba(217,119,6,.2);text-align:center}
.sidebar-logo{width:64px;height:64px;background:linear-gradient(135deg,var(--amber),var(--amber-light));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1rem;box-shadow:0 0 0 4px var(--navy-deep),0 0 0 6px var(--amber),0 8px 16px rgba(0,0,0,.2)}
.sidebar-logo img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.sidebar-title{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:700;color:var(--cream);margin-bottom:.25rem}
.sidebar-subtitle{font-size:.75rem;color:rgba(250,248,243,.6);text-transform:uppercase;letter-spacing:.1em}
.sidebar-nav{flex:1;padding:1.5rem 0}
.nav-section{margin-bottom:2rem}
.nav-section-title{font-size:.7rem;font-weight:700;color:rgba(250,248,243,.5);text-transform:uppercase;letter-spacing:.1em;padding:0 1.5rem;margin-bottom:.75rem}
.nav-item{display:flex;align-items:center;gap:1rem;padding:.875rem 1.5rem;color:rgba(250,248,243,.8);text-decoration:none;transition:all .3s ease;position:relative;font-size:.9rem;font-weight:500}
.nav-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--amber);transition:height .3s ease}
.nav-item:hover,.nav-item.active{background:rgba(217,119,6,.1);color:var(--amber-light)}
.nav-item:hover::before,.nav-item.active::before{height:100%}
.nav-item-icon{width:36px;height:36px;background:rgba(255,255,255,.05);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;transition:all .3s ease}
.nav-item:hover .nav-item-icon{background:rgba(217,119,6,.2);transform:scale(1.1)}
.nav-item-text{flex:1}
.sidebar-footer{padding:1.5rem;border-top:1px solid rgba(217,119,6,.2)}
.sidebar-user{display:flex;align-items:center;gap:1rem;padding:1rem;background:rgba(255,255,255,.05);border-radius:12px;margin-bottom:1rem}
.sidebar-user-avatar{width:48px;height:48px;background:linear-gradient(135deg,var(--amber),var(--amber-light));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;overflow:hidden}
.sidebar-user-avatar img{width:48px;height:48px;object-fit:cover}
.sidebar-user-info h4{font-size:.9rem;font-weight:600;color:var(--cream);margin-bottom:.125rem}
.sidebar-user-info p{font-size:.75rem;color:rgba(250,248,243,.6)}
.sidebar-logout{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.875rem;background:linear-gradient(135deg,var(--burgundy-deep),var(--burgundy));color:var(--cream);border:none;border-radius:8px;font-size:.85rem;font-weight:600;font-family:'Inter',sans-serif;text-decoration:none;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.05em}
.sidebar-logout:hover{background:linear-gradient(135deg,var(--burgundy),var(--burgundy-deep));transform:translateY(-2px);box-shadow:0 4px 12px rgba(139,64,73,.3)}

.main-content{margin-left:280px;flex:1;min-height:100vh}
.container{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:2.5rem 2rem}

.masthead{background:linear-gradient(135deg,#92400e 0%,#b45309 30%,var(--amber) 60%,var(--amber-light) 100%);border-radius:20px;margin-bottom:2.5rem;padding:2.5rem 3rem;position:relative;overflow:hidden;box-shadow:0 12px 40px rgba(217,119,6,.35);animation:fadeInUp .6s ease-out}
.masthead::before,.masthead::after{content:'';position:absolute;left:3rem;right:3rem;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3) 20%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.3) 80%,transparent)}
.masthead::before{top:1.5rem}
.masthead::after{bottom:1.5rem}
.masthead-content{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center}
.masthead-avatar{width:100px;height:100px;border-radius:24px;background:rgba(255,255,255,.15);border:3px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:3rem;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.masthead-avatar img{width:100%;height:100%;object-fit:cover;border-radius:21px}
.masthead-info{flex:1}
.masthead-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem 1rem;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:50px;font-size:.75rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem}
.masthead-title{font-family:'Playfair Display',serif;font-size:2.25rem;font-weight:800;color:#fff;line-height:1.2;margin-bottom:.5rem}
.masthead-subtitle{font-family:'Crimson Text',serif;font-size:1.125rem;color:rgba(255,255,255,.85);font-style:italic;margin-bottom:1rem}
.masthead-meta{display:flex;align-items:center;gap:1.5rem;font-size:.875rem;color:rgba(255,255,255,.75);font-weight:500}
.masthead-meta-item{display:flex;align-items:center;gap:.5rem}
.masthead-stats{display:flex;gap:1rem}
.stat-badge{background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:1rem 1.5rem;text-align:center;min-width:90px}
.stat-badge-value{font-family:'Playfair Display',serif;font-size:1.875rem;font-weight:700;color:#fff;line-height:1}
.stat-badge-label{font-size:.7rem;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}

.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:2.5rem}
.action-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.75rem 1.5rem;text-decoration:none;color:var(--text);text-align:center;position:relative;overflow:hidden;transition:all .3s ease;box-shadow:0 2px 12px var(--shadow);animation:fadeInUp .6s ease-out backwards}
.action-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transition:height .3s ease}
.action-card:nth-child(1){animation-delay:.1s}
.action-card:nth-child(2){animation-delay:.15s}
.action-card:nth-child(3){animation-delay:.2s}
.action-card:nth-child(4){animation-delay:.25s}
.action-card:nth-child(1)::before{background:linear-gradient(90deg,var(--amber),var(--amber-light))}
.action-card:nth-child(2)::before{background:linear-gradient(90deg,var(--emerald),#059669)}
.action-card:nth-child(3)::before{background:linear-gradient(90deg,var(--azure),#60a5fa)}
.action-card:nth-child(4)::before{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.action-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(217,119,6,.12);border-color:var(--border-dark)}
.action-card:hover::before{height:5px}
.action-icon{width:64px;height:64px;background:var(--amber-pale);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1rem;border:2px solid var(--border);transition:all .3s ease}
.action-card:hover .action-icon{transform:scale(1.1) rotate(-5deg)}
.action-title{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:.375rem}
.action-subtitle{font-size:.8rem;color:var(--text-muted);font-weight:500}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:2.5rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.75rem 1.5rem;position:relative;overflow:hidden;transition:all .3s ease;box-shadow:0 2px 12px var(--shadow);animation:fadeInUp .6s ease-out backwards}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transition:height .3s ease}
.stat-card:nth-child(1){animation-delay:.3s}
.stat-card:nth-child(2){animation-delay:.35s}
.stat-card:nth-child(3){animation-delay:.4s}
.stat-card:nth-child(4){animation-delay:.45s}
.stat-card:nth-child(1)::before{background:linear-gradient(90deg,var(--amber),var(--amber-light))}
.stat-card:nth-child(2)::before{background:linear-gradient(90deg,var(--emerald),#059669)}
.stat-card:nth-child(3)::before{background:linear-gradient(90deg,var(--azure),#60a5fa)}
.stat-card:nth-child(4)::before{background:linear-gradient(90deg,#ef4444,#fb7185)}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(217,119,6,.12);border-color:var(--border-dark)}
.stat-card:hover::before{height:5px}
.stat-card-icon{font-size:2.5rem;margin-bottom:.75rem;display:block;animation:pulse 3s ease-in-out infinite}
.stat-card-value{font-family:'Playfair Display',serif;font-size:2.5rem;font-weight:900;line-height:1;margin-bottom:.375rem}
.stat-card:nth-child(1) .stat-card-value{color:var(--amber)}
.stat-card:nth-child(2) .stat-card-value{color:var(--emerald)}
.stat-card:nth-child(3) .stat-card-value{color:var(--azure)}
.stat-card:nth-child(4) .stat-card-value{color:#ef4444}
.stat-card-label{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.25rem}
.stat-card-caption{font-size:.8rem;color:var(--text-muted);font-weight:600}

.two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:2rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 2px 12px var(--shadow);overflow:hidden;animation:fadeInUp .6s ease-out backwards}
.card:nth-child(odd){animation-delay:.5s}
.card:nth-child(even){animation-delay:.55s}
.card-header{padding:1.5rem 1.75rem;border-bottom:2px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-header-left{display:flex;align-items:center;gap:1rem}
.card-badge{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--amber-pale);border:2px solid var(--border)}
.card-title{font-family:'Playfair Display',serif;font-size:1.125rem;font-weight:700;color:var(--text)}
.card-subtitle{font-size:.75rem;color:var(--text-muted);font-weight:600;margin-top:.125rem}
.card-link{padding:.5rem 1.125rem;background:var(--amber-pale);border:2px solid var(--border);border-radius:8px;font-size:.8rem;font-weight:700;color:var(--text);text-decoration:none;transition:all .3s ease}
.card-link:hover{background:var(--amber);color:#fff;border-color:var(--amber)}
.card-body{padding:1.75rem}

.progress-section{background:var(--amber-pale);border:1.5px solid var(--border);border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:1.25rem}
.progress-header{display:flex;justify-content:space-between;margin-bottom:.75rem;font-size:.875rem;font-weight:800;color:var(--text)}
.progress-value{font-family:'Playfair Display',serif;color:var(--amber)}
.progress-bar{height:12px;background:var(--border);border-radius:50px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--amber-light));border-radius:50px;transition:width 1s ease}
.progress-meta{display:flex;gap:1rem;margin-top:.75rem;flex-wrap:wrap}
.progress-meta-item{font-size:.8rem;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:.375rem}

.table-wrapper{overflow-x:auto}
.table-wrapper::-webkit-scrollbar{height:6px}
.table-wrapper::-webkit-scrollbar-thumb{background:var(--amber);border-radius:50px}
table{width:100%;border-collapse:collapse;min-width:600px}
thead tr{background:var(--amber-pale);border-bottom:2px solid var(--border)}
th{padding:.875rem 1rem;text-align:left;font-size:.7rem;font-weight:800;color:#92400e;text-transform:uppercase;letter-spacing:.05em}
tbody tr{border-bottom:1px solid var(--border);transition:background .2s}
tbody tr:hover{background:var(--amber-pale)}
td{padding:1rem;font-size:.875rem;font-weight:600;color:var(--text)}
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:50px;font-size:.7rem;font-weight:800;border:1.5px solid transparent}
.badge-success{background:#dcfce7;color:#166534;border-color:#86efac}
.badge-danger{background:#fee2e2;color:#991b1b;border-color:#fca5a5}

@media(max-width:1200px){.quick-actions,.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.sidebar{transform:translateX(-100%);transition:transform .3s ease}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0}.container{padding:1.5rem 1rem}.masthead{padding:2rem 1.5rem}.masthead-content{grid-template-columns:1fr;text-align:center}.masthead-title{font-size:1.75rem}.quick-actions,.stats-grid,.two-col{grid-template-columns:1fr}}
.mobile-menu-toggle{display:none;position:fixed;top:1rem;left:1rem;z-index:101;width:48px;height:48px;background:var(--navy);border:2px solid var(--amber);border-radius:12px;align-items:center;justify-content:center;cursor:pointer;font-size:1.5rem;color:var(--amber);box-shadow:0 4px 12px rgba(0,0,0,.2)}
@media(max-width:768px){.mobile-menu-toggle{display:flex}}
</style>
</head>
<body>

<div class="mobile-menu-toggle" onclick="document.querySelector('.sidebar').classList.toggle('open')">☰</div>

<aside class="sidebar">
<div class="sidebar-header">
<div class="sidebar-logo"><img src="assets/sekolah.png" alt="" onerror="this.parentNode.innerHTML='👔'"></div>
<h2 class="sidebar-title">Portal Staff TU</h2>
<p class="sidebar-subtitle">Education System</p>
</div>
<nav class="sidebar-nav">
<div class="nav-section">
<h3 class="nav-section-title">Dashboard</h3>
<a href="dashboard_staff.php" class="nav-item active"><div class="nav-item-icon">📊</div><span class="nav-item-text">Overview</span></a>
</div>
<div class="nav-section">
<h3 class="nav-section-title">Administrasi</h3>
<a href="spp.php" class="nav-item"><div class="nav-item-icon">💳</div><span class="nav-item-text">Pembayaran SPP</span></a>
<a href="surat.php" class="nav-item"><div class="nav-item-icon">📬</div><span class="nav-item-text">Arsip Surat</span></a>
</div>
<div class="nav-section">
<h3 class="nav-section-title">Data Sekolah</h3>
<a href="siswa.php" class="nav-item"><div class="nav-item-icon">👨‍🎓</div><span class="nav-item-text">Data Siswa</span></a>
<a href="absensi.php" class="nav-item"><div class="nav-item-icon">📋</div><span class="nav-item-text">Rekap Absensi</span></a>
</div>
</nav>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="sidebar-user-avatar"><?php if(!empty($_SESSION['foto'])&&file_exists($_SESSION['foto'])): ?><img src="<?=htmlspecialchars($_SESSION['foto'])?>"><?php else: ?>👔<?php endif; ?></div>
<div class="sidebar-user-info"><h4><?=htmlspecialchars($user_nama)?></h4><p><?=ucfirst($user_role)?></p></div>
</div>
<a href="logout.php" class="sidebar-logout" onclick="return confirm('Yakin?')"><span>🚪</span><span>Logout</span></a>
</div>
</aside>

<div class="main-content">
<div class="container">

<div class="masthead">
<div class="masthead-content">
<div class="masthead-avatar"><?php if(!empty($_SESSION['foto'])&&file_exists($_SESSION['foto'])): ?><img src="<?=htmlspecialchars($_SESSION['foto'])?>"><?php else: ?>👔<?php endif; ?></div>
<div class="masthead-info">
<div class="masthead-badge">👔 <?=$salam?> · <?=$hari_arr[(int)date('N')]?>, <?=date('d').' '.$bulan_arr[(int)date('m')].' '.date('Y')?></div>
<h1 class="masthead-title"><?=htmlspecialchars($user_nama)?> 👋</h1>
<p class="masthead-subtitle">Portal Staff TU MA As-Syafi'iyah 02</p>
<div class="masthead-meta">
<div class="masthead-meta-item"><span>📅</span><span><?=date('l, d F Y')?></span></div>
<div class="masthead-meta-item"><span>🕐</span><span><?=$time_period?></span></div>
</div>
</div>
<div class="masthead-stats">
<div class="stat-badge"><div class="stat-badge-value"><?=$spp_bln_count?></div><div class="stat-badge-label">SPP</div></div>
<div class="stat-badge"><div class="stat-badge-value"><?=$total_surat?></div><div class="stat-badge-label">Surat</div></div>
<div class="stat-badge"><div class="stat-badge-value"><?=$total_siswa?></div><div class="stat-badge-label">Siswa</div></div>
</div>
</div>
</div>

<div class="quick-actions">
<a href="spp.php" class="action-card"><div class="action-icon">💳</div><div class="action-title">Pembayaran SPP</div><div class="action-subtitle">Catat & kelola</div></a>
<a href="surat.php" class="action-card"><div class="action-icon">📬</div><div class="action-title">Arsip Surat</div><div class="action-subtitle">Masuk & keluar</div></a>
<a href="siswa.php" class="action-card"><div class="action-icon">👨‍🎓</div><div class="action-title">Data Siswa</div><div class="action-subtitle">Biodata lengkap</div></a>
<a href="absensi.php" class="action-card"><div class="action-icon">📋</div><div class="action-title">Rekap Absensi</div><div class="action-subtitle">Kehadiran siswa</div></a>
</div>

<div class="stats-grid">
<div class="stat-card"><span class="stat-card-icon">💳</span><div class="stat-card-value"><?=$spp_bln_count?></div><div class="stat-card-label">SPP <?=$bulan_nama?></div><div class="stat-card-caption">Rp <?=number_format($spp_bln_total,0,',','.')?></div></div>
<div class="stat-card"><span class="stat-card-icon">📬</span><div class="stat-card-value"><?=$total_surat?></div><div class="stat-card-label">Total Surat</div><div class="stat-card-caption"><?=$surat_masuk?> masuk · <?=$surat_keluar?> keluar</div></div>
<div class="stat-card"><span class="stat-card-icon">👨‍🎓</span><div class="stat-card-value"><?=$total_siswa?></div><div class="stat-card-label">Siswa Aktif</div><div class="stat-card-caption"><?=$siswa_all?> total</div></div>
<div class="stat-card"><span class="stat-card-icon">📊</span><div class="stat-card-value"><?=$spp_persen?>%</div><div class="stat-card-label">Lunas SPP</div><div class="stat-card-caption"><?=$spp_lunas?> dari <?=$spp_bln_count?></div></div>
</div>

<div class="two-col">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<div class="card-badge">💳</div>
<div><div class="card-title">Status SPP <?=$bulan_nama?></div><div class="card-subtitle">Rekap pembayaran</div></div>
</div>
<a href="spp.php" class="card-link">Kelola →</a>
</div>
<div class="card-body">
<div class="progress-section">
<div class="progress-header"><span>🎯 Tingkat Pembayaran</span><span class="progress-value"><?=$spp_persen?>%</span></div>
<div class="progress-bar"><div class="progress-fill" style="width:<?=$spp_persen?>%"></div></div>
<div class="progress-meta">
<div class="progress-meta-item" style="color:#10B981">✅ <?=$spp_lunas?> Lunas</div>
<div class="progress-meta-item" style="color:#EF4444">⏳ <?=$spp_belum?> Belum</div>
<div class="progress-meta-item">💰 Rp <?=number_format($spp_bln_total,0,',','.')?></div>
</div>
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<div class="card-header-left">
<div class="card-badge">💰</div>
<div><div class="card-title">SPP Terbaru</div><div class="card-subtitle">8 transaksi terakhir</div></div>
</div>
<a href="spp.php" class="card-link">Kelola →</a>
</div>
<div class="card-body" style="padding:0">
<?php if(count($spp_recent)>0): ?>
<div class="table-wrapper"><table>
<thead><tr><th>Siswa</th><th>Bulan</th><th>Nominal</th><th>Status</th></tr></thead>
<tbody>
<?php foreach($spp_recent as $sp): $bc=str_contains($sp['status'],'Lunas')?'badge-success':'badge-danger'; ?>
<tr>
<td><div style="font-weight:700"><?=htmlspecialchars($sp['nama'])?></div><div style="font-size:.75rem;color:#78716c"><?=htmlspecialchars($sp['kelas'])?></div></td>
<td style="font-size:.85rem"><?=htmlspecialchars($sp['bulan'])?> <?=$sp['tahun']?></td>
<td style="font-family:'Playfair Display',serif;font-weight:800;color:var(--amber)">Rp <?=number_format($sp['nominal'],0,',','.')?></td>
<td><span class="badge <?=$bc?>"><?=htmlspecialchars($sp['status'])?></span></td>
</tr>
<?php endforeach; ?>
</tbody>
</table></div>
<?php else: ?>
<div style="text-align:center;padding:2rem;color:#9ca3af;font-weight:600">📭 Belum ada data</div>
<?php endif; ?>
</div>
</div>
</div>

<div style="text-align:center;padding:2rem;border-top:2px solid var(--border);margin-top:2rem">
<p style="font-size:.875rem;color:var(--text-muted);font-weight:600">© <?=date('Y')?> MA As-Syafi'iyah 02 · Staff TU · Crafted with excellence</p>
</div>

</div>
</div>

<script>
document.addEventListener('click',(e)=>{const s=document.querySelector('.sidebar'),t=document.querySelector('.mobile-menu-toggle');if(window.innerWidth<=768&&!s.contains(e.target)&&!t.contains(e.target))s.classList.remove('open')});
document.querySelectorAll('.nav-item').forEach(i=>i.addEventListener('click',()=>{if(window.innerWidth<=768)document.querySelector('.sidebar').classList.remove('open')}));
</script>
</body>
</html>