@extends('admin.master')
@section('content')
@section('title', __('role.add_role_permission'))
<div class="container-fluid">
    <div class="row bg-title">
        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
            <ol class="breadcrumb">
                <li class="active breadcrumbColor"><a href="{{ url('dashboard') }}"><i
                            class="fa fa-home"></i>@lang('dashboard.dashboard')</a></li>
                <li>@yield('title')</li>

            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-info">
                <div class="panel-heading"><i class="mdi mdi-clipboard-text fa-fw"></i> @lang('role.role_permission')</div>
                <div class="panel-wrapper collapse in" aria-expanded="true">
                    <div class="panel-body">
                        {{ Form::open(['route' => 'rolePermission.store', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal ajaxFormSubmit', 'id' => 'permissionCreate', 'data-redirect' => route('rolePermission.index')]) }}
                        <div class="form-body">
                            <div class="row">
                                <div class="col-md-8 col-sm-12">
                                    @if ($errors->any())
                                        <div class="alert alert-danger alert-dismissible" role="alert">
                                            <button type="button" class="close" data-dismiss="alert"
                                                aria-label="Close"><span aria-hidden="true">×</span></button>
                                            @foreach ($errors->all() as $error)
                                                <strong>{!! $error !!}</strong><br>
                                            @endforeach
                                        </div>
                                    @endif
                                    @if (session()->has('success'))
                                        <div class="alert alert-success alert-dismissable">
                                            <button type="button" class="close" data-dismiss="alert"
                                                aria-hidden="true">×</button>
                                            <i
                                                class="cr-icon glyphicon glyphicon-ok"></i>&nbsp;<strong>{{ session()->get('success') }}</strong>
                                        </div>
                                    @endif
                                    @if (session()->has('error'))
                                        <div class="alert alert-danger alert-dismissable">
                                            <button type="button" class="close" data-dismiss="alert"
                                                aria-hidden="true">×</button>
                                            <i
                                                class="glyphicon glyphicon-remove"></i>&nbsp;<strong>{{ session()->get('error') }}</strong>
                                        </div>
                                    @endif
                                    <div class="form-group">
                                        <label for="role">@lang('role.user_role')<span class="validateRq">*</span></label>
                                        {{ Form::select('role_id', $data, Input::old('role_id'), ['class' => 'form-control role_id select2 required', 'onchange' => 'getMenu(this)', 'id' => 'role_id']) }}
                                    </div>
                                </div>
                                <div class="col-md-4"></div>

                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <div class="ShowMember">

                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-6">
                                    <button type="submit" id="formSubmit" disabled="disabled"
                                        class="btn btn-info btn_style"><i class="fa fa-check"></i>
                                        @lang('common.update')</button>
                                </div>
                            </div>
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page_scripts')
<script>
    $(document).on('change', '[data-menu]', function(event) {
        if (this.checked == false) {
            var getMenuId = $(this).attr('data-menu');
            $('[data-formenu="' + getMenuId + '"]').prop('checked', false);
        }
    });
    $(document).on('change', '[data-formenu]', function(event) {
        if (this.checked == true) {
            var getMenuId = $(this).attr('data-formenu');
            $('[data-menu="' + getMenuId + '"]').prop('checked', true);
        }
    });
    $(document).on("click", '.checkAll', function(event) {
        if (this.checked) {
            $('.inputCheckbox').each(function() {
                this.checked = true;
            });
        } else {
            $('.inputCheckbox').each(function() {
                this.checked = false;
            });
        }
    });

    function getMenu(select) {
        //$(".preloader").fadeIn("slow");

        var role_id = $('.role_id ').val();
        if (role_id != '') {
            $('body').find('#formSubmit').attr('disabled', false);
        } else {
            $('.inputCheckbox').each(function() {
                this.checked = false;
            });
            $('body').find('#formSubmit').attr('disabled', true);
            //$.notify("Please select role ..!", "error");
            $(".se-pre-con").fadeOut("slow");
            return false;
        }

        var action = "{{ URL::to('rolePermission/get_all_menu') }}";
        $.ajax({
            type: 'POST',
            url: action,
            data: {
                role_id: role_id,
                '_token': $('input[name=_token]').val()
            },

            success: function(result) {
                var subMenus, checkedValue;
                var dataFormat =
                    '<label class="col-md-2 col-sm-12 control-label" style="padding: 17px;">Pages permission </label>';

                dataFormat += '<div id="area_select" class="col-md-6 col-sm-12" style="margin-top: 20px">';
                dataFormat += '<div class="checkbox checkbox-info">';
                dataFormat +=
                    '<input class="inputCheckbox checkAll"  type="checkbox" id="inlineCheckbox" >';
                dataFormat += '<label for="inlineCheckbox"><strong>Select All</strong></label>';
                dataFormat += '	</div>';
                var sl = 1;
                $.each(result.arrayFormat, function(key, value) {
                    dataFormat += '<div class="well" style="margin-bottom:15px; padding:20px">';
                    dataFormat += '<span style="font-weight:bold; border-bottom:1px solid #000;">' +
                        key + '</span>';
                    dataFormat += '<div class="panel-body">';

                    $.each(value, function(key1, value1) {
                        sl++;
                        checkedValue = '';
                        if (value1['hasPermission'] == 'yes') {
                            checkedValue = 'checked';
                        }
                        dataFormat += '<div class="checkbox checkbox-info">';
                        dataFormat += '<input class="inputCheckbox" data-menu="' + value1[
                                'id'] + '" type="checkbox" id="inlineCheckbox1' + sl +
                            '" ' + checkedValue + ' name="menu_id[]" value="' + value1[
                                'id'] + '">';
                        dataFormat += '<label for="inlineCheckbox1' + sl + '">' + value1[
                            'name'] + '</label>';
                        dataFormat += '</div>';
                        console.log(result.subMenu[value1['id']]);
                        if (result.subMenu[value1['id']] !== undefined) {
                            subMenus = result.subMenu[value1['id']];
                            var i = 1;
                            for (var subMenuIndex in subMenus) {
                                checkedValue = '';
                                if (subMenus[subMenuIndex].hasPermission == 'yes') {
                                    checkedValue = 'checked';
                                }
                                var subMenuCss = 'margin-bottom: 12px';
                                if (i == 1) {
                                    subMenuCss = "margin-bottom: 12px;margin-left: 24px";
                                }
                                i++;
                                dataFormat += '<div style="' + subMenuCss +
                                    '" class="checkbox checkbox-inline checkbox-primary">';
                                dataFormat += '<input type="checkbox" id="inlineCheckbox' +
                                    subMenus[subMenuIndex].id + '" value="' + subMenus[
                                        subMenuIndex].id + '" data-formenu="' + value1[
                                        'id'] + '" ' + checkedValue +
                                    ' name="menu_id[]" value="' + subMenus[subMenuIndex]
                                    .id + '">';
                                dataFormat += '<label for="inlineCheckbox' + subMenus[
                                        subMenuIndex].id + '"> ' + subMenus[subMenuIndex]
                                    .name + ' </label>';
                                dataFormat += '</div>';
                            }
                            i = 1;
                        }

                    })

                    dataFormat += '</div>';
                    dataFormat += '</div>';

                });
                $('.ShowMember').html(dataFormat);
                //$(".preloader").fadeOut("slow");
            }
        });
    }
</script>
@endsection
