35227-vm/assets/js/main.js

document.addEventListener('DOMContentLoaded', function () {

    // --- DUMMY DATA ---
    const emails = [
        {
            id: 1,
            sender: 'إدارة شؤون الموظفين',
            subject: 'عاجل: تحديث بيانات الحضور والغياب',
            snippet: 'يرجى من جميع الموظفين مراجعة وتحديث بيانات الحضور الخاصة بهم قبل نهاية الأسبوع...', 
            body: `<h6>الزملاء الكرام،</h6><p>نود تذكيركم بضرورة مراجعة وتحديث بيانات الحضور والغياب الخاصة بكم على النظام الإلكتروني في موعد أقصاه نهاية دوام يوم الخميس الموافق 30 أكتوبر 2025.</p><p>يأتي هذا الإجراء لضمان دقة صرف الرواتب والمستحقات. في حال وجود أي مشكلة تقنية، يرجى التواصل مع قسم الدعم الفني.</p><p>شكرًا لتعاونكم.</p><strong>إدارة شؤون الموظفين</strong>`,
            attachments: [
                { name: 'تعليمات_التحديث.pdf', icon: 'bi-file-earmark-pdf-fill text-danger' },
                { name: 'نموذج_اعتراض.docx', icon: 'bi-file-earmark-word-fill text-primary' }
            ],
            tag: 'urgent',
            ai: {
                summary: 'تطلب إدارة شؤون الموظفين من الجميع تحديث بيانات الحضور والغياب على النظام الإلكتروني قبل نهاية يوم الخميس 30 أكتوبر، وذلك لضمان دقة الرواتب.',
                actions: [
                    { text: 'إنشاء تذكير', icon: 'bi-alarm-fill' },
                    { text: 'طلب مساعدة', icon: 'bi-headset' }
                ],
                replies: [
                    { title: 'رد رسمي (تأكيد)', content: 'السادة/ إدارة شؤون الموظفين،\n\nتحية طيبة وبعد،\n\nتم استلام تعميمكم بخصوص تحديث بيانات الحضور والغياب، وسيتم اتخاذ اللازم. خالص الشكر والتقدير.' },
                    { title: 'استفسار', content: 'السادة/ إدارة شؤون الموظفين،\n\nتحية طيبة وبعد،\n\nبخصوص تحديث البيانات، أواجه مشكلة في الدخول إلى النظام. لمن يمكنني التوجه؟ مع الشكر.' }
                ]
            }
        },
        {
            id: 2,
            sender: 'شركة التوريدات الحديثة',
            subject: 'عروض أسعار جديدة لأجهزة الحاسوب',
            snippet: 'يسرنا أن نقدم لكم عروض الأسعار الجديدة الخاصة بأجهزة الحاسوب المحمولة والطابعات...', 
            body: `<h6>السيد/ مدير المدرسة المحترم،</h6><p>يسرنا في شركة التوريدات الحديثة أن نقدم لكم عروض الأسعار المحدثة لأجهزة الحاسوب المحمولة والطابعات للعام الدراسي الجديد.</p><p>تجدون في المرفقات كتالوج المنتجات والأسعار. نقدم خصمًا خاصًا للمدارس بنسبة 15% على الطلبات التي تتجاوز 10 وحدات.</p><p>نتطلع للتعاون معكم.</p><strong>فريق المبيعات</strong>`,
            attachments: [
                { name: 'كتالوج_2025.pdf', icon: 'bi-file-earmark-pdf-fill text-danger' }
            ],
            tag: 'normal',
            ai: {
                summary: 'تقدم شركة التوريدات الحديثة عروض أسعار جديدة على أجهزة الحاسوب والطابعات مع خصم 15% للطلبات الكبيرة.',
                actions: [
                    { text: 'تمرير لقسم المشتريات', icon: 'bi-share-fill' },
                    { text: 'طلب اجتماع', icon: 'bi-calendar-plus' }
                ],
                replies: [
                    { title: 'طلب معلومات إضافية', content: 'السادة/ شركة التوريدات الحديثة،\n\nشكرًا على عروض الأسعار. هل يمكن تزويدنا بتفاصيل إضافية حول فترة الضمان وخدمات ما بعد البيع؟' },
                    { title: 'رفض مهذب', content: 'السادة/ شركة التوريدات الحديثة،\n\nنشكركم على جهودكم، ولكننا لا نعتزم إجراء عمليات شراء جديدة في الوقت الحالي.' }
                ]
            }
        },
        {
            id: 3,
            sender: 'ولي أمر الطالب/ة كريم أحمد',
            subject: 'استفسار بخصوص مستوى الطالب الدراسي',
            snippet: 'أود الاستفسار عن أداء ابني كريم في الفترة الأخيرة وكيف يمكننا المساعدة في تحسينه...', 
            body: `<h6>الأستاذ/ مدير المدرسة،</h6><p>تحية طيبة،</p><p>أنا ولي أمر الطالب كريم أحمد في الصف الثاني الإعدادي. أود الاستفسار عن مستواه الدراسي وسلوكه في الفترة الأخيرة. هل هناك أي ملاحظات من المعلمين؟ وكيف يمكننا كأهل المساعدة في المنزل لتحسين أدائه؟</p><p>نقدر لكم اهتمامكم.</p><strong>والد الطالب</strong>`,
            attachments: [],
            tag: 'normal',
            ai: {
                summary: 'يستفسر ولي أمر الطالب كريم أحمد عن مستواه الدراسي والسلوكي، ويسأل عن طرق للمساعدة في تحسينه.',
                actions: [
                    { text: 'طلب تقرير من المعلمين', icon: 'bi-file-earmark-text' },
                    { text: 'تحديد موعد اجتماع', icon: 'bi-calendar-plus' }
                ],
                replies: [
                    { title: 'رد لطيف ومطمئن', content: 'السيد/ ولي أمر الطالب كريم،\n\nنشكركم على حرصكم ومتابعتكم. سيتم التواصل مع معلمي الطالب لجمع الملاحظات اللازمة والرد عليكم بتقرير مفصل في أقرب فرصة ممكنة. يمكننا بعدها تحديد موعد لمناقشة الأمر إذا لزم.' },
                    { title: 'تحديد موعد مباشر', content: 'السيد/ ولي أمر الطالب كريم،\n\nشكرًا لتواصلكم. يسعدنا استقبالكم في المدرسة لمناقشة مستوى الطالب. هل يناسبكم يوم الثلاثاء القادم الساعة 11 صباحًا؟' }
                ]
            }
        }
    ];

    // --- DOM ELEMENTS ---
    const emailListContainer = document.getElementById('email-list-container');
    const emailSubject = document.getElementById('email-subject');
    const emailFrom = document.getElementById('email-from');
    const emailBodyContainer = document.getElementById('email-body-container');
    const emailAttachmentsContainer = document.getElementById('email-attachments');

    const aiSummary = document.getElementById('ai-summary');
    const aiActions = document.getElementById('ai-actions');
    const aiReplies = document.getElementById('ai-replies');

    // --- FUNCTIONS ---

    function displayEmailList() {
        const listGroup = document.createElement('div');
        listGroup.className = 'list-group list-group-flush';

        emails.forEach(email => {
            const item = document.createElement('a');
            item.href = '#';
            item.className = `list-group-item list-group-item-action ${email.tag === 'urgent' ? 'urgent' : ''}`;
            item.dataset.id = email.id;

            item.innerHTML = `
                <div class="d-flex w-100 justify-content-between">
                    <h6 class="mb-1">${email.sender}</h6>
                    <small><span class="badge ${email.tag === 'urgent' ? 'bg-urgent' : 'bg-normal'} rounded-pill">${email.tag === 'urgent' ? 'عاجل' : 'عادي'}</span></small>
                </div>
                <p class="mb-1">${email.subject}</p>
                <small class="text-muted">${email.snippet}</small>
            `;

            item.addEventListener('click', (e) => {
                e.preventDefault();
                displayEmailDetail(email.id);

                // Handle active state
                document.querySelectorAll('#email-list-container .list-group-item').forEach(el => el.classList.remove('active'));
                item.classList.add('active');
            });

            listGroup.appendChild(item);
        });
        emailListContainer.innerHTML = '';
        emailListContainer.appendChild(listGroup);
    }

    function displayEmailDetail(id) {
        const email = emails.find(e => e.id === id);
        if (!email) return;

        emailSubject.textContent = email.subject;
        emailFrom.innerHTML = `من: <strong>${email.sender}</strong>`;
        emailBodyContainer.innerHTML = email.body;

        // Display attachments
        emailAttachmentsContainer.innerHTML = '';
        if (email.attachments.length > 0) {
            const attachmentsTitle = document.createElement('h6');
            attachmentsTitle.className = 'mb-2 text-muted';
            attachmentsTitle.innerHTML = `<i class="bi bi-paperclip me-1"></i> المرفقات (${email.attachments.length})`;
            emailAttachmentsContainer.appendChild(attachmentsTitle);

            const attachmentsWrapper = document.createElement('div');
            attachmentsWrapper.className = 'd-flex flex-wrap gap-2';
            email.attachments.forEach(att => {
                const attachmentChip = document.createElement('a');
                attachmentChip.href = '#';
                attachmentChip.className = 'btn btn-sm btn-outline-secondary';
                attachmentChip.innerHTML = `<i class="bi ${att.icon} me-1"></i> ${att.name}`;
                attachmentsWrapper.appendChild(attachmentChip);
            });
            emailAttachmentsContainer.appendChild(attachmentsWrapper);
        } else {
             emailAttachmentsContainer.innerHTML = `<small class="text-muted">لا توجد مرفقات.</small>`;
        }

        // Display AI Assistant content
        displayAiAssistant(email.ai);
    }

    function displayAiAssistant(ai) {
        aiSummary.textContent = ai.summary;

        aiActions.innerHTML = '';
        ai.actions.forEach(action => {
            const actionChip = document.createElement('button');
            actionChip.className = 'btn btn-sm btn-light border';
            actionChip.innerHTML = `<i class="bi ${action.icon} me-1"></i> ${action.text}`;
            aiActions.appendChild(actionChip);
        });

        aiReplies.innerHTML = '';
        ai.replies.forEach(reply => {
            const replyItem = document.createElement('a');
            replyItem.href = '#';
            replyItem.className = 'list-group-item list-group-item-action';
            replyItem.innerHTML = `
                <div class="d-flex w-100 justify-content-between">
                    <h6 class="mb-1">${reply.title}</h6>
                </div>
                <small class="text-muted">${reply.content.substring(0, 100)}...</small>
            `;
            aiReplies.appendChild(replyItem);
        });
    }

    // --- INITIALIZATION ---
    displayEmailList();

});