Add 2 files

index.html

@@ -85,28 +85,28 @@
             
             <div class="flex-1 overflow-y-auto">
                 <nav class="p-2">
-                    <a href="#" class="flex items-center p-3 rounded-lg bg-blue-700 mb-1" id="dashboardLink">
+                    <a href="#" class="flex items-center p-3 rounded-lg bg-blue-700 mb-1 sidebar-link" data-section="dashboardSection">
                         <i class="fas fa-home"></i>
                         <span class="sidebar-text mr-3">الرئيسية</span>
                     </a>
-                    <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1" id="workersLink">
+                    <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1 sidebar-link" data-section="workersSection">
                         <i class="fas fa-users"></i>
                         <span class="sidebar-text mr-3">إدارة العمال</span>
                     </a>
-                    <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1" id="documentsLink">
+                    <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1 sidebar-link" data-section="documentsSection">
                         <i class="fas fa-file-alt"></i>
                         <span class="sidebar-text mr-3">المستندات</span>
                     </a>
-                    <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1 relative" id="notificationsLink">
+                    <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1 sidebar-link relative" data-section="notificationsSection">
                         <i class="fas fa-bell"></i>
                         <span class="sidebar-text mr-3">التنبيهات</span>
-                        <span class="notification-badge rounded-full h-5 w-5 flex items-center justify-center" id="notificationCount">0</span>
+                        <span class="notification-badge rounded-full h-5 w-5 flex items-center justify-center" id="notificationCount">3</span>
                     </a>
-                    <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1" id="reportsLink">
+                    <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1 sidebar-link" data-section="reportsSection">
                         <i class="fas fa-chart-bar"></i>
                         <span class="sidebar-text mr-3">التقارير</span>
                     </a>
-                    <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1" id="settingsLink">
+                    <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1 sidebar-link" data-section="settingsSection">
                         <i class="fas fa-cog"></i>
                         <span class="sidebar-text mr-3">الإعدادات</span>
                     </a>
@@ -139,7 +139,7 @@
                         
                         <button class="text-gray-600 hover:text-gray-800 relative" id="notificationButton">
                             <i class="fas fa-bell text-xl"></i>
-                            <span class="notification-badge rounded-full h-5 w-5 flex items-center justify-center" id="mobileNotificationCount">0</span>
+                            <span class="notification-badge rounded-full h-5 w-5 flex items-center justify-center" id="mobileNotificationCount">3</span>
                         </button>
                         
                         <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
@@ -210,7 +210,7 @@
                         </div>
                         
                         <div class="space-y-3" id="recentAlerts">
-                            <!-- Alerts will be populated here -->
+                            <!-- Alerts will be loaded here via AJAX -->
                         </div>
                     </div>
                     
@@ -230,7 +230,7 @@
                                     </tr>
                                 </thead>
                                 <tbody class="bg-white divide-y divide-gray-200" id="recentWorkersTable">
-                                    <!-- Workers will be populated here -->
+                                    <!-- Recent workers will be loaded here via AJAX -->
                                 </tbody>
                             </table>
                         </div>
@@ -278,7 +278,7 @@
                                     </tr>
                                 </thead>
                                 <tbody class="bg-white divide-y divide-gray-200" id="workersTable">
-                                    <!-- Workers will be populated here -->
+                                    <!-- Workers will be loaded here via AJAX -->
                                 </tbody>
                             </table>
                         </div>
@@ -414,17 +414,17 @@
                             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                 <div>
                                     <label for="residenceNumber" class="block text-gray-700 mb-2">رقم إقامة العمل</label>
-                                    <input type="text" id="residenceNumber" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                    <input type="text" id="workerResidenceNumber" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                 </div>
                                 
                                 <div>
                                     <label for="residenceIssueDate" class="block text-gray-700 mb-2">تاريخ إصدار الإقامة</label>
-                                    <input type="date" id="residenceIssueDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                    <input type="date" id="workerResidenceIssueDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                 </div>
                                 
                                 <div>
                                     <label for="residenceExpiryDate" class="block text-gray-700 mb-2">تاريخ انتهاء الإقامة</label>
-                                    <input type="date" id="residenceExpiryDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                    <input type="date" id="workerResidenceExpiryDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                 </div>
                                 
                                 <div class="md:col-span-3">
@@ -450,27 +450,27 @@
                             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                 <div>
                                     <label for="workCardNumber" class="block text-gray-700 mb-2">رقم بطاقة العمل</label>
