 <?php
// 1. Ambil data bank milik user yang sedang login
// Asumsi $_SESSION['id'] adalah ID user yang login
$id_user_login = $_SESSION['id'];
$query_bank_user = mysqli_query($koneksi, "SELECT * FROM tb_bank WHERE id_user = '$id_user_login' AND level = 'user' LIMIT 1");
$bank_user = mysqli_fetch_array($query_bank_user);

?>

 <style>
#view_all_available_banks {
    cursor: pointer;
    color: white;
    text-decoration: underline;
}

/* OPTIONAL: efek active (tanda merah) */
.payment-method-selection input[type="radio"] {
    display: none;
}
.payment-method-selection label {
    border: 2px solid transparent;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
}
.payment-method-selection input[type="radio"]:checked + label {
    border: 2px solid red;
}
</style>

<ul class="bank-status-list">
<?php
$queryccc = mysqli_query($koneksi, "SELECT * FROM tb_bank WHERE level = 'admin'");
while ($data = mysqli_fetch_array($queryccc)) {
?>
    <li>
        <div data-online="true">
            <img src="../uploads/bank/<?php echo $data['icon'] ?>">
        </div>
    </li>
<?php } ?>
</ul>

<div class="tab-menu-background-container">
    <div class="tab-menu-container">
        <a href="?page=deposit">Deposit</a>
        <a href="?page=withdraw">Penarikan</a>
        <a href="?page=profile">Banking Account</a>
    </div>
</div>

<?php
$qris = mysqli_query($koneksi, "SELECT * FROM tb_qris LIMIT 1");
$data_qris = mysqli_fetch_array($qris);
?>

<div class="standard-form-container deposit-container">
<div class="container">
<div class="row">
<div class="col-sm-12">

<form action="?page=proses_deposit" method="post" enctype="multipart/form-data">

<!-- METODE PEMBAYARAN -->
<div class="form-group deposit-form-group">
<label>Metode Pembayaran</label>

<div class="payment-method-selection">

    <div>
        <input type="radio" name="PaymentType" id="payment_method_QR" value="QR" checked>
        <label for="payment_method_QR">
            <img src="//d33egg70nrp50s.cloudfront.net/Images/payment-types/QR.svg">
            <span>QRIS</span>
        </label>
    </div>

    <div>
        <input type="radio" name="PaymentType" id="payment_method_BANK" value="BANK">
        <label for="payment_method_BANK">
            <img src="//d33egg70nrp50s.cloudfront.net/Images/payment-types/BANK.svg">
            <span>Bank/VA</span>
        </label>
    </div>

    <div>
        <input type="radio" name="PaymentType" id="payment_method_EMONEY" value="EMONEY">
        <label for="payment_method_EMONEY">
            <img src="//d33egg70nrp50s.cloudfront.net/Images/payment-types/EMONEY.svg">
            <span>E-Money</span>
        </label>
    </div>

    <div>
        <input type="radio" name="PaymentType" id="payment_method_PULSA" value="PULSA">
        <label for="payment_method_PULSA">
            <img src="//d33egg70nrp50s.cloudfront.net/Images/payment-types/PULSA.svg">
            <span>Pulsa</span>
        </label>
    </div>

</div>
</div>

<!-- SALDO -->
<div class="balance-info-container">
    <a href="?page=riwayat_deposit">Riwayat Deposit</a>
    <div class="total-balance">
        <p>Saldo Saya</p>
        <span><?php echo number_format($balance, 2, ".", ","); ?></span>
    </div>
</div>

<!-- NOMINAL -->
<div class="form-group deposit-form-group amount-container">
<label>Jumlah <span>*</span></label>

<div class="deposit-amount">
    <input type="number" name="nominal" class="form-control deposit_amount_input" required>
    <div class="currency-suffix">.000,-</div>
</div>

<div id="real_deposit_amount"></div>
</div>

<!-- AKUN ASAL -->
<div class="form-group">
<label>Akun Asal <span>*</span></label>
<select class="form-control" name="dari_bank">
    <option value="<?php echo $bank_user['id'] ?>">
        <?php echo $bank_user['nama_bank']; ?> | <?php echo $bank_user['nomor_rekening']; ?>
    </option>
</select>
</div>

<!-- QRIS -->
<div class="form-group text-center">
<label>Scan QRIS</label><br>

<?php if (!empty($data_qris['gambar'])) { ?>
    <img src="../uploads/qris/<?php echo $data_qris['gambar']; ?>" 
         style="max-width:300px;width:100%;border-radius:10px;border:1px solid #ddd;">
<?php } else { ?>
    <p>QRIS tidak tersedia</p>
<?php } ?>
</div>

<!-- BONUS -->
<div class="form-group">
<label>Bonus</label>
<select name="bonus" class="form-control">
    <option value="tanpabonus">Tanpa Bonus</option>
    <?php
    $query = mysqli_query($koneksi, "SELECT * FROM tb_bonus WHERE status='active'");
    while ($data = mysqli_fetch_array($query)) {
    ?>
        <option value="<?php echo $data['id'] ?>">
            <?php echo $data['judul']; ?>
        </option>
    <?php } ?>
</select>
</div>

<!-- UPLOAD BUKTI -->
<div class="form-group">
    <label>Bukti Transfer <span>*</span></label>
    <input type="file" name="bukti_transfer" class="form-control" required>
</div>

<!-- HIDDEN TYPE -->
<input type="hidden" name="metode" value="QRIS">

<!-- SUBMIT -->
<div class="standard-button-group">
    <input type="submit" name="submit" class="standard-secondary-button" value="DEPOSIT">
</div>

</form>

</div>
</div>
</div>
</div>

<!-- JAVASCRIPT -->
<script>
// FORMAT RUPIAH
document.querySelector('.deposit_amount_input').addEventListener('input', function() {
    let value = parseInt(this.value);
    let display = document.getElementById('real_deposit_amount');

    if (!isNaN(value)) {
        display.innerHTML = "Total Transfer: Rp " + value.toLocaleString('id-ID');
    } else {
        display.innerHTML = "Masukkan nominal deposit";
    }
});

// PINDAH HALAMAN
document.querySelectorAll('input[name="PaymentType"]').forEach(el => {
    el.addEventListener('change', function() {

        if (this.value === 'BANK') {
            window.location.href = '?page=deposit';
        }

    });
});
</script>