<?php
session_start();

// 1. استدعاء ملف الجسر السري
require_once 'roozmari_bridge.php';

// 2. فحص الترخيص إجبارياً من سيرفرك المركزي
enforce_roozmari_license(); 
// إيقاف التقارير الصارمة لقاعدة البيانات لمنع انهيار الصفحة (الشاشة السوداء)
mysqli_report(MYSQLI_REPORT_OFF);

require_once 'db_connect.php';

// ==========================================
// 🚀 حماية لوحة الإدارة (السماح للمدير، المحاسب، والموظف الإداري بالدخول) 🚀
// ==========================================
$allowed_dashboard_roles = ['admin', 'accountant', 'staff', 'transport', 'scanner', 'reception']; // 👈 أضفنا 'staff' هنا
if (!isset($_SESSION['loggedin']) || !in_array($_SESSION['role'], $allowed_dashboard_roles)) {
    header("Location: login.php");
    exit;
}


// جلب اسم المدير أو المؤسسة من الجلسة (أو وضع اسم افتراضي)
$manager_name = isset($_SESSION['manager_name']) ? $_SESSION['manager_name'] : 'مدير النظام';
$school_name = isset($_SESSION['school_name']) ? $_SESSION['school_name'] : 'أكاديمية روزماري';

// --- 🚀 جلب البيانات الحقيقية للإحصائيات بحماية كاملة (لمنع Fatal Error) 🚀 ---
$stats_parents = 0;
$res_p = $conn->query("SELECT COUNT(*) as total FROM parents");
if ($res_p) { $stats_parents = $res_p->fetch_assoc()['total'] ?? 0; }

$stats_links = 0;
$res_l = $conn->query("SELECT COUNT(*) as total FROM parent_student_link");
if ($res_l) { $stats_links = $res_l->fetch_assoc()['total'] ?? 0; }

$parents_list = $conn->query("
    SELECT p.id, p.parent_name, p.phone, COUNT(psl.id) as student_count 
    FROM parents p 
    LEFT JOIN parent_student_link psl ON p.id = psl.parent_id 
    GROUP BY p.id
");

// --- 🚀 جلب الصلاحيات 🚀 ---
$can_add_teachers = '1'; 
try {
    $sys_res = $conn->query("SELECT setting_value FROM system_settings WHERE setting_key = 'school_add_teachers'");
    if ($sys_res && $sys_res->num_rows > 0) {
        $can_add_teachers = $sys_res->fetch_assoc()['setting_value'];
    }
} catch (Exception $e) {}

// --- 🚀 جلب إعدادات المدرسة الشاملة من قاعدة البيانات لتطبيقها على اللوحة 🚀 ---
$school_settings = [];
$safe_school_name = $conn->real_escape_string($school_name);
$res_settings = $conn->query("SELECT * FROM schools WHERE school_name = '$safe_school_name'");
if ($res_settings && $res_settings->num_rows > 0) {
    $school_settings = $res_settings->fetch_assoc();
}

// تعيين الألوان واللغات من قاعدة البيانات أو وضع ألوان افتراضية
$sys_primary_color = !empty($school_settings['primary_color']) ? $school_settings['primary_color'] : '#ff4d79';
$sys_secondary_color = !empty($school_settings['secondary_color']) ? $school_settings['secondary_color'] : '#6b1024';
$sys_language = !empty($school_settings['ui_language']) ? $school_settings['ui_language'] : 'ar';
$sys_logo = !empty($school_settings['school_logo']) ? $school_settings['school_logo'] : '';

// ========================================================
// 🚀 نظام الصلاحيات المتقدم (RBAC) 🚀
// هذا القسم يحدد ماذا سيرى كل موظف يفتح اللوحة
// ========================================================
$user_role = $_SESSION['role'] ?? 'guest';
$allowed_sections = [];
$default_tab = 'dashboard';
$role_title = 'موظف';

switch ($user_role) {
    case 'accountant':
        // المحاسب يرى فقط القسم المالي
        $allowed_sections = ['finance'];
        $default_tab = 'financial-management'; 
        $role_title = 'المحاسب المالي (قسم الحسابات)';
        break;
        
    case 'transport':
        // مسؤول النقل يرى فقط قسم النقل والحافلات
        $allowed_sections = ['transport'];
        $default_tab = 'transport'; 
        $role_title = 'مسؤول حركة النقل (قسم الآليات)';
        break;
        
    case 'scanner':
    case 'reception':
        // مسؤول الغيابات والاستعلامات يرى الاسكنر فقط
        $allowed_sections = ['scanner'];
        $default_tab = 'attendance-scanner'; 
        $role_title = 'بوابة الحضور السريع (موظف الاستعلامات)';
        break;

    case 'staff':
        // 🚀🚀 الموظف الإداري: يرى كل شيء ما عدا المالية والإعدادات المركزية 🚀🚀
        $allowed_sections = ['dashboard', 'students', 'teachers', 'archive', 'scanner', 'transport'];
        $default_tab = 'dashboard';
        $role_title = 'موظف إداري (لوحة الإدارة)';
        break;

    case 'admin':
        // المدير العام يرى كل شيء
        $allowed_sections = ['dashboard', 'students', 'teachers', 'finance', 'transport', 'settings', 'archive', 'scanner'];
        $default_tab = 'dashboard';
        $role_title = 'المدير العام (صلاحيات كاملة)';
        break;

    default:
        // في حال الدخول بطريقة غير شرعية أو عدم وجود Role، يتم طرده
        header("Location: login.php");
        exit;
}

// دالة سريعة للتحقق من الصلاحية (نستخدمها لإخفاء الأزرار والأقسام)
function hasAccess($section) {
    global $allowed_sections;
    return in_array($section, $allowed_sections);
}


?>

<!DOCTYPE html>
<html lang="<?php echo $sys_language; ?>" dir="<?php echo ($sys_language == 'en' || $sys_language == 'fr' || $sys_language == 'de') ? 'ltr' : 'rtl'; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>لوحة تحكم المؤسسة | <?php echo htmlspecialchars($school_name); ?></title>
    <link rel="icon" href="images/icon.png" type="image/png">
    <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=Montserrat:wght@400;700;900&family=Tajawal:wght@400;700;900&display=swap" rel="stylesheet">
    <?php require_once 'theme_lang_loader.php'; ?>
    
    <style>
    /* 1. اجعل الجسم يملأ الشاشة */
    /* 1. منع التمرير الكلي للجسم لضمان ثبات القائمة الجانبية والعلوية */
    body { 
        margin: 0; padding: 0; background: var(--bg-dark); color: var(--text-light); 
        display: flex; height: 100vh; width: 100vw; overflow: hidden; 
    }

    /* 2. الحاوية الرئيسية (يجب تحديد طولها لكي يعمل السكرول الداخلي) */
    .main-wrapper { 
        flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; min-width: 0; min-height: 0;
    }

    /* 3. منطقة المحتوى (هنا السر: min-height: 0 و overflow-y: auto) */
    .content-area { 
        flex: 1; padding: 30px; overflow-y: auto; overflow-x: hidden; min-height: 0; position: relative;
    }

    /* 4. إعطاء الأقسام راحتها في الطول */
    .view-section { display: none; animation: fadeIn 0.4s ease-in-out; min-height: min-content; padding-bottom: 50px; }
    .view-section.active { display: block; }
    /* =========================================
           تطبيق ألوان الهوية البصرية من قاعدة البيانات
        ========================================= */
        :root { 
            --bg-dark: #090204;
            --sidebar-bg: #050102;
            --topbar-bg: rgba(9, 2, 4, 0.85);
            --primary: <?php echo $sys_primary_color; ?>;
            --secondary: <?php echo $sys_secondary_color; ?>;
            --text-light: #f8fafc;
            --text-muted: #94a3b8;
            --card-bg: rgba(255, 255, 255, 0.03);
            --border-glass: rgba(255, 255, 255, 0.1);
        }
        
        * { box-sizing: border-box; font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        
        body { 
            margin: 0; background: var(--bg-dark); color: var(--text-light); display: flex; height: 100vh; overflow: hidden; 
        }

        /* -----------------------------------------
           1. القائمة الجانبية (Sidebar)
        ----------------------------------------- */
        .sidebar { 
            width: 280px; background: var(--sidebar-bg); height: 100vh; border-left: 1px solid var(--border-glass); display: flex; flex-direction: column; transition: 0.3s; z-index: 1000;
        }
        html[dir="ltr"] .sidebar { border-left: none; border-right: 1px solid var(--border-glass); }
        
        .sidebar-header {
            height: 70px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-glass); font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.5rem; color: var(--primary); letter-spacing: 2px;
        }
        .sidebar-menu { flex: 1; overflow-y: auto; padding: 20px 0; }
        .menu-item { 
            padding: 15px 25px; display: flex; align-items: center; color: var(--text-muted); cursor: pointer; transition: 0.3s; text-decoration: none; border-right: 4px solid transparent;
        }
        html[dir="ltr"] .menu-item { border-right: none; border-left: 4px solid transparent; }
        .menu-item i { width: 30px; font-size: 1.2rem; }
        
        .menu-item:hover, .menu-item.active { 
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%); color: var(--text-light); border-right: 4px solid var(--primary);
        }
        html[dir="ltr"] .menu-item:hover, html[dir="ltr"] .menu-item.active { border-right: none; border-left: 4px solid var(--primary); background: linear-gradient(-90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);}
        
        .menu-item.active i { color: var(--primary); text-shadow: 0 0 10px var(--primary); }
        .sidebar-footer { padding: 20px; border-top: 1px solid var(--border-glass); }
        .btn-logout {
            display: block; width: 100%; padding: 12px; text-align: center; background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid #ef4444; border-radius: 10px; text-decoration: none; font-weight: bold; transition: 0.3s;
        }
        .btn-logout:hover { background: #ef4444; color: #fff; box-shadow: 0 0 15px #ef4444; }

        /* -----------------------------------------
           2. منطقة العمل (Main Content & Topbar)
        ----------------------------------------- */
        .main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
        .main-wrapper::before {
            content: ''; position: absolute; top: -20%; left: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle, var(--secondary) 0%, transparent 70%); border-radius: 50%; z-index: -1; pointer-events: none; opacity: 0.15;
        }
        .topbar {
            height: 70px; background: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-glass); display: flex; justify-content: space-between; align-items: center; padding: 0 30px; z-index: 10;
        }
        .user-info { display: flex; align-items: center; gap: 15px; }
        .user-avatar { width: 40px; height: 40px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 2px solid var(--primary); }
        .content-area { flex: 1; padding: 30px; overflow-y: auto; }

        /* -----------------------------------------
           3. تصميم البطاقات والمحتوى (Cards & Views)
        ----------------------------------------- */
        .view-section { display: none; animation: fadeIn 0.4s ease-in-out; }
        .view-section.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .page-title { font-size: 1.8rem; margin-bottom: 30px; font-weight: bold; display: flex; align-items: center; gap: 15px; }
        .page-title i { color: var(--primary); }
        .stats-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 30px;
        }
        .stat-card {
            background: var(--card-bg); border: 1px solid var(--border-glass); padding: 25px; border-radius: 15px; display: flex; align-items: center; gap: 20px; backdrop-filter: blur(10px); transition: 0.3s;
        }
        .stat-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
        .stat-icon {
            width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
        }
        .stat-icon.blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
        .stat-icon.pink { background: rgba(255, 77, 121, 0.1); color: var(--primary); }
        .stat-icon.green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
        .stat-icon.purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
        .stat-details h4 { margin: 0 0 5px 0; font-size: 0.9rem; color: var(--text-muted); }
        .stat-details h2 { margin: 0; font-size: 1.8rem; }
        .data-panel {
            background: var(--card-bg); border: 1px solid var(--border-glass); border-radius: 15px; padding: 25px; backdrop-filter: blur(10px);
        }
        .data-panel h3 { margin-top: 0; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px; margin-bottom: 20px; }
        .empty-state { text-align: center; padding: 40px; color: var(--text-muted); }
        .empty-state i { font-size: 3rem; margin-bottom: 15px; opacity: 0.5; }
        .btn-action {
            background: var(--primary); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.3s;
        }
        .btn-action:hover { filter: brightness(1.2); }

        /* تنسيقات النماذج */
        .config-section { background: var(--card-bg); border: 1px solid var(--border-glass); padding: 30px; border-radius: 15px; margin-bottom: 30px; backdrop-filter: blur(10px); }
        .section-title { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 15px; margin-bottom: 25px; font-size: 1.4rem; color: #fff; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .input-group { display: flex; flex-direction: column; gap: 10px; }
        .full-width { grid-column: 1 / -1; }
        .input-label { font-size: 0.95rem; color: var(--text-muted); font-weight: bold; }
        .custom-input { width: 100%; padding: 12px 15px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #fff; font-size: 1rem; transition: all 0.3s ease; }
        .custom-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 10px rgba(255, 77, 121, 0.2); background: rgba(0, 0, 0, 0.5); }
        .custom-input::placeholder { color: rgba(255, 255, 255, 0.2); }
        
        /* النوافذ المنبثقة */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 10000; display: flex; align-items: center; justify-content: center; }
        .modal-content { background: var(--sidebar-bg); border: 1px solid var(--primary); border-radius: 15px; width: 90%; max-width: 500px; padding: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); position: relative; animation: fadeIn 0.3s ease-out; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px; }
        .modal-header h2 { margin: 0; font-size: 1.2rem; color: var(--primary); }
        .close-modal { font-size: 1.8rem; cursor: pointer; color: var(--text-muted); transition: 0.3s;}
        .close-modal:hover { color: #ff4d79; }

        @media (max-width: 768px) {
            body { flex-direction: column; height: auto; overflow-y: auto; }
            .sidebar { width: 100%; height: auto; border-left: none; border-bottom: 1px solid var(--border-glass); z-index: 100; }
            .sidebar-header { height: 60px; font-size: 1.2rem; }
            .sidebar-menu { display: flex; flex-direction: row; overflow-x: auto; padding: 0; white-space: nowrap; }
            .menu-item { flex: 0 0 auto; padding: 12px 15px; border-right: none !important; border-bottom: 3px solid transparent; font-size: 0.9rem; }
            .menu-item.active { border-bottom: 3px solid var(--primary); background: rgba(255, 255, 255, 0.05); }
            .sidebar-footer { display: none; }
            .main-wrapper { height: auto; overflow: visible; }
            .topbar { padding: 0 15px; justify-content: space-between; }
            .content-area { padding: 15px; }
            .form-grid { grid-template-columns: 1fr; gap: 10px; }
            .data-panel { overflow-x: auto; }
            table { min-width: 700px; } 
        }
    </style>
</head>
<body>

    <aside class="sidebar">
        <div class="sidebar-header">
            ROOZMARI
        </div>
        <div class="sidebar-menu">
            
            <!-- ============================================== -->
            <!-- 1. الأقسام العامة (تظهر للمدير العام فقط) -->
            <!-- ============================================== -->
            <?php if (hasAccess('dashboard')): ?>
            <a class="menu-item active" onclick="switchView('dashboard', this)">
                <i class="fas fa-home"></i> <span>الرئيسية</span>
            </a>
            <a class="menu-item" onclick="switchView('live-rooms', this)">
                <i class="fas fa-satellite-dish"></i> <span>إدارة البث المباشر</span>
            </a>
            <a class="menu-item" onclick="switchView('live-monitor', this)">
                <i class="fas fa-desktop"></i> <span>مراقبة البثوث المباشرة</span>
            </a>
            <a class="menu-item" onclick="switchView('academic-structure', this)">
                <i class="fas fa-tags"></i> <span>الوسوم والتصنيفات</span>
            </a>
            <a href="students_affairs.php" class="menu-item">
                <i class="fas fa-user-graduate"></i> <span>شؤون الكادر والطلاب</span>
            </a>
            <a class="menu-item" onclick="switchView('teachers-management', this)">
                <i class="fas fa-chalkboard-teacher"></i> <span>هيئة التدريس والمواد</span>
            </a>
            <a class="menu-item" onclick="switchView('control-room-section', this)" style="cursor: pointer;">
    <i class="fas fa-file-signature text-yellow-400"></i> <span>السجل الوسطي (الكنترول)</span>
</a>
<a class="menu-item" onclick="switchView('teachers-gradebook-section', this)" style="cursor: pointer;">
    <i class="fas fa-chalkboard-teacher text-pink-500"></i> <span>سجل درجات المدرسين</span>
</a>
            <?php endif; ?>


           <!-- ============================================== -->
<!-- قسم الماسح الصباحي (في القائمة الجانبية) -->
<!-- ============================================== -->
<?php if (hasAccess('scanner')): ?> 
<a class="menu-item" onclick="switchView('scanner-section', this)" style="cursor: pointer;">
    <i class="fas fa-qrcode text-green-400"></i> <span>الماسح الصباحي للحضور</span>
</a>
<?php endif; ?>


            <!-- ============================================== -->
            <!-- 3. باقي أقسام المدير -->
            <!-- ============================================== -->
            <?php if (hasAccess('dashboard')): ?>
            <a class="menu-item" onclick="switchView('teachers-reports', this)">
                <i class="fas fa-file-alt"></i> <span>تقارير وخطط المدرسين</span>
            </a>
            <a class="menu-item" onclick="switchView('labs-3d', this)">
                <i class="fas fa-cube"></i> <span>مختبرات الـ 3D</span>
            </a>
            <a class="menu-item" onclick="switchView('reports', this)">
                <i class="fas fa-chart-pie"></i> <span>التقارير والحضور</span>
            </a>
            <a class="menu-item" onclick="switchView('notifications', this)">
                <i class="fas fa-bell"></i> <span>مركز الإشعارات</span>
            </a>
            <a class="menu-item" onclick="switchView('parents', this)">
                <i class="fas fa-user-friends"></i> <span>شؤون أولياء الأمور</span>
            </a>
            <a href="schedule_settings.php" class="menu-item">
                <i class="fas fa-calendar-alt"></i> <span>إعدادات وبناء الجداول</span>
            </a>
            <?php endif; ?>


            <!-- ============================================== -->
            <!-- 4. قسم النقل (يظهر للمدير ومسؤول النقل) -->
            <!-- ============================================== -->
            <?php if (hasAccess('transport')): ?>
            <a href="manage_transport.php" class="menu-item">
                <i class="fas fa-bus"></i> <span>إدارة النقل والتتبع</span>
            </a>
            <?php endif; ?>
            
            
            <!-- ============================================== -->
            <!-- 5. قسم المالية (يظهر للمدير والمحاسب) -->
            <!-- ============================================== -->
            <?php if (hasAccess('finance')): ?>
            <a class="menu-item" onclick="switchView('financial-management', this)">
                <i class="fas fa-file-invoice-dollar" style="color: #10b981;"></i> <span>الإدارة المالية والأقساط</span>
            </a>
            <?php endif; ?>
            
            
            <!-- ============================================== -->
            <!-- 6. الإعدادات (تظهر للمدير فقط) -->
            <!-- ============================================== -->
            <?php if (hasAccess('dashboard')): ?>
            <a class="menu-item" onclick="switchView('settings', this)">
                <i class="fas fa-cogs"></i> <span>إعدادات المؤسسة</span>
            </a>
            <?php endif; ?>

        </div>
        <div class="sidebar-footer">
            <a href="logout.php" class="btn-logout"><i class="fas fa-sign-out-alt me-2"></i> تسجيل الخروج</a>
        </div>
    </aside>

    <main class="main-wrapper">
        
        <header class="topbar">
            <div style="font-weight: bold; font-size: 1.1rem; display:flex; align-items:center; gap:10px;">
                <?php if(!empty($sys_logo)): ?>
                    <img src="<?php echo htmlspecialchars($sys_logo); ?>" alt="Logo" style="height:35px; border-radius:5px;">
                <?php else: ?>
                    <i class="fas fa-university" style="color: var(--primary);"></i>
                <?php endif; ?>
                <?php echo htmlspecialchars($school_name); ?>
            </div>
            <div class="user-info">
    <div style="text-align: left; margin-left: 15px;">
        <span style="display: block; color: #fff; font-weight: bold;"><?php echo htmlspecialchars($manager_name); ?></span>
        <!-- هنا سيتم طباعة (المحاسب المالي) أو (المدير العام) باللون المميز للمدرسة -->
        <span style="display: block; color: <?php echo $sys_primary_color; ?>; font-size: 0.8rem; font-weight: 900;">
            <?php echo $role_title; ?>
        </span>
    </div>
    <div class="user-avatar" style="background: <?php echo $sys_secondary_color; ?>;"><i class="fas fa-user-tie"></i></div>
</div>
        </header>

         <div class="content-area">
            
            <!-- ============================================== -->
            <!-- 🔍 قسم الماسح الضوئي للحضور (المكان الصحيح!) 🔍 -->
            <!-- ============================================== -->
            <div id="scanner-section" class="view-section" style="display: none; animation: fadeIn 0.4s;">
                
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
                    <h1 class="page-title" style="margin: 0;"><i class="fas fa-qrcode" style="color: var(--primary);"></i> الماسح الضوئي السريع للحضور</h1>
                    <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid #10b981; color: #10b981; padding: 8px 15px; border-radius: 8px; font-weight: bold; font-size: 0.9rem;">
                        <i class="fas fa-circle fa-xs" style="animation: pulse 1.5s infinite;"></i> الكاميرا متصلة
                    </div>
                </div>

                <!-- بطاقة المحاكاة والماسح -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px;">
                    
                    <!-- صندوق الماسح والكاميرا -->
                    <div style="background: var(--card-bg); border: 1px solid var(--border-glass); border-radius: 15px; padding: 25px; text-align: center; backdrop-filter: blur(10px);">
                        <div style="width: 100%; height: 280px; background: #000; border-radius: 12px; border: 2px dashed var(--primary); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; margin-bottom: 20px;">
                            <i class="fas fa-camera fa-3x" style="color: var(--primary); margin-bottom: 15px; opacity: 0.8;"></i>
                            <p style="color: #94a3b8; font-weight: bold; margin: 0;">وجه كاميرا الباركود نحو الشاشة</p>
                            <div style="position: absolute; width: 100%; height: 3px; background: #22c55e; top: 0; animation: scanLine 2s infinite ease-in-out; box-shadow: 0 0 10px #22c55e;"></div>
                        </div>
                        
                        <div style="display: flex; gap: 10px;">
                            <input type="text" id="manual_student_id_input" class="custom-input" placeholder="أدخل معرف الطالب (RM-XX)..." style="flex: 1;" onkeypress="if(event.key === 'Enter') simulateScan(this.value)">
                            <button onclick="simulateScan(document.getElementById('manual_student_id_input').value)" class="btn-action" style="background: #10b981;"><i class="fas fa-check"></i> تسجيل حضور</button>
                        </div>
                    </div>

                    <!-- صندوق آخر طالب تم مسحه -->
                    <div style="background: var(--card-bg); border: 1px solid var(--border-glass); border-radius: 15px; padding: 25px; backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: space-between;">
                        <div>
                            <h3 style="margin-top: 0; color: #fff; border-bottom: 1px solid var(--border-glass); padding-bottom: 15px;"><i class="fas fa-history text-blue-400"></i> آخر العمليات المسجلة اليوم</h3>
                            
                            <div style="margin-top: 20px; background: rgba(0,0,0,0.3); padding: 20px; border-radius: 12px; border-left: 5px solid #10b981;">
                                <div style="display: flex; align-items: center; gap: 15px;">
                                    <div style="width: 50px; height: 50px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; border: 2px solid var(--primary);">
                                        <i class="fas fa-user-graduate"></i>
                                    </div>
                                    <div>
                                        <h4 style="margin: 0; color: #fff; font-size: 1.1rem;" id="scan-std-name">بانتظار عملية المسح...</h4>
                                        <p style="margin: 5px 0 0; color: #94a3b8; font-size: 0.85rem;" id="scan-std-details">قم بمسح هوية الطالب لتسجيل الحضور الفوري.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="academic-structure" class="view-section">
                <h1 class="page-title"><i class="fas fa-sitemap"></i> الهيكل الأكاديمي والتصنيفات</h1>

                <style>
                    /* تصميم البانر الاحترافي الجديد */
                    .academic-banner {
                        background: linear-gradient(135deg, rgba(255, 77, 121, 0.1) 0%, rgba(107, 16, 36, 0.3) 100%);
                        border: 1px solid rgba(255, 77, 121, 0.3);
                        border-radius: 20px;
                        padding: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        position: relative;
                        overflow: hidden;
                        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
                        margin-bottom: 30px;
                        backdrop-filter: blur(10px);
                    }
                    .banner-content {
                        flex: 1;
                        z-index: 2;
                    }
                    .banner-content h2 {
                        color: #fff;
                        font-size: 1.8rem;
                        margin-top: 0;
                        margin-bottom: 15px;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                    }
                    .banner-content p {
                        color: var(--text-muted);
                        font-size: 1.1rem;
                        line-height: 1.6;
                        margin-bottom: 25px;
                        max-width: 600px;
                    }
                    .banner-illustration {
                        font-size: 10rem;
                        color: rgba(255, 77, 121, 0.08);
                        position: absolute;
                        left: 20px; /* يسار الشاشة لأن الاتجاه RTL */
                        top: 50%;
                        transform: translateY(-50%);
                        z-index: 1;
                        pointer-events: none;
                    }
                    .pulse-btn {
                        background: var(--primary);
                        color: #fff;
                        padding: 15px 35px;
                        font-size: 1.1rem;
                        font-weight: bold;
                        border-radius: 12px;
                        border: none;
                        display: inline-flex;
                        align-items: center;
                        gap: 10px;
                        cursor: pointer;
                        box-shadow: 0 0 15px rgba(255, 77, 121, 0.4);
                        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    }
                    .pulse-btn:hover {
                        transform: translateY(-3px);
                        box-shadow: 0 8px 25px rgba(255, 77, 121, 0.6);
                        background: #ff3366;
                    }
                    
                    /* توافق مع شاشات الموبايل */
                    @media (max-width: 768px) {
                        .academic-banner { flex-direction: column; padding: 25px; text-align: center; }
                        .banner-illustration { position: static; transform: none; font-size: 6rem; margin-bottom: 20px; order: -1; }
                        .banner-content p { max-width: 100%; font-size: 1rem;}
                        .pulse-btn { width: 100%; justify-content: center; }
                    }
                </style>

                <div class="academic-banner">
                    <div class="banner-content">
                        <h2>بناء الهيكل التنظيمي للمؤسسة</h2>
                        <p>قم بتأسيس الهيكل الإداري لمؤسستك بسهولة. أضف المراحل الدراسية، الأقسام (علمي/أدبي)، والشعب بدقة. هذه الخطوة تعتبر العمود الفقري لضمان توزيع الطلاب والمدرسين بشكل صحيح ومنظم داخل النظام.</p>
                        <button class="pulse-btn" onclick="openTagsModal()">
                            <i class="fas fa-layer-group"></i> البدء بإدارة الهيكلية والتصنيفات
                        </button>
                    </div>
                    <div class="banner-illustration">
                        <i class="fas fa-project-diagram"></i>
                    </div>
                </div>

                <div id="tagsModal" class="modal-overlay" style="display: none;">
                    <div class="modal-content" style="max-width: 900px; padding:0; overflow:hidden;">
                        <div class="modal-header" style="padding:20px 30px; border-bottom:1px solid rgba(255,255,255,0.1);">
                            <h2 style="color:#fff;">إدارة التصنيفات والمجموعات <i class="fas fa-sitemap" style="color:var(--primary);"></i></h2>
                            <span class="close-modal" onclick="closeTagsModal()">&times;</span>
                        </div>
                        
                        <div style="display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; padding: 30px;">
                            <div style="border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; overflow: hidden; height: 350px; overflow-y: auto;">
                                <table style="width: 100%; border-collapse: collapse; text-align: center;">
                                    <thead>
                                        <tr>
                                            <th style="background:rgba(255,255,255,0.05); padding:15px; color:#fff;">المرحلة</th>
                                            <th style="background:rgba(255,255,255,0.05); padding:15px; color:#fff;">القسم</th>
                                            <th style="background:rgba(255,255,255,0.05); padding:15px; color:#fff;">الشعبة</th>
                                            <th style="background:rgba(255,255,255,0.05); padding:15px; color:#fff;">إجراء</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tagsTableBody">
                                        <tr><td colspan="4" style="color:#999;">جاري تحميل البيانات...</td></tr>
                                    </tbody>
                                </table>
                            </div>

                            <div>
                                <div style="font-size: 1.1rem; font-weight: bold; margin-bottom: 20px; color: #fff;">إضافة فئة جديدة</div>
                                <form id="schoolTagsForm" onsubmit="saveSchoolTag(event)">
                                    <div class="input-group">
                                        <label class="input-label">1. المرحلة أو الكروب</label>
                                        <input type="text" name="stage_name" class="custom-input" placeholder="مثال: الأول الثانوي..." required>
                                    </div>
                                    <div class="input-group mt-3">
                                        <label class="input-label">2. القسم أو المسار</label>
                                        <input type="text" name="department_name" class="custom-input" placeholder="مثال: علمي، عام، متميزين...">
                                    </div>
                                    <div class="input-group mt-3">
                                        <label class="input-label">3. الشعبة (اختياري)</label>
                                        <input type="text" name="section_name" class="custom-input" placeholder="مثال: أ، ب، مجموعة 1...">
                                    </div>
                                    <button type="submit" class="btn-action mt-4" style="width:100%;">حفظ التصنيفات المدخلة</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

           <div id="teachers-management" class="view-section" style="display: none; animation: fadeIn 0.4s;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
                    <h1 class="page-title" style="margin:0;"><i class="fas fa-chalkboard-teacher text-pink-500"></i> هيئة التدريس وتوزيع الحصص</h1>
                </div>

                <!-- فورم الإضافة -->
                <div class="config-section" style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,77,121,0.2); padding: 25px; border-radius: 15px; margin-bottom: 30px;">
                    <h2 style="color: #fff; font-size: 1.2rem; margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px;">تسجيل وتخصيص مدرس جديد</h2>
                    
                    <?php
                    // 🚀 جلب المراحل، الصفوف (الأقسام)، والشعب من قاعدة البيانات 🚀
                    $safe_school = $conn->real_escape_string($_SESSION['school_name'] ?? '');
                    
                    $stages_html = "<option value=''>-- اختر المرحلة --</option>";
                    $stg_res = $conn->query("SELECT DISTINCT stage_name FROM school_tags WHERE school_name = '$safe_school' AND stage_name != '' ORDER BY stage_name ASC");
                    if($stg_res) { while($row = $stg_res->fetch_assoc()) { $stages_html .= "<option value='".htmlspecialchars($row['stage_name'])."'>".htmlspecialchars($row['stage_name'])."</option>"; } }
                    
                    $depts_html = "<option value='عام'>بدون قسم (عام)</option>";
                    $dept_res = $conn->query("SELECT DISTINCT department_name FROM school_tags WHERE school_name = '$safe_school' AND department_name != '' ORDER BY department_name ASC");
                    if($dept_res) { while($row = $dept_res->fetch_assoc()) { $depts_html .= "<option value='".htmlspecialchars($row['department_name'])."'>".htmlspecialchars($row['department_name'])."</option>"; } }
                    
                    $sections_html = "<option value='الكل'>كل الشعب (عام)</option>";
                    $sec_res = $conn->query("SELECT DISTINCT section_name FROM school_tags WHERE school_name = '$safe_school' AND section_name != '' ORDER BY section_name ASC");
                    if($sec_res) { while($row = $sec_res->fetch_assoc()) { $sections_html .= "<option value='".htmlspecialchars($row['section_name'])."'>".htmlspecialchars($row['section_name'])."</option>"; } }
                    ?>

                    <form id="assignmentForm" onsubmit="submitAssignment(event)">
                        <input type="hidden" name="action" value="create">
                        <div class="form-grid" style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px;">
                            <div class="input-group">
                                <label class="input-label" style="color: #cbd5e1; font-size: 13px;">اختر المدرس</label>
                                <select name="teacher_id" id="assign_teacher_id" class="custom-input" style="background: #0f172a; border-color: #334155; color: white;" required>
                                    <option value="">-- اختر المدرس --</option>
                                    <?php
                                    $t_query = mysqli_query($conn, "SELECT id, display_name FROM teachers WHERE school_name = '$safe_school' ORDER BY display_name ASC");
                                    if($t_query && mysqli_num_rows($t_query) > 0) {
                                        while($t = mysqli_fetch_assoc($t_query)) {
                                            echo "<option value='".htmlspecialchars($t['id'])."'>".htmlspecialchars($t['display_name'])."</option>";
                                        }
                                    }
                                    ?>
                                </select>
                            </div>
                            <div class="input-group">
                                <label class="input-label" style="color: #cbd5e1; font-size: 13px;">المادة الدراسية المسندة</label>
                                <input type="text" name="subject" id="assign_subject" class="custom-input" style="background: #0f172a; border-color: #334155; color: white;" placeholder="مثال: الرياضيات" required>
                            </div>
                            <div class="input-group">
                                <label class="input-label" style="color: #cbd5e1; font-size: 13px;">المرحلة</label>
                                <select name="stage" id="assign_stage" class="custom-input" style="background: #0f172a; border-color: #334155; color: white;" required>
                                    <?php echo $stages_html; ?>
                                </select>
                            </div>
                            <div class="input-group">
                                <label class="input-label" style="color: #cbd5e1; font-size: 13px;">الصف / القسم</label>
                                <select name="department" id="assign_dept" class="custom-input" style="background: #0f172a; border-color: #334155; color: white;">
                                    <?php echo $depts_html; ?>
                                </select>
                            </div>
                            <div class="input-group">
                                <label class="input-label" style="color: #cbd5e1; font-size: 13px;">الشعبة</label>
                                <select name="section" id="assign_section" class="custom-input" style="background: #0f172a; border-color: #334155; color: white;">
                                    <?php echo $sections_html; ?>
                                </select>
                            </div>
                        </div>
                        <div style="text-align: left; margin-top: 20px;">
                            <button type="submit" class="btn-action" style="background: #ff4d79; padding: 12px 30px; font-size: 1rem;"><i class="fas fa-plus-circle"></i> تثبيت التخصيص والمادة</button>
                        </div>
                    </form>
                </div>

                <!-- جدول العرض -->
                <div style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; overflow: hidden;">
                    <table style="width: 100%; border-collapse: collapse; text-align: right;">
                        <thead style="background: rgba(255,77,121,0.1); border-bottom: 2px solid #ff4d79;">
                            <tr>
                                <th style="padding: 15px; color: #fff;">اسم المدرس</th>
                                <th style="padding: 15px; color: #fff;">المادة</th>
                                <th style="padding: 15px; color: #fff;">المرحلة</th>
                                <th style="padding: 15px; color: #fff;">الصف/القسم</th>
                                <th style="padding: 15px; color: #fff;">الشعبة</th>
                                <th style="padding: 15px; color: #fff; text-align: center;">الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody id="assignmentsTableBody">
                            <tr><td colspan="6" style="text-align:center; padding:30px; color:#94a3b8;"><i class="fas fa-spinner fa-spin"></i> جاري جلب التوزيعات...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- نافذة تعديل التخصيص المنبثقة (Modal) -->
            <div id="editAssignmentModal" class="modal-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 100000; align-items: center; justify-content: center; padding: 20px;">
                <div class="modal-content-light" style="background: #0f172a; border: 1px solid #3b82f6; width: 100%; max-width: 600px; border-radius: 15px; padding: 30px; position: relative;">
                    <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #334155; padding-bottom: 15px; margin-bottom: 20px;">
                        <h3 style="margin: 0; color: #3b82f6; font-size: 1.3rem;"><i class="fas fa-edit"></i> تعديل تخصيص المدرس</h3>
                        <span style="font-size: 28px; color: #94a3b8; cursor: pointer;" onclick="document.getElementById('editAssignmentModal').style.display='none'">&times;</span>
                    </div>
                    <form id="editAssignmentForm" onsubmit="submitAssignment(event, true)">
                        <input type="hidden" name="action" value="update">
                        <input type="hidden" name="assignment_id" id="edit_assign_id">
                        
                        <div class="input-group" style="margin-bottom: 15px;">
                            <label class="input-label" style="color: #cbd5e1;">اختر المدرس</label>
                            <select name="teacher_id" id="edit_teacher_id" class="custom-input" style="background: #1e293b; border-color: #475569; color: white;" required></select>
                        </div>
                        <div class="input-group" style="margin-bottom: 15px;">
                            <label class="input-label" style="color: #cbd5e1;">المادة الدراسية</label>
                            <input type="text" name="subject" id="edit_subject" class="custom-input" style="background: #1e293b; border-color: #475569; color: white;" required>
                        </div>
                        <div class="input-group" style="margin-bottom: 15px;">
                            <label class="input-label" style="color: #cbd5e1;">المرحلة</label>
                            <select name="stage" id="edit_stage" class="custom-input" style="background: #1e293b; border-color: #475569; color: white;" required>
                                <?php echo $stages_html; ?>
                            </select>
                        </div>
                        <div class="input-group" style="margin-bottom: 15px;">
                            <label class="input-label" style="color: #cbd5e1;">الصف / القسم</label>
                            <select name="department" id="edit_dept" class="custom-input" style="background: #1e293b; border-color: #475569; color: white;">
                                <?php echo $depts_html; ?>
                            </select>
                        </div>
                        <div class="input-group" style="margin-bottom: 25px;">
                            <label class="input-label" style="color: #cbd5e1;">الشعبة</label>
                            <select name="section" id="edit_section" class="custom-input" style="background: #1e293b; border-color: #475569; color: white;">
                                <?php echo $sections_html; ?>
                            </select>
                        </div>
                        <button type="submit" class="btn-action" style="width: 100%; background: #3b82f6; padding: 12px;"><i class="fas fa-save"></i> حفظ التعديلات</button>
                    </form>
                </div>
            </div>
            
            <script>
                // 1. جلب التوزيعات وعرضها في الجدول
                function loadAssignments() {
                    const tbody = document.getElementById('assignmentsTableBody');
                    if(!tbody) return;
                    
                    let fd = new FormData();
                    fd.append('action', 'read');
                    
                    fetch('manage_assignments.php', { method: 'POST', body: fd })
                    .then(res => res.json())
                    .then(data => {
                        if(data.status === 'success') {
                            tbody.innerHTML = data.html;
                        } else {
                            tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; color:red;">خطأ في جلب البيانات</td></tr>';
                        }
                    })
                    .catch(err => {
                        tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; color:red;">يرجى التأكد من وجود ملف manage_assignments.php</td></tr>';
                    });
                }

                // 2. إرسال الفورم (الإضافة أو التعديل) بدون تحديث الصفحة
                function submitAssignment(e, isEdit = false) {
                    e.preventDefault(); // هذا السطر يمنع تحديث الصفحة وظهور البيانات في الرابط!
                    
                    const form = e.target;
                    const fd = new FormData(form);
                    const btn = form.querySelector('button[type="submit"]');
                    const origHtml = btn.innerHTML;
                    
                    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...';
                    btn.disabled = true;

                    fetch('manage_assignments.php', { method: 'POST', body: fd })
                    .then(res => res.json())
                    .then(data => {
                        alert(data.message);
                        if (data.status === 'success') {
                            if (isEdit) {
                                document.getElementById('editAssignmentModal').style.display = 'none';
                            } else {
                                form.reset(); // تفريغ الحقول بعد الإضافة بنجاح
                            }
                            loadAssignments(); // تحديث الجدول فوراً
                        }
                    })
                    .catch(err => alert("حدث خطأ في الاتصال بالسيرفر!"))
                    .finally(() => { btn.innerHTML = origHtml; btn.disabled = false; });
                }

                // 3. حذف تخصيص
                function deleteAssignment(id) {
                    if(confirm('هل أنت متأكد من حذف هذا التخصيص؟ سيتم فك ارتباط الطلاب بهذا المدرس.')) {
                        let fd = new FormData();
                        fd.append('action', 'delete');
                        fd.append('id', id);
                        
                        fetch('manage_assignments.php', { method: 'POST', body: fd })
                        .then(res => res.json())
                        .then(data => {
                            alert(data.message);
                            if(data.status === 'success') loadAssignments();
                        });
                    }
                }

                // 4. فتح نافذة التعديل وتعبئة البيانات
                function openEditAssignmentModal(id, teacherId, subject, stage, dept, section) {
                    document.getElementById('edit_teacher_id').innerHTML = document.getElementById('assign_teacher_id').innerHTML;
                    
                    document.getElementById('edit_assign_id').value = id;
                    document.getElementById('edit_teacher_id').value = teacherId;
                    document.getElementById('edit_subject').value = subject;
                    document.getElementById('edit_stage').value = stage;
                    document.getElementById('edit_dept').value = dept;
                    document.getElementById('edit_section').value = section;
                    
                    document.getElementById('editAssignmentModal').style.display = 'flex';
                }

                // 5. تشغيل الجلب التلقائي عند تحميل الصفحة أو الضغط على القائمة
                document.addEventListener('DOMContentLoaded', () => {
                    loadAssignments(); // جلب الجدول فور فتح الصفحة
                    
                    // إذا ضغط على القائمة الجانبية، حدّث الجدول
                    const targetMenuBtn = document.querySelector('a[onclick*="teachers-management"]');
                    if(targetMenuBtn) {
                        targetMenuBtn.addEventListener('click', loadAssignments);
                    }
                });
            </script>

           <!-- ============================================== -->
