From d2fb761e256c5a651e3616c2bd94a09379ac8ef6 Mon Sep 17 00:00:00 2001
From: Dev Team <devteam@code2lab.com>
Date: Wed, 28 May 2025 11:00:23 +0630
Subject: [PATCH] update read modal

---
 app/views/layouts/_read_modal.html.erb | 410 ++++++++++++++++++++-----
 1 file changed, 328 insertions(+), 82 deletions(-)

diff --git a/app/views/layouts/_read_modal.html.erb b/app/views/layouts/_read_modal.html.erb
index 22d696b7..d53f4dc9 100644
--- a/app/views/layouts/_read_modal.html.erb
+++ b/app/views/layouts/_read_modal.html.erb
@@ -1,100 +1,346 @@
 <style>
-  #read_modal {
-    text-align: center;
-    padding: 0!important;
-  }
-
-  #read_modal:before {
-    display: inline-block;
-    vertical-align: middle;
-    content: " ";
-    height: 100%;
-  }
-
-  .read-dialog {
-    display: inline-block;
-    text-align: left;
-    vertical-align: middle;
-    max-width: 90%;
-  }
-
-  .payment-option-btn {
-    padding: 20px;
-    border: 2px solid #54A5AF;
-    border-radius: 12px;
-    background-color: white;
-    margin: 10px;
-    transition: all 0.3s ease;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    min-width: 180px;
-    cursor: pointer;
+  /* Base Styling */
+  .payment-modal {
+    border-radius: 18px;
     overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
   }
 
-  .payment-option-btn#mmqr_btn:hover {
-    background-color: #f0f8fa;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  .payment-header {
+    background: #f8fbfc;
+    padding: 1.5rem;
+    border-bottom: 2px solid #e0f0f3;
+    text-align: center;
   }
 
