125 lines
4.1 KiB
Plaintext
125 lines
4.1 KiB
Plaintext
<div class="row clearfix h-100">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 h-100" id="second_display_order_items">
|
|
<div class="card h-100" style="opacity: 0.85; background-color: #f8f9fa;">
|
|
<div class="card-header bg-primary text-white">
|
|
<h4 class="mb-0">Invoice Details</h4>
|
|
</div>
|
|
<div class="card-block">
|
|
<div class="card-text">
|
|
<div id="order-detail-slimscroll" style="max-height: 55vh; overflow-y: auto;">
|
|
<table class="table table-striped second_display_items" id="order-items-table">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>#</th>
|
|
<th class="item-name">Items</th>
|
|
<th class="item-qty">QTY</th>
|
|
<th class="item-price">Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Items will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="charges-name"><strong>Sub Total:</strong></td>
|
|
<td class="text-right item-attr"><strong id="s_sub_total">0.00</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="charges-name"><strong>Discount:</strong></td>
|
|
<td class="text-right item-attr"><strong id="s_total_discount">0.00</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="charges-name"><strong>Tax Amount:</strong></td>
|
|
<td class="text-right item-attr"><strong id="s_tatal_tax">0.00</strong></td>
|
|
</tr>
|
|
<tr class="table-active">
|
|
<td class="charges-name"><strong>Grand Total:</strong></td>
|
|
<td class="text-right item-attr"><strong id="s_grand_total">0.00</strong></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 d-flex flex-column hidden" style="min-height: 80%; overflow-y: hidden;" id="mmqr_payment" >
|
|
<div class="card h-100" style="opacity: 0.85;">
|
|
<div class="card-header text-white" style="background-color: #ffc107;">
|
|
<h4 class="mb-0">MMQR Payment Option</h4>
|
|
</div>
|
|
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
|
<div class="text-center">
|
|
<h5>Scan to Pay</h5>
|
|
<p class="text-muted">Use your mobile wallet app</p>
|
|
</div>
|
|
|
|
<!-- QR Code Container -->
|
|
<div id="qr-payment-container" class="text-center p-3 bg-white rounded border" style="max-width: 300px;">
|
|
<div id="qr-code" class="mb-2">
|
|
<!-- QR Code will be generated here -->
|
|
<div class="">
|
|
<div id="qrpay_svg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="payment-details text-dark">
|
|
<p class="mb-1"><strong>Amount:</strong> <span id="qr-amount"><%= number_to_currency(@total_amount) %></span></p>
|
|
<p class="mb-1"><strong>Invoice #:</strong> <span id="qr-invoice"><%= @invoice_id %></span></p>
|
|
<p class="text-muted small">Expires in 15 minutes</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-instructions mt-4 text-center">
|
|
<h6>How to Pay:</h6>
|
|
<ol class="text-left small pl-3">
|
|
<li>Open your mobile wallet app</li>
|
|
<li>Tap on 'Scan QR Code'</li>
|
|
<li>Point your camera at this code</li>
|
|
<li>Confirm the payment details</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.card {
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
border: none;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.card-header {
|
|
border-radius: 8px 8px 0 0 !important;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.table thead th {
|
|
border-bottom: 2px solid #dee2e6;
|
|
}
|
|
|
|
#qr-payment-container {
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.payment-instructions {
|
|
background-color: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.table-active {
|
|
background-color: rgba(0,0,0,0.05);
|
|
}
|
|
</style>
|