<!-- واجهة تشغيل الاسكنر داخل لوحة الإدارة -->
<!-- ============================================== -->
<div id="attendance-scanner" class="view-section" style="display: none;">
    <h1 class="page-title"><i class="fas fa-qrcode"></i> كابينة الحضور الصباحي والتحضير بالباركود</h1>
    
    <div class="config-section" style="text-align: center; padding: 40px 20px; background: rgba(0,0,0,0.2); border: 1px solid rgba(34, 197, 94, 0.3);">
        <i class="fas fa-mobile-alt" style="font-size: 4rem; color: #10b981; margin-bottom: 20px;"></i>
        <h3 style="color: #fff; margin-bottom: 15px;">جاهز لاستقبال الطلاب!</h3>
        <p style="color:var(--text-muted); max-width: 600px; margin: 0 auto 30px auto; line-height: 1.6;">
            قم بفتح واجهة الكاميرا لمسح هويات الطلاب في الصباح الباكر لتثبيت حضورهم. النافذة ستفتح بشكل منفصل لتسهيل العمل على الشاشات والموبايل.
        </p>
        
        <!-- 🚀 هذا هو الزر الذي يفتح الـ Popup 🚀 -->
        <button type="button" onclick="openScannerApp()" class="btn-action" style="display:inline-block; padding:15px 40px; font-size:1.2rem; font-weight: 900; background:#10b981; color:#fff; border-radius: 50px; box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4); border: none; cursor: pointer; transition: 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
            <i class="fas fa-camera"></i> تشغيل كاميرا الماسح الذكي
        </button>
    </div>
