Hugging Face's logo

Spaces:
81fr
/
tesstr
Running

App Files Community
tesstr / index.html
81fr's picture
81fr
Add 2 files
5b5a216 verified
raw
history blame contribute delete
79.6 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;900&display=swap');
body {
 font-family: 'Tajawal', sans-serif;
 background-color: #f8f9fa;
 }
.sidebar {
 transition: all 0.3s ease;
 }
.sidebar-link:hover {
 background-color: rgba(217, 119, 6, 0.1);
 }
.active-link {
 background-color: rgba(217, 119, 6, 0.2);
 border-right: 3px solid #d97706;
 }
.stat-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
.chart-container {
 height: 300px;
 }
.order-badge {
 font-size: 0.75rem;
 padding: 0.25rem 0.5rem;
 }
.product-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
.mode-switch {
 transition: all 0.3s ease;
 }
.mode-switch.active {
 background-color: #d97706;
 color: white;
 }
/* Modal Styles */
 .modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.5);
 z-index: 1000;
 justify-content: center;
 align-items: center;
 }
.modal-content {
 background-color: white;
 width: 90%;
 max-width: 500px;
 border-radius: 0.5rem;
 overflow: hidden;
 box-shadow: 0 10px 25px rgba(0,0,0,0.1);
 }
/* Image Upload Preview */
 .image-preview {
 width: 150px;
 height: 150px;
 border: 2px dashed #d1d5db;
 border-radius: 0.5rem;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 margin-bottom: 1rem;
 }
.image-preview img {
 max-width: 100%;
 max-height: 100%;
 }
 </style>
</head>
<body class="text-gray-800">
 <div class="flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div class="sidebar w-64 bg-amber-900 text-white flex-shrink-0 hidden md:block">
 <div class="p-4 border-b border-amber-800">
 <div class="flex items-center space-x-2 space-x-reverse">
 <div class="w-10 h-10 bg-amber-700 rounded-full flex items-center justify-center">
 <i class="fas fa-cookie-bite text-xl"></i>
 </div>
 <h1 class="text-xl font-bold">لوحة التحكم</h1>
 </div>
 </div>
<div class="p-4">
 <div class="flex bg-amber-800 rounded-lg overflow-hidden mb-6">
 <button id="admin-mode" class="mode-switch active flex-1 py-2 text-center font-medium">لوحة التحكم</button>
 <button id="store-mode" class="mode-switch flex-1 py-2 text-center font-medium">المتجر</button>
 </div>
<ul class="space-y-2 admin-menu">
 <li>
 <a href="#" class="sidebar-link active-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-tachometer-alt ml-2"></i>
 <span>الرئيسية</span>
 </a>
 </li>
 <li>
 <a href="#" id="products-link" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-shopping-bag ml-2"></i>
 <span>المنتجات</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-receipt ml-2"></i>
 <span>الطلبات</span>
 <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">5 جديد</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-users ml-2"></i>
 <span>العملاء</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-chart-line ml-2"></i>
 <span>التقارير</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-comments ml-2"></i>
 <span>التقييمات</span>
 <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">3 جديد</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-cog ml-2"></i>
 <span>الإعدادات</span>
 </a>
 </li>
 </ul>
<ul class="space-y-2 store-menu hidden">
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-home ml-2"></i>
 <span>الرئيسية</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-utensils ml-2"></i>
 <span>قائمة المنتجات</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-shopping-cart ml-2"></i>
 <span>سلة التسوق</span>
 <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">3</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-heart ml-2"></i>
 <span>المفضلة</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-history ml-2"></i>
 <span>طلباتي</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-user ml-2"></i>
 <span>حسابي</span>
 </a>
 </li>
 </ul>
<div class="mt-8 pt-4 border-t border-amber-800">
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-sign-out-alt ml-2"></i>
 <span>تسجيل الخروج</span>
 </a>
 </div>
 </div>
 </div>
<!-- Mobile Sidebar -->
 <div id="mobile-sidebar" class="sidebar fixed inset-y-0 right-0 w-64 bg-amber-900 text-white z-50 transform translate-x-full md:hidden">
 <div class="p-4 border-b border-amber-800 flex justify-between items-center">
 <div class="flex items-center space-x-2 space-x-reverse">
 <div class="w-10 h-10 bg-amber-700 rounded-full flex items-center justify-center">
 <i class="fas fa-cookie-bite text-xl"></i>
 </div>
 <h1 class="text-xl font-bold">لوحة التحكم</h1>
 </div>
 <button id="close-mobile-sidebar" class="text-white">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="p-4">
 <div class="flex bg-amber-800 rounded-lg overflow-hidden mb-6">
 <button id="mobile-admin-mode" class="mode-switch active flex-1 py-2 text-center font-medium">لوحة التحكم</button>
 <button id="mobile-store-mode" class="mode-switch flex-1 py-2 text-center font-medium">المتجر</button>
 </div>
<ul class="space-y-2 admin-menu">
 <li>
 <a href="#" class="sidebar-link active-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-tachometer-alt ml-2"></i>
 <span>الرئيسية</span>
 </a>
 </li>
 <li>
 <a href="#" id="mobile-products-link" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-shopping-bag ml-2"></i>
 <span>المنتجات</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-receipt ml-2"></i>
 <span>الطلبات</span>
 <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">5 جديد</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-users ml-2"></i>
 <span>العملاء</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-chart-line ml-2"></i>
 <span>التقارير</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-comments ml-2"></i>
 <span>التقييمات</span>
 <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">3 جديد</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-cog ml-2"></i>
 <span>الإعدادات</span>
 </a>
 </li>
 </ul>
