Update: 2026-05-07 03:50:16

musadaq-app/lib/features/subscription/views/payment_receipt_view.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:get/get.dart';
+import '../../../core/utils/app_snackbar.dart';
 import '../controllers/payment_receipt_controller.dart';
 
 class PaymentReceiptView extends StatelessWidget {
@@ -11,10 +13,13 @@ class PaymentReceiptView extends StatelessWidget {
     final isDark = Theme.of(context).brightness == Brightness.dark;
 
     return Scaffold(
-      backgroundColor: isDark ? const Color(0xFF121212) : const Color(0xFFF5F7FA),
+      backgroundColor:
+          isDark ? const Color(0xFF121212) : const Color(0xFFF5F7FA),
       appBar: AppBar(
-        title: const Text('إتمام الدفع', style: TextStyle(fontWeight: FontWeight.bold)),
-        backgroundColor: isDark ? const Color(0xFF1E1E2E) : const Color(0xFF0F4C81),
+        title: const Text('إتمام الدفع',
+            style: TextStyle(fontWeight: FontWeight.bold)),
+        backgroundColor:
+            isDark ? const Color(0xFF1E1E2E) : const Color(0xFF0F4C81),
         foregroundColor: Colors.white,
         elevation: 0,
       ),
@@ -25,33 +30,51 @@ class PaymentReceiptView extends StatelessWidget {
           children: [
             // Payment Info Card
             Obx(() => Container(
-              padding: const EdgeInsets.all(20),
-              decoration: BoxDecoration(
-                color: isDark ? const Color(0xFF1E1E2E) : Colors.white,
-                borderRadius: BorderRadius.circular(16),
-                border: Border.all(color: isDark ? Colors.white10 : Colors.grey.shade200),
-              ),
-              child: Column(
-                children: [
-                  const Text('تفاصيل التحويل المطلوب', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
-                  const SizedBox(height: 16),
-                  _buildInfoRow('الاسم المستعار (CliQ)', controller.payment['cliq_alias'] ?? '', isDark, isHighlight: true),
-                  const Divider(height: 24),
-                  _buildInfoRow('المبلغ المطلوب', '${controller.payment['amount_jod'] ?? 0} JOD', isDark),
-                ],
-              ),
-            )),
+                  padding: const EdgeInsets.all(20),
+                  decoration: BoxDecoration(
+                    color: isDark ? const Color(0xFF1E1E2E) : Colors.white,
+                    borderRadius: BorderRadius.circular(16),
+                    border: Border.all(
+                        color: isDark ? Colors.white10 : Colors.grey.shade200),
+                  ),
+                  child: Column(
+                    children: [
+                      const Text('تفاصيل التحويل المطلوب',
+                          style: TextStyle(
+                              fontWeight: FontWeight.bold, fontSize: 16)),
+                      const SizedBox(height: 16),
+                      _buildInfoRow('الاسم المستعار (CliQ)',
+                          controller.payment['cliq_alias'] ?? '', isDark,
+                          isHighlight: true),
+                      const Divider(height: 24),
+                      _buildInfoRow(
+                          'المبلغ المطلوب',
+                          '${controller.payment['amount_jod'] ?? 0} JOD',
+                          isDark),
+                    ],
+                  ),
+                )),
 
             const SizedBox(height: 24),
-            Text('الخطوات التالية:', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: isDark ? Colors.white : Colors.black87)),
+            Text('الخطوات التالية:',
+                style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 16,
+                    color: isDark ? Colors.white : Colors.black87)),
             const SizedBox(height: 12),
-            _buildStepRow('1', 'افتح تطبيق البنك أو المحفظة الإلكترونية الخاصة بك.', isDark),
+            _buildStepRow('1',
+                'افتح تطبيق البنك أو المحفظة الإلكترونية الخاصة بك.', isDark),
             const SizedBox(height: 8),
-            _buildStepRow('2', 'اختر خدمة "كليك" (CliQ) للتحويل الفوري.', isDark),
+            _buildStepRow(
+                '2', 'اختر خدمة "كليك" (CliQ) للتحويل الفوري.', isDark),
             const SizedBox(height: 8),
-            _buildStepRow('3', 'قم بالتحويل للاسم المستعار الموضح أعلاه.', isDark),
+            _buildStepRow(
+                '3', 'قم بالتحويل للاسم المستعار الموضح أعلاه.', isDark),
             const SizedBox(height: 8),
-            _buildStepRow('4', 'بعد إتمام العملية، انسخ "رقم المرجع" من رسالة البنك أو الإشعار والصقه هنا.', isDark),
+            _buildStepRow(
+                '4',
+                'بعد إتمام العملية، انسخ "رقم المرجع" من رسالة البنك أو الإشعار والصقه هنا.',
+                isDark),
             const SizedBox(height: 24),
 
             // Reference Number Input Area
@@ -60,29 +83,40 @@ class PaymentReceiptView extends StatelessWidget {
               decoration: BoxDecoration(
                 color: isDark ? const Color(0xFF1E1E2E) : Colors.white,
                 borderRadius: BorderRadius.circular(16),
-                border: Border.all(color: isDark ? Colors.white10 : Colors.grey.shade200),
+                border: Border.all(
+                    color: isDark ? Colors.white10 : Colors.grey.shade200),
               ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  const Text('رقم المرجع (Reference Number)', style: TextStyle(fontWeight: FontWeight.bold)),
+                  const Text('رقم المرجع أو نص الرسالة كاملة',
+                      style: TextStyle(fontWeight: FontWeight.bold)),
                   const SizedBox(height: 12),
                   TextField(
                     controller: controller.referenceController,
+                    maxLines: 3,
+                    minLines: 1,
                     decoration: InputDecoration(
-                      hintText: 'مثال: 1234567890',
-                      hintStyle: TextStyle(color: isDark ? Colors.white38 : Colors.grey),
+                      hintText:
+                          'ألصق رقم المرجع أو نص الرسالة الواردة من البنك هنا...',
+                      hintStyle: TextStyle(
+                          color: isDark ? Colors.white38 : Colors.grey,
+                          fontSize: 13),
                       filled: true,
-                      fillColor: isDark ? const Color(0xFF1A1A2E) : const Color(0xFFF1F5F9),
+                      fillColor: isDark
+                          ? const Color(0xFF1A1A2E)
+                          : const Color(0xFFF1F5F9),
                       border: OutlineInputBorder(
                         borderRadius: BorderRadius.circular(12),
                         borderSide: BorderSide.none,
                       ),
-                      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
+                      contentPadding: const EdgeInsets.symmetric(
+                          horizontal: 16, vertical: 16),
                     ),
-                    keyboardType: TextInputType.text,
+                    keyboardType: TextInputType.multiline,
                     style: TextStyle(
                       fontFamily: 'monospace',
+                      fontSize: 14,
                       color: isDark ? Colors.white : Colors.black87,
                     ),
                   ),
@@ -96,23 +130,32 @@ class PaymentReceiptView extends StatelessWidget {
             SizedBox(
               height: 52,
               child: Obx(() => ElevatedButton.icon(
-                onPressed: controller.isUploading.value
-                    ? null
-                    : () => controller.submitReference(),
-                style: ElevatedButton.styleFrom(
-                  backgroundColor: const Color(0xFF0F4C81),
-                  foregroundColor: Colors.white,
-                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
-                  disabledBackgroundColor: isDark ? Colors.white10 : Colors.grey.shade300,
-                ),
-                icon: controller.isUploading.value 
-                    ? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white))
-                    : const Icon(Icons.check_circle_outline),
-                label: Text(
-                  controller.isUploading.value ? 'جاري التحقق...' : 'تأكيد الدفع',
-                  style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
-                ),
-              )),
+                    onPressed: controller.isUploading.value
+                        ? null
+                        : () => controller.submitReference(),
+                    style: ElevatedButton.styleFrom(
+                      backgroundColor: const Color(0xFF0F4C81),
+                      foregroundColor: Colors.white,
+                      shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(12)),
+                      disabledBackgroundColor:
+                          isDark ? Colors.white10 : Colors.grey.shade300,
+                    ),
+                    icon: controller.isUploading.value
+                        ? const SizedBox(
+                            width: 20,
+                            height: 20,
+                            child: CircularProgressIndicator(
+                                strokeWidth: 2, color: Colors.white))
+                        : const Icon(Icons.check_circle_outline),
+                    label: Text(
+                      controller.isUploading.value
+                          ? 'جاري التحقق...'
+                          : 'تأكيد الدفع',
+                      style: const TextStyle(
+                          fontWeight: FontWeight.bold, fontSize: 16),
+                    ),
+                  )),
             ),
           ],
         ),
