<?php
/**
 * هذا الملف هو رأس الصفحة (header) والقائمة الجانبية (sidebar) الأساسية
 * لتطبيقك، مع قائمة جانبية قابلة للتوسيع والطي (collapsible).
 *
 * يتضمن هذا الملف:
 * - وظائف للتحقق من تسجيل الدخول والصلاحيات.
 * - الهيكل الأساسي لرأس الصفحة والقائمة الجانبية.
 * - تضمين ملفات Bootstrap و Font Awesome و CSS المخصصة.
 *
 * تم تعديل هذا الملف لاستخدام جدول الإشعارات الجديد "notifications".
 */
ob_start();
//session_name('hrms_system_session'); // جلسة مستقلة للموقع 
session_start();

require_once $_SERVER['DOCUMENT_ROOT'] . '/university/config/database.php';

/**
 * دالة للتحقق من تسجيل الدخول وإعادة التوجيه لصفحة تسجيل الدخول إذا لم يكن المستخدم مسجلاً.ا
 */
function checkLogin()
{
    if (!isset($_SESSION['user_id'])) {
        header('Location: ../../login.php');
        exit();
    }
}

/**
 * دالة تجلب معلومات المستخدم الحالي وتخزن صلاحياته في الجلسة.
 *
 * @return array|null مصفوفة تحتوي على بيانات المستخدم إذا كان مسجلاً، وإلا null.
 */
function getCurrentUser()
{
    if (isset($_SESSION['user_id'])) {
        $db = getDB();

        if (!$db) {
            return null;
        }

        $user = $db->selectOne(
            "SELECT u.*, GROUP_CONCAT(r.role_name) as roles
             FROM users u
             LEFT JOIN user_roles ur ON u.id = ur.user_id
             LEFT JOIN roles r ON ur.role_id = r.id
             WHERE u.id = ? AND u.is_active = 1",
            [$_SESSION['user_id']]
        );

        if ($user) {
            $permissions_result = $db->select("
                SELECT p.permission_name
                FROM users u
                JOIN user_roles ur ON u.id = ur.user_id
                JOIN role_permissions rp ON ur.role_id = rp.role_id
                JOIN permissions p ON rp.permission_id = p.id
                WHERE u.id = ?
            ", [$_SESSION['user_id']]);

            $permissions = [];
            foreach ($permissions_result as $row) {
                $permissions[] = $row['permission_name'];
            }
            $_SESSION['user_permissions'] = $permissions;
        }

        return $user;
    }
    return null;
}

/**
 * دالة للتحقق من صلاحية المستخدم بناءً على الصلاحيات المخزنة في الجلسة.
 *
 * @param string $permission اسم الإذن المراد التحقق منه.
 * @return bool true إذا كان لدى المستخدم الإذن، وإلا false.
 */
function hasPermission($permission)
{
    if (isset($_SESSION['user_id']) && isset($_SESSION['user_permissions'])) {
        return in_array($permission, $_SESSION['user_permissions']);
    }
    return false;
}

/**
 * دالة لجلب آخر 5 إشعارات (مقروءة وغير مقروءة) من جدول 'notifications'.
 *
 * @return array مصفوفة من الإشعارات.
 */
function getUserNotifications()
{
    if (!isset($_SESSION['user_id'])) {
        return [];
    }

    $db = getDB();
    if (!$db) {
        return [];
    }

    $userId = $_SESSION['user_id'];
    $conditions = [];
    $params = [];

    // 1) إشعارات "صرف" تظهر فقط لو عنده صلاحية
    if (hasPermission('approve_expenses')) {
        $conditions[] = "message LIKE ?";
        $params[] = "%صرف%";
    }

    // 2) إشعارات غير "صرف" تظهر لو كانت تخص المستخدم
    $conditions[] = "(message NOT LIKE ? AND user_id = ?)";
    $params[] = "%صرف%";
    $params[] = $userId;

    // نجمع الشروط باستخدام OR
    $where = implode(' OR ', $conditions);

    $query = "
        SELECT id, title, message, link, created_at, is_read
        FROM notifications
        WHERE ($where)
        ORDER BY created_at DESC
        LIMIT 5
    ";

    $notifications = $db->select($query, $params);
    return is_array($notifications) ? $notifications : [];
}

/**
 * دالة لجلب عدد الإشعارات غير المقروءة.
 *
 * @return int عدد الإشعارات غير المقروءة.
 */
function getUnreadNotificationsCount()
{
    if (!isset($_SESSION['user_id'])) {
        return 0;
    }

    $db = getDB();
    if (!$db) {
        return 0;
    }

    $userId = $_SESSION['user_id'];
    $conditions = [];
    $params = [];

    // عد إشعارات "صرف" غير المقروءة فقط لو عنده صلاحية
    if (hasPermission('approve_expenses')) {
        $conditions[] = "message LIKE ?";
        $params[] = "%صرف%";
    }

    // وعد إشعارات غير "صرف" الخاصة بالمستخدم (غير مقروءة)
    $conditions[] = "(message NOT LIKE ? AND user_id = ?)";
    $params[] = "%صرف%";
    $params[] = $userId;

    $where = implode(' OR ', $conditions);

    $query = "
        SELECT COUNT(id) AS unread_count
        FROM notifications
        WHERE is_read = 0 AND ($where)
    ";

    $count = $db->selectOne($query, $params);
    return $count ? (int) $count['unread_count'] : 0;
}

$currentUser = getCurrentUser();
$userNotifications = [];
$notificationsCount = 0;

if ($currentUser) {
    $userNotifications = getUserNotifications();
    $notificationsCount = getUnreadNotificationsCount();
}
?>
<!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 isset($pageTitle) ? $pageTitle . ' - ' : ''; ?>
        <?php echo SITE_NAME; ?>
    </title>

    <!-- Favicon واحد فقط -->
    <link rel="icon" type="image/x-icon" href="<?php echo SITE_URL; ?>/assets/images/lialis111.ico">
    <link rel="apple-touch-icon" href="<?php echo SITE_URL; ?>/assets/images/lialis111.ico">

    <!-- صوت الإشعارات -->
    <audio id="notification-sound" src="<?php echo SITE_URL; ?>/assets/login_sound.wav" preload="auto"></audio>
 <link href="<?php echo SITE_URL; ?>/assets/css/bootstrap.rtl.min.css" rel="stylesheet">
    <!-- Bootstrap + Fonts + CSS -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet"> -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="<?php echo SITE_URL; ?>/assets/css/style.css" rel="stylesheet">
   
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet">
    <style>
 body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea {
        font-family: 'Cairo', sans-serif !important;
    }
    /* هذا يضمن أن الأيقونات ستحتفظ بخطها الخاص */
    .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    }
