762 lines
41 KiB
JavaScript
762 lines
41 KiB
JavaScript
'use client';
|
|
|
|
import { useState, useEffect, useMemo } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import toast, { Toaster } from 'react-hot-toast';
|
|
import Link from 'next/link';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import {
|
|
MapPin, Bed, Bath, Square, DollarSign, Heart, Share2,
|
|
Phone, Mail, MessageCircle, Calendar, Shield, Star,
|
|
ChevronLeft, ChevronRight, Check, X, Wifi, Car, Wind,
|
|
Camera, Home, Building2, Users, Clock, FileText,
|
|
LogIn, Loader2, ArrowLeft, ImageIcon, ChevronDown,
|
|
Layers, Sofa, DoorOpen, School, Hospital, Store,
|
|
TreePine, Building, GraduationCap, ExternalLink,
|
|
Smile, Ban, Wine, Dog, CassetteTape, Info
|
|
} from 'lucide-react';
|
|
import { getRentProperty, getSaleProperty, getSalePropertyById, bookReservation, getAvailableDateRanges, getOwnerContactInformation } from '../../utils/api';
|
|
import AuthService from '../../services/AuthService';
|
|
import { useFavorites } from '@/app/contexts/FavoritesContext';
|
|
import { BuildingTypeKeys, PropertyStatusKeys, extractCity } from '../../enums';
|
|
import PropertyRatingList from '@/app/components/ratings/PropertyRatingList';
|
|
import PropertyRatingForm from '@/app/components/ratings/PropertyRatingForm';
|
|
import StarRating from '@/app/components/ratings/StarRating';
|
|
import { getPropertyAverageRating } from '../../utils/ratings';
|
|
import dynamic from 'next/dynamic';
|
|
import 'leaflet/dist/leaflet.css';
|
|
|
|
const MapContainer = dynamic(() => import('react-leaflet').then(m => m.MapContainer), { ssr: false });
|
|
const TileLayer = dynamic(() => import('react-leaflet').then(m => m.TileLayer), { ssr: false });
|
|
const Marker = dynamic(() => import('react-leaflet').then(m => m.Marker), { ssr: false });
|
|
const Popup = dynamic(() => import('react-leaflet').then(m => m.Popup), { ssr: false });
|
|
|
|
function formatCurrency(amount) {
|
|
if (!amount || isNaN(amount)) return '0';
|
|
return Number(amount).toLocaleString('ar-SA');
|
|
}
|
|
|
|
function buildImageUrl(img) {
|
|
if (!img) return '';
|
|
const apiBase = typeof window !== 'undefined'
|
|
? (process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api')
|
|
: '';
|
|
if (img.startsWith('http')) return img;
|
|
return `${apiBase}${img.startsWith('/') ? '' : '/Pictures/'}${img}`;
|
|
}
|
|
|
|
const serviceLabels = {
|
|
Electricity: 'كهرباء', Internet: 'إنترنت', Heating: 'تدفئة', Water: 'ماء',
|
|
Pool: 'مسبح', PrivateGarden: 'حديقة خاصة', Parking: 'موقف سيارات',
|
|
Security247: 'حراسة 24 س', CentralHeating: 'تدفئة مركزية',
|
|
CentralAirConditioning: 'تكييف مركزي', EquippedKitchen: 'مطبخ مجهز',
|
|
MaidsRoom: 'غرفة خادمة', Elevator: 'مصعد', Gym: 'نادي رياضي',
|
|
Sauna: 'ساونا', Jacuzzi: 'جاكوزي', Balcony: 'بلكونة',
|
|
Rooftop: 'سطح', Furnished: 'مفروش', AirConditioning: 'تكييف',
|
|
SatelliteTV: 'تلفاز', Fireplace: 'مدفأة', StudyRoom: 'غرفة دراسة',
|
|
Storage: 'مستودع', Laundry: 'غرفة غسيل', SmartHome: 'منزل ذكي',
|
|
};
|
|
|
|
const termLabels = {
|
|
NoSmoking: 'ممنوع التدخين', NoAnimals: 'ممنوع الحيوانات الأليفة',
|
|
NoParties: 'ممنوع الحفلات', NoAlcohol: 'ممنوع الكحول',
|
|
SuitableForChildren: 'مناسب للأطفال', SuitableForFamilies: 'مناسب للعائلات',
|
|
SuitableForStudents: 'مناسب للطلاب', SuitableForElderly: 'مناسب لكبار السن',
|
|
OnlyFemales: 'إناث فقط', OnlyMales: 'ذكور فقط',
|
|
};
|
|
|
|
const proximityLabels = {
|
|
School: 'مدرسة', Hospital: 'مستشفى', Restaurant: 'مطعم',
|
|
University: 'جامعة', Park: 'حديقة', Mall: 'مركز تسوق',
|
|
Supermarket: 'سوبر ماركت', Pharmacy: 'صيدلية', Mosque: 'مسجد',
|
|
Bank: 'بنك', Airport: 'مطار', BusStation: 'موقف باص',
|
|
};
|
|
|
|
function mapApiDetail(item) {
|
|
if (!item) return null;
|
|
const info = item.propertyInformation || {};
|
|
const details = (() => { try { return JSON.parse(info.detailsJSON || '{}'); } catch { return {}; } })();
|
|
|
|
const isRent = item.dailyRent != null || item.monthlyRent != null;
|
|
const dailyPrice = item.dailyRent || 0;
|
|
const monthlyPrice = item.monthlyRent || 0;
|
|
const salePrice = item.price || 0;
|
|
const price = isRent ? (monthlyPrice || dailyPrice) : salePrice;
|
|
const priceUnit = isRent ? (monthlyPrice ? 'monthly' : 'daily') : 'sale';
|
|
|
|
const propType = BuildingTypeKeys[info.buildingType] ?? BuildingTypeKeys[item.type] ?? 'apartment';
|
|
const typeLabel = { apartment: 'شقة', villa: 'فيلا', house: 'بيت', sweet: 'سويت', studio: 'استوديو', office: 'مكتب', shop: 'متجر', warehouse: 'مستودع', farms: 'مزرعة', room: 'غرفة ضمن شقة' }[propType] || 'عقار';
|
|
const status = PropertyStatusKeys[info.status] ?? PropertyStatusKeys[item.status] ?? 'available';
|
|
const statusLabel = { available: 'متاح', booked: 'محجوز', notAvailable: 'غير متاح', maintenance: 'صيانة' }[status] || 'متاح';
|
|
|
|
const rawImages = Array.isArray(info.images) ? info.images : [];
|
|
const photosFallback = Array.isArray(details.photos) ? details.photos : [];
|
|
const allRaw = rawImages.length > 0 ? rawImages : photosFallback;
|
|
const images = allRaw.length > 0 ? allRaw.map(buildImageUrl) : [];
|
|
|
|
// Normalize services: Flutter sends list of strings or object with boolean values
|
|
const rawServices = details.services || {};
|
|
const serviceList = Array.isArray(rawServices) ? rawServices : Object.keys(rawServices).filter(k => rawServices[k]);
|
|
const serviceDetails = details.serviceDetails || {};
|
|
const services = {};
|
|
serviceList.forEach(s => { services[s] = serviceDetails[s] || true; });
|
|
|
|
const rawTerms = details.terms || {};
|
|
const terms = Array.isArray(rawTerms) ? rawTerms.reduce((acc, t) => ({ ...acc, [t]: true }), {}) : rawTerms;
|
|
|
|
// Try multiple key aliases like Flutter does
|
|
const floor = details.floorNumber ?? details.floor ?? 0;
|
|
const salons = details.numberOfSalons ?? details.salonsCount ?? details.salons ?? 0;
|
|
const balconies = details.numberOfBalconies ?? details.balconiesCount ?? details.balconies ?? 0;
|
|
const rawProximity = details.nearbyDistances || details.proximity || {};
|
|
const proximity = {};
|
|
Object.entries(rawProximity).forEach(([k, v]) => {
|
|
if (!v) return;
|
|
const normalizedKey = k.charAt(0).toUpperCase() + k.slice(1);
|
|
proximity[normalizedKey] = v;
|
|
});
|
|
const roomDetails = details.room || details.roomDetails || {};
|
|
|
|
return {
|
|
id: item.id,
|
|
propertyInformationId: info.id,
|
|
title: details.description || info.address || `عقار #${item.id}`,
|
|
description: details.description || info.description || '',
|
|
type: propType,
|
|
typeLabel,
|
|
price,
|
|
priceUnit,
|
|
priceDisplay: { daily: dailyPrice, monthly: monthlyPrice, sale: salePrice },
|
|
isRent,
|
|
location: {
|
|
city: extractCity(info.address) || 'دمشق',
|
|
address: info.address || '',
|
|
lat: parseFloat(info.cordsX) || 0,
|
|
lng: parseFloat(info.cordsY) || 0,
|
|
},
|
|
bedrooms: info.numberOfBedRooms || 0,
|
|
bathrooms: info.numberOfBathRooms || 0,
|
|
area: info.space || 0,
|
|
floor,
|
|
salons,
|
|
balconies,
|
|
images,
|
|
status,
|
|
statusLabel,
|
|
services,
|
|
terms,
|
|
proximity,
|
|
roomDetails,
|
|
details,
|
|
bookedCount: details.bookedCount || 0,
|
|
deposit: item.deposit || 0,
|
|
currencyId: item.currencyId,
|
|
isSmokeAllow: item.isSmokeAllow,
|
|
isVisitorAllow: item.isVisitorAllow,
|
|
specializedFor: item.specializedFor,
|
|
_raw: item,
|
|
};
|
|
}
|
|
|
|
export default function PropertyDetailsPage() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const { isFavorite, addFavorite, removeFavorite } = useFavorites();
|
|
|
|
const [property, setProperty] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [currentImage, setCurrentImage] = useState(0);
|
|
const [showLoginDialog, setShowLoginDialog] = useState(false);
|
|
const [bookingDates, setBookingDates] = useState({ start: '', end: '' });
|
|
const [bookingLoading, setBookingLoading] = useState(false);
|
|
const [bookingError, setBookingError] = useState(null);
|
|
const [bookingSuccess, setBookingSuccess] = useState(false);
|
|
const [availableRanges, setAvailableRanges] = useState([]);
|
|
const [favLoading, setFavLoading] = useState(false);
|
|
const [avgRating, setAvgRating] = useState(null);
|
|
const [showRatingForm, setShowRatingForm] = useState(false);
|
|
const [showContact, setShowContact] = useState(false);
|
|
const [contactInfo, setContactInfo] = useState(null);
|
|
const [ownerData, setOwnerData] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const id = params.id;
|
|
if (!id) return;
|
|
setLoading(true);
|
|
|
|
async function fetchProperty() {
|
|
try {
|
|
let data = null;
|
|
try { data = await getRentProperty(id); } catch {}
|
|
if (!data) { try { data = await getSalePropertyById(id) || await getSaleProperty(id); } catch {} }
|
|
if (!data) { try { data = await getSaleProperty(id); } catch {} }
|
|
|
|
if (data) {
|
|
const mapped = mapApiDetail(data);
|
|
setProperty(mapped);
|
|
if (mapped) fetchAvgRating(mapped.id);
|
|
}
|
|
} catch (err) {
|
|
console.error('[PropertyDetail] Failed:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchProperty();
|
|
}, [params.id]);
|
|
|
|
const fetchAvgRating = async (propId) => {
|
|
try {
|
|
const avg = await getPropertyAverageRating(propId);
|
|
setAvgRating(avg);
|
|
} catch {}
|
|
};
|
|
|
|
const fetchContactInfo = async () => {
|
|
if (!property) return;
|
|
try {
|
|
const info = await getOwnerContactInformation(property._raw?.propertyInformationId || property.id);
|
|
setContactInfo(info);
|
|
setShowContact(true);
|
|
} catch (err) {
|
|
toast.error('فشل تحميل معلومات الاتصال');
|
|
}
|
|
};
|
|
|
|
const handleFavorite = async () => {
|
|
if (!AuthService.isAuthenticated()) { setShowLoginDialog(true); return; }
|
|
if (!property) return;
|
|
setFavLoading(true);
|
|
try {
|
|
if (isFavorite(property.id)) {
|
|
await removeFavorite(property.id);
|
|
} else {
|
|
await addFavorite(property.id);
|
|
}
|
|
} catch (err) {
|
|
toast.error('حدث خطأ');
|
|
} finally {
|
|
setFavLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleBookNow = async () => {
|
|
if (!AuthService.isAuthenticated()) { setShowLoginDialog(true); return; }
|
|
if (!bookingDates.start || !bookingDates.end) {
|
|
setBookingError('يرجى تحديد تاريخ البداية والنهاية');
|
|
return;
|
|
}
|
|
setBookingLoading(true);
|
|
setBookingError(null);
|
|
try {
|
|
await bookReservation(property._raw?.propertyInformationId || property.id, bookingDates.start, bookingDates.end);
|
|
setBookingSuccess(true);
|
|
toast.success('تم إرسال طلب الحجز بنجاح');
|
|
} catch (err) {
|
|
setBookingError(err.message || 'فشل الحجز');
|
|
} finally {
|
|
setBookingLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRatingSuccess = () => {
|
|
setShowRatingForm(false);
|
|
if (property) fetchAvgRating(property.id);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
|
|
<p className="text-gray-600">جاري تحميل العقار...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!property) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
|
<div className="text-center max-w-md">
|
|
<div className="w-24 h-24 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Home className="w-12 h-12 text-amber-600" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">العقار غير موجود</h2>
|
|
<p className="text-gray-600 mb-6">لم يتم العثور على العقار المطلوب</p>
|
|
<Link href="/properties" className="inline-flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl font-medium hover:bg-amber-600">
|
|
<ArrowLeft className="w-5 h-5" />
|
|
العودة إلى العقارات
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isFav = isFavorite(property.id);
|
|
const isRoomType = property.type === 'room';
|
|
const isMostRequested = avgRating !== null && avgRating >= 4.5;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50" dir="rtl">
|
|
<Toaster position="top-center" reverseOrder={false} />
|
|
|
|
<div className="container mx-auto px-4 py-6">
|
|
<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="mb-6">
|
|
<Link href="/properties" className="inline-flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors">
|
|
<ArrowLeft className="w-5 h-5" />
|
|
العودة إلى العقارات
|
|
</Link>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2 space-y-5">
|
|
{/* Image Gallery */}
|
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-200">
|
|
<div className="relative bg-gray-900" style={{ minHeight: '380px', maxHeight: '460px' }}>
|
|
{property.images.length > 0 ? (
|
|
<img src={property.images[currentImage]} alt={property.title}
|
|
className="w-full h-full object-contain mx-auto"
|
|
style={{ minHeight: '380px', maxHeight: '460px' }} />
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center" style={{ minHeight: '420px' }}>
|
|
<div className="text-center">
|
|
<ImageIcon className="w-20 h-20 text-gray-500 mx-auto mb-2" />
|
|
<p className="text-gray-400 text-sm">لا توجد صور</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isMostRequested && (
|
|
<div className="absolute top-4 right-4 z-10">
|
|
<span className="bg-gradient-to-l from-amber-500 to-amber-600 text-white px-3 py-1.5 rounded-full text-xs font-bold shadow-lg flex items-center gap-1">
|
|
<Star className="w-3 h-3 fill-white" /> الأكثر طلباً
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{property.images.length > 1 && (
|
|
<>
|
|
<button onClick={() => setCurrentImage(prev => (prev - 1 + property.images.length) % property.images.length)}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/60 text-white p-3 rounded-full hover:bg-black/80 transition-all shadow-lg">
|
|
<ChevronRight className="w-5 h-5" />
|
|
</button>
|
|
<button onClick={() => setCurrentImage(prev => (prev + 1) % property.images.length)}
|
|
className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/60 text-white p-3 rounded-full hover:bg-black/80 transition-all shadow-lg">
|
|
<ChevronLeft className="w-5 h-5" />
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
<div className="absolute bottom-4 right-4 flex gap-2 z-10">
|
|
<span className="bg-black/70 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">{property.statusLabel}</span>
|
|
<span className="bg-black/70 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">{property.typeLabel}</span>
|
|
</div>
|
|
<div className="absolute bottom-4 left-4 bg-black/70 text-white px-3 py-1 rounded-full text-xs backdrop-blur-sm z-10">
|
|
{currentImage + 1} / {property.images.length || 1}
|
|
</div>
|
|
</div>
|
|
|
|
{property.images.length > 1 && (
|
|
<div className="flex gap-2 p-3 bg-gray-50 overflow-x-auto" style={{ scrollBehavior: 'smooth' }}>
|
|
{property.images.map((img, idx) => (
|
|
<button key={idx} onClick={() => setCurrentImage(idx)}
|
|
className={`flex-shrink-0 w-24 h-20 rounded-xl overflow-hidden border-2 transition-all duration-200 ${idx === currentImage ? 'border-amber-500 ring-2 ring-amber-200 shadow-md' : 'border-gray-200 opacity-60 hover:opacity-100'}`}>
|
|
<img src={img} alt="" className="w-full h-full object-cover" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
|
|
{/* Property Info */}
|
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="bg-white rounded-2xl p-5 shadow-sm border border-gray-200">
|
|
<div className="flex justify-between items-start mb-3">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="px-2 py-0.5 bg-amber-100 text-amber-800 rounded-full text-xs">{property.typeLabel}</span>
|
|
<span className={`px-2 py-0.5 rounded-full text-xs ${property.status === 'available' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>{property.statusLabel}</span>
|
|
</div>
|
|
<h1 className="text-xl font-bold text-gray-900">{property.title}</h1>
|
|
<div className="flex items-center gap-1 text-gray-500 text-xs mt-0.5">
|
|
<MapPin className="w-3 h-3" />
|
|
<span>{property.location.address || property.location.city}</span>
|
|
</div>
|
|
</div>
|
|
<button onClick={handleFavorite} disabled={favLoading}
|
|
className="p-1.5 rounded-full hover:bg-gray-100 transition-colors">
|
|
<Heart className={`w-5 h-5 ${isFav ? 'fill-red-500 text-red-500' : 'text-gray-400'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Price */}
|
|
<div className="bg-amber-50 rounded-xl p-3 mb-4">
|
|
{property.isRent ? (
|
|
<div className="flex flex-wrap gap-6 items-end">
|
|
{property.priceDisplay.monthly > 0 && (
|
|
<div>
|
|
<span className="text-2xl font-bold text-amber-600">{formatCurrency(property.priceDisplay.monthly)}</span>
|
|
<span className="text-gray-500 mr-1">ل.س / شهرياً</span>
|
|
</div>
|
|
)}
|
|
{property.priceDisplay.daily > 0 && (
|
|
<div>
|
|
<span className="text-2xl font-bold text-amber-600">{formatCurrency(property.priceDisplay.daily)}</span>
|
|
<span className="text-gray-500 mr-1">ل.س / يومياً</span>
|
|
</div>
|
|
)}
|
|
{property.deposit > 0 && (
|
|
<div className="text-sm text-gray-500">
|
|
<span className="font-medium">تأمين:</span> {formatCurrency(property.deposit)} ل.س
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<span className="text-2xl font-bold text-blue-600">{formatCurrency(property.price)}</span>
|
|
<span className="text-gray-500 mr-1">ل.س</span>
|
|
<span className="text-sm text-gray-400 mr-2">للبيع</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Specs Tiles */}
|
|
<div className="grid grid-cols-3 md:grid-cols-6 gap-1.5 mb-4">
|
|
{property.bedrooms > 0 && (
|
|
<div className="bg-gray-50 rounded-lg p-2 text-center">
|
|
<Bed className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
|
|
<div className="font-bold text-gray-900 text-sm">{property.bedrooms}</div>
|
|
<div className="text-[10px] text-gray-500">غرف نوم</div>
|
|
</div>
|
|
)}
|
|
{property.bathrooms > 0 && (
|
|
<div className="bg-gray-50 rounded-lg p-2 text-center">
|
|
<Bath className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
|
|
<div className="font-bold text-gray-900 text-sm">{property.bathrooms}</div>
|
|
<div className="text-[10px] text-gray-500">حمامات</div>
|
|
</div>
|
|
)}
|
|
{property.area > 0 && (
|
|
<div className="bg-gray-50 rounded-lg p-2 text-center">
|
|
<Square className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
|
|
<div className="font-bold text-gray-900 text-sm">{property.area}</div>
|
|
<div className="text-[10px] text-gray-500">م²</div>
|
|
</div>
|
|
)}
|
|
{property.floor > 0 && (
|
|
<div className="bg-gray-50 rounded-lg p-2 text-center">
|
|
<Layers className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
|
|
<div className="font-bold text-gray-900 text-sm">{property.floor}</div>
|
|
<div className="text-[10px] text-gray-500">طابق</div>
|
|
</div>
|
|
)}
|
|
{property.salons > 0 && (
|
|
<div className="bg-gray-50 rounded-lg p-2 text-center">
|
|
<Sofa className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
|
|
<div className="font-bold text-gray-900 text-sm">{property.salons}</div>
|
|
<div className="text-[10px] text-gray-500">صالونات</div>
|
|
</div>
|
|
)}
|
|
{property.balconies > 0 && (
|
|
<div className="bg-gray-50 rounded-lg p-2 text-center">
|
|
<DoorOpen className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
|
|
<div className="font-bold text-gray-900 text-sm">{property.balconies}</div>
|
|
<div className="text-[10px] text-gray-500">بلكونات</div>
|
|
</div>
|
|
)}
|
|
{avgRating !== null && avgRating > 0 && (
|
|
<div className="bg-gray-50 rounded-lg p-2 text-center">
|
|
<Star className="w-4 h-4 text-amber-500 mx-auto mb-0.5 fill-amber-500" />
|
|
<div className="font-bold text-gray-900 text-sm">{avgRating.toFixed(1)}</div>
|
|
<div className="text-[10px] text-gray-500">التقييم</div>
|
|
</div>
|
|
)}
|
|
{property.bookedCount > 0 && (
|
|
<div className="bg-gray-50 rounded-lg p-2 text-center">
|
|
<Calendar className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
|
|
<div className="font-bold text-gray-900 text-sm">{property.bookedCount}</div>
|
|
<div className="text-[10px] text-gray-500">حجوزات</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Description */}
|
|
{property.description && (
|
|
<div className="mb-4">
|
|
<h3 className="font-bold text-gray-900 mb-1 text-sm">الوصف</h3>
|
|
<p className="text-gray-600 text-sm leading-relaxed">{property.description}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Features */}
|
|
<div className="flex flex-wrap gap-1.5 mb-4">
|
|
{property.isSmokeAllow && <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded-full text-xs border flex items-center gap-1"><Wind className="w-3 h-3" /> يسمح بالتدخين</span>}
|
|
{!property.isSmokeAllow && <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded-full text-xs border flex items-center gap-1"><Ban className="w-3 h-3" /> ممنوع التدخين</span>}
|
|
{property.isVisitorAllow && <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded-full text-xs border flex items-center gap-1"><Users className="w-3 h-3" /> يسمح بالزوار</span>}
|
|
{property.specializedFor && <span className="px-2 py-0.5 bg-amber-50 text-amber-700 rounded-full text-xs border border-amber-200 flex items-center gap-1"><Users className="w-3 h-3" /> {property.specializedFor}</span>}
|
|
</div>
|
|
|
|
{/* Services with detail text */}
|
|
{property.services && (Array.isArray(property.services) ? property.services.length > 0 : Object.keys(property.services).length > 0) && (
|
|
<div className="mb-4">
|
|
<h3 className="font-bold text-gray-900 mb-2 text-sm">الخدمات</h3>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{Array.isArray(property.services) ? (
|
|
property.services.map((svc, i) => (
|
|
<span key={i} className="px-3 py-1 bg-green-50 text-green-700 rounded-full text-sm border border-green-200 flex items-center gap-1">
|
|
{serviceLabels[svc] || svc}
|
|
</span>
|
|
))
|
|
) : (
|
|
Object.entries(property.services).map(([key, val]) => {
|
|
if (!val) return null;
|
|
const detail = typeof val === 'object' && val.detail ? val.detail : (typeof val === 'string' ? val : null);
|
|
return (
|
|
<span key={key} className="px-3 py-1 bg-green-50 text-green-700 rounded-full text-sm border border-green-200 flex items-center gap-1">
|
|
{serviceLabels[key] || key}
|
|
{detail && <span className="text-green-400">· {detail}</span>}
|
|
</span>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Room Details (only for room type) */}
|
|
{isRoomType && Object.keys(property.roomDetails).length > 0 && (
|
|
<div className="mb-4 bg-blue-50 rounded-xl p-3">
|
|
<h3 className="font-bold text-gray-900 mb-2 text-sm flex items-center gap-2">
|
|
<Info className="w-4 h-4 text-blue-500" />
|
|
تفاصيل الغرفة
|
|
</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
|
|
{(() => {
|
|
const rd = property.roomDetails;
|
|
const items = [];
|
|
if (rd.areaType) items.push({ label: 'نوع المساحة', value: rd.areaType === 'private room' ? 'غرفة خاصة' : rd.areaType === 'shared room' ? 'غرفة مشتركة' : rd.areaType });
|
|
if (rd.peopleAllowed) items.push({ label: 'عدد الأشخاص', value: rd.peopleAllowed });
|
|
if (rd.furnitureDetails || rd.furniture) items.push({ label: 'الأثاث', value: rd.furnitureDetails || rd.furniture });
|
|
if (rd.entranceType) items.push({ label: 'نوع المدخل', value: rd.entranceType === 'shared entrance' ? 'مدخل مشترك' : rd.entranceType === 'independent entrance' ? 'مدخل مستقل' : rd.entranceType });
|
|
if (rd.bathroomType) items.push({ label: 'الحمام', value: rd.bathroomType === 'room specific' ? 'خاص بالغرفة' : rd.bathroomType === 'shared' ? 'مشترك' : rd.bathroomType });
|
|
if (rd.kitchenType) items.push({ label: 'المطبخ', value: rd.kitchenType === 'shared' ? 'مشترك' : rd.kitchenType === 'not available' ? 'غير متوفر' : rd.kitchenType });
|
|
if (rd.homeResidentsCount ?? rd.residents) items.push({ label: 'عدد السكان', value: rd.homeResidentsCount ?? rd.residents });
|
|
if (rd.currentPopulationGender) items.push({ label: 'جنس السكان', value: rd.currentPopulationGender === 'men' ? 'رجال' : rd.currentPopulationGender === 'women' ? 'نساء' : rd.currentPopulationGender === 'family' ? 'عائلة' : rd.currentPopulationGender });
|
|
if (rd.dedicatedTo) items.push({ label: 'مخصص لـ', value: rd.dedicatedTo === 'men only' ? 'رجال فقط' : rd.dedicatedTo === 'women only' ? 'نساء فقط' : rd.dedicatedTo === 'families only' ? 'عائلات فقط' : rd.dedicatedTo === 'everyone' ? 'الجميع' : rd.dedicatedTo });
|
|
if (rd.hasRestrictedOwnerAreas !== undefined) items.push({ label: 'مناطق ممنوعة', value: rd.hasRestrictedOwnerAreas ? 'نعم' : 'لا' });
|
|
if (rd.hasChildren !== undefined) items.push({ label: 'أطفال', value: rd.hasChildren ? 'مسموح' : 'غير مسموح' });
|
|
if (rd.hasPets !== undefined) items.push({ label: 'حيوانات أليفة', value: rd.hasPets ? 'مسموح' : 'غير مسموح' });
|
|
if (rd.languageDialect) items.push({ label: 'اللغة', value: rd.languageDialect });
|
|
if (rd.visitorsAllowed !== undefined) items.push({ label: 'الزوار', value: rd.visitorsAllowed ? 'مسموح' : 'ممنوع' });
|
|
if (rd.quietTimesEnabled ?? rd.quietTimes) items.push({ label: 'أوقات الهدوء', value: rd.quietTimesDetails || rd.quietTimes || (rd.quietTimesEnabled ? 'مفعلة' : '') });
|
|
return items.map((item, i) => (
|
|
<div key={i} className="bg-white rounded-lg p-2 text-center">
|
|
<div className="text-xs text-gray-500">{item.label}</div>
|
|
<div className="font-medium text-sm">{item.value}</div>
|
|
</div>
|
|
));
|
|
})()}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Proximity */}
|
|
{Object.keys(property.proximity).length > 0 && (
|
|
<div className="mb-4">
|
|
<h3 className="font-bold text-gray-900 mb-2 text-sm">القرب من الخدمات</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-1.5">
|
|
{Object.entries(property.proximity).map(([key, val]) => {
|
|
if (!val) return null;
|
|
const dist = typeof val === 'object' ? val.distance : val;
|
|
return (
|
|
<div key={key} className="bg-gray-50 rounded-lg p-2 flex items-center gap-1.5">
|
|
{key === 'School' && <School className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
|
|
{key === 'Hospital' && <Hospital className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
|
|
{key === 'Restaurant' && <Store className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
|
|
{key === 'University' && <GraduationCap className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
|
|
{key === 'Park' && <TreePine className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
|
|
{key === 'Mall' && <Building className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
|
|
{!['School','Hospital','Restaurant','University','Park','Mall'].includes(key) && <MapPin className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
|
|
<div>
|
|
<div className="text-xs font-medium text-gray-900">{proximityLabels[key] || key}</div>
|
|
<div className="text-[10px] text-gray-500">{dist} {typeof dist === 'number' ? 'كم' : ''}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Terms as checklist */}
|
|
{Object.keys(property.terms).length > 0 && (
|
|
<div className="mb-4">
|
|
<h3 className="font-bold text-gray-900 mb-2 text-sm">الشروط</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-1.5">
|
|
{Object.entries(property.terms).map(([key, val]) => {
|
|
if (!val) return null;
|
|
return (
|
|
<div key={key} className="flex items-center gap-1.5 p-1.5 bg-gray-50 rounded-lg">
|
|
{key.startsWith('No') || key.startsWith('Only') ? (
|
|
<Ban className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />
|
|
) : (
|
|
<Check className="w-3.5 h-3.5 text-green-500 flex-shrink-0" />
|
|
)}
|
|
<span className="text-xs text-gray-700">{termLabels[key] || key}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
|
|
{/* Map */}
|
|
{property.location.lat && property.location.lng && (
|
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-200">
|
|
<div className="h-64">
|
|
<MapContainer center={[property.location.lat, property.location.lng]} zoom={14} className="h-full w-full" scrollWheelZoom={false}>
|
|
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
|
<Marker position={[property.location.lat, property.location.lng]}>
|
|
<Popup>{property.title}</Popup>
|
|
</Marker>
|
|
</MapContainer>
|
|
</div>
|
|
<div className="p-3 bg-amber-50 text-center text-sm text-amber-700 flex items-center justify-center gap-2">
|
|
<Info className="w-4 h-4" />
|
|
<span>موقع تقريبي — يظهر الموقع الدقيق بعد تأكيد الحجز</span>
|
|
</div>
|
|
<div className="p-3 border-t border-gray-100">
|
|
<a href={`https://www.google.com/maps?q=${property.location.lat},${property.location.lng}`} target="_blank" rel="noopener noreferrer"
|
|
className="flex items-center justify-center gap-2 text-blue-600 hover:text-blue-700 font-medium text-sm">
|
|
<ExternalLink className="w-4 h-4" />
|
|
فتح في Google Maps
|
|
</a>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Ratings Section */}
|
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
|
|
<PropertyRatingList propertyId={property._raw?.propertyInformationId || property.id} />
|
|
</motion.div>
|
|
|
|
{AuthService.isAuthenticated() && !showRatingForm && (
|
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
|
|
className="bg-amber-50 border-2 border-dashed border-amber-200 rounded-2xl p-6 text-center cursor-pointer hover:bg-amber-100 transition-colors"
|
|
onClick={() => setShowRatingForm(true)}>
|
|
<Star className="w-10 h-10 text-amber-500 mx-auto mb-2" />
|
|
<h3 className="font-bold text-amber-800 text-lg mb-1">قيّم هذا العقار</h3>
|
|
<p className="text-amber-600 text-sm">شارك تجربتك مع المستأجرين الآخرين</p>
|
|
</motion.div>
|
|
)}
|
|
|
|
{showRatingForm && (
|
|
<PropertyRatingForm
|
|
reservationId={property._raw?.propertyInformationId || property.id}
|
|
onSuccess={handleRatingSuccess}
|
|
onCancel={() => setShowRatingForm(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-4">
|
|
{/* Booking Card */}
|
|
{property.isRent && (
|
|
<motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="bg-white rounded-2xl p-5 shadow-sm border border-gray-200 sticky top-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Calendar className="w-4 h-4 text-amber-500" />
|
|
<h3 className="font-bold text-gray-900">حجز العقار</h3>
|
|
</div>
|
|
|
|
{bookingSuccess ? (
|
|
<div className="text-center py-3">
|
|
<div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<Check className="w-7 h-7 text-green-600" />
|
|
</div>
|
|
<h4 className="font-bold text-green-700 text-sm mb-1">تم إرسال طلب الحجز</h4>
|
|
<p className="text-xs text-gray-500">سيتم مراجعة طلبك من قبل المالك</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="space-y-2 mb-3">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">من تاريخ</label>
|
|
<input type="date" value={bookingDates.start} onChange={e => setBookingDates(prev => ({ ...prev, start: e.target.value }))}
|
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">إلى تاريخ</label>
|
|
<input type="date" value={bookingDates.end} onChange={e => setBookingDates(prev => ({ ...prev, end: e.target.value }))}
|
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500" />
|
|
</div>
|
|
</div>
|
|
|
|
{bookingError && (
|
|
<div className="bg-red-50 text-red-600 p-2.5 rounded-xl text-xs mb-3">{bookingError}</div>
|
|
)}
|
|
|
|
<button onClick={handleBookNow} disabled={bookingLoading}
|
|
className="w-full bg-amber-500 hover:bg-amber-600 text-white py-2.5 rounded-xl font-bold text-sm transition-all disabled:opacity-50 flex items-center justify-center gap-2">
|
|
{bookingLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Calendar className="w-4 h-4" />}
|
|
{bookingLoading ? 'جاري الحجز...' : 'حجز الآن'}
|
|
</button>
|
|
</>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Contact Card */}
|
|
<motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="bg-white rounded-2xl p-5 shadow-sm border border-gray-200">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Phone className="w-4 h-4 text-amber-500" />
|
|
<h3 className="font-bold text-gray-900">معلومات المالك</h3>
|
|
</div>
|
|
|
|
{showContact && contactInfo ? (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2.5 p-2.5 bg-gray-50 rounded-xl">
|
|
<Phone className="w-4 h-4 text-gray-600 flex-shrink-0" />
|
|
<span className="font-medium text-gray-900 text-sm" dir="ltr">{contactInfo.phone || contactInfo.phoneNumber || '—'}</span>
|
|
</div>
|
|
{contactInfo.whatsAppNumber && (
|
|
<a href={`https://wa.me/${contactInfo.whatsAppNumber.replace(/[^0-9]/g, '')}`} target="_blank" rel="noopener noreferrer"
|
|
className="flex items-center gap-2.5 p-2.5 bg-green-50 rounded-xl hover:bg-green-100 transition-colors">
|
|
<MessageCircle className="w-4 h-4 text-green-600 flex-shrink-0" />
|
|
<span className="font-medium text-gray-900 text-sm" dir="ltr">{contactInfo.whatsAppNumber}</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<button onClick={fetchContactInfo}
|
|
className="w-full bg-gray-800 hover:bg-gray-900 text-white py-2.5 rounded-xl font-medium text-sm transition-colors flex items-center justify-center gap-2">
|
|
<Phone className="w-4 h-4" />
|
|
عرض معلومات الاتصال
|
|
</button>
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Login Dialog */}
|
|
{showLoginDialog && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowLoginDialog(false)}>
|
|
<div className="bg-white rounded-2xl p-6 max-w-sm text-center mx-4" onClick={e => e.stopPropagation()}>
|
|
<div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<LogIn className="w-8 h-8 text-amber-600" />
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-2">تسجيل الدخول مطلوب</h3>
|
|
<p className="text-gray-500 mb-4">للحجز أو إضافة المفضلة، سجل دخولك.</p>
|
|
<Link href="/login" className="block w-full bg-amber-500 text-white py-3 rounded-xl font-medium mb-2 hover:bg-amber-600">تسجيل الدخول</Link>
|
|
<Link href="/auth/choose-role" className="block w-full bg-gray-100 py-3 rounded-xl font-medium hover:bg-gray-200">إنشاء حساب</Link>
|
|
<button onClick={() => setShowLoginDialog(false)} className="mt-3 text-gray-400 hover:text-gray-600">إلغاء</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|