-  .payment-option-btn:active {
-    transform: translateY(1px);
+  .merchant-logo {
+    height: 65px;
+    margin-bottom: 1rem;
+    filter: drop-shadow(0 2px 4px rgba(84,165,175,0.1));
   }
 
-  .payment-option-btn img {
-    height: 100px;
-    width: auto;
-    margin-bottom: 12px;
-    transition: transform 0.3s ease;
-    object-fit: contain;
-    display: block;
-  }
-
-  .payment-option-btn#mmqr_btn:hover img {
-    transform: scale(1.05);
-  }
-
-  .payment-option-btn span {
-    font-size: 16px;
-    font-weight: 600;
+  .modal-title {
     color: #2a626b;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
   }
 
-  #close {
-    padding: 10px 40px;
-    font-size: 16px;
-    border-radius: 25px;
-    margin-top: 15px;
+  /* Amount Display */
+  .amount-section {
+    background: #54A5AF15;
+    padding: 1.2rem;
+    margin: 0 1.5rem;
+    border-radius: 12px;
+    border: 2px dashed #54A5AF40;
+  }
+
+  .total-amount {
+    color: #2a626b;
+    font-size: 1.8rem;
+    font-weight: 800;
+    margin: 0;
+  }
+
+  .amount-label {
+    color: #678c93;
+    font-size: 0.95rem;
+    margin-bottom: 0.5rem;
+  }
+
+  /* Payment Options Grid */
+  .payment-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  .payment-card {
+    background: white;
+    border: 2px solid #e0f0f3;
+    border-radius: 14px;
+    padding: 1.5rem;
+    cursor: pointer;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+  }
+
+  .payment-card:hover {
+    transform: translateY(-3px);
+    border-color: #54A5AF;
+    box-shadow: 0 6px 20px rgba(84,165,175,0.1);
+  }
+
+  .payment-card.active {
+    border-color: #54A5AF;
+    background: #f8fbfc;
+  }
+
+  .payment-icon {
+    font-size: 2.2rem;
+    color: #54A5AF;
+    margin-bottom: 1rem;
+  }
+
+  .payment-label {
+    color: #2a626b;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+
+  .payment-description {
+    color: #678c93;
+    font-size: 0.9rem;
+    line-height: 1.4;
+  }
+
+  /* Footer Actions */
+  .modal-footer {
+    background: #f8fbfc;
+    padding: 1.2rem;
+    display: flex;
+    justify-content: space-between;
+    border-top: 2px solid #e0f0f3;
+  }
+
+  .btn-cancel {
+    background: transparent;
+    border: 2px solid #e0f0f3;
+    color: #678c93;
+    padding: 0.8rem 1.5rem;
+    border-radius: 10px;
     font-weight: 600;
+    transition: all 0.2s ease;
+  }
+
+  .btn-cancel:hover {
+    border-color: #ff4757;
+    color: #ff4757;
+  }
+
+  .btn-proceed {
+    background: transparent;
+    border: 2px solid #e0f0f3;
+    color: #678c93;
+    padding: 0.8rem 1.5rem;
+    border-radius: 10px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+
+  .btn-proceed:hover {
+    border-color: #ff4757;
+    color: #ff4757;
   }
 </style>
 
-<div class="modal fade" id="read_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-    <div class="modal-dialog read-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header" style="background-color: #54A5AF; padding-top:10px !important;">
-                <h4 class="modal-title" id="defaultModalLabel" style="color:#fff;">Chose Payment Method</h4>
-            </div>
-            <div class="modal-body">
-                <p style="text-align: center; font-weight: bolder; color: black; font-size: larger">Please tap NFC Card or pay with MMQR</p>
-                <div style="text-align: center; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
-                    <button class="payment-option-btn" id="mmqr_btn">
-                        <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px;">
-                        <span>MMQR</span>
-                    </button>
-                    <button class="payment-option-btn">
-                        <img src="/image/nfc.png" alt="NFC Payment" style="max-width: 120px;">
-                        <span>NFC Reader</span>
-                    </button>
-                </div>
-            </div>
-            <div class="modal-footer" style="justify-content: center;">
-                <button type="button" class="btn btn-danger btn-lg" id="close">Cancel</button>
-            </div>
+<div class="modal fade payment-modal" id="read_modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+        <div class="payment-header">
+                <h2 class="modal-title">Payment Selection</h2>
         </div>
+      <div class="payment-grid">
+        <!-- Dynamic QR Card -->
+        <div class="payment-card" id="dynamic_qr">
+          <div class="payment-icon">⎙</div>
+          <div class="payment-label">Dynamic QR</div>
+          <div class="payment-description">
+            Generate unique QR code for this specific transaction
+          </div>
+        </div>
+
+        <!-- Static QR Card -->
+        <div class="payment-card" id="static_qr">
+          <div class="payment-icon">⏚</div>
+          <div class="payment-label">Static QR</div>
+          <div class="payment-description">
+            Use pre-registered merchant QR code for payment
+          </div>
+        </div>
+
+        <!-- Read NFC Card -->
+        <div class="payment-card disabled" style="grid-column: span 2;">
+          <div class="payment-icon">⎔</div>
+          <div class="payment-label">NFC Tap</div>
+          <div class="payment-description">
+            Tap your NFC-enabled card or device
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn-cancel" id="close">
+          Cancel Payment
+        </button>
+        <button type="button" class="btn-proceed">
+            Process
+        </button>
+      </div>
     </div>
+  </div>
 </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    const paymentCards = document.querySelectorAll('.payment-card:not(.disabled)');
+    const proceedButton = document.querySelector('.btn-proceed');
+    const cancelButton = document.querySelector('.btn-cancel');
+
+    let selectedPaymentMethodId = null;
+    let selectedPaymentMethodLabel = '';
+    const originalProceedButtonText = proceedButton.textContent.trim(); // Store original button text
+
+    // Function to update the "Process" button's state and appearance
+    function styleProceedButton(enabled) {
+        proceedButton.disabled = !enabled;
+
+        if (enabled) {
+            proceedButton.style.borderColor = '#54A5AF'; // Active/theme color
+            proceedButton.style.color = '#54A5AF';
+            proceedButton.textContent = `Process with ${selectedPaymentMethodLabel}`;
+            // Opacity and cursor will be handled by :disabled CSS or browser defaults
+        } else {
+            // Reset to default styles (defined in CSS) when disabled
+            proceedButton.style.borderColor = ''; // Reverts to stylesheet's .btn-proceed border-color
+            proceedButton.style.color = '';       // Reverts to stylesheet's .btn-proceed color
+            proceedButton.textContent = originalProceedButtonText;
+        }
+    }
+
+    // Initial state: Disable the "Process" button
+    styleProceedButton(false);
+
+    paymentCards.forEach(card => {
+        card.addEventListener('click', function (e) {
+            // If the clicked card is already active, we can either do nothing
+            // or re-affirm the selection. Current logic re-affirms.
+            // This ensures that selectedPaymentMethodLabel is correctly set for the button text.
+
+            // Remove 'active' class from all other payment cards
+            paymentCards.forEach(c => {
+                if (c !== e.currentTarget) {
+                    c.classList.remove('active');
+                }
+            });
+
+            // Add 'active' class to the clicked card
+            e.currentTarget.classList.add('active');
+
+            // Store selected method's ID and Label
+            selectedPaymentMethodId = e.currentTarget.id;
+            selectedPaymentMethodLabel = e.currentTarget.querySelector('.payment-label').textContent.trim();
+
+            // Enable and update the "Process" button
+            styleProceedButton(true);
+        });
+    });
+
+    proceedButton.addEventListener('click', function () {
+        if (!this.disabled && selectedPaymentMethodId) {
+            console.log(`Action: Process payment using ${selectedPaymentMethodId}`);
+
+            if (selectedPaymentMethodId === 'dynamic_qr') {
+              initDynamicQrPay()
+            } else if (selectedPaymentMethodId === 'static_qr') {
+              // showStaticQRInstructions();
+            }
+        } else {
+            alert("Please select a payment method first.");
+        }
+    });
+
+    cancelButton.addEventListener('click', function () {
+        console.log("Action: Cancel payment.");
+
+        paymentCards.forEach(c => c.classList.remove('active'));
+        selectedPaymentMethodId = null;
+        selectedPaymentMethodLabel = '';
+
+        styleProceedButton(false);
+    });
+
+    const disabledNfcCard = document.querySelector('.payment-card.disabled');
+    if (disabledNfcCard) {
+        disabledNfcCard.style.cursor = 'not-allowed';
+        // Add opacity if not already styled to look sufficiently disabled by its class
+        if (window.getComputedStyle(disabledNfcCard).opacity === '1') {
+             disabledNfcCard.style.opacity = '0.6';
+        }
+    }
+
+    function initDynamicQrPay() {
+      const paymentMethod = 'MMQR';
+      let table_id = $("#table_id").text();
+      let booking_id = $("#booking_id").text();
+      let customer_id = $("#customer_id").text();
+      let second_display_lookup = $("#display_type").val();
+
+      let params = {
+        order_source: "food_court",
+        order_type: "dine_in",
+        customer_id: customer_id,
+        guest_info: "",
+        table_id: table_id,
+        order_items: JSON.stringify(get_order_item_rows()),
+        create_type: "create_pay",
+      };
+
+      fetch('/foodcourt/addorders/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
+        },
+        body: JSON.stringify(params),
+      })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then(result => {
+          booking_id = result.booking_id;
+          console.log(result);
+          window.location.href = `/foodcourt/${result.sale_id}/qrpay/dynamic_init`;
+
+          if (document.getElementById("server_mode").value !== "cloud" && second_display_lookup === 2) {
+            // customer_display_view(null, "reload");
+          }
+        })
+        .catch(error => {
+          document.getElementById("oqs_loading_wrapper").style.display = "none";
+          document.getElementById("create_order").disabled = false;
+          document.getElementById("create_pay_order").disabled = false;
+          swal("Error", "Status: " + error.message, "error");
+        });
+
+    }
+
+    function get_order_item_rows(){
+      var order_items = [];
+      var item_row    = $('.summary-items tbody tr');
+      $(item_row).each(function(i){
+        var order_item = {};
+
+        order_item.order_item_id      = $(item_row[i]).attr('data-row');
+        order_item.item_instance_code = $(item_row[i]).attr('data-instance-code');
+        order_item.quantity           = $(item_row[i]).children('#item_qty').text();
+    //parent id
+        if ($(item_row[i]).attr('data-parent')=="true") {
+          parent_id = $(item_row[i]).attr('data-row');
+        }
+        if ($(item_row[i]).attr('data-sub-item')=="true") {
+          order_item.parent_order_item_id = parent_id
+        }
+    //end parent id
+        order_item.options            = $(item_row[i]).attr('data-options');
+        order_items.push(order_item);
+      });
+      return order_items;
+    }
+});
+</script>