Edit payments

app/payments/page.js

@@ -1,162 +1,28 @@
-// 'use client';
-
-// import { useEffect, useState, useCallback } from 'react';
-// import { useRouter } from 'next/navigation';
-// import { motion } from 'framer-motion';
-// import { CreditCard, Loader2, Home, Calendar, Check, X, Clock } from 'lucide-react';
-// import toast, { Toaster } from 'react-hot-toast';
-// import AuthService from '@/app/services/AuthService';
-// import { getUserReservations, payDeposit } from '@/app/utils/api';
-
-// const STATUS_MAP = ['pending', 'ownerConfirmed', 'depositPaid', 'depositConfirmed', 'completed', 'cancelled'];
-
-// const STATUS_CONFIG = {
-//   pending:          { label: 'قيد الانتظار',      color: 'bg-yellow-100 text-yellow-800 border-yellow-300', depositPaid: false },
-//   ownerConfirmed:   { label: 'مؤكد من المالك',    color: 'bg-blue-100 text-blue-800 border-blue-300',       depositPaid: false },
-//   depositPaid:      { label: 'تم دفع السلفة',     color: 'bg-orange-100 text-orange-800 border-orange-300', depositPaid: true },
-//   depositConfirmed: { label: 'تم تأكيد الدفع',    color: 'bg-green-100 text-green-800 border-green-300',    depositPaid: true },
-//   completed:        { label: 'منتهي',             color: 'bg-teal-100 text-teal-800 border-teal-300',       depositPaid: true },
-//   cancelled:        { label: 'ملغي',              color: 'bg-red-100 text-red-800 border-red-300',          depositPaid: false },
-// };
-
-// export default function PaymentsPage() {
-//   const router = useRouter();
-//   const [reservations, setReservations] = useState([]);
-//   const [loading, setLoading] = useState(true);
-//   const [payingId, setPayingId] = useState(null);
-
-//   useEffect(() => {
-//     // Admin check removed
-//     // if (AuthService.isAdmin()) {
-//     //   router.push('/');
-//     //   return;
-//     // }
-//     loadReservations();
-//   }, [router]);
-
-//   const loadReservations = useCallback(async () => {
-//     try {
-//       const data = await getUserReservations();
-//       setReservations(Array.isArray(data) ? data : []);
-//     } catch (err) {
-//       console.error(err);
-//       toast.error('فشل تحميل المدفوعات');
-//     } finally {
-//       setLoading(false);
-//     }
-//   }, []);
-
-//   const handlePayDeposit = async (reservation) => {
-//     setPayingId(reservation.id);
-//     try {
-//       await payDeposit({ reservationId: reservation.id });
-//       toast.success('تم دفع السلفة بنجاح!');
-//       loadReservations();
-//     } catch (err) {
-//       toast.error(err?.message || 'فشل عملية الدفع');
-//     } finally {
-//       setPayingId(null);
-//     }
-//   };
-
-//   const formatCurrency = (v) => (v ?? 0).toLocaleString() + ' ل.س';
-
-//   if (loading) {
-//     return (
-//       <div className="min-h-screen bg-gray-50 flex items-center justify-center" dir="rtl">
-//         <Loader2 className="w-12 h-12 text-amber-500 animate-spin" />
-//       </div>
-//     );
-//   }
-
-//   const canPay = (status) => STATUS_MAP[status] === 'pending' || STATUS_MAP[status] === 'ownerConfirmed';
-
-//   return (
-//     <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
-//       <Toaster position="top-center" reverseOrder={false} />
-//       <div className="container mx-auto px-4 max-w-4xl">
-//         <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
-//           <h1 className="text-3xl font-bold text-gray-900 mb-2">المدفوعات</h1>
-//           <p className="text-gray-600">إدارة مدفوعات الحجوزات والدفعات المقدمة</p>
-//         </motion.div>
-
-//         {reservations.length === 0 ? (
-//           <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
-//             className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300">
-//             <CreditCard className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-//             <h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد معاملات مالية</h3>
-//             <p className="text-gray-500">ستظهر هنا مدفوعاتك للحجوزات</p>
-//           </motion.div>
-//         ) : (
-//           <div className="space-y-4">
-//             {reservations.map((r, i) => {
-//               const statusKey = STATUS_MAP[r.status] || 'pending';
-//               const cfg = STATUS_CONFIG[statusKey];
-//               const amount = r.depositAmount || r.totalPrice || 0;
-
-//               return (
-//                 <motion.div key={r.id || i} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
-//                   className="bg-white rounded-2xl shadow-sm border border-gray-200 p-5 hover:shadow-md transition-all">
-//                   <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
-//                     <div className="flex items-start gap-3">
-//                       <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
-//                         <Home className="w-5 h-5 text-amber-600" />
-//                       </div>
-//                       <div>
-//                         <h3 className="font-bold text-gray-900">
-//                           {r.propertyAddress || r._prop?.address || `عقار #${r.propertyId || r.id}`}
-//                         </h3>
-//                         <p className="text-sm text-gray-500 mt-1">حجز #{r.id}</p>
-//                         <div className="flex items-center gap-3 mt-1 text-xs text-gray-400">
-//                           <span className="flex items-center gap-1"><Calendar className="w-3 h-3" /> {new Date(r.startDate).toLocaleDateString('ar')}</span>
-//                           <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {new Date(r.endDate).toLocaleDateString('ar')}</span>
-//                         </div>
-//                       </div>
-//                     </div>
-//                     <div className="text-right w-full md:w-auto">
-//                       <div className="text-xl font-bold text-amber-600">{formatCurrency(amount)}</div>
-//                       <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium border ${cfg.color}`}>
-//                         {cfg.depositPaid ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
-//                         {cfg.label}
-//                       </span>
-//                     </div>
-//                   </div>
-
-//                   {canPay(r.status) && (
-//                     <div className="mt-4 pt-4 border-t border-gray-100 flex justify-end">
-//                       <button onClick={() => handlePayDeposit(r)} disabled={payingId === r.id}
-//                         className="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white px-6 py-2.5 rounded-xl text-sm font-medium transition">
-//                         {payingId === r.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <CreditCard className="w-4 h-4" />}
-//                         {payingId === r.id ? 'جاري الدفع...' : 'دفع السلفة'}
-//                       </button>
-//                     </div>
-//                   )}
-//                 </motion.div>
-//               );
-//             })}
-//           </div>
-//         )}
-//       </div>
-//     </div>
-//   );
-// }
-
-
-
-
-
-
-
-
-
-
 'use client';
 
 import { useEffect, useState, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
-import { CreditCard, Loader2, Home, Calendar, Check, X, Clock, LogIn, Lock } from 'lucide-react';
+import {
+  Home,
+  MapPin,
+  Phone,
+  ShieldCheck,
+  CreditCard,
+  Banknote,
+  Building,
+  ArrowLeftRight,
+  Loader2,
+  Check,
+  X,
+  Calendar,
+  Clock,
+  LogIn,
+  Lock,
+  Info,
+  Landmark,
+  Wallet,
+} from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
 import AuthService from '@/app/services/AuthService';
 import { payDeposit } from '@/app/utils/api';
@@ -164,20 +30,62 @@ import { payDeposit } from '@/app/utils/api';
 const STATUS_MAP = ['pending', 'ownerConfirmed', 'depositPaid', 'depositConfirmed', 'completed', 'cancelled'];
 
 const STATUS_CONFIG = {
-  pending:          { label: 'قيد الانتظار',      color: 'bg-yellow-100 text-yellow-800 border-yellow-300', depositPaid: false },
-  ownerConfirmed:   { label: 'مؤكد من المالك',    color: 'bg-blue-100 text-blue-800 border-blue-300',       depositPaid: false },
-  depositPaid:      { label: 'تم دفع السلفة',     color: 'bg-orange-100 text-orange-800 border-orange-300', depositPaid: true },
-  depositConfirmed: { label: 'تم تأكيد الدفع',    color: 'bg-green-100 text-green-800 border-green-300',    depositPaid: true },
-  completed:        { label: 'منتهي',             color: 'bg-teal-100 text-teal-800 border-teal-300',       depositPaid: true },
-  cancelled:        { label: 'ملغي',              color: 'bg-red-100 text-red-800 border-red-300',          depositPaid: false },
+  pending:          { label: 'قيد الانتظار',      color: 'bg-yellow-100 text-yellow-800 border-yellow-300', icon: Clock },
+  ownerConfirmed:   { label: 'مؤكد من المالك',    color: 'bg-blue-100 text-blue-800 border-blue-300',       icon: ShieldCheck },
+  depositPaid:      { label: 'تم دفع السلفة',     color: 'bg-orange-100 text-orange-800 border-orange-300', icon: Wallet },
+  depositConfirmed: { label: 'تم تأكيد الدفع',    color: 'bg-green-100 text-green-800 border-green-300',    icon: Check },
+  completed:        { label: 'منتهي',             color: 'bg-teal-100 text-teal-800 border-teal-300',       icon: Check },
+  cancelled:        { label: 'ملغي',              color: 'bg-red-100 text-red-800 border-red-300',          icon: X },
 };
 
+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 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');
+}
+
 export default function PaymentsPage() {
-  const router = useRouter();
   const [reservations, setReservations] = useState([]);
   const [loading, setLoading] = useState(true);
   const [payingId, setPayingId] = useState(null);
   const [isGuest, setIsGuest] = useState(null);
+  const [selectedPayment, setSelectedPayment] = useState('cash');
 
   const getAuthToken = () => {
     if (typeof window === 'undefined') return '';
@@ -214,10 +122,11 @@ export default function PaymentsPage() {
         const reservation = deposit?.reservation || {};
         const transaction = deposit?.transaction || {};
         const currency = item?.currency || {};
+        const propertyInfo = reservation?.propertyInformation || {};
 
         return {
-          id: reservation.id ?? deposit.reservationId ?? deposit?.reservation?.id ?? item?.reservationId ?? deposit?.id,
-          reservationId: reservation.id ?? deposit.reservationId ?? item?.reservationId ?? deposit?.id,
+          id: deposit.id ?? reservation.id ?? item?.id,
+          reservationId: reservation.id ?? deposit.reservationId ?? item?.reservationId,
           status: reservation.status ?? 0,
           startDate: reservation.startDate,
           endDate: reservation.endDate,
@@ -226,7 +135,11 @@ export default function PaymentsPage() {
           currencySign: currency.sign || 'ل.س',
           currencyName: currency.name || '',
           currencyRate: currency.rate,
+          propertyName: propertyInfo.name || propertyInfo.address || reservation.propertyName || `عقار #${reservation.id || ''}`,
+          propertyAddress: propertyInfo.address || reservation.propertyAddress || '',
+          propertyCity: propertyInfo.city || reservation.city || '',
           _deposit: deposit,
+          _reservation: reservation,
         };
       });
 
@@ -262,14 +175,7 @@ export default function PaymentsPage() {
     }
   };
 
-  const formatCurrency = (v, sign = 'ل.س') => `${sign} ${Number(v ?? 0).toLocaleString()}`;
-
-  const formatDate = (date) => {
-    if (!date) return '';
-    const d = new Date(date);
-    if (Number.isNaN(d.getTime())) return '';
-    return d.toLocaleDateString('en-GB');
-  };
+  const canPay = (status) => STATUS_MAP[status] === 'ownerConfirmed';
 
   if (loading) {
     return (
@@ -306,18 +212,83 @@ export default function PaymentsPage() {
     );
   }
 
-  const canPay = (status) => STATUS_MAP[status] === 'pending' || STATUS_MAP[status] === 'ownerConfirmed';
+  const payables = reservations.filter((r) => canPay(r.status));
+  const others = reservations.filter((r) => !canPay(r.status));
 
   return (
     <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
       <Toaster position="top-center" reverseOrder={false} />
       <div className="container mx-auto px-4 max-w-4xl">
-        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
           <h1 className="text-3xl font-bold text-gray-900 mb-2">المدفوعات</h1>
           <p className="text-gray-600">إدارة مدفوعات الحجوزات والدفعات المقدمة</p>
         </motion.div>
 
-        {reservations.length === 0 ? (
+        {payables.length > 0 && (
+          <div className="space-y-6 mb-10">
+            <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
+              <Wallet className="w-5 h-5 text-amber-500" />
+              المدفوعات المطلوبة
+            </h2>
+            {payables.map((r, i) => (
+              <PaymentCard
+                key={r.id || i}
+                reservation={r}
+                payingId={payingId}
+                selectedPayment={selectedPayment}
+                onSelectPayment={setSelectedPayment}
+                onPay={handlePayDeposit}
+              />
+            ))}
+          </div>
+        )}
+
+        {others.length > 0 && (
+          <div className="space-y-4">
+            <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
+              <Clock className="w-5 h-5 text-gray-500" />
+              الحجوزات السابقة
+            </h2>
+            {others.map((r, i) => {
+              const statusKey = STATUS_MAP[r.status] || 'pending';
+              const cfg = STATUS_CONFIG[statusKey];
+              const Icon = cfg.icon;
+              const amount = r.depositAmount || r.totalPrice || 0;
+
+              return (
+                <motion.div
+                  key={r.id || i}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="bg-white rounded-2xl shadow-sm border border-gray-200 p-5"
+                >
+                  <div className="flex items-center justify-between gap-3 mb-3">
+                    <span className="text-sm font-medium text-gray-400">#{r.reservationId || r.id}</span>
+                    <span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium border ${cfg.color}`}>
+                      <Icon className="w-3 h-3" />
+                      {cfg.label}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2 text-sm text-gray-600">
+                      <Calendar className="w-4 h-4" />
+                      {formatDate(r.startDate)} - {formatDate(r.endDate)}
+                    </div>
+                    <div className="text-lg font-bold text-gray-900">
+                      {formatCurrency(amount, r.currencySign)}
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        )}
+
+        {reservations.length === 0 && (
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -327,87 +298,225 @@ export default function PaymentsPage() {
             <h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد معاملات مالية</h3>
             <p className="text-gray-500">ستظهر هنا مدفوعاتك للحجوزات</p>
           </motion.div>
-        ) : (
-          <div className="space-y-4">
-            {reservations.map((r, i) => {
-              const statusKey = STATUS_MAP[r.status] || 'pending';
-              const cfg = STATUS_CONFIG[statusKey];
-              const amount = r.depositAmount || r.totalPrice || 0;
-
-              return (
-                <motion.div
-                  key={r.id || i}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  className="bg-white rounded-2xl shadow-sm border border-gray-200 p-5 hover:shadow-md transition-all"
-                >
-                  <div className="flex flex-col gap-4">
-                    <div className="flex items-center justify-between gap-3">
-                      <span className="text-sm font-medium text-gray-400">#{r.reservationId || r.id}</span>
-                      <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium border ${cfg.color}`}>
-                        {cfg.depositPaid ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
-                        {cfg.label}
-                      </span>
-                    </div>
-
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
-                          <Home className="w-5 h-5 text-amber-600" />
-                        </div>
-                        <div>
-                          <div className="text-sm text-gray-500">Reservation</div>
-                          <div className="font-bold text-gray-900">#{r.reservationId || r.id}</div>
-                        </div>
-                      </div>
-
-                      <div className="text-right">
-                        <div className="text-xs text-gray-400 mb-1">{r.currencyName}</div>
-                        <div className="text-2xl md:text-3xl font-bold text-gray-900">
-                          {formatCurrency(amount, r.currencySign)}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="border-t border-gray-100 pt-4">
-                      <div className="flex items-center justify-between text-sm text-gray-700">
-                        <span className="flex items-center gap-2">
-                          <Calendar className="w-4 h-4 text-gray-400" />
-                          الفترة
-                        </span>
-                        <span className="font-medium">
-                          {formatDate(r.startDate)} - {formatDate(r.endDate)}
-                        </span>
-                      </div>
-
-                      <div className="flex items-center justify-between text-sm text-gray-700 mt-3">
-                        <span className="flex items-center gap-2">
-                          <Clock className="w-4 h-4 text-gray-400" />
-                          Reservation
-                        </span>
-                        <span className="font-medium">#{r.reservationId || r.id}</span>
-                      </div>
-                    </div>
-
-                    {canPay(r.status) && (
-                      <div className="pt-2 flex justify-end">
-                        <button
-                          onClick={() => handlePayDeposit(r)}
-                          disabled={payingId === r.id}
-                          className="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white px-6 py-2.5 rounded-xl text-sm font-medium transition"
-                        >
-                          {payingId === r.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <CreditCard className="w-4 h-4" />}
-                          {payingId === r.id ? 'جاري الدفع...' : 'دفع السلفة'}
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                </motion.div>
-              );
-            })}
-          </div>
         )}
       </div>
     </div>
   );
 }
+
+function PaymentCard({ reservation, payingId, selectedPayment, onSelectPayment, onPay }) {
+  const r = reservation;
+  const amount = r.depositAmount || r.totalPrice || 0;
+  const [showCashDialog, setShowCashDialog] = useState(false);
+
+  return (
+    <>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="bg-white rounded-3xl shadow-md border border-gray-200 overflow-hidden"
+      >
+      {/* Property details */}
+      <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">
+              {r.propertyName}
+            </h3>
+            {(r.propertyAddress || r.propertyCity) && (
+              <p className="text-sm text-gray-500 flex items-center gap-1">
+                <MapPin className="w-3.5 h-3.5" />
+                {[r.propertyCity, r.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(r.startDate)} - {formatDate(r.endDate)}
+          </span>
+          <span className="flex items-center gap-1.5">
+            <Clock className="w-4 h-4 text-gray-400" />
+            #{r.reservationId || r.id}
+          </span>
+        </div>
+      </div>
+
+      {/* Deposit amount */}
+      <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, r.currencySign)}
+          </p>
+          <p className="text-xs text-gray-400 mt-2">
+            يتم دفع التأمين إلى المنصة وليس إلى المالك
+          </p>
+        </div>
+      </div>
+
+      {/* Payment methods note */}
+      <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>
+
+      {/* Payment method options */}
+      <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>
+
+      {/* Pay button */}
+      <div className="px-6 py-5 border-b border-gray-100">
+        <motion.button
+          type="button"
+          onClick={() => onPay(r)}
+          disabled={payingId === r.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 === r.id ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin" />
+              جاري الدفع...
+            </>
+          ) : (
+            <>
+              <Banknote className="w-5 h-5" />
+              دفع التأمين ({formatCurrency(amount, r.currencySign)})
+            </>
+          )}
+        </motion.button>
+      </div>
+
+      {/* Cash pay button */}
+      <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>
+
+      {/* Cash payment dialog */}
+      {showCashDialog && (
+        <div className="fixed inset-0 z-50 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>
+      )}
+
+      {/* Platform location */}
+      <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>
+    </motion.div>
+    </>
+  );
+}