MASTER

SAVING...

BERHASIL DIUBAH!

EDITING: betting.php

<?php
include 'template/header.php';
?>
<style>
    .bet-container {
        width: 95%;
        /* UBAH DI SINI: Naikkan 50px menjadi 90px atau lebih sesuai ketebalan logo Anda */
        margin: 90px auto 35px auto !important; 
        font-family: 'Poppins', sans-serif;
        color: #fff; 
        margin-bottom: 100px;
    }
    /* Menu Atas / Navigasi Jenis Taruhan */
    .bet-nav-box {
        background-color: #262626;
        border: 1px solid #3a3a3a;
        border-radius: 15px;
        padding: 15px;
        margin-bottom: 14px;
    }
    /* ... Sisa kode CSS ke bawah tetap sama ... */

.bet-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}
    .bet-row:last-child { margin-bottom: 0; }
    .bet-label {
        font-size: 14px;
        font-weight: bold;
        color: #f1c40f;
        min-width: 100px;
    }
    /* Select Dropdown */
    .bet-select {
        background-color: #1a1a1a;
        color: #fff;
        border: 1px solid #FFD700;
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 13px;
        outline: none;
        flex: 1;
        max-width: 250px;
    }
    /* Tombol Tipe Mode (Diskon / No Diskon) & Jenis Game */
    .btn-bet-mode {
        background-color: #1a1a1a;
        color: #bbb;
        border: 1px solid #444;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-weight: 600;
    }
    .btn-bet-mode.active {
        background: linear-gradient(to right, #FEDB37, #9f7928);
        color: #000;
        border-color: #FEDB37;
        box-shadow: 0 0 5px rgba(254, 219, 55, 0.4);
    }
    
    /* Pembungkus Tabel Pas Layar HP (Tanpa Scroll Horizontal) */
    .bet-table-wrapper {
        background-color: #262626;
        border: 1px solid #3a3a3a;
        border-radius: 12px;
        margin-bottom: 15px;
        width: 100%;
        box-sizing: border-box;
    }
    .bet-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        text-align: center;
        table-layout: fixed; /* Memaksa kolom mengikuti persentase lebar yang ditentukan */
    }
    .bet-table th {
        background-color: #1a1a1a;
        color: #f1c40f;
        font-weight: bold;
        padding: 15px 10px;
        border-bottom: 4px solid #3a3a3a;
        font-size: 12px;
    }
    .bet-table td {
        padding: 8px 4px;
        border-bottom: 1px solid #323232;
        vertical-align: middle;
        font-size: 12px;
    }