<ul class="space-y-2 store-menu hidden">
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-home ml-2"></i>
 <span>الرئيسية</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-utensils ml-2"></i>
 <span>قائمة المنتجات</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-shopping-cart ml-2"></i>
 <span>سلة التسوق</span>
 <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">3</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-heart ml-2"></i>
 <span>المفضلة</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-history ml-2"></i>
 <span>طلباتي</span>
 </a>
 </li>
 <li>
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-user ml-2"></i>
 <span>حسابي</span>
 </a>
 </li>
 </ul>
<div class="mt-8 pt-4 border-t border-amber-800">
 <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition">
 <i class="fas fa-sign-out-alt ml-2"></i>
 <span>تسجيل الخروج</span>
 </a>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <div class="flex-1 overflow-auto">
 <!-- Top Navigation -->
 <header class="bg-white shadow-sm sticky top-0 z-40">
 <div class="px-4 py-3 flex justify-between items-center">
 <div class="flex items-center">
 <button id="mobile-menu-btn" class="md:hidden text-gray-600 mr-2">
 <i class="fas fa-bars text-xl"></i>
 </button>
 <h2 id="page-title" class="text-xl font-bold text-amber-900">لوحة التحكم</h2>
 </div>
<div class="flex items-center space-x-4 space-x-reverse">
 <div class="relative">
 <button id="notifications-btn" class="text-gray-600 hover:text-gray-900">
 <i class="fas fa-bell text-xl"></i>
 <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
 </button>
 </div>
 <div class="flex items-center space-x-2 space-x-reverse">
 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="صورة المدير" class="w-8 h-8 rounded-full">
 <span class="font-medium">أحمد محمد</span>
 </div>
 </div>
 </div>
 </header>
<!-- Admin Dashboard Content -->
 <div id="admin-content">
 <!-- Stats Cards -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
 <div class="stat-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-gray-500">إجمالي المبيعات</p>
 <h3 class="text-2xl font-bold text-amber-700">2,450,000 د.ع</h3>
 <p class="text-green-500 text-sm mt-1">
 <i class="fas fa-arrow-up mr-1"></i> 12% عن الشهر الماضي
 </p>
 </div>
 <div class="bg-amber-100 p-3 rounded-full text-amber-700">
 <i class="fas fa-wallet text-xl"></i>
 </div>
 </div>
 </div>
<div class="stat-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-gray-500">عدد الطلبات</p>
 <h3 class="text-2xl font-bold text-amber-700">184</h3>
 <p class="text-green-500 text-sm mt-1">
 <i class="fas fa-arrow-up mr-1"></i> 8% عن الشهر الماضي
 </p>
 </div>
 <div class="bg-amber-100 p-3 rounded-full text-amber-700">
 <i class="fas fa-shopping-bag text-xl"></i>
 </div>
 </div>
 </div>
<div class="stat-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-gray-500">عدد العملاء</p>
 <h3 class="text-2xl font-bold text-amber-700">127</h3>
 <p class="text-green-500 text-sm mt-1">
 <i class="fas fa-arrow-up mr-1"></i> 5% عن الشهر الماضي
 </p>
 </div>
 <div class="bg-amber-100 p-3 rounded-full text-amber-700">
 <i class="fas fa-users text-xl"></i>
 </div>
 </div>
 </div>
<div class="stat-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-gray-500">متوسط قيمة الطلب</p>
 <h3 class="text-2xl font-bold text-amber-700">13,315 д.ع</h3>
 <p class="text-red-500 text-sm mt-1">
 <i class="fas fa-arrow-down mr-1"></i> 3% عن الشهر الماضي
 </p>
 </div>
 <div class="bg-amber-100 p-3 rounded-full text-amber-700">
 <i class="fas fa-chart-pie text-xl"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Products Management Section -->
 <div id="products-management" class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-6">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-bold">إدارة المنتجات</h3>
 <button id="add-product-btn" class="bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition">
 <i class="fas fa-plus ml-2"></i> إضافة منتج جديد
 </button>
 </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-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الصورة</th>
 <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم المنتج</th>
 <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">السعر</th>
 <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الكمية</th>
 <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
 <th class="px-4 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="products-table-body">
 <!-- Products will be added here dynamically -->
 </tbody>
 </table>
 </div>
 </div>
<!-- Charts Row -->
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
 <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-bold">مبيعات الشهر</h3>
 <select class="bg-gray-100 border border-gray-200 rounded px-3 py-1 text-sm">
 <option>هذا الشهر</option>
 <option>الشهر الماضي</option>
 <option>3 أشهر</option>
 <option>6 أشهر</option>
 <option>هذه السنة</option>
 </select>
 </div>
 <div class="chart-container">
 <canvas id="salesChart"></canvas>
 </div>
 </div>
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-bold">أكثر المنتجات مبيعاً</h3>
 <select class="bg-gray-100 border border-gray-200 rounded px-3 py-1 text-sm">
 <option>هذا الشهر</option>
 <option>الشهر الماضي</option>
 <option>هذه السنة</option>
 </select>
 </div>
 <div class="chart-container">
 <canvas id="productsChart"></canvas>
 </div>
 </div>
 </div>
