<!DOCTYPE html>
<html translate="no" data-dpr="1" style="font-size: 48.16px;">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex,nofollow">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <title>DiuWin</title>
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.1/css/all.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.1/css/sharp-thin.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.1/css/sharp-solid.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.1/css/sharp-regular.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.1/css/sharp-light.css">
    <link rel="stylesheet" href="./index_files/index-96409872.css">
    <link rel="stylesheet" href="../index_files/index-96409872.css">
    <link href="/css/wallet/main.css" rel="stylesheet" />
    <link href="/css/wallet/chunk_2-1.css" rel="stylesheet" />
    <link href="/css/wallet/chunk_2-2.css" rel="stylesheet" />
    <link href="/css/wallet/chunk_2-3.css" rel="stylesheet" />
    <link rel="shortcut icon" href="/assets/png/h5setting_20240724134842u3j2.png" type="image/x-icon">
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            background-color: #090909;
            padding: 0;
            margin: 0;
        }
        
        #app {
            color: #646566;
        }
        
        .mian[data-v-3966082f] {
            background-color: #c8c9cc
        }
        
        .mian .box[data-v-3966082f] {
            padding: .4rem;
            background: #ebedf0
        }
        
        .mian .box .list[data-v-3966082f] {
            background: #ebedf0;
            border-radius: 0.2rem;
            overflow: hidden
        }
        
        .mian .box .list .item[data-v-4e585e69] {
            padding: 0.26667rem 0.4rem;
            border: 2px solid;
            border-radius: 15px;
        }
        
        .mian .box .list .item[data-v-3966082f] {
            padding: .26667rem .4rem
        }
        
        .mian .box .list .item .money[data-v-3966082f] {
            font-size: .4rem;
            color: #fb4e4e
        }
        
        .mian .box .list .item .money.action[data-v-3966082f] {
            color: #6abe57
        }
        
        .mian .box .list .item .number[data-v-3966082f],
        .mian .box .list .item .time[data-v-3966082f] {
            font-size: .32rem;
            color: #646566
        }
        
        .mian .box .list .item .number[data-v-3966082f] {
            font-size: .4rem
        }
        
        .mian .box .list .item .number .btn[data-v-3966082f] {
            padding: .13333rem .26667rem;
            font-size: .32rem;
            margin-left: .26667rem;
            border-radius: .13333rem;
            background-color: #ffce1f;
            color: #fff
        }
        
        .mian .box .list .item .state[data-v-3966082f] {
            text-align: center;
            font-weight: 600
        }
        
        .mian .box .list .item .txt[data-v-3966082f] {
            text-align: center
        }
        
        html {
            -webkit-tap-highlight-color: transparent
        }
        
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, Hiragino Sans GB, Microsoft Yahei, sans-serif
        }
        
        a {
            text-decoration: none
        }
        
        button,
        input,
        textarea {
            color: inherit;
            font: inherit
        }
        
        [class*=van-]:focus,
        a:focus,
        button:focus,
        input:focus,
        textarea:focus {
            outline: 0
        }
        
        ol,
        ul {
            margin: 0;
            padding: 0;
            list-style: none
        }
        
        .navbar[data-v-106b99c8] {
            background: linear-gradient(90deg, #3BAF4C 0%, #00D08A 100%) !important;
        }
        
        .item.c-row.c-row-between.m-b-10 {
            border: 1px solid;
            border-radius: 15px;
        }
    </style>
</head>

<body style="font-size: 12px;">
    <div id="app">
        <div data-v-3966082f="" class="mian">
            <div data-v-106b99c8="" data-v-3966082f="" class="navbar">
                <div data-v-106b99c8="" class="navbar-left" onclick="location.href='/mian'">
                    <div data-v-a9660e98="" data-v-106b99c8="" class="c-row c-row-middle-center">
                        <i class="fa-light fa-angle-left fa-fade fa-xl center" style="color: #FFF"></i>
                    </div>
                </div>
                <div data-v-106b99c8="" class="navbar-title">Transaction History</div>
                <div data-v-106b99c8="" class="navbar-right"></div>
            </div>
            <div data-v-3966082f="" class="box">
                <div data-v-3966082f="" class="list m-b-20">
                    <div data-v-3966082f="" role="feed" class="van-list">
                        <div class="lisys">

                        </div>

                    </div>
                </div>
            </div>


            <div data-v-3966082f="" class="box">
                <div data-v-3966082f="" class="list m-b-20">
                    <div data-v-3966082f="" role="feed" class="van-list">

                        <div class="lisys">

                            <!----->
                        </div>

                    </div>
                </div>
            </div>





            <!-- Add jQuery or any other necessary scripts -->

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <script src="/js/client.js"></script>
            <script>
                $(document).ready(function() {
                    function formateT(params) {
                        let result = (params < 10) ? "0" + params : params;
                        return result;
                    }

                    function timerJoin(params = '', addHours = 0) {
                        let date = '';
                        if (params) {
                            date = new Date(Number(params));
                        } else {
                            date = new Date();
                        }

                        date.setHours(date.getHours() + addHours);

                        let years = formateT(date.getFullYear());
                        let months = formateT(date.getMonth() + 1);
                        let days = formateT(date.getDate());

                        let hours = date.getHours() % 12;
                        hours = hours === 0 ? 12 : hours;
                        let ampm = date.getHours() < 12 ? "AM" : "PM";

                        let minutes = formateT(date.getMinutes());
                        let seconds = formateT(date.getSeconds());

                        return years + '-' + months + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds + ' ' + ampm;
                    }

                    function loadsRecharge(datas) {
                        // Filter only successful recharge transactions
                        let successfulRecharges = datas.filter(data => data.status === 1);

                        let html = successfulRecharges.map((data) => {
                            return `
                    <div data-v-3966082f="" class="item c-row c-row-between m-b-10">
                    
                        <div data-v-3966082f="">
                        <span style="color:red" >Deposit</span>
                            <div data-v-3966082f="" class="number c-row">
                                ${data.id_order}
                                <div data-v-3966082f="" class="m-l-10 tag-read van-image" data-clipboard-text="${data.id_order}" style="width: 18px; height: 15px;"><img src="/images/copy.png" class="van-image__img" /></div>
                            </div>
                            <div data-v-3966082f="">
                                <div data-v-3966082f="" class="money action m-b-10 m-t-10">
                                    <!---->
                                    <span data-v-3966082f="">₹ ${data.money}.00</span>
                                </div>
                            </div>
                            <div data-v-3966082f="" class="time">${timerJoin(data.time)}</div>
                        </div>
                        <div data-v-3966082f="">
                            <div data-v-3966082f="" class="state m-b-5">
                                <!---->
                                <div data-v-4e585e69="" style="color: ${(data.status == 1) ? 'rgb(107, 190, 88)' : (data.status == 0) ? 'rgb(255 171 0);' : 'red'}"> ${(data.status == 1) ? 'Success' : (data.status == 2) ? 'Cancelled' : 'Pending'}</div>
                                <!---->
                            </div>
                        </div>
                    </div>
                `;
                        }).join("");
                        $('.box:eq(0) .lisys').html(html);
                    }

                    function loadsWithdrawal(datas) {
                        let html = datas.map((data) => {
                            return `
                    <div data-v-4e585e69="" class="item">
                            <div data-v-4e585e69="">
                            <span style="color:#2cff2c" >Withdraw</span>
                                <div data-v-4e585e69="" class="tit c-row c-row-between c-row-middle">
                                    <div data-v-4e585e69="" class="c-row c-row-between c-row-middle">
                                        <span data-v-4e585e69="" class="c-row c-row-between c-row-middle">
                                            <div data-v-4e585e69="" class="m-r-5 van-image" style="width: 24px; height: 20px;">
                                                <img src="/images/king (10).png" class="van-image__img">
                                            </div>BankCard</span>
                                        </div>
                                        <div data-v-4e585e69="" data-clipboard-text="${data.id_order}" class="tag-read"> ${data.id_order} 
                                            <img data-v-4e585e69="" width="18px" height="15px" src="/images/copy.png" class="m-l-5">
                                        </div>
                                    </div>
                                    <div data-v-4e585e69="" class="c-row c-row-between m-b-5 m-t-5">
                                        <div data-v-4e585e69="">
                                            <!---->
                                            <div data-v-4e585e69="" class="number green"><!---->
                                                <span data-v-4e585e69="" style="color:red" >₹ ${data.money}.00</span>
                                            </div>
                                            <!---->
                                        </div>
                                        <!---->
                                        <div data-v-4e585e69="" style="color: ${(data.status == 1) ? 'rgb(107, 190, 88)' : 'rgb(242, 65, 59)'}"> ${(data.status == 1) ? 'Agree' : (data.status == 2) ? 'Cancelled' : 'Waiting'}</div>
                                        <!---->
                                    </div>
                                    <!---->
                                </div>
                            <div data-v-4e585e69="" class="time">${timerJoin(data.time)}</div>
                        </div>
                    </div>
                    <br>
                `;
                        }).join("");
                        $('.box:eq(1) .lisys').html(html);
                    }

                    // Load recharge records
                    $.ajax({
                        type: "GET",
                        url: "/api/webapi/recharge/list",
                        dataType: "json",
                        success: function(response) {
                            if (response.datas.length > 0) {
                                loadsRecharge(response.datas);
                            }
                        }
                    });

                    // Load withdrawal records
                    $.ajax({
                        type: "GET",
                        url: "/api/webapi/withdraw/list",
                        dataType: "json",
                        success: function(response) {
                            if (response.datas.length > 0) {
                                loadsWithdrawal(response.datas);
                            }
                        }
                    });

                    // Other functions like clipboard and alertMess can remain unchanged
                });
            </script>


</body>



</html>