<?php
session_start();

// حماية الصفحة: التأكد من أن المستخدم سجل دخوله كمدير مؤسسة (Admin)
if (!isset($_SESSION['loggedin']) || $_SESSION['role'] !== 'admin') {
    header("Location: login.php");
    exit;
}

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

require_once 'db_connect.php';
?>
<!DOCTYPE html>
<html lang="ar" dir="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&display=swap" rel="stylesheet">
    
    <style>
    /* تنسيق الجدول الاحترافي داخل النافذة */
    .holiday-table { width: 100%; border-collapse: collapse; margin-top: 10px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .holiday-table thead { background: #f8fafc; color: #475569; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
    .holiday-table th, .holiday-table td { padding: 14px 10px; border-bottom: 1px solid #f1f5f9; text-align: center; }
    .holiday-table tbody tr:hover { background-color: #f1f5f9; transition: 0.2s; }
    .holiday-table td { color: #1e293b; font-size: 0.95rem; }
    .btn-delete-small { background: transparent; border: none; color: #e74c3c; cursor: pointer; padding: 5px; transition: 0.3s; }
    .btn-delete-small:hover { color: #c0392b; transform: scale(1.2); }

    /* =========================================
            📱 دعم شاشات الموبايل والتابلت (Responsive)
        ========================================= */
    @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, 77, 121, 0.05); }
        .sidebar-footer { display: none; }
        .main-wrapper { height: auto; overflow: visible; }
        .topbar { padding: 0 15px; justify-content: space-between; }
        .content-area { padding: 15px; }
        .page-title { font-size: 1.3rem; flex-direction: column; align-items: flex-start; gap: 10px; }
        .form-grid { grid-template-columns: 1fr; gap: 10px; }
        .config-section, .data-panel { padding: 15px; margin-bottom: 20px; }
        .btn-action { width: 100%; text-align: center; margin-bottom: 10px; margin-left: 0 !important; }
        .page-title + .btn-action { width: 100%; }
        .data-panel { overflow-x: auto; }
        table { min-width: 700px; } 
        .modal-content-light { width: 95%; padding: 20px; }
        .modal-content-light .form-grid { grid-template-columns: 1fr; }
        .modal-content-light div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    }

    /* الهوية البصرية الأساسية */
    :root { 
        --bg-dark: #090204; --sidebar-bg: #050102; --topbar-bg: rgba(9, 2, 4, 0.85);
        --primary: #ff4d79; --secondary: #6b1024; --text-light: #f8fafc;
        --text-muted: #94a3b8; --card-bg: rgba(255, 255, 255, 0.03); --border-glass: rgba(255, 77, 121, 0.15);
    }
    * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    body { margin: 0; background: var(--bg-dark); color: var(--text-light); display: flex; height: 100vh; overflow: hidden; }
    
    .sidebar { width: 280px; background: var(--sidebar-bg); height: 100vh; border-left: 1px solid var(--border-glass); display: flex; flex-direction: column; z-index: 1000; }
    .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; }
    .menu-item i { width: 30px; font-size: 1.2rem; }
    .menu-item:hover, .menu-item.active { background: linear-gradient(90deg, rgba(255, 77, 121, 0.1) 0%, transparent 100%); color: var(--text-light); border-right: 4px solid var(--primary); }
    .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(255, 77, 121, 0.1); color: var(--primary); border: 1px solid var(--primary); border-radius: 10px; text-decoration: none; font-weight: bold; transition: 0.3s; }
    .btn-logout:hover { background: var(--primary); color: #fff; box-shadow: 0 0 15px var(--primary); }
    
    .main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
    .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; }
    .page-title { font-size: 1.8rem; margin-bottom: 30px; font-weight: bold; display: flex; align-items: center; gap: 15px; }
    
    .config-section, .data-panel { background: var(--card-bg); border: 1px solid var(--border-glass); padding: 30px; border-radius: 15px; margin-bottom: 30px; backdrop-filter: blur(10px); }
    .form-grid { display: grid; gap: 20px; margin-bottom: 20px; }
    .input-group { display: flex; flex-direction: column; gap: 10px; }
    .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: 0.3s; }
    .custom-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 10px rgba(255, 77, 121, 0.2); }
    .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 { background: #e03e65; }

    /* =========================================
            تنسيقات التبويبات الداخلية لنظام الـ ERP
        ========================================= */
    .erp-tabs-container { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 1px solid var(--border-glass); padding-bottom: 15px; overflow-x: auto; }
    .erp-tab-btn { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border-glass); border-radius: 8px; padding: 10px 20px; font-weight: bold; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
    .erp-tab-btn:hover { background: rgba(255, 77, 121, 0.1); color: #fff; }
    .erp-tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 15px rgba(255, 77, 121, 0.3); }
    .erp-tab-content { display: none; animation: fadeIn 0.4s; }
    .erp-tab-content.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    /* نافذة إضافة الطالب والهوية (Modal) */
    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); justify-content: center; align-items: center; z-index: 9999; display: none; }
    .modal-content-light { background: #fff; padding: 30px; border-radius: 20px; width: 90%; max-width: 550px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); color: #333; max-height: 90vh; overflow-y: auto; position: relative; }
    
    /* تنسيق الهوية التعريفية للطالب */
    .id-card-wrapper { text-align: center; background: #fff; padding: 0; border-radius: 15px; overflow: hidden; position: relative; border: 2px solid #cbd5e1; }
    .id-card-header { background: var(--secondary); padding: 30px 20px 60px; color: #fff; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; }
    .id-card-photo { width: 110px; height: 110px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.15); object-fit: cover; background: #f8fafc; margin-top: -55px; position: relative; z-index: 2; }
    </style>
</head>
<body>

    <aside class="sidebar">
        <div class="sidebar-header">ROOZMARI</div>
        <div class="sidebar-menu">
            <a href="admin_dashboard.php" class="menu-item"><i class="fas fa-home"></i> <span>اللوحة الرئيسية</span></a>
            <a href="#" class="menu-item active"><i class="fas fa-user-graduate"></i> <span>شؤون الطلاب والترحيل</span></a>
            <a href="teachers_affairs.php" class="menu-item"><i class="fas fa-chalkboard-teacher"></i> <span>شؤون الإدارة والمدرسين</span></a>
        </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;"><i class="fas fa-university" style="color: var(--primary); margin-left: 10px;"></i> <?php echo htmlspecialchars($school_name); ?></div>
            <div class="user-info">
                <span style="color: var(--text-muted); font-size: 0.9rem;">مرحباً، <?php echo htmlspecialchars($manager_name); ?></span>
                <div class="user-avatar"><i class="fas fa-user-tie"></i></div>
            </div>
        </header>

        <div class="content-area">
            
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h1 class="page-title" style="margin: 0;"><i class="fas fa-graduation-cap"></i> السجل الشامل للطلاب (ERP)</h1>
                <button class="btn-action" style="background: #10b981; padding: 12px 24px; font-size: 1.1rem;" onclick="openAdminAddStudentModal()">
                    <i class="fas fa-user-plus"></i> تسجيل طالب جديد
                </button>
            </div>

            <div class="config-section" style="padding: 20px; border-color: #3498db; background: rgba(52, 152, 219, 0.05);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <h3 style="margin: 0; color: #3498db;"><i class="fas fa-filter"></i> أدوات الفرز والطباعة الشاملة</h3>
                    <div>
                        <button class="btn-action" style="background:#3498db;" onclick="printSelectedStudents()"><i class="fas fa-print"></i> طباعة كشف المحددين</button>
                        <button class="btn-action" style="background:#e74c3c;" onclick="openPromotionModal()"><i class="fas fa-rocket"></i> ترحيل المحددين</button>
                    </div>
                </div>

                <div class="form-grid" style="grid-template-columns: 1fr 1fr 1fr 1fr; gap: 15px;">
                    <div class="input-group">
                        <label class="input-label" style="color: #fff;">ترتيب العرض</label>
                        <select class="custom-input" id="filter_sort" onchange="loadFilteredStudents()" style="border-color: #3498db;">
                            <option value="ASC">أبجدياً (أ - ي)</option>
                            <option value="DESC">الأحدث تسجيلاً</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label class="input-label">المرحلة الدراسيّة</label>
                        <select class="custom-input dynamic-stage-filter" id="filter_stage" onchange="loadFilteredStudents()">
                            <option value="">كل المراحل</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label class="input-label">القسم / المسار</label>
                        <select class="custom-input dynamic-dept-filter" id="filter_dept" onchange="loadFilteredStudents()">
                            <option value="">كل الأقسام</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label class="input-label">الشعبة / الصف</label>
                        <select class="custom-input dynamic-branch-filter" id="filter_branch" onchange="loadFilteredStudents()">
                            <option value="">كل الشعب</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="erp-tabs-container">
                <button class="erp-tab-btn active" onclick="switchErpTab('tab-general', this)"><i class="fas fa-list"></i> البيانات الأساسية</button>
                <button class="erp-tab-btn" onclick="switchErpTab('tab-attendance', this)"><i class="fas fa-calendar-check"></i> سجل الغيابات والمواظبة</button>
                <button class="erp-tab-btn" onclick="switchErpTab('tab-grades', this)"><i class="fas fa-star"></i> التقييمات والدرجات</button>
                <!-- أضف هذا الزر مع الأزرار الأخرى -->
<button class="erp-tab-btn" onclick="switchErpTab('tab-control', this)" style="border-color: #f59e0b; color: #f59e0b;"><i class="fas fa-book-open"></i> سجل المدرسين (السجلات)</button>

                <button class="erp-tab-btn" onclick="switchErpTab('tab-docs', this)"><i class="fas fa-folder-open"></i> الأرشيف والمستمسكات</button>
            </div>

            <!-- التبويب 1: البيانات الأساسية -->
            <div id="tab-general" class="erp-tab-content active">
                <div class="data-panel" style="padding: 0; overflow: hidden;">
                    <table style="width:100%; border-collapse: collapse; text-align:right; color:#fff;">
                        <thead>
                            <tr style="background: rgba(255,77,121,0.1); border-bottom: 2px solid var(--primary);">
                                <th style="padding:15px; width:40px;"><input type="checkbox" onclick="toggleAll(this)" style="width:18px; height:18px; cursor:pointer;"></th>
                                <th style="padding:15px;">المعرف</th>
                                <th style="padding:15px;">اسم الطالب</th>
                                <th style="padding:15px;">المرحلة والشعبة</th>
                                <th style="padding:15px;">الغياب</th>
                                <th style="padding:15px;">المدرس</th>
                                <th style="padding:15px; text-align:center;">الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody class="dynamic-table-body">
                            <tr><td colspan="7" style="text-align:center; padding:30px; color:#3498db;"><i class="fas fa-spinner fa-spin"></i> جاري جلب البيانات...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

           <!-- التبويب 2: الغيابات والمواظبة المطورة -->
            <div id="tab-attendance" class="erp-tab-content">
                <div class="data-panel" style="padding: 0; overflow: hidden;">
                    
                    <div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 0 20px; flex-wrap: wrap; gap: 15px;">
                        
                        <div style="display: flex; gap: 10px; align-items: center;">
                            <button class="btn-action" style="background:#e74c3c; box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);" onclick="processDailyAbsences()">
                                <i class="fas fa-bell"></i> إغلاق السجل الصباحي وفرز الغائبين
                            </button>
                            <button class="btn-action" style="background:#34495e;" onclick="openAttendanceSettings()">
                                <i class="fas fa-cog"></i> إعدادات الدوام والعطل
                            </button>
                        </div>

                        <div style="display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); padding: 8px 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1);">
                            <label style="color: #94a3b8; font-weight: bold; margin: 0;"><i class="fas fa-filter"></i> تصفية السجل:</label>
                            <select id="attendanceFilter" onchange="applyAttendanceFilter()" style="padding: 8px; border-radius: 8px; background: #1e293b; border: 1px solid #475569; color: #fff; font-family: inherit; outline: none; cursor: pointer;">
                                <option value="all">عرض جميع الطلاب</option>
                                <option value="absent">الطلاب الغائبين فقط (لديهم غياب)</option>
                                <option value="present">الطلاب الحاضرين دائماً (0 غياب)</option>
                            </select>
                        </div>

                    </div>
                    
                    <table style="width:100%; border-collapse: collapse; text-align:right; color:#fff;">
                        <thead>
                            <tr style="background: rgba(255,77,121,0.1); border-bottom: 2px solid var(--primary);">
                                <th style="padding:15px; width:40px;"><input type="checkbox" onclick="toggleAll(this)"></th>
                                <th style="padding:15px;">المعرف</th>
                                <th style="padding:15px;">اسم الطالب</th>
                                <th style="padding:15px;">المرحلة والشعبة</th>
                                <th style="padding:15px;">مجموع الغيابات</th>
                                <th style="padding:15px;">بـعذر رسمي</th>
                                <th style="padding:15px;">بدون عذر</th>
                                <th style="padding:15px; text-align:center;">التفاصيل</th>
                            </tr>
                        </thead>
                        <tbody class="dynamic-table-body">
                            <tr><td colspan="8" style="text-align:center; padding:30px; color:#3498db;"><i class="fas fa-spinner fa-spin"></i> جاري جلب سجلات المواظبة...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- التبويب 3: التقييمات والدرجات -->
            <div id="tab-grades" class="erp-tab-content">
                <div class="data-panel" style="padding: 0; overflow: hidden;">
                    <table style="width:100%; border-collapse: collapse; text-align:right; color:#fff;">
                        <thead>
                            <tr style="background: rgba(255,77,121,0.1); border-bottom: 2px solid var(--primary);">
                                <th style="padding:15px; width:40px;"><input type="checkbox" onclick="toggleAll(this)" style="width:18px; height:18px; cursor:pointer;"></th>
                                <th style="padding:15px;">المعرف</th>
                                <th style="padding:15px;">اسم الطالب</th>
                                <th style="padding:15px;">المرحلة والشعبة</th>
                                <th style="padding:15px;">التقييم الشهري</th>
                                <th style="padding:15px;">نسبة النجاح</th>
                                <th style="padding:15px; text-align:center;">ملاحظات المدرس</th>
                            </tr>
                        </thead>
                        <tbody class="dynamic-table-body">
                            <tr><td colspan="7" style="text-align:center; padding:30px; color:#3498db;"><i class="fas fa-spinner fa-spin"></i> جاري جلب البيانات...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- ========================================== -->
            <!-- 🚀 التبويب الجديد: سجل المدرسين (السجلات) 🚀 -->
            <!-- ========================================== -->
            <div id="tab-control" class="erp-tab-content">
                <div class="data-panel" style="padding: 0; overflow: hidden;">
                    <table style="width:100%; border-collapse: collapse; text-align:right; color:#fff;">
                        <thead>
                            <tr style="background: rgba(245, 158, 11, 0.1); border-bottom: 2px solid #f59e0b;">
                                <th style="padding:15px; width:40px;"><input type="checkbox" onclick="toggleAll(this)" style="width:18px; height:18px; cursor:pointer;"></th>
                                <th style="padding:15px;">المعرف</th>
                                <th style="padding:15px;">اسم الطالب</th>
                                <th style="padding:15px;">المرحلة والشعبة</th>
                                <th style="padding:15px;">المدرس المسؤول</th>
                                <th style="padding:15px; text-align:center;">السجل والملاحظات الإدارية</th>
                                <th style="padding:15px; text-align:center;">إجراءات السجل</th>
                            </tr>
                        </thead>
                        <tbody class="dynamic-table-body">
                            <tr><td colspan="7" style="text-align:center; padding:30px; color:#f59e0b;"><i class="fas fa-spinner fa-spin"></i> جاري جلب السجلات...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- ========================================== -->
            <!-- 🚀 التبويب 4: قسم الأرشيف والمستمسكات الشامل 🚀 -->
            <!-- ========================================== -->
            <div id="tab-docs" class="erp-tab-content">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h3 style="color: #fff; font-size: 1.3rem; margin: 0;"><i class="fas fa-folder-open" style="color: var(--primary);"></i> الأرشيف الإلكتروني الموحد</h3>
                    <button onclick="loadArchiveData()" class="btn-action" style="background: #3b82f6; padding: 8px 15px;"><i class="fas fa-sync-alt"></i> تحديث الأرشيف</button>
                </div>

                <!-- 🔍 الفلاتر الذكية للأرشيف 🔍 -->
                <div 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(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                    <div>
                        <label style="color: var(--text-muted); font-size: 12px; display: block; margin-bottom: 5px; font-weight: bold;">نوع الحساب (الفئة):</label>
                        <select id="arc_type" class="custom-input" onchange="loadArchiveData()" style="padding: 10px;">
                            <option value="all">الكل (طلاب + كادر)</option>
                            <option value="student">الطلاب فقط</option>
                            <option value="teacher">هيئة التدريس</option>
                            <option value="admin">الإدارة والموظفين</option>
                        </select>
                    </div>

                    <div>
                        <label style="color: var(--text-muted); font-size: 12px; display: block; margin-bottom: 5px; font-weight: bold;">المرحلة (للطلاب فقط):</label>
                        <select id="arc_stage" class="custom-input dynamic-stage" onchange="loadArchiveData()" style="padding: 10px;">
                            <option value="">كل المراحل</option>
                        </select>
                    </div>

                    <div>
                        <label style="color: var(--text-muted); font-size: 12px; display: block; margin-bottom: 5px; font-weight: bold;">البحث بالاسم:</label>
                        <input type="text" id="arc_search" class="custom-input" placeholder="اكتب اسم الشخص..." onkeyup="loadArchiveData()" style="padding: 10px; background: #fff; color: #000; font-weight: bold;">
                    </div>
                </div>

                <!-- 📊 جدول الأرشيف 📊 -->
                <div style="border-radius: 12px; border: 1px solid var(--border-glass); overflow-x: auto; background: var(--card-bg);">
                    <table style="width: 100%; border-collapse: collapse; text-align: right; color: #fff;">
                        <thead>
                            <tr style="background: rgba(255,77,121,0.1); border-bottom: 2px solid var(--primary);">
                                <th style="padding: 15px;">الاسم الكامل</th>
                                <th style="padding: 15px;">التصنيف</th>
                                <th style="padding: 15px; text-align: center;">الصورة</th>
                                <th style="padding: 15px; text-align: center;">المستمسكات</th>
                                <th style="padding: 15px; text-align: center;">طباعة ومعاينة</th>
                            </tr>
                        </thead>
                        <tbody id="archiveTableBody">
                            <tr><td colspan="5" style="text-align:center; padding:30px; color:#94a3b8;"><i class="fas fa-folder-open fa-2x"></i><br>اضغط على زر تحديث الأرشيف لعرض الملفات</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- ========================================== -->

        </div> <!-- إغلاق content-area -->
    </main>
    

 <!-- ========================================== -->
 <!-- النوافذ المنبثقة (Modals) -->
 <!-- ========================================== -->

 <div id="adminAddStudentModal" class="modal-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;">
        
        <div class="modal-content-light" style="background: #fff; width: 100%; max-width: 800px; border-radius: 15px; padding: 30px; position: relative; display: flex; flex-direction: column; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-align: right;" dir="rtl">
            
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px; flex-shrink: 0;">
                <h3 style="margin: 0; color: #1e293b; font-size: 1.4rem;"><i class="fas fa-user-graduate" style="color: #6b1437; margin-left: 8px;"></i> تسجيل طالب جديد</h3>
                <span style="font-size: 28px; color: #94a3b8; cursor: pointer; line-height: 1;" onclick="closeAdminAddStudentModal()">&times;</span>
            </div>
            
            <form id="adminNewStudentForm" style="margin: 0; flex-shrink: 0;" enctype="multipart/form-data">
                
                <div style="margin-bottom: 15px; text-align: right;">
                    <label style="font-weight: bold; color: #333; display: block; margin-bottom: 8px;">المنطقة الزمنية (توقيت المدرسة):</label>
                    <select name="timezone" id="school_timezone" class="custom-input" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #333; box-sizing: border-box; outline: none;">
                        <option value="Asia/Baghdad">العراق (بغداد)</option>
                        <option value="Asia/Riyadh">السعودية (الرياض)</option>
                        <option value="Asia/Dubai">الإمارات (دبي)</option>
                        <option value="Asia/Amman">الأردن (عمان)</option>
                        <option value="Africa/Cairo">مصر (القاهرة)</option>
                        <option value="Europe/Istanbul">تركيا (إسطنبول)</option>
                        <option value="America/New_York">أمريكا (الولايات المتحدة - المنطقة الشرقية)</option>
                        <option value="Europe/London">بريطانيا (لندن)</option>
                    </select>
                </div>

                <div style="margin-bottom: 15px; text-align: right;">
                    <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;">الاسم الكامل:</label>
                    <input type="text" name="student_name" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box; outline: none;" placeholder="اكتب اسم الطالب الثلاثي..." required>
                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 15px; direction: rtl;">
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;">رقم الموبايل:</label>
                        <input type="text" name="phone" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box; outline: none;" placeholder="07xxxxxxxxx" required dir="ltr">
                    </div>
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;">البريد الإلكتروني (للوحة الطالب):</label>
                        <input type="email" name="email" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box; outline: none;" placeholder="student@example.com" required dir="ltr">
                    </div>
                </div>

                <div style="background: rgba(16, 185, 129, 0.1); border: 1px dashed #10b981; padding: 10px; border-radius: 8px; margin-bottom: 15px; text-align: center; color: #059669; font-weight: bold; font-size: 0.9rem;">
                    <i class="fas fa-info-circle"></i> كلمة المرور الافتراضية للوحة تحكم الطالب هي: <strong>1234567</strong> (يمكنه تغييرها لاحقاً)
                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 15px; direction: rtl;">
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;">رقم ولي الأمر:</label>
                        <input type="text" name="parent_phone" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box; outline: none;" placeholder="رقم والد الطالب..." dir="ltr">
                    </div>
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;">عنوان السكن:</label>
                        <input type="text" name="address" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box; outline: none;" placeholder="المدينة، الحي...">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 20px; direction: rtl;">
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;"><i class="fas fa-camera"></i> الصورة الشخصية (للهوية):</label>
                        <input type="file" name="personal_photo" accept="image/*" style="width: 100%; padding: 10px; border: 1px dashed #3498db; border-radius: 10px; background: rgba(52, 152, 219, 0.05); box-sizing: border-box;">
                    </div>
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;"><i class="fas fa-file-upload"></i> الأرشيف (الهوية الوطنية/الجنسية):</label>
                        <input type="file" name="id_document" accept="image/*,.pdf" style="width: 100%; padding: 10px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box;">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; direction: rtl;">
                    <div style="text-align: right;">
                        <label style="display: block; font-size: 13px; font-weight: bold; margin-bottom: 6px; color: #334155;">المرحلة:</label>
                        <select name="stage" class="dynamic-stage" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; box-sizing: border-box; outline: none;" required><option value="">جاري التحميل...</option></select>
                    </div>
                    <div style="text-align: right;">
                        <label style="display: block; font-size: 13px; font-weight: bold; margin-bottom: 6px; color: #334155;">القسم:</label>
                        <select name="department" class="dynamic-dept" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; box-sizing: border-box; outline: none;"><option value="عام">جاري التحميل...</option></select>
                    </div>
                    <div style="text-align: right;">
                        <label style="display: block; font-size: 13px; font-weight: bold; margin-bottom: 6px; color: #334155;">الشعبة:</label>
                        <select name="branch" class="dynamic-branch" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; box-sizing: border-box; outline: none;"><option value="الكل">جاري التحميل...</option></select>
                    </div>
                </div>

                <div style="margin-bottom: 20px; text-align: right;">
                    <label style="display: block; font-size: 13px; font-weight: bold; margin-bottom: 6px; color: #334155;">إسناد إلى مدرس (اختياري):</label>
                    <select name="teacher_name" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; box-sizing: border-box; outline: none;">
                        <option value="بانتظار التخصيص">-- بدون مدرس حالياً --</option>
                        <?php
                        $current_school = isset($_SESSION['school_name']) ? $_SESSION['school_name'] : '';
                        $query_string = "SELECT * FROM teachers WHERE school_name = '" . mysqli_real_escape_string($conn, $current_school) . "'";
                        $t_query = mysqli_query($conn, $query_string);

                        if($t_query && mysqli_num_rows($t_query) > 0) {
                            while($t = mysqli_fetch_assoc($t_query)) {
                                $t_val = isset($t['username']) ? $t['username'] : (isset($t['teacher_id']) ? $t['teacher_id'] : $t['id']);
                                $t_name = isset($t['full_name']) ? $t['full_name'] : (isset($t['teacher_name']) ? $t['teacher_name'] : 'مدرس');
                                echo "<option value='{$t_val}'>{$t_name}</option>";
                            }
                        }
                        ?>
                    </select>
                </div>


                <div style="background: rgba(107, 20, 55, 0.04); border: 1px dashed #6b1437; padding: 20px; border-radius: 12px; margin-bottom: 25px; text-align: center;">
                    <label style="font-weight: bold; font-size: 14px; display: block; margin-bottom: 15px; color: #6b1437;">معرف المزامنة (Sync ID):</label>
                    <div style="display: flex; gap: 10px;">
                        <input type="text" name="student_id" id="admin-std-syncid" style="flex: 1; font-weight: bold; color: #6b1437; text-align: center; font-size: 18px; letter-spacing: 2px; background: white; border: 1px solid #cbd5e1; border-radius: 10px; padding: 12px; box-sizing: border-box; outline: none;" readonly placeholder="لم يتم التوليد بعد">
                        <button type="button" style="background: #1e293b; color: white; width: auto; padding: 0 20px; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; transition: 0.2s;" onclick="generateAdminSyncID()">توليد</button>
                    </div>
                </div>

                <button type="button" style="width: 100%; font-size: 1.1rem; padding: 15px; background: #10b981; color: white; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); transition: 0.2s;" onclick="saveAdminNewStudent()">
                    حفظ وإضافة الطالب
                </button>
            </form>
        </div>
    </div>

    <!-- نافذة الهوية التعريفية والباركود (ID Card Modal) -->
    <div id="studentCardModal" 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: 99999; flex-direction: column; justify-content: center; align-items: center;">

        <!-- زر الإغلاق -->
        <span style="position: absolute; top: 20px; right: 30px; font-size: 40px; color: #fff; cursor: pointer; z-index: 20;" onclick="closeStudentCard()">&times;</span>

        <!-- حاوية البطاقة (التي سيتم طباعتها فقط) -->
        <div id="printable-card" style="width: 340px; text-align: center; background: #fff; padding: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); position: relative;">
            <div style="background: linear-gradient(135deg, #6b1024 0%, #a01a38 100%); padding: 30px 20px 50px; color: #fff; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;">
                <img id="card-school-logo" src="images/icon.png" style="max-height: 60px; width: 60px; object-fit: contain; margin-bottom: 10px; background: #fff; padding: 5px; border-radius: 50%;">
                <h2 style="margin: 0; font-size: 1.4rem; font-weight: 900; text-shadow: 0 2px 4px rgba(0,0,0,0.3);"><?php echo htmlspecialchars($school_name); ?></h2>
                <p style="margin: 5px 0 0; font-size: 0.9rem; font-weight: bold;"><i class="fas fa-id-badge"></i> هوية طالب رسمية</p>
            </div>
            <img id="card-photo" src="images/default_avatar.png" style="width: 110px; height: 110px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.15); object-fit: cover; background: #f8fafc; margin-top: -55px; position: relative; z-index: 2;" onerror="this.src='https://cdn-icons-png.flaticon.com/512/3135/3135715.png'">
            <div style="padding: 10px 20px 20px;">
                <h2 id="card-name" style="color: #0f172a; margin: 10px 0 5px; font-size: 1.4rem; font-weight: 900;">اسم الطالب</h2>
                <p id="card-stage" style="color: #e23e65; margin: 0 0 15px; font-weight: bold; font-size: 1rem;">المرحلة - القسم</p>
                <div style="background: #ffffff; padding: 10px; border-radius: 12px; border: 1px solid #f1f5f9; display: inline-block;">
                    <img id="card-qr" src="" style="width: 130px; height: 130px; border-radius: 8px;">
                    <p id="card-id" style="font-family: monospace; font-size: 1.2rem; color: #1e293b; font-weight: 900; margin: 8px 0 0; letter-spacing: 2px;">RM-XX-XXXX</p>
                </div>
            </div>
        </div>

        <!-- زر الطباعة مستقل تماماً أسفل البطاقة -->
        <button type="button" style="margin-top: 25px; width: 340px; background: #3b82f6; font-size: 1.2rem; padding: 15px; border-radius: 12px; border: none; font-weight: bold; color: #fff; cursor: pointer; box-shadow: 0 5px 15px rgba(59,130,246,0.4); transition: 0.3s;" onclick="printStudentCard()" onmouseover="this.style.background='#2563eb'" onmouseout="this.style.background='#3b82f6'">
            <i class="fas fa-print"></i> طباعة الهوية
        </button>

    </div>

    <!-- نافذة تفاصيل الغياب -->
    <div id="absenceDetailsModal" class="modal-overlay">
        <div class="modal-content-light" style="max-width: 600px; border-radius: 20px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px;">
                <h3 style="margin: 0; color: #1e293b;"><i class="fas fa-calendar-alt" style="color: #ff4d79;"></i> غيابات: <span id="modal-abs-student-name"></span></h3>
                <span style="font-size: 28px; color: #94a3b8; cursor: pointer;" onclick="closeAbsenceModal()">&times;</span>
            </div>
            <div style="max-height: 350px; overflow-y: auto;">
                <table style="width:100%; border-collapse: collapse; text-align: right; color: #333;">
                    <thead style="background: #f1f5f9; border-bottom: 2px solid #cbd5e1;">
                        <tr><th style="padding: 10px;">التاريخ</th><th style="padding: 10px;">النوع</th><th style="padding: 10px;">الملاحظات</th></tr>
                    </thead>
                    <tbody id="absence-history-rows"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- نافذة إعدادات الطابور -->
    <div id="attendanceSettingsModal" class="modal-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;">
        <div class="modal-content-light" style="background: #fff; width: 100%; max-width: 550px; border-radius: 15px; padding: 30px; position: relative; display: flex; flex-direction: column; max-height: 85vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-align: right;" dir="rtl">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px; flex-shrink: 0;">
                <h3 style="margin: 0; color: #1e293b; font-size: 1.3rem;"><i class="fas fa-cog" style="color: #3498db; margin-left: 8px;"></i> إعدادات الطابور والعطل</h3>
                <span style="font-size: 28px; color: #94a3b8; cursor: pointer; line-height: 1;" onclick="closeAttendanceSettings()">&times;</span>
            </div>
            <form id="attendanceSettingsForm" style="display: flex; flex-direction: column; gap: 20px; margin: 0; flex-shrink: 0;">
                <div>
                    <label style="font-weight: bold; color: #333; display: block; margin-bottom: 10px;">أيام الدوام الأسبوعية (أزل العلامة عن يوم العطلة):</label>
                    <div id="working_days_container">
                        <!-- تضاف برمجياً -->
                    </div>
                </div>
                <div>
                    <label style="font-weight: bold; color: #333; display: block; margin-bottom: 8px;">المنطقة الزمنية (توقيت المدرسة):</label>
                    <select name="timezone" id="school_timezone_att" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #333; outline: none; font-family: inherit;">
                        <option value="Asia/Baghdad">العراق (بغداد)</option>
                        <option value="Asia/Riyadh">السعودية (الرياض)</option>
                        <option value="Asia/Dubai">الإمارات (دبي)</option>
                        <option value="Asia/Amman">الأردن (عمان)</option>
                    </select>
                </div>
                <div>
                    <label style="font-weight: bold; color: #333; display: block; margin-bottom: 8px;">وقت انتهاء الطابور الصباحي (للفرز الآلي):</label>
                    <input type="time" name="assembly_time" id="assembly_time" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #333; outline: none;">
                </div>
                <div style="background: #f8fafc; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0;">
                    <label style="font-weight: bold; color: #1e293b; display: block; margin-bottom: 10px;"><i class="fas fa-calendar-plus" style="color:#e74c3c;"></i> إضافة عطلة رسمية قادمة:</label>
                    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                        <input type="date" name="holiday_date" id="holiday_date" style="flex: 1; min-width: 130px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #333;">
                        <input type="text" name="holiday_name" id="holiday_name" placeholder="اسم العطلة..." style="flex: 2; min-width: 150px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #333;">
                    </div>
                </div>
                <button type="button" style="width: 100%; background: #10b981; color: #fff; border: none; padding: 15px; font-size: 1.1rem; font-weight: bold; border-radius: 10px; cursor: pointer; transition: 0.2s;" onclick="saveAttendanceSettings()">
                    <i class="fas fa-save"></i> حفظ الإعدادات
                </button>
            </form>
            <h4 style="margin-top: 30px; margin-bottom: 15px; color: #1e293b; border-right: 4px solid #ff4d79; padding-right: 10px; flex-shrink: 0;">
                <i class="fas fa-list-ul"></i> جدول العطل المسجلة:
            </h4>
            <div style="overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 10px; min-height: 150px; margin-bottom: 15px;">
                <table style="width: 100%; border-collapse: collapse; text-align: center; background: #fff;">
                    <thead style="background: #f1f5f9; color: #475569; font-size: 0.9rem; position: sticky; top: 0;">
                        <tr style="border-bottom: 2px solid #cbd5e1;">
                            <th style="padding: 12px;">التاريخ</th><th style="padding: 12px;">اسم العطلة</th><th style="padding: 12px;">إجراء</th>
                        </tr>
                    </thead>
                    <tbody id="holidays_table_body"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- نافذة الواتساب -->
    <div id="whatsappLinksModal" class="modal-overlay">
        <div class="modal-content-light" style="max-width: 450px; border-radius: 20px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px;">
                <h3 style="margin: 0; color: #1e293b;"><i class="fab fa-whatsapp" style="color: #25D366; font-size: 1.5rem; margin-left: 8px;"></i> مركز إشعارات الغياب</h3>
                <span style="font-size: 28px; color: #94a3b8; cursor: pointer; line-height: 1;" onclick="closeWhatsappModal()">&times;</span>
            </div>
            <p style="color: #64748b; font-size: 0.95rem; margin-bottom: 15px; text-align: right;">
                تم رصد الغيابات بنجاح. اضغط على اسم كل طالب أدناه لإرسال رسالة الواتساب الجاهزة لولي الأمر:
            </p>
            <div id="whatsapp-links-container" style="max-height: 350px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 5px;"></div>
            <div style="margin-top: 20px; text-align: center;">
                <button class="btn-action" style="width: 100%; background: #94a3b8; border-radius: 12px;" onclick="closeWhatsappModal()">إنهاء وإغلاق</button>
            </div>
        </div>
    </div>

    <!-- نافذة الترحيل -->
    <?php
    $tags_stages = $conn->query("SELECT DISTINCT stage_name FROM school_tags WHERE stage_name != ''");
    $tags_depts = $conn->query("SELECT DISTINCT department_name FROM school_tags WHERE department_name != ''");
    $tags_sections = $conn->query("SELECT DISTINCT section_name FROM school_tags WHERE section_name != ''");
    ?>
    <div id="promotionModal" class="modal-overlay" style="display: none; z-index: 99999;">
        <div class="modal-content" style="max-width: 500px; background: #0f172a; border: 1px solid #3b82f6;">
            <div class="modal-header">
                <h2 style="color: #3b82f6;"><i class="fas fa-graduation-cap"></i> ترحيل الطلاب المحددين</h2>
                <span class="close-modal" onclick="document.getElementById('promotionModal').style.display='none'">&times;</span>
            </div>
            <div style="padding: 20px;">
                <p style="color: #cbd5e1; margin-bottom: 20px;">اختر المرحلة والصف الجديد الذي سيتم ترحيل الطلاب المحددين إليه:</p>
                <label style="color:#94a3b8; font-size:12px;">المرحلة الجديدة:</label>
                <select id="promo_stage" class="custom-input" style="width: 100%; margin-bottom: 15px; padding: 10px;">
                    <?php if($tags_stages) while($s = $tags_stages->fetch_assoc()) echo "<option value='".htmlspecialchars($s['stage_name'])."'>".htmlspecialchars($s['stage_name'])."</option>"; ?>
                </select>
                <label style="color:#94a3b8; font-size:12px;">الصف/القسم الجديد:</label>
                <select id="promo_dept" class="custom-input" style="width: 100%; margin-bottom: 15px; padding: 10px;">
                    <?php if($tags_depts) while($d = $tags_depts->fetch_assoc()) echo "<option value='".htmlspecialchars($d['department_name'])."'>".htmlspecialchars($d['department_name'])."</option>"; ?>
                </select>
                <label style="color:#94a3b8; font-size:12px;">الشعبة الجديدة:</label>
                <select id="promo_section" class="custom-input" style="width: 100%; margin-bottom: 20px; padding: 10px;">
                    <?php if($tags_sections) while($sec = $tags_sections->fetch_assoc()) echo "<option value='".htmlspecialchars($sec['section_name'])."'>".htmlspecialchars($sec['section_name'])."</option>"; ?>
                </select>
                <button onclick="executePromotion()" class="btn-action" style="width: 100%; background: #10b981; padding: 12px; font-size: 16px;"><i class="fas fa-check-circle"></i> تأكيد الترحيل</button>
            </div>
        </div>
    </div>

    <!-- نافذة عرض المستندات الموحدة -->
    <div id="documentViewerModal" class="modal-overlay" style="z-index: 100000; display: none;">
        <div class="modal-content-light" style="width: 95%; max-width: 900px; height: 90vh; display: flex; flex-direction: column; padding: 20px; background: #0f172a; border: 1px solid #3b82f6;">
            <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #1e293b; padding-bottom: 15px; margin-bottom: 15px;">
                <h3 style="margin: 0; color: #3b82f6;"><i class="fas fa-eye"></i> معاينة الملف</h3>
                <div>
                    <button onclick="printCurrentDocument()" class="btn-action" style="background: #10b981; margin-left: 10px;"><i class="fas fa-print"></i> طباعة الملف</button>
                    <span style="font-size: 28px; color: #ef4444; cursor: pointer; line-height: 1;" onclick="closeDocumentViewer()">&times;</span>
                </div>
            </div>
            <div id="viewer-container" style="flex: 1; background: #000; border-radius: 10px; overflow: hidden; display: flex; justify-content: center; align-items: center;"></div>
        </div>
    </div>

    <!-- 🌟 الإضافة الجديدة: نافذة إضافة الملاحظات 🌟 -->
    <div id="studentNoteModal" class="modal-overlay" style="z-index: 100001; display: none;">
        <div class="modal-content-light" style="max-width: 500px; border-radius: 20px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px;">
                <h3 style="margin: 0; color: #1e293b;"><i class="fas fa-sticky-note" style="color: #f59e0b;"></i> إضافة ملاحظة: <span id="note_student_name" style="color: #f59e0b;"></span></h3>
                <span style="font-size: 28px; color: #94a3b8; cursor: pointer; line-height: 1;" onclick="closeNoteModal()">&times;</span>
            </div>
            <form id="studentNoteForm" onsubmit="submitStudentNote(event)">
                <input type="hidden" id="note_student_id" name="student_id">
                <input type="hidden" name="action" value="save_note">
                <div style="margin-bottom: 15px;">
                    <textarea name="teacher_note" class="custom-input" rows="4" placeholder="اكتب ملاحظتك التقييمية حول الطالب هنا... (ستظهر في تبويب التقييمات)" style="background: #f8fafc; color:#333; border: 1px solid #cbd5e1; outline:none;" required></textarea>
                </div>
                <button type="submit" class="btn-action" style="width: 100%; background: #f59e0b; padding: 12px; font-size: 1.1rem;"><i class="fas fa-save"></i> حفظ الملاحظة</button>
            </form>
        </div>
    </div>

    <!-- 🌟 الإضافة الجديدة: نافذة تأكيد الأرشفة 🌟 -->
    <div id="archiveStudentModal" class="modal-overlay" style="z-index: 100001; display: none;">
        <div class="modal-content-light" style="max-width: 400px; text-align: center; border-radius: 20px;">
            <i class="fas fa-exclamation-triangle" style="font-size: 50px; color: #ef4444; margin-bottom: 15px;"></i>
            <h3 style="color: #1e293b; margin-bottom: 10px;">هل أنت متأكد من أرشفة الطالب؟</h3>
            <p id="archive_student_name" style="font-weight: bold; color: #64748b; margin-bottom: 25px; font-size: 1.1rem;"></p>
            <input type="hidden" id="archive_student_id">
            <div style="display: flex; gap: 10px; justify-content: center;">
                <button onclick="closeArchiveModal()" class="btn-action" style="background: #94a3b8; padding: 10px 20px;">تراجع</button>
                <button onclick="submitArchiveStudent()" class="btn-action" style="background: #ef4444; padding: 10px 20px;"><i class="fas fa-user-minus"></i> تأكيد الأرشفة</button>
            </div>
        </div>
    </div>

    <!-- ========================================== -->
    <!-- الأكواد البرمجية Javascript -->
    <!-- ========================================== -->
    <script>
        // إشعار ذاتي الاختفاء (بديل لـ alert)
        function showCustomToast(message, isSuccess = true) {
            const toast = document.createElement('div');
            const bgColor = isSuccess ? '#10b981' : '#ef4444';
            toast.innerHTML = `<div style="position:fixed;top:20px;right:20px;background:${bgColor};color:white;padding:15px 25px;border-radius:10px;z-index:999999;font-weight:bold;box-shadow:0 5px 15px rgba(0,0,0,0.2); transition: 0.3s;">${message}</div>`;
            document.body.appendChild(toast);
            setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 300); }, 3000);
        }

        // 🌟 دوال إضافة الملاحظة 🌟
        function addStudentNote(id, name) {
            document.getElementById('note_student_id').value = id;
            document.getElementById('note_student_name').innerText = name;
            document.getElementById('studentNoteForm').reset();
            document.getElementById('studentNoteModal').style.display = 'flex';
        }
        function closeNoteModal() { document.getElementById('studentNoteModal').style.display = 'none'; }
        
        function submitStudentNote(e) {
            e.preventDefault();
            const btn = e.target.querySelector('button');
            const origText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...'; btn.disabled = true;

            const fd = new FormData(e.target);
            fetch('student_actions.php', { method: 'POST', body: fd })
            .then(res => res.json())
            .then(data => {
                if(data.status === 'success') {
                    showCustomToast(data.message, true);
                    closeNoteModal();
                    loadFilteredStudents(); // تحديث الجدول
                } else {
                    showCustomToast(data.message, false);
                }
            })
            .catch(() => showCustomToast('خطأ في الاتصال!', false))
            .finally(() => { btn.innerHTML = origText; btn.disabled = false; });
        }

        // 🌟 دوال الأرشفة والنقل 🌟
        function archiveStudent(id, name) {
            document.getElementById('archive_student_id').value = id;
            document.getElementById('archive_student_name').innerText = name;
            document.getElementById('archiveStudentModal').style.display = 'flex';
        }
        function closeArchiveModal() { document.getElementById('archiveStudentModal').style.display = 'none'; }
        
        function submitArchiveStudent() {
            const id = document.getElementById('archive_student_id').value;
            const btn = document.querySelector('#archiveStudentModal .btn-action[style*="background: #ef4444"]');
            const origText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري...'; btn.disabled = true;

            const fd = new FormData();
            fd.append('action', 'archive');
            fd.append('student_id', id);

            fetch('student_actions.php', { method: 'POST', body: fd })
            .then(res => res.json())
            .then(data => {
                if(data.status === 'success') {
                    showCustomToast(data.message, true);
                    closeArchiveModal();
                    loadFilteredStudents(); // إخفاء الطالب من الجدول
                } else {
                    showCustomToast(data.message, false);
                }
            })
            .catch(() => showCustomToast('خطأ في الاتصال!', false))
            .finally(() => { btn.innerHTML = origText; btn.disabled = false; });
        }

        // 1. التبديل بين التبويبات (ERP Tabs)
        function switchErpTab(tabId, element) {
            document.querySelectorAll('.erp-tab-content').forEach(tab => tab.classList.remove('active'));
            document.querySelectorAll('.erp-tab-btn').forEach(btn => btn.classList.remove('active'));
            
            document.getElementById(tabId).classList.add('active');
            element.classList.add('active');
            
            if (tabId === 'tab-docs') {
                loadArchiveData(); // جلب الأرشيف عند فتح التبويب
            } else {
                loadFilteredStudents(); // جلب بيانات الطلاب للتبويبات الأخرى
            }
        }

        // 2. دوال الأرشيف والمستمسكات (المضافة حديثاً)
        function loadArchiveData() {
            const tbody = document.getElementById('archiveTableBody');
            if(!tbody) return;
            
            const type = document.getElementById('arc_type').value;
            const stage = document.getElementById('arc_stage').value;
            const search = document.getElementById('arc_search').value;

            tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; padding:30px; color:#3b82f6;"><i class="fas fa-spinner fa-spin fa-2x"></i><br>جاري الفرز والبحث...</td></tr>';

            let fd = new FormData();
            fd.append('type', type);
            fd.append('stage', stage);
            fd.append('search', search);

            fetch('fetch_archive.php', { method: 'POST', body: fd })
            .then(res => res.text())
            .then(html => { tbody.innerHTML = html; })
            .catch(err => {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; color:#ef4444; padding:30px;">خطأ في الاتصال! تأكد من وجود ملف fetch_archive.php</td></tr>';
            });
        }

        function printDocument(docUrl) {
            if(!docUrl || docUrl === 'NULL' || docUrl === '') {
                alert('عذراً، لم يتم رفع هذا الملف لهذا الشخص!');
                return;
            }
            let printWin = window.open(docUrl, '_blank');
            printWin.onload = function() {
                setTimeout(() => { printWin.print(); }, 800);
            };
        }

        // 3. جلب الوسوم (الفلاتر ونافذة الإضافة)
        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))];

                const fillSelect = (selector, defaultText, options) => {
                    document.querySelectorAll(selector).forEach(s => {
                        s.innerHTML = `<option value="">${defaultText}</option>`;
                        options.forEach(opt => s.innerHTML += `<option value="${opt}">${opt}</option>`);
                    });
                };
                fillSelect('.dynamic-stage-filter', 'كل المراحل', stages);
                fillSelect('.dynamic-dept-filter', 'كل الأقسام', depts);
                fillSelect('.dynamic-branch-filter', 'كل الشعب', branches);
                
                // تعبئة فلتر المرحلة في قسم الأرشيف
                fillSelect('.dynamic-stage', '-- اختر المرحلة --', stages);
                
                const fillModal = (selector, defaultText, options) => {
                    document.querySelectorAll(selector).forEach(s => {
                        s.innerHTML = `<option value="">${defaultText}</option>`;
                        options.forEach(opt => s.innerHTML += `<option value="${opt}">${opt}</option>`);
                    });
                };
                fillModal('.dynamic-dept', 'بدون قسم (عام)', depts);
                fillModal('.dynamic-branch', 'بدون شعبة (الكل)', branches);
            });
        }

        // 4. جلب الطلاب للجدول الرئيسي
        function loadFilteredStudents() {
            const stage = document.getElementById('filter_stage') ? document.getElementById('filter_stage').value : '';
            const dept = document.getElementById('filter_dept') ? document.getElementById('filter_dept').value : '';
            const branch = document.getElementById('filter_branch') ? document.getElementById('filter_branch').value : '';
            const sort = document.getElementById('filter_sort') ? document.getElementById('filter_sort').value : 'ASC'; 
            
            const activeTabBtn = document.querySelector('.erp-tab-btn.active');
            const activeTab = activeTabBtn ? activeTabBtn.getAttribute('onclick').match(/'([^']+)'/)[1] : 'tab-general';
            
            if (activeTab === 'tab-docs') return; // الأرشيف له دالته الخاصة
            
            const activeTbody = document.querySelector('#' + activeTab + ' .dynamic-table-body');
            if(!activeTbody) return;
            
            activeTbody.innerHTML = '<tr><td colspan="8" 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); 
            formData.append('sort', sort);
            formData.append('tab', activeTab);

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

        // 5. دوال التحديد وطباعة الكشف والترحيل
        function toggleAll(source) {
            const activeTab = document.querySelector('.erp-tab-content.active');
            if(activeTab) {
                const checkboxes = activeTab.querySelectorAll('.student-chk');
                for(var i=0, n=checkboxes.length;i<n;i++) { checkboxes[i].checked = source.checked; }
            }
        }

        function printSelectedStudents() {
            let selected = [];
            const activeTab = document.querySelector('.erp-tab-content.active');
            if(!activeTab) return;
            
            activeTab.querySelectorAll('.student-chk:checked').forEach(chk => {
                let name = chk.getAttribute('data-name') || '-';
                let stage = chk.getAttribute('data-stage') || '-';
                selected.push({ id: chk.value, name: name, stage: stage });
            });
            
            if(selected.length === 0) { alert('يرجى تحديد طالب واحد على الأقل للطباعة!'); return; }

            let schoolName = "<?php echo addslashes($school_name); ?>"; 
            let printWin = window.open('', '', 'width=900,height=700');
            let html = `
            <html dir="rtl"><head><title>طباعة الكشف الرسمي</title><style>
            body { font-family: 'Tahoma', Arial, sans-serif; padding: 20px; color: #333; }
            .header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 10px; }
            table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
            th, td { border: 1px solid #000; padding: 10px; text-align: center; }
            th { background-color: #f1f1f1; }
            </style></head><body>
            <div class="header"><h2>${schoolName}</h2><h3>كشف رسمي بأسماء الطلاب المحددين</h3><p>تاريخ الطباعة: ${new Date().toLocaleDateString('ar-EG')}</p></div>
            <table><tr><th>ت</th><th>معرف المزامنة</th><th>اسم الطالب الرباعي</th><th>المرحلة والصف</th><th>ملاحظات</th></tr>`;
            
            selected.forEach((s, index) => { html += `<tr><td>${index + 1}</td><td>${s.id}</td><td style="font-weight:bold;">${s.name}</td><td>${s.stage}</td><td></td></tr>`; });
            
            html += `</table><div style="margin-top:50px; display:flex; justify-content:space-between; padding: 0 50px;"><div>توقيع الإدارة: ........................</div><div>الختم الرسمي: ........................</div></div></body></html>`;
            printWin.document.write(html); printWin.document.close();
            setTimeout(() => { printWin.print(); printWin.close(); }, 500); 
        }

        function openPromotionModal() {
            let selected = document.querySelectorAll('.student-checkbox:checked, .student-chk:checked');
            if(selected.length === 0) { alert('يرجى تحديد طالب واحد على الأقل من الجدول للترحيل!'); return; }
            document.getElementById('promotionModal').style.display = 'flex';
        }

        function executePromotion() {
            let selected = document.querySelectorAll('.student-checkbox:checked, .student-chk:checked');
            let ids = Array.from(selected).map(cb => cb.value); 
            let fd = new FormData();
            fd.append('student_ids', JSON.stringify(ids));
            fd.append('new_stage', document.getElementById('promo_stage').value);
            fd.append('new_dept', document.getElementById('promo_dept').value);
            fd.append('new_section', document.getElementById('promo_section').value);

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

        // 6. الهوية التعريفية والباركود
        function generateStudentCard(studentId, studentName = null, stage = null, photoUrl = '', schoolLogoUrl = '') {
            document.getElementById('card-id').innerText = studentId;
            document.getElementById('card-name').innerText = studentName ? studentName : 'تم استدعاء الطالب';
            document.getElementById('card-stage').innerText = stage ? stage : 'البيانات الأكاديمية';
            if(schoolLogoUrl && schoolLogoUrl !== '') document.getElementById('card-school-logo').src = schoolLogoUrl.replace(/'/g, "");
            let photoEl = document.getElementById('card-photo');
            if (photoUrl && photoUrl !== '') { photoEl.src = photoUrl.replace(/'/g, ""); } else { photoEl.src = 'images/default_avatar.png'; }
            document.getElementById('card-qr').src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${studentId}`;
            document.getElementById('studentCardModal').style.display = 'flex';
        }
        function closeStudentCard() { document.getElementById('studentCardModal').style.display = 'none'; }
        
        function printStudentCard() {
            let cardHtml = document.getElementById('printable-card').outerHTML;
            let printWin = window.open('', '', 'width=450,height=650');
            printWin.document.write(`
                <html dir="rtl">
                <head>
                    <title>طباعة هوية الطالب</title>
                    <style>
                        body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #fff; font-family: 'Segoe UI', Tahoma, sans-serif; }
                        .id-card-wrapper { text-align: center; background: #fff; padding: 0; border-radius: 15px; overflow: hidden; position: relative; border: 2px solid #cbd5e1; width: 340px; height: 500px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
                        .id-card-header { background: #6b1024; padding: 30px 20px 50px; color: #fff; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; }
                        .id-card-header h2 { margin: 0; font-size: 1.4rem; }
                        .id-card-header p { margin: 5px 0 0; font-size: 0.9rem; }
                        .id-card-photo { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #fff; object-fit: cover; background: #f8fafc; margin-top: -50px; position: relative; z-index: 2; }
                    </style>
                </head>
                <body>
                    ${cardHtml}
                </body>
                </html>
            `);
            printWin.document.close();
            setTimeout(() => { printWin.print(); printWin.close(); }, 500);
        }

        // 7. نوافذ الغياب والواتساب 
        function openAbsenceModal(studentName, jsonRecords) {
            document.getElementById('modal-abs-student-name').innerText = studentName;
            const tbody = document.getElementById('absence-history-rows'); tbody.innerHTML = '';
            const records = JSON.parse(jsonRecords);
            if (!records || records.length === 0) { tbody.innerHTML = '<tr><td colspan="3" style="text-align:center; padding:20px;">لا توجد غيابات مسجلة.</td></tr>'; } 
            else { records.forEach((r) => { let badge = r.status === 'excused' ? '<span style="color:#3498db;">عذر رسمي</span>' : '<span style="color:#e74c3c;">غير مبرر</span>'; tbody.innerHTML += `<tr style="border-bottom: 1px solid #e2e8f0;"><td style="padding: 10px;">${r.date}</td><td style="padding: 10px;">${badge}</td><td style="padding: 10px;">${r.excuse}</td></tr>`; }); }
            document.getElementById('absenceDetailsModal').style.display = 'flex';
        }
        function closeAbsenceModal() { document.getElementById('absenceDetailsModal').style.display = 'none'; }
        
        function processDailyAbsences() {
            if(confirm('سيتم إغلاق الطابور الصباحي، واعتبار من لم يمسح بطاقته "غائباً". هل أنت متأكد؟')) {
                const btn = event.currentTarget; const originalHtml = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الفرز الذكي...'; btn.disabled = true;
                fetch('process_absences.php', { method: 'POST' }).then(res => res.json()).then(data => {
                    if(data.status === 'error') { alert('⚠️ تنبيه: ' + data.message); } 
                    else {
                        alert(data.message); loadFilteredStudents();
                        if(data.whatsapp_links && data.whatsapp_links.length > 0) {
                            const waContainer = document.getElementById('whatsapp-links-container');
                            waContainer.innerHTML = ''; data.whatsapp_links.forEach(link => { waContainer.innerHTML += link; });
                            document.getElementById('whatsappLinksModal').style.display = 'flex';
                        }
                    }
                }).catch(err => { alert('حدث خطأ أثناء الفرز.'); }).finally(() => { btn.innerHTML = originalHtml; btn.disabled = false; });
            }
        }
        function closeWhatsappModal() { document.getElementById('whatsappLinksModal').style.display = 'none'; }

        // 8. إعدادات الغياب والطابور
        function openAttendanceSettings() {
            document.getElementById('attendanceSettingsModal').style.display = 'flex';
            fetch('get_attendance_settings.php').then(res => res.json()).then(data => {
                document.getElementById('assembly_time').value = data.assembly_time;
                document.getElementById('school_timezone_att').value = data.timezone || 'Asia/Baghdad';
                document.querySelectorAll('input[name="working_days[]"]').forEach(cb => { cb.checked = data.working_days.includes(cb.value); });
                let hBody = document.getElementById('holidays_table_body'); hBody.innerHTML = '';
                data.holidays.forEach(h => { hBody.innerHTML += `<tr><td>${h.date}</td><td>${h.name}</td><td><button onclick="deleteHoliday(${h.id})" style="color:red; border:none; background:none;"><i class="fas fa-trash"></i></button></td></tr>`; });
            });
        }
        function closeAttendanceSettings() { document.getElementById('attendanceSettingsModal').style.display = 'none'; }
        function saveAttendanceSettings() { let fd = new FormData(document.getElementById('attendanceSettingsForm')); fetch('save_attendance_settings.php', { method: 'POST', body: fd }).then(res => res.json()).then(data => { alert(data.message); closeAttendanceSettings(); }); }
        function deleteHoliday(id) { if(!confirm('هل أنت متأكد من حذف هذه العطلة؟')) return; let fd = new FormData(); fd.append('action', 'delete_holiday'); fd.append('holiday_id', id); fetch('save_attendance_settings.php', { method: 'POST', body: fd }).then(res => res.json()).then(data => { alert(data.message); openAttendanceSettings(); }); }
        
        function applyAttendanceFilter() {
            const filterValue = document.getElementById('attendanceFilter').value;
            const rows = document.querySelectorAll('#tab-attendance .dynamic-table-body tr');
            rows.forEach(row => {
                if (row.cells.length < 5) return; 
                const absencesCount = parseInt(row.cells[4].innerText || "0");
                if (filterValue === 'all') { row.style.display = ''; } 
                else if (filterValue === 'absent') { row.style.display = absencesCount > 0 ? '' : 'none'; } 
                else if (filterValue === 'present') { row.style.display = absencesCount === 0 ? '' : 'none'; }
            });
        }

        // 9. إضافة طالب
        function openAdminAddStudentModal() { document.getElementById('adminAddStudentModal').style.display = 'flex'; }
        function closeAdminAddStudentModal() { document.getElementById('adminAddStudentModal').style.display = 'none'; document.getElementById('adminNewStudentForm').reset(); }
        function generateAdminSyncID() {
            const currentYear = new Date().getFullYear().toString().slice(-2); let randomPart = '';
            for (let i = 0; i < 4; i++) randomPart += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'.charAt(Math.floor(Math.random() * 36));
            document.getElementById('admin-std-syncid').value = 'RM-' + currentYear + '-' + 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 orig = btn.innerHTML; btn.innerHTML = 'جاري الحفظ...'; 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(() => { btn.innerHTML = orig; btn.disabled = false; });
        }

        // دوال نافذة عرض المستندات الموحدة
        let currentDocumentUrl = '';

        function viewDocument(docUrl, type) {
            if(!docUrl || docUrl === 'NULL' || docUrl === '') {
                console.log('عذراً، لم يتم رفع هذا الملف!');
                return;
            }
            currentDocumentUrl = docUrl;
            const container = document.getElementById('viewer-container');
            container.innerHTML = '<i class="fas fa-spinner fa-spin fa-3x" style="color:#3b82f6;"></i>';
            document.getElementById('documentViewerModal').style.display = 'flex';

            setTimeout(() => {
                const lowerUrl = docUrl.toLowerCase();
                if(lowerUrl.endsWith('.pdf')) {
                    container.innerHTML = `<iframe src="${docUrl}" style="width:100%; height:100%; border:none;"></iframe>`;
                } else {
                    container.innerHTML = `<img src="${docUrl}" style="max-width:100%; max-height:100%; object-fit:contain;">`;
                }
            }, 300);
        }

        function closeDocumentViewer() {
            document.getElementById('documentViewerModal').style.display = 'none';
            document.getElementById('viewer-container').innerHTML = '';
            currentDocumentUrl = '';
        }

        function printCurrentDocument() {
            if(currentDocumentUrl) {
                let printWin = window.open(currentDocumentUrl, '_blank');
                printWin.onload = function() { setTimeout(() => { printWin.print(); }, 800); };
            }
        }

        // 10. تشغيل الدوال عند الفتح
        document.addEventListener('DOMContentLoaded', () => {
            loadDynamicTagsForAdmin();
            loadFilteredStudents();
            
            // مراقب زر الأرشيف لضمان التحميل
            const archiveBtn = document.querySelector('button[onclick*="tab-docs"]');
            if(archiveBtn) archiveBtn.addEventListener('click', loadArchiveData);
        });
    </script>

    <!-- 🚀 نافذة تعديل بيانات الطالب 🚀 -->
    <div id="editStudentModal" class="modal-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;">
        <div class="modal-content-light" style="background: #fff; width: 100%; max-width: 800px; border-radius: 15px; padding: 30px; position: relative; display: flex; flex-direction: column; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-align: right;" dir="rtl">
            
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px; flex-shrink: 0;">
                <h3 style="margin: 0; color: #1e293b; font-size: 1.4rem;"><i class="fas fa-user-edit" style="color: #3b82f6; margin-left: 8px;"></i> تعديل بيانات الطالب</h3>
                <span style="font-size: 28px; color: #94a3b8; cursor: pointer; line-height: 1;" onclick="closeEditStudentModal()">&times;</span>
            </div>
            
            <form id="editStudentForm" onsubmit="submitEditStudent(event)" enctype="multipart/form-data">
                <input type="hidden" name="student_id" id="edit_std_id">
                <input type="hidden" name="old_sync_id" id="edit_std_sync_id">

                <div style="margin-bottom: 15px; text-align: right;">
                    <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;">الاسم الكامل:</label>
                    <input type="text" name="student_name" id="edit_std_name" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box; outline: none;" required>
                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 15px; direction: rtl;">
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;">رقم الموبايل:</label>
                        <input type="text" name="phone" id="edit_std_phone" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box; outline: none;" dir="ltr">
                    </div>
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;">البريد الإلكتروني:</label>
                        <input type="email" name="email" id="edit_std_email" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box; outline: none;" dir="ltr">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 15px; direction: rtl;">
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;">رقم ولي الأمر:</label>
                        <input type="text" name="parent_phone" id="edit_std_parent_phone" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box; outline: none;" dir="ltr">
                    </div>
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #334155;">عنوان السكن:</label>
                        <input type="text" name="address" id="edit_std_address" style="width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; box-sizing: border-box; outline: none;">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; direction: rtl;">
                    <div style="text-align: right;">
                        <label style="display: block; font-size: 13px; font-weight: bold; margin-bottom: 6px; color: #334155;">المرحلة:</label>
                        <input type="text" name="stage" id="edit_std_stage" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; box-sizing: border-box;">
                    </div>
                    <div style="text-align: right;">
                        <label style="display: block; font-size: 13px; font-weight: bold; margin-bottom: 6px; color: #334155;">القسم:</label>
                        <input type="text" name="department" id="edit_std_dept" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; box-sizing: border-box;">
                    </div>
                    <div style="text-align: right;">
                        <label style="display: block; font-size: 13px; font-weight: bold; margin-bottom: 6px; color: #334155;">الشعبة:</label>
                        <input type="text" name="branch" id="edit_std_branch" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; box-sizing: border-box;">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 20px; background: rgba(59, 130, 246, 0.05); padding: 15px; border-radius: 12px; border: 1px dashed #3b82f6; direction: rtl;">
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #3b82f6;"><i class="fas fa-camera"></i> تحديث الصورة الشخصية:</label>
                        <input type="file" name="new_personal_photo" accept="image/*" style="width: 100%; padding: 8px; border-radius: 8px; background: #fff; box-sizing: border-box;">
                        <small style="color: #94a3b8; display: block; margin-top: 5px;">اتركه فارغاً للاحتفاظ بالصورة الحالية</small>
                    </div>
                    <div style="text-align: right;">
                        <label style="display: block; font-weight: bold; margin-bottom: 8px; color: #3b82f6;"><i class="fas fa-id-card"></i> تحديث المستمسكات (PDF/صورة):</label>
                        <input type="file" name="new_id_document" accept="image/*,.pdf" style="width: 100%; padding: 8px; border-radius: 8px; background: #fff; box-sizing: border-box;">
                        <small style="color: #94a3b8; display: block; margin-top: 5px;">اتركه فارغاً للاحتفاظ بالمستمسكات الحالية</small>
                    </div>
                </div>

                <button type="submit" id="updateStudentBtn" style="width: 100%; font-size: 1.1rem; padding: 15px; background: #3b82f6; color: white; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); transition: 0.2s;">
                    <i class="fas fa-save"></i> حفظ التعديلات
                </button>
            </form>
        </div>
    </div>

    <script>
        // 🚀 دوال نافذة تعديل الطالب 🚀
        function openEditStudentModal(dbId, syncId, name, phone, email, parentPhone, address, stage, dept, branch) {
            document.getElementById('edit_std_id').value = dbId;
            document.getElementById('edit_std_sync_id').value = syncId;
            document.getElementById('edit_std_name').value = name;
            document.getElementById('edit_std_phone').value = phone;
            document.getElementById('edit_std_email').value = email;
            document.getElementById('edit_std_parent_phone').value = parentPhone;
            document.getElementById('edit_std_address').value = address;
            document.getElementById('edit_std_stage').value = stage;
            document.getElementById('edit_std_dept').value = dept;
            document.getElementById('edit_std_branch').value = branch;
            
            document.getElementById('editStudentModal').style.display = 'flex';
        }

        function closeEditStudentModal() {
            document.getElementById('editStudentModal').style.display = 'none';
        }

        function submitEditStudent(e) {
            e.preventDefault();
            const form = document.getElementById('editStudentForm');
            const formData = new FormData(form);
            const btn = document.getElementById('updateStudentBtn');
            const origText = btn.innerHTML;
            
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري التحديث...';
            btn.disabled = true;

            fetch('update_student.php', { method: 'POST', body: formData })
            .then(res => res.json())
            .then(data => {
                if(data.status === 'success') {
                    // رسالة مخصصة تظهر وتختفي تلقائياً
                    const successMsg = document.createElement('div');
                    successMsg.innerHTML = '<div style="position:fixed;top:20px;right:20px;background:#10b981;color:white;padding:15px 25px;border-radius:10px;z-index:999999;font-weight:bold;box-shadow:0 5px 15px rgba(0,0,0,0.2);">تم تحديث بيانات الطالب وملفاته بنجاح!</div>';
                    document.body.appendChild(successMsg);
                    setTimeout(() => successMsg.remove(), 3000);

                    closeEditStudentModal();
                    loadFilteredStudents(); // تحديث الجدول فوراً
                } else {
                    console.log('خطأ: ' + data.message);
                }
            })
            .catch(err => console.error("Error updating student:", err))
            .finally(() => { btn.innerHTML = origText; btn.disabled = false; });
        }
    </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>

<!-- ========================================== -->
<!-- 🚀 الرادار المالي العالمي (النسخة النهائية والذكية) 🚀 -->
<!-- ========================================== -->
<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); filter: drop-shadow(0 0 0 rgba(239, 68, 68, 0)); }
        50% { transform: scale(1.2); filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.8)); }
        100% { transform: scale(1); filter: drop-shadow(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) {
                    if(radarBtn) radarBtn.style.display = 'flex';
                    if(radarCount) radarCount.innerText = defaulters.length;
                } else {
                    if(radarBtn) radarBtn.style.display = 'none';
                }

                // 2. زراعة المثلث الأحمر في كل الجداول المفتوحة
                const rows = document.querySelectorAll('.dynamic-table-body tr');
                
                rows.forEach(row => {
                    // تخطي الصفوف التي تم وضع المثلث فيها مسبقاً
                    if (row.hasAttribute('data-financial-alert')) return;

                    // تخطي صفوف التحميل (Loading)
                    let cells = row.querySelectorAll('td');
                    if (cells.length < 3) return; 

                    let rowIdCell = null;
                    let matchedId = null;

                    // البحث عن الخلية التي تحتوي على المعرف (ID)
                    for (let i = 0; i < cells.length; i++) {
                        // تنظيف نص الخلية من أي مسافات لمطابقته بدقة
                        let cellText = cells[i].innerText.replace(/\s+/g, '').toUpperCase();
                        
                        // هل هذا النص يطابق أي معرف متأخر؟
                        matchedId = defaulters.find(id => cellText.includes(id.replace(/\s+/g, '').toUpperCase()));

                        if (matchedId) {
                            rowIdCell = cells[i]; // وجدنا خلية المعرف!
                            break;
                        }
                    }

                    // إذا وجدنا خلية المعرف
                    if (rowIdCell && matchedId) {
                        row.setAttribute('data-financial-alert', 'true');
                        
                        // 🚀 القاعدة الذهبية: اسم الطالب يقع دائماً في الخلية التي تلي خلية المعرف مباشرة 🚀
                        let nameCell = rowIdCell.nextElementSibling;
                        
                        if (nameCell) {
                            // زرع المثلث بأمان تام في بداية الخلية
                            nameCell.insertAdjacentHTML('afterbegin', `<i class="fas fa-exclamation-triangle radar-pulse" style="color:#ef4444; margin-left:8px; font-size:16px;" title="تنبيه: الطالب لديه متعلقات مالية متأخرة الدفع ⚠️"></i> `);
                        }
                    }
                });
            }
        })
        .catch(e => console.log("خطأ في رادار الحسابات:", e));
    }

    // تشغيل الرادار بسرعة لضمان ظهوره فوراً، وتكراره ليتناسب مع الفلاتر والتبويبات
    setTimeout(scanFinancialDefaulters, 500);
    setInterval(scanFinancialDefaulters, 2000);
</script>
<script>
// 🚀 دالة تصفير أجهزة الطالب 🚀
function resetStudentDevices(studentId) {
    if (confirm('⚠️ هل أنت متأكد من تصفير أجهزة هذا الطالب؟ \nسيؤدي هذا إلى مسح الأجهزة القديمة والسماح له بالدخول من أجهزة جديدة.')) {
        
        // إرسال الطلب إلى ملف الـ API
        fetch('api_reset_devices.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: 'student_id=' + encodeURIComponent(studentId)
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                showCustomToast(data.message, true); // إشعار النجاح الأخضر
            } else {
                showCustomToast(data.message, false); // إشعار الخطأ الأحمر
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showCustomToast('❌ حدث خطأ في الاتصال بالسيرفر.', false);
        });
    }
}
</script>
</body>
</html>