<!-- Recent Orders -->
 <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-6">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-bold">أحدث الطلبات</h3>
 <a href="#" class="text-amber-700 hover:text-amber-900 text-sm">عرض الكل</a>
 </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-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الطلب</th>
 <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th>
 <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
 <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المبلغ</th>
 <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
 <th class="px-4 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">
 <tr>
 <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2023-001</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">علي حسين</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2023-10-15</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">45,000 د.ع</td>
 <td class="px-4 py-3 whitespace-nowrap">
 <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">مكتمل</span>
 </td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
 <a href="#" class="text-amber-700 hover:text-amber-900 mr-2"><i class="fas fa-eye"></i></a>
 <a href="#" class="text-amber-700 hover:text-amber-900"><i class="fas fa-print"></i></a>
 </td>
 </tr>
 <tr>
 <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2023-002</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">سارة محمد</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2023-10-14</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">25,000 د.ع</td>
 <td class="px-4 py-3 whitespace-nowrap">
 <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">قيد التجهيز</span>
 </td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
 <a href="#" class="text-amber-700 hover:text-amber-900 mr-2"><i class="fas fa-eye"></i></a>
 <a href="#" class="text-amber-700 hover:text-amber-900"><i class="fas fa-edit"></i></a>
 </td>
 </tr>
 <tr>
 <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2023-003</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">كريم عبدالله</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2023-10-13</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">18,000 د.ع</td>
 <td class="px-4 py-3 whitespace-nowrap">
 <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">تم الشحن</span>
 </td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
 <a href="#" class="text-amber-700 hover:text-amber-900 mr-2"><i class="fas fa-eye"></i></a>
 <a href="#" class="text-amber-700 hover:text-amber-900"><i class="fas fa-truck"></i></a>
 </td>
 </tr>
 <tr>
 <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2023-004</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">حسن علي</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2023-10-12</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">32,000 د.ع</td>
 <td class="px-4 py-3 whitespace-nowrap">
 <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">مكتمل</span>
 </td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
 <a href="#" class="text-amber-700 hover:text-amber-900 mr-2"><i class="fas fa-eye"></i></a>
 <a href="#" class="text-amber-700 hover:text-amber-900"><i class="fas fa-print"></i></a>
 </td>
 </tr>
 <tr>
 <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2023-005</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">نورا خالد</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2023-10-11</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">15,000 د.ع</td>
 <td class="px-4 py-3 whitespace-nowrap">
 <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">ملغي</span>
 </td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
 <a href="#" class="text-amber-700 hover:text-amber-900 mr-2"><i class="fas fa-eye"></i></a>
 <a href="#" class="text-amber-700 hover:text-amber-900"><i class="fas fa-trash"></i></a>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
<!-- Recent Reviews -->
 <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-bold">أحدث التقييمات</h3>
 <a href="#" class="text-amber-700 hover:text-amber-900 text-sm">عرض الكل</a>
 </div>
<div class="space-y-4">
 <div class="flex items-start border-b border-gray-100 pb-4">
 <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="صورة العميلة" class="w-10 h-10 rounded-full mr-3">
 <div class="flex-1">
 <div class="flex justify-between items-start">
 <div>
 <h4 class="font-medium">سعاد عبدالرحمن</h4>
 <div class="flex text-amber-500 text-sm mt-1">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 </div>
 </div>
 <span class="text-xs text-gray-500">منذ يومين</span>
 </div>
 <p class="text-gray-600 mt-2">الكليجة عندكم أطيب ما أكلت في حياتي! الطعم يذكرني بزمن الطفولة.</p>
 <div class="mt-2 text-sm">
 <span class="text-gray-500">على منتج:</span>
 <a href="#" class="text-amber-700 hover:text-amber-900">كليجة التمر العراقية</a>
 </div>
 </div>
 </div>
<div class="flex items-start border-b border-gray-100 pb-4">
 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="صورة العميل" class="w-10 h-10 rounded-full mr-3">
 <div class="flex-1">
 <div class="flex justify-between items-start">
 <div>
 <h4 class="font-medium">مصطفى أحمد</h4>
 <div class="flex text-amber-500 text-sm mt-1">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="far fa-star"></i>
 </div>
 </div>
 <span class="text-xs text-gray-500">منذ 4 أيام</span>
 </div>
 <p class="text-gray-600 mt-2">الطلبة وصلت في الوقت المحدد والطعم لذيذ، لكن أتمنى لو كانت الكمية أكبر.</p>
 <div class="mt-2 text-sm">
 <span class="text-gray-500">على منتج:</span>
 <a href="#" class="text-amber-700 hover:text-amber-900">كليجة الجوز الفاخرة</a>
 </div>
 </div>
 </div>
