@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="row page-titles mx-0" data-aos="fade-up">
    <div class="col-sm-6 p-md-0"></div>
    <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('Registerusers.view') }}">View All Users</a></li>
        <li class="breadcrumb-item">Referred Users</li>
      </ol>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <div class="card" data-aos="fade-up">
        <div class="card-header">
          <h4>All Referred Users</h4>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="dataList" class="table table-striped table-bordered" style="width:100%">
              <thead>
                <tr>
                  <th>S No.</th>
                  <th>
                    <input type="text" class="form-control" id="filter_refereusername" value="{{ request('filter_refereusername') }}" onclick="cancelEvent()" onkeyup="filterData(event, 'filter_refereusername')" placeholder="Referrer Details" /></br>
                    Referrer Details
                  </th>
                  <th>
                    Earned Commission
                  </th>
                  <!-- <th>
                    <input type="text" class="form-control" id="filter_referralmobile" value="{{ request('filter_referralmobile') }}" onclick="cancelEvent()" onkeyup="filterData(event, 'filter_referralmobile')" placeholder="Referrer Mobile" /></br>Referrer Mobile"
                  </th> -->
                  <th>
                    <input type="text" class="form-control" id="filter_username" value="{{ request('filter_username') }}" onclick="cancelEvent()" onkeyup="filterData(event, 'filter_username')" placeholder="Users Name" /></br>Users Name
                  </th>
                  <th>
                    <input type="text" class="form-control" id="filter_email" value="{{ request('filter_email') }}" onclick="cancelEvent()" onkeyup="filterData(event, 'filter_email')" placeholder="Users Email" /></br>Users Email
                  </th>
                  <th>
                    <input type="text" class="form-control" id="filter_mobile" value="{{ request('filter_mobile') }}" onclick="cancelEvent()" onkeyup="filterData(event, 'filter_mobile')" placeholder="Users Mobile" /></br>Users Mobile
                  </th>
                  <th>
                    <input type="text" class="form-control" id="filter_team" value="{{ request('filter_team') }}" onclick="cancelEvent()" onkeyup="filterData(event, 'filter_team')" placeholder="Team Name" /></br />Team Name
                  </th>
                  <th>Joined Matches</th>
                  <th>Joined Contest</th>
                  <th>Joined Teams</th>
                  <th>Total Deposit</th>
                  <th>Total Investments</th>
                  <th>Total Refunds</th>
                  <th>Total Winnings</th>
                  <th>
                    <a href="{{ route('Registerusers.view_refered_users') }}" class="btn btn-grd-primary" style="margin-top: -58px;">Reset</a>
                    </br>Action
                  </th>
                </tr>
              </thead>
              
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="submit_percentage_form" method="POST" action="{{ route($modelName . '.update_percentage') }}">
        @csrf
        <div class="modal-header">
          <h4 class="modal-title">Set YouTuber Percentage</h4>
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">Youtuber Commission Type</div>
          <div class="row m-0">
            <div class="col-md">
              <input type="radio" name="youtuber_commission_type" value="0"> Revenue Amount
            </div>
            <div class="col-md">
              <input type="radio" name="youtuber_commission_type" value="1"> Flat Amount
            </div>
          </div>
          <input type="hidden" name="getplayer_id" id="getplayer_id" />
          <input type="hidden" name="is_yoububer" id="is_yoububer" />
          <div class="py-3">
            <label>Insert %</label>
            <input type="text" class="form-control" name="player_percentage" id="player_percentage" autocomplete="off" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Submit</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </form>
    </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>
  let filtercolums = {
    'filter_email': '',
    'filter_referemail': '',
    'filter_referralmobile': '',
    'filter_refereusername': '',
    'filter_username': '',
    'filter_mobile': '',
    'filter_team': ''
  };

  function cancelEvent() {
    event.stopPropagation();
  }

  function filterData(event, fieldname) {
    filtercolums[fieldname] = event.target.value;
    // alert(fieldname + '>>>' + event.target.value);
    let queryString = Object.keys(filtercolums)
      .map(key => key + '=' + encodeURIComponent(filtercolums[key]))
      .join('&');

    let url = window.location.href.split('?')[0];
    history.pushState('', '', url + '?' + queryString);

    $('#dataList').DataTable().clear().destroy();

    $('#dataList').DataTable({
      order: [0, 'desc'],
      processing: true,
      serverSide: true,
      scrollX: true,
     
      ajax: {
        url: "{{ route($modelName . '.view_refered_users') }}",
        type: "POST",
        data: {
          "_token": "{{ csrf_token() }}",
          "filter_columns": filtercolums
        }
      },
      columns: [{
          data: 'DT_RowIndex',
          orderable: false,
          searchable: false
        },
        {
          data: 'users_referal_username',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_referal_commission',
          orderable: false,
          searchable: false
        },
        {
          data: 'username',
          orderable: false,
          searchable: false
        },
        {
          data: 'email',
          orderable: false,
          searchable: false
        },
        {
          data: 'mobile',
          orderable: false,
          searchable: false
        }, // ✅ Added
        {
          data: 'team',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_joined_matches',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_joined_contest',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_joined_teams',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_deposit',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_investments',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_refunds',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_winnings',
          orderable: false,
          searchable: false
        },
        {
          data: 'action',
          orderable: false,
          searchable: false
        }
      ]
    });

    document.getElementById(fieldname).focus();
  }

  $(document).ready(function() {
    const fields = ['filter_email', 'filter_referemail', 'filter_referralmobile', 'filter_refereusername', 'filter_username', 'filter_mobile', 'filter_team'];
    fields.forEach(field => {
      filtercolums[field] = '{{ request()->get("' + field + '") }}';
    });

    $('#dataList').DataTable({
      processing: true,
      serverSide: true,
      scrollX: true,
 

      ajax: {
        url: "{{ route($modelName . '.view_refered_users') }}",
        type: "POST",
        data: {
          "_token": "{{ csrf_token() }}",
          "filter_columns": filtercolums
        }
      },
      columns: [{
          data: 'DT_RowIndex',
          orderable: false,
          searchable: false
        },
        {
          data: 'users_referal_username',
          orderable: false,
          searchable: true
        },
        {
          data: 'total_referal_commission',
          orderable: false,
          searchable: false
        },
        // {
        //   data: 'users_referal_email',
        //   orderable: false,
        //   searchable: false
        // },
        // {
        //   data: 'referral_mobile',
        //   orderable: false,
        //   searchable: false
        // },
        {
          data: 'username',
          orderable: false,
          searchable: true
        },
        {
          data: 'email',
          orderable: false,
          searchable: true
        },
        {
          data: 'mobile',
          orderable: false,
          searchable: true
        }, // ✅ Added
        {
          data: 'team',
          orderable: false,
          searchable: true
        },
        {
          data: 'total_joined_matches',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_joined_contest',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_joined_teams',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_deposit',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_investments',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_refunds',
          orderable: false,
          searchable: false
        },
        {
          data: 'total_winnings',
          orderable: false,
          searchable: false
        },
        {
          data: 'action',
          orderable: false,
          searchable: false
        }
      ]
    });
  });
</script>
@endsection