@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">All Registered Users</div>

      <div class="ms-auto d-flex gap-2">
          <a href="{{route('Registerusers.downloadusers')}}" class="btn btn-success d-flex gap-2 text-nowrap">
            <i class="material-icons-outlined">download</i>
            CSV File
          </a>
          <select name="filter_users" id="filter_users" class="form-select">
            <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>
  </div>
  <div class="card" data-aos="fade-up">
    <div class="card-body">
      <div class="table-responsive">
        <table id="dataList" class="table table-bordered align-middle">
          <thead class="text-nowrap">
            <tr>
                <th>S No.</th>
                <th><input type="text" id="filter_teamname" class="form-control form-control-sm" placeholder="Team Name"> Team Name</th>
                <th><input type="text" id="filter_email" class="form-control form-control-sm" placeholder="Email"> Email</th>
                <th><input type="text" id="filter_mobile" class="form-control form-control-sm" placeholder="Mobile"> Mobile</th>
                <th>Topup</th>
                <th>Game Coin</th>
                <th>Shopping Coin</th>
                <th>Diamond Coin</th>
                <th>Redeem</th>
                <th>Bonus</th>
                <th>Refer Code</th>
                <th>Mobile Request</th>
                <th>Email Request</th>
                <th>Aadhar</th>
                <th>PAN</th>
                <th>Bank</th>
                <th>Action</th>
            </tr>
          </thead>
        </table>
      </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">
 $(document).ready(function () {

    let table = $('#dataList').DataTable({
        processing: true,
        serverSide: true,
        scrollX: true,
        searching: false,
        // ✅ 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: 'All_Registered_Users',
                exportOptions: {
                    columns: ':visible'
                }
            }
        ],

        ajax: {
            url: "{{route($modelName.'.view')}}",
            type: "POST",
            data: function (d) {
                d._token = "{{ csrf_token() }}";
                d.users_type = $('#filter_users').val();
                d.filter_columns = {
                    filter_teamname: $('#filter_teamname').val(),
                    filter_email: $('#filter_email').val(),
                    filter_mobile: $('#filter_mobile').val()
                };
            }
        },

        columns: [
            { data: 'DT_RowIndex' },
            { data: 'team' , orderable: false,  },
            { data: 'email' , orderable: false,  },
            { data: 'mobile' , orderable: false,  },
            { data: 'add_funds' },
            { data: 'balance' },
            { data: 'shopping' },
            { data: 'winning' },
            { data: 'withdraw' },
            { data: 'bonus' },
            { data: 'refercode' },
            { data: 'mobile_verify' },
            { data: 'email_verify' },
            { data: 'aadhar_verify' },
            { data: 'pan_verify' },
            { data: 'bank_verify' },
            { data: 'action', orderable: false, searchable: false }
        ]
    });

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

    $('#filter_users').on('change', function () {
        table.draw();
    });

});
</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');
    alert(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