<div class="flex items-start">
 <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="صورة العميلة" class="w-10 h-10 rounded-full mr-3">
 <div class="flex-1">
 <div class="flex justify-between items-start">
 <div>
 <h4 class="font-medium">هدى كريم</h4>
 <div class="flex text-amber-500 text-sm mt-1">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star-half-alt"></i>
 </div>
 </div>
 <span class="text-xs text-gray-500">منذ أسبوع</span>
 </div>
 <p class="text-gray-600 mt-2">اشتريت صندوق الهدايا لأهلي في الخارج، كانوا سعداء جداً بالطعم والتغليف الجميل.</p>
 <div class="mt-2 text-sm">
 <span class="text-gray-500">على منتج:</span>
 <a href="#" class="text-amber-700 hover:text-amber-900">صندوق هدايا الكليجة</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Store Content -->
 <div id="store-content" class="hidden">
 <!-- Store Header -->
 <div class="bg-amber-700 text-white p-6 rounded-lg mb-6">
 <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
 <div class="mb-4 md:mb-0">
 <h1 class="text-2xl font-bold">مرحباً بك في متجر الكليجة</h1>
 <p class="mt-2">أطيب أنواع الكليجة العراقية بأجود المكونات</p>
 </div>
 <div class="relative w-full md:w-64">
 <input type="text" placeholder="ابحث عن منتج..." class="w-full py-2 px-4 pr-10 rounded-full bg-white text-gray-800 focus:outline-none focus:ring-2 focus:ring-amber-500">
 <button class="absolute left-3 top-2 text-gray-500">
 <i class="fas fa-search"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Categories -->
 <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-6">
 <h3 class="font-bold mb-4">فئات المنتجات</h3>
 <div class="flex flex-wrap gap-2">
 <button class="px-4 py-2 bg-amber-100 text-amber-800 rounded-full hover:bg-amber-200 transition">الكل</button>
 <button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition">كليجة التمر</button>
 <button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition">كليجة الجوز</button>
 <button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition">كليجة اللوز</button>
 <button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition">صندوق هدايا</button>
 <button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition">عروض خاصة</button>
 </div>
 </div>
<!-- Products Grid -->
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-6" id="store-products-grid">
 <!-- Products will be added here dynamically -->
 </div>
<!-- Special Offer -->
 <div class="bg-gradient-to-r from-amber-600 to-amber-800 text-white p-6 rounded-lg mb-6">
 <div class="flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-4 md:mb-0">
 <h2 class="text-2xl font-bold mb-2">عرض خاص!</h2>
 <p class="mb-4">احصل على خصم 25% عند شرائك صندوقين أو أكثر من صناديق الهدايا</p>
 <button class="bg-white text-amber-700 px-4 py-2 rounded-full font-bold hover:bg-gray-100 transition">
 استفد من العرض الآن
 </button>
 </div>
 <div class="md:w-1/2 flex justify-center">
 <img src="https://via.placeholder.com/400x200/ffffff/64748b?text=عرض+خاص" alt="عرض خاص" class="w-full max-w-md rounded-lg">
 </div>
 </div>
 </div>
<!-- Customer Reviews -->
 <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
 <h3 class="font-bold mb-4">آراء العملاء</h3>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <div class="border border-gray-200 rounded-lg p-4">
 <div class="flex items-center mb-3">
 <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="صورة العميلة" class="w-10 h-10 rounded-full mr-3">
 <div>
 <h4 class="font-medium">سعاد عبدالرحمن</h4>
 <div class="flex text-amber-500 text-sm">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 </div>
 </div>
 </div>
 <p class="text-gray-600">"الكليجة عندكم أطيب ما أكلت في حياتي! الطعم يذكرني بزمن الطفولة."</p>
 </div>
<div class="border border-gray-200 rounded-lg p-4">
 <div class="flex items-center mb-3">
 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="صورة العميل" class="w-10 h-10 rounded-full mr-3">
 <div>
 <h4 class="font-medium">مصطفى أحمد</h4>
 <div class="flex text-amber-500 text-sm">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="far fa-star"></i>
 </div>
 </div>
 </div>
 <p class="text-gray-600">"الطلبة وصلت في الوقت المحدد والطعم لذيذ، لكن أتمنى لو كانت الكمية أكبر."</p>
 </div>
<div class="border border-gray-200 rounded-lg p-4">
 <div class="flex items-center mb-3">
 <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="صورة العميلة" class="w-10 h-10 rounded-full mr-3">
 <div>
 <h4 class="font-medium">هدى كريم</h4>
 <div class="flex text-amber-500 text-sm">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star-half-alt"></i>
 </div>
 </div>
 </div>
 <p class="text-gray-600">"اشتريت صندوق الهدايا لأهلي في الخارج، كانوا سعداء جداً بالطعم والتغليف الجميل."</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Mobile Sidebar Overlay -->
 <div id="mobile-sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
<!-- Add/Edit Product Modal -->
 <div id="product-modal" class="modal">
 <div class="modal-content">
 <div class="bg-amber-700 text-white p-4 flex justify-between items-center">
 <h3 class="text-lg font-bold" id="modal-title">إضافة منتج جديد</h3>
 <button id="close-modal" class="text-white">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="p-4">
 <form id="product-form">
 <input type="hidden" id="product-id">
<div class="mb-4">
 <label for="product-name" class="block text-gray-700 mb-2">اسم المنتج</label>
 <input type="text" id="product-name" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500" required>
 </div>
<div class="mb-4">
 <label for="product-price" class="block text-gray-700 mb-2">السعر (د.ع)</label>
 <input type="number" id="product-price" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500" required>
 </div>
<div class="mb-4">
 <label for="product-quantity" class="block text-gray-700 mb-2">الكمية المتاحة</label>
 <input type="number" id="product-quantity" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500" required>
 </div>
