@extends('layout.masters')
@section('content')
<div id="page-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-12">
        <div class="main-container border" style="margin-top : 50px;">
          <div class="col-sm-12 col-md-6 ">
            <h4>&nbsp;</h4>
          </div>
            <div class="col-sm-12 col-md-6">
              <div class="align-right" style="text-align : right">
                <a href="{{url('create-user')}}" class="btn btn-formSubmit" type="button">Add User</a>
              </div>
            </div>
          <table id="users" class="table table-striped table-bordered" style="width:100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              @foreach($users as $user)
                  <tr>
                    <td>{{$user->name}}</td>
                    <td>{{$user->email}}</td>
                    <td>{{$user->role_name}}</td>
                    <td>
                      <div class="action-button-container">
                        <a class="btn btn-success btn-xs" type="button" href="{{url('view-user', $user->id )}}"><span class="fa fa-pencil"></span>View</a>
                        <a class="btn btn-warning btn-xs" type="button"  href="{{url('edit-user', $user->id)}}"><span class="fa fa-pencil"></span>Edit</a>
                        <a class="btn btn-danger btn-xs delete" type="button" data-toggle="modal" data-id='{{$user->id}}' data-route='delete-user' data-target="#customModal"><span class="fa fa-close"></span>Delete</a>
                      </div>
                    </td>
                  </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $('#users').DataTable();
  });
</script>
@endsection