@extends('frontend.layouts.app')

@section('content')

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" type="text/css">

    <div id="showM">
        <div class="overlap g8mmenu-close"></div>
        @include('frontend.partials.mobile.header')
        @include('frontend.partials.mobile.sidebar-menu')

        <div class="content">
            <div class="funds">
                <div class="funds__header">
                    <div class="funds__header-left">
                        <span>Saldo</span>
                        <div class="header-balance" style="display: flex; align-items: center; gap: 8px;">
                            <strong class="g8-bal-total">IDR {{ number_format(Auth::user()->balance ?? 0, 0, ',', '.') }}</strong>
                            <a href="javascript:void(0);" class="btn-refresh-balance" style="color: inherit; cursor: pointer; font-size: 14px;" title="Refresh Saldo">
                                <i class="fas fa-sync-alt"></i>
                            </a>
                        </div>
                    </div>
                    <div class="funds__header-right"></div>
                </div>
                
                <div class="funds__rebate-detail funds__container">
                    <ul>
                        <li><a href="/secure/admin/history">History Transaksi</a></li>
                        <li class="active"><a href="{{ route('secure.history-bet') }}">History Bet</a></li>
                    </ul>
                    
                    <div class="rebate-item">
                        <form id="filterFormM" action="{{ url()->current() }}" method="GET">
                            <div class="drp-wrap mob">
                                <div class="drp">
                                    <i class="fa fa-calendar"></i>
                                    <span class="daterange-text"></span>
                                    <i class="fa fa-caret-down"></i>
                                    <input type="hidden" name="start_date" class="start_date" value="{{ $inputStart }}">
                                    <input type="hidden" name="end_date" class="end_date" value="{{ $inputEnd }}">
                                </div>
                                <button type="submit" class="button button-sm button--yellow btn-msg-search">Submit</button>
                            </div>
                        </form>
                        
                        <div class="table-responsive">
                            <table id="historyBetTableM" class="history-bet-list display compact nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th>DATE & TIME</th>
                                        <th>GAME</th>
                                        <th>TYPE</th>
                                        <th class="text-center">TOTAL BET (IDR)</th>
                                        <th class="text-center">TOTAL PAYMENT (IDR)</th>
                                        <th class="text-center">TOTAL W/L (IDR)</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="4">Total:</th>
                                        <th style="text-align: center;">0</th>
                                        <th style="text-align: center;">0</th>
                                        <th style="text-align: center;">0</th>
                                    </tr>
                                    <tr>
                                        <th colspan="4">Grant Total:</th>
                                        <th style="text-align: center;">0</th>
                                        <th style="text-align: center;">0</th>
                                        <th style="text-align: center;">0</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        @include('frontend.partials.mobile.bottom-nav')
    </div>
    <div id="showD">
        @include('frontend.partials.desktop.header')

        <section class="profile">
            <div class="wrapper">
                <div class="profile__nav">
                    <ul>
                        <li><a href="/secure/admin/profile"><i class="far fa-user"></i><span>Profile</span></a></li>
                        <li><a href="/secure/admin/deposit"><i class="fas fa-wallet"></i><span>Deposit</span></a></li>
                        <li><a href="/secure/admin/withdrawal"><i class="fas fa-money-bill"></i><span>Withdrawal</span></a></li>
                        <li><a href="/secure/admin/bonus"><i class="fas fa-dollar-sign"></i><span>Bonus</span></a></li>
                        <li><a href="/secure/admin/history"><i class="fas fa-history"></i><span>History</span></a></li>
                        <li><a href="/secure/admin/referral"><i class="fas fa-users"></i><span>Referral</span></a></li>
                        <li>
                            <a href="/secure/admin/messages"><i class="fas fa-envelope"></i><span>Messages</span></a>
                            <div class="notif-wrapper hide"><div class="notif-info notanim"></div></div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <div class="wrapper">
            <section class="balance">
                <div class="g8-bal-top"><p>Saldo</p>
                    <div style="display: flex; align-items: center; justify-content: center; gap: 8px;">
                        <span class="g8-bal-total">IDR {{ number_format(Auth::user()->balance ?? 0, 0, ',', '.') }}</span>
                        <a href="javascript:void(0);" class="btn-refresh-balance" style="color: inherit; cursor: pointer; font-size: 18px;" title="Refresh Saldo">
                            <i class="fas fa-sync-alt"></i>
                        </a>
                    </div>
                </div>
            </section>

            <section class="funds">
                <div class="funds__container">
                    <ul>
                        <li><a href="/secure/admin/history">History Transaksi</a></li>
                        <li class="active"><a href="{{ route('secure.history-bet') }}">History Bet</a></li>
                    </ul>
                    
                    <div class="funds__rebate">
                        <section class="funds__rebate-table">
                            
                            <form id="filterFormD" action="{{ url()->current() }}" method="GET">
                                <div class="drp-wrap mob">
                                    <div class="drp">
                                        <i class="fa fa-calendar"></i>
                                        <span class="daterange-text"></span>
                                        <i class="fa fa-caret-down"></i>
                                        <input type="hidden" name="start_date" class="start_date" value="{{ $inputStart }}">
                                        <input type="hidden" name="end_date" class="end_date" value="{{ $inputEnd }}">
                                    </div>
                                    <button type="submit" class="button button-sm button--yellow btn-msg-search">Submit</button>
                                </div>
                            </form>

                            <table id="historyBetTableD" class="history-bet-list display compact nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th>DATE & TIME</th>
                                        <th>GAME</th>
                                        <th>TYPE</th>
                                        <th class="text-center">TOTAL BET (IDR)</th>
                                        <th class="text-center">TOTAL PAYMENT (IDR)</th>
                                        <th class="text-center">TOTAL W/L (IDR)</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="4">Total:</th>
                                        <th style="text-align: center;">0</th>
                                        <th style="text-align: center;">0</th>
                                        <th style="text-align: center;">0</th>
                                    </tr>
                                    <tr>
                                        <th colspan="4">Grant Total:</th>
                                        <th style="text-align: center;">0</th>
                                        <th style="text-align: center;">0</th>
                                        <th style="text-align: center;">0</th>
                                    </tr>
                                </tfoot>
                            </table>

                        </section>
                    </div>
                </div>
            </section>
        </div>
        @include('frontend.partials.desktop.footer')
    </div>
