@extends('layouts.admin')

@section('content')

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Users</h4>
          <a href="{{ route('users.add') }}" class="btn btn-primary btn-round pull-right ml-auto">Add user<div class="ripple-container"></div></a>
        </div>
        <div class="card-body table-responsive">
          @if ( session('message') )
            <div class="alert alert-success bg-gradient-success">
              {{ session('message') }}
            </div>
          @endif
          <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
            <thead class="text-primary">
              <th>First Name</th>
              <th>Last Name</th>
              <th>Department</th>
              <th>Role</th>
              <th></th>
            </thead>
            <tbody>
              @foreach($users as $key=>$value)
                <tr>
                  <td><a href="{{ route('users.edit',['id'=>$value->id]) }}">{{$value->first_name}}</a></td>
                  <td>{{$value->last_name}}</td>
                  <td>{{$value->dep_name}}</td>
                  <td>
                    @foreach($value->roles as $k=>$val)
                    {{ $val->name }}
                    @endforeach
                  </td>
                  <td>
                    <a class="btn btn-warning btn-sm" href="{{ route('users.edit',['id'=>$value->id]) }}">Edit</a>
                    <a class="btn btn-danger btn-sm" href="{{ route('users.delete',['id'=>$value->id]) }}" onclick="return confirm_delete()">Delete</a>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection 

@section('style')
  <link href="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endsection

@section('script')
    <script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
      
      $(document).ready(function() {
        $('#dataTable').DataTable({
          columnDefs: [ { orderable: false, targets: [4] } ],
        });
      });

    </script>
@endsection