<!DOCTYPE html>
<html lang="ko" id="themeMode" class="light">
    <!-- header -->
    <%- include('../shared/header.ejs', {title: __('user_game_transaction.live.page_title') }) -%>

    <body class="app">
        <!-- preloader -->
        <%- include('../shared/preloader.ejs') -%>

        <!-- mobile menu -->
        <%- include('../shared/mobile.ejs') -%>

        <div class="flex">
            <!-- sidebar -->
            <%- include('../shared/sidebar.ejs') -%>

            <div class="content">
                <!-- topbar -->
                <%- include('../shared/topbar.ejs') -%>

                <!-- main content here -->
                <div class="grid grid-cols-12 gap-6">
                    <div class="col-span-12 xxl:col-span-12 grid grid-cols-12 gap-6">
                        <div class="col-span-12 mt-2">
                            <div class="intro-y flex items-center h-10">
                                <h2 class="text-lg font-medium truncate mr-5"><%= __('user_game_transaction.live.title') %></h2>
                                <a href="" class="ml-auto flex text-theme-1 dark:text-theme-10">
                                    <i data-feather="refresh-ccw" class="w-4 h-4 mr-3"></i> <%= __('common.reload') %>
                                </a>
                            </div>

                            <div class="col-span-12 intro-y box mt-2 p-5">
                                <div class="card border-primary">
                                    <div class="card-body">
                                        <div class="card-header flex justify-between items-center">
                                            <div style="font-size: 14px">
                                                <span><%= __('user_game_transaction.live.table_title') %></span>
                                                <span id="user-transaction-history-count">(0)</span>
                                            </div>
                                            <div class="flex flex-col sm:flex-row items-center">
                                                <div class="mr-2">
                                                    <select onchange="onChangeAgentSelect()" class="min-width border" id="transaction-agent-select"></select>
                                                </div>
                                                <div class="mr-2">
                                                    <select onchange="drawTable()" class="min-width border" id="transaction-user-select"></select>
                                                </div>
                                                <input data-daterange="true" id="user-transaction-period" class="datepicker input w-56 border block mr-2" />
                                                <button onclick="drawTable()" class="button flex items-center justify-center border border-theme-1 text-theme-1 dark:border-theme-10 dark:text-theme-10">
                                                    <i data-feather="search" class="w-4 h-4 mr-2"></i>
                                                    <%= __('user_game_transaction.search.button') %>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="w-full border-t border-gray-200 dark:border-dark-5 mt-2"></div>

                                        <div class="card-body">
                                            <div class="col-sm-12">
                                                <div class="table-scrollable">
                                                    <div class="table-responsive">
                                                        <table id="user-transaction-history-datatable" class="table table-striped table-bordered"></table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- footer -->
        <%- include('../shared/footer.ejs') -%>

        <!-- global -->
        <%- include('../shared/global.ejs') -%>

        <script>
            $("#menu-4").addClass("side-menu--active");
            $("#menu-4 + ul").addClass("side-menu__sub-open");

            let event_type = {
                debit: `<span class="px-1 rounded inline-block border border-theme-1 text-theme-1 dark:border-theme-10 dark:text-theme-10">Debit</span>`,
                credit: `<span class="px-1 rounded inline-block border border-theme-9 text-theme-9 dark:border-theme-9">Credit</span>`,
                debit_credit: `<span class="px-1 rounded inline-block border border-theme-6 text-theme-6 dark:border-theme-6">Both</span>`,
                cancel: `<span class="px-1 rounded inline-block border border-theme-3 text-theme-3 dark:border-theme-3">Cancel</span>`,
                charge: `<span class="px-1 rounded inline-block border border-theme-4 text-theme-4 dark:border-theme-4">Charge</span>`,
                adjust: `<span class="px-1 rounded inline-block border border-theme-5 text-theme-5 dark:border-theme-5">Adjust</span>`,
                promo_win: `<span class="px-1 rounded inline-block border border-theme-7 text-theme-7 dark:border-theme-7">Promo</span>`,
                exceed_credit: `<span class="px-1 rounded inline-block border border-theme-8 text-theme-8 dark:border-theme-8">Exceed</span>`,
            };

            const today = new Date();
            const year = today.getFullYear();
            const month = today.getMonth();

            const startDate = moment(new Date(year, month, 1)).format("YYYY/MM/DD");
            const endDate = moment(new Date(year, month + 1, 0)).format("YYYY/MM/DD");
            const initialDate = `${startDate} - ${endDate}`;

            $("#user-transaction-period").val(initialDate);

            let sessionAuthId = `<%= session.auth.id %>`;
            let userGameHistoryTable;

            function getAgentsFunc() {
                $.ajax({
                    type: "get",
                    url: `/api/agent/child/${sessionAuthId}`,
                    data: {},
                    dataType: "json",
                    success: function (res) {
                        if (res.status == 1) {
                            let data = res.child;
                            let optionStr = `<option value='all'><%= __('user_game_transaction.all_agent') %></option>`;
                            for (let i = 0; i < data.length; i++) {
                                optionStr += `<option value='${data[i].agentCode}'>${data[i].agentCode}</option>`;
                            }
                            $("#transaction-agent-select").html(optionStr);
                            tail.select("#transaction-agent-select", { search: true, width: 160, locale: "<%= session.locale %>" });
                            onChangeAgentSelect();
                        }
                    },
                });
            }

            function onChangeAgentSelect() {
                let selectedAgentCode = $("#transaction-agent-select").val();
                let ajaxURL = "";
                if (selectedAgentCode == "all") {
                    ajaxURL = `/api/user/all/list`;
                } else {
                    ajaxURL = `/api/user/agent/${selectedAgentCode}`;
                }

                $.ajax({
                    type: "get",
                    url: ajaxURL,
                    data: {},
                    dataType: "json",
                    success: function (res) {
                        if (res.status == 1) {
                            var optionStr = "<option value='all'><%= __('user_game_transaction.all_user') %></option>";
                            tail.select("#transaction-user-select").remove();
                            var data = res.data;
                            for (var i = 0; i < data.length; i++) {
                                optionStr += `<option value='${data[i].userCode}'>${data[i].userCode}</option>`;
                            }
                            $("#transaction-user-select").html(optionStr);
                            tail.select("#transaction-user-select", { search: true, width: 150, locale: "<%= session.locale %>" });
                            drawTable();
                        }
                    },
                });
            }

            function drawTable() {
                if (userGameHistoryTable) {
                    userGameHistoryTable.ajax.reload();
                } else {
                    userGameHistoryTable = $("#user-transaction-history-datatable").DataTable({
                        ...dataTableGlobalConfig,
                        order: [[0, "desc"]],
                        columns: [
                            { title: `<%= __('user_game_transaction.table.createdAt') %>`, data: "createdAt", width: "160px" },
                            { title: `<%= __('user_game_transaction.table.agent_code') %>`, data: "agentCode" },
                            { title: `<%= __('user_game_transaction.table.user_code') %>`, data: "userCode" },
                            { title: `<%= __('user_game_transaction.table.provider_code') %>`, data: "providerCode" },
                            { title: `<%= __('user_game_transaction.table.game_code') %>`, data: "gameCode" },
                            { title: `<%= __('user_game_transaction.table.type') %>`, data: "type" },
                            { title: `<%= __('user_game_transaction.table.bet') %>`, data: "bet" },
                            { title: `<%= __('user_game_transaction.table.win') %>`, data: "win" },
                            { title: `<%= __('user_game_transaction.table.txnType') %>`, data: "txnType" },
                            { title: `<%= __('user_game_transaction.table.user_start_balance') %>`, data: "userStartBalance" },
                            { title: `<%= __('user_game_transaction.table.user_end_balance') %>`, data: "userEndBalance" },
                            // { title: `<%= __('user_game_transaction.table.agent_start_balance') %>`, data: "agentStartBalance" },
                            // { title: `<%= __('user_game_transaction.table.agent_end_balance') %>`, data: "agentEndBalance" },
                        ],
                        ajax: {
                            url: `/api/game_transaction`,
                            type: "GET",
                            data: function (data) {
                                data.gameType = "live";
                                data.agentCode = $("#transaction-agent-select").val();
                                data.userCode = $("#transaction-user-select").val();
                                data.startDate = $("#user-transaction-period").val().split(" - ")[0];
                                data.endDate = $("#user-transaction-period").val().split(" - ")[1];

                                data.search = data.search.value;
                                data.dir = data.order[0].dir;
                                data.order = data.columns[data.order[0].column].data;
                                delete data.columns;
                            },
                            dataSrc: function (res) {
                                if (res.data) {
                                    res.recordsFiltered = res.count;
                                    res.recordsTotal = res.count;
                                    for (let i = 0; i < res.data.length; i++) {
                                        res.data[i].createdAt = convertDate(res.data[i].createdAt);
                                        res.data[i].agentCode = convertString(res.data[i].agentCode, 30);
                                        res.data[i].userCode = convertString(res.data[i].userCode, 30);
                                        res.data[i].providerCode = convertString(res.data[i].providerCode, 30);
                                        res.data[i].gameCode = convertString(res.data[i].gameCode, 30);
                                        res.data[i].type =
                                            res.data[i].type == "BASE"
                                                ? [`<p class="text-theme-1">${res.data[i].type}</p>`]
                                                : [`<p class="text-theme-6">${res.data[i].type}</p>`];
                                        res.data[i].bet = `${res.data[i].bet.toLocaleString()}`;
                                        res.data[i].win = `${res.data[i].win.toLocaleString()}`;
                                        res.data[i].txnType = event_type[res.data[i].txnType];
                                        res.data[i].userStartBalance = `${res.data[i].userStartBalance.toLocaleString()}`;
                                        res.data[i].userEndBalance = `${res.data[i].userEndBalance.toLocaleString()}`;
                                        // res.data[i].agentStartBalance = `${res.data[i].agentStartBalance.toLocaleString()}`;
                                        // res.data[i].agentEndBalance = `${res.data[i].agentEndBalance.toLocaleString()}`;
                                    }

                                    $("#user-transaction-history-count").html(`(${res.count})`);
                                    return res.data;
                                }
                            },
                        },
                    });
                }
            }

            getAgentsFunc();
        </script>
    </body>
</html>