-                                    <input type="text" id="workCardNumber" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                    <input type="text" id="workerWorkCardNumber" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                 </div>
                                 
                                 <div>
                                     <label for="workCardIssueDate" class="block text-gray-700 mb-2">تاريخ إصدار بطاقة العمل</label>
-                                    <input type="date" id="workCardIssueDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                    <input type="date" id="workerWorkCardIssueDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                 </div>
                                 
                                 <div>
                                     <label for="workCardExpiryDate" class="block text-gray-700 mb-2">تاريخ انتهاء بطاقة العمل</label>
-                                    <input type="date" id="workCardExpiryDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                    <input type="date" id="workerWorkCardExpiryDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                 </div>
                                 
                                 <div>
                                     <label for="arrivalAirport" class="block text-gray-700 mb-2">مطار الوصول</label>
-                                    <input type="text" id="arrivalAirport" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    <input type="text" id="workerArrivalAirport" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                 </div>
                                 
                                 <div>
                                     <label for="workType" class="block text-gray-700 mb-2">آلية العمل</label>
-                                    <select id="workType" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    <select id="workerWorkType" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                         <option value="">اختر آلية العمل</option>
                                         <option value="دوام كامل">دوام كامل</option>
                                         <option value="دوام جزئي">دوام جزئي</option>
@@ -588,7 +588,7 @@
                                     </tr>
                                 </thead>
                                 <tbody class="bg-white divide-y divide-gray-200" id="documentsTable">
-                                    <!-- Documents will be populated here -->
+                                    <!-- Documents will be loaded here via AJAX -->
                                 </tbody>
                             </table>
                         </div>
@@ -641,7 +641,7 @@
                         </div>
                         
                         <div class="space-y-3" id="notificationsList">
-                            <!-- Notifications will be populated here -->
+                            <!-- Notifications will be loaded here via AJAX -->
                         </div>
                         
                         <div class="flex items-center justify-between mt-4">
@@ -675,15 +675,15 @@
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                         <div class="bg-white p-6 rounded-lg shadow-md">
                             <h3 class="text-lg font-semibold mb-4 text-gray-700">توزيع العمال حسب الجنسية</h3>
-                            <div class="h-64" id="nationalityChart">
-                                <!-- Chart will be rendered here -->
+                            <div class="h-64 flex items-center justify-center" id="nationalityChart">
+                                <!-- Chart will be loaded here via AJAX -->
                             </div>
                         </div>
                         
                         <div class="bg-white p-6 rounded-lg shadow-md">
                             <h3 class="text-lg font-semibold mb-4 text-gray-700">حالة الوثائق</h3>
-                            <div class="h-64" id="documentsStatusChart">
-                                <!-- Chart will be rendered here -->
+                            <div class="h-64 flex items-center justify-center" id="documentsStatusChart">
+                                <!-- Chart will be loaded here via AJAX -->
                             </div>
                         </div>
                     </div>
@@ -704,7 +704,7 @@
                                     </tr>
                                 </thead>
                                 <tbody class="bg-white divide-y divide-gray-200" id="expiringDocumentsTable">
-                                    <!-- Expiring documents will be populated here -->
+                                    <!-- Expiring documents will be loaded here via AJAX -->
                                 </tbody>
                             </table>
                         </div>
@@ -738,10 +738,6 @@
                                 </div>
                             </div>
                         </div>
-                        
-                        <div class="h-96" id="expiryTrendsChart">
-                            <!-- Chart will be rendered here -->
-                        </div>
                     </div>
                 </div>
                 
@@ -754,22 +750,22 @@
                     <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                         <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">إعدادات التنبيهات</h3>
                         
-                        <form id="notificationSettingsForm">
+                        <form id="alertSettingsForm">
                             <div class="space-y-4">
                                 <div>
-                                    <label class="block text-gray-700 mb-2">أيام التنبيه المسبق</label>
-                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                                    <label class="block text-gray-700 mb-2">إعدادات التنبيه قبل انتهاء الوثائق</label>
+                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                         <div>
-                                            <label for="passportAlertDays" class="block text-gray-600 mb-1">جواز السفر</label>
-                                            <input type="number" id="passportAlertDays" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="30" min="1">
+                                            <label for="passportAlertDays" class="block text-gray-700 mb-1">جواز السفر (أيام)</label>
+                                            <input type="number" id="passportAlertDays" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="30">
                                         </div>
                                         <div>
