add print job for qr pay

app/views/foodcourt/addorders/detail.html.erb

@@ -917,7 +917,7 @@ $('#mmqr').click(function() {
             $createPayOrderBtn.prop('disabled', false);
 
             const errorMsg = xhr.status ? `Status: ${xhr.status} - ${xhr.statusText}` : "Network error";
-            swal("Error", errorMsg, "error");
+            // swal("Error", errorMsg, "error");
         }
     });
 })

app/views/layouts/_read_modal.html.erb

@@ -1,3 +1,4 @@
+<<<<<<< Updated upstream
 <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">
@@ -13,6 +14,172 @@
             <div class="modal-footer" style="justify-content: center;">
                 <button type="button" class="btn btn-danger" id="close" >Cancel</button>
             </div>
+=======
+<style>
+  /* Base Styling */
+  .payment-modal {
+    border-radius: 18px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+  }
+
+  #read_modal{
+      pointer-events: auto;
+      zindex: 1000;
+  }
+
+  .payment-header {
+    background: #f8fbfc;
+    padding: 1.5rem;
+    border-bottom: 2px solid #e0f0f3;
+    text-align: center;
+  }
+
+  .merchant-logo {
+    height: 65px;
+    margin-bottom: 1rem;
+    filter: drop-shadow(0 2px 4px rgba(84,165,175,0.1));
+  }
+
+  .modal-title {
+    color: #2a626b;
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+  }
+
+  /* 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: flex;
+    flex-direction: column;
+    /* grid-template-columns: repeat(1, 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;
+  }
+  .payment-card#read_nfc {
+      opacity: 0.6;
+      cursor: not-allowed;
+  }
+</style>
+
+<div class="modal fade payment-modal" id="read_modal" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+        <div class="payment-header">
+                <h2 class="modal-title">Payment Options</h2>
+        </div>
+      <div class="payment-grid">
+        <div class="payment-card" id="dynamic_qr">
+          <div class="payment-icon text-center">
+              <img src="/image/mmqr.webp" width="100" height="100" />
+          </div>
+          <div class="payment-label text-center">Click here to pay with MMQR</div>
+        </div>
+
+        <div class="text-center text-bold text-muted">
+            (Or)
+>>>>>>> Stashed changes
         </div>
     </div>
 </div>