payment api

app/reservations/page.js

@@ -390,17 +390,37 @@
 
 
 
-
-
-
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
+import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import {
-  Calendar, Clock, CheckCircle, XCircle, Eye, Loader2, Search,
+  Calendar,
-  MapPin, DollarSign, Home, ArrowLeft, CreditCard, Timer, Star, Flag,
+  Clock,
+  CheckCircle,
+  XCircle,
+  Eye,
+  Loader2,
+  Search,
+  MapPin,
+  DollarSign,
+  Home,
+  ArrowLeft,
+  CreditCard,
+  Timer,
+  Star,
+  Flag,
+  Banknote,
+  Building,
+  ArrowLeftRight,
+  Check,
+  X,
+  Info,
+  Landmark,
+  Phone,
+  Wallet,
 } from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
 import AuthService from '../services/AuthService';
@@ -420,10 +440,52 @@ const STATUS_UI = {
   cancelled:        { label: 'ملغي', color: 'bg-gray-100 text-gray-800', icon: XCircle },
 };
 
+const PAYMENT_METHODS = [
+  {
+    id: 'cash',
+    label: 'الدفع النقدي',
+    desc: 'ادفع الآن عبر شام كاش مع تأكيد تلقائي للحجز',
+    icon: Banknote,
+    active: true,
+  },
+  {
+    id: 'office',
+    label: 'نقداً',
+    desc: 'ادفع في مكتب المنصة. يتم التأكيد لاحقاً',
+    icon: Building,
+    active: true,
+  },
+  {
+    id: 'transfer',
+    label: 'تحويل داخلي',
+    desc: 'حول من حساب داخلي ثم أرسل المرجع',
+    icon: ArrowLeftRight,
+    active: false,
+  },
+  {
+    id: 'electronic',
+    label: 'دفع إلكتروني',
+    desc: 'سيتم تفعيل الدفع الإلكتروني والتحويل لاحقاً',
+    icon: CreditCard,
+    active: false,
+  },
+];
+
 function statusLabel(code) { return STATUS_UI[STATUS_MAP[code]]?.label ?? String(code); }
 function statusColor(code) { return STATUS_UI[STATUS_MAP[code]]?.color ?? 'bg-gray-100 text-gray-700'; }
 function statusIcon(code) { return STATUS_UI[STATUS_MAP[code]]?.icon ?? Clock; }
 