-                                            <label for="residenceAlertDays" class="block text-gray-600 mb-1">إقامة العمل</label>
-                                            <input type="number" id="residenceAlertDays" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="30" min="1">
+                                            <label for="residenceAlertDays" class="block text-gray-700 mb-1">إقامة العمل (أيام)</label>
+                                            <input type="number" id="residenceAlertDays" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="30">
                                         </div>
                                         <div>
-                                            <label for="workCardAlertDays" class="block text-gray-600 mb-1">بطاقة العمل</label>
-                                            <input type="number" id="workCardAlertDays" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="30" min="1">
+                                            <label for="workCardAlertDays" class="block text-gray-700 mb-1">بطاقة العمل (أيام)</label>
+                                            <input type="number" id="workCardAlertDays" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="30">
                                         </div>
                                     </div>
                                 </div>
@@ -778,16 +774,16 @@
                                     <label class="block text-gray-700 mb-2">طرق إرسال التنبيهات</label>
                                     <div class="space-y-2">
                                         <div class="flex items-center">
-                                            <input type="checkbox" id="globalEmailAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
-                                            <label for="globalEmailAlert" class="mr-2 block text-gray-700">البريد الإلكتروني</label>
+                                            <input type="checkbox" id="systemEmailAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
+                                            <label for="systemEmailAlert" class="mr-2 block text-gray-700">البريد الإلكتروني</label>
                                         </div>
                                         <div class="flex items-center">
-                                            <input type="checkbox" id="globalSmsAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                                            <label for="globalSmsAlert" class="mr-2 block text-gray-700">رسالة SMS</label>
+                                            <input type="checkbox" id="systemSmsAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                                            <label for="systemSmsAlert" class="mr-2 block text-gray-700">رسالة SMS</label>
                                         </div>
                                         <div class="flex items-center">
-                                            <input type="checkbox" id="globalAppAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
-                                            <label for="globalAppAlert" class="mr-2 block text-gray-700">إشعار داخل التطبيق</label>
+                                            <input type="checkbox" id="systemAppAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
+                                            <label for="systemAppAlert" class="mr-2 block text-gray-700">إشعار داخل التطبيق</label>
                                         </div>
                                     </div>
                                 </div>
@@ -807,25 +803,41 @@
                     </div>
                     
                     <div class="bg-white rounded-lg shadow-md p-6">
-                        <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">نسخ احتياطي للنظام</h3>
+                        <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">نسخة احتياطية للنظام</h3>
                         
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center">
-                                <i class="fas fa-download text-4xl text-blue-500 mb-4"></i>
-                                <p class="text-gray-600 mb-4">قم بإنشاء نسخة احتياطية من جميع بيانات النظام</p>
-                                <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg" id="backupBtn">
-                                    إنشاء نسخة احتياطية
+                        <div class="space-y-4">
+                            <div class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-4 md:space-y-0">
+                                <button class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg flex items-center justify-center" id="createBackupBtn">
+                                    <i class="fas fa-database ml-2"></i>
+                                    <span>إنشاء نسخة احتياطية</span>
                                 </button>
+                                
+                                <div class="file-upload flex-1">
+                                    <label for="restoreBackup" class="file-upload-label border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center">
+                                        <i class="fas fa-upload text-3xl text-gray-400 mb-2"></i>
+                                        <span class="text-gray-500">استعادة نسخة احتياطية</span>
+                                        <span class="text-sm text-gray-400">(SQL, ZIP)</span>
+                                        <input type="file" id="restoreBackup" accept=".sql,.zip">
+                                    </label>
+                                </div>
                             </div>
                             
-                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center">
-                                <i class="fas fa-upload text-4xl text-green-500 mb-4"></i>
-                                <p class="text-gray-600 mb-4">استعادة البيانات من نسخة احتياطية سابقة</p>
-                                <div class="file-upload">
-                                    <label for="restoreFile" class="bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg cursor-pointer">
-                                        استعادة النسخة الاحتياطية
-                                    </label>
-                                    <input type="file" id="restoreFile" class="hidden">
+                            <div class="pt-4 border-t border-gray-200">
+                                <h4 class="text-md font-medium text-gray-700 mb-2">النسخ الاحتياطية المتاحة</h4>
+                                <div class="overflow-x-auto">
+                                    <table class="min-w-full divide-y divide-gray-200">
+                                        <thead class="bg-gray-50">
+                                            <tr>
+                                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم الملف</th>
+                                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">حجم الملف</th>
+                                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاريخ الإنشاء</th>
+                                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجراءات</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody class="bg-white divide-y divide-gray-200" id="backupFilesTable">
+                                            <!-- Backup files will be loaded here via AJAX -->
+                                        </tbody>
+                                    </table>
                                 </div>
                             </div>
                         </div>
