@extends('admin.layouts.masterlayout')

@section('styles')
<link href="{{asset('new_theme/assets/plugins/datatable/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" />
@endsection

@section('content')
<div class="main-content">
  <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
      <div class="breadcrumb-title pe-3 br-0">User Wallet Summary</div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="table-responsive">
        <table id="dataList" class="table table-bordered align-middle w-100">
          <thead class="text-nowrap">
            <tr>
              <th>S No.</th>

              <th>
                <input type="text" id="filter_teamname" placeholder="Team Name" class="form-control form-control-sm">
                Team Name
              </th>

              <th>
                <input type="text" id="filter_email" placeholder="Email" class="form-control form-control-sm">
                Email
              </th>

              <th>
                <input type="text" id="filter_mobile" placeholder="Mobile" class="form-control form-control-sm">
                Mobile
              </th>

              <th>Topup</th>
              <th>Game Coin</th>
              <th>Shopping Coin</th>
              <th>Diamond Coin</th>
              <th>Redeem</th>
              <th>Bonus</th>
              <th>Total Coins</th>
            </tr>
          </thead>
        </table>

      </div>
    </div>
  </div>

</div>
@endsection

@section('scripts')
<script src="{{asset('new_theme/assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/dataTables.bootstrap5.min.js')}}"></script>

<script>
$(document).ready(function () {

    let table = $('#dataList').DataTable({
        processing: true,
        serverSide: true,
        scrollX: true,
        searching: false,
        order: [[1, 'desc']],

        ajax: {
            url: "{{route($modelName.'.users_wallet')}}",
            type: "POST",
            data: function (d) {
                d._token = "{{ csrf_token() }}";
                d.filter_columns = {
                    filter_teamname: $('#filter_teamname').val(),
                    filter_email: $('#filter_email').val(),
                    filter_mobile: $('#filter_mobile').val()
                };
            }
        },
        // ✅ IMPORTANT: Show length + export buttons
        dom: '<"d-flex justify-content-between align-items-center mb-2"lBf>rtip',

        // ✅ LENGTH MENU (Show entries dropdown)
        lengthMenu: [
            [10, 25, 50, 100],
            [10, 25, 50, 100]
        ],

        pageLength: 10, // default
        // ✅ EXPORT BUTTON
        buttons: [
            {
                extend: 'csvHtml5',
                text: '<div class="d-flex align-items-center gap-2"><i class="material-icons-outlined fs-6">download</i> Export CSV</div>',
                className: 'btn',
                title: 'ProductsWallet_Summary',
                exportOptions: {
                    columns: ':visible'
                }
            }
        ],

        columnDefs: [
            { targets: 0, orderable: false }
        ],

        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'team' },
            { data: 'email' },
            { data: 'mobile' },
            { data: 'add_funds' },
            { data: 'balance' },
            { data: 'winning' },
            { data: 'shopping' },
            { data: 'withdraw' },
            { data: 'bonus' },
            { data: 'total_coins', orderable: false }
        ]
    });

    // ✅ FILTER EVENTS (LIVE)
    $('#filter_teamname, #filter_email, #filter_mobile').on('keyup change', function () {
        table.draw();
    });

});
</script>
@endsection