@extends('layout/principal')
@section('titulo', 'Home')
@section('content')
@php
//dd($permissions);
@endphp
<style>
    .color-fondo{
        background-color: #ededed;
    }
</style>

<div class="az-content-label mg-b-20">Crear Rol de Usuario</div>

<div class="pd-30 bg-gray-200">
    <form action="{{ route('role.store') }}" method="post" data-parsley-validate autocomplete="off">
        @csrf
        <div class="form-group">
            <div class="row row-xs align-items-center mg-b-20">
                <div class="col-md-6 mg-t-5 mg-md-t-0">
                    <label class="az-content-label tx-gray-600">Nombre del Rol</label>
                    <input type="text" name="name" class="form-control" autofocus required>
                </div>
            </div>
            <br>
            <!-- =================================== PERMISOS ===================================  -->
            <div class="row row-xs align-items-center mg-b-20">
                <div class="col-md-6 mg-t-5 mg-md-t-0">
                    <label class="az-content-label tx-gray-600">Permisos para el Rol</label>
                </div>
            </div>
            <div class="card bg-light">
                <div class="card-body">
                    <div class="row row-sm">

                        @foreach ($permissions as $permission)
                            <div class="col-lg-3 mb-2">
                                <div class="input-group">
                                    <label class="ckbox wd-16 mg-b-2 mr-1">
                                        <input type="checkbox" class="mg-0" name="permissions[]" {{-- id="{{$permission->name}} --}}"
                                            value="{{$permission->id}}"><span></span>
                                    </label>
                                    <span>{{$permission->description}}</span>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
        <br>
        <button type="submit" class="btn btn-az-primary pd-x-30 mg-r-5">Guardar</button>
        <a href="{{ route('role.index') }}" class="btn btn-dark pd-x-30">Cancelar</a>
</div><!-- form-group -->
</form>
</div>
@endsection