</div>

            <div id="teachers-reports" class="view-section">
    <h1 class="page-title"><i class="fas fa-file-alt"></i> مراقبة واعتماد خطط وأسئلة الامتحانات</h1>
    <div class="data-panel">
        <h3><i class="fas fa-tasks"></i> الملفات والطلبات الواردة من المدرسين</h3>
        <div style="overflow-x: auto;">
            <table style="width:100%; border-collapse: collapse; text-align:right; color:#fff;">
                <thead>
                    <tr style="background: rgba(255,255,255,0.05); border-bottom: 2px solid var(--primary);">
                        <th style="padding:12px;">اسم المدرس</th>
                        <th style="padding:12px;">نوع الملف</th>
                        <th style="padding:12px;">المادة والصف</th>
                        <th style="padding:12px;">تاريخ الرفع</th>
                        <th style="padding:12px;">حالة الاعتماد</th>
                        <th style="padding:12px; text-align:center;">الإجراءات</th>
                    </tr>
                </thead>
                <!-- 🚀 هنا التغيير: أضفنا الـ ID وتركنا الجدول فارغاً ليتم ملؤه من الداتابيز 🚀 -->
                <tbody id="admin-requests-tbody">
                    <tr>
                        <td colspan="6" style="text-align:center; padding:20px; color:#f39c12;">
                            <i class="fas fa-spinner fa-spin"></i> جاري جلب الطلبات من قاعدة البيانات...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

         <!-- ========================================== -->
            <!-- 🔴 غرفة الإشراف والتحكم بالبثوث الحية 🔴 -->
            <!-- ========================================== -->
            <div id="live-monitor" class="view-section" style="display: none;">
                
                <style>
                    /* ستايل مخصص لضمان ظهور الغرفة بشكل متناسق ومذهل */
                    .live-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid #6b1437; padding-bottom: 15px; }
                    .live-header h1 { margin: 0; color: #fff; font-size: 24px; font-weight: bold; }
                    .btn-refresh { background: #3b82f6; color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 15px; box-shadow: 0 4px 6px rgba(59,130,246,0.3); }
                    .btn-refresh:hover { background: #2563eb; }
                    .info-box { background: rgba(255,77,121,0.05); border: 1px solid rgba(255,77,121,0.2); padding: 15px; border-radius: 8px; margin-bottom: 25px; color: #cbd5e1; font-size: 14px; }
                    .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
                </style>

                <div class="live-header">
                    <h1><i class="fas fa-desktop" style="color: #ff4d79; margin-left: 10px;"></i> غرفة الإشراف والتحكم بالبثوث الحية</h1>
                    <button onclick="fetchActiveStreams()" class="btn-refresh">
                        <i class="fas fa-sync-alt"></i> تحديث البثوث
                    </button>
                </div>

                <div class="info-box">
                    <i class="fas fa-info-circle" style="color: #ff4d79; margin-left: 5px;"></i> يعرض هذا القسم جميع المحاضرات الجارية حالياً. يتم تحديث البيانات وتنبيهك تلقائياً عند بدء أي مدرس للبث.
                </div>

                <!-- شبكة البثوث الحقيقية (سيتم ملؤها بالجافاسكريبت) -->
                <div id="live-streams-grid" class="grid-cards">
                    <div style="grid-column: 1 / -1; text-align: center; padding: 50px; color: #64748b;">
                        <i class="fas fa-spinner fa-spin fa-2x mb-3" style="color: #ff4d79; margin-bottom: 15px; display: block;"></i>
                        <span style="font-size: 16px; font-weight: bold;">جاري الاتصال بقاعدة البيانات والبحث عن بثوث نشطة...</span>
                    </div>
                </div>

            </div>
            
            
            <!-- ========================================== -->
            <!-- 📡 قسم إدارة البث المباشر والجدولة 📡 -->
            <!-- ========================================== -->
            <div id="live-rooms" class="view-section" style="display: none; padding: 20px; color: #fff;">
                
                <?php
                // 🚀 جلب قائمة الكادر التعليمي الخاص بهذه المدرسة فقط من قاعدة البيانات
                $admin_school = isset($_SESSION['school_name']) ? $conn->real_escape_string($_SESSION['school_name']) : '';
                $teachers_list = "";
                if (!empty($admin_school)) {
                    $t_query = $conn->query("SELECT teacher_name, display_name, title FROM teachers WHERE school_name = '$admin_school'");
                    if ($t_query && $t_query->num_rows > 0) {
                        while($t_row = $t_query->fetch_assoc()) {
                            $display = htmlspecialchars($t_row['display_name']) . " (" . htmlspecialchars($t_row['title']) . ")";
                            $teachers_list .= "<option value='" . htmlspecialchars($t_row['teacher_name']) . "'>$display</option>";
                        }
                    } else {
                        $teachers_list = "<option value=''>لا يوجد كادر مسجل حالياً</option>";
                    }
                }
                ?>

                <style>
                    .live-mgr-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #ef4444; padding-bottom: 15px; margin-bottom: 25px; }
                    .live-mgr-header h1 { margin: 0; font-size: 24px; color: #f8fafc; font-weight: bold; }
                    .admin-broadcast-btn { background: #ef4444; color: white; padding: 12px 24px; border-radius: 8px; font-weight: bold; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.3s; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); font-size: 15px; }
                    .admin-broadcast-btn:hover { background: #dc2626; transform: translateY(-2px); }
                    .live-mgr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 30px; }
                    .live-card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 25px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
                    .live-card h3 { color: #38bdf8; margin-top: 0; border-bottom: 1px solid #334155; padding-bottom: 12px; margin-bottom: 20px; font-size: 18px; }
                    .form-group-live { margin-bottom: 18px; }
                    .form-group-live label { display: block; color: #cbd5e1; margin-bottom: 8px; font-size: 14px; font-weight: bold; }
                    .form-group-live input, .form-group-live select { width: 100%; padding: 12px; border-radius: 8px; background: #0f172a; border: 1px solid #475569; color: #fff; outline: none; transition: 0.3s; }
                    .form-group-live input:focus, .form-group-live select:focus { border-color: #38bdf8; }
                    .btn-submit-live { background: #3b82f6; color: white; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; width: 100%; font-weight: bold; font-size: 15px; transition: 0.2s; }
                    .btn-submit-live:hover { background: #2563eb; }
                    .table-live-dark { width: 100%; border-collapse: collapse; text-align: right; }
                    .table-live-dark th { background: #0f172a; color: #94a3b8; padding: 15px; border-bottom: 2px solid #334155; font-size: 14px; }
                    .table-live-dark td { padding: 15px; border-bottom: 1px solid #334155; color: #e2e8f0; font-size: 14px; }
                    .table-live-dark tr:hover { background: rgba(255, 255, 255, 0.02); }
                </style>

                <div class="live-mgr-header">
                    <h1><i class="fas fa-broadcast-tower" style="color: #ef4444; margin-left: 10px;"></i> إدارة البث المباشر وجدولة الحصص</h1>
                    
                    <!-- 🚀 زر بدء بث الإدارة الفعلي -->
                    <button class="admin-broadcast-btn" onclick="startAdminLiveSession()">
                        <i class="fas fa-video"></i> بدء بث الإدارة العام (اجتماع/إعلان)
                    </button>
                </div>

                <div class="live-mgr-cards">
                    <!-- كارت: جدولة بث جديد -->
                    <div class="live-card">
                        <h3><i class="fas fa-calendar-plus" style="margin-left: 8px;"></i> جدولة بث أو حصة جديدة</h3>
                        
                        <div class="form-group-live">
                            <label>عنوان البث (الحدث أو الموضوع)</label>
                            <input type="text" id="schedule_title" placeholder="مثال: اجتماع أولياء الأمور الشهري...">
                        </div>
                        
                        <div class="form-group-live">
                            <label>الفئة المستهدفة (لمن هذا البث؟)</label>
                            <select id="schedule_target">
                                <option value="students">الطلاب (حسب المرحلة/القسم)</option>
                                <option value="parents" style="color: #f59e0b; font-weight: bold;">أولياء الأمور (اجتماع عام)</option>
                                <option value="teachers" style="color: #38bdf8; font-weight: bold;">الكادر التدريسي والموظفين</option>
                                <option value="all">عام (لجميع منتسبي المدرسة)</option>
                            </select>
                        </div>

                        <div class="form-group-live">
                            <label>المسؤول عن البث (المضيف)</label>
                            <select id="schedule_host">
                                <option value="">اختر المضيف من القائمة...</option>
                                <option value="ADMIN_DIRECT" style="background: #334155; color: #fff;">إدارة المدرسة (أنا)</option>
                                <?php echo $teachers_list; // 🚀 طباعة المدرسين الحقيقيين من الداتا بيز ?>
                            </select>
                        </div>

                        <div class="form-group-live">
                            <label>تاريخ ووقت البث</label>
                            <input type="datetime-local" id="schedule_time">
                        </div>
                        
                        <button class="btn-submit-live" onclick="saveLiveSchedule()"><i class="fas fa-save" style="margin-left: 5px;"></i> حفظ وإرسال الإشعارات</button>
                    </div>

                    <!-- كارت: قائمة البثوث المجدولة -->
                    <div class="live-card" style="grid-column: span 2;">
                        <h3><i class="fas fa-list" style="margin-left: 8px;"></i> جدول البثوث القادمة</h3>
                        <div style="overflow-x: auto;">
                            <table class="table-live-dark">
                                <thead>
                                    <tr>
                                        <th>عنوان البث</th>
                                        <th>الفئة المستهدفة</th>
                                        <th>المضيف</th>
                                        <th>الموعد</th>
                                        <th>الحالة</th>
                                        <th style="text-align: center;">إجراءات</th>
                                    </tr>
                                </thead>
                                <tbody id="live_schedules_tbody">
                                    <tr>
                                        <td colspan="6" style="text-align: center; color: #64748b; padding: 40px;">
                                            <i class="fas fa-calendar-times fa-2x mb-3" style="display: block;"></i> 
                                            لا توجد بثوث مجدولة حالياً.
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <script>
                    // 🚀 دالة فتح بث مباشر فوري للإدارة
                    function startAdminLiveSession() {
                        const schoolId = '<?php echo isset($_SESSION['school_id']) ? $_SESSION['school_id'] : "ADMIN"; ?>';
                        const adminTid = 'ADMIN-' + schoolId + '-' + Math.floor(Math.random() * 10000);
                        window.open(`live_v2/index.php?tid=${adminTid}`, '_blank');
                    }

                    // 🚀 دالة حفظ الجدولة وإرسال الإشعارات الفعّالة للطلاب وأولياء الأمور والمدرسين
                    function saveLiveSchedule() {
                        const titleInput = document.getElementById('schedule_title');
                        const targetInput = document.getElementById('schedule_target');
                        const hostInput = document.getElementById('schedule_host');
                        const timeInput = document.getElementById('schedule_time');
                        const submitBtn = document.querySelector('.btn-submit-live');

                        if(!titleInput.value || !hostInput.value || !timeInput.value) {
                            alert("⚠️ الرجاء تعبئة جميع الحقول المطلوبة أولاً!");
                            return;
                        }

                        // تغيير شكل الزر ليعطي إيحاء بالتحميل
                        const originalText = submitBtn.innerHTML;
                        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الإرسال...';
                        submitBtn.disabled = true;

                        const formData = new FormData();
                        formData.append('title', titleInput.value);
                        formData.append('target', targetInput.value);
                        formData.append('host', hostInput.value);
                        formData.append('time', timeInput.value);

                        fetch('api_admin_live_schedule.php', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'success') {
                                alert("✅ " + data.message);
                                // تفريغ الحقول بعد النجاح
                                titleInput.value = '';
                                timeInput.value = '';
                            } else {
                                alert("❌ خطأ: " + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert("❌ حدث خطأ في الاتصال بالخادم.");
                        })
                        .finally(() => {
                            // إعادة الزر لحالته الطبيعية
                            submitBtn.innerHTML = originalText;
                            submitBtn.disabled = false;
                        });
                    }
                </script>
            </div>
            
            
            <div id="dashboard" class="view-section active">
                <h1 class="page-title"><i class="fas fa-chart-line"></i> نظرة عامة على نشاط المؤسسة</h1>
                
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon blue"><i class="fas fa-users"></i></div>
                        <div class="stat-details"><h4>إجمالي الطلاب</h4><h2>1,250</h2></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon pink"><i class="fas fa-satellite-dish"></i></div>
                        <div class="stat-details"><h4>غرف البث النشطة الآن</h4><h2>8</h2></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon green"><i class="fas fa-chalkboard-teacher"></i></div>
                        <div class="stat-details"><h4>المدرسين المتاحين</h4><h2>45</h2></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon purple"><i class="fas fa-cube"></i></div>
                        <div class="stat-details"><h4>تجارب 3D اليوم</h4><h2>12</h2></div>
                    </div>
                </div>

                <div class="data-panel">
                    <h3><i class="fas fa-history" style="color: var(--primary); margin-left: 10px;"></i> أحدث النشاطات في المنصة</h3>
                    <div class="empty-state">
                        <i class="fas fa-clipboard-list"></i>
                        <p>لا توجد نشاطات مسجلة اليوم حتى الآن. سيتم عرض دخول المدرسين وبدء الحصص هنا.</p>
                    </div>
                </div>
            </div>

            <div id="teachers" class="view-section">
                <h1 class="page-title"><i class="fas fa-chalkboard-teacher"></i> هيئة التدريس</h1>
                <div class="data-panel">
                    <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px; margin-bottom: 20px;">
                        <h3 style="border: none; margin: 0; padding: 0;">قائمة المدرسين المسجلين</h3>
                        <button class="btn-action"><i class="fas fa-user-plus"></i> إضافة مدرس جديد</button>
                    </div>
                    <div class="empty-state">
                        <i class="fas fa-users-slash"></i>
                        <p>لم يتم جلب بيانات المدرسين من قاعدة البيانات بعد. (سيتم ربطها برمجياً لاحقاً)</p>
                    </div>
                </div>
            </div>

            <div id="students" class="view-section">
                <h1 class="page-title"><i class="fas fa-user-graduate"></i> شؤون الطلاب</h1>
                <div class="data-panel"><div class="empty-state"><i class="fas fa-id-card"></i><p>واجهة إدارة الطلاب، الصلاحيات، والجداول الدراسية.</p></div></div>
            </div>

            <div id="labs-3d" class="view-section">
                <h1 class="page-title"><i class="fas fa-cube"></i> مكتبة المجسمات ومختبرات الـ 3D</h1>
                <div class="data-panel"><div class="empty-state"><i class="fas fa-boxes"></i><p>إدارة ملفات (GLB) للمجسمات ثلاثية الأبعاد وتخصيصها للمناهج.</p></div></div>
            </div>

           <div id="reports" class="view-section">
                <!-- 🎨 ستايل مخصص لضمان ترتيب القسم 100% 🎨 -->
                <style>
                    .rep-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #6b1437; padding-bottom: 15px; }
                    .rep-btn-print { background: #ff4d79; color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; }
                    .rep-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-bottom: 25px; }
                    .rep-stat-card { background: #1a0b12; border: 1px solid #6b1437; padding: 20px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
                    .rep-stat-card h3 { margin: 5px 0 0 0; font-size: 26px; font-weight: 900; }
                    .rep-stat-card p { margin: 0; font-size: 12px; color: #94a3b8; font-weight: bold; }
                    .rep-icon-box { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 24px; }
                    
                    .rep-filters-box { background: #090204; border: 1px solid #6b1437; padding: 20px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
                    .rep-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; align-items: end; }
                    .rep-input-group label { display: block; font-size: 12px; color: #94a3b8; font-weight: bold; margin-bottom: 8px; text-align: right; }
                    .rep-input-group input, .rep-input-group select { width: 100%; padding: 12px; background: #1a0b12; border: 1px solid #3f0f20; color: white; border-radius: 8px; outline: none; box-sizing: border-box; }
                    .rep-btn-search { background: #3b82f6; color: white; border: none; width: 100%; padding: 12px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 15px; }
                    
                    .rep-table-wrapper { background: #090204; border: 1px solid #6b1437; border-radius: 12px; overflow: hidden; }
                    .rep-table { width: 100%; border-collapse: collapse; text-align: right; color: white; font-size: 14px; }
                    .rep-table th { background: rgba(255,77,121,0.1); border-bottom: 2px solid #ff4d79; padding: 15px; font-weight: bold; }
                    .rep-table td { padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); }
                    /* 🚀 إصلاح مشكلة شريط التمرير (السكرول) للمحتوى 🚀 */
body, html {
    overflow-y: auto !important; 
}
main, .main-content, .view-section {
    overflow-y: visible !important;
    padding-bottom: 50px !important; /* إعطاء مساحة إضافية في الأسفل لكي لا يختفي المحتوى */
}
                </style>

                <div class="rep-header">
                    <h1 style="margin: 0; color: #fff; font-size: 24px;"><i class="fas fa-chart-pie" style="color: #ff4d79;"></i> التقارير والحضور</h1>
                    <button onclick="printAttendanceReport()" class="rep-btn-print"><i class="fas fa-print"></i> طباعة التقرير</button>
                </div>
                
                <!-- 📊 بطاقات الإحصائيات السريعة 📊 -->
                <div class="rep-stats-grid">
                    <div class="rep-stat-card">
                        <div>
                            <p>إجمالي النتائج</p>
                            <h3 style="color: #fff;" id="rep-total-students">0</h3>
                        </div>
                        <div class="rep-icon-box" style="background: rgba(59,130,246,0.2); color: #3b82f6;"><i class="fas fa-users"></i></div>
                    </div>
                    <div class="rep-stat-card" style="border-color: rgba(16,185,129,0.5);">
                        <div>
                            <p>حاضر</p>
                            <h3 style="color: #4ade80;" id="rep-present">0</h3>
                        </div>
                        <div class="rep-icon-box" style="background: rgba(16,185,129,0.2); color: #4ade80;"><i class="fas fa-check-circle"></i></div>
                    </div>
                    <div class="rep-stat-card" style="border-color: rgba(239,68,68,0.5);">
                        <div>
                            <p>غائب</p>
                            <h3 style="color: #f87171;" id="rep-absent">0</h3>
                        </div>
                        <div class="rep-icon-box" style="background: rgba(239,68,68,0.2); color: #f87171;"><i class="fas fa-times-circle"></i></div>
                    </div>
                    <div class="rep-stat-card" style="border-color: rgba(245,158,11,0.5);">
                        <div>
                            <p>مجاز / متأخر</p>
                            <h3 style="color: #fbbf24;" id="rep-late">0</h3>
                        </div>
                        <div class="rep-icon-box" style="background: rgba(245,158,11,0.2); color: #fbbf24;"><i class="fas fa-clock"></i></div>
                    </div>
                </div>

                <!-- 🔍 فلاتر البحث 🔍 -->
                <div class="rep-filters-box">
                    <div class="rep-filters-grid">
                        <div class="rep-input-group">
                            <label>من تاريخ</label>
                            <input type="date" id="rep-date-from">
                        </div>
                        <div class="rep-input-group">
                            <label>إلى تاريخ</label>
                            <input type="date" id="rep-date-to">
                        </div>
                        <div class="rep-input-group">
                            <label>المرحلة الدراسية</label>
                            <select id="rep-stage">
                                <option value="">الكل</option>
                                <option value="الابتدائية">الابتدائية</option>
                                <option value="المتوسطة">المتوسطة</option>
                                <option value="الثانوية">الثانوية</option>
                            </select>
                        </div>
                        <div class="rep-input-group">
                            <label>حالة الحضور</label>
                            <select id="rep-status">
                                <option value="">الكل</option>
                                <option value="غائب">غائب فقط</option>
                                <option value="حاضر">حاضر فقط</option>
                                <option value="مجاز">مجاز / متأخر</option>
                            </select>
                        </div>
                        <div>
                            <button onclick="fetchAttendanceReportData()" class="rep-btn-search"><i class="fas fa-search"></i> عرض التقرير</button>
                        </div>
                    </div>
                </div>

                <!-- 📝 جدول التقرير 📝 -->
                <div class="rep-table-wrapper">
                    <div style="overflow-x:auto;">
                        <table class="rep-table" id="report-print-area">
                            <thead>
                                <tr>
                                    <th>م</th>
                                    <th>اسم الطالب</th>
                                    <th>المرحلة والشعبة</th>
                                    <th>التاريخ</th>
                                    <th>الحالة</th>
                                    <th>الملاحظات</th>
                                </tr>
                            </thead>
                            <tbody id="reports-tbody">
                                <tr>
                                    <td colspan="6" style="text-align:center; padding:50px; color:#64748b; font-weight:bold; font-size:16px;">
                                        <i class="fas fa-filter" style="font-size:40px; margin-bottom:15px; display:block; opacity:0.5;"></i>
                                        حدد الفلاتر واضغط على "عرض التقرير" لجلب البيانات
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            </div>

            <?php
            // 🚀 جلب الوسوم للإشعارات بحماية تامة 🚀
            $n_stages_q = $conn->query("SELECT DISTINCT stage_name FROM school_tags WHERE stage_name != ''");
            $n_depts_q = $conn->query("SELECT DISTINCT department_name FROM school_tags WHERE department_name != ''");
            $n_sections_q = $conn->query("SELECT DISTINCT section_name FROM school_tags WHERE section_name != ''");
            
            $current_school_safe = $conn->real_escape_string($school_name);
            $recent_notifs = $conn->query("SELECT * FROM notifications WHERE school_name = '$current_school_safe' AND (student_id LIKE 'جميع%' OR student_id LIKE 'مخصص:%') ORDER BY id DESC LIMIT 15");
            ?>

            <div id="notifications" class="view-section">
    <h1 class="page-title"><i class="fas fa-bell"></i> مركز الإشعارات والتواصل المباشر</h1>
    
    <div class="config-section">
        <h2 class="section-title"><span>إرسال رسالة جديدة</span> <i class="fas fa-paper-plane" style="color: var(--primary);"></i></h2>
        
        <form id="notificationForm" onsubmit="sendNotificationMsg(event)">
            <div class="form-grid" style="margin-bottom: 25px;">
                <div class="input-group full-width">
                    <label class="input-label" style="margin-bottom: 10px;">طريقة الإرسال (يمكن اختيار الاثنين معاً)</label>
                    <div style="display: flex; gap: 20px; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">
                        <label style="cursor: pointer; display: flex; align-items: center; gap: 8px; color: #fff;">
                            <input type="checkbox" id="chk_send_platform" checked style="accent-color: var(--primary); width: 18px; height: 18px;"> 
                            <i class="fas fa-bell" style="color: var(--primary);"></i> إشعار داخل المنصة
                        </label>
                        <label style="cursor: pointer; display: flex; align-items: center; gap: 8px; color: #25D366;">
                            <input type="checkbox" id="chk_send_whatsapp" style="accent-color: #25D366; width: 18px; height: 18px;"> 
                            <i class="fab fa-whatsapp"></i> رسالة واتساب
                        </label>
                    </div>
                </div>
            </div>
            
                        <div class="form-grid">
                            <div class="input-group full-width">
                                <label class="input-label">الفئة المستهدفة (لمن تريد الإرسال؟)</label>
                                <select name="target_audience" id="notif_target" class="custom-input" style="cursor: pointer;" 
                                        onchange="var div = document.getElementById('custom_filters_div'); if(div) { div.style.display = (this.value === 'custom') ? 'flex' : 'none'; }">
                                    <option value="" disabled selected>-- اختر الفئة المستهدفة --</option>
                                    <option value="all_teachers">👨‍🏫 جميع المدرسين</option>
                                    <option value="all_students">🎓 جميع الطلاب</option>
                                    <option value="all_parents">👨‍👩‍👦 جميع أولياء الأمور</option>
                                    <option value="custom">⚙️ تحديد مخصص (مرحلة أو شعبة معينة)...</option>
                                </select>
                            </div>

                            <div id="custom_filters_div" class="input-group full-width" style="display: none; gap: 10px; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; border: 1px dashed var(--primary);">
                                <div style="flex:1;">
                                    <label class="input-label" style="font-size:12px; margin-bottom:5px;">المرحلة</label>
                                    <select name="target_stage" class="custom-input" style="padding:8px;">
                                        <option value="الكل">كل المراحل</option>
                                        <?php if($n_stages_q) while($s = $n_stages_q->fetch_assoc()) echo "<option value='".htmlspecialchars($s['stage_name'])."'>".htmlspecialchars($s['stage_name'])."</option>"; ?>
                                    </select>
                                </div>
                                <div style="flex:1;">
                                    <label class="input-label" style="font-size:12px; margin-bottom:5px;">القسم/الصف</label>
                                    <select name="target_dept" class="custom-input" style="padding:8px;">
                                        <option value="الكل">كل الصفوف</option>
                                        <?php if($n_depts_q) while($d = $n_depts_q->fetch_assoc()) echo "<option value='".htmlspecialchars($d['department_name'])."'>".htmlspecialchars($d['department_name'])."</option>"; ?>
                                    </select>
                                </div>
                                <div style="flex:1;">
                                    <label class="input-label" style="font-size:12px; margin-bottom:5px;">الشعبة</label>
                                    <select name="target_section" class="custom-input" style="padding:8px;">
                                        <option value="الكل">كل الشعب</option>
                                        <?php if($n_sections_q) while($sec = $n_sections_q->fetch_assoc()) echo "<option value='".htmlspecialchars($sec['section_name'])."'>".htmlspecialchars($sec['section_name'])."</option>"; ?>
                                    </select>
                                </div>
                            </div>

                            <div class="input-group full-width">
                                <label class="input-label">عنوان الرسالة (يظهر في إشعارات المنصة فقط)</label>
                                <input type="text" name="msg_title" class="custom-input" placeholder="مثال: تبليغ هام بشأن امتحانات نصف السنة">
                            </div>

                            <div class="input-group full-width">
                                <label class="input-label">نص الرسالة</label>
                                <textarea name="msg_body" class="custom-input" rows="4" placeholder="اكتب تفاصيل الإشعار أو رسالة الواتساب هنا..." required></textarea>
                            </div>
                        </div>

                        <div class="action-buttons">
                            <button type="submit" class="btn-action" style="width: 100%; font-size: 1.1rem; padding: 15px;"><i class="fas fa-paper-plane"></i> إرسال الرسالة الآن</button>
                        </div>
                    </form>
                </div>
                
                <div class="data-panel">
                    <h3><i class="fas fa-history" style="color: var(--primary); margin-left: 10px;"></i> سجل الرسائل المرسلة</h3>
                    <div style="overflow-x: auto;">
                        <table style="width: 100%; border-collapse: collapse; text-align: right; color: #fff;">
                            <thead>
                                <tr style="background: rgba(255,255,255,0.05); border-bottom: 2px solid var(--primary);">
                                    <th style="padding:12px;">العنوان</th>
                                    <th style="padding:12px;">محتوى الرسالة</th>
                                    <th style="padding:12px;">الفئة المستهدفة</th>
                                    <th style="padding:12px;">التاريخ</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if($recent_notifs && $recent_notifs->num_rows > 0): ?>
                                    <?php while($n = $recent_notifs->fetch_assoc()): ?>
                                        <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
                                            <td style="padding:12px; font-weight:bold; color:#f8fafc;"><?= htmlspecialchars($n['title'] ?? 'بدون عنوان') ?></td>
                                            <td style="padding:12px; font-size:13px; color:#cbd5e1; max-width: 300px;"><?= htmlspecialchars($n['message']) ?></td>
                                            <td style="padding:12px;"><span style="background:rgba(255,255,255,0.1); padding:4px 8px; border-radius:6px; font-size:12px;"><?= htmlspecialchars($n['student_id'] ?? 'الكل') ?></span></td>
                                            <td style="padding:12px; font-size:12px; color:#94a3b8;" dir="ltr"><?= htmlspecialchars($n['created_at']) ?></td>
                                        </tr>
                                    <?php endwhile; ?>
                                <?php else: ?>
                                    <tr><td colspan="4" style="text-align:center; padding:30px; color:#94a3b8;"><i class="fas fa-inbox fa-2x" style="display:block; margin-bottom:10px; opacity:0.5;"></i> لم يتم إرسال أي إشعارات أو رسائل حتى الآن.</td></tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <div id="parents" class="view-section">
                <h1 class="page-title"><i class="fas fa-user-friends"></i> بوابة شؤون أولياء الأمور</h1>
                
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon purple"><i class="fas fa-users"></i></div>
                        <div class="stat-details"><h4>حسابات أولياء الأمور</h4><h2><?php echo $stats_parents; ?></h2></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon green"><i class="fas fa-link"></i></div>
                        <div class="stat-details"><h4>الطلاب المرتبطين</h4><h2><?php echo $stats_links; ?></h2></div>
                    </div>
                </div>

                <div class="config-section" style="border-color: rgba(255,255,255,0.1); background: rgba(0,0,0,0.2);">
                    <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px; margin-bottom: 20px;">
                        <h2 class="section-title" style="border: none; margin: 0; padding: 0; color: #fff;">
                            <span>إدارة الحسابات والصلاحيات</span>
                        </h2>
                        <button class="btn-action" onclick="openParentModal()"><i class="fas fa-user-plus"></i> إضافة ولي أمر يدوياً</button>
                    </div>
                    
                    <p style="color: var(--text-muted); margin-bottom: 25px; line-height: 1.6;">
                        <i class="fas fa-info-circle" style="color: var(--primary);"></i> <strong>نظام التوليد التلقائي:</strong> 
                        عند تسجيل طالب جديد في قسم "شؤون الطلاب" وإدخال رقم هاتف ولي أمره، سيقوم النظام تلقائياً بإنشاء حساب لولي الأمر.
                    </p>

                    <div class="data-panel" style="background: rgba(0,0,0,0.2);">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                            <h3 style="margin: 0; font-size: 1.1rem;"><i class="fas fa-list"></i> قائمة أولياء الأمور المسجلين</h3>
                        </div>
                        
                        <?php
                        // 🚀 جلب الوسوم للآباء بحماية تامة 🚀
                        $stages_q = $conn->query("SELECT DISTINCT stage_name FROM school_tags WHERE stage_name != ''");
                        $depts_q = $conn->query("SELECT DISTINCT department_name FROM school_tags WHERE department_name != ''");
                        $sections_q = $conn->query("SELECT DISTINCT section_name FROM school_tags WHERE section_name != ''");
                        ?>

                        <!-- 🚀 الفلتر السريع الذكي 🚀 -->
                        <div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.1);">
                            <div style="display: flex; gap: 10px; flex-direction: row-reverse;">
                                <select id="fp_stage" onchange="filterStudentsForParents()" class="custom-input" style="flex: 1; padding: 10px;">
                                    <option value="">كل المراحل</option>
                                    <?php if($stages_q) while($s = $stages_q->fetch_assoc()): ?>
                                        <option value="<?= htmlspecialchars($s['stage_name']) ?>"><?= htmlspecialchars($s['stage_name']) ?></option>
                                    <?php endwhile; ?>
                                </select>
                                <select id="fp_class" onchange="filterStudentsForParents()" class="custom-input" style="flex: 1; padding: 10px;">
                                    <option value="">كل الصفوف</option>
                                    <?php if($depts_q) while($d = $depts_q->fetch_assoc()): ?>
                                        <option value="<?= htmlspecialchars($d['department_name']) ?>"><?= htmlspecialchars($d['department_name']) ?></option>
                                    <?php endwhile; ?>
                                </select>
                                <select id="fp_section" onchange="filterStudentsForParents()" class="custom-input" style="flex: 1; padding: 10px;">
                                    <option value="">كل الشعب</option>
                                    <?php if($sections_q) while($sec = $sections_q->fetch_assoc()): ?>
                                        <option value="<?= htmlspecialchars($sec['section_name']) ?>"><?= htmlspecialchars($sec['section_name']) ?></option>
                                    <?php endwhile; ?>
                                </select>
                                <div style="flex: 2; position: relative;">
                                    <input type="text" id="fp_search" placeholder="🔍 ابحث باسم الطالب..." onkeyup="filterStudentsForParents()" style="width: 100%; padding: 10px; background: #ffffff; color: #000; border-radius: 6px; font-weight: bold;">
                                </div>
                            </div>
                        </div>

                        <div class="data-panel" style="background: rgba(0,0,0,0.2);">
                            <div style="overflow-x: auto;">
                                <table style="width: 100%; border-collapse: collapse; text-align: right; color: #fff;">
                                    <thead>
                                        <tr style="background: rgba(255,255,255,0.05); border-bottom: 2px solid var(--primary);">
                                            <th style="padding:12px;">اسم الطالب</th>
                                            <th style="padding:12px;">المرحلة والصف</th>
                                            <th style="padding:12px;">الإجراءات</th>
                                        </tr>
                                    </thead>
                                    <tbody id="studentsParentsBody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- مودال بيانات الأب -->
            <div id="parentInfoModal" class="modal-overlay" style="display: none; z-index: 99999;">
                <div class="modal-content" style="max-width: 450px; background: var(--bg-dark); border: 1px solid var(--primary);">
                    <div class="modal-header">
                        <h2><i class="fas fa-user-tie"></i> بيانات ولي الأمر</h2>
                        <span class="close-modal" onclick="document.getElementById('parentInfoModal').style.display='none'">&times;</span>
                    </div>
                    <div id="parentInfoContent"></div>
                </div>
            </div>

            <!-- مودال إضافة أب -->
            <div id="addParentModal" class="modal-overlay" style="display: none;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2><i class="fas fa-user-plus"></i> إنشاء وربط حساب ولي أمر</h2>
                        <span class="close-modal" onclick="closeParentModal()">&times;</span>
                    </div>
                    <form id="manualParentForm" onsubmit="submitParentForm(event)">
                        <div class="input-group" style="margin-bottom: 15px;">
                            <label class="input-label">اسم ولي الأمر (اختياري)</label>
                            <input type="text" name="parent_name" class="custom-input" placeholder="مثال: أحمد محمد">
                        </div>
                        <div class="input-group" style="margin-bottom: 15px;">
                            <label class="input-label">رقم الهاتف (سيكون اسم المستخدم للدخول)</label>
                            <input type="text" name="phone" class="custom-input" placeholder="مثال: 07900000000" dir="ltr" required>
                        </div>
                        <div class="input-group" style="margin-bottom: 15px;">
                            <label class="input-label">كلمة المرور الافتراضية</label>
                            <input type="text" name="password" class="custom-input" value="123456" required>
                        </div>
                        <div class="input-group" style="margin-bottom: 25px;">
                            <label class="input-label">معرف الطالب للربط (Student ID)</label>
                            <input type="text" name="student_id" class="custom-input" placeholder="مثال: RM-26-02JT" dir="ltr" required>
                        </div>
                        <button type="submit" class="btn-action" style="width: 100%; font-size: 1.1rem; padding: 12px;">حفظ الحساب وإتمام المزامنة</button>
                    </form>
                </div>
            </div>

            <!-- 🚀 قسم الإدارة المالية الشامل 🚀 -->
            <div id="financial-management" class="view-section">
                <h1 class="page-title"><i class="fas fa-file-invoice-dollar" style="color: #10b981;"></i> النظام المالي والمحاسبي</h1>
                
                <div class="data-panel" style="padding: 0; border: none; background: transparent;">
                    <!-- زر تحديث اختياري -->
                    <div style="text-align: left; margin-bottom: 15px;">
                        <button onclick="document.getElementById('main-accounting-frame').src += ''" class="btn-action" style="background: #334155;">
                            <i class="fas fa-sync-alt"></i> تحديث البيانات المالية
                        </button>
                    </div>

                    <!-- 🔴 تم تعديل الخلفية هنا لتكون متوافقة مع الوضع الداكن 🔴 -->
                    <div style="background: var(--bg-dark); border-radius: 15px; overflow: hidden; height: 85vh; min-height: 700px; border: 2px solid var(--border-glass); box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
                        <iframe 
                            id="main-accounting-frame"
                            src="accounting_system.php" 
                            style="width: 100%; height: 100%; border: none;" 
                            title="نظام الحسابات">
                        </iframe>
                    </div>
                </div>
            </div>

          <!-- 🚀 قسم الإعدادات الشامل والجديد كلياً (يستبدل القسم القديم بالكامل) 🚀 -->
<div id="settings" class="view-section" style="display: none;">
    <style>
        .settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid var(--border-glass); padding-bottom: 15px; }
        .settings-grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 25px; }
        .setting-box { background: rgba(0,0,0,0.2); border: 1px solid var(--border-glass); border-radius: 15px; padding: 25px; position: relative; overflow: hidden; backdrop-filter: blur(10px); }
        .setting-box::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--primary); }
        .setting-box h3 { margin-top: 0; color: #fff; font-size: 1.2rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px;}
        .setting-box h3 i { color: var(--primary); }
        .color-picker-wrapper { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.3); padding: 10px 15px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 15px;}
        .color-picker-wrapper input[type="color"] { border: none; width: 50px; height: 40px; border-radius: 5px; cursor: pointer; background: transparent; padding: 0; }
        .checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
        .custom-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-muted); background: rgba(0,0,0,0.2); padding: 8px 12px; border-radius: 6px; border: 1px solid transparent; transition: 0.2s; font-size: 0.9rem;}
        .custom-checkbox:hover { border-color: var(--primary); color: #fff; }
        .custom-checkbox input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
        @media (max-width: 768px) { .settings-grid-layout { grid-template-columns: 1fr; } .checkbox-grid { grid-template-columns: 1fr 1fr; } .settings-header { flex-direction: column; gap: 15px; align-items: flex-start; } }
    </style>

    <?php
    // 🚀 الفحص الذكي المطور (يشمل انحناء الحواف) 🚀
    $school_settings = [];
    $working_days_arr = [];
    try {
        $safe_school = $conn->real_escape_string($school_name ?? '');
        
        $expected_columns = [
            'whatsapp_number' => "VARCHAR(50) NULL",
            'whatsapp_provider' => "VARCHAR(100) NULL",
            'whatsapp_api_url' => "VARCHAR(255) NULL",
            'whatsapp_api_token' => "VARCHAR(255) NULL",
            'admin_email' => "VARCHAR(150) NULL",
            'accounting_email' => "VARCHAR(150) NULL",
            'primary_color' => "VARCHAR(20) DEFAULT '#ff4d79'",
            'secondary_color' => "VARCHAR(20) DEFAULT '#6b1024'",
            'ui_language' => "VARCHAR(20) DEFAULT 'ar'",
            'ui_font' => "VARCHAR(100) DEFAULT 'Tajawal'",
            'bg_type' => "VARCHAR(20) DEFAULT 'solid'",
            'bg_color_1' => "VARCHAR(20) DEFAULT '#090204'",
            'bg_color_2' => "VARCHAR(20) DEFAULT '#1e293b'",
            'btn_bg_color' => "VARCHAR(20) DEFAULT '#ff4d79'",
            'btn_text_color' => "VARCHAR(20) DEFAULT '#ffffff'",
            'text_color' => "VARCHAR(20) DEFAULT '#ffffff'",
            'border_thickness' => "VARCHAR(10) DEFAULT '1'",
            'enable_shadow' => "VARCHAR(10) DEFAULT '1'",
            'shadow_color' => "VARCHAR(20) DEFAULT '#000000'",
            'modal_title_color' => "VARCHAR(20) DEFAULT '#ff4d79'",
            // إضافات انحناء الحواف
            'modal_radius' => "VARCHAR(10) DEFAULT '15'",
            'btn_radius' => "VARCHAR(10) DEFAULT '8'"
        ];
        
        foreach($expected_columns as $col => $def) {
            $check = @$conn->query("SHOW COLUMNS FROM schools LIKE '$col'");
            if(!$check || $check->num_rows == 0) {
                @$conn->query("ALTER TABLE schools ADD COLUMN $col $def");
            }
        }

        $res = $conn->query("SELECT * FROM schools WHERE school_name = '$safe_school'");
        if ($res && $res->num_rows > 0) {
            $school_settings = $res->fetch_assoc();
            if(!empty($school_settings['working_days'])) {
                $working_days_arr = explode(',', $school_settings['working_days']);
            }
        }
    } catch (Exception $e) { }

    function val($key, $default = '') {
        global $school_settings;
        return htmlspecialchars($school_settings[$key] ?? $default);
    }
    function is_day_checked($day) {
        global $working_days_arr;
        return in_array($day, $working_days_arr) ? 'checked' : '';
    }
    ?>

    <div class="settings-header">
        <h1 class="page-title" style="margin:0; border:none; padding:0;"><i class="fas fa-sliders-h"></i> إعدادات المؤسسة الشاملة</h1>
        <button onclick="saveAllSchoolSettings()" class="btn-action" style="background: #10b981; padding: 12px 25px; font-size: 1.1rem; display: flex; align-items: center; gap: 10px;">
            <i class="fas fa-save"></i> <span>حفظ وتطبيق التعديلات</span>
        </button>
    </div>

    <form id="fullSchoolSettingsForm">
        <input type="hidden" name="school_id" value="<?= val('id') ?>">
        
        <div class="settings-grid-layout">
            
            <!-- 1. البيانات الأساسية -->
            <div class="setting-box">
                <h3><i class="fas fa-school"></i> المعلومات الأساسية</h3>
                <div class="input-group">
                    <label class="input-label">اسم المؤسسة التعليمية</label>
                    <input type="text" name="school_name" class="custom-input" value="<?= val('school_name') ?>" required>
                </div>
                <div class="input-group mt-3">
                    <label class="input-label">الاسم الكامل لمدير المؤسسة</label>
                    <input type="text" name="manager_name" class="custom-input" value="<?= val('manager_name') ?>" required>
                </div>
                <div class="input-group mt-3">
                    <label class="input-label">شعار المؤسسة (يظهر في الهويات والتقارير)</label>
                    <input type="file" name="school_logo" class="custom-input" accept="image/*">
                </div>
            </div>

            <!-- 2. الهوية البصرية واللغات -->
            <div class="setting-box">
                <h3><i class="fas fa-paint-palette"></i> الهوية البصرية واللغة</h3>
                <div class="input-group mb-3">
                    <label class="input-label">لغة النظام الافتراضية</label>
                    <select name="ui_language" class="custom-input" style="cursor: pointer;">
                        <option value="ar" <?= val('ui_language') == 'ar' ? 'selected' : '' ?>>العربية (Arabic)</option>
                        <option value="en" <?= val('ui_language') == 'en' ? 'selected' : '' ?>>English (الإنجليزية)</option>
                    </select>
                </div>

                <div class="input-group mb-3">
                    <label class="input-label">نوع الخط (Font Style)</label>
                    <select name="ui_font" class="custom-input" style="cursor: pointer; font-weight: bold;">
                        <option value="Tajawal" style="font-family: 'Tajawal';" <?= val('ui_font') == 'Tajawal' ? 'selected' : '' ?>>خط تجوال (Tajawal) - افتراضي</option>
                        <option value="Cairo" style="font-family: 'Cairo';" <?= val('ui_font') == 'Cairo' ? 'selected' : '' ?>>خط كايرو (Cairo) - رسمي وواضح</option>
                        <option value="Almarai" style="font-family: 'Almarai';" <?= val('ui_font') == 'Almarai' ? 'selected' : '' ?>>خط المراعي (Almarai) - عصري</option>
                        <option value="Readex Pro" style="font-family: 'Readex Pro';" <?= val('ui_font') == 'Readex Pro' ? 'selected' : '' ?>>خط ريدكس (Readex Pro) - هندسي</option>
                    </select>
                </div>

                <label class="input-label mb-2">الألوان (Primary / Secondary)</label>
                <div class="color-picker-wrapper">
                    <span>اللون الأساسي:</span>
                    <input type="color" name="primary_color" value="<?= val('primary_color', '#ff4d79') ?>">
                </div>
                <div class="color-picker-wrapper">
                    <span>اللون الثانوي:</span>
                    <input type="color" name="secondary_color" value="<?= val('secondary_color', '#6b1024') ?>">
                </div>
            </div>

            <!-- 3. تخصيص الإطارات والظلال (مُحدَّث بانحناء الحواف) -->
            <div class="setting-box" style="border-color: #8b5cf6;">
                <h3 style="color: #8b5cf6;"><i class="fas fa-border-style"></i> شكل الإطارات والظلال</h3>
                
                <div class="input-group mb-3">
                    <label class="input-label">تفعيل ظل النوافذ (Box Shadow)</label>
                    <select name="enable_shadow" class="custom-input" style="cursor: pointer;" onchange="toggleShadowColor(this)">
                        <option value="1" <?= val('enable_shadow') == '1' ? 'selected' : '' ?>>مفعل (يوجد ظل)</option>
                        <option value="0" <?= val('enable_shadow') == '0' ? 'selected' : '' ?>>معطل (بدون ظل)</option>
                    </select>
                </div>

                <div class="color-picker-wrapper" id="shadow_color_box" style="display: <?= val('enable_shadow') == '1' ? 'flex' : 'none' ?>;">
                    <span>لون الظل:</span>
                    <input type="color" name="shadow_color" value="<?= val('shadow_color', '#000000') ?>">
                </div>

                <hr style="border-color: rgba(255,255,255,0.1); margin: 15px 0;">

                <div class="input-group mb-3">
                    <label class="input-label">سمك الإطار (Border Thickness)</label>
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <input type="range" name="border_thickness" min="0" max="5" value="<?= val('border_thickness', '1') ?>" oninput="document.getElementById('border_val').innerText = this.value + 'px'" style="flex: 1; accent-color: #8b5cf6;">
                        <span id="border_val" style="font-weight: bold; width: 40px; text-align: left;"><?= val('border_thickness', '1') ?>px</span>
                    </div>
                </div>

                <!-- 🚀 الإضافة الجديدة: انحناء حواف النوافذ والأقسام 🚀 -->
                <div class="input-group mb-3">
                    <label class="input-label">انحناء حواف النوافذ (Modal Border Radius)</label>
                    <select name="modal_radius" class="custom-input" style="cursor: pointer;">
                        <option value="0" <?= val('modal_radius') == '0' ? 'selected' : '' ?>>حادة جداً (مربع 0px)</option>
                        <option value="8" <?= val('modal_radius') == '8' ? 'selected' : '' ?>>شبه حادة (8px)</option>
                        <option value="15" <?= val('modal_radius') == '15' ? 'selected' : '' ?>>منحنية / ناعمة (15px) - افتراضي</option>
                        <option value="25" <?= val('modal_radius') == '25' ? 'selected' : '' ?>>شبه دائرية (25px)</option>
                        <option value="40" <?= val('modal_radius') == '40' ? 'selected' : '' ?>>دائرية جداً (40px)</option>
                    </select>
                </div>

                <div class="color-picker-wrapper">
                    <span style="font-weight: bold; color: #ffeb3b;">لون عناوين النوافذ والأقسام:</span>
                    <input type="color" name="modal_title_color" value="<?= val('modal_title_color', '#ff4d79') ?>">
                </div>
            </div>

            <!-- 4. تخصيص الخلفيات والأزرار (مُحدَّث بانحناء الأزرار) -->
            <div class="setting-box" style="border-color: #3b82f6;">
                <h3 style="color: #3b82f6;"><i class="fas fa-fill-drip"></i> تخصيص الخلفية والأزرار</h3>
                
                <div class="input-group mb-3">
                    <label class="input-label">نمط خلفية المنصة</label>
                    <select name="bg_type" class="custom-input" style="cursor: pointer;" onchange="toggleGradientColors(this)">
                        <option value="solid" <?= val('bg_type') == 'solid' ? 'selected' : '' ?>>لون سادة (Solid Color)</option>
                        <option value="gradient" <?= val('bg_type') == 'gradient' ? 'selected' : '' ?>>لونين متدرجين (Gradient)</option>
                    </select>
                </div>

                <div class="color-picker-wrapper">
                    <span>لون الخلفية الأساسي:</span>
                    <input type="color" name="bg_color_1" value="<?= val('bg_color_1', '#090204') ?>">
                </div>
                
                <div class="color-picker-wrapper" id="gradient_color_box" style="display: <?= val('bg_type') == 'gradient' ? 'flex' : 'none' ?>;">
                    <span>لون التدرج الثاني (الخلفية):</span>
                    <input type="color" name="bg_color_2" value="<?= val('bg_color_2', '#1e293b') ?>">
                </div>

                <div class="color-picker-wrapper mt-3">
                    <span>لون النصوص العامة (للقراءة):</span>
                    <input type="color" name="text_color" value="<?= val('text_color', '#ffffff') ?>">
                </div>

                <hr style="border-color: rgba(255,255,255,0.1); margin: 15px 0;">

                <!-- 🚀 الإضافة الجديدة: شكل وتصميم الأزرار 🚀 -->
                <div class="input-group mb-3">
                    <label class="input-label">شكل وانحناء الأزرار (Buttons Shape)</label>
                    <select name="btn_radius" class="custom-input" style="cursor: pointer;">
                        <option value="0" <?= val('btn_radius') == '0' ? 'selected' : '' ?>>مستطيل حاد (0px)</option>
                        <option value="8" <?= val('btn_radius') == '8' ? 'selected' : '' ?>>مستطيل بحواف ناعمة (8px) - افتراضي</option>
                        <option value="25" <?= val('btn_radius') == '25' ? 'selected' : '' ?>>شبه دائري (25px)</option>
                        <option value="50" <?= val('btn_radius') == '50' ? 'selected' : '' ?>>دائري بالكامل كبسولة (50px)</option>
                    </select>
                </div>

                <div class="color-picker-wrapper">
                    <span>لون خلفية الأزرار:</span>
                    <input type="color" name="btn_bg_color" value="<?= val('btn_bg_color', '#ff4d79') ?>">
                </div>
                
                <div class="color-picker-wrapper">
                    <span>لون نص الأزرار:</span>
                    <input type="color" name="btn_text_color" value="<?= val('btn_text_color', '#ffffff') ?>">
                </div>
            </div>

                   <!-- 3. البريد --> 
                        <div class="setting-box">
                            <h3><i class="fas fa-envelope-open-text"></i> جهات الاتصال والإيميلات</h3>
                            <div class="input-group">
                                <label class="input-label">الإيميل العام (لتسجيل الدخول)</label>
                                <input type="email" name="email" class="custom-input" value="<?= val('email') ?>" dir="ltr" required>
                            </div>
                            <div class="input-group mt-3">
                                <label class="input-label">إيميل الإدارة (للتواصل الإداري)</label>
                                <input type="email" name="admin_email" class="custom-input" value="<?= val('admin_email') ?>" dir="ltr">
                            </div>
                            <div class="input-group mt-3">
                                <label class="input-label">إيميل المحاسبة والمالية</label>
                                <input type="email" name="accounting_email" class="custom-input" value="<?= val('accounting_email') ?>" dir="ltr">
                            </div>
                        </div>
                        
            <!-- 5. الدوام والتوقيت -->
            <div class="setting-box">
                <h3><i class="fas fa-calendar-check"></i> الدوام والتوقيت</h3>
                <div class="input-group mb-3">
                    <select name="timezone" class="custom-input" style="cursor: pointer;" dir="ltr">
                        <option value="Asia/Baghdad" <?= val('timezone') == 'Asia/Baghdad' ? 'selected' : '' ?>>Asia/Baghdad (Iraq)</option>
                        <option value="Asia/Riyadh" <?= val('timezone') == 'Asia/Riyadh' ? 'selected' : '' ?>>Asia/Riyadh (KSA)</option>
                    </select>
                </div>
                <div class="checkbox-grid">
                    <label class="custom-checkbox"><input type="checkbox" name="working_days[]" value="Sunday" <?= is_day_checked('Sunday') ?>> الأحد</label>
                    <label class="custom-checkbox"><input type="checkbox" name="working_days[]" value="Monday" <?= is_day_checked('Monday') ?>> الإثنين</label>
                    <label class="custom-checkbox"><input type="checkbox" name="working_days[]" value="Tuesday" <?= is_day_checked('Tuesday') ?>> الثلاثاء</label>
                    <label class="custom-checkbox"><input type="checkbox" name="working_days[]" value="Wednesday" <?= is_day_checked('Wednesday') ?>> الأربعاء</label>
                    <label class="custom-checkbox"><input type="checkbox" name="working_days[]" value="Thursday" <?= is_day_checked('Thursday') ?>> الخميس</label>
                </div>
            </div>

         <!-- 5. الواتساب المتقدم -->
                        <div class="setting-box" style="grid-column: 1 / -1; border-color: #25D366;">
                            <h3 style="color: #25D366;"><i class="fab fa-whatsapp"></i> إعدادات الربط البرمجي للواتساب (API Gateway)</h3>
                            <div class="form-grid">
                                <div class="input-group">
                                    <label class="input-label">رقم الهاتف (WhatsApp)</label>
                                    <input type="text" name="whatsapp_number" class="custom-input" value="<?= val('whatsapp_number') ?>" placeholder="مثال: 9647700000000" dir="ltr">
                                </div>
                                <div class="input-group">
                                    <label class="input-label">مزود الخدمة (Provider)</label>
                                    <input type="text" name="whatsapp_provider" class="custom-input" value="<?= val('whatsapp_provider') ?>" placeholder="UltraMsg, Twilio...">
                                </div>
                                <div class="input-group full-width">
                                    <label class="input-label">رابط الـ API URL</label>
                                    <input type="url" name="whatsapp_api_url" class="custom-input" value="<?= val('whatsapp_api_url') ?>" dir="ltr">
                                </div>
                                <div class="input-group full-width">
                                    <label class="input-label">الـ Token السري</label>
                                    <input type="text" name="whatsapp_api_token" class="custom-input" value="<?= val('whatsapp_api_token') ?>" dir="ltr">
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>

        </div>

<script>
function toggleGradientColors(selectEl) { document.getElementById('gradient_color_box').style.display = selectEl.value === 'gradient' ? 'flex' : 'none'; }
function toggleShadowColor(selectEl) { document.getElementById('shadow_color_box').style.display = selectEl.value === '1' ? 'flex' : 'none'; }

function saveAllSchoolSettings() {
    const form = document.getElementById('fullSchoolSettingsForm');
    const formData = new FormData(form);
    const btn = event.currentTarget;
    const originalContent = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span>جاري الحفظ والتطبيق...</span>';
    btn.disabled = true;

    fetch('save_comprehensive_settings.php', { method: 'POST', body: formData })
    .then(response => response.json())
    .then(data => {
        if(data.status === 'success') {
            alert(data.message);
            setTimeout(() => { location.reload(); }, 500);
        } else {
            alert('حدث خطأ: ' + data.message);
        }
    })
    .catch(error => { alert('فشل الاتصال بالسيرفر.'); })
    .finally(() => { btn.innerHTML = originalContent; btn.disabled = false; });
}
</script>
       <!-- ============================================== -->
<!-- 📊 قسم السجل الوسطي (الكنترول) 📊 -->
<!-- ============================================== -->
<div id="control-room-section" class="view-section" style="display: none; animation: fadeIn 0.4s;">
    
    <!-- 🚀 الحاوية السحرية التي ستجبر السكرول على الظهور 🚀 -->
    <div style="max-height: 78vh; overflow-y: auto; overflow-x: hidden; padding-right: 5px; padding-bottom: 80px;">
        
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
             <h1 class="page-title" style="margin: 0;"><i class="fas fa-file-signature text-yellow-400"></i> السجل الوسطي والكنترول</h1>
            <div>
                <button onclick="printMasterRecord(this)" class="btn-action" style="background: #3b82f6; padding: 12px 24px; font-size: 1.1rem; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
                    <i class="fas fa-print"></i> طباعة السجل الرسمي
                </button>
            </div>
        </div>

        <!-- الفلاتر -->
        <div class="no-print" style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 12px; border: 1px solid var(--border-glass); margin-bottom: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;">
            <select id="ctrl_stage" class="custom-input dynamic-stage" onchange="loadControlGrades()"><option value="">المرحلة</option></select>
            <select id="ctrl_dept" class="custom-input dynamic-dept" onchange="loadControlGrades()"><option value="">القسم</option></select>
            <select id="ctrl_section" class="custom-input dynamic-branch" onchange="loadControlGrades()"><option value="">الشعبة</option></select>
            <select id="ctrl_subject" class="custom-input" onchange="loadControlGrades()" style="border-color: #f59e0b;">
                <option value="">-- اختر المادة لعرض السجل --</option>
                <?php
                $safe_sch = $conn->real_escape_string($_SESSION['school_name'] ?? '');
                // جلب التخصصات وأسماء المدرسين من جدول teachers
                $t_sub_q = $conn->query("SELECT DISTINCT specialization, display_name FROM teachers WHERE school_name = '$safe_sch' AND role = 'teacher' AND specialization != '' AND specialization IS NOT NULL");
                if($t_sub_q && $t_sub_q->num_rows > 0) {
                    while($ts = $t_sub_q->fetch_assoc()) {
                        $spec = htmlspecialchars($ts['specialization']);
                        $tname = htmlspecialchars($ts['display_name']);
                        echo "<option value='$spec'>$spec (أ. $tname)</option>";
                    }
                }
                ?>
            </select>
        </div>

       <!-- 1. الجدول الرئيسي للدرجات -->
        <div style="overflow-x: auto; background: var(--card-bg); border-radius: 15px; border: 1px solid var(--border-glass); margin-bottom: 30px;">
            <table style="width: 100%; border-collapse: collapse; text-align: center; color: #fff;">
                <thead>
                    <tr style="background: rgba(245, 158, 11, 0.15); border-bottom: 2px solid #f59e0b;">
                        <th style="padding: 15px; width: 50px;">ت</th>
                        <th style="padding: 15px; text-align: right;">اسم الطالب</th>
                        <th style="padding: 15px; color:#94a3b8;">الفصل الأول</th>
                        <th style="padding: 15px; color:#3b82f6;">نصف السنة</th>
                        <th style="padding: 15px; color:#94a3b8;">الفصل الثاني</th>
                        <th style="padding: 15px; color:#a855f7;">السعي السنوي</th>
                        <th style="padding: 15px; background: rgba(239,68,68,0.2); color:#fca5a5; border-right:2px solid #ef4444;" class="no-print">قرار الإدارة</th>
                        
                        <!-- 🚀 العمود الجديد: الدرجة النهائية 🚀 -->
                        <th style="padding: 15px; color:#10b981; border-right:1px solid rgba(16,185,129,0.3); background:rgba(16,185,129,0.1);">الدرجة النهائية</th>
                        
                        <th style="padding: 15px; color:#38bdf8;">النتيجة</th>
                    </tr>
                </thead>
                <tbody id="controlGradesBody">
                    <tr><td colspan="9" style="padding:30px; color:#94a3b8;">يرجى اختيار المادة لعرض السجل الوسطي...</td></tr>
                </tbody>
            </table>
        </div>
        
        <!-- 2. جدول الخلاصة والإحصائيات -->
        <div style="overflow-x: auto; background: var(--card-bg); border-radius: 15px; border: 1px solid var(--border-glass); width: 70%; margin: 0 auto;">
            <table style="width: 100%; border-collapse: collapse; text-align: center; color: #fff;">
                <thead>
                    <tr style="background: rgba(59, 130, 246, 0.15); border-bottom: 2px solid #3b82f6;">
                        <th style="padding: 12px; text-align: right;">الامتحان / الفصل</th>
                        <th style="padding: 12px; color:#fcd34d;">المشاركين</th>
                        <th style="padding: 12px; color:#10b981;">الناجحون</th>
                        <th style="padding: 12px; color:#ef4444;">الراسبون</th>
                        <th style="padding: 12px; color:#93c5fd;">نسبة النجاح</th>
                    </tr>
                </thead>
                <tbody id="summaryStatsBody">
                    <tr><td colspan="5" style="padding:20px; color:#94a3b8;">تظهر الإحصائيات هنا بعد اختيار المادة...</td></tr>
                </tbody>
            </table>
        </div>

        <!-- 🚀 قسم التحكم بالشهادات 🚀 -->
        <div class="setting-box" style="background: rgba(30, 41, 59, 0.5); border: 1px solid #3b82f6; border-radius: 12px; padding: 20px; margin-top: 30px; width: 100%;">
            <h3 style="color: #fff; margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px;">
                <i class="fas fa-clock text-blue-500"></i> التحكم العام بوقت ظهور الشهادات للطلاب والآباء
            </h3>
            <form action="update_certificate_settings.php" method="POST" style="display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 200px;">
                    <label style="color: #cbd5e1; font-size: 14px; display: block; margin-bottom: 5px;">تاريخ البدء:</label>
                    <input type="date" name="start_date" class="custom-input" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #475569; background: #0f172a; color: white;">
                </div>
                <div style="flex: 1; min-width: 200px;">
                    <label style="color: #cbd5e1; font-size: 14px; display: block; margin-bottom: 5px;">تاريخ الانتهاء:</label>
                    <input type="date" name="end_date" class="custom-input" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #475569; background: #0f172a; color: white;">
                </div>
                <div style="flex: 1; min-width: 200px;">
                    <label style="color: #cbd5e1; font-size: 14px; display: block; margin-bottom: 5px;">الحالة العامة للشهادات:</label>
                    <select name="status" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #475569; background: #0f172a; color: white;">
                        <option value="1">مفتوح للجميع (ضمن التاريخ المسموح)</option>
                        <option value="0">حجب عن الجميع فوراً (إغلاق طوارئ)</option>
                    </select>
                </div>
                <button type="submit" style="background: #3b82f6; padding: 10px 25px; border-radius: 8px; font-weight: bold; border: none; color: white; cursor: pointer; height: 43px;">
                    حفظ التوقيت
                </button>
            </form>
        </div>

    </div> <!-- إغلاق الحاوية السحرية التي تجبر السكرول -->
</div> <!-- إغلاقة قسم control-room-section -->

<script>
// دالة جلب البيانات والنسب
function loadControlGrades() {
    const stage = document.getElementById('ctrl_stage').value;
    const dept = document.getElementById('ctrl_dept').value;
    const section = document.getElementById('ctrl_section').value;
    const subject = document.getElementById('ctrl_subject').value;
    
    if(!subject) return;

    document.getElementById('controlGradesBody').innerHTML = '<tr><td colspan="8" style="padding:30px;"><i class="fas fa-spinner fa-spin"></i> جاري الحساب والفرز...</td></tr>';

    let fd = new FormData();
    fd.append('stage', stage); fd.append('dept', dept); fd.append('section', section); fd.append('subject', subject);

    fetch('fetch_control_grades.php', { method: 'POST', body: fd })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            document.getElementById('controlGradesBody').innerHTML = data.html_rows;
            document.getElementById('summaryStatsBody').innerHTML = data.html_summary;
        } else {
            document.getElementById('controlGradesBody').innerHTML = `<tr><td colspan="8" style="color:#ef4444; padding:20px;">${data.message}</td></tr>`;
        }
    });
}

// دالة تطبيق درجات القرار (السرية للإدارة)
function applyAdminGrace(gradeId, inputElem) {
    let grace = parseFloat(inputElem.value) || 0;
    let fd = new FormData();
    fd.append('grade_id', gradeId);
    fd.append('admin_grace', grace);
    
    inputElem.style.borderColor = '#fbbf24';

    fetch('save_admin_grace.php', { method: 'POST', body: fd })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            inputElem.style.borderColor = '#10b981';
            let tr = inputElem.closest('tr');
            let finalCell = tr.querySelector('.final-score-cell');
            finalCell.innerText = data.new_final;
            
            if(data.new_final >= 50) {
                finalCell.style.color = '#10b981'; finalCell.style.fontWeight = '900';
            } else {
                finalCell.style.color = '#ef4444'; finalCell.style.fontWeight = 'normal';
            }
            
            // تحديث جدول الخلاصة السفلية تلقائياً
            loadControlGrades(); 
        }
    });
}
</script>

<style>
@media print {
    body * { visibility: hidden; }
    #control-room-section, #control-room-section * { visibility: visible; }
    #control-room-section { position: absolute; left: 0; top: 0; width: 100%; color: #000 !important; background: #fff !important; }
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    table { width: 100%; border: 2px solid #000; }
    th, td { border: 1px solid #000; color: #000 !important; padding: 5px; }
}
</style>

<!-- ========================================== -->
<!-- 🚀 قسم سجل درجات المدرسين (مراقبة الكنترول) 🚀 -->
<!-- ========================================== -->
<div id="teachers-gradebook-section" class="view-section" style="display: none; animation: fadeIn 0.4s;">
    
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
        <h1 class="page-title" style="margin: 0;"><i class="fas fa-chalkboard-teacher text-pink-500"></i> مراقبة سجلات المدرسين (الكنترول)</h1>
        <!-- 🖨️ تمت إضافة زر الطباعة هنا 🖨️ -->
        <button onclick="printTeacherGradebookRecord()" class="btn-action" style="background: #ec4899; color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: bold; box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4); transition: 0.3s;">
            <i class="fas fa-print"></i> طباعة هذا السجل
        </button>
    </div>

    <div style="background: var(--card-bg); border: 1px solid var(--border-glass); border-radius: 15px; padding: 25px; backdrop-filter: blur(10px);">
        
        <div style="background: rgba(0,0,0,0.3); padding: 20px; border-radius: 12px; border: 1px solid rgba(236, 72, 153, 0.3); margin-bottom: 25px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;">
            <div>
                <label style="color: #cbd5e1; font-size: 13px; display: block; margin-bottom: 5px; font-weight: bold;">المدرس:</label>
                <select id="admin_tg_teacher" class="custom-input" style="padding: 10px; border-color: #ec4899; cursor: pointer;" onchange="loadTeacherAssignmentsDetailed(this.value)">
                    <option value="">-- اختر المدرس --</option>
                    <?php
                    // 🚀 جلب المدرسين وإرسال ה- ID لتفادي أخطاء المسافات في الأسماء 🚀
                    if (isset($conn)) {
                        $safe_school_for_teachers = $conn->real_escape_string($_SESSION['school_name'] ?? '');
                        $t_query = "SELECT id, display_name FROM teachers WHERE school_name = '$safe_school_for_teachers' AND role = 'teacher' AND account_status != 'suspended'";
                        $t_res = $conn->query($t_query);
                        if ($t_res && $t_res->num_rows > 0) {
                            while ($t = $t_res->fetch_assoc()) {
                                echo "<option value='".intval($t['id'])."'>".htmlspecialchars($t['display_name'])."</option>";
                            }
                        }
                    }
                    ?>
                </select>
            </div>
            
            <div>
                <label style="color: #cbd5e1; font-size: 13px; display: block; margin-bottom: 5px; font-weight: bold;">المادة:</label>
                <select id="admin_tg_subject" class="custom-input" style="padding: 10px; border-color: #ec4899; cursor: pointer;" disabled>
                    <option value="">-- المادة --</option>
                </select>
            </div>
            <div>
                <label style="color: #cbd5e1; font-size: 13px; display: block; margin-bottom: 5px; font-weight: bold;">المرحلة:</label>
                <select id="admin_tg_stage" class="custom-input" style="padding: 10px; border-color: #ec4899; cursor: pointer;" disabled>
                    <option value="">-- المرحلة --</option>
                </select>
            </div>
            <div>
                <label style="color: #cbd5e1; font-size: 13px; display: block; margin-bottom: 5px; font-weight: bold;">القسم:</label>
                <select id="admin_tg_dept" class="custom-input" style="padding: 10px; border-color: #ec4899; cursor: pointer;" disabled>
                    <option value="">-- القسم --</option>
                </select>
            </div>
            <div>
                <label style="color: #cbd5e1; font-size: 13px; display: block; margin-bottom: 5px; font-weight: bold;">الشعبة:</label>
                <select id="admin_tg_section" class="custom-input" style="padding: 10px; border-color: #ec4899; cursor: pointer;" disabled>
                    <option value="">-- الشعبة --</option>
                </select>
            </div>

            <div style="grid-column: 1 / -1; margin-top: 10px;">
                <button onclick="loadTeacherGradebookDetailed()" class="btn-action" style="width: 100%; padding: 12px; background: #ec4899; font-size: 1.1rem; border-radius: 8px;">
                    <i class="fas fa-search"></i> عرض سجل الدرجات
                </button>
            </div>
        </div>

        <!-- 📊 إحصائيات السجل 📊 -->
        <div id="tg_control_stats" style="display: none; justify-content: space-around; background: rgba(236, 72, 153, 0.1); border: 1px dashed #ec4899; padding: 20px; border-radius: 12px; margin-bottom: 25px;">
            <div style="text-align: center;"><span style="display: block; font-size: 13px; color: #94a3b8; font-weight: bold; margin-bottom: 5px;">الطلاب</span><strong id="tg_stat_total" style="font-size: 1.8rem; color: #fff;">0</strong></div>
            <div style="text-align: center;"><span style="display: block; font-size: 13px; color: #10b981; font-weight: bold; margin-bottom: 5px;">الناجحون</span><strong id="tg_stat_pass" style="font-size: 1.8rem; color: #10b981;">0</strong></div>
            <div style="text-align: center;"><span style="display: block; font-size: 13px; color: #ef4444; font-weight: bold; margin-bottom: 5px;">الراسبون</span><strong id="tg_stat_fail" style="font-size: 1.8rem; color: #ef4444;">0</strong></div>
            <div style="text-align: center;"><span style="display: block; font-size: 13px; color: #f59e0b; font-weight: bold; margin-bottom: 5px;">النسبة</span><strong id="tg_stat_rate" style="font-size: 1.8rem; color: #f59e0b;">0%</strong></div>
        </div>

        <!-- 📊 جدول الدرجات مع الإدارة 📊 -->
        <div style="border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; text-align: center; color: #fff; min-width: 1400px;">
                <thead style="position: sticky; top: 0; background: #1a0810; z-index: 10;">
                    <tr style="background: rgba(0,0,0,0.5); border-bottom: 2px solid #ec4899; font-size: 0.95rem;">
                        <th rowspan="2" style="padding: 12px; border-left: 1px solid #333;">ت</th>
                        <th rowspan="2" style="padding: 12px; text-align: right; min-width: 200px; border-left: 1px solid #333;">اسم الطالب</th>
                        <th colspan="3" style="background: rgba(59, 130, 246, 0.1); border-left: 1px solid #333; padding: 8px;">الفصل الأول</th>
                        <th rowspan="2" style="color: #3b82f6; border-left: 1px solid #333; font-size: 1rem;">نصف السنة</th>
                        <th colspan="3" style="background: rgba(245, 158, 11, 0.1); border-left: 1px solid #333; padding: 8px;">الفصل الثاني</th>
                        <th rowspan="2" style="color: #f59e0b; border-left: 1px solid #333; font-size: 1rem;">السعي</th>
                        
                        <!-- 🚀 القرار والسعي النهائي 🚀 -->
                        <th rowspan="2" style="background: rgba(236, 72, 153, 0.2); color: #fbcfe8; border-left: 1px solid #333; width: 70px;">قرار<br>الإدارة</th>
                        <th rowspan="2" style="color: #fbbf24; border-left: 1px solid #333; font-size: 1rem;">السعي<br>النهائي</th>
                        
                        <!-- 🚀 الامتحان النهائي (شفهي + تحريري للإدارة) 🚀 -->
                        <th colspan="3" style="color: #a855f7; border-left: 1px solid #333; font-size: 1rem;">الامتحان النهائي</th>
                        
                        <th rowspan="2" style="color: #10b981; border-left: 1px solid #333; font-size: 1rem; background:rgba(16,185,129,0.1);">الدرجة<br>النهائية</th>
                        <th colspan="2" style="background: rgba(239, 68, 68, 0.1); border-left: 1px solid #333; padding: 8px;">الدور 2 (إكمال)</th>
                        <th rowspan="2" style="width: 80px; border-left: 1px solid #333;">النتيجة</th>
                    </tr>
                    <tr style="background: rgba(0,0,0,0.3); font-size: 0.85rem; color: #cbd5e1;">
                        <th style="padding: 8px; border-left: 1px solid #444;">ش1</th><th style="padding: 8px; border-left: 1px solid #444;">ش2</th><th style="border-left: 1px solid #333; color:#fff; font-weight:bold;">م. ف1</th>
                        <th style="padding: 8px; border-left: 1px solid #444;">ش4</th><th style="padding: 8px; border-left: 1px solid #444;">ش5</th><th style="border-left: 1px solid #333; color:#fff; font-weight:bold;">م. ف2</th>
                        
                        <th style="padding: 8px; border-left: 1px solid #444; font-size: 11px;">شفهي<br>(المدرس)</th>
                        <th style="padding: 8px; border-left: 1px solid #444; background: #93003c; color: #fff; font-size: 11px;">تحريري<br>(إدخال الإدارة)</th>
                        <th style="border-left: 1px solid #333; color:#a855f7; font-weight:bold;">المجموع</th>
                        
                        <th style="padding: 8px; border-left: 1px solid #444;">الدرجة</th><th style="border-left: 1px solid #333; color:#fff; font-weight:bold;">بعد 2</th>
                    </tr>
                </thead>
                <tbody id="adminTeacherGradebookBody">
                    <tr><td colspan="19" style="text-align:center; padding:50px; color:#94a3b8;"><i class="fas fa-list-alt fa-3x mb-4 text-pink-500 opacity-50"></i><br><span style="font-size: 1.1rem;">يرجى اختيار المدرس والصف لجلب السجل</span></td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>



<!-- ========================================== -->
<!-- 🚀 نافذة عرض شهادة الطالب للإدارة 🚀 -->
<!-- ========================================== -->
<div id="adminCertificateModal" class="modal-overlay" style="display: none; z-index: 999999;">
    <div class="modal-content" style="max-width: 900px; width: 95%; height: 90vh; background: #f8fafc; padding: 0; border-radius: 15px; overflow: hidden; display: flex; flex-direction: column;">
        
        <!-- رأس النافذة (متناسق مع اللوحة الداكنة) -->
        <div class="modal-header" style="background: #1a0810; padding: 15px 25px; margin: 0; border-bottom: 2px solid #ff4d79; display: flex; justify-content: space-between; align-items: center;">
            <h2 style="color: #fff; margin: 0; font-size: 1.2rem;">
                <i class="fas fa-file-certificate" style="color: #ff4d79; margin-left: 10px;"></i> الشهادة الأكاديمية التفصيلية للطالب
            </h2>
            <span class="close-modal" onclick="closeAdminCertificateModal()" style="color: #fff; font-size: 28px; cursor: pointer; transition: 0.3s;" onmouseover="this.style.color='#ff4d79'" onmouseout="this.style.color='#fff'">&times;</span>
        </div>
        
        <!-- منطقة عرض الشهادة (Iframe) -->
        <div style="flex: 1; position: relative; background: #fff;">
            <!-- مؤشر التحميل الدوار -->
            <div id="certLoading" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #6b1024; text-align: center;">
                <i class="fas fa-spinner fa-spin fa-3x"></i><br><br><b style="font-family: 'Tajawal', sans-serif;">جاري تحميل بيانات الشهادة...</b>
            </div>
            
            <!-- نافذة عرض الشهادة -->
            <iframe id="adminCertificateFrame" src="" style="width: 100%; height: 100%; border: none; position: relative; z-index: 2;" onload="document.getElementById('certLoading').style.display='none'"></iframe>
        </div>
        
    </div>
</div>

<script>
// دالة فتح الشهادة
function openStudentCertificateAdmin(studentId, token) {
    const modal = document.getElementById('adminCertificateModal');
    const iframe = document.getElementById('adminCertificateFrame');
    const loader = document.getElementById('certLoading');
    
    // إظهار مؤشر التحميل والمودال
    loader.style.display = 'block';
    modal.style.display = 'flex';
    
    // توجيه الـ Iframe لملف الطباعة الموجود لديك مسبقاً (مع إضافة المعرف والتوكين)
    iframe.src = `print_student_certificate.php?student_id=${studentId}&token=${token}&view=admin`;
}

// دالة إغلاق الشهادة
function closeAdminCertificateModal() {
    document.getElementById('adminCertificateModal').style.display = 'none';
    // تفريغ الرابط لإيقاف تحميل الملف في الخلفية
    document.getElementById('adminCertificateFrame').src = ''; 
}
</script>


</main>


<script>
// ==========================================
// 1. التنقل بين الأقسام
// ==========================================
function switchView(viewId, element) {
    document.querySelectorAll('.view-section').forEach(section => {
        section.classList.remove('active');
        section.style.display = 'none'; // التأكيد على الإخفاء
    });
    
    let target = document.getElementById(viewId);
    if(target) {
        target.classList.add('active');
        target.style.display = 'block'; // التأكيد على الإظهار
    }

    document.querySelectorAll('.menu-item').forEach(item => {
        item.classList.remove('active');
    });
    if(element) element.classList.add('active');
}

// ==========================================
// 2. نظام الإشعارات
// ==========================================
function toggleCustomFilters() {
    const target = document.getElementById('notif_target').value;
    const customDiv = document.getElementById('custom_filters_div');
    if (customDiv) {
        customDiv.style.display = (target === 'custom') ? 'flex' : 'none';
    }
}

async function sendNotificationMsg(event) {
    event.preventDefault(); 
    
    const form = document.getElementById('notificationForm') || event.currentTarget;
    const formData = new FormData(form);
    
    // 1. قراءة مربعات الاختيار (طرق الإرسال)
    const sendToPlatform = document.getElementById('chk_send_platform').checked;
    const sendToWhatsapp = document.getElementById('chk_send_whatsapp').checked;

    if (!sendToPlatform && !sendToWhatsapp) {
        alert("⚠️ يرجى اختيار طريقة إرسال واحدة على الأقل (المنصة أو الواتساب).");
        return;
    }

    // 2. 🚀 [الاصطياد الذكي للفئة المستهدفة] 🚀
    // نبحث عن أي قائمة منسدلة (select) داخل الفورم ونسحب قيمتها فوراً
    const selectElement = form.querySelector('select');
    const targetGroup = selectElement ? selectElement.value : null;

    // 3. الاصطياد الذكي للنص والعنوان
    const titleElement = form.querySelector('input[type="text"]');
    const title = titleElement ? titleElement.value : 'إشعار إداري';
    
    const messageElement = form.querySelector('textarea');
    const message = messageElement ? messageElement.value : '';

    // 4. التحقق من البيانات
    if (!targetGroup || targetGroup.trim() === "" || targetGroup === "0") {
        alert("⚠️ يرجى تحديد الفئة المستهدفة من القائمة المنسدلة.");
        // تلوين القائمة المنسدلة بالأحمر لتنبيه المستخدم
        if(selectElement) {
            selectElement.style.border = "2px solid #ef4444";
            setTimeout(() => selectElement.style.border = "", 2000);
        }
        return;
    }
    
    if (!message || message.trim() === "") {
        alert("⚠️ يرجى كتابة نص الرسالة.");
        return;
    }

    // 5. تأثير التحميل
    const btn = form.querySelector('button[type="submit"]') || document.querySelector('#notifications button[type="submit"]');
    const originalText = btn ? btn.innerHTML : "إرسال";
    if(btn) {
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الإرسال والحفظ...';
        btn.disabled = true;
    }

    // 6. الإرسال للمنصة
    let platformSuccess = false;
    if (sendToPlatform) {
        try {
            // نستخدم نفس ملف الحفظ القديم الذي كان يعمل لديك بنجاح
            let response = await fetch('save_notification.php', { method: 'POST', body: formData });
            let data = await response.json();
            
            if (data.status === 'success') {
                platformSuccess = true;
            } else {
                alert("❌ فشل إرسال إشعار المنصة: " + data.message);
            }
        } catch (error) {
            console.error("خطأ في المنصة:", error);
            alert("⚠️ خطأ في الاتصال بسيرفر المنصة. تأكد من ملف save_notification.php");
        }
    }

    // 7. الإرسال للواتساب
    let whatsappSuccess = false;
    if (sendToWhatsapp) {
        try {
            // جلب أرقام الفئة المستهدفة
            let res = await fetch(`api_get_phones.php?target=${encodeURIComponent(targetGroup)}`);
            let data = await res.json();
            
            if (data.status === 'success' && data.phones && data.phones.length > 0) {
                let msgToEncode = title ? `*${title}*\n\n${message}` : message;
                let encodedMessage = encodeURIComponent(msgToEncode);
                let count = 0;
                
                data.phones.forEach(function(phone, index) {
                    if (phone && phone.length > 5) {
                        let cleanNumber = phone.replace(/[\s\-\+]/g, ''); 
                        if (cleanNumber.startsWith('00')) cleanNumber = cleanNumber.substring(2);
                        else if (cleanNumber.startsWith('0') && cleanNumber.length === 11) cleanNumber = '964' + cleanNumber.substring(1);
                        else if (cleanNumber.length < 10 && !cleanNumber.startsWith('964')) cleanNumber = '964' + cleanNumber;

                        let waUrl = `https://api.whatsapp.com/send?phone=${cleanNumber}&text=${encodedMessage}`;
                        setTimeout(() => { window.open(waUrl, '_blank'); }, index * 1200);
                        count++;
                    }
                });

                if (count > 0) {
                    whatsappSuccess = true;
                } else {
                    alert("⚠️ لم يتم العثور على أرقام هواتف صالحة للفئة المستهدفة.");
                }
            } else {
                alert("⚠️ لا توجد أرقام مسجلة لهذه الفئة، أو أن ملف جلب الأرقام غير جاهز.");
            }
        } catch (error) {
            console.error(error);
            alert("⚠️ فشل جلب أرقام الواتساب. تأكد من وجود ملف api_get_phones.php");
        }
    }

    // 8. إنهاء وإظهار رسائل النجاح
    if(btn) {
        btn.innerHTML = originalText;
        btn.disabled = false;
    }

    if (platformSuccess && !sendToWhatsapp) {
        alert("✅ تم إرسال الإشعار للمنصة وحفظه بنجاح.");
        form.reset();
        location.reload();
    } 
    else if (!sendToPlatform && whatsappSuccess) {
        alert("✅ جاري فتح نوافذ الواتساب للإرسال تباعاً...");
        form.reset();
    } 
    else if (platformSuccess && whatsappSuccess) {
        alert("✅ تم الإرسال للمنصة، وجاري فتح نوافذ الواتساب الآن...");
        form.reset();
        setTimeout(() => { location.reload(); }, 2000);
    }
}

// ==========================================
// 3. شؤون أولياء الأمور
// ==========================================
function openParentModal() { document.getElementById('addParentModal').style.display = 'flex'; }
function closeParentModal() { document.getElementById('addParentModal').style.display = 'none'; }

function submitParentForm(e) {
    e.preventDefault();
    const form = document.getElementById('manualParentForm');
    const formData = new FormData(form);
    const btn = form.querySelector('button[type="submit"]');
    const originalText = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الإنشاء والمزامنة...';
    btn.disabled = true;

    fetch('add_parent_manual.php', { method: 'POST', body: formData })
    .then(response => response.json())
    .then(data => {
        alert(data.message);
        if(data.status === 'success') {
            form.reset();
            closeParentModal();
        }
    })
    .catch(error => { alert('حدث خطأ في الاتصال بالخادم.'); })
    .finally(() => { btn.innerHTML = originalText; btn.disabled = false; });
}

// ==========================================
// 4. العمليات الأكاديمية والموافقات
// ==========================================
function addAcademicTag(type) {
    let tagName = type === 'level' ? document.getElementById('level_name_inp').value : document.getElementById('tag_name_inp').value;
    if(!tagName) { alert('يرجى كتابة المسمى أولاً!'); return; }
    
    let formData = new FormData();
    formData.append('type', type);
    formData.append('tag_name', tagName);

    fetch('save_academic_tags.php', { method: 'POST', body: formData })
    .then(res => res.json())
    .then(data => {
        alert(data.message);
        if(data.status === 'success') location.reload();
    });
}

function promoteStudents() {
    if(confirm('هل أنت متأكد من ترحيل الطلاب المحددين إلى الصفوف الأعلى بعد النجاح؟ لا يمكن التراجع عن هذه الخطوة.')) {
        fetch('promote_students.php', { method: 'POST' })
        .then(res => res.json())
        .then(data => {
            alert(data.message);
            location.reload();
        });
    }
}

function approveReport(reportId) {
    if(confirm('هل توافق على اعتماد هذا الملف ونشره في جدول الطلاب?')) {
        alert('تمت الموافقة بنجاح وتم إرسال إشعار آلي للأستاذ والطلاب! ✅');
    }
}

// ==========================================
// 5. إدارة الوسوم والتصنيفات (المدرسة)
// ==========================================
function openTagsModal() { 
    document.getElementById('tagsModal').style.display = 'flex'; 
    loadSchoolTags(); 
}
function closeTagsModal() { document.getElementById('tagsModal').style.display = 'none'; }

function saveSchoolTag(e) {
    e.preventDefault();
    const form = document.getElementById('schoolTagsForm');
    const formData = new FormData(form);
    const btn = form.querySelector('button[type="submit"]');
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...';
    btn.disabled = true;

    fetch('save_school_tag.php', { method: 'POST', body: formData })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            form.reset();
            loadSchoolTags();
        } else {
            alert(data.message);
        }
    })
    .catch(err => alert('خطأ في الاتصال بالخادم'))
    .finally(() => { btn.innerHTML = 'حفظ التصنيفات المدخلة'; btn.disabled = false; });
}

function loadSchoolTags() {
    const tbody = document.getElementById('tagsTableBody');
    tbody.innerHTML = '<tr><td colspan="4" style="color:#3498db; font-weight:normal;"><i class="fas fa-spinner fa-spin"></i> جاري جلب البيانات...</td></tr>';

    fetch('load_school_tags.php')
    .then(res => res.json())
    .then(data => {
        tbody.innerHTML = '';
        if(data.error) {
            tbody.innerHTML = `<tr><td colspan="4" style="color:#e74c3c; font-weight:bold;">خطأ: ${data.error}</td></tr>`;
            return;
        }
        if(data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="4" style="color:#999; font-weight:normal;">لا توجد تصنيفات مسجلة حتى الآن.</td></tr>';
            return;
        }
        data.forEach(tag => {
            tbody.innerHTML += `
                <tr>
                    <td>${tag.stage_name}</td>
                    <td>${tag.department_name || '-'}</td>
                    <td>${tag.section_name || '-'}</td>
                    <td><button class="btn-delete-tag" onclick="deleteSchoolTag(${tag.id})"><i class="fas fa-trash-alt"></i></button></td>
                </tr>
            `;
        });
    });
}

function deleteSchoolTag(id) {
    if(confirm('هل أنت متأكد من حذف هذا التصنيف؟')) {
        let fd = new FormData(); fd.append('id', id);
        fetch('delete_school_tag.php', { method: 'POST', body: fd })
        .then(() => { loadSchoolTags(); });
    }
}

// ==========================================
// 6. تسجيل الطلاب (النسخة القياسية/المدرس)
// ==========================================
function openAddStudentModal() { document.getElementById('addStudentModal').style.display = 'flex'; }
function closeAddStudentModal() { document.getElementById('addStudentModal').style.display = 'none'; }

function generateSyncID() {
    const currentYear = new Date().getFullYear();
    const yearShort = currentYear.toString().slice(-2);
    const randomNum = Math.floor(Math.random() * 9000 + 1000);
    document.getElementById('new-std-syncid').value = 'RM-' + yearShort + '-' + randomNum;
}

function saveNewStudent() {
    const form = document.getElementById('newStudentForm');
    const formData = new FormData(form);
    
    if(!formData.get('sync_id')) { alert('يجب توليد معرف المزامنة أولاً!'); return; }

    fetch('add_student_proc.php', { method: 'POST', body: formData })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            alert('تمت إضافة الطالب بنجاح!');
            closeAddStudentModal();
            location.reload(); 
        } else { alert(data.message); }
    });
}

// ==========================================
// 7. الجلب الديناميكي والفلترة (للإدارة)
// ==========================================
function loadDynamicTagsForAdmin() {
    fetch('load_school_tags.php')
    .then(res => res.json())
    .then(data => {
        if(data.error) return;
        const stages = [...new Set(data.map(item => item.stage_name).filter(Boolean))];
        const depts = [...new Set(data.map(item => item.department_name).filter(Boolean))];
        const branches = [...new Set(data.map(item => item.section_name).filter(Boolean))];

        document.querySelectorAll('.dynamic-stage').forEach(s => { s.innerHTML = '<option value="">-- اختر المرحلة --</option>'; stages.forEach(st => s.innerHTML += `<option value="${st}">${st}</option>`); });
        document.querySelectorAll('.dynamic-dept').forEach(s => { s.innerHTML = '<option value="عام">بدون قسم (عام)</option>'; depts.forEach(d => s.innerHTML += `<option value="${d}">${d}</option>`); });
        document.querySelectorAll('.dynamic-branch').forEach(s => { s.innerHTML = '<option value="الكل">بدون شعبة (الكل)</option>'; branches.forEach(b => s.innerHTML += `<option value="${b}">${b}</option>`); });

        const fStage = document.getElementById('filter_stage');
        const fDept = document.getElementById('filter_dept');
        const fBranch = document.getElementById('filter_branch');
        
        if(fStage) { fStage.innerHTML = '<option value="">كل المراحل</option>'; stages.forEach(st => fStage.innerHTML += `<option value="${st}">${st}</option>`); }
        if(fDept) { fDept.innerHTML = '<option value="">كل الأقسام</option>'; depts.forEach(d => fDept.innerHTML += `<option value="${d}">${d}</option>`); }
        if(fBranch) { fBranch.innerHTML = '<option value="">كل الشعب</option>'; branches.forEach(b => fBranch.innerHTML += `<option value="${b}">${b}</option>`); }
    });
}

function loadFilteredStudents() {
    const stageEl = document.getElementById('filter_stage');
    const deptEl = document.getElementById('filter_dept');
    const branchEl = document.getElementById('filter_branch');
    
    const stage = stageEl ? stageEl.value : '';
    const dept = deptEl ? deptEl.value : '';
    const branch = branchEl ? branchEl.value : '';
    
    const tbody = document.getElementById('students_real_data');
    if(!tbody) return;
    
    tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:20px; color:#8b5cf6;"><i class="fas fa-spinner fa-spin"></i> جاري تحديث الجدول...</td></tr>';

    const formData = new FormData();
    formData.append('stage', stage);
    formData.append('dept', dept);
    formData.append('branch', branch);

    fetch('fetch_students.php', { method: 'POST', body: formData })
    .then(res => res.text())
    .then(html => { tbody.innerHTML = html; })
    .catch(err => console.error('Error fetching students:', err));
}

// ==========================================
// 8. تسجيل الطلاب (نسخة الإدارة الشاملة)
// ==========================================
function openAdminAddStudentModal() { 
    document.getElementById('adminAddStudentModal').style.display = 'flex'; 
    loadDynamicTagsForAdmin();
}

function closeAdminAddStudentModal() {
    document.getElementById('adminAddStudentModal').style.display = 'none';
    document.getElementById('adminNewStudentForm').reset();
}

function generateAdminSyncID() {
    const currentYear = new Date().getFullYear();
    const yearShort = currentYear.toString().slice(-2);
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let randomPart = '';
    for (let i = 0; i < 4; i++) { randomPart += chars.charAt(Math.floor(Math.random() * chars.length)); }
    document.getElementById('admin-std-syncid').value = 'RM-' + yearShort + '-' + randomPart;
}

function saveAdminNewStudent() {
    const form = document.getElementById('adminNewStudentForm');
    const formData = new FormData(form);
    
    if (!formData.get('student_id')) { alert('يجب توليد معرف المزامنة أولاً!'); return; }
    
    const btn = form.querySelector('button[onclick="saveAdminNewStudent()"]');
    const originalText = btn ? btn.innerHTML : 'حفظ';
    if(btn) { btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...'; btn.disabled = true; }

    fetch('add_student.php', { method: 'POST', body: formData })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            alert('تم تسجيل الطالب بنجاح في نظام المؤسسة!');
            closeAdminAddStudentModal();
            loadFilteredStudents(); 
        } else { alert('خطأ: ' + data.message); }
    })
    .catch(err => { alert('حدث خطأ في الاتصال بالسيرفر.'); })
    .finally(() => { if(btn) { btn.innerHTML = originalText; btn.disabled = false; } });
}

// ==========================================
// 9. تشغيل الدوال فور تحميل الصفحة
// ==========================================
document.addEventListener('DOMContentLoaded', () => {
    loadDynamicTagsForAdmin(); 
    loadFilteredStudents();  
});

// ==========================================
// 10. دالة حفظ إعدادات المؤسسة الشاملة
// ==========================================
function saveAllSchoolSettings() {
    const form = document.getElementById('fullSchoolSettingsForm');
    const formData = new FormData(form);
    
    const btn = event.currentTarget;
    const originalContent = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span>جاري حفظ وتطبيق الإعدادات...</span>';
    btn.disabled = true;

    fetch('save_comprehensive_settings.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        alert(data.message || 'تم حفظ الإعدادات بنجاح!');
        if(data.status === 'success') {
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('يجب إنشاء ملف save_comprehensive_settings.php لمعالجة البيانات.');
    })
    .finally(() => {
        btn.innerHTML = originalContent;
        btn.disabled = false;
    });
}

function viewParentDetails(parentId) {
    const modal = document.getElementById('parentDetailsModal');
    const content = document.getElementById('parentDetailsContent');
    
    modal.style.display = 'flex';
    content.innerHTML = '<div style="text-align:center; padding:20px;"><i class="fas fa-spinner fa-spin fa-2x"></i></div>';
    
    fetch('get_parent_details.php?id=' + parentId)
    .then(response => response.text())
    .then(html => {
        content.innerHTML = html;
    })
    .catch(err => {
        content.innerHTML = 'حدث خطأ أثناء تحميل البيانات.';
    });
}

function deleteParent(parentId) {
    if(confirm('⚠️ هل أنت متأكد؟ سيتم حذف ولي الأمر وكافة ارتباطاته بالطلاب!')) {
        let fd = new FormData();
        fd.append('id', parentId);
        fetch('delete_parent.php', { method: 'POST', body: fd })
        .then(res => res.json())
        .then(data => {
            alert('تم الحذف بنجاح.');
            location.reload();
        });
    }
}

function editParent(parentId) {
    alert('جارٍ تجهيز نموذج التعديل لولي الأمر رقم: ' + parentId);
}

function filterTable(query) {
    const tbody = document.getElementById('parentsBody');
    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;">جاري البحث...</td></tr>';
    
    fetch('get_parents_table.php?q=' + encodeURIComponent(query))
    .then(response => response.text())
    .then(html => {
        tbody.innerHTML = html;
    });
}

function filterStudentsForParents() {
    const search = document.getElementById('fp_search').value;
    const stage = document.getElementById('fp_stage').value;
    const sclass = document.getElementById('fp_class').value;
    const section = document.getElementById('fp_section').value;
    const tbody = document.getElementById('studentsParentsBody');

    tbody.innerHTML = '<tr><td colspan="3" style="text-align:center;"><i class="fas fa-spinner fa-spin"></i> جاري البحث...</td></tr>';

    fetch(`fetch_students_for_parents.php?search=${encodeURIComponent(search)}&stage=${encodeURIComponent(stage)}&class=${encodeURIComponent(sclass)}&section=${encodeURIComponent(section)}`)
    .then(res => res.text())
    .then(html => { tbody.innerHTML = html; });
}

function openParentInfo(studentId, studentName) {
    const modal = document.getElementById('parentInfoModal');
    const content = document.getElementById('parentInfoContent');
    modal.style.display = 'flex';
    content.innerHTML = '<div style="text-align:center; padding:20px;"><i class="fas fa-spinner fa-spin fa-2x color-primary"></i></div>';

    let fd = new FormData();
    fd.append('student_id', studentId);
    fd.append('student_name', studentName);

    fetch('get_parent_info.php', { method: 'POST', body: fd })
    .then(res => res.text())
    .then(html => { content.innerHTML = html; });
}

document.addEventListener('DOMContentLoaded', () => { filterStudentsForParents(); });

function sendDirectNotice(st_id) {
    let msg = document.getElementById('quickNoticeMsg').value;
    if(msg.trim() === '') { 
        alert('يرجى كتابة الرسالة أولاً!'); 
        return; 
    }
    
    let btn = document.getElementById('sendNoticeBtn');
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الإرسال...';
    btn.disabled = true;

    let fd = new FormData();
    fd.append('student_id', st_id);
    fd.append('message', msg);

    fetch('send_direct_notice.php', { method: 'POST', body: fd })
    .then(res => res.json())
    .then(data => {
        alert(data.message);
        if(data.status === 'success') { 
            document.getElementById('quickNoticeMsg').value = ''; 
        }
    })
    .catch(err => {
        alert('حدث خطأ في الاتصال بالسيرفر! تأكد من وجود ملف send_direct_notice.php');
        console.error(err);
    })
    .finally(() => {
        btn.innerHTML = '<i class="fas fa-paper-plane"></i> إرسال';
        btn.disabled = false;
    });
}
</script>
<script>
    // جلب التبويب الافتراضي الذي حدده الـ PHP بناءً على وظيفة المستخدم
    const defaultTab = "<?php echo $default_tab; ?>";

    function switchView(viewId, element = null) {
        // إخفاء جميع الأقسام (تأكد أن كل الأقسام تحمل كلاس view-section)
        document.querySelectorAll('.view-section').forEach(section => {
            section.style.display = 'none';
        });

        // إزالة التفعيل من كل الأزرار
        document.querySelectorAll('.sidebar-menu .menu-item').forEach(item => {
            item.classList.remove('active');
        });

        // إظهار القسم المطلوب
        const targetView = document.getElementById(viewId);
        if (targetView) targetView.style.display = 'block';

        // تفعيل الزر
        if (element) {
            element.classList.add('active');
        } else {
            const targetBtn = document.querySelector(`.sidebar-menu .menu-item[onclick*="${viewId}"]`);
            if (targetBtn) targetBtn.classList.add('active');
        }
    }

    // تشغيل التبويب الافتراضي فور تحميل الصفحة
    document.addEventListener('DOMContentLoaded', () => {
        if(defaultTab !== 'transport') { // استثناء النقل لأنه رابط مباشر (href) وليس تبويب (onclick)
            switchView(defaultTab);
        }
    });
</script>
<!-- ============================================== -->
<!-- كود فتح الاسكنر كنافذة مستقلة (Popup) -->
<!-- ============================================== -->
<script>
function openScannerApp() {
    // تحديد أبعاد النافذة لتشبه الموبايل
    const windowWidth = 450;
    const windowHeight = 750;
    
    // وضع النافذة في منتصف شاشة الكمبيوتر
    const left = (screen.width - windowWidth) / 2;
    const top = (screen.height - windowHeight) / 2;
    
    // فتح ملف scanner.php الذي قمت ببرمجته وتأكدت من عمله
    window.open(
        'scanner.php?test=1', 
        'SmartScanner', 
        `width=${windowWidth},height=${windowHeight},top=${top},left=${left},resizable=no,scrollbars=yes,status=no,toolbar=no,menubar=no`
    );
}

</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // قراءة دور المستخدم الحالي من الجلسة (PHP)
        const userRole = "<?php echo isset($_SESSION['role']) ? $_SESSION['role'] : 'admin'; ?>";
        
        // إذا كان المستخدم (موظف سكنر) أو (موظف استقبال)
        if (userRole === 'scanner' || userRole === 'reception') {
            
            // 1. إخفاء كافة عناصر القائمة الجانبية ما عدا (الماسح الضوئي) و (تسجيل الخروج)
            const menuItems = document.querySelectorAll('.sidebar-menu .menu-item');
            menuItems.forEach(item => {
                const onclickAttr = item.getAttribute('onclick') || '';
                // إذا لم يكن الزر يحتوي على أمر فتح الماسح، قم بإخفائه
                if (!onclickAttr.includes('scanner-section')) {
                    item.style.display = 'none';
                }
            });

            // 2. إخفاء جميع الأقسام المعروضة في الشاشة (مثل الإحصائيات واللوحة الرئيسية)
            document.querySelectorAll('.view-section').forEach(sec => {
                sec.style.display = 'none';
            });
            
            // 3. إجبار النظام على فتح قسم الماسح الضوئي فوراً
            const scannerSec = document.getElementById('scanner-section');
            if (scannerSec) {
                scannerSec.style.display = 'block';
                scannerSec.style.animation = 'fadeIn 0.4s';
            }

            // 4. تغيير عنوان الشريط العلوي ليتناسب مع الموظف
            const topbarTitle = document.querySelector('.topbar div');
            if (topbarTitle) {
                topbarTitle.innerHTML = `<i class="fas fa-qrcode" style="color: #22c55e; margin-left: 10px;"></i> بوابة الحضور السريع (موظف الاستعلامات)`;
            }
        }
    });
    
    <!-- مكتبة قراءة الباركود والـ QR Code -->
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