<div class="mb-4">
 <label for="product-category" class="block text-gray-700 mb-2">الفئة</label>
 <select id="product-category" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500">
 <option value="كليجة التمر">كليجة التمر</option>
 <option value="كليجة الجوز">كليجة الجوز</option>
 <option value="كليجة اللوز">كليجة اللوز</option>
 <option value="صندوق هدايا">صندوق هدايا</option>
 <option value="عروض خاصة">عروض خاصة</option>
 </select>
 </div>
<div class="mb-4">
 <label for="product-description" class="block text-gray-700 mb-2">وصف المنتج</label>
 <textarea id="product-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
 </div>
<div class="mb-4">
 <label class="block text-gray-700 mb-2">صورة المنتج</label>
 <div class="image-preview" id="image-preview">
 <span class="text-gray-500">لا توجد صورة</span>
 </div>
 <input type="file" id="product-image" accept="image/*" class="hidden">
 <button type="button" id="upload-image-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300 transition">
 <i class="fas fa-upload ml-2"></i> رفع صورة
 </button>
 </div>
<div class="flex justify-end space-x-3 space-x-reverse">
 <button type="button" id="cancel-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300 transition">
 إلغاء
 </button>
 <button type="submit" id="save-product-btn" class="bg-amber-600 text-white px-4 py-2 rounded hover:bg-amber-700 transition">
 حفظ المنتج
 </button>
 </div>
 </form>
 </div>
 </div>
 </div>
<!-- Notifications Modal -->
 <div id="notifications-modal" class="modal">
 <div class="modal-content" style="max-width: 400px;">
 <div class="bg-amber-700 text-white p-4 flex justify-between items-center">
 <h3 class="text-lg font-bold">الإشعارات</h3>
 <button class="close-notifications-modal text-white">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="p-4 max-h-96 overflow-y-auto">
 <div class="space-y-4">
 <div class="border-b border-gray-200 pb-3">
 <div class="flex items-start">
 <div class="bg-amber-100 text-amber-700 p-2 rounded-full mr-3">
 <i class="fas fa-shopping-bag"></i>
 </div>
 <div>
 <h4 class="font-medium">طلب جديد</h4>
 <p class="text-gray-600 text-sm">تم استلام طلب جديد من العميل علي حسين</p>
 <span class="text-xs text-gray-500">منذ 10 دقائق</span>
 </div>
 </div>
 </div>
<div class="border-b border-gray-200 pb-3">
 <div class="flex items-start">
 <div class="bg-green-100 text-green-700 p-2 rounded-full mr-3">
 <i class="fas fa-check-circle"></i>
 </div>
 <div>
 <h4 class="font-medium">دفعة مستلمة</h4>
 <p class="text-gray-600 text-sm">تم استلام دفعة بقيمة 45,000 د.ع للطلب #ORD-2023-001</p>
 <span class="text-xs text-gray-500">منذ ساعة</span>
 </div>
 </div>
 </div>
<div class="border-b border-gray-200 pb-3">
 <div class="flex items-start">
 <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
 <i class="fas fa-comment"></i>
 </div>
 <div>
 <h4 class="font-medium">تقييم جديد</h4>
 <p class="text-gray-600 text-sm">أضاف العميل سعاد عبدالرحمن تقييماً لمنتج كليجة التمر العراقية</p>
 <span class="text-xs text-gray-500">منذ يومين</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Chart.js -->
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
 // Sample Products Data
 let products = [
 {
 id: 1,
 name: "كليجة التمر العراقية",
 price: 15000,
 quantity: 50,
 category: "كليجة التمر",
 description: "كليجة التمر التقليدية بطعم العراق الأصيل",
 image: "https://via.placeholder.com/300x200/e2e8f0/64748b?text=كليجة+التمر",
 featured: true
 },
 {
 id: 2,
 name: "كليجة الجوز الفاخرة",
 price: 18000,
 quantity: 35,
 category: "كليجة الجوز",
 description: "كليجة الجوز بجودة عالية ومكونات فاخرة",
 image: "https://via.placeholder.com/300x200/e2e8f0/64748b?text=كليجة+الجوز",
 featured: false
 },
 {
 id: 3,
 name: "كليجة اللوز المميزة",
 price: 16000,
 quantity: 25,
 category: "كليجة اللوز",
 description: "كليجة اللوز بلمسة عصرية وطعم لا يقاوم",
 image: "https://via.placeholder.com/300x200/e2e8f0/64748b?text=كليجة+اللوز",
 featured: true,
 discount: 20,
 oldPrice: 20000
 },
 {
 id: 4,
 name: "صندوق هدايا الكليجة",
 price: 35000,
 quantity: 15,
 category: "صندوق هدايا",
 description: "مجموعة متنوعة من الكليجة بتغليف هدايا فاخر",
 image: "https://via.placeholder.com/300x200/e2e8f0/64748b?text=صندوق+هدايا",
 featured: false
 }
 ];
