327 lines
11 KiB
Plaintext
327 lines
11 KiB
Plaintext
<div class="row clearfix h-100">
|
|
<!-- First Column: Invoice Details -->
|
|
<div class="col-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-body p-0">
|
|
<div class="card-text">
|
|
<div id="order-detail-slimscroll" style="min-height: 55vh; height: 55vh; overflow-y: auto;">
|
|
<div class="table-responsive p-3">
|
|
<table class="table table-striped second_display_items mb-0" 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 by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<table class="table table-borderless mb-0">
|
|
<tr>
|
|
<td class="charges-name"><strong>Sub Total:</strong></td>
|
|
<td class="text-right item-attr"><strong id="s_sub_total"></strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="charges-name"><strong>Discount:</strong></td>
|
|
<td class="text-right item-attr"><strong id="s_total_discount"></strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="charges-name"><strong>Tax Amount (5%):</strong></td>
|
|
<td class="text-right item-attr"><strong id="s_tatal_tax"></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"></strong></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Second Column: MMQR Payment -->
|
|
<div class="col-12 d-flex flex-column h-100 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>
|
|
<!-- MODIFICATION HERE: Removed flex-column -->
|
|
<div class="card-body row d-flex align-items-center justify-content-center">
|
|
|
|
<!-- This is now Column 1 -->
|
|
<div class="col-6"> <!-- Using col-md-6 for responsiveness, col-6 is also fine -->
|
|
<div class="text-center">
|
|
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
|
|
<h5>Scan to Pay</h5>
|
|
<p class="text-muted">Use your mobile wallet app</p>
|
|
</div>
|
|
|
|
<div id="qr-payment-container" class="mx-auto text-center p-3 bg-white rounded border" style="max-width: 400px;">
|
|
<!-- Added mx-auto to center this block within its col-6 parent -->
|
|
<div id="qr-code" class="mb-2">
|
|
<div id="qrpay_svg">
|
|
<svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="100" height="100" fill="#e0e0e0"/>
|
|
<text x="50" y="55" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">QR Code Here</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="payment-details text-dark">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- This is now Column 2 -->
|
|
<div class="col-6 d-flex flex-column"> <!-- Using col-md-6. Added d-flex flex-column here to make mt-auto work -->
|
|
<div class="payment-instructions mt-4 text-center">
|
|
<h6>How to Pay:</h6>
|
|
<!-- text-left on ol seems fine, but you might want text-md-left if it looks odd on small screens -->
|
|
<ol class="text-left small pl-3 mb-0" style="display: inline-block;"> <!-- inline-block for text-center to work on ol -->
|
|
<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>
|
|
<!-- mt-auto will push this to the bottom of this column if the column has extra space -->
|
|
<div class="supported-partners-container mt-auto pt-3 pb-3 text-center">
|
|
<h6 class="supported-partners-title">Supported Partners</h6>
|
|
<div class="partner-logos">
|
|
<img src="/image/logo/AYA-Pay.webp" alt="AYA Pay" class="partner-logo">
|
|
<img src="/image/logo/KBZ-Pay.webp" alt="KBZ Pay" class="partner-logo">
|
|
<img src="/image/logo/OK-Dollor.webp" alt="OK Dollar" class="partner-logo">
|
|
<img src="/image/logo/Wave.webp" alt="Wave Money" class="partner-logo">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Third Column: Payment Success -->
|
|
<div class="col-12 d-flex flex-column h-100 hidden" id="payment_success">
|
|
<div class="card h-100 align-items-center justify-content-center text-center p-md-4 p-3" style="background-color: #f0fff0; opacity: 0.95; border: 1px solid #28a745;">
|
|
<div class="success-icon mb-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
|
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="mb-2 text-success success-title">Payment Successful!</h2>
|
|
<p class="lead mb-3 success-message">Your transaction has been completed.</p>
|
|
<div class="payment-summary bg-white p-3 rounded shadow-sm mb-4" style="max-width: 380px; border-left: 5px solid #28a745;color: #000000">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
html, body, .row.h-100 {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
line-height: 1.6;
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
border: none;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-header {
|
|
border-radius: 8px 8px 0 0 !important;
|
|
padding: 0.75rem 1.25rem;
|
|
}
|
|
.card-header h4 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.card-body {
|
|
flex-grow: 1;
|
|
padding: 1.25rem;
|
|
overflow-y: auto;
|
|
}
|
|
#second_display_order_items .card-body.p-0 {
|
|
padding: 0 !important;
|
|
}
|
|
#order-detail-slimscroll .table-responsive.p-3 {
|
|
padding: 1.25rem !important;
|
|
}
|
|
|
|
.table {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.table thead th {
|
|
border-bottom: 2px solid #dee2e6;
|
|
background-color: #e9ecef;
|
|
white-space: nowrap;
|
|
}
|
|
.table td, .table th {
|
|
vertical-align: middle;
|
|
}
|
|
#order-items-table .item-qty,
|
|
#order-items-table .item-price {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#qr-payment-container {
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.payment-instructions {
|
|
background-color: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
}
|
|
.payment-instructions ol {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.text-right { text-align: right; }
|
|
.text-center { text-align: center; }
|
|
|
|
.table-active {
|
|
background-color: rgba(0,0,0,0.07) !important;
|
|
font-size: 1.05em;
|
|
}
|
|
.table-active td strong { font-weight: bold; }
|
|
|
|
#order-items-table th, #order-items-table td {
|
|
padding: 0.65rem 0.75rem;
|
|
}
|
|
|
|
.charges-name { padding-left: 0.75rem; }
|
|
.item-attr {
|
|
padding-right: 0.75rem;
|
|
white-space: nowrap;
|
|
}
|
|
.table-borderless td, .table-borderless th {
|
|
border: 0;
|
|
padding-top: 0.4rem;
|
|
padding-bottom: 0.4rem;
|
|
}
|
|
.table-borderless.mb-0 { margin-bottom: 0 !important; }
|
|
|
|
.supported-partners-container {
|
|
text-align: center;
|
|
background-color: #f8f9fa;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-top: 1px solid #e0e0e0;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
#mmqr_payment .card .supported-partners-container {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.supported-partners-title {
|
|
color: #495057;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
margin-bottom: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.partner-logos {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.partner-logo {
|
|
height: 35px;
|
|
width: auto;
|
|
max-width: 60px;
|
|
border-radius: 4px;
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
}
|
|
.partner-logo:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.h-100 { height: 100% !important; }
|
|
.row.h-100 > [class*="col-"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Removed padding-top/bottom from here to let card manage its own full height */
|
|
}
|
|
|
|
#qrpay_svg {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.hidden { display: none !important; }
|
|
|
|
/* Payment Success Screen Specific Styles */
|
|
#payment_success .card {
|
|
background-color: #f0fff0; /* Light green background */
|
|
opacity: 0.97; /* Slightly less transparent */
|
|
border: 1px solid #28a745; /* Success green border */
|
|
}
|
|
#payment_success .success-title {
|
|
font-weight: 600;
|
|
}
|
|
#payment_success .success-message {
|
|
color: #155724; /* Darker green for text */
|
|
}
|
|
#payment_success .payment-summary {
|
|
border-left: 5px solid #28a745; /* Accent border */
|
|
text-align: left; /* Align text to left inside summary box */
|
|
}
|
|
#payment_success .payment-summary p {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
@media(min-width: 600px){
|
|
#second_display_order_items{
|
|
margin-top: -3rem;
|
|
}
|
|
#mmqr_payment{
|
|
margin-top: -3rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 576px) {
|
|
.card-header h4 { font-size: 1.1rem; }
|
|
#order-items-table th, #order-items-table td {
|
|
padding: 0.5rem 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
.charges-name, .item-attr { font-size: 0.9rem; }
|
|
.table-active { font-size: 1em; }
|
|
.payment-instructions h6 { font-size: 1rem; }
|
|
.payment-instructions .small { font-size: 85%; }
|
|
|
|
#payment_success .success-icon svg { width: 60px; height: 60px; }
|
|
#payment_success .success-title { font-size: 1.5rem; }
|
|
#payment_success .lead { font-size: 1rem; }
|
|
}
|
|
</style>
|