<script>
// دالة المحاكاة اليدوية أو عبر الباركود
function simulateScan(studentId) {
    if(!studentId.trim()) {
        alert('يرجى إدخال أو مسح معرف الطالب أولاً!');
        return;
    }
    
    // إرسال طلب تسجيل الحضور للخادم
    let fd = new FormData();
    fd.append('student_id', studentId);
    
    fetch('record_attendance.php', { method: 'POST', body: fd })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            document.getElementById('scan-std-name').innerText = data.student_name;
            document.getElementById('scan-std-details').innerText = 'تم تسجيل الحضور بنجاح في الوقت: ' + data.time;
            document.getElementById('manual_student_id_input').value = '';
            // صوت نجاح أو تنبيه بصري خفيف
        } else {
            alert(data.message || 'لم يتم العثور على الطالب بهذا المعرف!');
        }
    })
    .catch(err => {
        // محاكاة بصرية محلية في حال لم تقم بإنشاء ملف الـ backend بعد
        document.getElementById('scan-std-name').innerText = "الطالب: " + studentId;
        document.getElementById('scan-std-details').innerText = "تم تسجيل الحضور بنجاح (وضع محلي تجريبي) ✅";
        document.getElementById('manual_student_id_input').value = '';
    });
}

// تشغيل الكاميرا الحقيقية تلقائياً عند فتح القسم
document.addEventListener("DOMContentLoaded", function () {
    // التأكد من أن مكتبة الكاميرا متوفرة
    if (typeof Html5Qrcode !== "undefined") {
        const scannerBox = document.querySelector("#scanner-section div[style*='height: 280px']");
        if(scannerBox) {
            scannerBox.innerHTML = '<div id="real-webcam" style="width:100%; height:100%;"></div>';
            
            const html5QrCode = new Html5Qrcode("real-webcam");
            html5QrCode.start(
                { facingMode: "user" }, 
                { fps: 10, qrbox: { width: 200, height: 200 } },
                (decodedText, decodedResult) => {
                    // عند قراءة الباركود بنجاح عبر الكاميرا
                    simulateScan(decodedText);
                },
                (errorMessage) => {
                    // خطأ في المسح (طبيعي أثناء البحث عن الباركود)
                }
            ).catch(err => {
                console.log("تعذر تشغيل كاميرا الويب مباشرة، يمكنك استخدام الإدخال اليدوي: ", err);
            });
        }
    }
});


    </script>