/* Input Form yang Pas dan Elastis di Layar HP */
    .input-bet-num {
        width: 90%;
        max-width: 65px;
        background-color: #1a1a1a;
        color: #fff;
        border: 1px solid #555;
        border-radius: 4px;
        padding: 5px 2px;
        text-align: center;
        font-weight: bold;
        font-size: 13px;
        outline: none;
        box-sizing: border-box;
    }
    .input-bet-num:focus { border-color: #FEDB37; }
    
    .input-bet-amt {
        width: 95%;
        max-width: 85px;
        background-color: #1a1a1a;
        color: #2ecc71;
        border: 1px solid #555;
        border-radius: 4px;
        padding: 3px 2px;
        text-align: center; /* Diubah ke center agar pas di mobile */
        font-weight: bold;
        font-size: 13px;
        outline: none;
        box-sizing: border-box;
    }
    .input-bet-amt:focus { border-color: #2ecc71; }
    
    .diskon-text { 
        color: #e74c3c; 
        font-weight: bold; 
        font-size: 11px;
    }
    .bayar-text { 
        color: #2ecc71; 
        font-weight: bold; 
        display: block; 
        text-align: center;
        font-size: 12px;
        word-break: break-all; /* Mencegah teks meluber jika nominalnya sangat besar */
    }
    
    /* Box Total Jumlah Harga */
    .total-summary-box {
        background-color: #1a1a1a;
        border: 1px solid #f1c40f;
        border-radius: 8px;
        padding: 12px 15px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .total-title {
        font-size: 13px;
        font-weight: bold;
        color: #fff;
    }
    .total-amount {
        font-size: 17px;
        font-weight: bold;
        color: #2ecc71;
        text-shadow: 0 0 4px rgba(46, 204, 113, 0.3);
    }

/* Tombol Submit Taruhan */
    .btn-submit-bet {
        background: linear-gradient(to right, #FEDB37, #FDB931);
        color: #000;
        border: none;
        width: 100%;
        padding: 12px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        transition: transform 0.1s ease;
    }
    .btn-submit-bet:active { transform: scale(0.99); }

/* Pengaturan Khusus Ukuran HP Sangat Kecil (Responsive Tweak) */
    @media (max-width: 360px) {
        .bet-table th, .bet-table td {
            font-size: 11px;
            padding: 6px 2px;
        }
        .input-bet-num, .input-bet-amt {
            font-size: 11px;
            padding: 4px 2px;
        }
        .total-title { font-size: 11px; }
        .total-amount { font-size: 15px; }
    }
</style>

<?php if ($mobile): ?>
    <div style="margin-top: 50px;">
<?php else: ?>
    <div style="margin-top: 170px;">
<?php endif; ?>

<div class="bet-container">
    
    
    <div class="bet-nav-box">
        
        <div class="bet-row">
            <div class="bet-label">Pilih Pasaran</div>
            <select class="bet-select" id="pasaranTogel">
                <option value="">-- Pilih Pasaran Togel --</option>
                <option value="SYDNEY">SYDNEY POOLS</option> 
                <option value="Sydney Lotto">Sydney Lotto</option>
                <option value="SINGAPORE">SINGAPORE</option>
                <option value="CAROLINA EVE">CAROLINA EVE</option>
                <option value="HK LOTTO">Hongkong lotto</option> 
                <option value="NEW YORK EVE">NEW YORK EVE</option> 
                <option value="KENTUCKY EVE">KENTUCKY EVE</option>
                <option value="CALIFORNIA">CALIFORNIA D4</option>
                <option value="FLORIDA EVE">FLORIDA EVE</option> 
                <option value="MISSOURI EVE">MISSOURI EVE</option> 
                <option value="OREGON 7 PM">OREGON 7 PM</option>
                <option value="MAGNUM CAMBODIA">MAGNUM CAMBODIA</option>
                <option value="HONGKONG POOLS">HONGKONG POOLS</option> 
                <option value="CHINA POOLS">CHINA POOLS</option> 
                <option value="BULLSEYE">BULLSEYE</option> <option value="JAPAN POOLS">JAPAN POOLS</option> 
                <option value="OREGON 10 PM">OREGON 10 PM</option> 
                <option value="TOTO MACAU 13">TOTO MACAU 13</option> 
                <option value="TOTO MACAU 16">TOTO MACAU 16</option> 
                <option value="TOTO MACAU 19">TOTO MACAU 19</option> 
                <option value="TOTO MACAU 22">TOTO MACAU 22</option> 
                <option value="Toto Macau 23">Toto Macau 23</option> 
                <option value="Toto Macau 00">Toto Macau 00</option>
                 <option value="TAIWAN">TAIWAN</option> 
                    <option value="NEW YORK MID">NEW YORK MID</option> 
                    <option value="NEW JERSEY MID">NEW JERSEY MID</option> 
                    <option value="KENTUCKY MID">KENTUCKY MID</option> 
                    <option value="CAROLINA DAY">CAROLINA DAY</option> 
                <option value="MOROCCO 4">MOROCCO 4</option> 
                <option value="OREGON 1 PM">OREGON 1 PM</option> 
                <option value="GERMANY PLUS">GERMANY PLUS</option> 
                <option value="MISSOURI MID">MISSOURI MID</option> 
                <option value="MARYLAND MID">MARYLAND MID</option>
                <option value="GEORGIA C4 MID">GEORGIA C4 MID</option> 
                <option value="PCSO">PCSO</option>
                <option value="PENNSYLVANIA EVE">PENNSYLVANIA EVE</option> 
                <option value="PENNSYLVANIA DAY">PENNSYLVANIA DAY</option> 
                <option value="VIRGINIA DAY">VIRGINIA DAY</option>
                <option value="ILLINOIS MID">ILLINOIS MID</option> 
                <option value="ILLINOIS EVE">ILLINOIS EVE</option> 
                </select>
        </div>
        
        
        <div class="bet-row">
            <div class="bet-label">Mode Taruhan:</div>
            <button class="btn-bet-mode" onclick="setDiskonMode(false)">NO DISKON</button>
            <button class="btn-bet-mode active" onclick="setDiskonMode(true)">DISKON</button>
        </div>
        
        
 <div class="bet-row">
    <div class="bet-label">Jenis Game:</div>
    <button class="btn-bet-mode active">GAMES 4D</button>
    <button type="button" class="btn-bet-mode" onclick="window.location.href='bbfs.php?pasaran=' + document.getElementById('pasaranTogel').value">BB CAMPURAN</button>
    <button type="button" class="btn-bet-mode" onclick="window.location.href='poltar.php?pasaran=' + document.getElementById('pasaranTogel').value">POLA TARUNG</button>
</div>

<div class="bet-table-wrapper">
        <table class="bet-table">
            <thead>
                <tr>
                    <th style="width: 8%;">No</th>
                    <th style="width: 25%;">Nomor</th>
                    <th style="width: 28%;">Nominal</th>
                    <th style="width: 15%;">Disk</th>
                    <th style="width: 25%;">Bayar</th>
                </tr>
            </thead>
            <tbody>
                <?php for($i = 1; $i <= 9; $i++): ?>
                <tr class="bet-item-row" data-id="<?php echo $i; ?>">
                    <td><?php echo $i; ?></td>
                    <td>
                        <input type="text" class="input-bet-num" maxlength="4" placeholder="••••" oninput="validateNumber(this); hitungBetRow(<?php echo $i; ?>);">
                    </td>
                    <td>
                        <input type="text" class="input-bet-amt" placeholder="Min 100" oninput="validateAmount(this); hitungBetRow(<?php echo $i; ?>);">
                    </td>
                    <td>
                        <span class="diskon-text" id="disk-val-<?php echo $i; ?>">N/A</span>
                    </td>
                    <td>
                        <span class="bayar-text" id="bayar-val-<?php echo $i; ?>" data-value="0">0</span>
                    </td>
                </tr>
                <?php endfor; ?>
            </tbody>
        </table>
    </div>

<div class="total-summary-box">
        <div class="total-title">TOTAL HARUS DIBAYAR:</div>
        <div class="total-amount" id="grand-total-display">Rp. 0</div>
    </div>

<button type="button" class="btn-submit-bet" onclick="submitTaruhan()">KIRIM TARUHAN (KIRIM BET)</button>

</div>

function setDiskonMode(status) {
        isDiskonActive = status;
        
        const buttons = document.querySelectorAll('.bet-row:nth-child(2) .btn-bet-mode');
        buttons[0].classList.toggle('active', !status);
        buttons[1].classList.toggle('active', status);
        
        for (let i = 1; i <= 9; i++) {
            hitungBetRow(i);
        }
    }

function validateNumber(input) {
        input.value = input.value.replace(/[^0-9]/g, '');
    }

// Mengubah "Rp. 0" menjadi hanya angka pendek untuk menghemat ruang kolom HP
    function validateAmount(input) {
        input.value = input.value.replace(/[^0-9]/g, '');
    }

if (length < 2 || amtInput <= 0) {
        diskonEl.textContent = 'N/A';
        bayarEl.textContent = '0';
        bayarEl.setAttribute('data-value', '0');
        hitungGrandTotal();
        return;
    }

let diskonPersen = 0;
    if (isDiskonActive && DISKON_CONFIG[length]) {
        diskonPersen = DISKON_CONFIG[length];
    }

// Menggunakan Math.round agar pembulatan nilai potongan diskon lebih presisi
    const shortcutPotongan = Math.round(amtInput * diskonPersen);
    const totalBayarRow = amtInput - shortcutPotongan;

if (diskonPersen > 0) {
        // Menggunakan Math.round untuk menghilangkan bug floating point (misal: 0.29 * 100 menjadi 29)
        diskonEl.textContent = Math.round(diskonPersen * 100) + '%';
    } else {
        diskonEl.textContent = '0%';
    }

// Output baris dipersingkat (tanpa string "Rp. " berlebih) agar hemat ruang di HP
    bayarEl.textContent = totalBayarRow.toLocaleString('id-ID');
    bayarEl.setAttribute('data-value', totalBayarRow.toString());

hitungGrandTotal();
}

function hitungGrandTotal() {
        let grandTotal = 0;
        const allBayarRows = document.querySelectorAll('.bayar-text');
        
        allBayarRows.forEach(el => {
            const val = parseInt(el.getAttribute('data-value')) || 0;
            grandTotal += val;
        });

document.getElementById('grand-total-display').textContent = 'Rp. ' + grandTotal.toLocaleString('id-ID');
    }

function submitTaruhan() {
    const pasaran = document.getElementById('pasaranTogel').value;
    if (!pasaran) {
        alert('Silakan pilih pasaran togel terlebih dahulu, bos!');
        return;
    }

let hasData = false;
    const itemsToSubmit = [];

for (let i = 1; i <= 9; i++) {
        const row = document.querySelector(`.bet-item-row[data-id="${i}"]`);
        const nomor = row.querySelector('.input-bet-num').value.trim();
        const nominal = row.querySelector('.input-bet-amt').value.trim();
        const diskon = document.getElementById(`disk-val-${i}`).textContent;
        const bayar = document.getElementById(`bayar-val-${i}`).getAttribute('data-value');

if (nomor !== '' || nominal !== '') {
            const len = nomor.length;
            if (len < 2 || len > 4) {
                alert(`Nomor pada baris ke-${i} harus 2, 3, atau 4 digit!`);
                return;
            }
            if (parseInt(nominal) < 100) {
                alert(`Nominal betting pada baris ke-${i} minimal adalah Rp. 100!`);
                return;
            }
            
            // TENTUKAN NAMA GAME BERDASARKAN PANJANG DIGIT
            let namaGame = "";
            if (len === 4) namaGame = "4D";
            else if (len === 3) namaGame = "3D";
            else if (len === 2) namaGame = "2D";

hasData = true;
            itemsToSubmit.push({
                nomor: nomor,
                nominal: parseInt(nominal),
                diskon: diskon,
                bayar: parseInt(bayar),
                game: namaGame // <-- WAJIB DIKIRIM AGAR DETAIL_BET TIDAK SALAH BACA
            });
        }
    }

if (!hasData) {
        alert('Harap isi minimal satu baris pasangan angka betting Anda!');
        return;
    }

const modeTaruhan = document.querySelector('.btn-bet-mode.active').textContent;

if (!confirm('Yakin Kirim taruhan sekarang?')) return;

fetch('function/proses_bet.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            pasaran: pasaran,
            mode: modeTaruhan,
            bets: itemsToSubmit
        })
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            alert(data.message);
            window.location.href = 'history_togel.php'; 
        } else {
            alert('Gagal: ' + data.message);
        }
    })
    .catch(err => {
        console.error(err);
        alert('Terjadi kesalahan koneksi sistem.');
    });
}
</script>

// 3. Amankan Link Tombol GAMES 4D agar Pasaran Tidak Hilang saat Berpindah Halaman
    var btnGames4D = document.getElementById('btn-games-4d');
    if (btnGames4D) {
        btnGames4D.addEventListener('click', function() {
            // Ambil pasaran terbaru (bisa dari URL saat ini, atau langsung dari dropdown yang sedang terpilih)
            var currentPasaran = pasaranParam;
            
            // Jika di URL kosong tapi user sempat memilih di dropdown, ambil dari dropdown
            var selectPasaran = document.getElementById('pasaranTogel');
            if (selectPasaran && selectPasaran.value) {
                currentPasaran = selectPasaran.value;
            }

// Jika pasaran ada nilainya, bawa parameternya. Jika tidak, ke betting.php biasa
            if (currentPasaran) {
                window.location.href = 'betting.php?pasaran=' + encodeURIComponent(currentPasaran);
            } else {
                window.location.href = 'betting.php';
            }
        });
    }
});
</script>

<?php include 'template/footer.php' ?>