manjapro_v6/hspages/payment/paydisini/proses.php

<?php

function getListPembayaran($idTagihan) {
    return '
<style>
/* ===== Header ===== */
.header-box {
  max-width: 550px;
  margin: 20px auto 0;
  color: #fff;
  padding: 0 15px;
  text-align: center;
}
.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  zoom: 90%;
}
.brand-row img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
}
.brand-row h5 {
  margin: 0;
}
.amount {
  font-size: 2rem;
  font-weight: 700;
  margin: 10px 0;
}

/* ===== Card Utama ===== */
.payment-card {
  max-width: 550px;
  margin: 0 auto;
  border-radius: 22px 22px 0 0;
  padding: 25px;
  background: #fff;
  min-height: 70vh;
  position: relative;
}

/* ===== Tombol Bayar ===== */
.btn-orange {
  background: #fca503;
  color: #fff;
  border-radius: 12px;
  padding: 14px;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 20px auto 0;
  display: block;
  max-width: 500px;
}
.btn-orange:hover {
  background: #e76e0d;
  color: #fff;
}

/* ===== Accordion (Bootstrap 4) ===== */
.card-header {
  border-radius: 12px !important;
  background: #fff !important;
  padding: 0 !important;
}
.card-header .btn-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 0.5rem 1rem;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
}
.card-header .btn-link:focus {
  outline: none !important;
  box-shadow: none !important;
}
.card-header .fw-semibold {
  margin-bottom: 0.25rem !important;
}

/* group kiri = title + icons */
.card-header .accordion-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card-header .accordion-icons {
  display: flex;
  margin-top: 5px;
}
.collapse.show ~ .accordion-icons {
  display: none !important;
}
.card-body {
  padding: 0.25rem 0 !important;
}

/* ===== List Metode ===== */
.list-group-item {
  border-color: #dee2e6;
  padding: 0.5rem 1rem;
}
.list-btn {
  border: none;
  background: none;
  outline: none;
  padding: 8px 0;
  font-weight: 500;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
}
.list-btn:hover {
  background-color: #f8f9fa;
}

/* ===== Metode Terpilih ===== */
.method-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  background: #fafafa;
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
}
.method-selected {
  border: 2px solid #fca503;
  background: #fff9f4;
}
.ubah-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* ===== Detail Tagihan ===== */
#instruksiBox {
  font-size: 0.95rem;
  border-radius: 12px;
  margin-top: 15px;
}
.detail-row {
  display: flex;
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.detail-row .label {
  font-weight: 600;
  min-width: 120px;
}
.detail-row .value {
  flex: 1;
  text-align: right;
  word-break: break-word;
  white-space: normal;
}

/* ===== Bank List ===== */
.bank-list {
  text-align: left;
}
.bank-list .list-group-item {
  border: none;
}
.bank-list .pay-method {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  color: #333;
  gap: 15px;
}
.bank-logo-box {
  width: 60px;
  height: 60px;
  border: 2px solid #ddd;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  flex-shrink: 0;
  margin-top: -10px;
}
.bank-logo-box img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}
.bank-name {
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 5px;
  flex: 1;
}
.accordion-icons {
  display: flex;
  gap: 8px;
  margin-top: 5px; /* jarak antara teks dan icon */
  flex-wrap: wrap; /* kalau icon banyak, bisa turun ke baris bawah */
}
.bank-icon-box {
  width: 60px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  margin-bottom: 5px;
}
.bank-icon-box img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

/* ===== Footer Powered ===== */
.powered {
  text-align: center;
  font-size: 0.9rem;
  color: #777;
  margin-top: 40px;
}
.powered img {
  height: 20px;
  margin-left: 5px;
}
/* Hide icons saat accordion aktif */
.btn[aria-expanded="true"] .accordion-icons {
  display: none !important;
}

/* Border radius accordion */
.card {
  border-radius: 20px !important;
  overflow: hidden;
}
.card-header {
  border-radius: 20px 20px 0 0 !important;
}
.card:last-child {
  border-radius: 20px !important;
}