@endsection

@push('scripts')
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script type="text/javascript">
window.loadMeIfReady = function() {

    $('.btn-refresh-balance').on('click', function(e) {
        e.preventDefault();
        let $icons = $('.btn-refresh-balance i'); 
        let $balanceSpans = $('.g8-bal-total');
        $icons.addClass('fa-spin');
        
        $.ajax({
            url: "{{ route('api.balance') }}", 
            type: "GET",
            success: function(response) {
                $icons.removeClass('fa-spin');
                if (response && response.d) $balanceSpans.html(response.d);
            },
            error: function() { $icons.removeClass('fa-spin'); }
        });
    });

    $('.drp, select[name="game_type"]').on('click', function(e) {
        e.stopPropagation();
    });

    let _start = moment("{{ $inputStart }}", "YYYY-MM-DD");
    let _end = moment("{{ $inputEnd }}", "YYYY-MM-DD");
    let formatDate = 'DD-MM-YYYY';

    function setDate(elm, _s, _e, format) {
        elm.find('input.start_date').val(_s.format('YYYY-MM-DD'));
        elm.find('input.end_date').val(_e.format('YYYY-MM-DD'));
        elm.find('.daterange-text').html(_s.format(format) + ' &mdash; ' + _e.format(format));
    }

    let elem = $('.drp');
    setDate(elem, _start, _end, formatDate);

    elem.daterangepicker({
        "maxSpan": {"days": 14},
        "showDropdowns": true,
        ranges: {
            'Today': [moment().startOf('day'), moment()],
            'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 14 Days': [moment().subtract(13, 'days'), moment()],
        },
        "startDate": _start,
        "endDate": _end
    }).on('apply.daterangepicker', function(ev, picker) {
        setDate($(this), picker.startDate, picker.endDate, formatDate);
    });

    function initDataTables(tableId, formId) {
        return $('#' + tableId).DataTable({
            dom: '<"dtblengh"l>rtip',
            processing: true,
            serverSide: false, 
            destroy: true,
            scrollX: true,
            pageLength: 100,
            ajax: {
                url: "{{ url()->current() }}",
                type: "GET",
                data: function (d) {
                    d.start_date = $('#' + formId).find('.start_date').val();
                    d.end_date = $('#' + formId).find('.end_date').val();
                    d.game_type = $('#' + formId).find('select[name="game_type"]').val();
                }
            },
            columns: [
                { data: null, searchable: false, orderable: false, className: "text-center" },
                { data: "dateTime" },
                { data: "game" },
                { data: "type" },
                { data: "totalBet", className: "text-center", render: $.fn.dataTable.render.number('.', ',', 2, '') },
                { data: "totalPayment", className: "text-center", render: $.fn.dataTable.render.number('.', ',', 2, '') },
                { data: "totalWinLose", className: "text-center", render: $.fn.dataTable.render.number('.', ',', 2, '') }
            ],
            fnRowCallback: function (nRow, aData, iDisplayIndex) {
                let info = $(this).DataTable().page.info();
                $("td:nth-child(1)", nRow).html(info.start + iDisplayIndex + 1);
                return nRow;
            },
            footerCallback: function (row, data, start, end, display) {
                let api = this.api();
                let intVal = function (i) { return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0; };
                
                let totalBet = 0, totalPayment = 0, totalWinLose = 0;
                for (let d of data) {
                    totalBet += intVal(d.totalBet);
                    totalPayment += intVal(d.totalPayment);
                    totalWinLose += intVal(d.totalWinLose);
                }

                function formatNumber(a) { return a.toLocaleString('id-ID', {maximumFractionDigits: 2}); }

                $(api.column(4).footer()).html(formatNumber(totalBet));
                $(api.column(5).footer()).html(formatNumber(totalPayment));
                $(api.column(6).footer()).html(formatNumber(totalWinLose));

                let json = api.ajax.json();
                if(json && json.grantTotal) {
                    let grantTotal = $(api.table().footer()).find('tr:last-child');
                    grantTotal.find('th:eq(1)').text(formatNumber(json.grantTotal.bet));
                    grantTotal.find('th:eq(2)').text(formatNumber(json.grantTotal.payment));
                    grantTotal.find('th:eq(3)').text(formatNumber(json.grantTotal.winlose));
                }
            }
        });
    }

    let tableM = initDataTables('historyBetTableM', 'filterFormM');
    let tableD = initDataTables('historyBetTableD', 'filterFormD');

    $('#filterFormM, #filterFormD').on('submit', function(e) {
        e.preventDefault();
        let $btn = $(this).find('.btn-msg-search');
        let originalText = $btn.html();
        
        $btn.html('<i class="fa fa-spinner fa-spin"></i>').prop('disabled', true);
        
        tableM.ajax.reload(null, false);
        tableD.ajax.reload(function() {
            $btn.html(originalText).prop('disabled', false); 
        }, false);
    });

};
</script>
@endpush