Hugging Face's logo

Spaces:
samerzaher80
/
sam
Running

App Files Community
sam / index.html
samerzaher80's picture
samerzaher80
Add 2 files
47ce8d8 verified
raw
history blame contribute delete
81.1 kB
 <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نظام إدارة بيانات العمال الأجانب - زهرة كركوك</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
body {
font-family: 'Tajawal', sans-serif;
}
.sidebar {
transition: all 0.3s ease;
}
.sidebar.collapsed {
width: 70px;
}
.sidebar.collapsed .sidebar-text {
display: none;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
font-size: 10px;
background-color: #ef4444;
}
.document-expiry-warning {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.file-upload input[type="file"] {
display: none;
}
.file-upload-label {
cursor: pointer;
transition: all 0.3s ease;
}
.file-upload-label:hover {
background-color: #e5e7eb;
}
.worker-photo {
width: 120px;
height: 120px;
object-fit: cover;
}
.document-thumbnail {
width: 80px;
height: 80px;
object-fit: cover;
}
</style>
</head>
<body class="bg-gray-100">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-blue-800 text-white w-64 flex flex-col">
<div class="p-4 flex items-center justify-between border-b border-blue-700">
<div class="flex items-center">
<img src="https://via.placeholder.com/40" alt="Logo" class="h-8 w-8 rounded-full">
<span class="sidebar-text mr-2 font-bold text-lg">زهرة كركوك</span>
</div>
<button id="toggleSidebar" class="text-white focus:outline-none">
<i class="fas fa-bars"></i>
</button>
</div>
<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 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 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 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 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">3</span>
</a>
<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 sidebar-link" data-section="settingsSection">
<i class="fas fa-cog"></i>
<span class="sidebar-text mr-3">الإعدادات</span>
</a>
</nav>
</div>
<div class="p-4 border-t border-blue-700">
<div class="flex items-center">
<img src="https://via.placeholder.com/40" alt="User" class="h-10 w-10 rounded-full">
<div class="sidebar-text mr-3">
<div class="font-medium">مدير النظام</div>
<div class="text-sm text-blue-200">admin@zahrakirkuk.com</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Top Navigation -->
<header class="bg-white shadow-sm">
<div class="flex justify-between items-center p-4">
<h1 class="text-xl font-bold text-gray-800" id="pageTitle">نظام إدارة بيانات العمال الأجانب</h1>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="بحث..." class="border border-gray-300 rounded-lg py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500" id="searchInput">
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
</div>
<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">3</span>
</button>
<div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
<i class="fas fa-user text-blue-600"></i>
</div>
</div>
</div>
</header>
<!-- Content Sections -->
<main class="p-6">
<!-- Dashboard Section -->
<div id="dashboardSection">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">إجمالي العمال</p>
<h3 class="text-2xl font-bold" id="totalWorkers">0</h3>
</div>
<div class="bg-blue-100 p-3 rounded-full">
<i class="fas fa-users text-blue-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">جوازات منتهية</p>
<h3 class="text-2xl font-bold" id="expiredPassports">0</h3>
</div>
<div class="bg-red-100 p-3 rounded-full">
<i class="fas fa-passport text-red-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">إقامات منتهية</p>
<h3 class="text-2xl font-bold" id="expiredResidences">0</h3>
</div>
<div class="bg-yellow-100 p-3 rounded-full">
<i class="fas fa-id-card text-yellow-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">بطاقات عمل منتهية</p>
<h3 class="text-2xl font-bold" id="expiredWorkCards">0</h3>
</div>
<div class="bg-purple-100 p-3 rounded-full">
<i class="fas fa-id-badge text-purple-600 text-xl"></i>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold text-gray-700">التنبيهات القريبة</h3>
<a href="#" class="text-blue-600 hover:text-blue-800" id="viewAllAlerts">عرض الكل</a>
</div>
<div class="space-y-3" id="recentAlerts">
<!-- Alerts will be loaded here via AJAX -->
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-semibold mb-4 text-gray-700">أحدث العمال المسجلين</h3>
<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>
<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="recentWorkersTable">
<!-- Recent workers will be loaded here via AJAX -->
</tbody>
</table>
</div>
</div>
</div>
<!-- Workers Management Section -->
<div id="workersSection" class="hidden">
<div class="mb-6 flex justify-between items-center">
<h2 class="text-2xl font-bold text-gray-800">إدارة العمال الأجانب</h2>
<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center" id="addWorkerBtn">
<i class="fas fa-plus ml-2"></i>
<span>إضافة عامل جديد</span>
</button>
</div>
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<div class="mb-4 md:mb-0">
<label for="workerFilter" class="block text-gray-700 mb-2">تصفية حسب:</label>
<select id="workerFilter" class="border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="all">جميع العمال</option>
<option value="expiring">وثائق قريبة الانتهاء</option>
<option value="expired">وثائق منتهية</option>
<option value="active">وثائق سارية</option>
</select>
</div>
<div class="relative">
<input type="text" placeholder="بحث عن عامل..." class="border border-gray-300 rounded-lg py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500" id="workerSearch">
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
</div>
</div>
<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>
<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="workersTable">
<!-- Workers will be loaded here via AJAX -->
</tbody>
</table>
</div>
<div class="flex items-center justify-between mt-4">
<div class="text-sm text-gray-500">
عرض <span id="workersStart">1</span> إلى <span id="workersEnd">10</span> من <span id="workersTotal">0</span> عامل
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="workersPrevPage">
<i class="fas fa-chevron-right"></i>
</button>
<button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="workersNextPage">
<i class="fas fa-chevron-left"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Add/Edit Worker Section -->
<div id="workerFormSection" class="hidden">
<div class="mb-6 flex justify-between items-center">
<h2 class="text-2xl font-bold text-gray-800" id="formTitle">إضافة عامل جديد</h2>
<button class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded-lg flex items-center" id="backToWorkersBtn">
<i class="fas fa-arrow-left ml-2"></i>
<span>العودة إلى القائمة</span>
</button>
</div>
<form id="workerForm" class="bg-white rounded-lg shadow-md p-6 mb-6">
<input type="hidden" id="workerId">
<div class="flex flex-col md:flex-row gap-6 mb-6">
<div class="md:w-1/4 flex flex-col items-center">
<div class="mb-4">
<img id="workerPhotoPreview" src="https://via.placeholder.com/150" alt="Worker Photo" class="worker-photo rounded-lg mb-2">
</div>
<div class="file-upload w-full">
<label for="workerPhoto" 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-camera text-3xl text-gray-400 mb-2"></i>
<span class="text-gray-500">اضغط لرفع صورة العامل</span>
<span class="text-sm text-gray-400">(JPG, PNG)</span>
<input type="file" id="workerPhoto" accept=".jpg,.jpeg,.png">
</label>
</div>
</div>
<div class="md:w-3/4">
<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 lg:grid-cols-3 gap-6">
<div>
<label for="workerName" class="block text-gray-700 mb-2">اسم العامل</label>
<input type="text" id="workerName" 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="workerNationality" class="block text-gray-700 mb-2">الجنسية</label>
<select id="workerNationality" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<option value="">اختر الجنسية</option>
<option value="الهند">الهند</option>
<option value="بنغلاديش">بنغلاديش</option>
<option value="باكستان">باكستان</option>
<option value="نيبال">نيبال</option>
<option value="سريلانكا">سريلانكا</option>
<option value="الفلبين">الفلبين</option>
</select>
</div>
<div>
<label for="workerBirthDate" class="block text-gray-700 mb-2">تاريخ الميلاد</label>
<input type="date" id="workerBirthDate" 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="workerPhone" class="block text-gray-700 mb-2">رقم الهاتف</label>
<input type="tel" id="workerPhone" 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="workerEmail" class="block text-gray-700 mb-2">البريد الإلكتروني</label>
<input type="email" id="workerEmail" 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="workerAddress" class="block text-gray-700 mb-2">العنوان</label>
<input type="text" id="workerAddress" 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>
</div>
</div>
<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>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>
<label for="passportNumber" class="block text-gray-700 mb-2">رقم الجواز</label>
<input type="text" id="passportNumber" 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="passportIssueDate" class="block text-gray-700 mb-2">تاريخ إصدار الجواز</label>
<input type="date" id="passportIssueDate" 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="passportExpiryDate" class="block text-gray-700 mb-2">تاريخ انتهاء الجواز</label>
<input type="date" id="passportExpiryDate" 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">
<label class="block text-gray-700 mb-2">صورة الجواز</label>
<div class="flex flex-wrap gap-4" id="passportImagesContainer">
<!-- Passport images will be added here -->
</div>
<div class="file-upload mt-2">
<label for="passportImage" 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-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
<span class="text-gray-500">اضغط لرفع صورة الجواز</span>
<span class="text-sm text-gray-400">(PDF, JPG, PNG)</span>
<input type="file" id="passportImage" accept=".pdf,.jpg,.jpeg,.png" multiple>
</label>
</div>
</div>
</div>
</div>
<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>
<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="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="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="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">
<label class="block text-gray-700 mb-2">صورة الإقامة</label>
<div class="flex flex-wrap gap-4" id="residenceImagesContainer">
<!-- Residence images will be added here -->
</div>
<div class="file-upload mt-2">
<label for="residenceImage" 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-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
<span class="text-gray-500">اضغط لرفع صورة الإقامة</span>
<span class="text-sm text-gray-400">(PDF, JPG, PNG)</span>
<input type="file" id="residenceImage" accept=".pdf,.jpg,.jpeg,.png" multiple>
</label>
</div>
</div>
</div>
</div>
<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>
<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="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="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="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="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="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>
<option value="عقد مؤقت">عقد مؤقت</option>
</select>
</div>
<div class="md:col-span-3">
<label class="block text-gray-700 mb-2">صورة بطاقة العمل</label>
<div class="flex flex-wrap gap-4" id="workCardImagesContainer">
<!-- Work card images will be added here -->
</div>
<div class="file-upload mt-2">
<label for="workCardImage" 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-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
<span class="text-gray-500">اضغط لرفع صورة بطاقة العمل</span>
<span class="text-sm text-gray-400">(PDF, JPG, PNG)</span>
<input type="file" id="workCardImage" accept=".pdf,.jpg,.jpeg,.png" multiple>
</label>
</div>
</div>
</div>
</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>
<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" id="passportAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
<label for="passportAlert" class="mr-2 block text-gray-700">تنبيه قبل انتهاء الجواز بشهر</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="residenceAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
<label for="residenceAlert" class="mr-2 block text-gray-700">تنبيه قبل انتهاء الإقامة بشهر</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="workCardAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
<label for="workCardAlert" class="mr-2 block text-gray-700">تنبيه قبل انتهاء بطاقة العمل بشهر</label>
</div>
<div class="pt-4 border-t border-gray-200">
<label class="block text-gray-700 mb-2">طريقة إرسال التنبيهات</label>
<div class="space-y-2">
<div class="flex items-center">
<input type="checkbox" id="emailAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
<label for="emailAlert" class="mr-2 block text-gray-700">البريد الإلكتروني</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="smsAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="smsAlert" class="mr-2 block text-gray-700">رسالة SMS</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="appAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
<label for="appAlert" class="mr-2 block text-gray-700">إشعار داخل التطبيق</label>
</div>
</div>
</div>
</div>
</div>
<div class="mt-6 flex justify-end space-x-4">
<button type="button" class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-6 rounded-lg" id="cancelWorkerBtn">
إلغاء
</button>
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg">
حفظ البيانات
</button>
</div>
</form>
</div>
<!-- Documents Section -->
<div id="documentsSection" class="hidden">
<div class="mb-6 flex justify-between items-center">
<h2 class="text-2xl font-bold text-gray-800">إدارة المستندات</h2>
<div class="flex space-x-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center" id="exportDocumentsBtn">
<i class="fas fa-file-export ml-2"></i>
<span>تصدير المستندات</span>
</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<div class="mb-4 md:mb-0">
<label for="documentFilter" class="block text-gray-700 mb-2">تصفية حسب نوع المستند:</label>
<select id="documentFilter" class="border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="all">جميع المستندات</option>
<option value="passport">جوازات السفر</option>
<option value="residence">إقامات العمل</option>
<option value="workCard">بطاقات العمل</option>
</select>
</div>
<div class="relative">
<input type="text" placeholder="بحث في المستندات..." class="border border-gray-300 rounded-lg py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500" id="documentSearch">
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
</div>
</div>
<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>
<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="documentsTable">
<!-- Documents will be loaded here via AJAX -->
</tbody>
</table>
</div>
<div class="flex items-center justify-between mt-4">
<div class="text-sm text-gray-500">
عرض <span id="documentsStart">1</span> إلى <span id="documentsEnd">10</span> من <span id="documentsTotal">0</span> مستند
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="documentsPrevPage">
<i class="fas fa-chevron-right"></i>
</button>
<button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="documentsNextPage">
<i class="fas fa-chevron-left"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Notifications Section -->
<div id="notificationsSection" class="hidden">
<div class="mb-6 flex justify-between items-center">
<h2 class="text-2xl font-bold text-gray-800">إدارة التنبيهات</h2>
<div class="flex space-x-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center" id="markAllAsReadBtn">
<i class="fas fa-check-circle ml-2"></i>
<span>تعيين الكل كمقروء</span>
</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<div class="mb-4 md:mb-0">
<label for="notificationFilter" class="block text-gray-700 mb-2">تصفية حسب نوع التنبيه:</label>
<select id="notificationFilter" class="border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="all">جميع التنبيهات</option>
<option value="passport">جوازات السفر</option>
<option value="residence">إقامات العمل</option>
<option value="workCard">بطاقات العمل</option>
<option value="unread">غير مقروء</option>
<option value="read">مقروء</option>
</select>
</div>
<div class="relative">
<input type="text" placeholder="بحث في التنبيهات..." class="border border-gray-300 rounded-lg py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500" id="notificationSearch">
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
</div>
</div>
<div class="space-y-3" id="notificationsList">
<!-- Notifications will be loaded here via AJAX -->
</div>
<div class="flex items-center justify-between mt-4">
<div class="text-sm text-gray-500">
عرض <span id="notificationsStart">1</span> إلى <span id="notificationsEnd">10</span> من <span id="notificationsTotal">0</span> تنبيه
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="notificationsPrevPage">
<i class="fas fa-chevron-right"></i>
</button>
<button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="notificationsNextPage">
<i class="fas fa-chevron-left"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Reports Section -->
<div id="reportsSection" class="hidden">
<div class="mb-6 flex justify-between items-center">
<h2 class="text-2xl font-bold text-gray-800">التقارير والإحصائيات</h2>
<div class="flex space-x-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center" id="generateReportBtn">
<i class="fas fa-file-pdf ml-2"></i>
<span>تصدير تقرير</span>
</button>
</div>
</div>
<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 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 flex items-center justify-center" id="documentsStatusChart">
<!-- Chart will be loaded here via AJAX -->
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<h3 class="text-lg font-semibold mb-4 text-gray-700">الوثائق القريبة من الانتهاء</h3>
<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>
<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="expiringDocumentsTable">
<!-- Expiring documents will be loaded here via AJAX -->
</tbody>
</table>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-semibold mb-4 text-gray-700">إحصائيات الوثائق المنتهية</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="bg-blue-50 p-4 rounded-lg">
<h4 class="text-lg font-medium text-blue-800 mb-2">جوازات السفر المنتهية</h4>
<div class="flex justify-between items-center">
<span class="text-3xl font-bold" id="expiredPassportsCount">0</span>
<i class="fas fa-passport text-blue-500 text-4xl"></i>
</div>
</div>
<div class="bg-yellow-50 p-4 rounded-lg">
<h4 class="text-lg font-medium text-yellow-800 mb-2">إقامات العمل المنتهية</h4>
<div class="flex justify-between items-center">
<span class="text-3xl font-bold" id="expiredResidencesCount">0</span>
<i class="fas fa-id-card text-yellow-500 text-4xl"></i>
</div>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<h4 class="text-lg font-medium text-purple-800 mb-2">بطاقات العمل المنتهية</h4>
<div class="flex justify-between items-center">
<span class="text-3xl font-bold" id="expiredWorkCardsCount">0</span>
<i class="fas fa-id-badge text-purple-500 text-4xl"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Settings Section -->
<div id="settingsSection" class="hidden">
<div class="mb-6">
<h2 class="text-2xl font-bold text-gray-800">إعدادات النظام</h2>
</div>
<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="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-4">
<div>
<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-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-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>
<div class="pt-4 border-t border-gray-200">
<label class="block text-gray-700 mb-2">طرق إرسال التنبيهات</label>
<div class="space-y-2">
<div class="flex items-center">
<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="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="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>
<div class="pt-4 border-t border-gray-200">
<label for="adminEmail" class="block text-gray-700 mb-2">البريد الإلكتروني للمسؤول</label>
<input type="email" id="adminEmail" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="admin@zahrakirkuk.com">
</div>
</div>
<div class="mt-6 flex justify-end">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg">
حفظ الإعدادات
</button>
</div>
</form>
</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>
<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="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>
</div>
</div>
</main>
</div>
</div>
<!-- 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>
</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 z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md">
<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>
<!-- 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 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="successToastMessage">تمت العملية بنجاح</span>
</div>
<!-- Error Toast -->
<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="errorToastMessage">حدث خطأ ما</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 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>