@extends("dashboard.layouts.app")
@section("title")
	Users
@endsection
@push("stack")
<style>


</style>

@endpush

@section("content")
 <div class="midde_cont">
     <div class="container-fluid">
         <div class="row column_title page_title">
            <div class="col-6">
               <div class="">
                  <h2>Users</h2>
               </div>
            </div>
            <div class="col-6 justify-content-end d-flex">
               <button class="btn btn-primary lanuchModalAddUser">Add New User</button>
            </div>
         </div>
         <div class="container-new"> 
          	<table class="table table-striped data-table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Name</th>
                  <th scope="col">Email</th>
                  <th scope="col">Phone number</th>
                  <th scope="col">Action</th>
                </tr>
              </thead>
              <tbody>
              @foreach($users as $user)
                <tr id="{{$user->id}}_1">
                  <th scope="row">{{$user->id}}</th>
                  <td>{{$user->name}}</td> 
                  <td>{{$user->email}}</td>
                  <td>{{$user->phone_number}}</td>
                  <td class="">
                  		<i class="fa fa-pencil p-2" onclick="lanuchModelEdit({{$user->id}})" aria-hidden="true"></i>
                  		<i class="fa fa-times text-danger" onclick="lanuchModelDelete({{$user->id}})" aria-hidden="true"></i>
                  </td>
                </tr>
        	  @endforeach
              </tbody>
            </table>
         
         
         </div>
    
     
     </div>
 </div> 
<div class="modal fade" id="modal-add-user" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New User</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="add-user-form" medthod="post" action="/add">
      <div class="modal-body">
        	
		<div class="">
			<label>Name<spa></label>
			<input name="name" placeholder="Name" class="form-control" required >
		</div>
		<div class=" mt-2">
			<label>Email</label>
			<input type="email" name="email" placeholder="Email" class="form-control" required >
		</div>
		<div class=" mt-2">
			<label>Phone Number</label>
			<input name="phone" placeholder="Phone number" class="form-control" required >
		</div>
		<div class=" mt-2">
			<label>Attach Files(Optional) </label>
			<input type="file" name="files[]" multiple class="form-control"  >
		</div> 
		
      </div>
      <div class="modal-footer">
        <button type="button" onclick="closeModal('modal-add-user')" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button"  class="btn btn-primary">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>
 
 
 
 @section('scripts')
 <script>
 $(document).ready(function(){
 	$(".lanuchModalAddUser").click(function(){
		$("#modal-add-user").modal("show")
	})
 
 })
 function closeModal(selector){
	$("#"+selector).modal("hide")
}
 </script>
 @endsection
 @endsection