<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>User Profile</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="//cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
    <link rel="stylesheet" href="/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="/css/admin.css">
</head>

<body class="dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
    <div class="wrapper">
        <%- include('nav') %>

        <div class="content-wrapper">
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>User Information</h1>
                        </div>
                    </div>
                </div>
            </section>

            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-3">
                            <!-- Profile Image -->
                            <div class="card card-primary card-outline">
                                <div class="card-body box-profile">
                                    <div class="text-center">
                                        <img class="profile-user-img img-fluid img-circle" src="/images/avatar.svg" alt="User profile picture">
                                    </div>
                                    <h3 class="profile-username text-center">Member...</h3>
                                    <p class="text-muted text-center" id="id_user">ID: 0</p>

                                    <ul class="list-group list-group-unbordered mb-3">
                                        <li class="list-group-item"><b>Surplus</b> <a class="float-right" id="money">0</a></li>
                                        <li class="list-group-item"><b>Total Charge</b> <a class="float-right" id="total_money">0</a></li>
                                        <li class="list-group-item"><b>Total Draw</b> <a class="float-right" id="total_withdraw">0</a></li>
                                        <li class="list-group-item"><b>Total Commission</b> <a class="float-right" id="roses_all">0</a></li>
                                        <li class="list-group-item"><b>Total Win</b> <a class="float-right" id="total-win-amount">Loading...</a></li>
                                        <li class="list-group-item"><b>Total LOse</b> <a class="float-right" id="total-loss-amount">Loading...</a></li>
                                        <li class="list-group-item"><b>Roses Today</b> <a class="float-right" id="roses_today">0</a></li>
                                        <li class="list-group-item"><b>F1 Members</b> <a class="float-right" id="f1">0</a></li>
                                        <li class="list-group-item"><b>F2 Members</b> <a class="float-right" id="f2">0</a></li>
                                        <li class="list-group-item"><b>F3 Members</b> <a class="float-right" id="f3">0</a></li>
                                        <li class="list-group-item"><b>F4 Members</b> <a class="float-right" id="f4">0</a></li>
                                        <li class="list-group-item"><b>Total Invitations</b> <a class="float-right" id="total_mem">0</a></li>
                                        <li class="list-group-item"><b>IP Address</b> <a class="float-right" id="ip">Loading...</a></li>
                                        <li class="list-group-item"><b>Telegram</b> <a class="float-right" id="telegram">Loading...</a></li>
                                        <li class="list-group-item"><b>Inviter</b> <a class="float-right" id="invite">Loading...</a></li>
                                        <li class="list-group-item"><b>Daily Status</b> <a class="float-right" id="daily">Loading...</a></li>
                                    </ul>

                                    <a href="#" class="btn btn-primary btn-block"><b style="text-transform: uppercase;" id="level">USER</b></a>
                                </div>
                            </div>

                            <!-- Bank Information -->
                            <div class="card card-primary">
                                <div class="card-header"><h3 class="card-title">Bank Information</h3></div>
                                <div class="card-body">
                                    <strong><i class="fas fa-pencil-alt mr-1"></i> Account Name</strong>
                                    <p class="text-muted" id="name">No banks added yet</p><hr>
                                    <strong><i class="far fa-file-alt mr-1"></i> Account Number</strong>
                                    <p class="text-muted" id="stk">No banks added yet</p><hr>
                                    <strong><i class="fas fa-map-marker-alt mr-1"></i> Address</strong>
                                    <p class="text-muted" id="location">No banks added yet</p><hr>
                                    <strong><i class="fas fa-book mr-1"></i> Extra Time</strong>
                                    <p class="text-muted" id="timeAddBank">No banks added yet</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-9">
                            <!-- Withdraw Table -->
                            <div id="table-withdraw">
                                <h3>Withdraw History</h3>
                                <table id="list-withdraw" class="table table-bordered">
                                    <tr><th>ID</th><th>Amount</th><th>Bank</th><th>Status</th><th>Time</th></tr>
                                </table>
                                <button id="previousWithdraw" disabled>Previous</button> <span id="text-Withdraw">1 / 1</span> <button id="nextWithdraw" disabled>Next</button>
                            </div>

                            <!-- Recharge Table -->
                            <div id="table-recharge" class="mt-3">
                                <h3>Recharge History</h3>
                                <table id="list-recharge" class="table table-bordered">
                                    <tr><th>Transaction ID</th><th>Amount</th><th>Type</th><th>Status</th><th>Time</th></tr>
                                </table>
                                <button id="previousRecharge" disabled>Previous</button> <span id="text-Recharge">1 / 1</span> <button id="nextRecharge" disabled>Next</button>
                            </div>

                            <!-- Redenvelope Table -->
                            <div id="table-redenvelope" class="mt-3">
                                <h3>Red Envelope History</h3>
                                <table id="list-redenvelope" class="table table-bordered">
                                    <tr><th>Phone</th><th>Amount</th><th>Envelope ID</th><th>Status</th><th>Time</th></tr>
                                </table>
                                <button id="previousRedenvelope" disabled>Previous</button> <span id="text-Redenvelope">1 / 1</span> <button id="nextRedenvelope" disabled>Next</button>
                            </div>
                            
                            
                            <!-- salerybonus Table -->
                            <div id="table-redenvelope" class="mt-3">
                                <h3>SALARY BONUS History</h3>
                                <table id="list-redenvelope" class="table table-bordered">
                                    <tr><th>Phone</th><th>Amount</th><th>Envelope ID</th><th>Status</th><th>Time</th></tr>
                                </table>
                                <button id="previousRedenvelope" disabled>Previous</button> <span id="text-Redenvelope">1 / 1</span> <button id="nextRedenvelope" disabled>Next</button>
                            </div>


                            <!-- Bet Table -->
                            <div id="table-bet" class="mt-3">
                                <h3>Bet History</h3>
                                <table id="list-bet" class="table table-bordered">
                                    <tr><th>Stage</th><th>Amount</th><th>Game</th><th>Status</th><th>Time</th></tr>
                                </table>
                                <div id="total-win-loss" class="text-center mt-3"></div>
                                <button id="previousBet" disabled>Previous</button> <span id="text-Bet">1 / 1</span> <button id="nextBet" disabled>Next</button>
                                
                                
                                </div>


                            <!-- trxBet Table -->
                            <div id="table-bet" class="mt-3">
                                <h3>TRX BET TABAL</h3>
                                <table id="list-bet" class="table table-bordered">
                                    <tr><th>Stage</th><th>Amount</th><th>Game</th><th>Status</th><th>Time</th></tr>
                                </table>
                                <div id="total-win-loss" class="text-center mt-3"></div>
                                <button id="previousBet" disabled>Previous</button> <span id="text-Bet">1 / 1</span> <button id="nextBet" disabled>Next</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- Scripts -->
    <script src="/plugins/jquery/jquery.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/dist/js/adminlte.min.js"></script>
    <script src="/js/admin/admin.js"></script>
    <script>
    function formatDate(num) { return num < 10 ? `0${num}` : num; }

    function formatTime(ms, addHours = 0) {
        if (!ms || isNaN(ms)) return "Invalid Date";
        const date = new Date(Number(ms));
        date.setHours(date.getHours() + addHours);
        const years = date.getFullYear();
        const months = formatDate(date.getMonth() + 1);
        const days = formatDate(date.getDate());
        const hours = date.getHours() % 12 || 12;
        const minutes = formatDate(date.getMinutes());
        const seconds = formatDate(date.getSeconds());
        const ampm = date.getHours() < 12 ? "AM" : "PM";
        return `${years}-${months}-${days} ${hours}:${minutes}:${seconds} ${ampm}`;
    }

    // Fetch and display user information
    $.post("/api/webapi/admin/member/info", { phone: "<%= phone %>" }, (res) => {
        console.log("User Info Response:", res); // Log response for debugging
        if (!res.status) return;
        const { name_user, id_user, money, roses_f, roses_f1, roses_today, ip_address, level } = res.datas[0];
        const { telegram, ng_moi, daily, total_r, total_w, bank_user, f1, f2, f3, f4 } = res;
        
        // Update profile section
        $('.profile-username').text(name_user);
        $('#id_user').text(`ID: ${id_user}`);
        $('#money').text(money + ".0");
        $('#roses_all').text(roses_f + roses_f1 + '.0');
        $('#roses_today').text(roses_today + '.0');
        $('#telegram').text(telegram.telegram).attr('href', telegram.telegram);
        $('#invite').text(ng_moi.phone);
        $('#daily').text(daily);
        $('#ip').text(ip_address);
        $('#level').text(level === 1 ? 'ADMIN' : level === 2 ? "CTV" : "USER");
        $('#f1').text(`${f1} member`);
        $('#f2').text(`${f2} member`);
        $('#f3').text(`${f3} member`);
        $('#f4').text(`${f4} member`);
        $('#total_mem').text(f1 + f2 + f3 + f4);
        $('#total_money').text((total_r[0]?.total || 0) + '.0');
        $('#total_withdraw').text((total_w[0]?.total || 0) + '.0');

        // Update bank information
        if (bank_user[0]) {
            const { name_user: bankName, stk, chi_nhanh, tp, time } = bank_user[0];
            $('#name').text(bankName);
            $('#stk').text(stk);
            $('#location').text(`${chi_nhanh} - ${tp}`);
            $('#timeAddBank').text(formatTime(time));
        }
    }, "json");

    // Fetch and render functions
    function fetchAndRenderTable(url, params, renderFunction, pageSelector) {
        $.post(url, params, function(response) {
            console.log(`Response for ${url}:`, response); // Log response for debugging
            if (response.status === true) {
                renderFunction(response.datas);
                $(pageSelector).text(`${params.pageno / params.limit + 1} / ${response.page_total}`);
            } else {
                renderFunction([]); // Render empty state if no data
            }
        }, "json");
    }

    // Render functions
    function renderWithdraw(datas) {
        if (datas.length === 0) {
            $('#list-withdraw').html('<tr class="text-center"><td colspan="5">No data...</td></tr>');
            return;
        }
        const html = datas.map(data => `
            <tr class="text-center">
                <td>${data.id_order || 'NULL'}</td>
                <td>${data.money}</td>
                  <td>${data.stk}</td>
                    <td>${data.name_user}</td>
                     <td>${data.ifsc}</td>
                <td>${data.name_bank}</td>
                <td class="project-state"><span class="badge badge-${(data.status == '1' ? 'success' : 'danger')}">${(data.status == '1' ? 'success' : 'closed')}</span></td>
                <td>${formatTime(data.time)}</td>
            </tr>
        `).join('');
        $('#list-withdraw').html(html);
    }

    function renderRecharge(datas) {
        if (datas.length === 0) {
            $('#list-recharge').html('<tr class="text-center"><td colspan="5">No data...</td></tr>');
            return;
        }
        const html = datas.map(data => `
            <tr class="text-center">
                <td>${data.transaction_id || 'NULL'}</td>
                <td>${data.money}</td>
                 <td>${data.utr}</td>
                  <td>${data.remaining_bet}</td>
                <td>${data.type === "bank" ? "BANK" : "UPI"}</td>
                <td class="project-state"><span class="badge badge-${(data.status == '1' ? 'success' : 'warning')}">${(data.status == '1' ? 'success' : 'closed')}</span></td>
                <td>${formatTime(data.time)}</td>
            </tr>
        `).join('');
        $('#list-recharge').html(html);
    }

    function renderRedenvelope(datas) {
        if (datas.length === 0) {
            $('#list-redenvelope').html('<tr class="text-center"><td colspan="5">No data...</td></tr>');
            return;
        }
        const html = datas.map(data => `
            <tr class="text-center">
                <td>${data.phone}</td>
                <td>${data.money}</td>
                <td>${data.id_redenvelops}</td>
                <td><span class="badge badge-success">Success</span></td>
                <td>${formatTime(data.time)}</td>
            </tr>
        `).join('');
        $('#list-redenvelope').html(html);
    }
    
    
      function renderRedenvelope(datas) {
        if (datas.length === 0) {
            $('#list-redenvelope').html('<tr class="text-center"><td colspan="5">No data...</td></tr>');
            return;
        }
        const html = datas.map(data => `
            <tr class="text-center">
                <td>${data.phone}</td>
                <td>${data.money}</td>
                <td>${data.id_redenvelops}</td>
                <td><span class="badge badge-success">Success</span></td>
                <td>${formatTime(data.time)}</td>
            </tr>
        `).join('');
        $('#list-redenvelope').html(html);
    }