:root {
    /* يجب التأكد من وجود هذه المتغيرات في ملف CSS الخارجي أو في بداية علامة <style> */
    --primary-color:#297147;
    --secondary-color: #0e5f29;
    --accent-color: #e74c3c;
    --success-color: #0e5f29;
    --warning-color: #f39c12;
    --info-color: #0e5f29;
    --light-color: #f8f9fa;
    --dark-color: #344037ff;
    --border-radius: 8px;

    /* متغيرات إضافية مستحدثة لتمثيل الظلال الفاتحة والغامقة من الألوان الأساسية */
    --menu-active-bg: var(--primary-color); 
    --menu-active-text: var(--light-color); /* عادة ما يكون أبيض */
    --menu-hover-bg: #e6f7ff; /* يمكن استبدالها بـ rgba(var(--primary-color), 0.1) ليكون ديناميكي */
    --menu-link-color: var(--primary-color);
}

/* -------------------- إشعارات القائمة المنسدلة (Notifications Dropdown) -------------------- */
.notifications-dropdown .dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    white-space: normal;
    padding: 8px 15px;
}

.notifications-dropdown .dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
    width: 300px;
}

.notifications-dropdown .notification-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.notifications-dropdown .notification-content .text-muted {
    display: block;
    margin-top: 3px;
    font-size: 0.7rem;
}

.notifications-dropdown .dropdown-divider {
    margin: 4px 0;
}

/* حالة الإشعارات غير المقروءة */
.notification-unread {
    font-weight: bold;
    /* استخدام لون فاتح للخلفية (مثل لون التوهج أو لون فاتح من Primary) */
    background-color: #e3f2fd; /* تم الإبقاء على قيمة اللون هذه لعدم وجود متغير لها */
    border-right: 3px solid var(--primary-color); /* 💡 استخدام primary-color للحد الجانبي */
    position: relative;
}