<script>
 // 🚀 دالة فتح صفحة الطباعة الرسمية 🚀
function openOfficialPrintPage() {
    try {
        let subjectElem = document.getElementById('ctrl_subject');
        let stageElem = document.getElementById('ctrl_stage');
        
        let subject = subjectElem ? subjectElem.value : '';
        let stage = stageElem ? stageElem.value : '';
        
        if (!subject || subject === "") {
            alert('يرجى اختيار المادة أولاً من القائمة المنسدلة لطباعة السجل الخاص بها!');
            return;
        }
        
        // فتح ملف الطباعة الاحترافي في نافذة جديدة مع تمرير اسم المادة والمرحلة
        let printUrl = `print_master_record.php?subject=${encodeURIComponent(subject)}&stage=${encodeURIComponent(stage)}`;
        window.open(printUrl, '_blank');
        
    } catch (error) {
        console.error("حدث خطأ أثناء محاولة الطباعة:", error);
        alert("حدث خطأ! تأكد من أنك اخترت المادة بشكل صحيح.");
    }
}
</script>
<script>
document.getElementById('assign_teacher_id').addEventListener('change', function() {
    const teacherId = this.value;
    const subjectInput = document.getElementById('assign_subject');
    
    if (!teacherId) {
        subjectInput.value = '';
        return;
    }

    subjectInput.value = 'جاري جلب التخصص...';

    fetch(`get_teacher_specialization.php?teacher_id=${teacherId}`)
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success' && data.specialization) {
            subjectInput.value = data.specialization;
        } else {
            subjectInput.value = '';
            alert(data.message || 'لم يتم العثور على تخصص لهذا المدرس. يمكنك إدخاله يدوياً.');
        }
    })
    .catch(err => {
        console.error('Error fetching specialization:', err);
        subjectInput.value = '';
        alert('حدث خطأ في الاتصال بالسيرفر أثناء جلب التخصص.');
    });
});