@@ -834,215 +846,384 @@
             </main>
         </div>
     </div>
-    
-    <!-- Document Preview Modal -->
-    <div id="documentPreviewModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-auto">
-            <div class="p-4 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white z-10">
-                <h3 class="text-lg font-semibold text-gray-800" id="documentPreviewTitle">معاينة المستند</h3>
-                <button id="closeDocumentPreview" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            
-            <div class="p-4" id="documentPreviewContent">
-                <!-- Document content will be shown here -->
+
+    <!-- View Worker Modal -->
+    <div id="viewWorkerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold text-gray-800" id="viewWorkerName">عرض بيانات العامل</h3>
+                    <button id="closeViewWorkerModal" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                    <div class="col-span-1 flex flex-col items-center">
+                        <img id="viewWorkerPhoto" src="https://via.placeholder.com/200" alt="Worker Photo" class="worker-photo rounded-lg mb-4">
+                        <div class="w-full bg-gray-100 p-4 rounded-lg">
+                            <h4 class="font-medium text-gray-700 mb-2">معلومات الاتصال</h4>
+                            <p class="text-sm" id="viewWorkerPhone">الهاتف: </p>
+                            <p class="text-sm" id="viewWorkerEmail">البريد الإلكتروني: </p>
+                            <p class="text-sm" id="viewWorkerAddress">العنوان: </p>
+                        </div>
+                    </div>
+                    
+                    <div class="col-span-2">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                            <div class="bg-gray-100 p-4 rounded-lg">
+                                <h4 class="font-medium text-gray-700 mb-2">البيانات الشخصية</h4>
+                                <p class="text-sm" id="viewWorkerNationality">الجنسية: </p>
+                                <p class="text-sm" id="viewWorkerBirthDate">تاريخ الميلاد: </p>
+                            </div>
+                            
+                            <div class="bg-gray-100 p-4 rounded-lg">
+                                <h4 class="font-medium text-gray-700 mb-2">بيانات العمل</h4>
+                                <p class="text-sm" id="viewWorkerWorkType">آلية العمل: </p>
+                                <p class="text-sm" id="viewWorkerArrivalAirport">مطار الوصول: </p>
+                            </div>
+                        </div>
+                        
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                            <div class="bg-blue-50 p-4 rounded-lg">
+                                <h4 class="font-medium text-blue-700 mb-2">جواز السفر</h4>
+                                <p class="text-sm" id="viewWorkerPassportNumber">الرقم: </p>
+                                <p class="text-sm" id="viewWorkerPassportIssueDate">تاريخ الإصدار: </p>
+                                <p class="text-sm" id="viewWorkerPassportExpiryDate">تاريخ الانتهاء: </p>
+                                <p class="text-sm font-medium" id="viewWorkerPassportStatus">الحالة: </p>
+                            </div>
+                            
+                            <div class="bg-yellow-50 p-4 rounded-lg">
+                                <h4 class="font-medium text-yellow-700 mb-2">إقامة العمل</h4>
+                                <p class="text-sm" id="viewWorkerResidenceNumber">الرقم: </p>
+                                <p class="text-sm" id="viewWorkerResidenceIssueDate">تاريخ الإصدار: </p>
+                                <p class="text-sm" id="viewWorkerResidenceExpiryDate">تاريخ الانتهاء: </p>
+                                <p class="text-sm font-medium" id="viewWorkerResidenceStatus">الحالة: </p>
+                            </div>
+                            
+                            <div class="bg-purple-50 p-4 rounded-lg">
+                                <h4 class="font-medium text-purple-700 mb-2">بطاقة العمل</h4>
+                                <p class="text-sm" id="viewWorkerWorkCardNumber">الرقم: </p>
+                                <p class="text-sm" id="viewWorkerWorkCardIssueDate">تاريخ الإصدار: </p>
+                                <p class="text-sm" id="viewWorkerWorkCardExpiryDate">تاريخ الانتهاء: </p>
+                                <p class="text-sm font-medium" id="viewWorkerWorkCardStatus">الحالة: </p>
+                            </div>
+                        </div>
+                        
+                        <div class="bg-white border border-gray-200 rounded-lg p-4">
+                            <h4 class="font-medium text-gray-700 mb-2">المستندات المرفقة</h4>
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="viewWorkerDocuments">
+                                <!-- Documents will be loaded here -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex justify-end mt-4">
+                    <button id="printWorkerBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center mr-2">
+                        <i class="fas fa-print ml-2"></i>
+                        <span>طباعة</span>
+                    </button>
+                    <button id="closeViewWorkerBtn" class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded-lg">
+                        إغلاق
+                    </button>
+                </div>
             </div>
