<!DOCTYPE html>
<html lang="ko" id="themeMode" class="light">
    <!-- header -->
    <%- include('../shared/header.ejs', {title: __('user_exchange_history.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_exchange_history.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>
                                    <div class="col-12">
                                        <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_exchange_history.table_title') %></span>
                                                        <span id="exchange-history-count">(0)</span>
                                                    </div>
                                                    <div class="flex flex-col sm:flex-row items-center">
                                                        <div class="mr-2">
                                                            <select class="input min-width border mr-3" id="agent-list" onchange="handleSelectAgent()"></select>
                                                        </div>
                                                        <div class="mr-2">
                                                            <select class="input min-width border mr-3" id="user-list" onchange="drawTable()"></select>
                                                        </div>
                                                        <div class="mr-2">
                                                            <select class="input min-width border" id="target-charge-type" onchange="drawTable()">
                                                                <option value="0"><%= __('user_exchange_history.total_exchange_history') %></option>
                                                                <option value="1"><%= __('user_exchange_history.deposit_history') %></option>
                                                                <option value="2"><%= __('user_exchange_history.withdraw_history') %></option>
                                                            </select>
                                                        </div>
                                                        <input
                                                            data-daterange="true"
                                                            id="exchange-history-period"
                                                            class="datepicker input w-56 border block mr-2"
                                                        />
                                                        <button
                                                            onclick="drawTable()"
                                                            class="button flex items-center justify-center text-gray-700 border border-theme-1 text-white"
                                                        >
                                                            <i data-feather="search" class="w-4 h-4 mr-2"></i>
                                                            <%= __('user_exchange_history.search') %>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="w-full border-t border-gray-200 dark:border-dark-5 mt-2"></div>
                                                <div class="card-body">
                                                    <div>
                                                        <div class="col-sm-12">
                                                            <div class="table-scrollable">
                                                                <div class="table-responsive">
                                                                    <table id="exchange-history-datatable" class="table table-striped table-bordered"></table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

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

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

            const chargeTypeHtml = {
                0: `<span class="px-1 rounded inline-block border border-theme-6 text-theme-6 dark:border-theme-6"><%= __('user_exchange_history.table.withdraw') %></span>`,
                1: `<span class="px-1 rounded inline-block border border-theme-1 text-theme-1 dark:border-theme-10 dark:text-theme-10"><%= __('user_exchange_history.table.deposit') %></span>`,
            };

            let exchangeUserTable;
            let sessionUserId = -1;
            let sessionAgentId = `<%= session.auth.id %>`;
            let sessionAgentCode = `<%= session.auth.agentCode %>`;

            function drawTable() {
                if (exchangeUserTable) {
                    exchangeUserTable.ajax.reload();
                } else {
                    exchangeUserTable = $("#exchange-history-datatable").DataTable({
                        ...dataTableGlobalConfig,
                        order: [[9, "desc"]],
                        columns: [
                            { title: "<%= __('user_exchange_history.table.no') %>", data: "no", width: "60px", orderable: false },
                            { title: "<%= __('user_exchange_history.table.agent_code') %>", data: "agentCode" },
                            { title: "<%= __('user_exchange_history.table.user_code') %>", data: "userCode" },
                            { title: "<%= __('user_exchange_history.table.charge_type') %>", data: "chargeType" },
                            { title: "<%= __('user_exchange_history.table.charge_amount') %>", data: "chargeAmount" },
                            { title: "<%= __('user_exchange_history.table.agent_previous_balance') %>", data: "agentPrevBalance" },
                            { title: "<%= __('user_exchange_history.table.agent_after_balance') %>", data: "agentAfterBalance" },
                            { title: "<%= __('user_exchange_history.table.user_previous_balance') %>", data: "userPrevBalance" },
                            { title: "<%= __('user_exchange_history.table.user_after_balance') %>", data: "userAfterBalance" },
                            { title: "<%= __('user_exchange_history.table.createdAt') %>", data: "createdAt", width: "160px" },
                        ],
                        ajax: {
                            url: `/api/user_transaction/all`,
                            type: "GET",
                            data: function (data) {
                                data.search = data.search.value;
                                data.dir = data.order[0].dir;
                                data.order = data.columns[data.order[0].column].data;

                                data.agentCode = "all";
                                let targetAgentCode = $("#agent-list").val();
                                if (targetAgentCode) {
                                    data.agentCode = targetAgentCode;
                                }

                                let targetUserCode = $("#user-list").val();
                                if (targetUserCode) {
                                    data.userCode = $("#user-list").val();
                                } else {
                                    data.userCode = "all";
                                }

                                let chargeType = $("#target-charge-type").val();
                                if (chargeType) {
                                    data.method = chargeType;
                                } else {
                                    data.method = 0;
                                }

                                data.startDate = $("#exchange-history-period").val().split(" - ")[0];
                                data.endDate = $("#exchange-history-period").val().split(" - ")[1];

                                delete data.columns;
                            },
                            dataSrc: function (res) {
                                if (res.data) {
                                    for (let i = 0; i < res.data.length; i++) {
                                        res.data[i].no = Number(i + 1) + Number(res.start);
                                        res.data[i].agentCode = convertString(res.data[i].agentCode, 30);
                                        res.data[i].userCode = convertString(res.data[i].userCode, 30);
                                        res.data[i].chargeType = chargeTypeHtml[Number(res.data[i].chargeType)];
                                        res.data[i].chargeAmount = convertNumber(res.data[i].chargeAmount);
                                        res.data[i].agentPrevBalance = convertNumber(res.data[i].agentPrevBalance);
                                        res.data[i].agentAfterBalance = convertNumber(res.data[i].agentAfterBalance);
                                        res.data[i].userPrevBalance = convertNumber(res.data[i].userPrevBalance);
                                        res.data[i].userAfterBalance = convertNumber(res.data[i].userAfterBalance);
                                        res.data[i].createdAt = convertDate(res.data[i].createdAt);
                                    }

                                    $("#exchange-history-count").html(`(${res.recordsTotal})`);
                                }

                                return res.data;
                            },
                        },
                    });
                }
            }

            function handleSelectAgent() {
                // 선택한 agent code
                let selectedAgentCode = sessionAgentCode;
                let targetAgentCode = $("#agent-list").val();

                if (targetAgentCode) {
                    selectedAgentCode = targetAgentCode;
                }

                // 선택한 에이젼트별에 따라는 회원 얻기
                getChildUsers(selectedAgentCode);
                $("#user-list").val("all");
                drawTable();
            }

            function getChildAgents(id) {
                // 현 에이젼트에 속한 하위에이젼트목록
                $.ajax({
                    type: "GET",
                    url: `/api/agent/child/${id}`,
                    success: function (res) {
                        if (res.status == 1) {
                            let data = res.child;
                            let optionStr = `<option value="all"> <%= __('user_exchange_history.all_agent') %> </option>`;
                            let hasSubAgent = false;

                            for (let i = 0; i < data.length; i++) {
                                optionStr += `<option value = '${data[i].agentCode}'> ${data[i].agentCode} </option>`;
                                hasSubAgent = true;
                            }

                            if (hasSubAgent) {
                                $("#agent-list").html(optionStr);
                                $("#agent-list").val("all");
                            }
                            tail.select("#agent-list", { search: true, width: 160 });
                            tail.select("#target-charge-type", { search: false, width: 160, locale: "<%= session.locale %>", locale: "<%= session.locale %>" });
                        }
                    },
                });
            }

            function getChildUsers(agentCode) {
                let url = "";
                if (agentCode == "all") {
                    url = `/api/user/all/list`;
                } else {
                    url = `/api/user/agent/${agentCode}`;
                }

                $.ajax({
                    type: "GET",
                    url: url,
                    success: function (res) {
                        if (res.status == 1) {
                            tail.select("#user-list").remove();
                            let data = res.data;
                            let optionStr = `<option value="all"><%= __('user_exchange_history.all_user') %></option>`;

                            for (let i = 0; i < data.length; i++) {
                                optionStr += `<option value = '${data[i].userCode}'> ${data[i].userCode} </option>`;
                            }

                            $("#user-list").html(optionStr);
                            $("#user-list").val("all");
                            tail.select("#user-list", { search: true, width: 160, locale: "<%= session.locale %>" });
                        }
                    },
                });
            }

            getChildAgents(sessionAgentId);
            getChildUsers("all");
            drawTable();
        </script>
    </body>
</html>
