@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="d-flex justify-content-end align-items-center gap-2 mb-3">

      <a href="{{route('Registerusers.downloadusers')}}" class="badge bg-grd-info m-2">
        <i class="material-icons-outlined material-icons-outlined fs-4">download</i>
        <h6>CSV File</h6>
      </a>
      <!-- <a href="{{ route('Registerusers.downloadusers') }}" class="btn btn-primary btn-sm">
        <i class="fa fa-file-excel-o mr-2"></i> Download CSV
      </a> -->
      <select name="filter_users" id="filter_users" class="form-control form-control-sm" style="width: 200px;">
        <option value="">Select Type</option>
        <option value="">All User</option>
        <option value="active">Active User</option>
        <option value="deactive">Deactive User</option>
        <option value="youtuber">Youtubers</option>
      </select>
    </div>



    <!-- DataTable Export Buttons will appear below this div automatically -->

  </div>
  <div class="row">
    <div class="col-12">
      <div class="card" data-aos="fade-up">
        <div class="card-header">
          <h4>All Registered Users</h4>

          <!-- <a href="{{route($modelName.'.add_user')}}" class="btn btn-primary btn-sm"> Add New Register User</a> -->
        </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>ID</th>
                                <th>Referal</th> -->
                  <th>
                    <input style="margin-bottom:5px" placeholder="Plese Enter Team Name" type="text" id="filter_teamname" name="filter_teamname" value="" onclick="cancelEvent()" onkeyup="filterData(event , 'filter_teamname')">
                    Team Name
                  </th>

                  <th>
                    <input style="margin-bottom:5px" placeholder="Plese Enter Email" type="text" id="filter_email" name="filter_email" value="" onclick="cancelEvent()" onkeyup="filterData(event , 'filter_email')">
                    <br>Email
                  </th>

                  <th>
                    <input style="margin-bottom:5px" placeholder="Plese Enter Mobile" type="text" id="filter_mobile" name="filter_mobile" value="" onclick="cancelEvent()" onkeyup="filterData(event , 'filter_mobile')">
                    Mobile Number
                  </th>
                  <th>Balance</th>
                  <th>Winning</th>
                  <th>Bonus</th>
                  <th>Coin Bonus</th>
                  <th>Refer Code</th>
                  <th>Mobile Request</th>

                  <th>Email Request</th>
                  <th>Aadhar Request</th>
                  <th>PAN Request</th>
                  <th>Bank Request</th>
                  <!-- <th>Deactivate Reason</th> -->
                  <!-- <th>Balance</th>
                                <th>Winning</th>
                                <th>Bonus</th> -->
                  <th>Action</th>
                </tr>
              </thead>


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

<!-- Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header border-bottom-0 py-2">
        <h5 class="modal-title">Set YouTuber Percentage</h5>
        <a href="javascript:;" class="primaery-menu-close" data-bs-dismiss="modal">
          <i class="material-icons-outlined">close</i>
        </a>
      </div>

      <form name="submit_percentage_form" id="submit_percentage_form" method="post" action="{{ route($modelName.'.update_percentage') }}">
        {!! csrf_field() !!}

        <div class="modal-body">
          <p>Youtuber Commission Type</p>

          <div class="row m-auto mb-3">
            <div class="col-md">
              <input type="radio" class="mr-2" name="youtuber_commission_type" value="0"
                onchange="$('#value_tagRevenue').show(); $('#value_tagFlat').hide(); $('#youtuber_commission').show();">
              Revenue Percentage
            </div>
            <div class="col-md">
              <input type="radio" class="mr-2" name="youtuber_commission_type" value="1"
                onchange="$('#value_tagRevenue').hide(); $('#value_tagFlat').show(); $('#youtuber_commission').show();">
              Flat Amount
            </div>
          </div>

          <div class="py-2">
            <label id="value_tagRevenue" style="display: none;">Percentage %</label>
            <label id="value_tagFlat" style="display: none;">Amount</label>
            <input type="text" style="display: none;" name="youtuber_commission" id="youtuber_commission" value="" autocomplete="off" class="form-control mt-2" />
          </div>

          <input type="hidden" name="getplayer_id" id="getplayer_id" value="" />
          <input type="hidden" name="is_yoububer" id="is_yoububer" value="" />
        </div>

        <div class="modal-footer border-top-0">
          <button type="submit" class="btn btn-grd-info" id="submit_player_percentage">Submit</button>
          <button type="button" class="btn btn-grd-danger" data-bs-dismiss="modal">Close</button>
        </div>

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

<!--End Modal -->

