Fix booking: use correct BookReservation endpoint + price from selected dates

- Fixed endpoint: /Reservations/BookReservation/book (was /Reservations/Book)
- bookReservation now takes (propertyId, startDate, endDate) params
- Pricing updates dynamically based on selected date range
- Deposit read from API response instead of hardcoded
- Removed demo fallback that always showed success

app/property/[id]/page.js

@@ -277,17 +277,20 @@ export default function PropertyDetailsPage() {
       return;
     }
 
+    const propId = property?._raw?.id || parseInt(params.id);
+    const startDate = new Date(bookingDates.start).toISOString();
+    const endDate = new Date(bookingDates.end).toISOString();
+
+    console.log('[Booking] Reserving:', { propertyId: propId, startDate, endDate });
+
     try {
-      await bookReservation({
+      const res = await bookReservation(propId, startDate, endDate);
-        propertyId: parseInt(params.id),
+      console.log('[Booking] Success:', res);
-        startDate: new Date(bookingDates.start).toISOString(),
-        endDate: new Date(bookingDates.end).toISOString(),
-      });
       setBookingSuccess(true);
+      toast.success('تم إرسال طلب الحجز بنجاح!');
     } catch (err) {
-      // If API fails, show success anyway for demo purposes
+      console.error('[Booking] Failed:', err);
-      console.warn('Booking API failed:', err);
+      setBookingError(err.message || 'فشل في إرسال طلب الحجز');
-      setBookingSuccess(true);
     }
   };
 
@@ -673,18 +676,28 @@ export default function PropertyDetailsPage() {
                 </div>
 
                 <div className="bg-gray-50 p-4 rounded-xl mb-6">
+                  {(() => {
+                    const days = bookingDates.start && bookingDates.end
+                      ? Math.ceil((new Date(bookingDates.end) - new Date(bookingDates.start)) / (1000 * 60 * 60 * 24))
+                      : 0;
+                    const effectiveDays = days > 0 ? days : 1;
+                    return (
+                      <>
                         <div className="flex justify-between mb-2">
-                    <span className="text-gray-600">السعر لـ {selectedDuration} أيام</span>
+                          <span className="text-gray-600">السعر لـ {effectiveDays} يوم{effectiveDays > 1 ? 'اً' : 'اً'}</span>
-                    <span className="font-bold text-gray-900">{formatCurrency(property.price * selectedDuration)}</span>
+                          <span className="font-bold text-gray-900">{formatCurrency(property.price * effectiveDays)}</span>
                         </div>
                         <div className="flex justify-between mb-2">
                           <span className="text-gray-600">سلفة ضمان</span>
-                    <span className="font-bold text-gray-900">{formatCurrency(500000)}</span>
+                          <span className="font-bold text-gray-900">{formatCurrency(property._raw?.deposit || 0)}</span>
                         </div>
                         <div className="flex justify-between pt-2 border-t border-gray-200 font-bold">
                           <span className="text-gray-900">الإجمالي</span>
-                    <span className="text-gray-900">{formatCurrency(property.price * selectedDuration + 500000)}</span>
+                          <span className="text-gray-900">{formatCurrency(property.price * effectiveDays + (property._raw?.deposit || 0))}</span>
                         </div>
+                      </>
+                    );
+                  })()}
                 </div>
 
                 {bookingError && (

app/utils/api.js

@@ -149,10 +149,11 @@ export async function checkAvailability(propertyId, fromDate = null, toDate = nu
   return apiFetch(`/Reservations/GetAvailable/${propertyId}${query ? `?${query}` : ''}`);
 }
 
-export async function bookReservation(data) {
+export async function bookReservation(propertyId, startDate, endDate) {
-  return apiFetch('/Reservations/Book', {
+  console.log('[API] Booking reservation:', { propertyId, startDate, endDate });
+  return apiFetch('/Reservations/BookReservation/book', {
     method: 'POST',
-    body: JSON.stringify(data),
+    body: JSON.stringify({ propertyId, startDate, endDate }),
   });
 }