@inject('request', 'Illuminate\Http\Request')
@extends('layouts.index')

@section('content')
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

    <h3 class="page-title">Usuarios</h3>
    <div class="panel panel-default">
        <div class="panel-body table-responsive">
            <table id="table" class="table table-bordered table-striped {{ count($users) > 0 ? 'datatable' : '' }} dt-select">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Correo Electrónico</th>
                        <th>Rol</th>
                        <th>Editar</th>
                        <th>Eliminar</th>

                    </tr>
                </thead>
                
                <tbody>
                    @if (count($users) > 0)
                        @foreach ($users as $user)
                            <tr data-entry-id="{{ $user->id }}">
                                <td>{{ $user->first_name }} {{ $user->last_name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    @foreach ($user->roles()->pluck('name') as $role)
                                        <span class="label label-info label-many">{{ $role }}</span>
                                    @endforeach
                                </td>
                                <td>
                                    <a href="/usuarios/{{$user->id}}/edit" class="btn btn-xs btn-info">Editar</a>
                                </td>
                                <td>
                                    <a style="color: white" data-toggle="modal" data-target="#modal-delete-{{$user->id}}" class="btn btn-xs btn-danger">Eliminar</a>
                                    </button>
                                    <div class="modal fade" id="modal-delete-{{$user->id}}" role="dialog">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h4 class="modal-title">Eliminar Usuario</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>¿Desea eliminar el usuario <b>{{$user->first_name}} {{$user->last_name}}</b>?</p>
                                                </div>
                                                <div class="modal-footer">
                                                    {!!Form::open(['action' => ['Admin\UsersController@destroy', $user->id], 'method' => 'POST', 'class' => 'pull-right'])!!}
                                                        {{Form::hidden('_method', 'DELETE')}}
                                                        {{Form::submit('Eliminar', ['class' => 'btn btn-danger'])}}
                                                    {!!Form::close()!!}
                                                    <button type="button" class="btn btn-default btn-round" data-dismiss="modal">Cancelar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>

                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="9">No existen usuarios creados.</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#table").dataTable();
        } );
    </script>
@stop