.notification-unread::before {
    top: 8px;
}

.notifications-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.notifications-dropdown .notification-icon {
    color: var(--primary-color); /* 💡 استخدام primary-color للأيقونة */
    font-size: 1.25rem;
}

/* -------------------- قائمة الشريط الجانبي (Sidebar Menu Styles) -------------------- */
.sidebar-menu .menu-link.collapsed .fa-chevron-down {
    transform: rotate(-90deg);
}

.sidebar-menu .menu-link .fa-chevron-down {
    transition: transform 0.2s ease-in-out;
}

/* تعديل البادنج والهوامش وحجم الخط لعناصر القائمة الرئيسية */
.sidebar-menu .menu-link {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.3rem;
    color: var(--menu-link-color); /* 💡 استخدام اللون الأساسي أو لون مخصص */
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 0.1rem;
    font-size: 0.9rem;
}

.sidebar-menu .menu-link:hover {
    background-color: var(--menu-hover-bg); /* 💡 استخدام لون فاتح للتمرير */
    color: var(--secondary-color); /* 💡 استخدام اللون الثانوي للنص عند التمرير */
}

.sidebar-menu .menu-link.active {
    background-color: var(--menu-active-bg); /* 💡 استخدام primary-color للخلفية النشطة */
    color: var(--menu-active-text); /* 💡 استخدام light-color (أبيض) للنص النشط */
}

.sidebar-menu .menu-link .menu-icon {
    margin-inline-end: 0.4rem;
    font-size: 1.1rem;
}

.sidebar-menu .menu-link .submenu-icon {
    margin-inline-start: auto;
}

/* تحسين حالة التمرير لضمان وضوح النص */
.sidebar-menu .menu-link:hover {
    background-color: var(--menu-hover-bg) !important; 
    color: var(--secondary-color) !important; /* تأكد أن هذا اللون يتباين مع الخلفية الفاتحة */
}

/* تصحيح القائمة الفرعية وإغلاق التعليقات المفقودة */
.sidebar-menu .submenu .submenu-item a.submenu-link.active-submenu-link {
    background-color: var(--menu-active-bg); 
    color: var(--menu-active-text) !important; 
    font-weight: bold;
}
    
/* تعديل البادنج والهوامش وحجم الخط لعناصر القائمة الفرعية */
.sidebar-menu .submenu .submenu-item a.submenu-link {
    display: flex;
    align-items: center;
    padding: 0.1rem 0.4rem 0.1rem 1rem;
    border-radius: 0.3rem;
    color: var(--menu-link-color); /* 💡 استخدام اللون الأساسي أو لون مخصص */
    background-color: transparent;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 0.08rem;
    font-size: 0.8rem;
}

.sidebar-menu .submenu .submenu-item a.submenu-link:hover {
    background-color: var(--menu-hover-bg); /* 💡 استخدام لون فاتح للتمرير */
    color: var(--secondary-color); /* 💡 استخدام اللون الثانوي للنص عند التمرير */
}

.sidebar-menu .submenu .submenu-item a.submenu-link.active-submenu-link {
    background-color: var(--menu-active-bg); /* 💡 استخدام primary-color للخلفية النشطة 
    color: var(--menu-active-text); /* 💡 استخدام light-color (أبيض) للنص النشط */
    font-weight: bold;
}

/* -------------------- تعديلات أخرى -------------------- */
/* Responsive Logo for Header */
/* -------------------- تعديلات أخرى -------------------- */
/* Responsive Logo for Header */
@media (max-width: 768px) {
    {}
    .body, 
    .card-title, 
    .form-label, 
    .notifications-dropdown .notification-content .notification-text, 
    .sidebar-menu .menu-link .menu-text {
        font-size: 0.85rem; /* تصغير الخطوط العامة */
    }

    /* ** 🔥 2. تصغير الأزرار ** */
    .btn {
        padding: 6px 10px; /* تقليل التباعد الداخلي للأزرار */
        font-size: 0.8rem; /* تصغير خط الأزرار */
    }
    
    /* تصغير حجم زر تسجيل الدخول في الهيدر */
    .header-left .btn.btn-outline-light {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }

    /* تعديل شعار الهيدر ليظهر الحروف المختصرة فقط */
    .header .logo span {
        display: none;
    }
    .header .logo::after {
        content: "KPRS";
        font-size: 1.25rem; /* تم تقليله من 2rem ليتناسب مع الهاتف */
        font-weight: bold;
        color: inherit;
        margin-right: 5px;
    }
}