<!-- Modal -->
<div class="modal fade" id="deactivateModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Set YouTuber Percentage</h4>
        <button type="button" class="primaery-menu-close"" data-bs-dismiss=" modal"><span>&times;</span>
        </button>
      </div>
      <form name="submit_percentage_form" id="submit_percentage_form" method="post" action="{{route($modelName.'.update_percentage')}}">
        {!! csrf_field() !!}

        <div class="modal-body">Youtuber Commission Type</div>
        <div class="modal-row row m-auto">
          <div class="modal-group col-md">
            <input type="radio" class="mr-2" name="youtuber_commission_type" value="0">Revenue Amount
          </div>
          <div class="modal-group col-md">
            <input type="radio" class="mr-2" name="youtuber_commission_type" value="1">Flat Amount
          </div>
        </div>
        <div class="modal-row overflow-hidden py-3">
          <p class="modal-body lbl_frm mb-0">Insert %</p>
          <!-- <div class="modal-row">
                  <div class="modal-group col-md-12"> -->
          <input type="hidden" name="getplayer_id" id="getplayer_id" value="" />
          <input type="hidden" name="is_yoububer" id="is_yoububer" value="" />
          <input type="text" name="youtuber_commission" id="youtuber_commission" value="" autocomplete="off" class="in_text my-3" />
        </div>
        <!-- </div> </div> -->
        <div class="modal-footer col-md">

          <input type="submit" class="btn btn-primary" name="submit_player_percentage" id="submit_player_percentage" value="Submit" />
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!--End Modal -->

<!-- Edit User Balance Modal -->
<div class="modal fade" id="edit_userbalance">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Update User Balance</h5>
        <button type="button" class="primaery-menu-close" data-bs-dismiss="modal">
          <i class="material-icons-outlined">close</i>
        </button>
      </div>
      <form name="Update_userbalance_form" id="Update_userbalance_form" method="post" action="{{route($modelName.'.user_balances_detail')}}">
        {!! csrf_field() !!}
        <div class="modal-body">
          <input type="hidden" name="user_balance_id" id="user_balance_id" value="" />
          <input type="hidden" name="user_tranasation_id" id="user_tranasation_id" value="" />

          <div class="form-row">
            <div class="row">
              <div class="form-group col-md-6">
                <label for="balance">Balance</label>
                <input type="text" class="form-control" name="balance" id="balance" value="" autocomplete="off" required>
              </div>

              <div class="form-group col-md-6">
                <label for="winning">Winning</label>
                <input type="text" class="form-control" name="winning" id="winning" value="" autocomplete="off" required>
              </div>
            </div>
      
            <div class="form-group col-md-6">
              <label for="bonus">Bonus</label>
              <input type="text" class="form-control" name="bonus" id="bonus" value="" autocomplete="off" required>
            </div>
          </div>
        </div>


        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-primary" name="submit_player_percentage" id="submit_player_percentage" value="Submit Percentage" />
        </div>
      </form>
    </div>
  </div>
