<br><br>
<div class="card" id="primary-card">
    <div class="card-header ui-sortable-handle" style="cursor: move">
        <h1 class="card-title" style="font-size: 2rem;">Daily Summary for Transfers, Bets and Prizes</h1>
        <div class="card-tools">
        </div>
    </div>
    <div class="card-body ">
        <div class="row card-body">
            <div class="col-md-6">
                <h5>Amounts Transferred Today:</h5>
            </div>
            <div class="col-md-6" style="">
                <h5 id="TotalBalanceTransferAmountReportsToday"></h5>
            </div>

        </div>
        <div class="row card-body">
            <div class="col-md-6">
                <h5>Total Bet Amounts Today of Users Under Me:</h5>
            </div>
            <div class="col-md-6" style="">
                <h5 id="TotalBetAmountReportsToday"></h5>
            </div>

        </div>

        <div class="row card-body">
            <div class="col-md-6">
                <h5>Total Amount of Prizes:</h5>
            </div>
            <div class="col-md-6" style="">
                <h5 id="TotalPrizesAmountReportsToday"></h5>
            </div>

        </div>


    </div>
</div>

<br><br>
<div class="card card-primary card-outline card-outline-tabs">
    <div class="card-header p-0 border-bottom-0">
        <ul class="nav nav-tabs" id="dailybetstransfersprofitssummarytabs-four-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="dailybetstransfersprofitssummarytabs-four-2PM-tab" data-toggle="pill"
                    href="#dailybetstransfersprofitssummarytabs-four-2PM" role="tab"
                    aria-controls="dailybetstransfersprofitssummarytabs-four-2PM" aria-selected="true">2PM</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="dailybetstransfersprofitssummarytabs-four-5PM-tab" data-toggle="pill"
                    href="#dailybetstransfersprofitssummarytabs-four-5PM" role="tab"
                    aria-controls="dailybetstransfersprofitssummarytabs-four-5PM" aria-selected="false">5PM</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="dailybetstransfersprofitssummarytabs-four-9PM-tab" data-toggle="pill"
                    href="#dailybetstransfersprofitssummarytabs-four-9PM" role="tab"
                    aria-controls="dailybetstransfersprofitssummarytabs-four-9PM" aria-selected="false">9PM</a>
            </li>

        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content" id="dailybetstransfersprofitssummarytabs-four-tabContent">
            <div class="tab-pane fade active show" id="dailybetstransfersprofitssummarytabs-four-2PM" role="tabpanel"
                aria-labelledby="dailybetstransfersprofitssummarytabs-four-2PM-tab"></div>
            <div class="tab-pane fade" id="dailybetstransfersprofitssummarytabs-four-5PM" role="tabpanel"
                aria-labelledby="dailybetstransfersprofitssummarytabs-four-5PM-tab"></div>
            <div class="tab-pane fade" id="dailybetstransfersprofitssummarytabs-four-9PM" role="tabpanel"
                aria-labelledby="dailybetstransfersprofitssummarytabs-four-9PM-tab">
            </div>

        </div>
    </div>

</div>

