Hugging Face's logo

Spaces:
amrora0011
/
git-clone-https-huggingface-co-spaces-amrora0011-gark
Running

App Files Community
git-clone-https-huggingface-co-spaces-amrora0011-gark / index.html
amrora0011's picture
amrora0011
Add 2 files
e0b995f verified
raw
history blame contribute delete
79 kB
 I'll enhance the backend functionality of the application with more comprehensive features. Here's the complete HTML file with an improved backend implementation:
```html
<!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;
}
.country-flag {
width: 30px;
height: 20px;
object-fit: cover;
border-radius: 2px;
margin-left: 8px;
}
.item-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.item-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.tab-active {
color: #3b82f6;
border-bottom: 2px solid #3b82f6;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.chat-message {
max-width: 70%;
word-wrap: break-word;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Country Selection Modal -->
<div id="countryModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-8 w-full max-w-md mx-4">
<h2 class="text-2xl font-bold text-center mb-6">اختر بلدك</h2>
<div class="flex flex-col space-y-4">
<button onclick="selectCountry('sa')" class="flex items-center justify-center py-4 px-6 border border-gray-300 rounded-lg hover:bg-gray-100 transition">
<img src="https://flagcdn.com/w20/sa.png" class="country-flag" alt="Saudi Arabia">
<span class="font-medium">السعودية (ريال سعودي)</span>
</button>
<button onclick="selectCountry('eg')" class="flex items-center justify-center py-4 px-6 border border-gray-300 rounded-lg hover:bg-gray-100 transition">
<img src="https://flagcdn.com/w20/eg.png" class="country-flag" alt="Egypt">
<span class="font-medium">مصر (جنيه مصري)</span>
</button>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="bg-white shadow-sm sticky top-0 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="#" onclick="showHome()" class="flex-shrink-0 flex items-center">
<span class="text-blue-600 font-bold text-xl">جاري</span>
</a>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-4 space-x-reverse">
<button id="homeTab" onclick="showHome()" class="px-3 py-2 text-sm font-medium tab-active">الرئيسية</button>
<button id="addItemTab" onclick="showAddItem()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600">إضافة غرض</button>
<button id="loginTab" onclick="showLogin()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600">تسجيل الدخول</button>
<button id="profileTab" onclick="showProfile()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 hidden">حسابي</button>
<button id="logoutBtn" onclick="logout()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 hidden">تسجيل خروج</button>
<div id="countrySelector" class="flex items-center">
<span id="currentCountry" class="text-sm text-gray-600"></span>
<button onclick="changeCountry()" class="ml-2 text-blue-600 hover:text-blue-800 text-sm">
<i class="fas fa-exchange-alt"></i>
</button>
</div>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button onclick="toggleMobileMenu()" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-gray-100 focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobileMenu" class="hidden md:hidden bg-white border-t">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<button onclick="showHome()" class="block w-full text-right px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">الرئيسية</button>
<button onclick="showAddItem()" class="block w-full text-right px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">إضافة غرض</button>
<button id="mobileLoginTab" onclick="showLogin()" class="block w-full text-right px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">تسجيل الدخول</button>
<button id="mobileProfileTab" onclick="showProfile()" class="block w-full text-right px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 hidden">حسابي</button>
<button id="mobileLogoutBtn" onclick="logout()" class="block w-full text-right px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 hidden">تسجيل خروج</button>
<div class="flex items-center justify-between px-3 py-2">
<span id="mobileCurrentCountry" class="text-sm text-gray-600"></span>
<button onclick="changeCountry()" class="text-blue-600 hover:text-blue-800 text-sm">
<i class="fas fa-exchange-alt"></i> تغيير البلد
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Home Page -->
<div id="homePage">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-900">الأغراض المتاحة للإيجار</h1>
<div class="flex items-center space-x-2 space-x-reverse">
<select id="categoryFilter" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">كل التصنيفات</option>
</select>
<select id="cityFilter" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">كل المدن</option>
</select>
</div>
</div>
<div id="itemsContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Items will be loaded here -->
</div>
</div>
<!-- Add Item Page -->
<div id="addItemPage" class="hidden max-w-2xl mx-auto">
<h1 class="text-2xl font-bold text-gray-900 mb-6">إضافة غرض جديد للإيجار</h1>
<form id="addItemForm" class="space-y-4">
<div>
<label for="itemTitle" class="block text-sm font-medium text-gray-700">عنوان الغرض</label>
<input type="text" id="itemTitle" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="itemDescription" class="block text-sm font-medium text-gray-700">وصف الغرض</label>
<textarea id="itemDescription" rows="4" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
</div>
<div>
<label for="itemImage" class="block text-sm font-medium text-gray-700">صورة الغرض</label>
<input type="file" id="itemImage" accept="image/*" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
<div id="imagePreview" class="mt-2 hidden">
<img id="previewImage" src="#" alt="Preview" class="h-32 object-cover rounded-md">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="itemPrice" class="block text-sm font-medium text-gray-700">السعر اليومي</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span id="priceCurrency" class="text-gray-500 sm:text-sm">ريال</span>
</div>
<input type="number" id="itemPrice" min="1" required class="focus:ring-blue-500 focus:border-blue-500 block w-full pr-12 pl-16 py-2 sm:text-sm border-gray-300 rounded-md">
</div>
</div>
<div>
<label for="itemCity" class="block text-sm font-medium text-gray-700">المدينة</label>
<select id="itemCity" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option value="">اختر المدينة</option>
</select>
</div>
</div>
<div>
<label for="itemCategory" class="block text-sm font-medium text-gray-700">التصنيف</label>
<select id="itemCategory" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option value="">اختر التصنيف</option>
<option value="electronics">إلكترونيات</option>
<option value="tools">أدوات</option>
<option value="sports">رياضة</option>
<option value="fashion">أزياء</option>
<option value="home">أدوات منزلية</option>
<option value="other">أخرى</option>
</select>
</div>
<div class="pt-4">
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
إضافة الغرض
</button>
</div>
</form>
</div>
<!-- Login/Register Page -->
<div id="loginPage" class="hidden max-w-md mx-auto">
<div class="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
<div class="text-center mb-8">
<h1 class="text-2xl font-bold text-gray-900">مرحباً بك في جاري</h1>
<p class="mt-2 text-sm text-gray-600">سجل الدخول أو أنشئ حساباً جديداً</p>
</div>
<div class="flex border-b mb-6">
<button id="loginTabBtn" class="flex-1 py-2 px-4 text-center font-medium tab-active">تسجيل الدخول</button>
<button id="registerTabBtn" class="flex-1 py-2 px-4 text-center font-medium text-gray-5 hover:text-blue-600">إنشاء حساب</button>
</div>
<form id="loginForm" class="space-y-4">
<div>
<label for="loginEmail" class="block text-sm font-medium text-gray-700">البريد الإلكتروني</label>
<input type="email" id="loginEmail" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="loginPassword" class="block text-sm font-medium text-gray-700">كلمة المرور</label>
<input type="password" id="loginPassword" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
تسجيل الدخول
</button>
</div>
</form>
<form id="registerForm" class="hidden space-y-4">
<div>
<label for="registerName" class="block text-sm font-medium text-gray-700">الاسم الكامل</label>
<input type="text" id="registerName" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="registerEmail" class="block text-sm font-medium text-gray-700">البريد الإلكتروني</label>
<input type="email" id="registerEmail" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="registerPhone" class="block text-sm font-medium text-gray-700">رقم الهاتف</label>
<input type="tel" id="registerPhone" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="registerPassword" class="block text-sm font-medium text-gray-700">كلمة المرور</label>
<input type="password" id="registerPassword" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="registerConfirmPassword" class="block text-sm font-medium text-gray-700">تأكيد كلمة المرور</label>
<input type="password" id="registerConfirmPassword" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
إنشاء حساب
</button>
</div>
</form>
<div class="mt-4 text-center">
<p class="text-sm text-gray-600">
بمتابعتك أنت توافق على
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">شروط الاستخدام</a>
و
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">سياسة الخصوصية</a>
</p>
</div>
</div>
</div>
<!-- Profile Page -->
<div id="profilePage" class="hidden max-w-4xl mx-auto">
<div class="bg-white shadow rounded-lg overflow-hidden">
<div class="bg-blue-600 py-6 px-6 text-white">
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold">حسابي</h1>
<p id="profileEmail" class="text-blue-100 mt-1"></p>
</div>
<button onclick="showEditProfile()" class="bg-white text-blue-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-50">
تعديل الملف الشخصي
</button>
</div>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2">
<h2 class="text-lg font-medium text-gray-900 mb-4">الأغراض التي أضفتها</h2>
<div id="userItemsContainer" class="space-y-4">
<!-- User's items will be loaded here -->
</div>
<h2 class="text-lg font-medium text-gray-900 mt-8 mb-4">طلبات الإيجار</h2>
<div id="rentalRequestsContainer" class="space-y-4">
<!-- Rental requests will be loaded here -->
</div>
</div>
<div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-4">
<div class="bg-blue-100 text-blue-800 rounded-full p-3 mr-3">
<i class="fas fa-user text-xl"></i>
</div>
<div>
<h3 id="profileName" class="font-medium"></h3>
<p id="profilePhone" class="text-sm text-gray-500"></p>
</div>
</div>
<div class="border-t pt-4">
<h3 class="font-medium text-gray-900 mb-2">إحصائيات</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-white p-3 rounded-md shadow-sm text-center">
<p class="text-sm text-gray-500">الأغراض</p>
<p id="itemsCount" class="font-bold text-lg">0</p>
</div>
<div class="bg-white p-3 rounded-md shadow-sm text-center">
<p class="text-sm text-gray-500">الإيجارات</p>
<p id="rentalsCount" class="font-bold text-lg">0</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Edit Profile Page -->
<div id="editProfilePage" class="hidden max-w-2xl mx-auto">
<div class="flex items-center mb-6">
<button onclick="showProfile()" class="text-blue-600 hover:text-blue-800 mr-2">
<i class="fas fa-arrow-right"></i>
</button>
<h1 class="text-2xl font-bold text-gray-900">تعديل الملف الشخصي</h1>
</div>
<form id="editProfileForm" class="space-y-4">
<div>
<label for="editProfileName" class="block text-sm font-medium text-gray-700">الاسم الكامل</label>
<input type="text" id="editProfileName" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="editProfileEmail" class="block text-sm font-medium text-gray-700">البريد الإلكتروني</label>
<input type="email" id="editProfileEmail" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="editProfilePhone" class="block text-sm font-medium text-gray-700">رقم الهاتف</label>
<input type="tel" id="editProfilePhone" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="editProfilePassword" class="block text-sm font-medium text-gray-700">كلمة المرور الجديدة (اختياري)</label>
<input type="password" id="editProfilePassword" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="editProfileConfirmPassword" class="block text-sm font-medium text-gray-700">تأكيد كلمة المرور الجديدة</label>
<input type="password" id="editProfileConfirmPassword" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="pt-4">
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
حفظ التغييرات
</button>
</div>
</form>
</div>
<!-- Item Details Modal -->
<div id="itemDetailsModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-start mb-4">
<h2 id="itemDetailsTitle" class="text-xl font-bold"></h2>
<button onclick="closeItemDetails()" 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-2 gap-6">
<div>
<img id="itemDetailsImage" src="" alt="" class="w-full h-64 object-cover rounded-lg">
<div class="mt-4 flex items-center justify-between">
<div>
<span id="itemDetailsPrice" class="text-lg font-bold text-blue-600"></span>
<span class="text-gray-500">/ يوم</span>
</div>
<div class="flex items-center">
<i class="fas fa-map-marker-alt text-gray-500 mr-1"></i>
<span id="itemDetailsCity" class="text-gray-600"></span>
</div>
</div>
</div>
<div>
<h3 class="font-medium mb-2">الوصف</h3>
<p id="itemDetailsDescription" class="text-gray-700 mb-4"></p>
<div class="border-t pt-4">
<h3 class="font-medium mb-2">المالك</h3>
<div class="flex items-center">
<div class="bg-blue-100 text-blue-800 rounded-full p-2 mr-3">
<i class="fas fa-user"></i>
</div>
<div>
<p id="itemDetailsOwner" class="font-medium"></p>
<p id="itemDetailsOwnerRating" class="text-sm text-gray-500">
<i class="fas fa-star text-yellow-400"></i> 4.8 (12 تقييم)
</p>
</div>
</div>
</div>
<div class="border-t pt-4 mt-4">
<h3 class="font-medium mb-2">تواصل مع المالك</h3>
<div id="itemDetailsChat" class="space-y-2 max-h-40 overflow-y-auto mb-4">
<!-- Chat messages will appear here -->
</div>
<div class="flex items-center">
<input type="text" id="itemDetailsMessage" placeholder="اكتب رسالتك..." class="flex-1 border border-gray-300 rounded-l-md py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<button onclick="sendMessage()" class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<div class="mt-6 pt-4 border-t">
<button id="rentItemBtn" onclick="requestRental()" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700">
طلب الإيجار
</button>
</div>
</div>
</div>
<!-- Rental Request Modal -->
<div id="rentalRequestModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
<div class="flex justify-between items-start mb-4">
<h2 class="text-xl font-bold">طلب إيجار</h2>
<button onclick="closeRentalRequestModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form id="rentalRequestForm" class="space-y-4">
<div>
<label for="rentalStartDate" class="block text-sm font-medium text-gray-700">تاريخ البدء</label>
<input type="date" id="rentalStartDate" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="rentalEndDate" class="block text-sm font-medium text-gray-700">تاريخ الانتهاء</label>
<input type="date" id="rentalEndDate" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="rentalMessage" class="block text-sm font-medium text-gray-700">ملاحظات (اختياري)</label>
<textarea id="rentalMessage" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
</div>
<div class="pt-4">
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
تأكيد الطلب
</button>
</div>
</form>
</div>
</div>
<!-- Rental Request Details Modal -->
<div id="rentalRequestDetailsModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
<div class="flex justify-between items-start mb-4">
<h2 id="rentalRequestTitle" class="text-xl font-bold">تفاصيل طلب الإيجار</h2>
<button onclick="closeRentalRequestDetailsModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div>
<h3 class="font-medium text-gray-700">المستأجر</h3>
<p id="rentalRequestRenter" class="text-gray-900"></p>
</div>
<div>
<h3 class="font-medium text-gray-700">فترة الإيجار</h3>
<p id="rentalRequestPeriod" class="text-gray-900"></p>
</div>
<div>
<h3 class="font-medium text-gray-700">الحالة</h3>
<p id="rentalRequestStatus" class="text-gray-900"></p>
</div>
<div>
<h3 class="font-medium text-gray-700">الملاحظات</h3>
<p id="rentalRequestNotes" class="text-gray-900"></p>
</div>
<div id="rentalRequestActions" class="pt-4 flex space-x-2 space-x-reverse">
<!-- Action buttons will appear here -->
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white border-t mt-12">
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">جاري</h3>
<p id="footerDescription" class="text-gray-500 text-sm">منصة لتأجير الأغراض الشخصية بين الأفراد</p>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">روابط سريعة</h3>
<ul class="space-y-2">
<li><a href="#" onclick="showHome()" class="text-gray-500 hover:text-blue-600 text-sm">الرئيسية</a></li>
<li><a href="#" onclick="showAddItem()" class="text-gray-500 hover:text-blue-600 text-sm">إضافة غرض</a></li>
<li><a href="#" onclick="showLogin()" class="text-gray-500 hover:text-blue-600 text-sm">تسجيل الدخول</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">تواصل معنا</h3>
<div class="flex space-x-4 space-x-reverse">
<a href="#" class="text-gray-500 hover:text-blue-600">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-500 hover:text-blue-600">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-500 hover:text-blue-600">
<i class="fab fa-instagram"></i>
</a>
</div>
<p class="text-gray-500 text-sm mt-4">info@jari.com</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-200 text-center">
<p class="text-gray-500 text-sm">&copy; 2023 جاري. جميع الحقوق محفوظة.</p>
</div>
</div>
</footer>
<!-- Loading Spinner -->
<div id="loadingSpinner" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Success Notification -->
<div id="successNotification" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center hidden z-50">
<i class="fas fa-check-circle mr-2"></i>
<span id="successMessage"></span>
</div>
<!-- Error Notification -->
<div id="errorNotification" class="fixed bottom-4 right-4 bg-red-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center hidden z-50">
<i class="fas fa-exclamation-circle mr-2"></i>
<span id="errorMessage"></span>
</div>
<!-- Backend Script -->
<script>
// App State
let selectedCountry = null;
let currentPage = null;
let currentUser = null;
let currentItemDetails = null;
let currentRentalRequest = null;
// Cities data
const cities = {
sa: ['الرياض', 'جدة', 'مكة المكرمة', 'المدينة المنورة', 'الدمام', 'الخبر', 'الطائف', 'بريدة', 'تبوك', 'نجران'],
eg: ['القاهرة', 'الجيزة', 'الإسكندرية', 'المنصورة', 'طنطا', 'المنيا', 'أسيوط', 'سوهاج', 'الأقصر', 'أسوان']
};
// Categories data
const categories = [
{ value: 'electronics', label: 'إلكترونيات' },
{ value: 'tools', label: 'أدوات' },
{ value: 'sports', label: 'رياضة' },
{ value: 'fashion', label: 'أزياء' },
{ value: 'home', label: 'أدوات منزلية' },
{ value: 'other', label: 'أخرى' }
];
// Rental statuses
const rentalStatuses = {
pending: { text: 'بانتظار الموافقة', color: 'bg-yellow-100 text-yellow-800' },
approved: { text: 'تمت الموافقة', color: 'bg-green-100 text-green-800' },
rejected: { text: 'تم الرفض', color: 'bg-red-100 text-red-800' },
completed: { text: 'مكتمل', color: 'bg-blue-100 text-blue-800' },
cancelled: { text: 'ملغي', color: 'bg-gray-100 text-gray-800' }
};
// Initialize the app
document.addEventListener('DOMContentLoaded', function() {
// Check if country is already selected
const savedCountry = localStorage.getItem('country');
if (savedCountry) {
selectedCountry = savedCountry;
initApp();
} else {
// Show country selection modal
document.getElementById('countryModal').classList.remove('hidden');
}
// Check if user is logged in
const savedUser = localStorage.getItem('user');
if (savedUser) {
currentUser = JSON.parse(savedUser);
updateAuthUI();
}
// Setup event listeners
setupEventListeners();
});
// Country selection
function selectCountry(country) {
selectedCountry = country;
localStorage.setItem('country', country);
document.getElementById('countryModal').classList.add('hidden');
initApp();
}
// Change country
function changeCountry() {
localStorage.removeItem('country');
selectedCountry = null;
document.getElementById('countryModal').classList.remove('hidden');
}
// Initialize the app after country selection
function initApp() {
if (!selectedCountry) return;
// Set currency and cities based on country
const currency = selectedCountry === 'sa' ? 'ريال' : 'جنيه';
const countryName = selectedCountry === 'sa' ? 'السعودية' : 'مصر';
document.getElementById('priceCurrency').textContent = currency;
document.getElementById('currentCountry').textContent = countryName;
document.getElementById('mobileCurrentCountry').textContent = countryName;
// Update footer description
document.getElementById('footerDescription').textContent =
`منصة لتأجير الأغراض الشخصية بين الأفراد في ${countryName}`;
// Populate city filters
populateCitySelect('cityFilter', 'كل المدن');
populateCitySelect('itemCity', 'اختر المدينة');
// Populate category filter
populateCategoryFilter();
// Load items for selected country
loadItems();
// Load home page by default
showHome();
}
// Populate city select dropdown
function populateCitySelect(selectId, defaultText) {
const select = document.getElementById(selectId);
select.innerHTML = '';
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = defaultText;
select.appendChild(defaultOption);
cities[selectedCountry].forEach(city => {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
select.appendChild(option);
});
}
// Populate category filter
function populateCategoryFilter() {
const select = document.getElementById('categoryFilter');
select.innerHTML = '';
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'كل التصنيفات';
select.appendChild(defaultOption);
categories.forEach(category => {
const option = document.createElement('option');
option.value = category.value;
option.textContent = category.label;
select.appendChild(option);
});
}
// Setup event listeners
function setupEventListeners() {
// Image preview for add item
document.getElementById('itemImage').addEventListener('change', function(e) {
if (e.target.files.length > 0) {
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById('previewImage').src = event.target.result;
document.getElementById('imagePreview').classList.remove('hidden');
};
reader.readAsDataURL(e.target.files[0]);
}
});
// City filter change
document.getElementById('cityFilter').addEventListener('change', function() {
loadItems();
});
// Category filter change
document.getElementById('categoryFilter').addEventListener('change', function() {
loadItems();
});
// Login/Register tab switch
document.getElementById('loginTabBtn').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('loginForm').classList.remove('hidden');
document.getElementById('registerForm').classList.add('hidden');
document.getElementById('loginTabBtn').classList.add('tab-active');
document.getElementById('registerTabBtn').classList.remove('tab-active');
});
document.getElementById('registerTabBtn').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('loginForm').classList.add('hidden');
document.getElementById('registerForm').classList.remove('hidden');
document.getElementById('loginTabBtn').classList.remove('tab-active');
document.getElementById('registerTabBtn').classList.add('tab-active');
});
// Form submissions
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
login();
});
document.getElementById('registerForm').addEventListener('submit', function(e) {
e.preventDefault();
register();
});
document.getElementById('addItemForm').addEventListener('submit', function(e) {
e.preventDefault();
addItem();
});
document.getElementById('editProfileForm').addEventListener('submit', function(e) {
e.preventDefault();
updateProfile();
});
document.getElementById('rentalRequestForm').addEventListener('submit', function(e) {
e.preventDefault();
submitRentalRequest();
});
}
// Show loading spinner
function showLoading() {
document.getElementById('loadingSpinner').classList.remove('hidden');
}
// Hide loading spinner
function hideLoading() {
document.getElementById('loadingSpinner').classList.add('hidden');
}
// Show success notification
function showSuccess(message) {
const notification = document.getElementById('successNotification');
document.getElementById('successMessage').textContent = message;
notification.classList.remove('hidden');
setTimeout(() => {
notification.classList.add('hidden');
}, 3000);
}
// Show error notification
function showError(message) {
const notification = document.getElementById('errorNotification');
document.getElementById('errorMessage').textContent = message;
notification.classList.remove('hidden');
setTimeout(() => {
notification.classList.add('hidden');
}, 3000);
}
// Toggle mobile menu
function toggleMobileMenu() {
document.getElementById('mobileMenu').classList.toggle('hidden');
}
// Update UI based on authentication status
function updateAuthUI() {
if (currentUser) {
document.getElementById('loginTab').classList.add('hidden');
document.getElementById('profileTab').classList.remove('hidden');
document.getElementById('logoutBtn').classList.remove('hidden');
document.getElementById('addItemTab').classList.remove('hidden');
document.getElementById('mobileLoginTab').classList.add('hidden');
document.getElementById('mobileProfileTab').classList.remove('hidden');
document.getElementById('mobileLogoutBtn').classList.remove('hidden');
} else {
document.getElementById('loginTab').classList.remove('hidden');
document.getElementById('profileTab').classList.add('hidden');
document.getElementById('logoutBtn').classList.add('hidden');
document.getElementById('addItemTab').classList.add('hidden');
document.getElementById('mobileLoginTab').classList.remove('hidden');
document.getElementById('mobileProfileTab').classList.add('hidden');
document.getElementById('mobileLogoutBtn').classList.add('hidden');
}
}
// Page navigation functions
function showHome() {
if (!selectedCountry) {
document.getElementById('countryModal').classList.remove('hidden');
return;
}
hideAllPages();
document.getElementById('homePage').classList.remove('hidden');
document.getElementById('homeTab').classList.add('tab-active');
document.getElementById('addItemTab').classList.remove('tab-active');
document.getElementById('loginTab').classList.remove('tab-active');
document.getElementById('profileTab').classList.remove('tab-active');
currentPage = 'home';
loadItems();
}
function showAddItem() {
if (!selectedCountry) {
document.getElementById('countryModal').classList.remove('hidden');
return;
}
if (!currentUser) {
showLogin();
showError('يجب تسجيل الدخول لإضافة غرض');
return;
}
hideAllPages();
document.getElementById('addItemPage').classList.remove('hidden');
document.getElementById('homeTab').classList.remove('tab-active');
document.getElementById('addItemTab').classList.add('tab-active');
document.getElementById('loginTab').classList.remove('tab-active');
document.getElementById('profileTab').classList.remove('tab-active');
currentPage = 'addItem';
}
function showLogin() {
if (!selectedCountry) {
document.getElementById('countryModal').classList.remove('hidden');
return;
}
hideAllPages();
document.getElementById('loginPage').classList.remove('hidden');
document.getElementById('homeTab').classList.remove('tab-active');
document.getElementById('addItemTab').classList.remove('tab-active');
document.getElementById('loginTab').classList.add('tab-active');
document.getElementById('profileTab').classList.remove('tab-active');
currentPage = 'login';
// Reset forms
document.getElementById('loginForm').reset();
document.getElementById('registerForm').reset();
document.getElementById('loginTabBtn').click();
}
function showProfile() {
if (!selectedCountry) {
document.getElementById('countryModal').classList.remove('hidden');
return;
}
if (!currentUser) {
showLogin();
showError('يجب تسجيل الدخول لعرض الملف الشخصي');
return;
}
hideAllPages();
document.getElementById('profilePage').classList.remove('hidden');
document.getElementById('homeTab').classList.remove('tab-active');
document.getElementById('addItemTab').classList.remove('tab-active');
document.getElementById('loginTab').classList.remove('tab-active');
document.getElementById('profileTab').classList.add('tab-active');
currentPage = 'profile';
loadProfileData();
}
function showEditProfile() {
hideAllPages();
document.getElementById('editProfilePage').classList.remove('hidden');
currentPage = 'editProfile';
// Populate form with current user data
document.getElementById('editProfileName').value = currentUser.name;
document.getElementById('editProfileEmail').value = currentUser.email;
document.getElementById('editProfilePhone').value = currentUser.phone;
}
function hideAllPages() {
const pages = ['homePage', 'addItemPage', 'loginPage', 'profilePage', 'editProfilePage'];
pages.forEach(page => {
document.getElementById(page).classList.add('hidden');
});
}
// ======================
// BACKEND FUNCTIONALITY
// ======================
// Simulated database
const db = {
users: [
{
id: 1,
name: "محمد أحمد",
email: "user@example.com",
phone: "0501234567",
password: "password123",
country: "sa",
createdAt: new Date()
},
{
id: 2,
name: "أحمد علي",
email: "ahmed@example.com",
phone: "0123456789",
password: "password123",
country: "eg",
createdAt: new Date()
}
],
items: [
{
id: 1,
title: "كاميرا احترافية",
description: "كاميرا كانون EOS 5D مارك الرابع مع عدسة 24-70mm، حالة ممتازة",
price: 150,
city: "الرياض",
category: "electronics",
image: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
ownerId: 1,
country: "sa",
createdAt: new Date()
},
{
id: 2,
title: "دراجة هوائية",
description: "دراجة هوائية ماركة تريك بحالة جيدة، مناسبة للطرق الوعرة",
price: 80,
city: "جدة",
category: "sports",
image: "https://images.unsplash.com/photo-1485965120184-e220f721d03e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
ownerId: 1,
country: "sa",
createdAt: new Date()
},
{
id: 3,
title: "ماكينة خياطة",
description: "ماكينة خياطة سنجر بحالة ممتازة مع جميع الملحقات",
price: 50,
city: "القاهرة",
category: "home",
image: "https://images.unsplash.com/photo-1539109132442-1bafc7a8a010?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
ownerId: 2,
country: "eg",
createdAt: new Date()
}
],
rentals: [
{
id: 1,
itemId: 1,
renterId: 2,
ownerId: 1,
startDate: "2023-06-15",
endDate: "2023-06-20",
totalPrice: 750,
status: "completed",
message: "أحتاج الكاميرا لتصوير حفل زفاف",
createdAt: new Date("2023-06-10")
},
{
id: 2,
itemId: 2,
renterId: 2,
ownerId: 1,
startDate: "2023-07-01",
endDate: "2023-07-05",
totalPrice: 320,
status: "approved",
message: "لرحلة عائلية",
createdAt: new Date("2023-06-25")
}
],
messages: [
{
id: 1,
rentalId: 1,
senderId: 2,
receiverId: 1,
message: "مرحباً، هل الكاميرا متاحة للإيجار في تاريخ 15 يونيو؟",
createdAt: new Date("2023-06-08T10:00:00")
},
{
id: 2,
rentalId: 1,
senderId: 1,
receiverId: 2,
message: "نعم متاحة، يمكنك حجزها الآن",
createdAt: new Date("2023-06-08T10:15:00")
},
{
id: 3,
rentalId: 1,
senderId: 2,
receiverId: 1,
message: "شكراً، سأقوم بحجزها الآن",
createdAt: new Date("2023-06-08T10:30:00")
}
]
};
// Generate unique ID
function generateId() {
return Math.floor(Math.random() * 1000000) + 1;
}
// Format date
function formatDate(dateString) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(dateString).toLocaleDateString('ar-EG', options);
}
// Calculate days between dates
function calculateDays(startDate, endDate) {
const start = new Date(startDate);
const end = new Date(endDate);
const diffTime = Math.abs(end - start);
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
}
// Login function
function login() {
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
if (!email || !password) {
showError('الرجاء إدخال البريد الإلكتروني وكلمة المرور');
return;
}
showLoading();
// Simulate API call delay
setTimeout(() => {
const user = db.users.find(u => u.email === email && u.password === password);
if (user) {
currentUser = user;
localStorage.setItem('user', JSON.stringify(user));
updateAuthUI();
showSuccess('تم تسجيل الدخول بنجاح');
showHome();
} else {
showError('البريد الإلكتروني أو كلمة المرور غير صحيحة');
}
hideLoading();
}, 1000);
}
// Register function
function register() {
const name = document.getElementById('registerName').value;
const email = document.getElementById('registerEmail').value;
const phone = document.getElementById('registerPhone').value;
const password = document.getElementById('registerPassword').value;
const confirmPassword = document.getElementById('registerConfirmPassword').value;
if (!name || !email || !phone || !password || !confirmPassword) {
showError('الرجاء ملء جميع الحقول');
return;
}
if (password !== confirmPassword) {
showError('كلمة المرور غير متطابقة');
return;
}
if (password.length < 6) {
showError('كلمة المرور يجب أن تكون 6 أحرف على الأقل');
return;
}
// Check if email already exists
const emailExists = db.users.some(u => u.email === email);
if (emailExists) {
showError('البريد الإلكتروني مسجل بالفعل');
return;
}
showLoading();
// Simulate API call delay
setTimeout(() => {
const newUser = {
id: generateId(),
name,
email,
phone,
password,
country: selectedCountry,
createdAt: new Date()
};
db.users.push(newUser);
currentUser = newUser;
localStorage.setItem('user', JSON.stringify(newUser));
updateAuthUI();
hideLoading();
showSuccess('تم إنشاء الحساب بنجاح');
document.getElementById('loginTabBtn').click();
document.getElementById('loginEmail').value = email;
document.getElementById('loginPassword').value = '';
}, 1500);
}
// Update profile function
function updateProfile() {
const name = document.getElementById('editProfileName').value;
const email = document.getElementById('editProfileEmail').value;
const phone = document.getElementById('editProfilePhone').value;
const password = document.getElementById('editProfilePassword').value;
const confirmPassword = document.getElementById('editProfileConfirmPassword').value;
if (!name || !email || !phone) {
showError('الرجاء ملء جميع الحقول المطلوبة');
return;
}
if (password && password.length < 6) {
showError('كلمة المرور يجب أن تكون 6 أحرف على الأقل');
return;
}
if (password && password !== confirmPassword) {
showError('كلمة المرور غير متطابقة');
return;
}
// Check if email already exists (excluding current user)
const emailExists = db.users.some(u => u.email === email && u.id !== currentUser.id);
if (emailExists) {
showError('البريد الإلكتروني مسجل بالفعل');
return;
}
showLoading();
// Simulate API call delay
setTimeout(() => {
// Update user in database
const userIndex = db.users.findIndex(u => u.id === currentUser.id);
if (userIndex !== -1) {
db.users[userIndex].name = name;
db.users[userIndex].email = email;
db.users[userIndex].phone = phone;
if (password) {
db.users[userIndex].password = password;
}
// Update current user
currentUser = db.users[userIndex];
localStorage.setItem('user', JSON.stringify(currentUser));
hideLoading();
showSuccess('تم تحديث الملف الشخصي بنجاح');
showProfile();
} else {
hideLoading();
showError('حدث خطأ أثناء تحديث الملف الشخصي');
}
}, 1500);
}
// Logout function
function logout() {
currentUser = null;
localStorage.removeItem('user');
updateAuthUI();
showSuccess('تم تسجيل الخروج بنجاح');
showHome();
}
// Add item function
function addItem() {
if (!currentUser) {
showError('يجب تسجيل الدخول لإضافة غرض');
showLogin();
return;
}
const title = document.getElementById('itemTitle').value;
const description = document.getElementById('itemDescription').value;
const price = parseFloat(document.getElementById('itemPrice').value);
const city = document.getElementById('itemCity').value;
const category = document.getElementById('itemCategory').value;
const imageFile = document.getElementById('itemImage').files[0];
if (!title || !description || !price || !city || !category) {
showError('الرجاء ملء جميع الحقول المطلوبة');
return;
}
if (price <= 0) {
showError('السعر يجب أن يكون أكبر من الصفر');
return;
}
showLoading();
// Simulate image upload and API call delay
setTimeout(() => {
// In a real app, we would upload the image to a storage service
// and get back a URL. For this demo, we'll use a placeholder.
const imageUrl = imageFile ?
URL.createObjectURL(imageFile) :
'https://via.placeholder.com/400x300?text=No+Image';
const newItem = {
id: generateId(),
title,
description,
price,
city,
category,
image: imageUrl,
ownerId: currentUser.id,
country: selectedCountry,
createdAt: new Date()
};
db.items.push(newItem);
// Reset form
document.getElementById('addItemForm').reset();
document.getElementById('imagePreview').classList.add('hidden');
hideLoading();
showSuccess('تم إضافة الغرض بنجاح');
showHome();
}, 1500);
}
// Load items for home page
function loadItems() {
if (!selectedCountry) return;
const cityFilter = document.getElementById('cityFilter').value;
const categoryFilter = document.getElementById('categoryFilter').value;
let items = db.items.filter(item => item.country === selectedCountry);
// Filter by city if selected
if (cityFilter) {
items = items.filter(item => item.city === cityFilter);
}
// Filter by category if selected
if (categoryFilter) {
items = items.filter(item => item.category === categoryFilter);
}
const itemsContainer = document.getElementById('itemsContainer');
itemsContainer.innerHTML = '';
if (items.length === 0) {
itemsContainer.innerHTML = `
<div class="col-span-full text-center py-12">
<i class="fas fa-box-open text-4xl text-gray-300 mb-4"></i>
<p class="text-gray-500">لا توجد أغراض متاحة للإيجار حالياً</p>
</div>
`;
return;
}
const currency = selectedCountry === 'sa' ? 'ريال' : 'جنيه';
items.forEach(item => {
const owner = db.users.find(u => u.id === item.ownerId);
const itemCard = document.createElement('div');
itemCard.className = 'bg-white rounded-lg shadow-md overflow-hidden item-card';
itemCard.innerHTML = `
<div class="h-48 bg-gray-200 relative cursor-pointer" onclick="showItemDetails(${item.id})">
<img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover">
<div class="absolute bottom-2 left-2 bg-blue-600 text-white px-2 py-1 rounded text-sm">
${item.price} ${currency} / يوم
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1 cursor-pointer" onclick="showItemDetails(${item.id})">${item.title}</h3>
<p class="text-gray-600 text-sm mb-2">${item.city}</p>
<p class="text-gray-700 text-sm mb-4 line-clamp-2">${item.description}</p>
<div class="flex justify-between items-center">
<button onclick="showItemDetails(${item.id})" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
<i class="fas fa-comment-dots mr-1"></i> تواصل
</button>
<span class="text-xs text-gray-500">${owner ? owner.name : 'مستخدم'}</span>
</div>
</div>
`;
itemsContainer.appendChild(itemCard);
});
}
// Show item details
function showItemDetails(itemId) {
const item = db.items.find(i => i.id === itemId);
if (!item) {
showError('الغرض غير موجود');
return;
}
currentItemDetails = item;
const owner = db.users.find(u => u.id === item.ownerId);
const currency = selectedCountry === 'sa' ? 'ريال' : 'جنيه';
// Set item details
document.getElementById('itemDetailsTitle').textContent = item.title;
document.getElementById('itemDetailsImage').src = item.image;
document.getElementById('itemDetailsImage').alt = item.title;
document.getElementById('itemDetailsPrice').textContent = item.price + ' ' + currency;
document.getElementById('itemDetailsCity').textContent = item.city;
document.getElementById('itemDetailsDescription').textContent = item.description;
document.getElementById('itemDetailsOwner').textContent = owner ? owner.name : 'مستخدم';
// Clear chat messages
document.getElementById('itemDetailsChat').innerHTML = '';
// Show rental button or chat based on user
const rentButton = document.getElementById('rentItemBtn');
if (currentUser && currentUser.id === item.ownerId) {
rentButton.classList.add('hidden');
} else {
rentButton.classList.remove('hidden');
}
// Load chat messages if rental exists
const rental = db.rentals.find(r => r.itemId === item.id &&
(r.renterId === currentUser?.id || r.ownerId === currentUser?.id));
if (rental) {
loadChatMessages(rental.id);
}
// Show modal
document.getElementById('itemDetailsModal').classList.remove('hidden');
}
// Close item details
function closeItemDetails() {
document.getElementById('itemDetailsModal').classList.add('hidden');
currentItemDetails = null;
}
// Load chat messages
function loadChatMessages(rentalId) {
const chatContainer = document.getElementById('itemDetailsChat');
chatContainer.innerHTML = '';
const messages = db.messages
.filter(m => m.rentalId === rentalId)
.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
messages.forEach(message => {
const isCurrentUser = message.senderId === currentUser?.id;
const messageDiv = document.createElement('div');
messageDiv.className = `flex ${isCurrentUser ? 'justify-end' : 'justify-start'}`;
messageDiv.innerHTML = `
<div class="chat-message bg-${isCurrentUser ? 'blue' : 'gray'}-100 rounded-lg px-4 py-2">
<p class="text-sm">${message.message}</p>
<p class="text-xs text-gray-500 mt-1 text-right">${formatDate(message.createdAt)}</p>
</div>
`;
chatContainer.appendChild(messageDiv);
});
// Scroll to bottom
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// Send message
function sendMessage() {
if (!currentUser) {
showError('يجب تسجيل الدخول لإرسال رسالة');
showLogin();
return;
}
if (!currentItemDetails) {
showError('لا يوجد غرض محدد');
return;
}
const messageInput = document.getElementById('itemDetailsMessage');
const messageText = messageInput.value.trim();
if (!messageText) {
showError('الرجاء إدخال رسالة');
return;
}
// Find or create rental
let rental = db.rentals.find(r => r.itemId === currentItemDetails.id &&
(r.renterId === currentUser.id || r.ownerId === currentUser.id));
if (!rental) {
// Create a new rental request
rental = {
id: generateId(),
itemId: currentItemDetails.id,
renterId: currentUser.id,
ownerId: currentItemDetails.ownerId,
startDate: '',
endDate: '',
totalPrice: 0,
status: 'pending',
message: messageText,
createdAt: new Date()
};
db.rentals.push(rental);
}
// Add message to chat
const newMessage = {
id: generateId(),
rentalId: rental.id,
senderId: currentUser.id,
receiverId: currentUser.id === rental.renterId ? rental.ownerId : rental.renterId,
message: messageText,
createdAt: new Date()
};
db.messages.push(newMessage);
// Clear input
messageInput.value = '';
// Reload chat messages
loadChatMessages(rental.id);
}
// Request rental
function requestRental() {
if (!currentUser) {
showError('يجب تسجيل الدخول لطلب الإيجار');
showLogin();
return;
}
if (!currentItemDetails) {
showError('لا يوجد غرض محدد');
return;
}
// Check if user is the owner
if (currentUser.id === currentItemDetails.ownerId) {
showError('لا يمكنك طلب إيجار غرضك الخاص');
return;
}
// Check if rental already exists
const existingRental = db.rentals.find(r => r.itemId === currentItemDetails.id && r.renterId === currentUser.id);
if (existingRental) {
showError('لديك طلب إيجار بالفعل لهذا الغرض');
return;
}
// Show rental request modal
document.getElementById('rentalRequestModal').classList.remove('hidden');
// Set default dates (today + 1 day, today + 3 days)
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
const threeDaysLater = new Date(today);
threeDaysLater.setDate(threeDaysLater.getDate() + 3);
document.getElementById('rentalStartDate').valueAsDate = tomorrow;
document.getElementById('rentalEndDate').valueAsDate = threeDaysLater;
}
// Close rental request modal
function closeRentalRequestModal() {
document.getElementById('rentalRequestModal').classList.add('hidden');
}
// Submit rental request
function submitRentalRequest() {
if (!currentUser || !currentItemDetails) {
showError('حدث خطأ أثناء تقديم الطلب');
return;
}
const startDate = document.getElementById('rentalStartDate').value;
const endDate = document.getElementById('rentalEndDate').value;
const message = document.getElementById('rentalMessage').value;
if (!startDate || !endDate) {
showError('الرجاء تحديد تاريخ البدء والانتهاء');
return;
}
const days = calculateDays(startDate, endDate);
if (days <= 0) {
showError('تاريخ الانتهاء يجب أن يكون بعد تاريخ البدء');
return;
}
const totalPrice = currentItemDetails.price * days;
showLoading();
// Simulate API call delay
setTimeout(() => {
// Create rental request
const newRental = {
id: generateId(),
itemId: currentItemDetails.id,
renterId: currentUser.id,
ownerId: currentItemDetails.ownerId,
startDate,
endDate,
totalPrice,
status: 'pending',
message,
createdAt: new Date()
};
db.rentals.push(newRental);
// Add initial message
const newMessage = {
id: generateId(),
rentalId: newRental.id,
senderId: currentUser.id,
receiverId: currentItemDetails.ownerId,
message: message || 'أريد استئجار هذا الغرض',
createdAt: new Date()
};
db.messages.push(newMessage);
hideLoading();
showSuccess('تم تقديم طلب الإيجار بنجاح');
closeRentalRequestModal();
closeItemDetails();
// Reload items to reflect the new rental
loadItems();
}, 1500);
}