</div>
<!--End Edit User Balance Modal -->
<div class="modal fade" id="userDeactivateModal" tabindex="-1" aria-labelledby="userDeactivateModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="userDeactivateModalLabel">Deactivate User</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form name="Update_userbalance_form" id="Update_userbalance_form" method="post" action="{{ route($modelName.'.deactivate_user_status') }}">
        {!! csrf_field() !!}
        <input type="hidden" name="user_id" id="deactivate_user_id" value="" />

        <div class="modal-body">
          <div class="form-group">
            <label for="reason">Reason</label>
            <textarea class="form-control" id="reason" name="reason" placeholder="Enter reason" rows="3"></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-danger" name="submit_player_percentage" id="submit_player_percentage" value="Deactivate User" />
        </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 type="text/javascript">
  var fieldname = '';

  var filtercolums = {
    'filter_teamname': '',
    'filter_email': '',
    'filter_mobile': ''
  }

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


  function filterData(event, fieldname) {
    let users_type = $('#filter_users').val().trim();

    var value = event.target.value;
    //  updateURL(event,fieldname);
    if (fieldname == 'filter_teamname') {
      filtercolums['filter_teamname'] = value;
    }
    if (fieldname == 'filter_email') {
      filtercolums['filter_email'] = value;
    }
    if (fieldname == 'filter_mobile') {
      filtercolums['filter_mobile'] = value;
    }
    //URL UPDATE
    var url = window.location.href.split('?')[0];
    history.pushState('', '', url + "?filter=1&filter_teamname=" + filtercolums['filter_teamname'] + "&filter_email=" + filtercolums['filter_email'] + "&filter_mobile=" + filtercolums['filter_mobile']);

    $('#dataList').DataTable().clear().destroy(); //clear table data Table

    $('#dataList').DataTable({
      order: [0, 'desc'],
      "processing": true,
      "serverSide": true,
      "scrollX": true,

      "ajax": {
        url: "{{route($modelName.'.view')}}",
        type: "POST",
        data: {
          "_token": "{{ csrf_token() }}",
          "users_type": users_type,
          "filter_columns": filtercolums
        }

      },
      "columns": [{
          data: 'DT_RowIndex',
          name: 'DT_RowIndex'
        },
        {
          data: 'team',
          name: 'team'
        },
        {
          data: 'email',
          name: 'email'
        },
        {
          data: 'mobile',
          name: 'mobile'
        },
        {
          data: 'balance',
          name: 'balance'
        },
        {
          data: 'winning',
          name: 'winning'
        },
        {
          data: 'bonus',
          name: 'bonus'
        },
        {
          data: 'bonus_coin',
          name: 'bonus_coin'
        },
        {
          data: 'refercode',
          name: 'refercode'
        },
        {
          data: 'mobile_verify',
          name: 'mobile_verify'
        },
        {
          data: 'email_verify',
          name: 'email_verify'
        },
        
        {
          data: 'aadhar_verify',
          name: 'aadhar_verify'
        },
        {
          data: 'pan_verify',
          name: 'pan_verify'
        },
        {
          data: 'bank_verify',
          name: 'bank_verify'
        },
        // {data: 'deactivate_message', name: 'deactivate_message'},
        {
          data: 'action',
          name: 'action',
          orderable: false,
          searchable: false
        },
      ]

    });

    document.getElementById(fieldname).focus();

  }

  $(document).ready(function() {
    var users_type = '';
    allRegisterUsers(users_type);

    $(document).on('change', '#filter_users', function() {
      let option_value = $(this).val().trim();
      $('#dataList').DataTable().clear().destroy();
      allRegisterUsers(option_value);

    });

  });

  function allRegisterUsers(users_type) {

    var filtercolums = {
      'filter_teamname': '',
      'filter_email': '',
      'filter_mobile': ''
    }

    let filter_teamname = '';
    let filter_email = '';
    let filter_mobile = '';

    // for Filtering
    if (filter_teamname !== '') {
      filtercolums['filter_teamname'] = filter_teamname;
    }
    if (filter_email !== '') {
      filtercolums['filter_email'] = filter_email;
    }
    if (filter_mobile !== '') {
      filtercolums['filter_mobile'] = filter_mobile;
    }

    $('#dataList').DataTable({
      //order: [1, 'DESC'],
      "processing": true,
      "serverSide": true,
      "scrollX": true,
      
      "ajax": {
        url: "{{route($modelName.'.view')}}",
        type: "POST",
        data: {
          "_token": "{{ csrf_token() }}",
          "users_type": users_type,
          "filter_columns": filtercolums
        }
      },
      "columns": [{
          data: 'DT_RowIndex',
          name: 'DT_RowIndex'
        },
        //{data: 'id', name: 'id'},
        //{data: 'refer_id', name: 'refer_id'},
        {
          data: 'team',
          name: 'team'
        },
        {
          data: 'email',
          name: 'email'
        },
        {
          data: 'mobile',
          name: 'mobile'
        },
        {
          data: 'balance',
          name: 'balance',
          orderable: false,
          searchable: false
        },
        {
          data: 'winning',
          name: 'winning',
          orderable: false,
          searchable: false
        },
        {
          data: 'bonus',
          name: 'bonus',
          orderable: false,
          searchable: false
        },
        {
          data: 'bonus_coin',
          name: 'bonus_coin'
        },
        {
          data: 'refercode',
          name: 'refercode'
        },
        {
          data: 'mobile_verify',
          name: 'mobile_verify'
        },
        {
          data: 'email_verify',
          name: 'email_verify'
        },
        
        {
          data: 'aadhar_verify',
          name: 'aadhar_verify'
        },
        {
          data: 'pan_verify',
          name: 'pan_verify'
        },
        {
          data: 'bank_verify',
          name: 'bank_verify'
        },
        // {data: 'deactivate_message', name: 'deactivate_message'},
        // {data: 'balance', name: 'balance',orderable: false, searchable: false},
        // {data: 'winning', name: 'winning',orderable: false, searchable: false},
        // {data: 'bonus', name: 'bonus',orderable: false, searchable: false},
        {
          data: 'action',
          name: 'action',
          orderable: false,
          searchable: false
        },
      ]
    });
  }
</script>

<script type="text/javascript">
  $(document).on('click', '.deleteProduct', function() {
    if (!confirm("Are You Sure to delete this"))
      event.preventDefault();
  });

  $(document).on('click', '.submitper', function() {
    $('#getplayer_id').val($(this).data('id'));
    $('#is_yoububer').val($(this).data('status'));
    $('#myModal').modal('show');
  });

  $(document).on('click', '.edit-userbalance', function() {
    var userbalance_id = $(this).attr('data-id');
    var tranasation_id = $(this).attr('data-tranasation-id');
    $('#user_balance_id').val(userbalance_id);
    $('#balance').val($(this).attr('data-balance'));
    $('#winning').val($(this).attr('data-winning'));
    $('#bonus').val($(this).attr('data-bonus_coin'));
    
    $('#user_tranasation_id').val(tranasation_id);
    $('#edit_userbalance').modal('show');
  });

  $(document).on('click', '.user-deactivate-button', function() {
    var user_id = $(this).attr('data-user-id');
    $('#deactivate_user_id').val(user_id);
    $('#userDeactivateModal').modal('show');
  });

  $(document).on('click', '.action-users', function() {
    if (!confirm("Are You Sure update this status?"))
      event.preventDefault();
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
@endsection