@@ -134,7 +177,10 @@ class PaymentReceiptView extends StatelessWidget {
           child: Center(
             child: Text(
               number,
-              style: const TextStyle(color: Color(0xFF0F4C81), fontWeight: FontWeight.bold, fontSize: 12),
+              style: const TextStyle(
+                  color: Color(0xFF0F4C81),
+                  fontWeight: FontWeight.bold,
+                  fontSize: 12),
             ),
           ),
         ),
@@ -142,31 +188,62 @@ class PaymentReceiptView extends StatelessWidget {
         Expanded(
           child: Text(
             text,
-            style: TextStyle(fontSize: 13, color: isDark ? Colors.white70 : Colors.grey.shade700, height: 1.4),
+            style: TextStyle(
+                fontSize: 13,
+                color: isDark ? Colors.white70 : Colors.grey.shade700,
+                height: 1.4),
           ),
         ),
       ],
     );
   }
 
-  Widget _buildInfoRow(String label, String value, bool isDark, {bool isHighlight = false}) {
+  Widget _buildInfoRow(String label, String value, bool isDark,
+      {bool isHighlight = false}) {
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
-        Text(label, style: TextStyle(fontSize: 13, color: isDark ? Colors.white70 : Colors.grey.shade600)),
-        Container(
-          padding: EdgeInsets.symmetric(horizontal: isHighlight ? 12 : 0, vertical: isHighlight ? 6 : 0),
-          decoration: isHighlight ? BoxDecoration(
-            color: const Color(0xFF0F4C81).withOpacity(0.1),
-            borderRadius: BorderRadius.circular(8),
-          ) : null,
-          child: Text(
-            value,
+        Text(label,
             style: TextStyle(
-              fontWeight: FontWeight.bold,
-              fontSize: 15,
-              color: isHighlight ? const Color(0xFF0F4C81) : (isDark ? Colors.white : Colors.black87),
-              fontFamily: 'monospace',
+                fontSize: 13,
+                color: isDark ? Colors.white70 : Colors.grey.shade600)),
+        GestureDetector(
+          onTap: () {
+            Clipboard.setData(ClipboardData(text: value));
+            AppSnackbar.showSuccess('تم النسخ', 'تم نسخ $label إلى الحافظة');
+          },
+          child: Container(
+            padding: EdgeInsets.symmetric(
+                horizontal: isHighlight ? 12 : 0,
+                vertical: isHighlight ? 6 : 0),
+            decoration: isHighlight
+                ? BoxDecoration(
+                    color: const Color(0xFF0F4C81).withOpacity(0.1),
+                    borderRadius: BorderRadius.circular(8),
+                    border: Border.all(
+                        color: const Color(0xFF0F4C81).withOpacity(0.3)),
+                  )
+                : null,
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  value,
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 15,
+                    color: isHighlight
+                        ? const Color(0xFF0F4C81)
+                        : (isDark ? Colors.white : Colors.black87),
+                    fontFamily: 'monospace',
+                  ),
+                ),
+                if (isHighlight) ...[
+                  const SizedBox(width: 8),
+                  const Icon(Icons.copy_rounded,
+                      size: 14, color: Color(0xFF0F4C81)),
+                ],
+              ],
             ),
           ),
         ),