/* تصغير حجم زر تسجيل الدخول في الهيدر */
.header-left .btn.btn-outline-light {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}
    </style>

    <?php if (isset($additionalCSS)): ?>
        <?php foreach ($additionalCSS as $css): ?>
            <link href="<?php echo $css; ?>" rel="stylesheet">
        <?php endforeach; ?>
    <?php endif; ?>
</head>

<body>
    <div class="modal fade" id="colorSettingsModal" tabindex="-1" aria-labelledby="colorSettingsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="colorSettingsModalLabel"><i class="fas fa-palette me-2"></i> تخصيص ألوان الواجهة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="theme-settings">
                    <p class="text-muted small">يمكنك تغيير الألوان الأساسية وسيتم حفظ التغييرات تلقائيًا.</p>

                    <div class="mb-3 row align-items-center">
                        <label for="primary-color-picker" class="col-sm-6 col-form-label">اللون الأساسي (Primary):</label>
                        <div class="col-sm-6">
                            <input type="color" class="form-control form-control-color" id="primary-color-picker" value="#297147" title="اختر اللون الأساسي">
                        </div>
                    </div>

                    <div class="mb-3 row align-items-center">
                        <label for="secondary-color-picker" class="col-sm-6 col-form-label">اللون الثانوي (Secondary):</label>
                        <div class="col-sm-6">
                            <input type="color" class="form-control form-control-color" id="secondary-color-picker" value="#0e5f29" title="اختر اللون الثانوي">
                        </div>
                    </div>

                    <div class="mb-3 row align-items-center">
                        <label for="accent-color-picker" class="col-sm-6 col-form-label">لون التمييز (Accent):</label>
                        <div class="col-sm-6">
                            <input type="color" class="form-control form-control-color" id="accent-color-picker" value="#e74c3c" title="اختر لون التمييز">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="reset-colors" class="btn btn-sm btn-outline-danger">إعادة تعيين الافتراضي</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">إغلاق</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const root = document.documentElement;
    // تأكد من أن المعرفات هنا تطابق المعرفات في Modal HTML
    const colorPickers = {
        '--primary-color': document.getElementById('primary-color-picker'),
        '--secondary-color': document.getElementById('secondary-color-picker'),
        '--accent-color': document.getElementById('accent-color-picker')
    };
    const resetButton = document.getElementById('reset-colors');
    const defaultColors = {
        '--primary-color': '#0e5f29',
        '--secondary-color': '#0e5f29',
        '--accent-color': '#e74c3c'
    };

    function applySavedColors() {
        for (const cssVar in colorPickers) {
            const savedColor = localStorage.getItem(cssVar);
            if (savedColor) {
                root.style.setProperty(cssVar, savedColor);
                if (colorPickers[cssVar]) {
                    colorPickers[cssVar].value = savedColor;
                }
            } else {
                root.style.setProperty(cssVar, defaultColors[cssVar]);
            }
        }
    }

    function handleColorChange(event) {
        const input = event.target;
        for (const cssVar in colorPickers) {
            if (colorPickers[cssVar] === input) {
                const newColor = input.value;
                root.style.setProperty(cssVar, newColor);
                localStorage.setItem(cssVar, newColor);
                break;
            }
        }
    }

    function resetColors() {
        for (const cssVar in defaultColors) {
            root.style.setProperty(cssVar, defaultColors[cssVar]);
            if (colorPickers[cssVar]) {
                 colorPickers[cssVar].value = defaultColors[cssVar];
            }
            localStorage.removeItem(cssVar);
        }
    }

    applySavedColors();

    for (const cssVar in colorPickers) {
        if (colorPickers[cssVar]) {
            colorPickers[cssVar].addEventListener('input', handleColorChange);
        }
    }

    if (resetButton) {
        resetButton.addEventListener('click', resetColors);
    }
});
</script>
    <header class="header">
        <div class="header-content">
            <div class="header-right">
                <button class="sidebar-toggle" type="button">
                    <i class="fas fa-bars"></i>
                </button>
                <a href="<?php echo SITE_URL; ?>/index.php" class="logo">
                    <i class="fas fa-building"></i>
                    <span><?php echo SITE_NAME; ?></span>
                </a>
            </div>
            
       

            <div class="header-left">
                <?php if ($currentUser): ?>
                  <div class="dropdown notifications-dropdown me-3" id="notifications-dropdown-container">
    <button class="btn btn-icon dropdown-toggle" type="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        <i class="fas fa-bell"></i>
        <?php if ($notificationsCount > 0): ?>
            <span class="badge rounded-pill bg-danger" id="notifications-badge">
                <?php echo $notificationsCount; ?>
            </span>
        <?php endif; ?>
    </button>

    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notifications-dropdown">

        <?php if (!empty($userNotifications)): ?>

            <?php foreach ($userNotifications as $notification): ?>
                <li class="dropdown-item-wrapper <?php echo ($notification['is_read'] == 0) ? 'notification-unread' : ''; ?>">

                    <?php $fullLink = SITE_URL . '/' . htmlspecialchars($notification['link']); ?>

                    <a class="dropdown-item notification-link" 
                       href="<?php echo $fullLink; ?>" 
                       data-notification-id="<?php echo $notification['id']; ?>">

                        <i class="fas fa-info-circle notification-icon"></i>

                        <div class="notification-content">

                            <!-- 🔥 هنا العنوان الجديد -->
                            <div class="notification-title fw-bold">
                                <?php echo htmlspecialchars($notification['title']); ?>
                            </div>

                            <!-- 🔥 هنا نص الرسالة -->
                            <div class="notification-text">
                                <?php echo htmlspecialchars($notification['message']); ?>
                            </div>

                            <!-- التاريخ -->
                            <small class="text-muted">
                                <?php echo htmlspecialchars($notification['created_at']); ?>
                            </small>
                        </div>
                    </a>
                </li>

                <li><hr class="dropdown-divider"></li>

            <?php endforeach; ?>

            <li>
                <a class="dropdown-item text-center" href="<?php echo SITE_URL; ?>/pages/notifications/index.php">
                    عرض كل الإشعارات
                </a>
            </li>

        <?php else: ?>

            <li><span class="dropdown-item-text text-muted">لا توجد إشعارات.</span></li>

        <?php endif; ?>
    </ul>
