@extends('layouts.app')

@section('content')
<div class="col-md-12">
    <div class="row">
        <div style="width: 100%;border: 1px solid #ddd;margin: 20px;">
            <form action="{{route('roles.store')}}" method="POST">

                @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" placeholder="Create new role with permissions" autocomplete="false">
                </div>
                @foreach($permissions as $k => $v)
                <div style="background: #ddd;">
                    <h4 style="padding: 10px 10px 10px 10px;">{{ucwords($k)}}</h4>
                </div>
                <div class="row">
                    <div style="width: 100%;">
                        @foreach($v as $key => $val)
                        <div class="col-md-3" style="padding: 20px 0px 5px 25px;background: #fff;">
                            <label class="container">
                                {{ucwords($val)}}
                                <input type="checkbox" name="permissions[]" value="{{$key}}"><span class="checkmark"></span>
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endforeach
                <button class="btn btn-primary" style="margin: 10px;">Save</button>
            </form>
        </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