-            
-            <div class="p-4 border-t border-gray-200 flex justify-end sticky bottom-0 bg-white">
-                <button class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded-lg mr-2" id="printDocumentBtn">
-                    <i class="fas fa-print ml-2"></i>
-                    طباعة
-                </button>
-                <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg" id="downloadDocumentBtn">
-                    <i class="fas fa-download ml-2"></i>
-                    تحميل
-                </button>
+        </div>
+    </div>
+
+    <!-- View Document Modal -->
+    <div id="viewDocumentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold text-gray-800" id="viewDocumentTitle">عرض المستند</h3>
+                    <button id="closeViewDocumentModal" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                
+                <div class="mb-4">
+                    <div class="flex items-center space-x-4 mb-2">
+                        <div class="bg-gray-100 p-2 rounded-lg">
+                            <i class="fas fa-user text-blue-500"></i>
+                            <span class="mr-2" id="viewDocumentWorkerName">أحمد محمد</span>
+                        </div>
+                        <div class="bg-gray-100 p-2 rounded-lg">
+                            <i class="fas fa-id-card text-yellow-500"></i>
+                            <span class="mr-2" id="viewDocumentNumber">R987654</span>
+                        </div>
+                        <div class="bg-gray-100 p-2 rounded-lg">
+                            <i class="fas fa-calendar-alt text-purple-500"></i>
+                            <span class="mr-2" id="viewDocumentExpiryDate">15/09/2023</span>
+                        </div>
+                    </div>
+                    
+                    <div id="viewDocumentStatus" class="inline-block px-3 py-1 rounded-full text-sm font-medium">
+                        <!-- Status badge will be added here -->
+                    </div>
+                </div>
+                
+                <div class="flex justify-center mb-4">
+                    <img id="viewDocumentImage" src="https://via.placeholder.com/800x600" alt="Document" class="max-w-full h-auto rounded-lg border border-gray-200">
+                </div>
+                
+                <div class="flex justify-end mt-4">
+                    <button id="downloadDocumentBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center mr-2">
+                        <i class="fas fa-download ml-2"></i>
+                        <span>تحميل</span>
+                    </button>
+                    <button id="closeViewDocumentBtn" class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded-lg">
+                        إغلاق
+                    </button>
+                </div>
             </div>
         </div>
     </div>
-    
+
     <!-- Confirmation Modal -->
-    <div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+    <div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
         <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
-            <div class="p-4 border-b border-gray-200">
-                <h3 class="text-lg font-semibold text-gray-800" id="confirmationTitle">تأكيد الإجراء</h3>
-            </div>
-            
-            <div class="p-4">
-                <p class="text-gray-700" id="confirmationMessage">هل أنت متأكد من أنك تريد تنفيذ هذا الإجراء؟</p>
-            </div>
-            
-            <div class="p-4 border-t border-gray-200 flex justify-end">
-                <button class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded-lg mr-2" id="cancelActionBtn">
-                    إلغاء
-                </button>
-                <button class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg" id="confirmActionBtn">
-                    تأكيد
-                </button>
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold text-gray-800" id="confirmationTitle">تأكيد الإجراء</h3>
+                    <button id="closeConfirmationModal" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                
+                <p class="mb-6 text-gray-700" id="confirmationMessage">هل أنت متأكد من رغبتك في حذف هذا العامل؟</p>
+                
+                <div class="flex justify-end space-x-4">
+                    <button id="cancelConfirmationBtn" class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded-lg">
+                        إلغاء
+                    </button>
+                    <button id="confirmActionBtn" class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg">
+                        تأكيد
+                    </button>
+                </div>
             </div>
         </div>
     </div>
-    
-    <!-- Worker Details Modal -->
-    <div id="workerDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-auto">
-            <div class="p-4 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white z-10">
-                <h3 class="text-lg font-semibold text-gray-800">تفاصيل العامل</h3>
-                <button id="closeWorkerDetails" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            
-            <div class="p-4" id="workerDetailsContent">
-                <!-- Worker details will be shown here -->
-            </div>
-            
-            <div class="p-4 border-t border-gray-200 flex justify-end sticky bottom-0 bg-white">
-                <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg" id="editWorkerBtn">
-                    <i class="fas fa-edit ml-2"></i>
-                    تعديل
-                </button>
-            </div>
+
+    <!-- Loading Spinner -->
+    <div id="loadingSpinner" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white p-6 rounded-lg shadow-xl flex flex-col items-center">
+            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
+            <p class="text-gray-700">جاري التحميل...</p>
         </div>
     </div>