// DOM Elements
 const productsTableBody = document.getElementById('products-table-body');
 const storeProductsGrid = document.getElementById('store-products-grid');
 const productForm = document.getElementById('product-form');
 const productModal = document.getElementById('product-modal');
 const modalTitle = document.getElementById('modal-title');
 const productIdInput = document.getElementById('product-id');
 const productNameInput = document.getElementById('product-name');
 const productPriceInput = document.getElementById('product-price');
 const productQuantityInput = document.getElementById('product-quantity');
 const productCategoryInput = document.getElementById('product-category');
 const productDescriptionInput = document.getElementById('product-description');
 const productImageInput = document.getElementById('product-image');
 const imagePreview = document.getElementById('image-preview');
 const uploadImageBtn = document.getElementById('upload-image-btn');
 const addProductBtn = document.getElementById('add-product-btn');
 const closeModalBtn = document.getElementById('close-modal');
 const cancelBtn = document.getElementById('cancel-btn');
 const saveProductBtn = document.getElementById('save-product-btn');
 const notificationsBtn = document.getElementById('notifications-btn');
 const notificationsModal = document.getElementById('notifications-modal');
 const closeNotificationsModal = document.querySelector('.close-notifications-modal');
// Initialize the app
 function init() {
 renderProductsTable();
 renderStoreProducts();
 setupEventListeners();
 setupCharts();
 }
// Render products table in admin panel
 function renderProductsTable() {
 productsTableBody.innerHTML = '';
products.forEach(product => {
 const row = document.createElement('tr');
 row.innerHTML = `
 <td class="px-4 py-3 whitespace-nowrap">
 <img src="${product.image}" alt="${product.name}" class="w-10 h-10 rounded-full object-cover">
 </td>
 <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">${product.name}</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${product.price.toLocaleString()} د.ع</td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${product.quantity}</td>
 <td class="px-4 py-3 whitespace-nowrap">
 <span class="px-2 py-1 text-xs rounded-full ${product.quantity > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
 ${product.quantity > 0 ? 'متوفر' : 'غير متوفر'}
 </span>
 </td>
 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
 <button class="edit-product-btn text-amber-700 hover:text-amber-900 mr-2" data-id="${product.id}">
 <i class="fas fa-edit"></i>
 </button>
 <button class="delete-product-btn text-red-600 hover:text-red-800" data-id="${product.id}">
 <i class="fas fa-trash"></i>
 </button>
 </td>
 `;
 productsTableBody.appendChild(row);
 });
// Add event listeners to edit and delete buttons
 document.querySelectorAll('.edit-product-btn').forEach(btn => {
 btn.addEventListener('click', () => editProduct(parseInt(btn.dataset.id)));
 });
document.querySelectorAll('.delete-product-btn').forEach(btn => {
 btn.addEventListener('click', () => deleteProduct(parseInt(btn.dataset.id)));
 });
 }
