<?php 
include 'koneksi.php';
cek_akses(['Kepala', 'Pimpinan', 'Super Admin']);

$filter_unit = "";
$filter_where = "";
if($_SESSION['role'] == 'Kepala') {
    $filter_unit = $_SESSION['unit'];
    $filter_where = "AND u.unit = '{$_SESSION['unit']}'";
}

// Ambil nama file saat ini
$current_page = basename($_SERVER['PHP_SELF']);

// Query jurnal rekap
$jurnal_rekap = mysqli_query($conn, "SELECT u.id, u.full_name, u.unit, COUNT(tj.id) as total_jurnal 
    FROM users u 
    LEFT JOIN teaching_journals tj ON u.id = tj.teacher_id 
    WHERE u.role = 'Guru' $filter_where 
    GROUP BY u.id 
    ORDER BY total_jurnal DESC");

$jurnal_data = [];
if($jurnal_rekap && mysqli_num_rows($jurnal_rekap) > 0) {
    while($row = mysqli_fetch_assoc($jurnal_rekap)) {
        $jurnal_data[] = $row;
    }
}

// Query nilai dari tabel nilai_siswa
$nilai_rekap = mysqli_query($conn, "SELECT u.id, u.full_name, u.unit, COUNT(n.id) as total_nilai 
    FROM users u 
    LEFT JOIN nilai_siswa n ON u.id = n.teacher_id 
    WHERE u.role = 'Guru' $filter_where 
    GROUP BY u.id 
    ORDER BY total_nilai DESC");

$nilai_data = [];
if($nilai_rekap && mysqli_num_rows($nilai_rekap) > 0) {
    while($row = mysqli_fetch_assoc($nilai_rekap)) {
        $nilai_data[] = $row;
    }
}

// Query absensi rekap
$absensi_rekap = mysqli_query($conn, "SELECT u.id, u.full_name, u.unit,
    SUM(CASE WHEN a.status = 'Hadir' THEN 1 ELSE 0 END) as hadir,
    SUM(CASE WHEN a.status = 'Sakit' THEN 1 ELSE 0 END) as sakit,
    SUM(CASE WHEN a.status = 'Izin' THEN 1 ELSE 0 END) as izin,
    SUM(CASE WHEN a.status = 'Alfa' THEN 1 ELSE 0 END) as alpa
    FROM users u 
    LEFT JOIN attendance a ON u.id = a.teacher_id 
    WHERE u.role = 'Guru' $filter_where 
    GROUP BY u.id");

$absensi_data = [];
if($absensi_rekap && mysqli_num_rows($absensi_rekap) > 0) {
    while($row = mysqli_fetch_assoc($absensi_rekap)) {
        $absensi_data[] = $row;
    }
}

// Query detail jurnal terbaru
$detail_jurnal = mysqli_query($conn, "SELECT tj.*, u.full_name as guru_name, c.name as class_name 
    FROM teaching_journals tj 
    JOIN users u ON tj.teacher_id = u.id 
    JOIN classes c ON tj.class_id = c.id 
    WHERE u.role = 'Guru' $filter_where 
    ORDER BY tj.date DESC 
    LIMIT 10");

$detail_data = [];
if($detail_jurnal && mysqli_num_rows($detail_jurnal) > 0) {
    while($row = mysqli_fetch_assoc($detail_jurnal)) {
        $detail_data[] = $row;
    }
}

// Hitung total
$total_guru = count($jurnal_data);
$total_jurnal_all = array_sum(array_column($jurnal_data, 'total_jurnal'));
$total_nilai_all = array_sum(array_column($nilai_data, 'total_nilai'));
$total_hadir_all = array_sum(array_column($absensi_data, 'hadir'));
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monitoring - SIM ISTIQLAL</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #f5f7fb;
        }

        /* Wrapper */
        .wrapper {
            display: flex;
            min-height: 100vh;
        }

        /* ========== SIDEBAR ========== */
        .main-sidebar {
            width: 280px;
            background: linear-gradient(180deg, #0b5e4e 0%, #064e3b 100%);
            color: #fff;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            overflow-y: auto;
            z-index: 1000;
            transition: all 0.3s;
        }

        /* Scrollbar styling */
        .main-sidebar::-webkit-scrollbar {
            width: 5px;
        }
        .main-sidebar::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
        }
        .main-sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
        }

        .sidebar-brand {
            padding: 25px 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .sidebar-brand h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .sidebar-brand p {
            font-size: 11px;
            opacity: 0.7;
        }

        .user-panel {
            padding: 20px;
            background: rgba(255,255,255,0.08);
            margin: 15px;
            border-radius: 12px;
            text-align: center;
        }

        .user-panel .name {
            font-weight: 700;
            font-size: 15px;
        }

        .user-panel .role {
            font-size: 11px;
            opacity: 0.7;
            margin-top: 5px;
        }

        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }

        .sidebar-menu .menu-title {
            padding: 10px 20px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.5;
            font-weight: 600;
        }

        .sidebar-menu .menu-item {
            margin: 2px 0;
        }

        .sidebar-menu .menu-item a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.2s;
            border-left: 3px solid transparent;
        }

        .sidebar-menu .menu-item a i {
            width: 22px;
            font-size: 16px;
        }

        .sidebar-menu .menu-item a:hover {
            background: rgba(255,255,255,0.08);
            border-left-color: #10b981;
        }

        .sidebar-menu .menu-item.active a {
            background: rgba(16, 185, 129, 0.15);
            border-left-color: #10b981;
        }

        .sidebar-menu .menu-item a .badge-menu {
            margin-left: auto;
            background: rgba(255,255,255,0.2);
            padding: 2px 8px;
            border-radius: 20px;
            font-size: 10px;
        }

        /* ========== MAIN CONTENT ========== */
        .content-wrapper {
            flex: 1;
            margin-left: 280px;
            padding: 20px 25px;
        }

        /* Header */
        .content-header {
            margin-bottom: 25px;
        }

        .content-header h1 {
            font-size: 24px;
            font-weight: 700;
            color: #1e293b;
            margin: 0;
        }

        .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 5px 0 0;
        }

        .breadcrumb-item a {
            color: #0b5e4e;
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: #64748b;
        }

        .alert-info {
            background: #e0f2fe;
            border-left: 4px solid #0284c7;
            padding: 10px 15px;
            border-radius: 8px;
            font-size: 13px;
            margin-top: 15px;
        }

        /* Stats Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            transition: transform 0.2s;
            cursor: default;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        .stat-number {
            font-size: 32px;
            font-weight: 800;
            color: #0b5e4e;
        }

        .stat-label {
            font-size: 13px;
            color: #64748b;
            margin-top: 8px;
        }

        /* Card */
        .card-custom {
            background: white;
            border-radius: 16px;
            margin-bottom: 25px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            border: none;
        }

        .card-header-custom {
            background: linear-gradient(135deg, #0b5e4e 0%, #10b981 100%);
            color: white;
            padding: 14px 20px;
            font-weight: 600;
            font-size: 14px;
        }

        .card-header-custom i {
            margin-right: 8px;
        }

        /* Table */
        .table-responsive {
            overflow-x: auto;
        }

        .table-custom {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 0;
        }

        .table-custom thead th {
            background: linear-gradient(135deg, #0b5e4e 0%, #10b981 100%);
            color: white;
            padding: 12px 15px;
            font-size: 12px;
            font-weight: 600;
            text-align: left;
            white-space: nowrap;
        }

        .table-custom tbody td {
            padding: 12px 15px;
            font-size: 13px;
            border-bottom: 1px solid #e2e8f0;
            vertical-align: middle;
        }

        .table-custom tbody tr:hover {
            background: #f8fafc;
        }

        .table-custom tbody tr:last-child td {
            border-bottom: none;
        }

        /* Two columns */
        .two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-bottom: 25px;
        }

        /* Badges */
        .badge-custom {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 30px;
            font-size: 11px;
            font-weight: 600;
        }
        .badge-success { background: #d1fae5; color: #065f46; }
        .badge-primary { background: #e0e7ff; color: #4338ca; }
        .badge-warning { background: #fed7aa; color: #92400e; }
        .badge-danger { background: #fee2e2; color: #991b1b; }
        .badge-secondary { background: #e2e8f0; color: #475569; }
        .badge-info { background: #e0f2fe; color: #075985; }

        /* Progress */
        .progress-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .progress {
            flex: 1;
            height: 6px;
            background: #e2e8f0;
            border-radius: 3px;
            overflow: hidden;
        }
        .progress-bar {
            background: #10b981;
        }

        /* Button */
        .btn-detail {
            background: #0b5e4e;
            color: white;
            border: none;
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }
        .btn-detail:hover {
            background: #10b981;
            color: white;
        }

        /* Link */
        .link-jurnal {
            color: #0b5e4e;
            text-decoration: none;
        }
        .link-jurnal:hover {
            text-decoration: underline;
            color: #10b981;
        }

        /* Footer */
        .main-footer {
            background: white;
            padding: 15px 20px;
            text-align: center;
            font-size: 12px;
            color: #64748b;
            border-radius: 12px;
            margin-top: 20px;
        }

        /* Text utilities */
        .text-center { text-align: center; }
        .text-success { color: #065f46; font-weight: 600; }
        .text-danger { color: #991b1b; font-weight: 600; }

        /* Mobile toggle */
        .mobile-toggle {
            display: none;
            position: fixed;
            top: 15px;
            left: 15px;
            z-index: 1100;
            background: #0b5e4e;
            color: white;
            border: none;
            padding: 10px 12px;
            border-radius: 8px;
            cursor: pointer;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .two-columns {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }

        @media (max-width: 768px) {
            .mobile-toggle {
                display: block;
            }
            .main-sidebar {
                transform: translateX(-100%);
            }
            .main-sidebar.open {
                transform: translateX(0);
            }
            .content-wrapper {
                margin-left: 0;
                padding: 60px 15px 15px 15px;
            }
            .stats-grid {
                gap: 12px;
            }
            .stat-number {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>

<button class="mobile-toggle" onclick="document.getElementById('sidebar').classList.toggle('open')">
    <i class="fas fa-bars"></i>
</button>

<div class="wrapper">
    <!-- Sidebar -->
<div class="main-sidebar" id="sidebar">
    <div class="sidebar-brand">
        <h3><i class="fas fa-school"></i> ADMINISTRASI GURU</h3>
        <p>SIM ISTIQLAL</p>
    </div>
    
    <div class="user-panel">
        <div class="name"><i class="fas fa-user-circle"></i> <?= htmlspecialchars($_SESSION['full_name'] ?? 'Super Admin') ?></div>
        <div class="role"><?= htmlspecialchars($_SESSION['role'] ?? 'Super Admin') ?> | MU</div>
    </div>

    <ul class="sidebar-menu">
        <!-- MAIN NAVIGATION -->
        <li class="menu-title">MAIN NAVIGATION</li>
        <li class="menu-item <?= $current_page == 'dashboard.php' ? 'active' : '' ?>">
            <a href="dashboard.php"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
        </li>
        
        <!-- MASTER DATA -->
        <li class="menu-title">MASTER DATA</li>
        <li class="menu-item <?= $current_page == 'kelola_kelas.php' ? 'active' : '' ?>">
            <a href="kelola_kelas.php"><i class="fas fa-chalkboard"></i> Kelola Kelas</a>
        </li>
        <li class="menu-item <?= $current_page == 'kelola_siswa.php' ? 'active' : '' ?>">
            <a href="kelola_siswa.php"><i class="fas fa-users"></i> Kelola Siswa</a>
        </li>
        <li class="menu-item <?= $current_page == 'import_excel.php' ? 'active' : '' ?>">
            <a href="import_excel.php"><i class="fas fa-file-excel"></i> Import Excel</a>
        </li>
        
        <!-- MANAGEMENT -->
        <li class="menu-title">MANAGEMENT</li>
        <li class="menu-item <?= $current_page == 'kelola_user.php' ? 'active' : '' ?>">
            <a href="kelola_user.php"><i class="fas fa-user-cog"></i> Kelola User</a>
        </li>
        
        <!-- MONITORING -->
        <li class="menu-title">MONITORING</li>
        <li class="menu-item <?= $current_page == 'monitoring.php' ? 'active' : '' ?>">
            <a href="monitoring.php"><i class="fas fa-chart-line"></i> Monitoring</a>
        </li>
        
        <!-- SUPERVISI -->
        <li class="menu-title">SUPERVISI</li>
        <li class="menu-item <?= $current_page == 'supervisi.php' ? 'active' : '' ?>">
            <a href="supervisi.php"><i class="fas fa-clipboard-list"></i> Buat Supervisi</a>
        </li>
    </ul>
</div>

    <!-- Main Content -->
    <div class="content-wrapper">
        <div class="content-header">
            <h1><i class="fas fa-chart-line"></i> Monitoring Aktivitas Guru</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="dashboard.php">Home</a></li>
                <li class="breadcrumb-item active">Monitoring</li>
            </ol>
            <?php if($_SESSION['role'] == 'Kepala'): ?>
            <div class="alert-info">
                <i class="fas fa-building"></i> Menampilkan data untuk unit: <strong><?= htmlspecialchars($_SESSION['unit']) ?></strong>
            </div>
            <?php endif; ?>
        </div>

        <!-- Stats Cards -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number"><?= $total_guru ?></div>
                <div class="stat-label"><i class="fas fa-chalkboard-user"></i> Total Guru</div>
            </div>
            <div class="stat-card">
                <div class="stat-number"><?= $total_jurnal_all ?></div>
                <div class="stat-label"><i class="fas fa-book"></i> Total Jurnal</div>
            </div>
            <div class="stat-card">
                <div class="stat-number"><?= $total_nilai_all ?></div>
                <div class="stat-label"><i class="fas fa-star"></i> Total Nilai</div>
            </div>
            <div class="stat-card">
                <div class="stat-number"><?= $total_hadir_all ?></div>
                <div class="stat-label"><i class="fas fa-user-check"></i> Total Hadir</div>
            </div>
        </div>

        <!-- Rekap Jurnal Mengajar -->
        <div class="card-custom">
            <div class="card-header-custom">
                <i class="fas fa-book"></i> Rekapan Jurnal Mengajar
            </div>
            <div class="table-responsive">
                <table class="table-custom">
                    <thead>
                        <tr>
                            <th style="width:5%; text-align:center;">No</th>
                            <th style="width:30%;">Nama Guru</th>
                            <th style="width:25%;">Unit</th>
                            <th style="width:15%; text-align:center;">Total Jurnal</th>
                            <th style="width:15%; text-align:center;">Status</th>
                            <th style="width:10%; text-align:center;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if(count($jurnal_data) > 0): ?>
                            <?php $no=1; foreach($jurnal_data as $row): 
                                $status_class = '';
                                $status_text = '';
                                if($row['total_jurnal'] >= 20) {
                                    $status_class = 'badge-success';
                                    $status_text = 'Sangat Aktif';
                                } elseif($row['total_jurnal'] >= 10) {
                                    $status_class = 'badge-primary';
                                    $status_text = 'Aktif';
                                } elseif($row['total_jurnal'] >= 1) {
                                    $status_class = 'badge-warning';
                                    $status_text = 'Kurang Aktif';
                                } else {
                                    $status_class = 'badge-danger';
                                    $status_text = 'Tidak Aktif';
                                }
                            ?>
                            <tr>
                                <td class="text-center"><?= $no++ ?></td>
                                <td><strong><?= htmlspecialchars($row['full_name']) ?></strong></td>
                                <td><?= htmlspecialchars($row['unit']) ?></td>
                                <td class="text-center"><span class="badge-custom badge-primary"><?= $row['total_jurnal'] ?></span></td>
                                <td class="text-center"><span class="badge-custom <?= $status_class ?>"><?= $status_text ?></span></td>
                                <td class="text-center">
                                    <a href="detail_guru_monitoring.php?id=<?= $row['id'] ?>" class="btn-detail">
                                        <i class="fas fa-eye"></i> Detail
                                    </a>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr><td colspan="6" class="text-center">Belum ada data jurnal</td></tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Rekap Nilai & Rekap Absensi (2 Kolom) -->
        <div class="two-columns">
            <!-- Rekap Nilai -->
            <div class="card-custom">
                <div class="card-header-custom">
                    <i class="fas fa-star"></i> Rekapan Nilai Siswa
                </div>
                <div class="table-responsive">
                    <table class="table-custom">
                        <thead>
                            <tr>
                                <th style="width:10%; text-align:center;">No</th>
                                <th style="width:45%;">Nama Guru</th>
                                <th style="width:20%; text-align:center;">Total Nilai</th>
                                <th style="width:25%;">Progress</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if(count($nilai_data) > 0): ?>
                                <?php $no=1; foreach($nilai_data as $row): ?>
                                <tr>
                                    <td class="text-center"><?= $no++ ?></td>
                                    <td><?= htmlspecialchars($row['full_name']) ?></td>
                                    <td class="text-center"><span class="badge-custom badge-success"><?= $row['total_nilai'] ?></span></td>
                                    <td>
                                        <div class="progress-wrapper">
                                            <div class="progress">
                                                <div class="progress-bar" style="width: <?= min(100, $row['total_nilai']) ?>%"></div>
                                            </div>
                                            <small class="text-muted"><?= round($row['total_nilai']) ?> nilai</small>
                                        </div>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <tr><td colspan="4" class="text-center">Belum ada data nilai</td></tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Rekap Absensi -->
            <div class="card-custom">
                <div class="card-header-custom">
                    <i class="fas fa-user-check"></i> Rekapan Absensi Siswa
                </div>
                <div class="table-responsive">
                    <table class="table-custom">
                        <thead>
                            <tr>
                                <th style="width:8%; text-align:center;">No</th>
                                <th style="width:30%;">Nama Guru</th>
                                <th style="width:12%; text-align:center;">Hadir</th>
                                <th style="width:12%; text-align:center;">Sakit</th>
                                <th style="width:12%; text-align:center;">Izin</th>
                                <th style="width:12%; text-align:center;">Alfa</th>
                                <th style="width:14%; text-align:center;">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if(count($absensi_data) > 0): ?>
                                <?php $no=1; foreach($absensi_data as $row): 
                                    $total_abs = $row['hadir'] + $row['sakit'] + $row['izin'] + $row['alpa'];
                                ?>
                                <tr>
                                    <td class="text-center"><?= $no++ ?></td>
                                    <td><?= htmlspecialchars($row['full_name']) ?></td>
                                    <td class="text-center"><span class="text-success"><?= $row['hadir'] ?></span></td>
                                    <td class="text-center"><?= $row['sakit'] ?></td>
                                    <td class="text-center"><?= $row['izin'] ?></td>
                                    <td class="text-center"><span class="text-danger"><?= $row['alpa'] ?></span></td>
                                    <td class="text-center"><span class="badge-custom badge-secondary"><?= $total_abs ?></span></td>
                                </tr>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <tr><td colspan="7" class="text-center">Belum ada data absensi</td></tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Detail Jurnal Terbaru -->
        <div class="card-custom">
            <div class="card-header-custom">
                <i class="fas fa-history"></i> Detail Jurnal Terbaru
            </div>
            <div class="table-responsive">
                <table class="table-custom">
                    <thead>
                        <tr>
                            <th style="width:10%;">Tanggal</th>
                            <th style="width:15%;">Guru</th>
                            <th style="width:10%;">Kelas</th>
                            <th style="width:12%;">Mapel</th>
                            <th style="width:20%;">Materi</th>
                            <th style="width:10%; text-align:center;">Jenis</th>
                            <th style="width:8%; text-align:center;">Link</th>
                            <th style="width:15%;">Target</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if(count($detail_data) > 0): ?>
                            <?php foreach($detail_data as $row): ?>
                            <tr>
                                <td><?= date('d-m-Y', strtotime($row['date'])) ?></td>
                                <td><strong><?= htmlspecialchars($row['guru_name']) ?></strong></td>
                                <td><?= htmlspecialchars($row['class_name']) ?></td>
                                <td><?= htmlspecialchars($row['subject']) ?></td>
                                <td><?= substr(htmlspecialchars($row['material']), 0, 40) ?>...</td>
                                <td class="text-center"><span class="badge-custom badge-info"><?= htmlspecialchars($row['jenis_materi']) ?></span></td>
                                <td class="text-center">
                                    <?php if(!empty($row['link_url'])): ?>
                                        <a href="<?= $row['link_url'] ?>" target="_blank" class="link-jurnal">
                                            <i class="fas fa-external-link-alt"></i>
                                        </a>
                                    <?php else: ?>
                                        -
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php 
                                    $target = $row['keterangan_target'];
                                    $target_short = strlen($target) > 20 ? substr($target, 0, 20) . '...' : $target;
                                    ?>
                                    <span class="badge-custom badge-secondary"><?= htmlspecialchars($target_short) ?></span>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr><td colspan="8" class="text-center">Belum ada jurnal terbaru</td></tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>

        <footer class="main-footer">
            <strong>&copy; <?= date('Y') ?> SIM ISTIQLAL - Sistem Administrasi Guru</strong>
        </footer>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // Toggle sidebar untuk mobile
    function toggleSidebar() {
        document.getElementById('sidebar').classList.toggle('open');
    }

    document.addEventListener('click', function(e) {
        const sidebar = document.getElementById('sidebar');
        const toggle = document.querySelector('.mobile-toggle');
        if (window.innerWidth <= 768 && sidebar && toggle) {
            if (!sidebar.contains(e.target) && !toggle.contains(e.target)) {
                sidebar.classList.remove('open');
            }
        }
    });
</script>
</body>
</html>