@extends('layouts.app')

@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Wallet Transactions</li>
                    </ol>
                </nav>
            </div>
        </div>

        <hr />

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="wallet-transactions-table" class="table table-striped table-bordered align-middle" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>User</th>
                                <th>Email</th>
                                <th>IP Address</th>
                                <th>Browser</th>
                                <th>Latest Type</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Description</th>
                                <th>Latest Transaction Date & Time</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@include('includes.commonjs')
<script>
    $(function () {
        $('#wallet-transactions-table').DataTable({
            processing: true,
            serverSide: true,
            order: [],
            ajax: {
                url: @json(url()->current())
            },
            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'user_name',
                    name: 'user_name',
                    defaultContent: '-'
                },
                {
                    data: 'user_email',
                    name: 'user_email',
                    defaultContent: '-'
                },
                {
                    data: 'ip_address',
                    name: 'ip_address',
                    defaultContent: '-',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'browser',
                    name: 'browser',
                    defaultContent: '-',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'refresh_type',
                    name: 'refresh_type',
                    defaultContent: '-'
                },
                {
                    data: 'amount',
                    name: 'amount',
                    defaultContent: '-'
                },
                {
                    data: 'status',
                    name: 'status',
                    defaultContent: '-'
                },
                {
                    data: 'description',
                    name: 'description',
                    defaultContent: '-'
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    defaultContent: '-'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    defaultContent: '-',
                    orderable: false,
                    searchable: false
                }
            ]
        });
    });
</script>
@endsection