+function formatCurrency(v, sign = 'ل.س') {
+  return `${sign} ${Number(v ?? 0).toLocaleString()}`;
+}
+
+function formatDate(date) {
+  if (!date) return '';
+  const d = new Date(date);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleDateString('en-GB');
+}
+
 function StatusBadge({ code }) {
   const Icon = statusIcon(code);
   return (
@@ -594,6 +656,247 @@ function CountdownTimer({ deadline }) {
   return <span className="text-amber-600 text-sm font-mono font-bold" dir="ltr">{pad(h)}:{pad(m)}:{pad(s)}</span>;
 }
 
+function PaymentDialog({
+  isOpen,
+  reservation,
+  onClose,
+  selectedPayment,
+  onSelectPayment,
+  onConfirmPay,
+  payingId,
+}) {
+  const [showCashDialog, setShowCashDialog] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) setShowCashDialog(false);
+  }, [isOpen, reservation?.id]);
+
+  if (!isOpen || !reservation) return null;
+
+  const amount = reservation.depositAmount || reservation.totalPrice || 0;
+  const currencySign = reservation.currencySign || 'ل.س';
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 py-8"
+        onClick={onClose}
+      >
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          className="w-full max-w-2xl rounded-3xl bg-white shadow-2xl border border-gray-200 overflow-hidden"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="p-6 border-b border-gray-100">
+            <div className="flex items-start gap-4 mb-4">
+              <div className="w-14 h-14 bg-amber-100 rounded-2xl flex items-center justify-center shrink-0">
+                <Home className="w-7 h-7 text-amber-600" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <h3 className="text-xl font-bold text-gray-900 mb-1">
+                  {reservation.propertyName}
+                </h3>
+                {(reservation.propertyAddress || reservation.propertyCity) && (
+                  <p className="text-sm text-gray-500 flex items-center gap-1">
+                    <MapPin className="w-3.5 h-3.5" />
+                    {[reservation.propertyCity, reservation.propertyAddress].filter(Boolean).join(' - ')}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4 text-sm text-gray-600">
+              <span className="flex items-center gap-1.5">
+                <Calendar className="w-4 h-4 text-gray-400" />
+                {formatDate(reservation.startDate)} - {formatDate(reservation.endDate)}
+              </span>
+              <span className="flex items-center gap-1.5">
+                <Clock className="w-4 h-4 text-gray-400" />
+                #{reservation.reservationId || reservation.id}
+              </span>
+            </div>
+          </div>
+
+          <div className="px-6 py-5 border-b border-gray-100">
+            <div className="text-center">
+              <p className="text-sm text-gray-500 mb-1">مبلغ التأمين (الرعبون)</p>
+              <p className="text-4xl font-bold text-amber-600">
+                {formatCurrency(amount, currencySign)}
+              </p>
+              <p className="text-xs text-gray-400 mt-2">
+                يتم دفع التأمين إلى المنصة وليس إلى المالك
+              </p>
+            </div>
+          </div>
+
+          <div className="px-6 py-4 bg-amber-50 border-b border-amber-100">
+            <div className="flex items-start gap-3">
+              <Info className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
+              <p className="text-sm text-amber-800 leading-relaxed">
+                الدفع النقدي فقط هو المتاح. سيتم تفعيل الدفع الإلكتروني والتحويل لاحقاً.
+              </p>
+            </div>
+          </div>
+
+          <div className="px-6 py-5 border-b border-gray-100">
+            <p className="text-sm font-bold text-gray-700 mb-3">طريقة الدفع</p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {PAYMENT_METHODS.map((method) => {
+                const isSelected = selectedPayment === method.id;
+                const Icon = method.icon;
+
+                return (
+                  <button
+                    key={method.id}
+                    type="button"
+                    disabled={!method.active}
+                    onClick={() => method.active && onSelectPayment(method.id)}
+                    className={`relative flex items-start gap-3 p-4 rounded-2xl border-2 text-right transition-all ${
+                      !method.active
+                        ? 'border-gray-100 bg-gray-50 opacity-50 cursor-not-allowed'
+                        : isSelected
+                          ? 'border-amber-500 bg-amber-50 shadow-sm'
+                          : 'border-gray-200 bg-white hover:border-amber-300 cursor-pointer'
+                    }`}
+                  >
+                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${
+                      isSelected ? 'bg-amber-500 text-white' : 'bg-gray-100 text-gray-500'
+                    }`}>
+                      <Icon className="w-5 h-5" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className={`text-sm font-bold ${isSelected ? 'text-amber-900' : 'text-gray-800'}`}>
+                        {method.label}
+                      </p>
+                      <p className="text-xs text-gray-500 mt-0.5 leading-relaxed">
+                        {method.desc}
+                      </p>
+                      {!method.active && (
+                        <span className="inline-block mt-1 text-[10px] font-medium text-gray-400 bg-gray-200 px-2 py-0.5 rounded-full">
+                          غير متاح
+                        </span>
+                      )}
+                    </div>
+                    {isSelected && (
+                      <div className="absolute top-2 left-2 w-5 h-5 bg-amber-500 rounded-full flex items-center justify-center">
+                        <Check className="w-3 h-3 text-white" />
+                      </div>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="px-6 py-5 border-b border-gray-100">
+            <motion.button
+              type="button"
+              onClick={() => onConfirmPay(reservation)}
+              disabled={payingId === reservation.id}
+              whileHover={{ scale: 1.01 }}
+              whileTap={{ scale: 0.99 }}
+              className="w-full bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white font-bold py-4 px-6 rounded-2xl text-lg transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-3"
+            >
+              {payingId === reservation.id ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  جاري الدفع...
+                </>
+              ) : (
+                <>
+                  <Banknote className="w-5 h-5" />
+                  دفع التأمين ({formatCurrency(amount, currencySign)})
+                </>
+              )}
+            </motion.button>
+          </div>
+
+          <div className="px-6 py-4 border-b border-gray-100">
+            <button
+              type="button"
+              onClick={() => setShowCashDialog(true)}
+              className="w-full bg-white border-2 border-amber-200 hover:border-amber-400 text-amber-700 font-bold py-3 px-6 rounded-2xl text-base transition-all flex items-center justify-center gap-2"
+            >
+              <Building className="w-5 h-5" />
+              سأدفع نقداً
+            </button>
+          </div>
+
+          <div className="px-6 py-5 bg-gray-50">
+            <div className="flex items-start gap-3">
+              <Landmark className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
+              <div>
+                <p className="text-sm font-bold text-gray-800 mb-1">موقع الدفع النقدي</p>
+                <p className="text-sm text-gray-600 leading-relaxed">
+                  مكتب المنصة: أبو رمانة، شارع المالكي، دمشق
+                </p>
+                <p className="text-sm text-gray-600 flex items-center gap-1 mt-1">
+                  <Phone className="w-3.5 h-3.5" />
+                  <span dir="ltr">+963567823411</span>
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="p-4 flex justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-5 py-2.5 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors font-medium"
+            >
+              إغلاق
+            </button>
+          </div>
+        </motion.div>
+      </div>
+
+      {showCashDialog && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 px-4 py-8">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="w-full max-w-md rounded-3xl bg-white p-8 shadow-2xl border border-gray-200 text-center"
+          >
+            <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-5">
+              <Clock className="w-8 h-8 text-amber-600" />
+            </div>
+            <h3 className="text-xl font-bold text-gray-900 mb-3">الدفع النقدي قيد الانتظار</h3>
+            <p className="text-gray-600 leading-relaxed mb-6">
+              اذهب إلى موقع المنصة وادفع العربون.
+              <br />
+              ستقوم المنصة بتأكيد الدفع بعد استلام المبلغ.
+            </p>
+            <div className="bg-gray-50 rounded-2xl p-4 mb-6 text-right">
+              <p className="text-sm font-bold text-gray-800 mb-1">موقع المنصة</p>
+              <p className="text-sm text-gray-600">مكتب المنصة: أبو رمانة، شارع المالكي، دمشق</p>
+              <p className="text-sm text-gray-600 flex items-center gap-1 mt-1" dir="ltr">
+                <Phone className="w-3.5 h-3.5" />
+                +963567823411
+              </p>
+            </div>
+            <div className="flex flex-col gap-3 sm:flex-row">
+              <button
+                type="button"
+                onClick={() => setShowCashDialog(false)}
+                className="w-full px-5 py-3 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors font-medium"
+              >
+                إغلاق
+              </button>
+              <Link
+                href="/reservations"
+                className="w-full px-5 py-3 rounded-xl bg-amber-500 text-white font-semibold text-center hover:bg-amber-600 transition-colors"
+              >
+                حجوزاتي
+              </Link>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </>
+  );
+}
+
 function ReportDialog({ isOpen, reservation, onClose, onSubmit, submitting }) {
   const [message, setMessage] = useState('');
 
@@ -865,6 +1168,8 @@ export default function UserReservationsPage() {
   const [payingId, setPayingId] = useState(null);
   const [reportDialog, setReportDialog] = useState({ open: false, reservation: null });
   const [reportingId, setReportingId] = useState(null);
+  const [selectedPayment, setSelectedPayment] = useState('cash');
+  const [paymentDialog, setPaymentDialog] = useState({ open: false, reservation: null });
 
   useEffect(() => { if (!AuthService.getUser()) { router.push('/login'); return; } loadReservations(); }, [router]);
 
@@ -911,7 +1216,15 @@ export default function UserReservationsPage() {
   const allStatuses = [...new Set(reservations.map(r => STATUS_MAP[r.status]))];
   const counts = { all: reservations.length, ...Object.fromEntries(allStatuses.map(s => [s, reservations.filter(r => STATUS_MAP[r.status] === s).length])) };
 
-  const handlePay = async (r) => {
+  const openPaymentDialog = (r) => {
+    setPaymentDialog({ open: true, reservation: r });
+  };
+
+  const closePaymentDialog = () => {
+    setPaymentDialog({ open: false, reservation: null });
+  };
+
+  const handleConfirmPay = async (r) => {
     setPayingId(r.id);
     try {
       await payDeposit({
@@ -921,6 +1234,7 @@ export default function UserReservationsPage() {
         comment: null,
       });
       toast.success('تم دفع السلفة بنجاح!');
+      closePaymentDialog();
       loadReservations();
     } catch (err) {
       toast.error(err?.message || 'فشل عملية الدفع');
@@ -961,7 +1275,7 @@ export default function UserReservationsPage() {
         r={selected}
         isOpen={!!selected}
         onClose={() => setSelected(null)}
-        onPay={handlePay}
+        onPay={openPaymentDialog}
         onReport={openReportDialog}
         payingId={payingId}
         reportingId={reportingId}
@@ -973,6 +1287,15 @@ export default function UserReservationsPage() {
         onSubmit={handleSubmitReport}
         submitting={!!reportingId}
       />
+      <PaymentDialog
+        isOpen={paymentDialog.open}
+        reservation={paymentDialog.reservation}
+        onClose={closePaymentDialog}
+        selectedPayment={selectedPayment}
+        onSelectPayment={setSelectedPayment}
+        onConfirmPay={handleConfirmPay}
+        payingId={payingId}
+      />
       <div className="container mx-auto px-4">
         <motion.div initial={{opacity:0,y:-20}} animate={{opacity:1,y:0}} className="mb-8">
           <button onClick={() => router.back()} className="flex items-center gap-2 text-gray-600 hover:text-amber-600 mb-4"><ArrowLeft className="w-5 h-5"/> الرجوع</button>
@@ -1007,7 +1330,7 @@ export default function UserReservationsPage() {
                 key={r.id}
                 r={r}
                 onViewDetails={setSelected}
-                onPay={handlePay}
+                onPay={openPaymentDialog}
                 onReport={openReportDialog}
                 payingId={payingId}
                 reportingId={reportingId}