</div>


                    <div class="user-menu">
                        <div class="user-info" data-bs-toggle="dropdown">
                            <div class="user-avatar">
                                <?php echo strtoupper(substr($currentUser['full_name'], 0, 1)); ?>
                            </div>
                            <span
                                class="d-none d-md-inline"><?php echo htmlspecialchars($currentUser['full_name']); ?></span>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="<?php echo SITE_URL; ?>/profile.php"><i
                class="fas fa-user me-2"></i>الملف الشخصي</a></li>
    <li><a class="dropdown-item" href="<?php echo SITE_URL; ?>/pages/settings/index.php"><i
                class="fas fa-cog me-2"></i>الإعدادات</a></li>
    
    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#colorSettingsModal">
                <i class="fas fa-palette me-2"></i>تخصيص الألوان
            </a></li>
    
    <li><a class="dropdown-item" href="#" id="requestBrowserPermissions"><i
                class="fas fa-hand-pointer me-2"></i>طلب صلاحيات المتصفح</a></li> 

    <li>
        <hr class="dropdown-divider">
    </li>
    
    <li><a class="dropdown-item" href="<?php echo SITE_URL; ?>/logout.php"><i
                class="fas fa-sign-out-alt me-2"></i>تسجيل الخروج</a></li>
</ul>

