@extends('frontend.master')
@section('content')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.16/api/fnReloadAjax.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css"/>
<div class='content'>
	<div class="container">
		<div id="historyGeo">
			<table class="table table-bordered" id="rechargeLogs">
				<thead class="thead-custom">
					<tr>
						<th scope="col">{{ __('messages.total_request') }}</th>
						<th scope="col">{{ __('messages.total_money') }} (USD)</th>
						<th scope="col">{{ __('messages.date_of_payment') }}</th>
					</tr>
				</thead>
				<tbody>

				</tbody>
			</table>
		</div>
	</div>
</div>
<script>
    var dataTable               = null;
    var roleCheckList           = [];
    var curr_role_name          = '';
    var curr_permission_list    = '';
    var current_page            = 0;
    var old_search              = '';
    
    $(document).ready(function() {
        var dataObject = [
            {
                data: "total_request",
                orderable: false
            },
            {
                data: "price_request",
                class: "text-center",
            },
            {
                data: "created_at",
                class: "text-center",
            },
        ];

        dataTable = $('#rechargeLogs').DataTable({
            serverSide: false,
            search: {
                smart: false
            },
            aaSorting: [],
            stateSave: true,
            search: {
                smart: false
            },
            ajax: "{{ $url_link }}/get-payment-logs",
            columns: dataObject,
            bLengthChange: true,
            pageLength: 10,
            colReorder: {
                fixedColumnsRight: 1,
                fixedColumnsLeft: 1
            },
            oLanguage: {
                sSearch: "{{ __('messages.search') }}",
                sLengthMenu: "{{ __('messages.show') }} _MENU_ {{ __('messages.entries') }}",
                // zeroRecords: "Không tìm thấy bản ghi",
                sInfo: "{{ __('messages.history_showing') }}  _START_ - _END_ /_TOTAL_ {{ __('messages.history_entries') }}",
                sInfoFiltered: "",
                sInfoEmpty: "",
                sZeroRecords: "{{ __('messages.no_search_results_found') }}",
                sEmptyTable: "{{ __('messages.no_transactions_yet') }}",
                oPaginate: {
                    sPrevious: "{{ __('messages.previous') }}",
                    sNext: "{{ __('messages.next') }}",

                },
            },
            fnServerParams: function(aoData) {

            },
            fnDrawCallback: function(oSettings) {
                // addEventListener();
            },
            createdRow: function( row, data, dataIndex){
                // $(row).attr('data-name', data['name']);
                // $(row).attr('data-account-number', data['account_number']);
                // $(row).attr('data-bank-name', data['bank_name']);
            }
        });

        // dataTable.on( 'search.dt', function () {
        //     document.activeElement.blur();
        // } );

        $('input[type=search]').on('keypress', function(e) {
            if(e.keyCode == 13) {
                // document.activeElement.blur();
                event.preventDefault();
                event.target.blur()
            }
        });
    })
</script>
@endsection