// Render products in store
 function renderStoreProducts() {
 storeProductsGrid.innerHTML = '';
products.forEach(product => {
 const productCard = document.createElement('div');
 productCard.className = 'product-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition';
 productCard.innerHTML = `
 <div class="relative">
 <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover rounded-lg">
 <button class="favorite-btn absolute top-2 left-2 bg-white p-2 rounded-full text-amber-700 hover:text-amber-900" data-id="${product.id}">
 <i class="${isProductFavorite(product.id) ? 'fas fa-heart text-red-500' : 'far fa-heart'}"></i>
 </button>
 ${product.featured ? '<span class="absolute top-2 right-2 bg-amber-600 text-white px-2 py-1 text-xs rounded-full">الأكثر مبيعاً</span>' : ''}
 ${product.discount ? `<span class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 text-xs rounded-full">خصم ${product.discount}%</span>` : ''}
 </div>
 <div class="mt-4">
 <h3 class="font-bold text-lg">${product.name}</h3>
 <p class="text-gray-600 text-sm mt-1">${product.description}</p>
 <div class="flex justify-between items-center mt-3">
 <div>
 ${product.discount ? `
 <span class="font-bold text-amber-700">${(product.price * (1 - product.discount/100)).toLocaleString()} د.ع</span>
 <span class="text-gray-400 text-sm line-through mr-2">${product.price.toLocaleString()} د.ع</span>
 ` : `
 <span class="font-bold text-amber-700">${product.price.toLocaleString()} د.ع</span>
 `}
 </div>
 <button class="add-to-cart-btn bg-amber-600 text-white px-3 py-1 rounded-full hover:bg-amber-700 transition" data-id="${product.id}">
 <i class="fas fa-shopping-cart"></i> أضف للسلة
 </button>
 </div>
 </div>
 `;
 storeProductsGrid.appendChild(productCard);
 });
// Add event listeners to favorite and add to cart buttons
 document.querySelectorAll('.favorite-btn').forEach(btn => {
 btn.addEventListener('click', () => toggleFavorite(parseInt(btn.dataset.id)));
 });
document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
 btn.addEventListener('click', () => addToCart(parseInt(btn.dataset.id)));
 });
 }
// Check if product is favorite
 function isProductFavorite(productId) {
 const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
 return favorites.includes(productId);
 }
// Toggle product favorite status
 function toggleFavorite(productId) {
 let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
 const index = favorites.indexOf(productId);
if (index === -1) {
 favorites.push(productId);
 showToast('تم إضافة المنتج إلى المفضلة', 'success');
 } else {
 favorites.splice(index, 1);
 showToast('تم إزالة المنتج من المفضلة', 'info');
 }
localStorage.setItem('favorites', JSON.stringify(favorites));
 renderStoreProducts();
 }
// Add product to cart
 function addToCart(productId) {
 let cart = JSON.parse(localStorage.getItem('cart') || '[]');
 const product = products.find(p => p.id === productId);
const existingItem = cart.find(item => item.id === productId);
if (existingItem) {
 existingItem.quantity += 1;
 } else {
 cart.push({
 id: product.id,
 name: product.name,
 price: product.discount ? product.price * (1 - product.discount/100) : product.price,
 quantity: 1,
 image: product.image
 });
 }
localStorage.setItem('cart', JSON.stringify(cart));
 updateCartCount();
 showToast('تم إضافة المنتج إلى سلة التسوق', 'success');
 }
// Update cart count in UI
 function updateCartCount() {
 const cart = JSON.parse(localStorage.getItem('cart') || '[]');
 const cartCount = cart.reduce((total, item) => total + item.quantity, 0);
document.querySelectorAll('.order-badge').forEach(badge => {
 if (badge.textContent.includes('سلة التسوق')) {
 badge.textContent = cartCount;
 }
 });
 }
// Show toast notification
 function showToast(message, type) {
 const toast = document.createElement('div');
 toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${
 type === 'success' ? 'bg-green-500' :
type === 'error' ? 'bg-red-500' :
type === 'info' ? 'bg-blue-500' : 'bg-gray-500'
 }`;
 toast.textContent = message;
 document.body.appendChild(toast);
setTimeout(() => {
 toast.remove();
 }, 3000);
 }
// Open modal for adding new product
 function openAddProductModal() {
 productForm.reset();
 productIdInput.value = '';
 modalTitle.textContent = 'إضافة منتج جديد';
 imagePreview.innerHTML = '<span class="text-gray-500">لا توجد صورة</span>';
 productModal.style.display = 'flex';
 }
// Open modal for editing product
 function editProduct(id) {
 const product = products.find(p => p.id === id);
if (product) {
 productIdInput.value = product.id;
 productNameInput.value = product.name;
 productPriceInput.value = product.price;
 productQuantityInput.value = product.quantity;
 productCategoryInput.value = product.category;
 productDescriptionInput.value = product.description;
if (product.image) {
 imagePreview.innerHTML = `<img src="${product.image}" alt="Preview" class="max-w-full max-h-full">`;
 } else {
 imagePreview.innerHTML = '<span class="text-gray-500">لا توجد صورة</span>';
 }
modalTitle.textContent = 'تعديل المنتج';
 productModal.style.display = 'flex';
 }
 }
// Delete product
 function deleteProduct(id) {
 if (confirm('هل أنت متأكد من حذف هذا المنتج؟')) {
 products = products.filter(p => p.id !== id);
 renderProductsTable();
 renderStoreProducts();
 showToast('تم حذف المنتج بنجاح', 'success');
 }
 }
// Save product (add new or update existing)
 function saveProduct(e) {
 e.preventDefault();
const id = productIdInput.value ? parseInt(productIdInput.value) : Date.now();
 const name = productNameInput.value;
 const price = parseInt(productPriceInput.value);
 const quantity = parseInt(productQuantityInput.value);
 const category = productCategoryInput.value;
 const description = productDescriptionInput.value;
// Get image (for simplicity, we'll just keep the placeholder)
 let image = 'https://via.placeholder.com/300x200/e2e8f0/64748b?text=' + encodeURIComponent(name);
// If there's an image preview with an actual image
 if (imagePreview.querySelector('img') && !imagePreview.querySelector('img').src.includes('placeholder')) {
 image = imagePreview.querySelector('img').src;
 }
const product = {
 id,
 name,
 price,
 quantity,
 category,
 description,
 image
 };
if (productIdInput.value) {
 // Update existing product
 const index = products.findIndex(p => p.id === id);
 products[index] = product;
 showToast('تم تحديث المنتج بنجاح', 'success');
 } else {
 // Add new product
 products.push(product);
 showToast('تم إضافة المنتج بنجاح', 'success');
 }
renderProductsTable();
 renderStoreProducts();
 closeModal();
 }
// Close modal
 function closeModal() {
 productModal.style.display = 'none';
 }
// Setup event listeners
 function setupEventListeners() {
 // Mobile sidebar toggle
 const mobileMenuBtn = document.getElementById('mobile-menu-btn');
 const mobileSidebar = document.getElementById('mobile-sidebar');
 const closeMobileSidebar = document.getElementById('close-mobile-sidebar');
 const mobileSidebarOverlay = document.getElementById('mobile-sidebar-overlay');
mobileMenuBtn.addEventListener('click', () => {
 mobileSidebar.classList.remove('translate-x-full');
 mobileSidebarOverlay.classList.remove('hidden');
 });
closeMobileSidebar.addEventListener('click', () => {
 mobileSidebar.classList.add('translate-x-full');
 mobileSidebarOverlay.classList.add('hidden');
 });
mobileSidebarOverlay.addEventListener('click', () => {
 mobileSidebar.classList.add('translate-x-full');
 mobileSidebarOverlay.classList.add('hidden');
 });
// Mode Switching
 const adminModeBtn = document.getElementById('admin-mode');
 const storeModeBtn = document.getElementById('store-mode');
 const mobileAdminModeBtn = document.getElementById('mobile-admin-mode');
 const mobileStoreModeBtn = document.getElementById('mobile-store-mode');
 const adminContent = document.getElementById('admin-content');
 const storeContent = document.getElementById('store-content');
 const adminMenu = document.querySelectorAll('.admin-menu');
 const storeMenu = document.querySelectorAll('.store-menu');
 const pageTitle = document.getElementById('page-title');
function switchToAdminMode() {
 adminModeBtn.classList.add('active');
 storeModeBtn.classList.remove('active');
 mobileAdminModeBtn.classList.add('active');
 mobileStoreModeBtn.classList.remove('active');
adminContent.classList.remove('hidden');
 storeContent.classList.add('hidden');
adminMenu.forEach(menu => menu.classList.remove('hidden'));
 storeMenu.forEach(menu => menu.classList.add('hidden'));
pageTitle.textContent = 'لوحة التحكم';
 }
function switchToStoreMode() {
 adminModeBtn.classList.remove('active');
 storeModeBtn.classList.add('active');
 mobileAdminModeBtn.classList.remove('active');
 mobileStoreModeBtn.classList.add('active');
adminContent.classList.add('hidden');
 storeContent.classList.remove('hidden');
adminMenu.forEach(menu => menu.classList.add('hidden'));
 storeMenu.forEach(menu => menu.classList.remove('hidden'));
pageTitle.textContent = 'متجر الكليجة';
 }
adminModeBtn.addEventListener('click', switchToAdminMode);
 storeModeBtn.addEventListener('click', switchToStoreMode);
 mobileAdminModeBtn.addEventListener('click', switchToAdminMode);
 mobileStoreModeBtn.addEventListener('click', switchToStoreMode);
// Products link
 document.getElementById('products-link').addEventListener('click', (e) => {
 e.preventDefault();
 document.getElementById('products-management').scrollIntoView({ behavior: 'smooth' });
 });
document.getElementById('mobile-products-link').addEventListener('click', (e) => {
 e.preventDefault();
 switchToAdminMode();
 document.getElementById('products-management').scrollIntoView({ behavior: 'smooth' });
 mobileSidebar.classList.add('translate-x-full');
 mobileSidebarOverlay.classList.add('hidden');
 });
// Product modal
 addProductBtn.addEventListener('click', openAddProductModal);
 closeModalBtn.addEventListener('click', closeModal);
 cancelBtn.addEventListener('click', closeModal);
 productForm.addEventListener('submit', saveProduct);
// Image upload
 uploadImageBtn.addEventListener('click', () => productImageInput.click());
productImageInput.addEventListener('change', (e) => {
 const file = e.target.files[0];
 if (file) {
 const reader = new FileReader();
 reader.onload = (event) => {
 imagePreview.innerHTML = `<img src="${event.target.result}" alt="Preview" class="max-w-full max-h-full">`;
 };
 reader.readAsDataURL(file);
 }
 });
// Notifications
 notificationsBtn.addEventListener('click', () => {
 notificationsModal.style.display = 'flex';
 });
closeNotificationsModal.addEventListener('click', () => {
 notificationsModal.style.display = 'none';
 });
window.addEventListener('click', (e) => {
 if (e.target === notificationsModal) {
 notificationsModal.style.display = 'none';
 }
 });
 }
// Setup charts
 function setupCharts() {
 // Sales Chart
 const salesCtx = document.getElementById('salesChart').getContext('2d');
 const salesChart = new Chart(salesCtx, {
 type: 'line',
 data: {
 labels: ['1', '5', '10', '15', '20', '25', '30'],
 datasets: [{
 label: 'المبيعات اليومية',
 data: [120000, 190000, 150000, 200000, 180000, 220000, 250000],
 backgroundColor: 'rgba(217, 119, 6, 0.1)',
 borderColor: 'rgba(217, 119, 6, 1)',
 borderWidth: 2,
 tension: 0.3,
 fill: true
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 display: false
 }
 },
 scales: {
 y: {
 beginAtZero: true,
 grid: {
 display: false
 }
 },
 x: {
 grid: {
 display: false
 }
 }
 }
 }
 });
// Products Chart
 const productsCtx = document.getElementById('productsChart').getContext('2d');
 const productsChart = new Chart(productsCtx, {
 type: 'bar',
 data: {
 labels: ['كليجة التمر', 'كليجة الجوز', 'كليجة اللوز', 'صندوق هدايا', 'كليجة الشوكولاتة'],
 datasets: [{
 label: 'عدد المبيعات',
 data: [85, 62, 45, 38, 28],
 backgroundColor: [
 'rgba(217, 119, 6, 0.7)',
 'rgba(217, 119, 6, 0.6)',
 'rgba(217, 119, 6, 0.5)',
 'rgba(217, 119, 6, 0.4)',
 'rgba(217, 119, 6, 0.3)'
 ],
 borderColor: [
 'rgba(217, 119, 6, 1)',
 'rgba(217, 119, 6, 1)',
 'rgba(217, 119, 6, 1)',
 'rgba(217, 119, 6, 1)',
 'rgba(217, 119, 6, 1)'
 ],
 borderWidth: 1
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 display: false
 }
 },
 scales: {
 y: {
 beginAtZero: true,
 grid: {
 display: false
 }
 },
 x: {
 grid: {
 display: false
 }
 }
 }
 }
 });
 }
// Initialize the app when DOM is loaded
 document.addEventListener('DOMContentLoaded', init);
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=81fr/tesstr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>