<script>

    function CreateSummaryCardforDailyTransfersProfitsSummary(timeIDText) {

        return `<div class="card">
            <div class="card-header ui-sortable-handle" style="cursor: move">
                <h1 class="card-title" style="font-size: 1rem;">Summary</h1>
            </div>
            <div class="card-body ">
                <center><h3 id="TransferStatusbyTime`+ timeIDText + `"></h3></center>
                <div class="row card-body" style="display:none;">
                    <div class="col-md-4">
                        <h5>Amounts Transferred Today:</h5>
                    </div>
                    <div class="col-md-4" style="">
                        <h5 id="TotalBalanceTransferAmountReportsToday`+ timeIDText + `"></h5>
                    </div>
        
                </div>
                <div class="row card-body">
                    <div class="col-md-4">
                        <h5>Total Winning Bet Amounts Today of Users Under Me:</h5>
                    </div>
                    <div class="col-md-4" style="">
                        <h5 id="TotalBetAmountReportsToday`+ timeIDText + `"></h5>
                    </div>
        
                </div>
        
                <div class="row card-body">
                    <div class="col-md-4">
                        <h5>Total Amount of Prizes:</h5>
                    </div>
                    <div class="col-md-4" style="">
                        <h5 id="TotalPrizesAmountReportsToday`+ timeIDText + `"></h5>
                    </div>
        
                </div>
            </div>
        </div>`;

    }

    function DailyBetsTransfersProfitsUSERTABLE(tableid, title) {

        return `<br><br>
<div class="card" id="secondary-card" style="">
    <div class="card-header ui-sortable-handle" style="cursor: move;">
        <h3 class="card-title">${title}</h3>
        <div class="card-tools"></div>
    </div>
    <div class="card-body">
       
               <table id="${tableid}">
                <thead>
                <tr>
                <th>Number /<br>Nickname</th>
                <th>Amount<br>Bet</th>
                <th><center>Total<br>Prize</center></th>
                </tr>
                </thead>
                <tbody id="${tableid}-body">
            
                </tbody>
                </table>
            
  
    </div>
</div><br><br><br>`;
    }

    function UpdateDailyBetsTransfersProfitsSummary(target_date = '', target_user = '') {


        function populatereportdetails(response) {
            console.log(response);
            setElementhtml('TotalBalanceTransferAmountReportsToday', response.TotalTransferAmountToday);
            setElementhtml('TotalBetAmountReportsToday', response.TotalBetAmountToday);
            setElementhtml('TotalPrizesAmountReportsToday', response.TotalRewardAmountToday);

            setElementhtml('TotalBetAmountReportsToday2PM', response['2PM'].TotalBets);
            setElementhtml('TotalPrizesAmountReportsToday2PM', response['2PM'].TotalPrize);

            setElementhtml('TotalBetAmountReportsToday5PM', response['5PM'].TotalBets);
            setElementhtml('TotalPrizesAmountReportsToday5PM', response['5PM'].TotalPrize);

            setElementhtml('TotalBetAmountReportsToday9PM', response['9PM'].TotalBets);
            setElementhtml('TotalPrizesAmountReportsToday9PM', response['9PM'].TotalPrize);


            function GenerateBetsByUserTableRows(usernumnick, totalamount, totalprize) {
                
                let user_nick = usernumnick;
                user_nick = user_nick.replace(' ', '<br>');

                return `<tr>
                 <td>${user_nick}</td>
                 <td>${totalamount}</td>
                 <td>${totalprize}</td>
             </tr>`;
            }

            let tablerowshtml2pm = '';
            for (let i = 0; i < response['2PM']['betsbyuser'].length; i++) {
                tablerowshtml2pm += GenerateBetsByUserTableRows(response['2PM']['betsbyuser'][i]['usermnumber_nick'], response['2PM']['betsbyuser'][i]['totalamount'], response['2PM']['betsbyuser'][i]['totalprize']);
            }

            let tablerowshtml5pm = '';
            for (let i = 0; i < response['5PM']['betsbyuser'].length; i++) {
                tablerowshtml5pm += GenerateBetsByUserTableRows(response['5PM']['betsbyuser'][i]['usermnumber_nick'], response['5PM']['betsbyuser'][i]['totalamount'], response['5PM']['betsbyuser'][i]['totalprize']);
            }

            let tablerowshtml9pm = '';
            for (let i = 0; i < response['9PM']['betsbyuser'].length; i++) {
                tablerowshtml9pm += GenerateBetsByUserTableRows(response['9PM']['betsbyuser'][i]['usermnumber_nick'], response['9PM']['betsbyuser'][i]['totalamount'], response['9PM']['betsbyuser'][i]['totalprize']);
            }

            setElementhtml('userbetstable2PM-body', tablerowshtml2pm);
            setElementhtml('userbetstable5PM-body', tablerowshtml5pm);
            setElementhtml('userbetstable9PM-body', tablerowshtml9pm);

            $("#userbetstable2PM").DataTable({
            "destroy": true,
            order: [[0, 'desc']],
            pageLength: 5,
            lengthMenu: [[5], [5]]
        });

        $("#userbetstable5PM").DataTable({
            "destroy": true,
            order: [[0, 'desc']],
            pageLength: 5,
            lengthMenu: [[5], [5]]
        });

        $("#userbetstable9PM").DataTable({
            "destroy": true,
            order: [[0, 'desc']],
            pageLength: 5,
            lengthMenu: [[5], [5]]
        });


        }

        AjaxDo('?admin/reports/dailybetstransfersprofitssummary/details', { target_date: target_date, target_user: target_user }, populatereportdetails, null, reqtype = 'POST');



    }



    setElementhtml('dailybetstransfersprofitssummarytabs-four-2PM', CreateSummaryCardforDailyTransfersProfitsSummary('2PM') + DailyBetsTransfersProfitsUSERTABLE('userbetstable2PM', 'Winning Bets By User'));
    setElementhtml('dailybetstransfersprofitssummarytabs-four-5PM', CreateSummaryCardforDailyTransfersProfitsSummary('5PM') + DailyBetsTransfersProfitsUSERTABLE('userbetstable5PM', 'Winning Bets By User'));
    setElementhtml('dailybetstransfersprofitssummarytabs-four-9PM', CreateSummaryCardforDailyTransfersProfitsSummary('9PM') + DailyBetsTransfersProfitsUSERTABLE('userbetstable9PM', 'Winning Bets By User'));


    $(document).ready(function () {
        if (typeof target_date === 'undefined') {
            target_date = '';
        }
        if (typeof target_user === 'undefined') {
            target_user = '';
        }
        UpdateDailyBetsTransfersProfitsSummary(target_date, target_user);
        let UpdateDailyBetsTransfersProfitsSummaryIntervalID = setInterval(UpdateDailyBetsTransfersProfitsSummary, 300000);

    });



</script>