@extends('decorator.console')

@section('page-title')
    {{ trans('userrole.detail.title') }}
@stop

@section('html-head')
    <meta name="menu" content="userMenu">
@stop

@section('page-wrapper')
    <div class="row">
        <div class="col-md-12">
            <h1 class="page-header"> {{ trans('userrole.detail.heading') }} </h1>
            <p> {{ trans('userrole.detail.message') }} </p>
            <ol class="breadcrumb breadcrumb-dark col-md-12">
                <li><a href="{{ url('/console/dashboard') }}"> {{ trans('breadcrumb.dashboard') }} </a></li>
                <li class="active"> {{ trans('breadcrumb.user.userRole') }} </li>
            </ol>
        </div>
    </div>

    @include('common.console.message')

    <form id="userRoleForm" class="well form-horizontal" action="{{ url('/console/userroleform') }}"
          method="post" enctype="multipart/form-data" >

        {!! csrf_field() !!}

        <input id="id" name="id" type="hidden" value="{{ $userRole->id }}">

        <div class="form-group">
            <label for="name" class="col-md-2 control-label"> User Role </label>
            <div class="col-md-10">
                <input id="name" name="name" class="form-control" type="text"
                       value="{{ $userRole->name }}">
            </div>
        </div>

        <div class="form-group">
            <label for="description" class="col-md-2 control-label"> Description </label>
            <div class="col-md-10">
                <input id="description" name="description" class="form-control" type="text"
                    value="{{ $userRole->description }}">
            </div>
        </div>

        @if (!empty($userRole->id))
            @foreach($listOfPermissionBlock as $permissionBlock)
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="permissionBlock" data-toggle="collapse" href="#collapse-permissionBlock-{{ $permissionBlock->id }}">
                            <h3 class="panel-title">
                                {{ $permissionBlock->name }}
                                <span class="pull-right clickable">
                                    <i class="glyphicon glyphicon-plus-sign"></i>
                                </span>
                            </h3>
                        </a>
                    </div>

                </div>

                <div id="collapse-permissionBlock-{{ $permissionBlock->id }}" class="panel-body collapse">
                    <div class="form-group">
                        <label class="col-md-2 control-label"></label>
                        <div class="col-md-10">
                            <input id="permissionBlock-all-{{ $permissionBlock->id }}"
                                   class="permissionBlock-all" type="checkbox" />
                            ALL
                        </div>
                    </div>

                    @foreach($permissionBlock->listOfPermissionGroup as $permissionGroup)
                        <div class="form-group">
                            <label class="col-md-2 control-label">{{ $permissionGroup->name }}</label>
                            <div class="col-md-10">

                                @foreach($permissionGroup->listOfPermission as $permission)
                                    <input id="userAccessPermissions" name="userAccessPermissions[]" type="checkbox"
                                           value="{{ $permission->id }}" class="permissionBlock-all-{{ $permissionBlock->id }}"
                                            @if ($userRole->listOfPermission->contains($permission->id))
                                                checked="checked"
                                            @endif
                                    />
                                    {{ $permission->description }}
                                @endforeach

                            </div>
                        </div>
                    @endforeach
                </div>
            @endforeach
        @endif

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">

                                    <button class="btn btn-primary save-userRole" title="Save">
                        <i class="glyphicon glyphicon-floppy-disk"></i> Save
                    </button>
                
                
                <a class="btn btn-default cancel-userRole" href="{{ url('/console/userroles') }}" title="Cancel">
                    <i class="fa fa-remove"></i> Done
                </a>
            </div>
        </div>
    </form>


    <script>
        $("#userRoleForm").submit(function(event){
            var $form = $(this);
            var $inputs = $form.find("input, select, button, textarea");
            var serializedData = $form.serialize();
            $inputs.prop("disabled", true);

            pleaseWaitDialog.showPleaseWait();
            request = $.ajax({
                url: $form.attr('action'),
                type: "post",
                data: serializedData
            });

            request.done(function (result, textStatus, jqXHR){
                console.log( "RESULT : " + JSON.stringify(result));
                pleaseWaitDialog.hidePleaseWait();
                if (result.status == "OK") {
                    swal({
                        title: "Success!",
                        text: result.errorMessage,
                        type: "success",
                        showCancelButton: false,
                        confirmButtonColor: "#4cae4c",
                        confirmButtonText: "OK",
                        closeOnConfirm: false
                    }, function(){
                                                    window.location = "{{ url('/console/userroleform?from=form') }}&id="+result.returnData.id;
                                            });
                } else if (result.status == "ERROR") {
                    ErrorMessage = "";
                    $.each(result.returnData.errors, function(i, error) {
                        ErrorMessage = ErrorMessage + error + "<br>";
                    });
                    swal({title: result.errorMessage, text: ErrorMessage, type: "warning", html: true });
                } else {
                    swal({title: "Error!", text: "Something went wrong! Please contact Administrator.", type: "error", html: true });
                }
                $inputs.prop("disabled", false);
            });

            request.fail(function (result, textStatus, errorThrown){
                pleaseWaitDialog.hidePleaseWait();
                swal("Error!", result.responseText, "error");
                //console.error("The following error occurred: "+ textStatus, errorThrown);
            });

            request.always(function () {});

            event.preventDefault();
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("input[type='text']:visible:enabled:first", document.forms['userRoleForm']).focus();
        });

        $("a.permissionBlock").on("click", function(){
            var i = $(this).find($( "i" ));
            if (i.hasClass('glyphicon-plus-sign')){
                i.removeClass('glyphicon-plus-sign');
                i.addClass('glyphicon-minus-sign');
            } else {
                i.removeClass('glyphicon-minus-sign');
                i.addClass('glyphicon-plus-sign');
            }
        });

        $(".permissionBlock-all").on("click", function(){
            var isChecked = $(this).is(':checked');
            if (isChecked) {
                $('.'+$(this).attr('id')).attr('checked','');
            } else {
                $('.'+$(this).attr('id')).removeAttr('checked');
            }
        });
    </script>

    @include('console.userrole_delete_script')

@stop