@extends('adminlte::page')

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.css')}}">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
@stop

@section('body')
    <div class="container" id="app">
        <div class="row mt-5" v-if="($gate.isAdmin() || $gate.isUser())">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Lista de Usuários</h3>

                <div class="card-tools">
                    <button class="btn btn-success card-botton" @click="newModal">Add New <i class="fas fa-user-plus fa-fw"></i></button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body table-responsive p-0">
                <table class="table table-hover">
                  <tbody>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Type</th>
                        <th>Modify</th>
                  </tr>


                  <tr v-for="user in users.data" :key="user.id">

                    <td>@{{user.id}}</td>
                    <td>@{{user.name}}</td>
                    <td>@{{user.email}}</td>
                    <td>@{{user.type | upText}}</td>

                    <td>
                        <a href="#" @click="editModal(user)">
                            <i class="fa fa-edit blue"></i>
                        </a>
                        /
                        <a href="#" @click="deleteUser(user.id)">
                            <i class="fa fa-trash red"></i>
                        </a>

                    </td>
                  </tr>
                </tbody></table>
              </div>
              <!-- /.card-body -->
              <div class="card-footer">
                  <pagination :data="users" :limit="limit" :align="align" :show-disabled="showDisabled" :size="size" @pagination-change-page="getResults"></pagination>
              </div>
            </div>
            <!-- /.card -->
          </div>
        </div>

    <!-- Modal -->
            <div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" v-show="!editmode" id="addNewLabel">Add New</h5>
                    <h5 class="modal-title" v-show="editmode" id="addNewLabel">Update User's Info</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form @submit.prevent="editmode ? updateUser() : createUser()">
                <div class="modal-body">
                     <div class="form-group">
                        <label for="name" class="control-label">Nome</label>
                        <input v-model="form.name" type="text" name="name"
                            placeholder="Name"
                            class="form-control text-capitalize" :class="{ 'is-invalid': form.errors.has('name') }">
                        <has-error :form="form" field="name"></has-error>
                    </div>

                     <div class="form-group">
                        <label for="email" class="control-label">Email</label>
                        <input v-model="form.email" type="email" name="email"
                            placeholder="Email Address"
                            class="form-control text-lowercase" :class="{ 'is-invalid': form.errors.has('email') }">
                        <has-error :form="form" field="email"></has-error>
                    </div>

                    <div class="row">
                        <div class="col-md-12 form-group">
                            <label class="typo__label">Rotinas para acesso</label>
                            <multiselect v-model="form.rotinas" 
                                :options="optionsRotinas" 
                                :multiple="true"
                                :close-on-select="false"
                                :clear-on-select="false"
                                :preserve-search="true"
                                placeholder="Selecione as rotinas"
                                title="Rotinas que o usuário poderá acessar" 
                                label="name" track-by="id">
                            </multiselect>
                            <has-error :form="form" field="rotinas"></has-error>
                        </div>
                    </div> 


                    <div class="form-group">
                        <label for="type" class="control-label">Nível</label>
                        <select name="type" v-model="form.type" id="type" class="form-control" :class="{ 'is-invalid': form.errors.has('type') }">
                            <option value="">Selecione...</option>
                            <option value="admin" v-show="$gate.isAdmin()">Administrador</option>
                            <option value="user">Usuário Geral</option>
                        </select>
                        <has-error :form="form" field="type"></has-error>
                    </div>

                    <div class="form-group">
                        <label for="password" class="control-label">Password</label>
                        <input v-model="form.password" type="password" name="password" id="password"
                        class="form-control" :class="{ 'is-invalid': form.errors.has('password') }">
                        <has-error :form="form" field="password"></has-error>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button v-show="editmode" type="submit" class="btn btn-success">Update</button>
                    <button v-show="!editmode" type="submit" class="btn btn-primary">Create</button>
                </div>

                </form>

                </div>
            </div>
            </div>
    </div>
@stop

@section('js')
      
@stop

@section('adminlte_js')
    @auth
        <script>
            window.user = @json(auth()->user())
        </script>
    @endauth
    <script src="{{ asset('js/app.js')}}"></script> 
    <script src="{{ asset('js/apps/usuarios.js')}}"></script>
    <script src="{{ asset('js/blockClick.js') }}"></script> 
@stop