@extends('ATCore::atcore_layout')

@section('atplus_main_content')
<!-- general form elements -->
<!-- form start -->
<form id="edit_form" role="form" action="{{ route($routeName.'.update',$role->id) }}" method="POST" autocomplete="off">
    @csrf
    {{method_field('PUT')}}
    
    <div class="card card-info">
        <div class="card-header">
            <h3 class="card-title">Editar Rol</h3>
        </div>
        <!-- /.card-header -->
        
        
        <div class="card-body">
            <div class="form-group">
                <label for="_display_name">Nombre (Legible)</label>
                <input type="text" class="form-control" id="_display_name" name="display_name"  placeholder="Ingresar nombre" value="{{ $role->display_name }}" required>
            </div>
            <div class="form-group">
                <label for="_name">Slug (No podrá modificarse)</label>
                <input type="text" class="form-control" id="_name" name="name" readonly placeholder="Ingresar Slug" value="{{ $role->name }}">
            </div>
            <div class="form-group">
                <label for="_description">Description</label>
                <input type="text" class="form-control" id="_description" name="description"  placeholder="Ingresa una descripción del Rol" value="{{ $role->description }}" autocomplete="off">
            </div>
        </div>
    </div>
    
    
    
    <div class="card card-secondary">
        <div class="card-header">
            <h3 class="card-title">Permisos</h3>
        </div>
        <div class="card-body" id="app">
            <div class="row">
                <div class="col-sm-12">
                    @foreach ($permissions as $permission)
                    <div class="icheck-info">
                        <input v-model="permissionsSelected" value="{{$permission->id}}" type="checkbox" id="_permission_check_{{$permission->id}}">
                        <label for="_permission_check_{{$permission->id}}">{{$permission->display_name}} <em>({{$permission->description}})</em></label>
                    </div>
                    @endforeach
                </div>
            </div>
            <input type="hidden" :value="permissionsSelected" name="permissions">
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-info">Actualizar Datos</button>
            <a href="{{ route($routeName.'.index') }}" class="btn btn-secondary">Cancelar </a>
        </div>
    </div>
</form>
@stop

@section('atplus_main_css')

@stop

@section('plugins.ValidationJS',true)
@section('atplus_main_js')
<script>
    var app = new Vue({
        el: '#app',
        data: {
            permissionsSelected:  {!!$role->permissions->pluck('id')!!},
        }
    });

    
    $(document).ready(function () {
        bsCustomFileInput.init();
        
        
        $('#edit_form').validate({
            submitHandler: function(form) {
                forcePace();
                form.submit();
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
        
        jQuery.extend(jQuery.validator.messages, {
            required: "Este campo es obligatorio.",
            remote: "Por favor, rellena este campo.",
            email: "Por favor, escribe una dirección de correo válida",
            url: "Por favor, escribe una URL válida.",
            date: "Por favor, escribe una fecha válida.",
            dateISO: "Por favor, escribe una fecha (ISO) válida.",
            number: "Por favor, escribe un número entero válido.",
            digits: "Por favor, escribe sólo dígitos.",
            creditcard: "Por favor, escribe un número de tarjeta válido.",
            equalTo: "Por favor, escribe el mismo valor de nuevo.",
            accept: "Por favor, escribe un valor con una extensión aceptada.",
            maxlength: jQuery.validator.format("Por favor, no escribas más de {0} caracteres."),
            minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
            rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
            range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
            max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
            min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
        });
    });
</script>

@stop

@section('plugins.Vue',true)