@extends('layouts.app', ['title' => 'Administrar Roles y Permisos', 'titleIconClass' => 'user-tag'])
@section('content')
    <div class="container" id="roles">

        <x-table>
            <x-slot name="headerRight">
                <a class="btn btn-primary" href="#" @click.prevent="showModalCreate">
                    <i class="fa fa-plus"></i> Agregar Nuevo Rol
                </a>
            </x-slot>
            <table class="table align-items-center table-flush table-hover">
                <thead class="thead-light">
                    <tr>
                        <th scope="col" class="sort" data-sort="name">Id</th>
                        <th scope="col" class="sort" data-sort="budget"><i class="fa fa-user-tag"></i> Rol</th>
                        <th scope="col" class="sort" data-sort="status"><i class="fa fa-file-alt"></i> Descripción</th>
                        <th scope="col" class="text-center"><i class="fa fa-users"></i> Usuarios</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody class="list">
                    @foreach($roles as $role)
                        <tr>
                            <td>
                                {{$role->id}}
                            </td>
                            <td class="name">
                                {{$role->name}}
                            </td>
                            <td>
                                {{$role->title}}
                            </td>
                            <td class="text-center">
                                {{$role->users->count()}}
                            </td>
                            <td class="text-right">
                                <a href="{{route('admin.roles.show', $role)}}"
                                   class="btn btn-sm btn-outline-dark py-1 px-2 mr-1"
                                   title="Ver Permisos">
                                    <i class="fa fa-eye"></i> Permisos
                                </a>
                                <a href="#"
                                   class="btn btn-sm btn-outline-primary py-1 px-2 mr-1"
                                   title="Editar"
                                   @click.prevent="showModalEdit({
                                        id: '{{$role->id}}',
                                        name: '{{$role->name}}',
                                        title: '{{$role->title}}'
                                   })">
                                    <i class="fa fa-edit"></i>
                                </a>
                                <a href="#"
                                   class="btn btn-sm btn-outline-danger py-1 px-2 mr-1"
                                   title="Eliminar"
                                   @click.prevent="destroy('{{$role->id}}')">
                                    <i class="fa fa-trash"></i>
                                </a>
                                <form action="{{route('admin.roles.destroy', $role)}}"
                                      method="post"
                                      id="destroy-{{$role->id}}"
                                      class="d-none">
                                    @csrf @method('delete')
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </x-table>

        <div class="modal fade" id="actionModal" tabindex="-1" role="dialog" aria-labelledby="actionModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="actionModalLabel">
                            @{{ createMode ? 'Crear Rol' : 'Editar Role: ' + entity.name }}
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form :action="createMode ? '{{route('admin.roles.store')}}'
                                                  : '/admin/roles/'+entity.id+''" method="post">
                            @csrf
                            <template v-if="!createMode">@method('put')</template>

                            <div class="form-group">
                                <label for="">Nombre</label>
                                <input class="form-control"
                                       type="text"
                                       name="name"
                                       required
                                       v-model="entity.name">
                            </div>

                            <div class="form-group">
                                <label for="">Título</label>
                                <input class="form-control"
                                       type="text"
                                       name="title"
                                       required
                                       v-model="entity.title">
                            </div>

                            <button type="submit" id="submit" class="d-none"></button>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-primary" @click="save">
                            <i class="fa fa-save"></i> Guardar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        new Vue({
            el: '#roles',
            data() {
                return {
                    entity: {
                        id: null,
                        name: null,
                        title: null,
                    },
                    createMode: false
                }
            },
            methods: {
                showModalCreate() {
                    this.createMode = true
                    this.resetData()
                    $('#actionModal').modal('show')
                },
                showModalEdit(data) {
                    this.createMode = false
                    this.entity = data
                    $('#actionModal').modal('show')
                },
                resetData() {
                    this.entity = {
                        id: null,
                        name: null,
                        title: null,
                    }
                },
                save() {
                    $('#submit').click()
                },
                destroy(id) {
                    if (confirm('¿Desea eliminar este registro?')) {
                        $('#destroy-'+id).submit()
                    }
                }
            }
        })
    </script>
@endpush