<?php require_once "../app/headl.php" ?>
<?php 
if (isset($_SESSION['user'])) {
    $user = mysqli_query($conn, "SELECT * FROM `tb_user` WHERE user = '" . $_SESSION['user'] . "'") or die(mysqli_error());
    $u = mysqli_fetch_array($user);
    $users = $u['user'];
    $userid = $u['user'];
    $id_user = $u['cuid'];
    $userID = $u['cuid'];
    $token_id = isset($u['token_id']) ? $u['token_id'] : false;
    $level = isset($u['level']) ? $u['level'] : false;


$sql_balance = mysqli_query($conn, "SELECT * FROM `tb_balance` WHERE userID = '$userID'") or die(mysqli_error());
            $sb = mysqli_fetch_array($sql_balance);
        

?>
<body>
<?php require_once "../app/menul.php" ?>
<div class="clearfix"></div>
   <style>
            body {
                font-size: 12px;
                color: #FFFFFF;
                background-color: #1b1b1b;
            }

            .btn {
                margin-bottom: 2px;
                font-size: 12px;
                font-weight: bold;
            }

            .container {
                width: 100%;
            }

            .glyphicon {
                margin-right: 5px;
            }

            .no-gutter>[class*='col-'] {
                padding-right: 5px;
                padding-left: 5px;
                padding-top: 5px;
                padding-bottom: 5px;
            }

            .tengahBaris {
                vertical-align: middle;
            }

            table {
                padding-bottom: 0px;
            }

            .panel {
                box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
            }

            input[readonly] {
                background-color: #fff0c4 !important;
                /* any other styles */
            }


            .panel-danger>.panel-heading,
            .panel-warning>.panel-heading,
            .btn-warning {
                color: #000000;
                font-weight: bold;
                border-color: rgba(0, 0, 0, 0.6);
                background-image: -webkit-linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
                background-image: -o-linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
                background-image: -webkit-gradient(linear, left top, left bottom, from(#eee791), color-stop(60%, #9d8b3d), to(#9f8435));
                background-image: linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
                background-repeat: no-repeat;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0);
                -webkit-filter: none;
                filter: none
            }

            .btn-warning:hover {
                color: #000000;
                font-weight: bold;
                border-color: rgba(0, 0, 0, 0.6);
                background-image: -webkit-linear-gradient(#d7a001, #d7a001 60%, #d7a001);
                background-image: -o-linear-gradient(#d7a001, #d7a001 60%, #d7a001);
                background-image: -webkit-gradient(linear, left top, left bottom, from(#d7a001), color-stop(60%, #d7a001), to(#d7a001));
                background-image: linear-gradient(#d7a001, #d7a001 60%, #d7a001);
                background-repeat: no-repeat;
            }

            .login {
                color: #000000;
                font-weight: bold;
                border-color: rgba(0, 0, 0, 0.6);
                background-image: -webkit-linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
                background-image: -o-linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
                background-image: -webkit-gradient(linear, left top, left bottom, from(#eee791), color-stop(60%, #9d8b3d), to(#9f8435));
                background-image: linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
                background-repeat: no-repeat;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0);
                -webkit-filter: none;
                filter: none
            }


            .panel-default>.panel-heading {
                color: #ffffff;
                border-color: rgba(0, 0, 0, 0.6)
            }

            .navbar-default {
                background-color: #000000;
                border-color: #2b2e32
            }

            .well {
                background: #111 !important;
            }


            input[readonly] {
                background-color: #eeeecd !important;
                /* any other styles */
            }

            textarea[readonly] {
                background-color: #eeeecd !important;
                /* any other styles */
            }

            .form-control {
                height: 40px !important;
                border-radius: 3px !important;
            }

            .form-control#validasi {
                height: 50px !important;
                border-radius: 3px !important;
            }

            .form-control-login {
                height: 40px !important;
                border-radius: 3px !important;
            }

            .form-control#reg_username,
            #reg_pass,
            #reg_passcon,
            #reg_email,
            #reg_telpon,
            #reg_bank,
            #reg_rek,
            #reg_nama,
            #reg_ref,
            #reg_dari,
            #reg_lain {
                height: 45px !important;
                border-radius: 3px !important;
            }


            textarea {
                height: 100px !important;
                width: 100%;
                padding: 10px;
                border-radius: 5px !important;
            }

            td {
                padding-top: 5px !important;
                padding-bottom: 5px !important;
            }

            .borderbottom {
                border-bottom: 2px solid #c2c2c2;
                border-top: 2px solid #c2c2c2;
            }

            @media (max-width: 1200px) {
                .navbar {
                    background: #32363b;
                }

                .navbar-header {
                    float: none;
                }

                .navbar-left,
                .navbar-right {
                    float: none !important;
                }

                .navbar-toggle {
                    display: block;
                }

                .navbar-collapse {
                    border-top: 1px solid transparent;
                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
                }

                .navbar-fixed-top {
                    top: 0;
                    border-width: 0 0 1px;
                }

                .navbar-collapse.collapse {
                    display: none !important;
                }

                .navbar-nav {
                    float: none !important;
                    margin-top: 7.5px;
                }

                .navbar-nav>li {
                    float: none;
                }

                .navbar-nav>li>a {
                    padding-top: 10px;
                    padding-bottom: 10px;
                }

                .collapse.in {
                    display: block !important;
                }


                @media (min-width: 320px) {

                    /* iPhone SE,6/7/8/X, Galaxy S5,  */
                    .fadein {
                        position: relative;
                        width: 100%;
                        height: 160px;
                    }

                    .fadein img {
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                }

                @media (min-width: 400px) {

                    /* iPhone 6/7/8 Plus, Pixel 2,Pixel 2 XL,  */
                    .fadein {
                        position: relative;
                        width: 100%;
                        height: 200px;
                    }

                    .fadein img {
                        position: absolute;
                        left: 0;
                        top: 0;
                    }


                }

                @media (min-width: 700px) {

                    /* iPad  */
                    .fadein {
                        position: relative;
                        width: 100%;
                        height: 380px;
                    }

                    .fadein img {
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                }

                @media (min-width: 1000px) {
                    .fadein {
                        position: relative;
                        width: 100%;
                        height: 480px;
                    }

                    .fadein img {
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                }

            }

            textarea {
                height: 100px !important;
                width: 100%;
                padding: 10px;
                border-radius: 5px !important;
            }

            .form-control {
                height: 25px !important;
                border-radius: 3px !important;
            }

            td {
                padding-top: 5px !important;
                padding-bottom: 5px !important;
                padding-left: 3px !important;
                padding-right: 3px !important;
            }

            .grabgtab {
                font-weight: bold;
                border-color: rgba(0, 0, 0, 0.6);
                background-image: -webkit-linear-gradient(#1b1b1b, #1b1b1b 60%, #10100e);
                background-image: -o-linear-gradient(#1b1b1b, #1b1b1b 60%, #10100e);
                background-image: -webkit-gradient(linear, left top, left bottom, from(#1b1b1b), color-stop(60%, #1b1b1b), to(#10100e));
                background-image: linear-gradient(#1b1b1b, #1b1b1b 60%, #10100e);
                background-repeat: no-repeat;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b1b1b', endColorstr='#10100e', GradientType=0);
                -webkit-filter: none;
                filter: none
            }

            .grabgtabbottom {
                font-weight: bold;
                border-color: rgba(0, 0, 0, 0.6);
                background-image: -webkit-linear-gradient(#3e444c, #1b1b1b 60%, #1b1b1b);
                background-image: -o-linear-gradient(#3e444c, #1b1b1b 60%, #1b1b1b);
                background-image: -webkit-gradient(linear, left top, left bottom, from(#3e444c), color-stop(60%, #1b1b1b), to(#1b1b1b));
                background-image: linear-gradient(#3e444c, #1b1b1b 60%, #1b1b1b);
                background-repeat: no-repeat;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b1b1b', endColorstr='#1b1b1b', GradientType=0);
                -webkit-filter: none;
                filter: none
            }

            .abel {
                font-family: 'Abel';
            }
            /* TAB HEADER */
.deposit-tab-header {
    display: flex;
    background: #1f2327;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    margin-bottom: 10px;
}

.deposit-tab {
    flex: 1;
    border: none;
    padding: 12px;
    font-weight: bold;
    background: #2b2f33;
    color: #aaa;
}

.deposit-tab.active {
    background: linear-gradient(#d6b76d, #b38a3b);
    color: #000;
}

/* PANEL */
.deposit-panel {
    display: none;
}

.deposit-panel.active {
    display: block;
}

/* SAMAKAN TAMPILAN PANEL */
.panel-warning,
.panel-danger {
    border: none;
    background: #2b2f33;
}

.panel-heading {
    background: none !important;
    color: #fff;
    font-weight: bold;
    border-bottom: 1px solid #444;
}

.panel-body label {
    color: #ddd;
}

/* MOBILE */
@media (max-width: 480px) {
    .deposit-tab {
        font-size: 13px;
        padding: 10px;
    }
}
   
   .panel-warning > .panel-heading {
    background: linear-gradient(to bottom, #f5d77a, #caa23a) !important;
    color: #000 !important;
    border: none;
}

.panel-warning > .panel-heading .glyphicon {
    color: #000;
}
  
  /* HEADER DEPOSIT MANUAL - KUNING EMAS */
.panel-danger > .panel-heading {
    background: linear-gradient(to bottom, #f5d77a, #caa23a) !important;
    color: #000 !important;
    border: none;
}

/* icon ikut gelap */
.panel-danger > .panel-heading .glyphicon {
    color: #000;
}

        </style>

<?php require_once "../app/game.php" ?>

<div style="height:10px; background-color:#FFF" class="grabgtabbottom"></div>

<div class="tab-content">
    <div id="dashboard_wrap" class="tab-pane fade in active">

        <div class="deposit-tab-header">
            <button class="deposit-tab active" data-target="qris">
                <span class="glyphicon glyphicon-qrcode"></span> QRIS Otomatis
            </button>
            <button class="deposit-tab" data-target="manual">
                <span class="glyphicon glyphicon-import"></span> Deposit Via Bank/Ewallet
            </button>
        </div> 

        <div class="panel panel-warning deposit-panel qris-panel active" style="display: block;">
            <div class="panel-heading">
                <strong><span class="glyphicon glyphicon-qrcode"></span> QRIS OTOMATIS</strong>
            </div>
            <div class="panel-body">

                <form class="form-group-sm" id="form_qris_otomatis">

                    <div class="form-group">
                        <label>Username</label>
                        <input type="text" class="form-control" value="<?php echo htmlspecialchars($userid); ?>" readonly disabled style="background-color: #000; color: #000; cursor: not-allowed;">
                    </div>

                    <div class="form-group">
                        <label>Nominal Deposit</label>
                        <input type="tel" id="nominal_deposit" class="form-control" name="nominal" placeholder="Minimal 10.000" required>
                    </div>

                    <input type="hidden" name="metode" value="qris_otomatis">
                    <input type="hidden" name="pay_from" value="qris">
                    <input type="hidden" name="postID" value="<?php echo $userID; ?>">

                    <button type="submit" id="btn_generate" class="btn btn-warning btn-block text-dark" style="font-weight: bold;">
                        <span class="glyphicon glyphicon-refresh"></span> Generate QRIS
                    </button>
                </form>

                <div id="qris_result_wrap" style="display:none; margin-top: 20px; text-align: center;">
                    <hr style="border-top: 1px dashed #ccc;">
                    <div class="alert alert-success">Silakan scan QRIS di bawah ini untuk menyelesaikan pembayaran:</div>
                    
                    <?php
                    // Mengambil gambar QRIS statis/dynamic dari DB untuk ditampilkan setelah generate
                    $sql_qris = mysqli_query($conn, "SELECT gambar_qris FROM tb_qris WHERE status = 1 ORDER BY id DESC LIMIT 1");
                    $qris = mysqli_fetch_array($sql_qris);
                    $gambar_qris = ($qris) ? '../upload/qris/' . htmlspecialchars($qris['gambar_qris']) : '';
                    ?>
                    
                    <?php if (!empty($gambar_qris)): ?>
                        <img src="<?php echo $gambar_qris; ?>" alt="QRIS" style="max-width:250px; border:3px solid #fff; border-radius:10px; margin-bottom:10px; box-shadow: 0px 4px 10px rgba(0,0,0,0.2);">
                        <p style="font-weight: bold; color: #fff;">Scan menggunakan Aplikasi E-Wallet / M-Banking Anda</p>
                        <p id="copy_status" class="text-success" style="font-weight:bold; display:none;">Nominal berhasil dicopy!</p>
                    <?php else: ?>
                        <div class="alert alert-danger">Gagal memuat gambar QRIS. Hubungi Admin.</div>
                    <?php endif; ?>
                </div>

            </div> 
        </div> <div class="panel panel-danger deposit-panel manual-panel" style="display: none;">
            <div class="panel-heading">
                <strong><span class="glyphicon glyphicon-import"></span> Deposit Via Bank/Ewallet</strong>
            </div>
            <div class="panel-body">
                <form class="form-group-sm" action="<?php echo $urlweb; ?>/function/deposit.php" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label>Rekening Tujuan Deposit</label>
                        <select class="form-control" name="metode" required>
                            <?php
                            $sql_bank = mysqli_query($conn, "SELECT * FROM `tb_bank` WHERE userID = 1 AND status = 1 ORDER BY cuid ASC") or die(mysqli_error());
                            while ($sb = mysqli_fetch_array($sql_bank)) {
                                echo '<option value="' . $sb['cuid'] . '">' . $sb['akun'] . ' - ' . $sb['no_rek'] . ' - ' . $sb['pemilik'] . '</option>';
                            }
                            ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Nominal Deposit</label>
                        <input type="number" class="form-control" name="nominal" placeholder="Minimal 25000" min="25000" required>
                    </div>
                    <input type="hidden" name="pay_from" value="bank_manual">
                    <input type="hidden" name="postID" value="<?php echo $userID; ?>">
                    <div class="form-group">
                        <label>Upload Bukti Transfer (Wajib)</label>
                        <input type="file" class="form-control" name="bukti_transfer" accept="image/*" required>
                        <small class="text-muted">Format: JPG, PNG, atau JPEG. Maksimal 5MB.</small>
                    </div>
                    <div class="form-group">
                        <label>Catatan (Opsional)</label>
                        <textarea class="form-control" name="catatan" placeholder="Tulis catatan jika perlu..."></textarea>
                    </div>
                    <button type="submit" name="submit" value="submit" class="btn btn-warning btn-block text-dark">
                        <span class="glyphicon glyphicon-ok"></span> Deposit Manual Bank
                    </button>
                </form>
            </div>
        </div> </div>
</div>

<?php require_once "../app/footer.php" ?>


<style>
.animate-spin {
    animation: spin 1.5s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

<script>
// Variabel pelindung (flag) untuk mencegah spam klik selama spinner loading berputar (30 detik)
let isProcessingDeposit = false;

// 1. Format angka menjadi format Rupiah (contoh: 10.000)
function formatRupiah(angka) {
    return angka.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

// 2. Hilangkan titik lalu ambil angka murni untuk dikirim ke PHP
function getAngka(nom) {
    return nom.replace(/\./g, "");
}

// 3. Event handler otomatis saat user mengetik nominal deposit QRIS
document.getElementById("nominal_deposit").addEventListener("input", function() {
    let raw = getAngka(this.value);
    let num = parseInt(raw);
    if (!isNaN(num)) {
        this.value = formatRupiah(raw);
    }
});

// 4. Fungsi pembantu untuk mengaktifkan kembali tombol & input jika proses GAGAL
function resetTombol(btn) {
    btn.innerHTML = '<span class="glyphicon glyphicon-refresh"></span> Generate QRIS';
    btn.disabled = false; // Diubah ke false agar tombol bisa di-klik lagi jika gagal
    document.getElementById("nominal_deposit").readOnly = false; // Diubah ke false agar nominal bisa diedit lagi
    isProcessingDeposit = false; // Kembalikan status pelindung ke false
}

// 5. Proses AJAX ketika tombol Generate ditekan (Dengan Delay Spinner 30 Detik)
document.getElementById("form_qris_otomatis").addEventListener("submit", function(e) {
    e.preventDefault(); // Mencegah halaman reload otomatis

    // Jika sistem mendeteksi sedang dalam proses loading, batalkan klik ganda dari user
    if (isProcessingDeposit) {
        return false;
    }

    let btn = document.getElementById("btn_generate");
    let nominalRaw = getAngka(document.getElementById("nominal_deposit").value);
    let nominalNum = parseInt(nominalRaw);

    // Proteksi batas minimal nominal 10.000
    if (isNaN(nominalNum) || nominalNum < 10000) {
        alert("Minimal deposit via QRIS adalah 10.000");
        return;
    }

    // Aktifkan mode proteksi pengiriman ganda
    isProcessingDeposit = true;

    // Ubah tombol menjadi animasi loading spinner & kunci inputan nominal
    btn.innerHTML = '<span class="glyphicon glyphicon-refresh animate-spin"></span> Memproses QRIS (Mohon Tunggu 20 detik)...';
    btn.disabled = true;
    document.getElementById("nominal_deposit").readOnly = true;

    // Ambil seluruh data dari form inputan
    let formData = new FormData(this);
    formData.set('nominal', nominalNum); // Set nominal bersih tanpa titik ke data POST

    // Jalankan timer penundaan selama 20 detik (20000 milidetik)
    setTimeout(function() {
        
        // Kirim data ke backend PHP via Fetch API setelah 30 detik selesai
        fetch("<?php echo $urlweb; ?>/function/deposit.php", {
            method: "POST",
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                throw new Error("HTTP error, status = " + response.status);
            }
            return response.text(); // Ambil dalam bentuk teks untuk pelacakan error
        })
        .then(text => {
            try {
                let data = JSON.parse(text); // Konversi string text menjadi objek JSON resmi
                
                if(data.status === 'success') {
                    
                    // ==========================================
                    // PROTEKSI UTAMA ANTI DOUBLE DEPOSIT SUKSES
                    // ==========================================
                    // Sembunyikan seluruh isi form input QRIS agar tidak bisa diubah atau di-generate ulang
                    document.getElementById("form_qris_otomatis").style.display = 'none';

                    // Tampilkan area gambar QRIS ke user
                    let resultWrap = document.getElementById("qris_result_wrap");
                    resultWrap.style.display = "block";

                    // Tambahkan Tombol "Cek Status Transaksi" secara dinamis di bawah QRIS
                    let btnSelesai = document.createElement("a");
                    btnSelesai.href = "<?php echo $urlweb; ?>/m/history.php?trxID=" + data.trxID;
                    btnSelesai.className = "btn btn-primary btn-block";
                    btnSelesai.style.marginTop = "15px";
                    btnSelesai.style.fontWeight = "bold";
                    btnSelesai.innerHTML = '<span class="glyphicon glyphicon-list-alt"></span> Cek Status Transaksi';
                    resultWrap.appendChild(btnSelesai);

                    // Otomatis salin nominal angka murni ke clipboard HP/Komputer user
                    navigator.clipboard.writeText(nominalNum).then(() => {
                        let status = document.getElementById("copy_status");
                        status.style.display = "block";
                        setTimeout(() => status.style.display = "none", 2500);
                    });
                } else {
                    alert("Gagal memproses transaksi: " + data.message);
                    resetTombol(btn);
                }
            } catch (err) {
                console.error("Respon Server Bukan JSON Valid:", text);
                alert("Kesalahan Sistem: Server memberikan respon tidak valid.");
                resetTombol(btn);
            }
        })
        .catch(error => {
            console.error("Error Fetching:", error);
            alert("Terjadi kesalahan jaringan atau sistem. Silakan coba lagi.");
            resetTombol(btn);
        });

    }, 20000); // 20000 ms = 20 detik 
});

// 6. Handler Navigasi Tab Menu Switcher (Pindah Halaman QRIS <-> Bank Manual)
document.querySelectorAll('.deposit-tab').forEach(tab => {
    tab.addEventListener('click', function () {
        // Hilangkan class active dari semua tombol tab
        document.querySelectorAll('.deposit-tab').forEach(t => t.classList.remove('active'));
        
        // Sembunyikan semua panel box yang ada terlebih dahulu
        document.querySelectorAll('.deposit-panel').forEach(p => {
            p.classList.remove('active');
            p.style.display = 'none'; 
        });

        // Aktifkan class pada tombol tab yang sedang di-klik
        this.classList.add('active');
        
        // Tampilkan panel box yang sesuai target data-target nya
        if (this.dataset.target === 'qris') {
            let qrisPanel = document.querySelector('.qris-panel');
            qrisPanel.classList.add('active');
            qrisPanel.style.display = 'block';
        } else {
            let manualPanel = document.querySelector('.manual-panel');
            manualPanel.classList.add('active');
            manualPanel.style.display = 'block';
        }
    });
});
</script> 

</body>
</html>
<?php } ?>