<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:</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: 90px; 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: 350px;">
              <!-- 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: 1rem;
      }
      #mmqr_payment{
        margin-top: 1rem;
      }

      #payment_success{
        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>
