@extends('layouts.app')

@section('content')
<div class="card">
	<div class="card-header">
		<h5 class="card-title">User</h5>
		<div>
			<!-- <form action="{{ route('users.import') }}" method="post" enctype="multipart/form-data" id="upload_csv_form">
				@csrf
		        <div class="form-group">
		          <label for="exampleFormControlFile1">Please Select File</label>
		          <input type="file" name="file" class="form-control-file" id="exampleFormControlFile1">
		        </div>
		        <div class="form-group">
		         <input type="submit" name="submit" value="submit" class="btn btn-primary">
		       </div>
		  </form> -->
			<a href="{{ route('users.add') }}" class="btn btn-dark" title="Add">
				Add Users
			</a>
			<button type="button" class="btn btn-dark" data-toggle="collapse" data-target="#collapse-filter">
				<i class="fas fa-sliders-h"></i> Filter
			</button>
		</div>
	</div>

	<div class="card-body">
		<div id="collapse-filter" class="collapse">
			<form class="form-filter mb-3" action="{{ route('users.index') }}" method="GET">
				<div class="grid gap-3 xlarge-4">
					<div>
						<label>Sort</label>
						<select class="form-control" name="sort">
							<option value="email">Email</option>
							<option value="first_name">First Name</option>
							<option value="last_name">Last Name</option>
							<option value="created_at" selected>Member Since</option>
							<option value="member_expiry" selected>Member Expiry</option>
						</select>
					</div>

					<div>
						<label>Search</label>
						<div class="input-group">
							<input type="search" class="form-control" name="keyword" placeholder="Keyword (name, email, phone, identity number)">

							<div class="input-group-append">
								<button type="submit" class="btn btn-dark"><i class="fas fa-search"></i></button>
							</div>
						</div>						
					</div>
				</div>

				<input type="hidden" name="page" value="1">
			</form>
		</div>

		<div class="data">
			@include('partials.users')
		</div>
	</div>
</div>
@endsection

@section('js')
<script>
     $(document).ready(function(){  
          $('#upload_csv_form').on("submit", function(e){  
               e.preventDefault(); //form will not submitted  
               $.ajax({  
                    url:$(this).attr('action'),  
                    method:"POST",  
                    data:new FormData(this),  
                    contentType:false,          // The content type used when sending data to the server.  
                    cache:false,                // To unable request pages to be cached  
                    processData:false,        // To send DOMDocument or non processed data file it is set to false  
                    success: function(data){  

                    }  
               })  
          });  
     });  
</script>
@endsection