MASTER

SAVING...

BERHASIL DIUBAH!

EDITING: referral.php

<?php
include 'template/header.php';
session_start();
$username = $_SESSION['username'] ?? '';
if (!$username) {
    echo "<div style='color: red; text-align: center;'>Silakan login terlebih dahulu</div>";
    include 'template/footer.php';
    exit;
}
?>

<div style="margin-top: 50px;">
    <div style="padding: 20px 0; background-color:var(--secondary-color);">
        <div style="width: 90%; margin: 0 auto 20px auto;">
            <div
                style="margin-bottom: 10px; color: transparent !important; -webkit-background-clip: text; background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #e99c05 0%, #f4ae00 8%, #f8bf33 25%, #f8ce19 62.5%, #ffdc02 100%); font-family: Teko-SemiBold; text-align: center; font-size: 24px;">
                REFERRAL
            </div>

<div style="font-size: 14px; margin-top: 10px;">Link :</div>
            <div style="margin-top: 10px; margin-bottom: 6px;">
                <textarea id="ref_id"
                    style="background-color: transparent; width: 100%; padding: 6px 10px; border: 1px dashed #FFD700; border-radius: 4px; word-break: break-all;"
                    readonly><?= $base_url ?>/register.php?ref=<?= $username ?></textarea>
            </div>
            <div id="btnCopyRef" class="glowing2"
                style="cursor: pointer; font-size: 13px; border-radius: 4px; background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #e99c05 0%, #f4ae00 8%, #f8bf33 25%, #f8ce19 62.5%, #ffdc02 100%); color: #fff; padding: 4px 32px; width: fit-content;">
                Salin
            </div>
        </div>

<form id="filterReferral"
            style="width: 90%; margin: 0 auto 20px auto; padding: 10px; background-color: var(--secondary-color); border-radius: 6px;">
            <div style="display: flex;">
                <div style="width: 50%; margin-right: 8px;">
                    <div style="opacity: 0.66; font-size: 13px; margin-bottom: 4px;">Dari Tanggal</div>
                    <div style="margin-bottom: 12px;">
                        <input type="date" name="from_date" id="from_date" class="form-control" value="<?= date('Y-m-d') ?>">
                    </div>
                </div>

<div style="width: 50%;">
                    <div style="opacity: 0.66; font-size: 13px; margin-bottom: 4px;">Sampai Tanggal</div>
                    <div style="margin-bottom: 12px;">
                        <input type="date" name="end_date" id="end_date" class="form-control" value="<?= date('Y-m-d') ?>">
                    </div>
                </div>
            </div>

<div style="width: 90%; margin: 0 auto 20px auto; display: block; overflow: auto;">
            <table width="100%" style="font-size: 11px;" id="referralTable">
                <thead>
    <tr style="background-color: #494848; color: #fff; font-weight: bold;">
        <td style="padding: 12px 5px;">Member</td>
        <td style="padding: 12px 5px;">Total Deposit</td> <td style="padding: 12px 5px;">TO Bet</td>
        <td style="padding: 12px 5px;">TO Bayar</td>
        <td style="padding: 12px 5px;">Tgl Gabung</td>
    </tr>
</thead>
                <tbody id="referralBody">
                    <tr style="background-color: var(--secondary-color); color: #fff;">
                        <td colspan="4" style="padding: 24px; text-align: center; font-size: 11px; color: #C4C4C4;">
                            Memuat data...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<?php include 'template/footer.php'; ?>
<script>
$(document).ready(function() {
    function loadReferral() {
        const from = $('#from_date').val();
        const end = $('#end_date').val();

$.ajax({
            url: '../function/get-referral.php',
            type: 'GET',
            data: { from_date: from, end_date: end },
            beforeSend: function() {
                $('#referralBody').html(`
                    <tr style="background-color: var(--secondary-color); color: #fff;">
                        <td colspan="4" style="padding: 24px; text-align: center; color: #C4C4C4;">
                            Memuat data...
                        </td>
                    </tr>
                `);
            },
            success: function(res) {
                $('#referralBody').html(res);
            },
            error: function() {
                $('#referralBody').html(`
                    <tr style="background-color: var(--secondary-color); color: #fff;">
                        <td colspan="4" style="padding: 24px; text-align: center; color: red;">
                            Gagal memuat data
                        </td>
                    </tr>
                `);
            }
        });
    }

// pertama kali load
    loadReferral();

// saat form disubmit
    $('#filterReferral').on('submit', function(e) {
        e.preventDefault();
        loadReferral();
    });
});
</script> 
<script>
$(document).ready(function() {

$('#btnCopyRef').click(function() {

const copyText = document.getElementById('ref_id');

copyText.select();
        copyText.setSelectionRange(0, 99999);

navigator.clipboard.writeText(copyText.value)
            .then(function() {
                $('#btnCopyRef').text('Berhasil Disalin');

setTimeout(function() {
                    $('#btnCopyRef').text('Salin');
                }, 2000);
            })
            .catch(function() {
                alert('Gagal menyalin link referral');
            });

});

});
</script>
<?php include 'template/footer.php'; ?>