function renderBet(datas) {
    if (datas.length === 0) {
        $('#list-bet').html('<tr class="text-center"><td colspan="6">No data...</td></tr>');
        return;
    }

    let totalWin = 0, totalLoss = 0;
    const html = datas.map(data => {
        data.status === 1 ? totalWin += parseFloat(data.money) : totalLoss += parseFloat(data.money);

        // Bet के अनुसार class और text निर्धारित करना
        let betClass = '';
        let betText = '';
        switch (data.bet.toLowerCase()) {
            case 't':
                betClass = 'text-pink';
                betText = 'Pink';
                break;
            case 'd':
                betClass = 'text-red';
                betText = 'Red';
                break;
            case 'x':
                betClass = 'text-green';
                betText = 'Green';
                break;
            case 'n':
                betClass = 'text-small';
                betText = 'Small';
                break;
            case 'l':
                betClass = 'text-big';
                betText = 'Big';
                break;
            default:
                betClass = '';
                betText = data.bet; // Default bet value
                break;
        }

        // Game और TRX का शीर्षक निर्धारित करना
        let gameTitle = '';
        if (data.game.toLowerCase().includes('wingo')) {
            switch (data.game.toLowerCase()) {
                case 'wingo':
                    gameTitle = 'Wingo';
                    break;
                case 'wingo3':
                    gameTitle = 'Wingo 3';
                    break;
                case 'wingo5':
                    gameTitle = 'Wingo 5';
                    break;
                case 'wingo10':
                    gameTitle = 'Wingo 10';
                    break;
                default:
                    gameTitle = data.game;
                    break;
            }
        } else if (data.game.toLowerCase().includes('trx')) {
            switch (data.game.toLowerCase()) {
                case 'trx_wingo':
                    gameTitle = 'TRX Wingo';
                    break;
                case 'trx_wingo3':
                    gameTitle = 'TRX Wingo 3';
                    break;
                case 'trx_wingo5':
                    gameTitle = 'TRX Wingo 5';
                    break;
                case 'trx_wingo10':
                    gameTitle = 'TRX Wingo 10';
                    break;
                default:
                    gameTitle = data.game;
                    break;
            }
        } else {
            gameTitle = data.game.toUpperCase();
        }

        return `
            <tr class="text-center">
                <td>${data.stage}</td>
                <td class="${betClass}">${betText}</td>
                <td>${data.status === 1 ? "+" : "-"} ${data.money}</td>
                <td>${gameTitle}</td>
                <td class="project-state"><span class="badge badge-${(data.status == '1' ? 'success' : 'danger')}">${(data.status == '1' ? 'win' : 'loss')}</span></td>
                <td>${formatTime(data.time)}</td>
            </tr>`;
    }).join('');

    $('#list-bet').html(html);
    $('#total-win-amount').text(totalWin.toFixed(2));
    $('#total-loss-amount').text(totalLoss.toFixed(2));
}

    // Initialize all tables with pagination
    function setupPagination(tableId, fetchUrl, renderFunction) {
    let params = { typeid: "1", pageno: 0, limit: 10, language: "vi" };
    let totalPages = 1;

    function updatePaginationButtons() {
        // Disable "Previous" button if on the first page
        $(`#previous${tableId}`).prop('disabled', params.pageno <= 0);

        // Disable "Next" button if on the last page
        $(`#next${tableId}`).prop('disabled', params.pageno / params.limit + 1 >= totalPages);
    }

    function fetchAndRenderPage() {
        $.post(fetchUrl, params, function(response) {
            console.log(`Response for ${fetchUrl}:`, response); // Log response for debugging
            if (response.status === true) {
                totalPages = response.page_total || 1; // Update total pages
                renderFunction(response.datas);
                $(`#text-${tableId}`).text(`${params.pageno / params.limit + 1} / ${totalPages}`);
                updatePaginationButtons(); // Update button states
            } else {
                renderFunction([]); // Render empty state if no data
                $(`#text-${tableId}`).text("1 / 1");
                totalPages = 1;
                updatePaginationButtons();
            }
        }, "json");
    }

    // Initial fetch and render for the first page
    fetchAndRenderPage();

    $(`#next${tableId}`).click(function(e) {
        e.preventDefault();
        if (params.pageno / params.limit + 1 < totalPages) {
            params.pageno += params.limit;
            fetchAndRenderPage();
        }
    });

    $(`#previous${tableId}`).click(function(e) {
        e.preventDefault();
        if (params.pageno > 0) {
            params.pageno -= params.limit;
            fetchAndRenderPage();
        }
    });
}

// Initialize tables with the updated pagination logic
setupPagination('Withdraw', '/admin/member/listWithdraw/<%=phone%>', renderWithdraw);
setupPagination('Recharge', '/admin/member/listRecharge/<%=phone%>', renderRecharge);
setupPagination('Redenvelope', '/admin/member/redenvelope/<%=phone%>', renderRedenvelope);
setupPagination('Bet', '/admin/member/bet/<%=phone%>', renderBet);

</script>
</body>

</html>