@extends("admin.template.layout")

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

              <!-- Ajax Sourced Server-side -->
              <div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h5 class="mb-0">{{$mode ?? $page_heading}}</h5>
    <a href="{{route('users.create')}}" class="main-btn primary-btn btn-hover btn-sm"><i class='bx bx-plus'></i> Create</a>
  </div>
  <div class="card-body">
    <form method="get" id="userFilterForm">
      <div class="row mb-3">
        <div class="col-md-2">
          <label for="status_filter" class="form-label">Account Status:</label>
          <select id="status" name="status" class="form-select">
            <option value="">All</option>
            <option value="1">DAU</option>
            <option value="2">Active</option>
            <option value="3">Inactive</option>
            <option value="4">Churned</option>
            <option value="5">Deactivated</option>
          </select>
        </div>
        <div class="col-md-2">
          <label for="nationality_filter" class="form-label">Nationality:</label>
          <select id="nationality" name="nationality" class="form-select">
            <option value="">All</option>
            @foreach($countries as $country)
            <option value="{{$country->country_id}}">{{$country->country_name}}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-2">
          <label for="venue_filter" class="form-label">Venues:</label>
          <select id="venue" name="venue" class="form-select">
            <option value="">All</option>
            @foreach($venues as $venue)
            <option value="{{$venue->mall_id}}">{{$venue->mall_name}}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-2">
          <label for="gender" class="form-label">Gender:</label>
          <select id="gender" name="gender" class="form-select">
            <option value="">All</option>
            <option value="1">Male</option>
            <option value="2">Female</option>                        
          </select>
        </div>                    

        <div class="col-md-3">
          <label for="sortby" class="form-label">Sort by date:</label>
          <select id="sortby" name="sortby" class="form-select">
            <option value="">All</option>
            <option value="desc">Newest to Oldest</option>
            <option value="asc">Oldest to Newest</option>                        
          </select>
        </div>        
        <div class="col-md-3 mt-2">
          <label for="name" class="form-label">Search by name:</label>
          <input type="text" class="form-control" name="name">
        </div>                                  
      </div>
    </form>

    <div class="card-datatable text-nowrap">
      <div class="table-responsive">
        <table class="datatables-ajax table table-condensed" data-role="ui-datatable" data-src="{{route('getuserList')}}" >
          <thead>
            <tr>
              <th class="pt-0" data-colname="user_id">#</th>
              <th class="pt-0" data-colname="user_name" data-searchable="true"> Name</th>
             
          <th class="pt-0" data-colname="user_image"> Profile</th>
          <th class="pt-0" data-colname="email">Email</th>
          <th class="pt-0" data-colname="user_phone"> Phone</th>
          <th class="pt-0" data-colname="gender"> Gender</th>
          <th class="pt-0" data-colname="active_status"> Account Status</th>
          {{--                                <th class="pt-0" data-colname="is_blocked"> Blocked</th></th>--}}
          <th class="pt-0" data-colname="last_login_at"> Last Login</th></th>
          <th class="pt-0" data-colname="created_at">Registered on</th>
          <th class="pt-0" data-colname="action">Action</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>
  </div>
</div>
              <!--/ Ajax Sourced Server-side -->






            </div>
@stop
@section('header')
<style>
#DataTables_Table_0_filter{display:none !important}  
</style>
@stop
@section('script')

<script>
  jQuery(document).ready(function(){
    $('#DataTables_Table_0_filter').hide();
      App.initTreeView();

  })
</script>
<script>
$(function () {
    var table = $('.datatables-ajax').DataTable();   
    $('#userFilterForm').on('submit', function (event) {
        event.preventDefault();
        var formData = $('#userFilterForm').serialize();
        table.ajax.url('{{route("getuserList")}}?' + formData).load();
    }).on('input', 'input, select', function (event) {
        event.preventDefault();
        var formData = $('#userFilterForm').serialize();
        table.ajax.url('{{route("getuserList")}}?' + formData).load();
    });
});
</script>
@stop