<script>
    document.getElementById('requestBrowserPermissions').addEventListener('click', function(e) {
        e.preventDefault(); // منع الرابط من الانتقال لأي مكان
        
        // مثال: طلب صلاحية الموقع الجغرافي (Geolocation)
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    console.log("تم منح صلاحية الموقع.");
                    alert("تم طلب صلاحية الموقع بنجاح. قد تحتاج إلى مراجعة إعدادات متصفحك.");
                }, 
                function(error) {
                    console.error("لم يتم منح صلاحية الموقع.", error);
                    alert("فشل طلب الصلاحية. تأكد من عدم حظرها في إعدادات متصفحك.");
                }
            );
        } else {
            alert("المتصفح لا يدعم هذا النوع من الصلاحيات.");
        }

        // ملاحظة: يمكنك استبدال navigator.geolocation بـ Notification.requestPermission() لطلب الإشعارات،
        // أو استخدام MediaDevices.getUserMedia() لطلب الكاميرا/الميكروفون.
    });
</script>
                    </div>
                <?php else: ?>
                    <a href="login.php" class="btn btn-outline-light">
                        <i class="fas fa-sign-in-alt me-2"></i>تسجيل الدخول
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </header>

   <nav class="sidebar">


<ul class="sidebar-menu">


    <!-- استدعاء ملف القائمة الرئيسي -->
    <?php include __DIR__ . '/sidebar.php'; ?>

</ul>

</nav>
    <div class="sidebar-overlay"></div>

    <main class="main-content">
        <!--<div id="alert-container"></div>-->

        <?php
        if (isset($_SESSION['success_message'])) {
            echo '<div class="alert alert-success alert-dismissible fade show m-3" role="alert">';
            echo htmlspecialchars($_SESSION['success_message']);
            echo '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>';
            echo '</div>';
            unset($_SESSION['success_message']);
        }

        if (isset($_SESSION['error_message'])) {
            echo '<div class="alert alert-danger alert-dismissible fade show m-3" role="alert">';
            echo htmlspecialchars($_SESSION['error_message']);
            echo '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>';
            echo '</div>';
            unset($_SESSION['error_message']);
        }
        ?>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // ... (الكود الحالي لـ sidebar و الروابط) ...

        const notificationsDropdownContainer = document.getElementById('notifications-dropdown-container');
        const notificationsButton = notificationsDropdownContainer.querySelector('.btn.dropdown-toggle');
        const notificationsList = notificationsDropdownContainer.querySelector('.dropdown-menu');
        
        // متغير لتتبع عدد الإشعارات غير المقروءة حالياً
        let currentUnreadCount = 0;
        
        // دالة لتشغيل الصوت
        function playNotificationSound() {
            const notificationSound = document.getElementById('notification-sound');
            if (notificationSound) {
                notificationSound.play().catch(function(error) {
                    console.error("Autoplay was prevented:", error);
                });
            }
        }

        function updateNotificationsUI(notifications, newCount) {
            // نتحقق إذا كان هناك إشعار جديد (العدد الجديد أكبر من القديم)
            // ونشغل الصوت إذا كان هذا صحيحاً.
            if (newCount > currentUnreadCount) {
                playNotificationSound();
            }
            
            // تحديث العدد الحالي
            currentUnreadCount = newCount;

            const currentBadge = notificationsDropdownContainer.querySelector('.badge');
            if (newCount > 0) {
                if (!currentBadge) {
                    const newBadge = document.createElement('span');
                    newBadge.className = 'badge rounded-pill bg-danger';
                    newBadge.id = 'notifications-badge';
                    newBadge.textContent = newCount;
                    notificationsButton.appendChild(newBadge);
                } else {
                    currentBadge.textContent = newCount;
                }
            } else if (currentBadge) {
                currentBadge.remove();
            }

            let listHtml = '';
            if (notifications.length > 0) {
  notifications.forEach(notification => {
    listHtml += `
        <li class="dropdown-item-wrapper ${notification.is_read == 0 ? 'notification-unread' : ''}" data-notification-id="${notification.id}">
            <a class="dropdown-item notification-link" href="${notification.link}">
                <i class="fas fa-info-circle notification-icon"></i>
                <div class="notification-content">
                    <div class="notification-title fw-bold">${notification.title}</div> <!-- العنوان -->
                    <div class="notification-text">${notification.message}</div>
                    <small class="text-muted">${notification.created_at}</small>
                </div>
            </a>
        </li>
        <li><hr class="dropdown-divider"></li>
    `;
});

                listHtml += `
                    <li><a class="dropdown-item text-center" href="<?php echo SITE_URL; ?>/pages/notifications/index.php">عرض كل الإشعارات</a></li>
                `;
            } else {
                listHtml = '<li><span class="dropdown-item-text text-muted">لا توجد إشعارات.</span></li>';
            }
            notificationsList.innerHTML = listHtml;
        }