</style>
    <!-- Pilihan Metode -->
    <div id="pilihanMetode">
      <h6 class="mb-3">Metode Pembayaran</h6>

      <div id="accordionMetode">
        <!-- Virtual Account -->
        <div class="card mb-3">
          <div class="card-header p-0" id="headingVA">
            <h5 class="mb-0">
              <button class="btn btn-link w-100 text-left collapsed" type="button" 
                data-toggle="collapse" data-target="#collapseVA" 
                aria-expanded="false" aria-controls="collapseVA">
                <span class="d-flex flex-column">
                  <span class="fw-semibold">Virtual Account</span>
                  <span class="accordion-icons">
                    <span class="bank-icon-box"><img src="https://manjapro.net/dist/img/bri.png" alt="BRI"></span>
                    <span class="bank-icon-box"><img src="https://manjapro.net/dist/img/bni.png" alt="BNI"></span>
                    <span class="bank-icon-box"><img src="https://manjapro.net/dist/img/mandiri.png" alt="Mandiri"></span>
                  </span>
                </span>
              </button>
            </h5>
          </div>
          <div id="collapseVA" class="collapse" aria-labelledby="headingVA" data-parent="#accordionMetode">
            <div class="card-body p-0">
              <ul class="list-group list-group-flush bank-list">
                <li class="list-group-item">
                  <a class="list-btn pay-method" onclick="pilihMetode(\'Virtual Account\', \'BRI\', \'https://manjapro.net/dist/img/bri.png\')">
                    <div class="bank-logo-box"><img src="https://manjapro.net/dist/img/bri.png" alt="BRI"></div>
                    <span class="bank-name">BRI VA</span>
                  </a>
                </li>
                <li class="list-group-item">
                  <a class="list-btn pay-method" onclick="pilihMetode(\'Virtual Account\', \'BNI\', \'https://manjapro.net/dist/img/bni.png\')">
                    <div class="bank-logo-box"><img src="https://manjapro.net/dist/img/bni.png" alt="BNI"></div>
                    <span class="bank-name">BNI VA</span>
                  </a>
                </li>
                <li class="list-group-item">
                  <a class="list-btn pay-method" onclick="pilihMetode(\'Virtual Account\', \'Mandiri\', \'https://manjapro.net/dist/img/mandiri.png\')">
                    <div class="bank-logo-box"><img src="https://manjapro.net/dist/img/mandiri.png" alt="Mandiri"></div>
                    <span class="bank-name">Mandiri VA</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- E-Wallet & QRIS -->
        <div class="card">
          <div class="card-header p-0" id="headingQRIS">
            <h5 class="mb-0">
              <button class="btn btn-link w-100 text-left collapsed" type="button" 
                data-toggle="collapse" data-target="#collapseQRIS" 
                aria-expanded="false" aria-controls="collapseQRIS">
                <span class="d-flex flex-column">
                  <span class="fw-semibold">E-Wallet & QRIS</span>
                  <span class="accordion-icons">
                    <span class="bank-icon-box"><img src="https://manjapro.net/dist/img/qris.png" alt="QRIS"></span>
                  </span>
                </span>
              </button>
            </h5>
          </div>
          <div id="collapseQRIS" class="collapse" aria-labelledby="headingQRIS" data-parent="#accordionMetode">
            <div class="card-body p-0">
              <ul class="list-group list-group-flush bank-list">
                <li class="list-group-item">
                  <a class="list-btn pay-method" onclick="pilihMetode(\'E-Wallet & QRIS\', \'QRIS\', \'https://manjapro.net/dist/img/qris.png\')">
                    <div class="bank-logo-box"><img src="https://manjapro.net/dist/img/qris.png" alt="QRIS"></div>
                    <span class="bank-name">QRIS</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div id="metodeTerpilih" class="d-none">
      <div class="method-card method-selected">
        <div class="bank-logo-box" style="margin-top: 0px;">
          <img src="https://manjapro.net/dist/img/qris.png" id="metodeLogo">
        </div>
        <span class="bank-name" id="metodeText"></span>
        <button type="button" class="btn btn-sm ubah-btn" onclick="ubahMetode()" style="font-size: 105%; color: #fca503;"><strong>Ubah</strong></button>
      </div>
    </div>
    
    <button id="btnBayar" class="btn btn-orange w-100 d-none" onclick="bayar()">Bayar</button>

<script>
let metodeDipilih = "";
let metodeService = "";
let imgMetode = "";
const idTagihan = '.$_SESSION['agen'].';

function pilihMetode(metode, service, logo){
  metodeDipilih = metode;
  metodeService = service;
  imgMetode = logo;

  document.getElementById("pilihanMetode").classList.add("d-none");
  document.getElementById("metodeTerpilih").classList.remove("d-none");
  document.getElementById("metodeText").innerHTML = metode + "<br>" + service;
  document.getElementById("metodeLogo").src = logo;
  document.getElementById("btnBayar").classList.remove("d-none");
}

function ubahMetode(){
  metodeDipilih = "";
  metodeService = "";
  document.getElementById("pilihanMetode").classList.remove("d-none");
  document.getElementById("metodeTerpilih").classList.add("d-none");
  document.getElementById("btnBayar").classList.add("d-none");
}

// function bayar(){
//   if(metodeDipilih !== ""){
//     let btn = document.getElementById("btnBayar");
//     btn.disabled = true;
//     btn.innerText = "Memproses...";

//     fetch("/proses.php", {
//       method: "POST",
//       headers: {"Content-Type": "application/x-www-form-urlencoded"},
//       body: "action=bayar"
//         + "&paymentMethod=" + encodeURIComponent(metodeService)
//         + "&idTagihan=" + encodeURIComponent(idTagihan)
//     })
//     .then(res => res.json())
//     .then(data => {
//       btn.disabled = false;
//       btn.innerText = "Bayar Sekarang";
//       if(data.success){
//         window.location.reload();
//       } else {
//         alert("Gagal: " + (data.message || "Terjadi kesalahan"));
//       }
//     })
//     .catch(err => {
//       btn.disabled = false;
//       btn.innerText = "Bayar Sekarang";
//       console.error(err);
//       alert("Terjadi error saat menghubungi server.");
//     });

//   } else {
//     alert("Silakan pilih metode pembayaran terlebih dahulu!");
//   }
// }
</script>
    ';
}