this is a cart issue when we proceed to checkout resolve this and add payment method like easypaisa , jazzcash and bank accounts of pakistan - Follow Up Deployment

index.html

@@ -462,6 +462,18 @@
         </div>
     </section>
 
+    <style>
+        input[type="radio"] {
+            accent-color: #2563eb;
+        }
+        .payment-method {
+            background-color: #f8fafc;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            border: 1px solid #e2e8f0;
+        }
+    </style>
+
     <!-- Footer -->
     <footer class="bg-gray-900 text-white py-12">
         <div class="container mx-auto px-4">
@@ -559,8 +571,55 @@
                 </div>
             </div>
             
+            <div class="mb-6">
+                <h4 class="font-bold mb-3">Payment Method</h4>
+                <div class="space-y-3">
+                    <div class="flex items-center">
+                        <input type="radio" id="easypaisa" name="payment" value="easypaisa" class="mr-2" checked>
+                        <label for="easypaisa" class="flex items-center">
+                            <img src="https://play-lh.googleusercontent.com/DTXkUuB2V7V8OQYioQpVJkEEEFHZq8n1qtzdH8iXyJ4gXQz9Xz9Xz9Xz9Xz9Xz9Xz9" alt="EasyPaisa" class="h-6 mr-2">
+                            EasyPaisa
+                        </label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="radio" id="jazzcash" name="payment" value="jazzcash" class="mr-2">
+                        <label for="jazzcash" class="flex items-center">
+                            <img src="https://play-lh.googleusercontent.com/9pXJ9z5z9pXJ9z5z9pXJ9z5z9pXJ9z5z9pXJ9z5z9pXJ9z5z9pXJ9z5z9pXJ9z5" alt="JazzCash" class="h-6 mr-2">
+                            JazzCash
+                        </label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="radio" id="bank" name="payment" value="bank" class="mr-2">
+                        <label for="bank" class="flex items-center">
+                            <i class="fas fa-university text-blue-500 mr-2"></i>
+                            Bank Transfer
+                        </label>
+                    </div>
+                </div>
+            </div>
+
+            <div id="payment-details" class="mb-4 hidden">
+                <div id="easypaisa-details" class="payment-method">
+                    <p class="text-sm mb-2">Send payment to EasyPaisa account:</p>
+                    <p class="font-bold">0323-5186970</p>
+                    <p class="text-sm mt-2">After payment, share receipt via WhatsApp at +92 323 5186970</p>
+                </div>
+                <div id="jazzcash-details" class="payment-method hidden">
+                    <p class="text-sm mb-2">Send payment to JazzCash account:</p>
+                    <p class="font-bold">0323-5186970</p>
+                    <p class="text-sm mt-2">After payment, share receipt via WhatsApp at +92 323 5186970</p>
+                </div>
+                <div id="bank-details" class="payment-method hidden">
+                    <p class="text-sm mb-2">Bank Account Details:</p>
+                    <p class="font-bold">Bank: HBL</p>
+                    <p class="font-bold">Account Title: Dialup Watches</p>
+                    <p class="font-bold">Account #: 1234567890123</p>
+                    <p class="text-sm mt-2">After transfer, share receipt via WhatsApp at +92 323 5186970</p>
+                </div>
+            </div>
+
             <button id="checkout-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition duration-300 mb-4">
-                Proceed to Checkout
+                Confirm Order
             </button>
             
             <a href="#" class="block text-center text-blue-600 hover:text-blue-800 font-medium">
@@ -703,13 +762,56 @@
             }
         }
         
+        // Payment method selection
+        const paymentMethods = document.querySelectorAll('input[name="payment"]');
+        const paymentDetails = document.getElementById('payment-details');
+        const paymentMethodDetails = document.querySelectorAll('.payment-method');
+
+        paymentMethods.forEach(method => {
+            method.addEventListener('change', () => {
+                paymentDetails.classList.remove('hidden');
+                paymentMethodDetails.forEach(detail => {
+                    detail.classList.add('hidden');
+                });
+                document.getElementById(`${method.value}-details`).classList.remove('hidden');
+            });
+        });
+
         // Checkout button
         const checkoutBtn = document.getElementById('checkout-btn');
         checkoutBtn.addEventListener('click', () => {
             if (cart.length > 0) {
-                alert('Proceeding to checkout! In a real implementation, this would redirect to a checkout page.');
-                // Here you would typically redirect to a checkout page
-                // window.location.href = '/checkout';
+                const selectedPayment = document.querySelector('input[name="payment"]:checked').value;
+                let paymentInfo = '';
+                
+                if (selectedPayment === 'easypaisa') {
+                    paymentInfo = 'EasyPaisa: 0323-5186970';
+                } else if (selectedPayment === 'jazzcash') {
+                    paymentInfo = 'JazzCash: 0323-5186970';
+                } else {
+                    paymentInfo = 'Bank: HBL - Account # 1234567890123';
+                }
+                
+                // Create order summary
+                let orderSummary = 'Order Summary:\n\n';
+                cart.forEach(item => {
+                    orderSummary += `${item.name} x ${item.quantity} = Rs.${item.price * item.quantity}\n`;
+                });
+                
+                orderSummary += `\nTotal: Rs.${cart.reduce((sum, item) => sum + (item.price * item.quantity), 0)}\n`;
+                orderSummary += `\nPayment Method: ${selectedPayment}\n${paymentInfo}`;
+                
+                // Show confirmation modal
+                const confirmed = confirm(`${orderSummary}\n\nPlease confirm your order. After payment, share receipt via WhatsApp at +92 323 5186970`);
+                
+                if (confirmed) {
+                    // In a real implementation, you would send this data to your backend
+                    alert('Order confirmed! Please complete your payment and share the receipt. We will process your order shortly.');
+                    cart = [];
+                    updateCart();
+                    cartSidebar.classList.add('hidden');
+                    overlay.classList.add('hidden');
+                }
             } else {
                 alert('Your cart is empty. Please add some items before checking out.');
             }