// function fetchNotifications() {
//     fetch('<?php echo SITE_URL; ?>/includes/fetch_notifications.php')
//         .then(response => {
//             if (!response.ok) {
//                 throw new Error('Network response was not ok');
//             }
//             return response.json();
//         })
//         .then(async data => {
//             if (data.status === 'success') {
//                 // تحديث واجهة المستخدم
//                 updateNotificationsUI(data.notifications, data.count);

//                 // إرسال الإشعارات الجديدة فقط
//                 for (const notification of data.notifications) {
//                     if (!notification.is_sent) { // تأكد أن الإشعار لم يُرسل
//                         try {
//                             // await fetch('<?php echo SITE_URL; ?>/api/send_notification.php', {
//                             //     method: 'POST',
//                             //     headers: { 'Content-Type': 'application/json' },
//                             //     body: JSON.stringify({ notification_id: notification.id })
//                             // });
//                         } catch (err) {
//                             console.error('Error sending notification:', err);
//                         }
//                     }
//                 }
//             }
//         })
//         .catch(error => console.error('Error fetching notifications:', error));
// }

// إذا كان العنصر موجود، ابدأ التحقق
// if (notificationsDropdownContainer) {
//     fetchNotifications(); // تحقق أولي عند التحميل
//     setInterval(fetchNotifications, 5000); // تحقق كل 5 ثواني
// }


        // ... (باقي الكود الخاص بـ notificationsList.addEventListener) ...
        notificationsList.addEventListener('click', function(event) {
            const wrapper = event.target.closest('.dropdown-item-wrapper');
            const link = event.target.closest('.notification-link');

            if (wrapper && link) {
                const notificationId = wrapper.getAttribute('data-notification-id');
                if (notificationId) {
                    fetch('<?php echo SITE_URL; ?>/includes/mark_notification_as_read.php', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                },
                                body: JSON.stringify({ notification_id: notificationId })
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.status === 'success') {
                                    wrapper.classList.remove('notification-unread');
                                    const currentBadge = notificationsDropdownContainer.querySelector('.badge');
                                    if (currentBadge) {
                                        const currentCount = parseInt(currentBadge.textContent);
                                        if (currentCount > 1) {
                                            currentBadge.textContent = currentCount - 1;
                                            currentUnreadCount = currentCount - 1;
                                        } else {
                                            currentBadge.remove();
                                            currentUnreadCount = 0;
                                        }
                                    }
                                } else {
                                    console.error('حدث خطأ في تحديث الإشعار:', data.message);
                                }
                            })
                            .catch(error => {
                                console.error('خطأ في الاتصال:', error);
                            });
                }
            }
        });
        
        const currentPath = window.location.pathname;
        const links = document.querySelectorAll('.sidebar-menu a.submenu-link, .sidebar-menu a.menu-link');
        links.forEach(link => {
            if (link.href && link.href.includes(currentPath)) {
                link.classList.add('active-submenu-link');
                link.classList.add('active');
                const parentCollapse = link.closest('.submenu.collapse');
                if (parentCollapse) {
                    const parentMenuLink = parentCollapse.previousElementSibling;
                    if (parentMenuLink && parentMenuLink.classList.contains('menu-link')) {
                        parentMenuLink.classList.remove('collapsed');
                        parentMenuLink.setAttribute('aria-expanded', 'true');
                        parentCollapse.classList.add('show');
                    }
                }
            }
        });
    });
</script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-container--default .select2-selection--single { height: 40px !important; border: 1px solid #ced4da !important; border-radius: 0.375rem !important; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px !important; padding-right: 15px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
    .required:after { content:" *"; color: #dc3545; font-weight: bold; }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('.select2-patient').select2({ width: '100%', dir: "rtl", language: "ar" });
    $('.select2-staff').select2({ width: '100%', dir: "rtl" });
});
</script>