@extends('layouts.admin')
@section('title', 'Game History')
@section('scss')
<link rel="stylesheet" href="/assets/vendor/libs/select2/select2.css" />
<link rel="stylesheet" href="/assets/vendor/libs/bootstrap-select/bootstrap-select.css" />
<style>
/* Your custom CSS styles */
.xray-badges {
    display: flex;
    flex-wrap: wrap;
}

.xray-badge {
    margin: 3px;
}

@media (max-width: 576px) {
    .xray-badge:nth-child(-n+3) {
        flex: 1 0 calc(33.3333% - 4px)
    }
}
</style>
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header pb-0 card-no-border position-relative">
            <h4 class="d-inline">TurnOver Game History</h4>
        </div>
         <div class="card-datatable table-responsive pt-0">
         <table class="table table-bordered" id="provider_table">
         <thead>
           <tr>
             <th>Session</th>
             <th>Username</th>
             <th>Provider</th>
             <th>Game Vendor</th>
             <th>Start Time</th>
             <th>Match Time</th>
             <th>End Time</th>
             <th>TurnOver</th>
             <th>Bet</th>
             <th>Payout</th>
           </tr>
         </thead>
         <tbody>

         </tbody>
        </table>
     </div>
   </div>
   </div>
@endsection
@push('scripts')
<script src="/assets/js/forms-selects.js"></script>
<script src="/assets/vendor/libs/select2/select2.js"></script>
<script src="/assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
<script>
    $(document).ready(function() {
        $('#provider_table').DataTable({
            responsive: true,
            ajax: {
                url: "{{ route('admin.game.history') }}",
                type: "GET",
                dataType: "json",
            },
            columns: [
            { data: 'session', name: 'session' },
            { data: 'username', name: 'username' },
            { data: 'provider', name: 'provider' },
            { data: 'game_vendor', name: 'game_vendor' },
            { data: 'start_time', name: 'start_time' },
            { data: 'match_time', name: 'match_time' },
            { data: 'end_time', name: 'end_time' },
            { data: 'turnover', name: 'turnover' },
            { data: 'bet', name: 'bet' },
            { data: 'payout', name: 'payout' },
            ],
            language: {
                emptyTable: "No data available in table",
                loadingRecords: "Loading..."
            }
        });
    });
</script>
@endpush