// دالة لجلب الفصول التي يدرسها المدرس المختار
function loadTeacherAssignments(teacherName) {
    const classSelect = document.getElementById('admin_tg_class_subject');
    
    if (!teacherName) {
        classSelect.innerHTML = '<option value="">-- اختر المدرس أولاً --</option>';
        classSelect.disabled = true;
        return;
    }

    classSelect.innerHTML = '<option value="">جاري الجلب...</option>';
    classSelect.disabled = true;

    // سنصنع ملف API بسيط يجلب التوزيعات بناءً على اسم المدرس
    fetch(`api_admin_teacher_gradebook.php?action=get_classes&teacher_name=${encodeURIComponent(teacherName)}`)
    .then(res => res.json())
    .then(data => {
        classSelect.innerHTML = '<option value="">-- اختر الصف والمادة --</option>';
        if (data.status === 'success' && data.classes.length > 0) {
            data.classes.forEach(c => {
                // ندمج كل البيانات في قيمة واحدة (value) لنفصلها لاحقاً
                let valStr = `${c.stage}|${c.department}|${c.section}|${c.subject}`;
                let displayStr = `${c.subject} | ${c.stage} - ${c.department} - شعبة ${c.section}`;
                classSelect.innerHTML += `<option value="${valStr}">${displayStr}</option>`;
            });
            classSelect.disabled = false;
        } else {
            classSelect.innerHTML = '<option value="">لا توجد فصول مسندة لهذا المدرس</option>';
        }
    })
    .catch(err => {
        classSelect.innerHTML = '<option value="">خطأ في الاتصال</option>';
    });
}