-    
+
     <!-- Success Toast -->
-    <div id="successToast" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg hidden flex items-center">
+    <div id="successToast" class="fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center transform translate-x-full transition-transform duration-300 z-50">
         <i class="fas fa-check-circle mr-2"></i>
-        <span id="successMessage">تم تنفيذ العملية بنجاح</span>
+        <span id="successToastMessage">تمت العملية بنجاح</span>
     </div>
-    
+
     <!-- Error Toast -->
-    <div id="errorToast" class="fixed bottom-4 right-4 bg-red-500 text-white px-4 py-2 rounded-lg shadow-lg hidden flex items-center">
+    <div id="errorToast" class="fixed top-4 right-4 bg-red-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center transform translate-x-full transition-transform duration-300 z-50">
         <i class="fas fa-exclamation-circle mr-2"></i>
-        <span id="errorMessage">حدث خطأ أثناء تنفيذ العملية</span>
+        <span id="errorToastMessage">حدث خطأ ما</span>
     </div>
-    
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
-        // Database Simulation
-        const database = {
-            workers: [
-                {
-                    id: 1,
-                    name: "أحمد محمد",
-                    photo: "https://randomuser.me/api/portraits/men/1.jpg",
-                    nationality: "الهند",
-                    birthDate: "1985-05-15",
-                    phone: "1234567890",
-                    email: "ahmed@example.com",
-                    address: "شارع النخيل، بغداد",
-                    passport: {
-                        number: "A12345678",
-                        issueDate: "2020-01-10",
-                        expiryDate: "2025-01-10",
-                        images: ["passport1.jpg", "passport2.jpg"]
-                    },
-                    residence: {
-                        number: "R987654",
-                        issueDate: "2021-03-15",
-                        expiryDate: "2023-09-15",
-                        images: ["residence1.jpg"]
-                    },
-                    workCard: {
-                        number: "W456789",
-                        issueDate: "2021-04-01",
-                        expiryDate: "2023-10-01",
-                        images: ["workcard1.jpg"]
-                    },
-                    arrivalAirport: "مطار بغداد الدولي",
-                    workType: "دوام كامل",
-                    alertSettings: {
-                        passport: true,
-                        residence: true,
-                        workCard: true,
-                        email: true,
-                        sms: false,
-                        app: true
-                    },
-                    createdAt: "2021-03-10T08:00:00Z"
-                },
-                {
-                    id: 2,
-                    name: "علي حسن",
-                    photo: "https://randomuser.me/api/portraits/men/2.jpg",
-                    nationality: "باكستان",
-                    birthDate: "1990-08-20",
-                    phone: "9876543210",
-                    email: "ali@example.com",
-                    address: "حي الزهور، كركوك",
-                    passport: {
-                        number: "B87654321",
-                        issueDate: "2019-11-05",
-                        expiryDate: "2024-11-05",
-                        images: ["passport3.jpg"]
-                    },
-                    residence: {
-                        number: "R123456",
-                        issueDate: "2022-01-20",
-                        expiryDate: "2023-07-20",
-                        images: ["residence2.jpg", "residence3.jpg"]
-                    },
-                    workCard: {
-                        number: "W123456",
-                        issueDate: "2022-02-01",
-                        expiryDate: "2023-08-01",
-                        images: ["workcard2.jpg"]
-                    },
-                    arrivalAirport: "مطار أربيل الدولي",
-                    workType: "عقد مؤقت",
-                    alertSettings: {
-                        passport: true,
-                        residence: true,
-                        workCard: true,
-                        email: true,
-                        sms: true,
-                        app: true
-                    },
-                    createdAt: "2022-01-15T10:30:00Z"
-                },
-                {
-                    id: 3,
-                    name: "محمد عبدالله",
-                    photo: "https://randomuser.me/api/portraits/men/3.jpg",
-                    nationality: "بنغلاديش",
-                    birthDate: "1988-12-10",
-                    phone: "5555555555",
-                    email: "mohammed@example.com",
-                    address: "شارع السلام، السليمانية",
-                    passport: {
-                        number: "C55555555",
-                        issueDate: "2021-06-15",
-                        expiryDate: "2026-06-15",
-                        images: ["passport4.jpg"]
-                    },
-                    residence: {
-                        number: "R555555",
-                        issueDate: "2021-08-10",
-                        expiryDate: "2023-08-10",
-                        images: ["residence4.jpg"]
-                    },
-                    workCard: {
-                        number: "W555555",
-                        issueDate: "2021-09-01",
-                        expiryDate: "2023-09-01",
-                        images: ["workcard3.jpg"]
-                    },
-                    arrivalAirport: "مطار السليمانية الدولي",
-                    workType: "دوام جزئي",
-                    alertSettings: {
-                        passport: true,
-                        residence: true,
-                        workCard: true,
-                        email: false,
-                        sms: false,
-                        app: true
-                    },
-                    createdAt: "2021-07-20T14:15:00Z"
-                }
-            ],
-            notifications: [
-                {
-                    id: 1,
-                    worker
+        // Database configuration
+        const dbConfig = {
+            host: 'localhost',
+            user: 'root',
+            password: '',
+            database: 'workers_management'
+        };
+
+        // Global variables
+        let currentWorkerId = null;
+        let currentDocumentId = null;
+        let currentAction = null;
+        let workersPage = 1;
+        let documentsPage = 1;
+        let notificationsPage = 1;
+        const itemsPerPage = 10;
+
+        // DOM Ready
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize the dashboard
+            loadDashboardData();
+            loadRecentWorkers();
+            loadRecentAlerts();
+
+            // Setup event listeners
+            setupEventListeners();
+        });
+
+        // Setup all event listeners
+        function setupEventListeners() {
+            // Sidebar toggle
+            document.getElementById('toggleSidebar').addEventListener('click', toggleSidebar);
+
+            // Sidebar navigation
+            const sidebarLinks = document.querySelectorAll('.sidebar-link');
+            sidebarLinks.forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const sectionId = this.getAttribute('data-section');
+                    showSection(sectionId);
+                });
+            });
+
+            // Workers section
+            document.getElementById('addWorkerBtn').addEventListener('click', showAddWorkerForm);
+            document.getElementById('backToWorkersBtn').addEventListener('click', showWorkersSection);
+            document.getElementById('cancelWorkerBtn').addEventListener('click', showWorkersSection);
+            document.getElementById('workerForm').addEventListener('submit', saveWorker);
+            document.getElementById('workerFilter').addEventListener('change', filterWorkers);
+            document.getElementById('workerSearch').addEventListener('input', searchWorkers);
+            document.getElementById('workersPrevPage').addEventListener('click', () => changePage('workers', -1));
+            document.getElementById('workersNextPage').addEventListener('click', () => changePage('workers', 1));
+
+            // Documents section
+            document.getElementById('exportDocumentsBtn').addEventListener('click', exportDocuments);
+            document.getElementById('documentFilter').addEventListener('change', filterDocuments);
+            document.getElementById('documentSearch').addEventListener('input', searchDocuments);
+            document.getElementById('documentsPrevPage').addEventListener('click', () => changePage('documents', -1));
+            document.getElementById('documentsNextPage').addEventListener('click', () => changePage('documents', 1));
+
+            // Notifications section
+            document.getElementById('markAllAsReadBtn').addEventListener('click', markAllAsRead);
+            document.getElementById('notificationFilter').addEventListener('change', filterNotifications);
+            document.getElementById('notificationSearch').addEventListener('input', searchNotifications);
+            document.getElementById('notificationsPrevPage').addEventListener('click', () => changePage('notifications', -1));
+            document.getElementById('notificationsNextPage').addEventListener('click', () => changePage('notifications', 1));
+
+            // Reports section
+            document.getElementById('generateReportBtn').addEventListener('click', generateReport);
+
+            // Settings section
+            document.getElementById('alertSettingsForm').addEventListener('submit', saveAlertSettings);
+            document.getElementById('createBackupBtn').addEventListener('click', createBackup);
+            document.getElementById('restoreBackup').addEventListener('change', restoreBackup);
+
+            // Modals
+            document.getElementById('closeViewWorkerModal').addEventListener('click', closeViewWorkerModal);
+            document.getElementById('closeViewWorkerBtn').addEventListener('click', closeViewWorkerModal);
+            document.getElementById('printWorkerBtn').addEventListener('click', printWorker);
+            document.getElementById('closeViewDocumentModal').addEventListener('click', closeViewDocumentModal);
+            document.getElementById('closeViewDocumentBtn').addEventListener('click', closeViewDocumentModal);
+            document.getElementById('downloadDocumentBtn').addEventListener('click', downloadDocument);
+            document.getElementById('closeConfirmationModal').addEventListener('click', closeConfirmationModal);
+            document.getElementById('cancelConfirmationBtn').addEventListener('click', closeConfirmationModal);
+            document.getElementById('confirmActionBtn').addEventListener('click', confirmAction);
+
+            // File uploads
+            document.getElementById('workerPhoto').addEventListener('change', handleWorkerPhotoUpload);
+            document.getElementById('passportImage').addEventListener('change', handlePassportImageUpload);
+            document.getElementById('residenceImage').addEventListener('change', handleResidenceImageUpload);
+            document.getElementById('workCardImage').addEventListener('change', handleWorkCardImageUpload);
+        }
+
+        // Toggle sidebar
+        function toggleSidebar() {
+            document.querySelector('.sidebar').classList.toggle('collapsed');
+        }
+
+        // Show specific section
+        function showSection(sectionId) {
+            // Hide all sections
+            document.querySelectorAll('main > div').forEach(section => {
+                section.classList.add('hidden');
+            });
+
+            // Show the selected section
+            document.getElementById(sectionId).classList.remove('hidden');
+
+            // Update page title
+            const pageTitle = document.getElementById('pageTitle');
+            switch(sectionId) {
+                case 'dashboardSection':
+                    pageTitle.textContent = 'نظام إدارة بيانات العمال الأجانب';
+                    break;
+                case 'workersSection':
+                    pageTitle.textContent = 'إدارة العمال الأجانب';
+                    loadWorkers();
+                    break;
+                case 'documentsSection':
+                    pageTitle.textContent = 'إدارة المستندات';
+                    loadDocuments();
+                    break;
+                case 'notificationsSection':
+                    pageTitle.textContent = 'إدارة التنبيهات';
+                    loadNotifications();
+                    break;
+                case 'reportsSection':
+                    pageTitle.textContent = 'التقارير والإحصائيات';
+                    loadReports();
+                    break;
+                case 'settingsSection':
+                    pageTitle.textContent = 'إعدادات النظام';
+                    loadSettings();
+                    break;
+            }
+        }
+
+        // Show workers section
+        function showWorkersSection() {
+            showSection('workersSection');
+        }
+
+        // Show add worker form
+        function showAddWorkerForm() {
+            // Reset form
+            document.getElementById('workerForm').reset();
+            document.getElementById('workerId').value = '';
+            document.getElementById('workerPhotoPreview').src = 'https://via.placeholder.com/150';
+            document.getElementById('passportImagesContainer').innerHTML = '';
+            document.getElementById('residenceImagesContainer').innerHTML = '';
+            document.getElementById('workCardImagesContainer').innerHTML = '';
+            document.getElementById('formTitle').textContent = 'إضافة عامل جديد';
+
+            // Show form section
+            document.getElementById('workersSection').classList.add('hidden');
+            document.getElementById('workerFormSection').classList.remove('hidden');
+        }
+
+        // Show edit worker form
+        function showEditWorkerForm(workerId) {
+            // Show loading spinner
+            showLoading();
+
+            // Simulate API call to get worker data
+            setTimeout(() => {
+                // In a real app, you would fetch the worker data from the server
+                const workerData = {
+                    id: workerId,
+                    name: 'أحمد محمد',
+                    nationality: 'الهند',
+                    birthDate: '1990-05-15',
+                    phone: '+9647701234567',
+                    email: 'ahmed@example.com',
+                    address: 'كركوك - العراق',
+                    passportNumber: 'A12345678',
+                    passportIssueDate: '2020-01-10',
+                    passportExpiryDate: '2025-01-10',
+                    residenceNumber: 'R987654',
+                    residenceIssueDate: '2022-09-15',
+                    residenceExpiryDate: '2023-09-15',
+                    workCardNumber: 'W456789',
+                    workCardIssueDate: '2022-10-01',
+                    workCardExpiryDate: '2023-10-01',
+                    arrivalAirport: 'مطار بغداد الدولي',
+                    workType: 'دوام كامل',
+                    passportAlert: true,
+                    residenceAlert: true,
+                    workCardAlert: true,
+                    emailAlert: true,
+                    smsAlert: false,
+                    appAlert: true
+                };
+
+                // Fill the form with worker data
+                document.getElementById('workerId').value = workerData.id;
+                document.getElementById('workerName').value = workerData.name;
+                document.getElementById('workerNationality').value = workerData.nationality;
+               
 </html>

prompts.txt

@@ -0,0 +1,2 @@
+maker sure all buttons are working because in not working when i press it and need to create the other pages 
+connect this project with database and make work 100 percent