@extends('layouts.app', ['title' => 'Rol: '.$role->name])
@section('content')
    <div class="container" id="abilities">

        <p><span><b>Descripción del rol: </b></span> <br> {{$role->title}}</p>

        <form action="{{route('admin.roles.sync-abilities', $role)}}" method="post">
            @csrf

            <p>Seleccione las habilidades para este rol:</p>

            <div class="d-flex flex-wrap mb-3">
                @forelse($abilities as $ability)
                    <div class="form-group mx-5">
                        <input type="checkbox"
                               name="abilities[]"
                               value="{{$ability->id}}"
                               id="ability-{{$ability->id}}"
                               @if($role->abilities->first(fn($a) => $a->id == $ability->id)) checked @endif>
                        <label for="ability-{{$ability->id}}" class="mb-0">{{$ability->title}}</label>
                    </div>
                @empty
                    <p>No hay habilidades para mostrar</p>
                @endforelse
            </div>

            <div class="my-4">
                <a href="{{route('admin.roles.index')}}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Volver
                </a>
                <button class="btn btn-primary" type="submit">
                    <i class="fa fa-save"></i> Guardar
                </button>
            </div>
        </form>

    </div>
@endsection
@push('js')
    <script>
        new Vue({
            el: '#abilities',
            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