@extends('layouts.app')

@section('content')
<div class="col-md-12">
    <div class="row">
        <div style="width: 100%;border: 1px solid #ddd;margin: 20px;">
            {{ Form::model($role, array('route' => array('roles.update', $role->id), 'method' => 'PUT')) }}
            @if ($errors->has('role') || $errors->has('permissions'))
            <ul>
                <li><span class="text-danger">{{ $errors->first('role') }}</span></li>
                <li><span class="text-danger">{{ $errors->first('permissions') }}</span></li>
            </ul>
            @endif
            {{csrf_field()}}
            <div style="margin: 5px;">
                <input type="text" name="role" class="form-control" value="{{$role->name}}">
            </div>
            @foreach($permissions as $k => $v)
            <div style="margin: 10px;">
                <h4 style="background: #e6e6e6;">{{ucwords($k)}}</h4>
            </div>
            @foreach($v as $key => $val)
            <div class="col-md-3" style="padding: 12px;background: #fff;">
                <label class="container">
                    {{ucwords($val)}}
                    @php 
                    $items = [];
                    foreach($role->permissions as $item){
                    $items [] = $item->id;   
                    }
                    @endphp
                    <input type="checkbox" name="permissions[]" value="{{$key}}" >
                           <span class="checkmark"></span>
                </label>
            </div>
            @endforeach
            @endforeach
            <button class="btn btn-primary" style="margin: 10px;">Save</button>
            <!--</form>-->
            {{ Form::close() }}  
        </div>
    </div>

</div>
@endsection

@section('admin_css')
<style>
    /* The container */
    .container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Hide the browser's default checkbox */
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #fff;
        border: 1px solid;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark {
        background-color: #2196F3;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .container .checkmark:after {
        left: 6px;
        top: 3px;
        width: 7px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
</style>
@stop
@section('admin_js')
<script type="text/javascript">
    $(document).ready(function () {
//        $("input[name='role']").keyup(function () {
//            var input_val = $(this).val();
//            if (input_val != null) {
//                $.ajax({
//                    url: "{{route('role_exist_ajax')}}",
//                    method: "POST",
//                    data: {value: input_val, _token: "{{csrf_token()}}"},
//                    success: function (data) {
//                        
//                    }
//                });
//            }
//        });
    });
</script>
@stop