Add 1 files

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>نظام إرسال رسائل الواتساب للطلاب</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
     <style>
         :root {
             --primary-color: #25D366;
@@ -15,6 +16,7 @@
             --white: #ffffff;
             --error-color: #ff4444;
             --success-color: #00C851;
+            --warning-color: #ffbb33;
         }
         
         * {
@@ -82,6 +84,7 @@
             border-radius: 8px;
             transition: all 0.3s;
             background-color: var(--light-bg);
+            position: relative;
         }
         
         .upload-container:hover {
@@ -89,6 +92,16 @@
             background-color: rgba(52, 183, 241, 0.05);
         }
         
+        .upload-container.active {
+            border-color: var(--primary-color);
+            background-color: rgba(37, 211, 102, 0.05);
+        }
+        
+        .upload-container.error {
+            border-color: var(--error-color);
+            background-color: rgba(255, 68, 68, 0.05);
+        }
+        
         .upload-container i {
             font-size: 48px;
             color: var(--accent-color);
@@ -214,6 +227,48 @@
             font-size: 18px;
         }
         
+        /* File Requirements Info */
+        .file-requirements {
+            background-color: rgba(52, 183, 241, 0.1);
+            border-left: 4px solid var(--accent-color);
+            padding: 12px 15px;
+            margin-top: 15px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+        
+        .file-requirements h4 {
+            margin-bottom: 8px;
+            color: var(--secondary-color);
+        }
+        
+        .file-requirements ul {
+            list-style-position: inside;
+            padding-right: 10px;
+        }
+        
+        .file-requirements li {
+            margin-bottom: 5px;
+        }
+        
+        /* Loading Animation */
+        .spinner {
+            width: 24px;
+            height: 24px;
+            border: 3px solid rgba(255,255,255,0.3);
+            border-radius: 50%;
+            border-top-color: var(--white);
+            animation: spin 1s ease-in-out infinite;
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: 8px;
+        }
+        
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        
+        /* Modals */
         .modal {
             display: none;
             position: fixed;
@@ -290,6 +345,10 @@
             color: var(--success-color);
         }
         
+        .warning {
+            color: var(--warning-color);
+        }
+        
         .template-tags {
             display: flex;
             flex-wrap: wrap;
@@ -312,6 +371,7 @@
             color: var(--white);
         }
         
+        /* Responsive */
         @media (max-width: 768px) {
             .container {
                 padding: 15px;
@@ -329,6 +389,16 @@
                 padding: 10px 20px;
                 font-size: 14px;
             }
+            
+            .student-item {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            
+            .student-item div:nth-child(2) {
+                margin-top: 8px;
+                max-width: 100%;
+            }
         }
     </style>
 </head>
@@ -355,12 +425,24 @@
                         <i class="fas fa-folder-open"></i> اختر ملف
                     </button>
                 </div>
+                
+                <div class="file-requirements">
+                    <h4><i class="fas fa-info-circle"></i> متطلبات الملف:</h4>
+                    <ul>
+                        <li>يجب أن يكون الملف من نوع Excel (xlsx, xls) أو CSV</li>
+                        <li>يجب أن يحتوي على عمود باسم "الاسم" أو "اسم الطالب"</li>
+                        <li>يجب أن يحتوي على عمود باسم "رقم الجوال" أو "الهاتف"</li>
+                        <li>يمكنك <a href="#" id="downloadSample">تحميل نموذج</a> لاستخدامه كمرجع</li>
+                    </ul>
+                </div>
+                
                 <div id="fileInfo" style="margin-top: 15px; display: none;">
                     <div class="file-details" style="display: flex; align-items: center;">
                         <i class="fas fa-file-excel" style="color: var(--success-color); font-size: 24px; margin-left: 10px;"></i>
                         <div>
                             <p style="font-weight: 600; margin-bottom: 5px;" id="fileName"></p>
                             <p style="color: #666; font-size: 14px;" id="fileSize"></p>
+                            <p style="color: #666; font-size: 14px;" id="studentCount"></p>
                         </div>
                         <button id="clearFileBtn" style="background: none; border: none; margin-right: auto; color: var(--error-color); cursor: pointer;">
                             <i class="fas fa-times"></i>
@@ -390,6 +472,7 @@
                 <div class="preview-section">
                     <div class="preview-header">
                         <h3><i class="fas fa-eye"></i> معاينة الرسائل</h3>
+                        <span id="previewCount" style="font-size: 14px; color: #666;"></span>
                     </div>
                     <div class="preview-content">
                         <p id="previewMessage">سيتم عرض معاينة الرسائل هنا بعد تحميل الملف وإدخال نموذج الرسالة.</p>
@@ -402,6 +485,7 @@
                 <button class="btn send-btn" id="sendMessagesBtn" disabled>
                     <i class="fab fa-whatsapp"></i> إرسال الرسائل
                 </button>
+                <p id="sendInfo" style="margin-top: 10px; font-size: 14px; color: #666;"></p>
             </section>
         </div>
     </div>
@@ -423,6 +507,9 @@
                 </div>
             </div>
             
+            <div id="successCount" style="text-align: center; margin: 10px 0; color: var(--success-color);"></div>
+            <div id="errorCount" style="text-align: center; margin: 10px 0; color: var(--error-color);"></div>
+            
             <div style="text-align: center;">
                 <button class="btn btn-secondary" id="cancelSendingBtn">
                     <i class="fas fa-stop"></i> إلغاء العملية
@@ -441,12 +528,36 @@
             
             <div style="margin: 20px 0; text-align: center;">
                 <p id="successMessage"></p>
+                <div id="finalStats" style="margin-top: 15px;"></div>
             </div>
             
             <div style="text-align: center;">
                 <button class="btn" id="okSuccessBtn">
                     <i class="fas fa-check"></i> حسناً
                 </button>
+                <button class="btn btn-secondary" id="downloadReportBtn" style="margin-right: 10px;">
+                    <i class="fas fa-download"></i> تنزيل التقرير
+                </button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Error Modal -->
+    <div class="modal" id="errorModal">
+        <div class="modal-content">
+            <div style="text-align: center; margin: 20px 0;">
+                <i class="fas fa-exclamation-circle" style="font-size: 60px; color: var(--error-color);"></i>
+                <h3 style="margin-top: 15px;" id="errorModalTitle">حدث خطأ أثناء معالجة الملف</h3>
+            </div>
+            
+            <div style="margin: 20px 0; text-align: center;">
+                <p id="errorModalMessage"></p>
+            </div>
+            
+            <div style="text-align: center;">
+                <button class="btn" id="okErrorBtn">
+                    <i class="fas fa-check"></i> حسناً
+                </button>
             </div>
         </div>
     </div>
@@ -460,24 +571,38 @@
             const fileInfo = document.getElementById('fileInfo');
             const fileName = document.getElementById('fileName');
             const fileSize = document.getElementById('fileSize');
+            const studentCount = document.getElementById('studentCount');
             const clearFileBtn = document.getElementById('clearFileBtn');
             const messageTemplate = document.getElementById('messageTemplate');
             const customLink = document.getElementById('customLink');
             const previewMessage = document.getElementById('previewMessage');
+            const previewCount = document.getElementById('previewCount');
             const studentList = document.getElementById('studentList');
             const sendMessagesBtn = document.getElementById('sendMessagesBtn');
+            const sendInfo = document.getElementById('sendInfo');
             const progressModal = document.getElementById('progressModal');
             const progressBar = document.getElementById('progressBar');
             const statusMessage = document.getElementById('statusMessage');
+            const successCount = document.getElementById('successCount');
+            const errorCount = document.getElementById('errorCount');
             const closeModalBtn = document.getElementById('closeModalBtn');
             const cancelSendingBtn = document.getElementById('cancelSendingBtn');
             const successModal = document.getElementById('successModal');
             const successMessage = document.getElementById('successMessage');
+            const finalStats = document.getElementById('finalStats');
             const okSuccessBtn = document.getElementById('okSuccessBtn');
+            const downloadReportBtn = document.getElementById('downloadReportBtn');
+            const errorModal = document.getElementById('errorModal');
+            const errorModalTitle = document.getElementById('errorModalTitle');
+            const errorModalMessage = document.getElementById('errorModalMessage');
+            const okErrorBtn = document.getElementById('okErrorBtn');
+            const downloadSampleLink = document.getElementById('downloadSample');
             
             // Variables
             let studentsData = [];
             let sendingProcess = null;
+            let successCounter = 0;
+            let errorCounter = 0;
             
             // Event Listeners
             selectFileBtn.addEventListener('click', function() {
@@ -486,19 +611,16 @@
             
             uploadContainer.addEventListener('dragover', function(e) {
                 e.preventDefault();
-                uploadContainer.style.borderColor = var('--accent-color');
-                uploadContainer.style.backgroundColor = 'rgba(52, 183, 241, 0.1)';
+                uploadContainer.classList.add('active');
             });
             
             uploadContainer.addEventListener('dragleave', function() {
-                uploadContainer.style.borderColor = '#ccc';
-                uploadContainer.style.backgroundColor = 'var(--light-bg)';
+                uploadContainer.classList.remove('active');
             });
             
             uploadContainer.addEventListener('drop', function(e) {
                 e.preventDefault();
-                uploadContainer.style.borderColor = '#ccc';
-                uploadContainer.style.backgroundColor = 'var(--light-bg)';
+                uploadContainer.classList.remove('active');
                 
                 if (e.dataTransfer.files.length) {
                     fileInput.files = e.dataTransfer.files;
@@ -509,15 +631,12 @@
             fileInput.addEventListener('change', handleFileUpload);
             
             clearFileBtn.addEventListener('click', function() {
-                fileInput.value = '';
-                fileInfo.style.display = 'none';
-                studentsData = [];
-                updatePreview();
-                updateSendButtonState();
+                resetFileUpload();
             });
             
             messageTemplate.addEventListener('input', function() {
                 updatePreview();
+                updateSendButtonState();
             });
             
             customLink.addEventListener('input', function() {
@@ -533,8 +652,12 @@
             cancelSendingBtn.addEventListener('click', function() {
                 if (sendingProcess) {
                     clearInterval(sendingProcess);
-                    statusMessage.innerHTML = '<span class="error">تم إيقاف عملية الإرسال</span>';
+                    sendingProcess = null;
+                    statusMessage.innerHTML = '<span class="warning">تم إيقاف عملية الإرسال</span>';
                     cancelSendingBtn.disabled = true;
+                    
+                    // Show final stats
+                    showFinalStats();
                 }
             });
             
@@ -542,6 +665,19 @@
                 successModal.style.display = 'none';
             });
             
+            okErrorBtn.addEventListener('click', function() {
+                errorModal.style.display = 'none';
+            });
+            
+            downloadReportBtn.addEventListener('click', function() {
+                downloadReport();
+            });
+            
+            downloadSampleLink.addEventListener('click', function(e) {
+                e.preventDefault();
+                downloadSampleFile();
+            });
+            
             // Add event listeners for template tags
             document.querySelectorAll('.tag').forEach(tag => {
                 tag.addEventListener('click', function() {
@@ -556,52 +692,154 @@
                 const file = fileInput.files[0];
                 if (!file) return;
                 
-                // Simulate file processing (in a real app, you'd use SheetJS or similar)
-                setTimeout(() => {
-                    studentsData = generateSampleData();
-                    
-                    fileName.textContent = file.name;
-                    fileSize.textContent = formatFileSize(file.size);
-                    fileInfo.style.display = 'block';
-                    
-                    updatePreview();
-                    updateSendButtonState();
-                }, 500);
+                // Check file type
+                const validTypes = ['application/vnd.ms-excel', 
+                                   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 
+                                   'text/csv'];
+                if (!validTypes.includes(file.type) && 
+                    !file.name.endsWith('.xls') && 
+                    !file.name.endsWith('.xlsx') && 
+                    !file.name.endsWith('.csv')) {
+                    showError('نوع ملف غير مدعوم', 'الرجاء تحميل ملف Excel (xls, xlsx) أو ملف CSV.');
+                    resetFileUpload();
+                    return;
+                }
+                
+                // Show loading state
+                uploadContainer.classList.add('active');
+                selectFileBtn.innerHTML = '<span class="spinner"></span> جاري معالجة الملف...';
+                selectFileBtn.disabled = true;
+                
+                const reader = new FileReader();
+                
+                reader.onload = function(e) {
+                    try {
+                        const data = new Uint8Array(e.target.result);
+                        const workbook = XLSX.read(data, { type: 'array' });
+                        
+                        // Get first sheet
+                        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
+                        
+                        // Convert to JSON
+                        const jsonData = XLSX.utils.sheet_to_json(firstSheet);
+                        
+                        if (jsonData.length === 0) {
+                            showError('ملف فارغ', 'الملف الذي تم تحميله لا يحتوي على أي بيانات.');
+                            resetFileUpload();
+                            return;
+                        }
+                        
+                        // Process data and look for required columns
+                        let nameKey = findColumnKey(jsonData[0], ['اسم', 'اسم الطالب', 'الاسم', 'الطالب', 'name', 'student']);
+                        let phoneKey = findColumnKey(jsonData[0], ['رقم الجوال', 'الهاتف', 'رقم الهاتف', 'phone', 'mobile', 'whatsapp']);
+                        
+                        if (!nameKey || !phoneKey) {
+                            showError('تنسيق ملف غير صحيح', 'الملف يجب أن يحتوي على أعمدة لكل من الاسم ورقم الجوال.');
+                            resetFileUpload();
+                            return;
+                        }
+                        
+                        studentsData = jsonData.map(row => {
+                            return {
+                                name: row[nameKey] || 'غير معروف',
+                                phone: sanitizePhoneNumber(row[phoneKey])
+                            };
+                        }).filter(student => student.phone); // Filter out invalid phone numbers
+                        
+                        if (studentsData.length === 0) {
+                            showError('بيانات غير صالحة', 'لم يتم العثور على أرقام هواتف صالحة في الملف.');
+                            resetFileUpload();
+                            return;
+                        }
+                        
+                        // Show file info
+                        fileName.textContent = file.name;
+                        fileSize.textContent = formatFileSize(file.size);
+                        studentCount.textContent = `عدد الطلاب: ${studentsData.length}`;
+                        fileInfo.style.display = 'block';
+                        
+                        // Update UI
+                        uploadContainer.classList.remove('active');
+                        selectFileBtn.innerHTML = '<i class="fas fa-folder-open"></i> اختر ملف';
+                        selectFileBtn.disabled = false;
+                        
+                        updatePreview();
+                        updateSendButtonState();
+                        updateSendInfo();
+                        
+                    } catch (error) {
+                        console.error('Error processing file:', error);
+                        showError('خطأ في معالجة الملف', 'حدث خطأ أثناء قراءة الملف. الرجاء التحقق من صحة الملف وحاول مرة أخرى.');
+                        resetFileUpload();
+                    }
+                };
+                
+                reader.onerror = function() {
+                    showError('خطأ في قراءة الملف', 'تعذر قراءة الملف. الرجاء المحاولة مرة أخرى.');
+                    resetFileUpload();
+                };
+                
+                reader.readAsArrayBuffer(file);
             }
             
-            function generateSampleData() {
-                // In a real app, you would parse the actual Excel file
-                const mockData = [];
-                const names = [
-                    "أحمد محمد", "فاطمة علي", "يوسف إبراهيم", 
-                    "سارة خالد", "محمد حسن", "نورا عبدالله",
-                    "عمر كمال", "لمى سعيد", "خالد وليد",
-                    "هناء مصطفى", "حسين رضا", "آية محمود"
-                ];
+            function findColumnKey(row, possibleKeys) {
+                const existingKeys = Object.keys(row);
+                for (let key of possibleKeys) {
+                    if (existingKeys.includes(key)) {
+                        return key;
+                    }
+                }
+                return null;
+            }
+            
+            function sanitizePhoneNumber(phone) {
+                if (!phone) return null;
+                
+                // Convert to string if it's a number
+                phone = phone.toString();
                 
-                for (let i = 0; i < 12; i++) {
-                    mockData.push({
-                        name: names[i],
-                        phone: `9665${Math.floor(10000000 + Math.random() * 90000000)}`
-                    });
+                // Remove all non-digit characters
+                phone = phone.replace(/\D/g, '');
+                
+                // Saudi number validation (966 + 9 digits)
+                if (phone.startsWith('966') && phone.length === 12) {
+                    return phone;
                 }
                 
-                return mockData;
+                // International format
+                if (phone.length >= 10 && phone.length <= 15) {
+                    return phone;
+                }
+                
+                return null;
             }
             
             function formatFileSize(bytes) {
-                if (bytes === 0) return '0 Bytes';
+                if (bytes === 0) return '0 بايت';
                 const k = 1024;
-                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+                const sizes = ['بايت', 'كيلوبايت', 'ميجابايت', 'جيجابايت'];
                 const i = Math.floor(Math.log(bytes) / Math.log(k));
                 return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
             }
             
+            function resetFileUpload() {
+                fileInput.value = '';
+                fileInfo.style.display = 'none';
+                studentsData = [];
+                uploadContainer.classList.remove('active', 'error');
+                selectFileBtn.innerHTML = '<i class="fas fa-folder-open"></i> اختر ملف';
+                selectFileBtn.disabled = false;
+                updatePreview();
+                updateSendButtonState();
+                updateSendInfo();
+            }
+            
             function updatePreview() {
                 if (studentsData.length === 0) {
                     studentList.style.display = 'none';
                     previewMessage.style.display = 'block';
                     previewMessage.textContent = 'سيتم عرض معاينة الرسائل هنا بعد تحميل الملف وإدخال نموذج الرسالة.';
+                    previewCount.textContent = '';
                     return;
                 }
                 
@@ -610,16 +848,18 @@
                     studentList.style.display = 'none';
                     previewMessage.style.display = 'block';
                     previewMessage.textContent = 'الرجاء إدخال نموذج الرسالة لمعاينة الرسائل.';
+                    previewCount.textContent = '';
                     return;
                 }
                 
                 studentList.innerHTML = '';
                 previewMessage.style.display = 'none';
                 studentList.style.display = 'block';
+                previewCount.textContent = `عرض ${Math.min(5, studentsData.length)} من ${studentsData.length}`;
                 
-                // Show preview for first 3 students
-                const previewCount = Math.min(3, studentsData.length);
-                for (let i = 0; i < previewCount; i++) {
+                // Show preview for first 5 students
+                const previewCountNum = Math.min(5, studentsData.length);
+                for (let i = 0; i < previewCountNum; i++) {
                     const student = studentsData[i];
                     const link = customLink.value || '{الرابط}';
                     const processedMessage = processMessage(message, student.name, link);
@@ -629,7 +869,7 @@
                     li.innerHTML = `
                         <div style="flex: 1;">
                             <strong>${student.name}</strong>
-                            <div style="font-size: 12px; color: #666; margin-top: 4px;">${student.phone}</div>
+                            <div style="font-size: 12px; color: #666; margin-top: 4px;">${formatPhoneNumber(student.phone)}</div>
                         </div>
                         <div style="max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                             ${processedMessage}
@@ -638,16 +878,24 @@
                     studentList.appendChild(li);
                 }
                 
-                if (studentsData.length > 3) {
+                if (studentsData.length > 5) {
                     const li = document.createElement('li');
                     li.className = 'student-item';
                     li.style.textAlign = 'center';
                     li.style.color = '#666';
-                    li.textContent = `و ${studentsData.length - 3} طلاب آخرين...`;
+                    li.textContent = `و ${studentsData.length - 5} طلاب آخرين...`;
                     studentList.appendChild(li);
                 }
             }
             
+            function formatPhoneNumber(phone) {
+                // Format Saudi numbers
+                if (phone.startsWith('966')) {
+                    return `+${phone.substring(0, 3)} ${phone.substring(3, 5)} ${phone.substring(5, 8)} ${phone.substring(8)}`;
+                }
+                return `+${phone}`;
+            }
+            
             function processMessage(template, name, link) {
                 const today = new Date();
                 const dateStr = `${today.getDate()}/${today.getMonth() + 1}/${today.getFullYear()}`;
@@ -655,7 +903,7 @@
                 return template
                     .replace(/{اسم الطالب}/g, name)
                     .replace(/{الرابط}/g, link)
-                    .replace(/{الرقم}/g, '+9665XXXXXX')
+                    .replace(/{الرقم}/g, '+966XXXXXXXXX')
                     .replace(/{التاريخ}/g, dateStr);
             }
             
@@ -663,6 +911,14 @@
                 sendMessagesBtn.disabled = studentsData.length === 0 || !messageTemplate.value;
             }
             
+            function updateSendInfo() {
+                if (studentsData.length > 0) {
+                    sendInfo.textContent = `جاهز لإرسال ${studentsData.length} رسالة`;
+                } else {
+                    sendInfo.textContent = '';
+                }
+            }
+            
             function insertAtCursor(textarea, text) {
                 const startPos = textarea.selectionStart;
                 const endPos = textarea.selectionEnd;
@@ -680,46 +936,140 @@
             }
             
             function startSendingProcess() {
+                if (studentsData.length === 0 || !messageTemplate.value) return;
+                
+                // Reset counters
+                successCounter = 0;
+                errorCounter = 0;
+                
+                // Show progress modal
                 progressModal.style.display = 'flex';
                 progressBar.style.width = '0%';
+                successCount.textContent = '';
+                errorCount.textContent = '';
                 cancelSendingBtn.disabled = false;
                 
-                let progress = 0;
                 const totalStudents = studentsData.length;
                 const link = customLink.value || '{الرابط}';
+                let currentIndex = 0;
                 
                 sendingProcess = setInterval(() => {
-                    if (progress >= totalStudents) {
+                    if (currentIndex >= totalStudents) {
+                        // Finished sending
                         clearInterval(sendingProcess);
                         sendingProcess = null;
                         
                         // Show success message
                         progressModal.style.display = 'none';
-                        successMessage.textContent = `تم إرسال ${totalStudents} رسالة بنجاح إلى الطلاب.`;
+                        
+                        if (errorCounter === 0) {
+                            successMessage.textContent = `تم إرسال جميع الرسائل بنجاح إلى ${totalStudents} طالب!`;
+                        } else {
+                            successMessage.textContent = `تم إرسال ${successCounter} رسالة بنجاح من أصل ${totalStudents}.`;
+                        }
+                        
+                        showFinalStats();
                         successModal.style.display = 'flex';
                         return;
                     }
                     
-                    progress++;
-                    const percent = Math.round((progress / totalStudents) * 100);
-                    progressBar.style.width = `${percent}%`;
-                    
-                    // Simulate sending message (in a real app, you would send via WhatsApp API)
-                    const currentStudent = studentsData[progress - 1];
-                    const message = processMessage(messageTemplate.value, currentStudent.name, link);
+                    const student = studentsData[currentIndex];
+                    const message = processMessage(messageTemplate.value, student.name, link);
                     
-                    statusMessage.innerHTML = `جاري إرسال الرسالة إلى <strong>${currentStudent.name}</strong>...`;
+                    // Update progress
+                    const percent = Math.round(((currentIndex + 1) / totalStudents) * 100);
+                    progressBar.style.width = `${percent}%`;
+                    statusMessage.innerHTML = `جاري إرسال الرسالة إلى <strong>${student.name}</strong> (${currentIndex + 1}/${totalStudents})...`;
                     
-                    // Randomly simulate failures (for demo purposes)
-                    if (Math.random() < 0.1 && progress < totalStudents) {
-                        setTimeout(() => {
-                            statusMessage.innerHTML = `<span class="error">فشل إرسال الرسالة إلى ${currentStudent.name} - سيتم إعادة المحاولة...</span>`;
-                            progress--; // Retry this one
-                        }, 1500);
-                    }
+                    // Simulate sending (in a real app, you would call WhatsApp API)
+                    setTimeout(() => {
+                        // Randomly simulate failures (for demo purposes)
+                        if (Math.random() < 0.1) {
+                            errorCounter++;
+                            errorCount.textContent = `رسائل غير مرسلة: ${errorCounter}`;
+                            
+                            // Retry logic (for demo, just continue)
+                            if (Math.random() < 0.5 && currentIndex < totalStudents) {
+                                statusMessage.innerHTML = `<span class="error">فشل إرسال الرسالة إلى ${student.name} - جاري إعادة المحاولة...</span>`;
+                                currentIndex--;
+                            } else {
+                                statusMessage.innerHTML = `<span class="error">فشل إرسال الرسالة إلى ${student.name} - سيتم تخطي هذا الطالب</span>`;
+                            }
+                        } else {
+                            successCounter++;
+                            successCount.textContent = `رسائل مرسلة: ${successCounter}`;
+                        }
+                        
+                        currentIndex++;
+                    }, 1000);
                 }, 1500);
             }
             
+            function showFinalStats() {
+                const total = successCounter + errorCounter;
+                finalStats.innerHTML = `
+                    <div style="display: flex; justify-content: space-around; margin-top: 10px;">
+                        <div>
+                            <div style="font-size: 24px; color: var(--success-color);">${successCounter}</div>
+                            <div style="font-size: 14px;">ناجحة</div>
+                        </div>
+                        <div>
+                            <div style="font-size: 24px; color: var(--error-color);">${errorCounter}</div>
+                            <div style="font-size: 14px;">فاشلة</div>
+                        </div>
+                        <div>
+                            <div style="font-size: 24px; color: var(--secondary-color);">${total}</div>
+                            <div style="font-size: 14px;">المجموع</div>
+                        </div>
+                    </div>
+                `;
+            }
+            
+            function downloadReport() {
+                // Create a CSV report
+                let csvContent = "اسم الطالب,رقم الجوال,الحالة\n";
+                
+                studentsData.forEach((student, index) => {
+                    const status = index < successCounter ? "ناجح" : "فشل";
+                    csvContent += `${student.name},${formatPhoneNumber(student.phone)},${status}\n`;
+                });
+                
+                // Create download link
+                const blob = new Blob(["\uFEFF"+csvContent], { type: 'text/csv;charset=utf-8;' });
+                const url = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.setAttribute('href', url);
+                link.setAttribute('download', `تقرير_إرسال_الرسائل_${new Date().toLocaleDateString('ar')}.csv`);
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
+            
+            function downloadSampleFile() {
+                // Create sample Excel file data
+                const sampleData = [
+                    ['اسم الطالب', 'رقم الجوال', 'البريد الإلكتروني'],
+                    ['أحمد محمد', '966501234567', 'ahmed@example.com'],
+                    ['فاطمة علي', '966502345678', 'fatima@example.com'],
+                    ['محمد حسن', '966503456789', 'mohamed@example.com']
+                ];
+                
+                // Create workbook
+                const wb = XLSX.utils.book_new();
+                const ws = XLSX.utils.aoa_to_sheet(sampleData);
+                XLSX.utils.book_append_sheet(wb, ws, "الطلاب");
+                
+                // Generate and download
+                XLSX.writeFile(wb, 'نموذج_قائمة_الطلاب.xlsx');
+            }
+            
+            function showError(title, message) {
+                uploadContainer.classList.add('error');
+                errorModalTitle.textContent = title;
+                errorModalMessage.textContent = message;
+                errorModal.style.display = 'flex';
+            }
+            
             // Handle clicks outside modal to close it
             window.addEventListener('click', function(event) {
                 if (event.target === progressModal) {
@@ -728,8 +1078,11 @@
                 if (event.target === successModal) {
                     successModal.style.display = 'none';
                 }
+                if (event.target === errorModal) {
+                    errorModal.style.display = 'none';
+                }
             });
         });
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</body>
 </html>