// دالة جلب درجات المدرس وعرضها في الجدول
function loadTeacherGradebook() {
    const teacherName = document.getElementById('admin_tg_teacher').value;
    const classData = document.getElementById('admin_tg_class_subject').value;
    const tbody = document.getElementById('adminTeacherGradebookBody');

    if (!teacherName || !classData) {
        alert("يرجى اختيار المدرس وتحديد الصف والمادة.");
        return;
    }

    tbody.innerHTML = '<tr><td colspan="17" style="text-align:center; padding:50px;"><i class="fas fa-spinner fa-spin fa-2x text-pink-500"></i></td></tr>';

    // فصل البيانات التي دمجناها (مرحلة|قسم|شعبة|مادة)
    let parts = classData.split('|');
    
    let fd = new FormData();
    fd.append('action', 'fetch_grades');
    fd.append('teacher_name', teacherName);
    fd.append('stage', parts[0]);
    fd.append('dept', parts[1]);
    fd.append('section', parts[2]);
    fd.append('subject', parts[3]);

    fetch('api_admin_teacher_gradebook.php', { method: 'POST', body: fd })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            if(data.students.length === 0) {
                tbody.innerHTML = '<tr><td colspan="17" style="text-align:center; padding:50px; color:#94a3b8;">لا توجد درجات أو طلاب لهذا المدرس في هذا الصف.</td></tr>';
                return;
            }

            let html = '';
            data.students.forEach((s, i) => {
                // استخدام nullish coalescing لضمان عدم ظهور undefined
                let m1 = s.month_1 ?? '-'; let m2 = s.month_2 ?? '-'; let m3 = s.month_3 ?? '-'; let t1 = s.term_1 ?? '-';
                let mid = s.mid_year ?? '-';
                let m4 = s.month_4 ?? '-'; let m5 = s.month_5 ?? '-'; let m6 = s.month_6 ?? '-'; let t2 = s.term_2 ?? '-';
                let ann = s.annual_effort ?? '-'; let finEx = s.final_exam ?? '-'; let finG = s.final_grade ?? '-';
                let mk = s.makeup_exam ?? '-'; let mkAft = s.final_after_makeup ?? '-';
                
                // حالة الاعتماد (لإظهارها للمدير)
                let statusBadge = s.is_submitted == 1 ? '<span style="color:#10b981; font-size:10px; margin-right:5px;">(معتمد)</span>' : (finG !== '-' ? '<span style="color:#f59e0b; font-size:10px; margin-right:5px;">(مسودة)</span>' : '');

                html += `
                <tr style="border-bottom: 1px solid rgba(255,255,255,0.05); transition: 0.3s;" onmouseover="this.style.background='rgba(255,255,255,0.05)'" onmouseout="this.style.background='transparent'">
                    <td style="padding: 10px; border-left: 1px solid rgba(255,255,255,0.05); color:#94a3b8;">${i+1}</td>
                    <td style="padding: 10px; text-align: right; font-weight: bold; border-left: 1px solid rgba(255,255,255,0.05);">${s.student_name} ${statusBadge}</td>
                    
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${m1}</td>
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${m2}</td>
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${m3}</td>
                    <td style="font-weight:bold; background:rgba(59,130,246,0.05); border-left: 1px solid rgba(255,255,255,0.05); color:#93c5fd;">${t1}</td>
                    
                    <td style="font-weight:bold; color:#3b82f6; font-size: 1.1rem; border-left: 1px solid rgba(255,255,255,0.05);">${mid}</td>
                    
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${m4}</td>
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${m5}</td>
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${m6}</td>
                    <td style="font-weight:bold; background:rgba(245,158,11,0.05); border-left: 1px solid rgba(255,255,255,0.05); color:#fcd34d;">${t2}</td>
                    
                    <td style="font-weight:bold; color:#f59e0b; font-size: 1.1rem; border-left: 1px solid rgba(255,255,255,0.05);">${ann}</td>
                    <td style="font-weight:bold; color:#a855f7; border-left: 1px solid rgba(255,255,255,0.05);">${finEx}</td>
                    <td style="font-weight:bold; color:#10b981; font-size:1.2rem; border-left: 1px solid rgba(255,255,255,0.05);">${finG}</td>
                    
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${mk}</td>
                    <td style="font-weight:bold; color:#f97316;">${mkAft}</td>
                </tr>`;
            });
            tbody.innerHTML = html;
        } else {
            tbody.innerHTML = `<tr><td colspan="17" style="text-align:center; color:red; padding:50px;">${data.message}</td></tr>`;
        }
    })
    .catch(err => { tbody.innerHTML = '<tr><td colspan="17" style="text-align:center; color:red; padding:50px;">خطأ في الاتصال بالخادم.</td></tr>'; });
}


</script>
<script>
function openTeachersGradebook(btnElement) {
    // 1. إخفاء جميع الأقسام (سواء كانت تحمل كلاس section-container أو view-section)
    document.querySelectorAll('.section-container, .view-section, .tab-content').forEach(el => {
        el.style.display = 'none';
        el.classList.remove('active');
    });

    // 2. إزالة التأثير النشط (active) من جميع أزرار القائمة الجانبية
    document.querySelectorAll('.sidebar-menu a, .sidebar-menu li, .menu-item').forEach(el => {
        el.classList.remove('active');
    });

    // 3. إظهار قسم سجل المدرسين تحديداً
    let targetSection = document.getElementById('teachers-gradebook-section');
    if (targetSection) {
        targetSection.style.display = 'block';
        targetSection.classList.add('active');
    } else {
        alert("تنبيه: قسم السجل غير موجود في ملف HTML. تأكد من لصق كود القسم.");
    }

    // 4. تحديد الزر الذي تم ضغطه وإعطاؤه اللون النشط
    if(btnElement) {
        btnElement.classList.add('active');
    }
}
</script>
<script>


// دالة لجلب الفصول والمواد مفصلة بناءً على المدرس المختار
// دالة لجلب الفصول والمواد مفصلة بناءً على المدرس المختار
function loadTeacherAssignmentsDetailed(teacherId) {
    const selSubject = document.getElementById('admin_tg_subject');
    const selStage = document.getElementById('admin_tg_stage');
    const selDept = document.getElementById('admin_tg_dept');
    const selSection = document.getElementById('admin_tg_section');
    
    if (!teacherId) {
        selSubject.innerHTML = '<option value="">-- المادة --</option>'; selSubject.disabled = true;
        selStage.innerHTML = '<option value="">-- المرحلة --</option>'; selStage.disabled = true;
        selDept.innerHTML = '<option value="">-- القسم --</option>'; selDept.disabled = true;
        selSection.innerHTML = '<option value="">-- الشعبة --</option>'; selSection.disabled = true;
        return;
    }

    selSubject.innerHTML = '<option value="">جاري...</option>';
    selStage.innerHTML = '<option value="">جاري...</option>';
    
    fetch(`api_admin_teacher_gradebook.php?action=get_classes_detailed&teacher_name=${encodeURIComponent(teacherId)}`)
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            selSubject.innerHTML = '<option value="">-- المادة --</option>';
            selStage.innerHTML = '<option value="">-- المرحلة --</option>';
            selDept.innerHTML = '<option value="عام">عام</option>';
            selSection.innerHTML = '<option value="الكل">الكل</option>';

            if(data.subjects && data.subjects.length > 0) {
                data.subjects.forEach(sub => { selSubject.innerHTML += `<option value="${sub}">${sub}</option>`; });
                selSubject.disabled = false;
            }

            if(data.stages && data.stages.length > 0) {
                data.stages.forEach(stg => { selStage.innerHTML += `<option value="${stg}">${stg}</option>`; });
                selStage.disabled = false;
            }

            if(data.depts && data.depts.length > 0) {
                data.depts.forEach(dpt => { if(dpt !== 'عام') selDept.innerHTML += `<option value="${dpt}">${dpt}</option>`; });
                selDept.disabled = false;
            }

            if(data.sections && data.sections.length > 0) {
                data.sections.forEach(sec => { if(sec !== 'الكل' && sec !== 'عام') selSection.innerHTML += `<option value="${sec}">${sec}</option>`; });
                selSection.disabled = false;
            }
        } else {
            alert(data.message || 'لا توجد فصول مسندة لهذا المدرس.');
        }
    })
    .catch(err => {
        console.error(err);
        alert('خطأ في الاتصال بالخادم لجلب التوزيعات.');
    });
}

// دالة جلب درجات المدرس التفصيلية والإحصائيات
function loadTeacherGradebookDetailed() {
    const teacherId = document.getElementById('admin_tg_teacher').value;
    const subject = document.getElementById('admin_tg_subject').value;
    const stage = document.getElementById('admin_tg_stage').value;
    const dept = document.getElementById('admin_tg_dept').value;
    const section = document.getElementById('admin_tg_section').value;
    const tbody = document.getElementById('adminTeacherGradebookBody');

    if (!teacherId || !subject || !stage) {
        alert("يرجى اختيار المدرس، والمادة، والمرحلة كحد أدنى لجلب السجل.");
        return;
    }

    tbody.innerHTML = '<tr><td colspan="19" style="text-align:center; padding:50px;"><i class="fas fa-spinner fa-spin fa-2x text-pink-500"></i></td></tr>';

    let fd = new FormData();
    fd.append('action', 'fetch_grades');
    fd.append('teacher_name', teacherId); 
    fd.append('subject', subject);
    fd.append('stage', stage);
    fd.append('dept', dept);
    fd.append('section', section);

    fetch('api_admin_teacher_gradebook.php', { method: 'POST', body: fd })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            if(data.students.length === 0) {
                tbody.innerHTML = '<tr><td colspan="19" style="text-align:center; padding:50px; color:#94a3b8;">لا توجد درجات أو طلاب لهذا المدرس في هذا الصف.</td></tr>';
                document.getElementById('tg_control_stats').style.display = 'none';
                return;
            }

            let html = '';
            let evaluatedCount = 0;
            let passCount = 0;
            let failCount = 0;
            let currentPassScore = 50;

            data.students.forEach((s, i) => {
                let m1 = s.month_1 ?? '-'; let m2 = s.month_2 ?? '-'; let t1 = s.term_1 ?? '-';
                let mid = s.mid_year ?? '-';
                let m4 = s.month_4 ?? '-'; let m5 = s.month_5 ?? '-'; let t2 = s.term_2 ?? '-';
                
                // 1. السعي وقرار الإدارة
                let ann = s.annual_effort !== '' && s.annual_effort !== null ? parseFloat(s.annual_effort) : 0;
                let adminGrace = s.admin_grace ? parseFloat(s.admin_grace) : 0;
                let finalSaei = (s.annual_effort !== null && s.annual_effort !== '') ? (ann + adminGrace) : '-';
                
                // 2. الامتحان النهائي (شفهي من المدرس، تحريري للإدارة)
                let fin_o = s.final_oral !== '' && s.final_oral !== null ? parseFloat(s.final_oral) : 0;
                let fin_w_val = s.final_exam !== '' && s.final_exam !== null ? parseFloat(s.final_exam) : '';
                
                let totalFinalExam = '-';
                // لا نظهر مجموع النهائي ولا الدرجة النهائية إلا إذا أدخلت الإدارة التحريري!
                if(fin_w_val !== '') {
                    totalFinalExam = fin_o + fin_w_val;
                }
                
                // 3. 🚀 الدرجة النهائية (تجمع وتقسم على 2) 🚀
                let overallTotal = '-';
                if(finalSaei !== '-' && totalFinalExam !== '-') {
                    overallTotal = Math.round((finalSaei + totalFinalExam) / 2); // القسمة على 2 مع جبر الكسر
                }

                // 4. الدور الثاني (إكمال)
                let mk_val = s.makeup_exam !== null && s.makeup_exam !== '' ? parseFloat(s.makeup_exam) : '';
                let mkAft_val = s.final_after_makeup !== null && s.final_after_makeup !== '' ? parseFloat(s.final_after_makeup) : '';
                
                currentPassScore = s.pass_score ? parseFloat(s.pass_score) : 50;

                // 5. منطق التقييم الاحترافي الذكي
                let resultText = 'قيد التقييم'; 
                let resultColor = '#94a3b8'; 

                if (overallTotal !== '-') {
                    evaluatedCount++;
                    
                    // 🚀 القاعدة الذهبية: إذا نجح من الدور الأول، نتجاهل الدور الثاني تماماً 🚀
                    if (overallTotal >= currentPassScore) {
                        resultText = 'ناجح'; 
                        resultColor = '#10b981'; 
                        passCount++; 
                    } 
                    // إذا لم ينجح من الدور الأول، نتحقق من الدور الثاني
                    else {
                        if (mkAft_val !== '' && mkAft_val !== null) {
                            if (mkAft_val >= currentPassScore) {
                                resultText = 'ناجح'; // نجح في الدور الثاني
                                resultColor = '#10b981'; 
                                passCount++; 
                            } else {
                                resultText = 'راسب'; // رسب في الدور الثاني
                                resultColor = '#ef4444'; 
                                failCount++;
                            }
                        } else {
                            resultText = 'مكمل'; // لم يمتحن دور ثاني بعد
                            resultColor = '#ef4444'; 
                            failCount++;
                        }
                    }
                }

                // إغلاق حقول الدور الثاني للناجحين والذين لم يقيموا بعد
                let disableMakeup = (overallTotal === '-' || overallTotal >= currentPassScore) ? 'disabled title="يتاح هذا الحقل للمكملين فقط"' : '';
                let statusBadge = s.is_submitted == 1 ? '<span style="color:#10b981; font-size:10px; margin-right:5px;">(معتمد)</span>' : '';


                html += `
                <tr style="border-bottom: 1px solid rgba(255,255,255,0.05); transition: 0.3s;" onmouseover="this.style.background='rgba(255,255,255,0.05)'" onmouseout="this.style.background='transparent'">
                    <td style="padding: 10px; border-left: 1px solid rgba(255,255,255,0.05); color:#94a3b8;">${i+1}</td>
                    <td style="padding: 10px; text-align: right; font-weight: bold; border-left: 1px solid rgba(255,255,255,0.05);">${s.student_name} ${statusBadge}</td>
                    
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${m1}</td>
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${m2}</td>
                    <td style="font-weight:bold; background:rgba(59,130,246,0.05); border-left: 1px solid rgba(255,255,255,0.05); color:#93c5fd;">${t1}</td>
                    <td style="font-weight:bold; color:#3b82f6; font-size: 1.1rem; border-left: 1px solid rgba(255,255,255,0.05);">${mid}</td>
                    
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${m4}</td>
                    <td style="border-left: 1px solid rgba(255,255,255,0.05);">${m5}</td>
                    <td style="font-weight:bold; background:rgba(245,158,11,0.05); border-left: 1px solid rgba(255,255,255,0.05); color:#fcd34d;">${t2}</td>
                    
                    <td style="font-weight:bold; color:#f59e0b; font-size: 1.1rem; border-left: 1px solid rgba(255,255,255,0.05);">${s.annual_effort ?? '-'}</td>
                    
                    <!-- حقل قرار الإدارة -->
                    <td style="background:rgba(236,72,153,0.1); border-left: 1px solid rgba(255,255,255,0.05);">
                        <input type="number" value="${adminGrace}" 
                               style="width: 50px; text-align:center; padding:4px; border: 1px solid #ec4899; border-radius: 4px; color:#fff; background:#090204; font-weight:bold;" 
                               onchange="tg_saveAdminInput('${s.student_id}', 'admin_grace', this.value)"
                               ${(s.annual_effort === null || s.annual_effort === '') ? 'disabled title="لا يمكن مساعدة طالب ليس لديه سعي"' : ''}>
                    </td>
                    <td style="font-weight:bold; color:#fbbf24; font-size:1.1rem; border-left: 1px solid rgba(255,255,255,0.05);">${finalSaei}</td>
                    
                    <td style="color:#aaa; font-size:12px; border-left: 1px solid rgba(255,255,255,0.05);">${s.final_oral ?? '-'}</td>
                    
                    <!-- إدخال التحريري النهائي -->
                    <td style="background:rgba(147, 0, 60, 0.2); border-left: 1px solid rgba(255,255,255,0.05);">
                        <input type="number" value="${fin_w_val}" 
                               style="width: 50px; text-align:center; padding:4px; border: 1px solid #ff4d79; border-radius: 4px; color:#fff; background:#090204; font-weight:bold;" 
                               onchange="tg_saveAdminInput('${s.student_id}', 'final_exam', this.value)">
                    </td>
                    <td style="font-weight:bold; color:#a855f7; border-left: 1px solid rgba(255,255,255,0.05);">${totalFinalExam}</td>
                    
                    <!-- الدرجة النهائية (القسمة على 2) -->
                    <td style="font-weight:bold; color:#10b981; font-size:1.2rem; border-left: 1px solid rgba(255,255,255,0.05); background:rgba(16,185,129,0.1);">${overallTotal}</td>
                    
                    <!-- 🚀 حقول الدور الثاني للإدارة 🚀 -->
                    <td style="background:rgba(239, 68, 68, 0.1); border-left: 1px solid rgba(255,255,255,0.05);">
                        <input type="number" value="${mk_val}" 
                               style="width: 50px; text-align:center; padding:4px; border: 1px solid #ef4444; border-radius: 4px; color:#fff; background:#090204; font-weight:bold;" 
                               onchange="tg_saveAdminInput('${s.student_id}', 'makeup_exam', this.value)" ${disableMakeup}>
                    </td>
                    <td style="background:rgba(239, 68, 68, 0.2); border-left: 1px solid rgba(255,255,255,0.05);">
                        <input type="number" value="${mkAft_val}" 
                               style="width: 50px; text-align:center; padding:4px; border: 1px solid #ef4444; border-radius: 4px; color:#fff; background:#090204; font-weight:bold;" 
                               onchange="tg_saveAdminInput('${s.student_id}', 'final_after_makeup', this.value)" ${disableMakeup}>
                    </td>
                    
                    <td style="font-weight:bold; font-size:1.1rem; color:${resultColor}; border-left: 1px solid rgba(255,255,255,0.05);">
                        ${resultText}
                    </td>
                </tr>`;
            });
            
            document.getElementById('adminTeacherGradebookBody').innerHTML = html;


            document.getElementById('tg_control_stats').style.display = 'flex';
            document.getElementById('tg_stat_total').innerHTML = `${data.students.length} <br><span style="font-size:0.8rem; color:#cbd5e1; font-weight:normal;">(النجاح من: ${currentPassScore})</span>`;
            document.getElementById('tg_stat_pass').innerText = passCount;
            document.getElementById('tg_stat_fail').innerText = failCount;
            let successRate = evaluatedCount > 0 ? Math.round((passCount / evaluatedCount) * 100) : 0;
            document.getElementById('tg_stat_rate').innerText = successRate + '%';

        } else {
            tbody.innerHTML = `<tr><td colspan="19" style="text-align:center; color:red; padding:50px;">${data.message}</td></tr>`;
        }
    })
    .catch(err => {
        tbody.innerHTML = '<tr><td colspan="19" style="text-align:center; color:red; padding:50px;">خطأ في الاتصال بالخادم.</td></tr>';
    });
}

// دالة حفظ درجات الإدارة (القرار أو التحريري النهائي)
function tg_saveAdminInput(studentId, fieldName, fieldValue) {
    let fd = new FormData();
    fd.append('student_id', studentId);
    fd.append('subject', document.getElementById("admin_tg_subject").value);
    fd.append('field', fieldName); // admin_grace أو final_exam
    fd.append('value', fieldValue || 0);

    // 🚀 الإرسال لملف الحفظ الجديد 🚀
    fetch('api_admin_save_inputs.php', { method: 'POST', body: fd })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            loadTeacherGradebookDetailed(); // إعادة تحميل الجدول ليتم حساب المجموع آلياً
        } else {
            alert('خطأ: ' + data.message);
        }
    })
    .catch(err => {
        alert('خطأ في الاتصال بالسيرفر أثناء الحفظ.');
    });
}

// 2. دالة طباعة السجل الوسطي الذكية (تقرأ الفلاتر أوتوماتيكياً)
function printMasterRecord(btnElement) {
    // إيجاد القسم المفتوح حالياً الذي يحتوي على زر الطباعة
    let container = btnElement.closest('div[style*="display: block"]') || btnElement.closest('div');
    let selects = container.querySelectorAll('select');
    
    let subject = '', stage = '', dept = '', section = '';

    // محاولة استخراج القيم من القوائم المنسدلة بذكاء
    selects.forEach(sel => {
        let id = (sel.id || '').toLowerCase();
        let name = (sel.name || '').toLowerCase();
        let val = sel.value;

        if (id.includes('stage') || name.includes('stage')) stage = val;
        else if (id.includes('dept') || name.includes('dept')) dept = val;
        else if (id.includes('section') || id.includes('branch') || name.includes('branch')) section = val;
        else if (id.includes('subject') || name.includes('subject')) subject = val;
    });

    // إذا لم تنجح طريقة الأسماء، نأخذها من ترتيبها في الشاشة (كما في صورتك)
    if (!stage && !subject && selects.length >= 4) {
        stage = selects[0].value;
        dept = selects[1].value;
        section = selects[2].value;
        subject = selects[3].value; // المادة تكون الأخيرة من اليمين أو العكس
        
        // تبديل الأماكن إذا كانت المادة هي الأولى
        if(subject.includes('الصف') || subject.includes('المرحله')) {
            subject = selects[0].value;
            section = selects[1].value;
            dept = selects[2].value;
            stage = selects[3].value;
        }
    }

    if (!subject || !stage) {
        alert("يرجى اختيار المرحلة والمادة كحد أدنى للطباعة.");
        return;
    }

    let url = `print_master_record.php?subject=${encodeURIComponent(subject)}&stage=${encodeURIComponent(stage)}&dept=${encodeURIComponent(dept)}&branch=${encodeURIComponent(section)}`;
    window.open(url, '_blank');
}

// دالة الطباعة الخاصة بهذا القسم
function printTeacherGradebookRecord() {
    const stage = document.getElementById('admin_tg_stage').value;
    const dept = document.getElementById('admin_tg_dept').value;
    const branch = document.getElementById('admin_tg_section').value;
    const subject = document.getElementById('admin_tg_subject').value;
    
    if(!subject) { alert('يجب تحديد المادة لطباعة السجل'); return; }
    
    // نستخدم نفس ملف الطباعة الأنيق (السجل الوسطي) لأن الجدول هو نفسه
    const url = `print_master_record.php?stage=${encodeURIComponent(stage)}&dept=${encodeURIComponent(dept)}&branch=${encodeURIComponent(branch)}&subject=${encodeURIComponent(subject)}`;
    window.open(url, '_blank');
}

// دالة طباعة السجل الوسطي والكنترول
function printControlGrades() {
    // جلب القيم من الفلاتر الخاصة بقسم السجل الوسطي
    const subject = document.getElementById('control_subject').value;
    const stage = document.getElementById('control_stage').value;
    const dept = document.getElementById('control_dept').value;
    const section = document.getElementById('control_section').value;

    if (!subject || !stage) {
        alert("يرجى اختيار المادة والمرحلة كحد أدنى لطباعة السجل.");
        return;
    }

    // بناء الرابط وفتحه في نافذة جديدة
    let url = `print_master_record.php?subject=${encodeURIComponent(subject)}&stage=${encodeURIComponent(stage)}&dept=${encodeURIComponent(dept)}&branch=${encodeURIComponent(section)}`;
    window.open(url, '_blank');
}

// 🚀 دالة نشر شهادات الصف دفعة واحدة 🚀
function publishGradesForClass(stage, dept, section) {
    if(confirm('هل أنت متأكد من اعتماد ونشر درجات هذا الصف؟ سيتمكن الطلاب وأولياء أمورهم من رؤية الشهادات فوراً.')) {
        
        let fd = new FormData();
        fd.append('stage', stage);
        fd.append('dept', dept);
        fd.append('section', section);

        // قم بإنشاء ملف api_publish_certificates.php ليستقبل هذا الطلب ويحدث حالة النشر في قاعدة البيانات
        fetch('api_publish_certificates.php', { method: 'POST', body: fd })
        .then(res => res.json())
        .then(data => {
            alert(data.message);
        })
        .catch(err => alert('حدث خطأ في الاتصال بالسيرفر.'));
    }
}


// ==========================================
// 🚀 دوال جلب طلبات المدرسين (نسخة الإدارة الأصلية مع العزل الآمن) 🚀
// ==========================================
window.adminRequestsData = [];

function loadAdminRequests() {
    const tbody = document.getElementById('admin-requests-tbody') || document.querySelector('tbody');
    if (!tbody) return;

    tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:20px;"><i class="fas fa-spinner fa-spin"></i> جاري جلب الملفات الواردة...</td></tr>';

    fetch('api_academic_requests.php?action=get_admin_requests')
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            window.adminRequestsData = data.data;

            if (data.data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:30px; color:#94a3b8; font-size:16px;">لا توجد طلبات أو أوراق عمل واردة من المدرسين حالياً.</td></tr>';
                return;
            }

            tbody.innerHTML = data.data.map(req => {
                // شارات الحالة بتصميم يتناسب مع اللوحة السوداء
                let statusBadge = '';
                if(req.status === 'pending') statusBadge = '<span style="background:rgba(245, 158, 11, 0.2); color:#fbbf24; padding:5px 12px; border-radius:6px; font-weight:bold; font-size:12px; border: 1px solid rgba(245, 158, 11, 0.3);"><i class="fas fa-clock"></i> قيد المراجعة</span>';
                else if(req.status === 'approved') statusBadge = '<span style="background:rgba(16, 185, 129, 0.2); color:#10b981; padding:5px 12px; border-radius:6px; font-weight:bold; font-size:12px; border: 1px solid rgba(16, 185, 129, 0.3);"><i class="fas fa-check-circle"></i> معتمد</span>';
                else if(req.status === 'rejected') statusBadge = '<span style="background:rgba(239, 68, 68, 0.2); color:#ef4444; padding:5px 12px; border-radius:6px; font-weight:bold; font-size:12px; border: 1px solid rgba(239, 68, 68, 0.3);"><i class="fas fa-times-circle"></i> مرفوض</span>';

                let dateOnly = req.created_at ? req.created_at.split(' ')[0] : '-';
                
                // الترتيب الصحيح للأعمدة (من اليمين لليسار) ليطابق الترويسة في لوحتك
                return `
                <tr style="border-bottom: 1px solid rgba(255,255,255,0.05); transition: 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
                    <td style="padding:15px; text-align:right; font-weight:900; color:#fff; font-size: 15px;">${req.teacher_name}</td>
                    
                    <td style="padding:15px; text-align:center;">
                        <span style="background:rgba(255, 255, 255, 0.1); color:#fff; padding:4px 8px; border-radius:4px; font-size:12px; font-weight: bold;">${req.req_type}</span>
                    </td>
                    
                    <td style="padding:15px; text-align:center; font-weight:bold; color:#f8fafc; font-size: 14px;">${req.subject_class}</td>
                    
                    <td style="padding:15px; text-align:center; color:#cbd5e1; font-family: monospace;">${dateOnly}</td>
                    
                    <td style="padding:15px; text-align:center;">${statusBadge}</td>
                    
                    <td style="padding:15px; text-align:left;">
                        <div style="display:flex; justify-content:flex-end; gap:6px;">
                            <button onclick="previewAdminDocument(${req.id})" style="background:#3b82f6; color:white; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; font-weight:bold; transition:0.3s; font-size: 12px;" title="عرض الملف"><i class="fas fa-eye"></i> عرض الملف</button>
                            
                            ${req.status === 'pending' ? `
                                <button onclick="changeRequestStatus(${req.id}, 'approved')" style="background:#10b981; color:white; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; transition:0.3s;" title="اعتماد"><i class="fas fa-check"></i></button>
                                <button onclick="changeRequestStatus(${req.id}, 'rejected')" style="background:#ef4444; color:white; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; transition:0.3s;" title="رفض وإعادة للمدرس"><i class="fas fa-times"></i></button>
                            ` : ''}
                            
                            <button onclick="deleteAdminRequest(${req.id})" style="background:#475569; color:white; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; transition:0.3s;" title="حذف نهائي"><i class="fas fa-trash"></i></button>
                        </div>
                    </td>
                </tr>`;
            }).join('');
        }
    }).catch(err => {
        console.error("Error loading requests:", err);
        if(tbody) tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:20px; color:#ef4444;">حدث خطأ أثناء الاتصال بقاعدة البيانات.</td></tr>';
    });
}

function changeRequestStatus(id, newStatus) {
    let msg = newStatus === 'approved' ? 'هل أنت متأكد من اعتماد هذا الملف؟' : 'هل أنت متأكد من رفض هذا الملف وطلب تعديله من المدرس؟';
    if(!confirm(msg)) return;
    
    const fd = new FormData(); 
    fd.append('action', 'update_status'); 
    fd.append('request_id', id); 
    fd.append('status', newStatus);
    
    fetch('api_academic_requests.php', { method: 'POST', body: fd })
    .then(res => res.json())
    .then(data => { 
        alert(data.message); 
        loadAdminRequests(); 
    });
}

function deleteAdminRequest(id) {
    if(!confirm('⚠️ تحذير: هل أنت متأكد من حذف هذا السجل نهائياً من النظام؟')) return;
    const fd = new FormData(); 
    fd.append('action', 'delete_plan'); 
    fd.append('request_id', id);
    
    fetch('api_academic_requests.php', { method: 'POST', body: fd })
    .then(res => res.json())
    .then(data => { 
        if(data.status === 'success') loadAdminRequests(); 
    });
}

// ==========================================
// 🖨️ دالة المعاينة والطباعة الذكية (العزل التام عن اللوحة السوداء) 🖨️
// ==========================================
function previewAdminDocument(id) {
    const req = window.adminRequestsData.find(r => parseInt(r.id) === parseInt(id));
    if (!req) {
        alert("خطأ: لم يتم العثور على بيانات الملف.");
        return;
    }

    const win = window.open('', '_blank', 'width=950,height=800');
    let htmlContent = '';

    // 1. إذا كان الملف "أسئلة امتحانية" (يعرض ورقة A4 بيضاء جاهزة للطباعة)
    if (req.req_type === 'أسئلة امتحانية' || req.content.includes('<div') || req.content.includes('<table')) {
        htmlContent = `
        <html dir="rtl" lang="ar">
        <head>
            <title>طباعة: ${req.req_type} - ${req.teacher_name}</title>
            <style>
                body { background: #e2e8f0; margin: 0; padding: 20px; display: flex; justify-content: center; min-height: 100vh; }
                .print-btn { background: #10b981; color: white; border: none; padding: 12px 30px; border-radius: 8px; font-weight: bold; cursor: pointer; position: fixed; bottom: 30px; right: 30px; font-size:16px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 99999;}
                @media print { 
                    body { background: white; padding: 0; display: block; } 
                    .print-btn { display: none !important; } 
                    @page { margin: 0; size: A4 portrait; } 
                }
            </style>
        </head>
        <body>
            ${req.content}
            <button class="print-btn" onclick="window.print()">🖨️ طباعة الورقة الامتحانية</button>
        </body>
        </html>`;
    } 
    // 2. إذا كان الملف "خطة أسبوعية" (قالب إداري أنيق)
    else {
        htmlContent = `
        <html dir="rtl" lang="ar">
        <head>
            <title>وثيقة: ${req.req_type} - ${req.teacher_name}</title>
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap');
                body { font-family: 'Tajawal', Arial, sans-serif; padding: 40px; line-height: 1.8; color: #1e293b; background: #f8fafc; margin: 0;}
                .doc-container { background: #fff; max-width: 800px; margin: 0 auto; padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
                .header-title { color: #93003c; border-bottom: 3px double #cbd5e1; padding-bottom: 15px; text-align: center; font-size: 26px; font-weight: 900; margin-top: 0; margin-bottom: 25px; }
                .meta-info-box { display: flex; justify-content: space-between; background: #f1f5f9; border: 2px solid #e2e8f0; border-radius: 10px; padding: 15px 25px; margin-bottom: 30px; }
                .meta-item { display: flex; flex-direction: column; }
                .meta-label { color: #64748b; font-size: 13px; font-weight: bold; margin-bottom: 5px; }
                .meta-value { color: #0f172a; font-size: 18px; font-weight: 900; }
                .document-content { font-size: 18px; min-height: 300px; white-space: pre-wrap; font-weight: bold; }
                .action-buttons { margin-top: 50px; text-align: center; padding-top: 20px; border-top: 1px dashed #cbd5e1; }
                .btn-print { background: #10b981; color: white; padding: 12px 30px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold; box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2); margin-left: 10px; }
                .btn-close { background: #334155; color: white; padding: 12px 30px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold; }
                @media print {
                    body { background: white; padding: 0 !important; }
                    .doc-container { box-shadow: none; border: none; padding: 0; margin: 0; max-width: 100%;}
                    .action-buttons { display: none !important; }
                    .meta-info-box { border-color: #000; } 
                }
            </style>
        </head>
        <body>
            <div class="doc-container">
                <h2 class="header-title">${req.req_type}</h2>
                <div class="meta-info-box">
                    <div class="meta-item">
                        <span class="meta-label">المدرس المسؤول:</span>
                        <span class="meta-value">${req.teacher_name}</span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">المادة والعنوان:</span>
                        <span class="meta-value">${req.subject_class}</span>
                    </div>
                </div>
                <div class="document-content">${req.content}</div>
                
                <div class="action-buttons">
                    <button class="btn-print" onclick="window.print()">🖨️ طباعة المستند</button>
                    <button class="btn-close" onclick="window.close()">إغلاق المعاينة</button>
                </div>
            </div>
        </body>
        </html>`;
    }

    win.document.write(htmlContent);
    win.document.close();
}

// تشغيل الجلب فور فتح اللوحة
document.addEventListener('DOMContentLoaded', loadAdminRequests);


</script>
<!-- ========================================== -->
<!-- 🚀 الرادار المالي العالمي (Global Financial Radar) 🚀 -->
<!-- ========================================== -->
<style>
    /* تصميم الأيقونة العلوية */
    #global-financial-radar {
        position: fixed;
        top: 15px;
        left: 20px; /* مكانها في الزاوية العلوية اليسرى */
        z-index: 999999;
        display: none; /* مخفية افتراضياً */
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background: rgba(239, 68, 68, 0.15);
        border-radius: 50%;
        border: 1px solid rgba(239, 68, 68, 0.4);
        cursor: pointer;
        transition: 0.3s;
    }
    #global-financial-radar:hover { background: rgba(239, 68, 68, 0.3); }
    .radar-pulse { animation: pulse-danger 1.5s infinite; }
    
    @keyframes pulse-danger {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
        70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }
</style>

<!-- زر التنبيه الذي سيظهر في أعلى الشاشة -->
<div id="global-financial-radar" onclick="window.location.href='accounting_system.php'" title="توجد ديون وأقساط متأخرة! اضغط للمراجعة">
    <i class="fas fa-file-invoice-dollar radar-pulse" style="color: #ef4444; font-size: 22px;"></i>
    <span id="radar-count" style="position: absolute; top: -5px; right: -5px; background: #dc2626; color: white; border-radius: 50%; width: 22px; height: 22px; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid #1e293b;">0</span>
</div>

<script>
    // دالة فحص المتأخرين مالياً
    function scanFinancialDefaulters() {
        fetch('api_get_defaulters.php')
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success' && data.defaulters) {
                const defaulters = data.defaulters;
                
                // 1. تفعيل زر التنبيه العلوي إذا كان هناك طلاب متأخرين
                const radarBtn = document.getElementById('global-financial-radar');
                const radarCount = document.getElementById('radar-count');
                
                if (defaulters.length > 0) {
                    radarBtn.style.display = 'flex';
                    radarCount.innerText = defaulters.length;
                } else {
                    radarBtn.style.display = 'none';
                }

                // 2. زرع (المثلث الأحمر) في جداول شؤون الطلاب والإدارة
                const allCells = document.querySelectorAll('td');
                allCells.forEach(cell => {
                    // إذا كانت الخلية تحتوي على معرف الطالب (مثل RM-26-5XPI)
                    defaulters.forEach(studentId => {
                        if (cell.innerText.includes(studentId)) {
                            let row = cell.closest('tr');
                            // تجنب تكرار إضافة المثلث في نفس الصف
                            if (row && !row.hasAttribute('data-financial-alert')) {
                                row.setAttribute('data-financial-alert', 'true');
                                
                                // البحث عن الخلية التي تحتوي على اسم الطالب لإضافة المثلث بجانبه
                                // في صورتك، عمود اسم الطالب وعمود المعرف متجاوران
                                let nameCell = Array.from(row.cells).find(td => td.innerText.includes(studentId));
                                
                                if (nameCell) {
                                    nameCell.innerHTML += ` <i class="fas fa-exclamation-triangle text-red-500 radar-pulse" style="color:#ef4444; margin-right:8px; font-size:16px;" title="تنبيه: الطالب لديه متعلقات مالية متأخرة الدفع ⚠️"></i>`;
                                }
                            }
                        }
                    });
                });
            }
        })
        .catch(e => console.log("خطأ في رادار الحسابات:", e));
    }

    // تشغيل الرادار فور فتح الصفحة
    setTimeout(scanFinancialDefaulters, 1000);
    // جعل الرادار يمسح الجدول كل 3 ثوانٍ (مفيد في حال قمت بفلترة الجدول وتغيرت الأسماء)
    setInterval(scanFinancialDefaulters, 3000);
    
    // ==========================================
    // 🚀 دوال قسم التقارير والحضور 🚀
    // ==========================================
    function fetchAttendanceReportData() {
        const tbody = document.getElementById('reports-tbody');
        tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:30px; color:#3b82f6; font-weight:bold;"><i class="fas fa-spinner fa-spin text-2xl mb-2 block"></i> جاري استخراج التقرير...</td></tr>';
        
        const dateFrom = document.getElementById('rep-date-from').value;
        const dateTo = document.getElementById('rep-date-to').value;
        const stage = document.getElementById('rep-stage').value;
        const status = document.getElementById('rep-status').value;

        const formData = new FormData();
        formData.append('action', 'get_reports');
        formData.append('date_from', dateFrom);
        formData.append('date_to', dateTo);
        formData.append('stage', stage);
        formData.append('status', status);

        // سيتم ربطها بملف api_reports.php
        fetch('api_reports.php', { method: 'POST', body: formData })
        .then(res => res.json())
        .then(data => {
            if(data.status === 'success') {
                if(data.data.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:30px; color:#f59e0b; font-weight:bold;">لا توجد سجلات مطابقة لخيارات البحث.</td></tr>';
                    return;
                }
                
                let html = '';
                let absents = 0; let presents = 0; let lates = 0;

                data.data.forEach((row, index) => {
                    let statusBadge = '';
                    let actionBtn = ''; // 🚀 زر الإجراء الإضافي

                    if(row.status === 'غائب') { 
                        statusBadge = '<span class="bg-red-900/50 text-red-400 px-2 py-1 rounded text-xs font-bold border border-red-800"><i class="fas fa-times me-1"></i> غائب</span>'; 
                        absents++; 
                        // 🚀 إضافة زر تعديل الغياب إلى مجاز بعذر 🚀
                        actionBtn = `<button onclick="makeStudentExcused(${row.record_id}, '${row.student_name}')" style="background:transparent; border:none; color:#3b82f6; cursor:pointer; margin-right:10px; font-size:16px; transition:0.2s;" onmouseover="this.style.color='#60a5fa'" onmouseout="this.style.color='#3b82f6'" title="تحويل الطالب إلى مجاز / بعذر"><i class="fas fa-edit"></i></button>`;
                    }
                    else if(row.status === 'حاضر') { 
                        statusBadge = '<span class="bg-green-900/50 text-green-400 px-2 py-1 rounded text-xs font-bold border border-green-800"><i class="fas fa-check me-1"></i> حاضر</span>'; 
                        presents++; 
                    }
                    else { 
                        // حالة المجاز
                        statusBadge = '<span class="bg-orange-900/50 text-orange-400 px-2 py-1 rounded text-xs font-bold border border-orange-800"><i class="fas fa-user-md me-1"></i> مجاز/بعذر</span>'; 
                        lates++; 
                    }

                    html += `
                        <tr style="border-bottom: 1px solid rgba(255,255,255,0.05); transition: 0.3s;" onmouseover="this.style.background='rgba(59,130,246,0.05)'" onmouseout="this.style.background='transparent'">
                            <td style="padding:15px; color:#94a3b8;">${index + 1}</td>
                            <td style="padding:15px; font-weight:bold; color:#f8fafc;">${row.student_name}</td>
                            <td style="padding:15px; color:#94a3b8; font-size:12px;">${row.stage} - ${row.department}</td>
                            <td style="padding:15px; color:#cbd5e1; font-family:monospace;">${row.date}</td>
                            <td style="padding:15px; display:flex; align-items:center;">${statusBadge} ${actionBtn}</td>
                            <td style="padding:15px; color:#64748b; font-size:12px;">${row.notes}</td>
                        </tr>
                    `;
                });
                
                tbody.innerHTML = html;
                
                // تحديث بطاقات الإحصائيات العلوية بناءً على البيانات المستخرجة
                document.getElementById('rep-total-students').innerText = data.data.length;
                document.getElementById('rep-present').innerText = presents;
               document.getElementById('rep-absent').innerText = absents;
                document.getElementById('rep-late').innerText = lates;

            } else {
                tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:30px; color:#ef4444; font-weight:bold;">${data.message || 'حدث خطأ'}</td></tr>`;
            }
        }).catch(err => {
            console.error(err);
            tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:30px; color:#ef4444; font-weight:bold;">حدث خطأ في الاتصال بالملف! تأكد أن ملف api_reports.php موجود في نفس المجلد. (الخطأ: ' + err.message + ')</td></tr>';
        });
    }
    
    // 🚀 دالة جديدة: تحويل الطالب من غائب إلى مجاز 🚀
    function makeStudentExcused(recordId, studentName) {
        let excuse = prompt(`تحويل الطالب (${studentName}) إلى مجاز.\nالرجاء كتابة العذر (مثال: مريض، ظرف عائلي، إلخ):`, "إجازة مرضية");
        
        if (excuse === null || excuse.trim() === "") {
            return; // إلغاء العملية إذا لم يكتب شيئاً
        }

        const formData = new FormData();
        formData.append('action', 'update_status');
        formData.append('record_id', recordId);
        formData.append('excuse', excuse.trim());

        fetch('api_reports.php', { method: 'POST', body: formData })
        .then(res => res.json())
        .then(data => {
            if(data.status === 'success') {
                alert("تم تحديث حالة الطالب إلى مجاز بنجاح!");
                fetchAttendanceReportData(); // إعادة تحميل الجدول ليظهر التحديث فوراً
            } else {
                alert("حدث خطأ: " + data.message);
            }
        })
        .catch(err => alert("حدث خطأ في الاتصال بالسيرفر."));
    }

    function printAttendanceReport() {
        const printContent = document.getElementById('report-print-area').outerHTML;
        const schoolName = document.querySelector('.topbar div:first-child')?.innerText.trim() || 'المدرسة';
        const dateFrom = document.getElementById('rep-date-from').value || 'الكل';
        const dateTo = document.getElementById('rep-date-to').value || 'الكل';
        
        const win = window.open('', '_blank', 'width=900,height=700');
        win.document.write(`
            <html dir="rtl" lang="ar">
            <head>
                <title>طباعة تقرير الحضور</title>
                <style>
                    body { font-family: 'Arial', sans-serif; padding: 20px; }
                    .header { text-align: center; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 20px; }
                    .header h1 { margin: 0; color: #000; }
                    .header p { margin: 5px 0 0 0; color: #555; }
                    table { width: 100%; border-collapse: collapse; margin-top: 20px; text-align: right; }
                    th, td { border: 1px solid #000; padding: 10px; font-size: 14px; color: #000; }
                    th { background-color: #f0f0f0; }
                    @media print {
                        button { display: none; }
                        body { padding: 0; }
                    }
                </style>
            </head>
            <body>
                <div class="header">
                    <h1>${schoolName}</h1>
                    <h3>تقرير الغيابات والحضور</h3>
                    <p>الفترة من: ${dateFrom} | إلى: ${dateTo}</p>
                </div>
                ${printContent}
                <div style="text-align: center; margin-top: 30px;">
                    <button onclick="window.print()" style="padding: 10px 20px; background: #3b82f6; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 16px;">🖨️ طباعة التقرير</button>
                </div>
            </body>
            </html>
        `);
        win.document.close();
    }
    
   document.addEventListener('DOMContentLoaded', function() {
    // 🚀 مراقبة النقر على زر القائمة الجانبية لضمان جلب البثوث فوراً
    const monitorBtn = document.querySelector('[onclick*="live-monitor"]');
    if (monitorBtn) {
        monitorBtn.addEventListener('click', function() {
            setTimeout(fetchActiveStreams, 200); // استدعاء فوري عند فتح القسم
        });
    }

    // فحص دوري كل 15 ثانية لتحديث البثوث الحية تلقائياً
    setInterval(() => {
        // تم تصحيح الـ ID هنا ليطابق live-monitor الموجود في زر القائمة
        const monitoringSection = document.getElementById('live-monitor');
        if (monitoringSection && monitoringSection.style.display !== 'none') {
            fetchActiveStreams();
        }
    }, 15000);
});

function fetchActiveStreams() {
    const grid = document.getElementById('live-streams-grid');
    if(!grid) return;
    
    grid.innerHTML = '<div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #38bdf8;"><i class="fas fa-spinner fa-spin fa-2x" style="color: #ff4d79; margin-bottom: 15px; display: block;"></i><span style="color: #94a3b8; font-weight: bold; font-size: 16px;">جاري البحث عن بثوث نشطة الآن...</span></div>';

    fetch('api_live_streams.php')
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            if (!data.data || data.data.length === 0) {
                grid.innerHTML = '<div style="grid-column: 1 / -1; text-align: center; padding: 50px; background: rgba(255,255,255,0.02); border-radius: 10px; border: 1px solid #334155;"><i class="fas fa-video-slash" style="font-size: 48px; color: #64748b; margin-bottom: 15px;"></i><h3 style="color: #94a3b8; font-weight: bold; font-size: 18px; margin: 0;">لا يوجد أي بث مباشر يجري حالياً في المدرسة.</h3></div>';
                return;
            }
            
            let html = '';
            data.data.forEach(stream => {
                let platformColor = stream.platform.toLowerCase().includes('zoom') ? '#2563eb' : '#ea580c';
                
                html += `
                    <div style="background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); position: relative;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                            <span style="background: #dc2626; color: white; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; display: flex; align-items: center; gap: 5px;"><i class="fas fa-circle" style="font-size: 6px;"></i> مباشر</span>
                            <span style="background: ${platformColor}; color: white; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: bold;">${stream.platform}</span>
                        </div>
                        
                        <div style="height: 120px; background: #0f172a; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-bottom: 15px; border: 1px solid #334155;">
                            <i class="fas fa-video" style="font-size: 40px; color: #475569;"></i>
                        </div>
                        
                        <h3 style="color: #f8fafc; font-size: 18px; margin: 0 0 8px 0;"><i class="fas fa-chalkboard-teacher" style="color: #94a3b8; margin-left: 5px;"></i> ${stream.teacher_name}</h3>
                        <p style="color: #cbd5e1; font-size: 14px; margin: 0 0 20px 0;"><i class="fas fa-book-open" style="color: #94a3b8; margin-left: 5px;"></i> المادة: ${stream.subject}</p>
                        
                        <a href="${stream.join_url}" target="_blank" style="display: block; text-align: center; background: #2563eb; color: white; padding: 12px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.2s;" onmouseover="this.style.background='#1d4ed8'" onmouseout="this.style.background='#2563eb'">
                            <i class="fas fa-sign-in-alt" style="margin-left: 5px;"></i> دخول وإشراف على البث
                        </a>
                    </div>
                `;
            });
            grid.innerHTML = html;
        } else {
            grid.innerHTML = `<div style="grid-column: 1 / -1; text-align: center; padding: 20px; color: #ef4444; font-weight: bold; background: #1a0b12; border-radius: 8px;">${data.message}</div>`;
        }
    })
    .catch(err => {
        console.error(err);
        grid.innerHTML = '<div style="grid-column: 1 / -1; text-align: center; padding: 20px; color: #ef4444; font-weight: bold; background: #1a0b12; border-radius: 8px;">حدث خطأ في الاتصال بملف api_live_streams.php</div>';
    });
}
    
</script>
</body>
</html> 