@extends('../layout/form-layout')

@section('form-name', 'User Permissions')

@section('form-area')


<div style="margin-bottom: 4%;">

    <div style="margin-left: 2%;margin-top:1%; margin-bottom:2%; display:inline; ">

        <span style="margin-right: 1%;">User Group</span>


        <select onchange="changeUserGroup()" id="group_select" name="user_group" style="width:auto" class="input w-full border flex-1">

            <option value="null">Select group</option>
            @foreach ($user_groups as $row)
                <option value="{{$row->user_group_id}}">{{$row->user_group_name}}</option>
            @endforeach
        </select>

    </div>

    <div style="margin-left: 2%;margin-top:1%; margin-bottom:2%; display:inline; ">
        <a href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="button inline-block bg-theme-13 text-white"><i class="fa fa-plus" aria-hidden="true"></i></a>
    </div>

</div>

<form id="permissionform" action="{{route('enable_disable_permissions')}}" method="post">
    @csrf
    <div id="user_group_field"></div>
    <div class="intro-y grid grid-cols-12 gap-6 mt-5" id="permissionsList">
    </div>
</form>

<!-- add user group Modal -->

<div class="modal" id="header-footer-modal-preview">
    <div class="modal__content">
        <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5">
            <h2 class="font-medium text-base mr-auto">Add User Group</h2>
            <div id="checkin-button-holder">

            </div>
        </div>

        <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">

            <div class="col-span-12 sm:col-span-12" id="checkindetails">

                <span style="margin-right: 1%;">Group Name</span>
                <input type="text" class="input w-50 border flex-1" id="u_group">

            </div>


        </div>
        <div class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5">
            <button type="button" onclick="addgroup()" class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1">Save</button>
            <button type="button" data-dismiss="modal" id="res_details_cls" class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1">Cancel</button>
        </div>
    </div>

</div>

{{-- end of modal --}}


@endsection




@section('script-area')

<Script>
    $(document).ready(function() {

        $('#save').attr('hidden', false);
        $('#cancel').attr('hidden', false);


    });



    // this function is used to change the selected user group from the drop down, then the page
    // will reload with the selected user group permissions and rest of the permissions checked or unchecked


    function changeUserGroup() {

        var rulesholder = $('#permissionsList').html('');
        var user_group = $('#group_select').val();

        var url = "{{route('getusergrouppermissions')}}";

        var param = {
            'user_group': user_group,
        };

        if (user_group != "null") {

            $.get(url, param).then(res => {

                var result = res;

                if (result.error_status == 0) {

                    result.data.forEach((e, index) => {

                        rulesholder.append('<div class="col-span-12 lg:col-span-6"><div  class="accordion user-permissions-content"><div id="modulediv' + e.id + '" class="user-permissions accordion__pane  border-b border-gray-200 dark:border-dark-5"> <div class="intro-y grid grid-cols-12 gap-6 border-b header-row"><div class="col-span-12 lg:col-span-9 title-side"><h2 class="font-medium text-base mr-auto">' + e.module_name + '</h2></div><div class="col-span-12 lg:col-span-3 controler-side"><input checked id="bulkchecker' + e.id + '" onclick="enableDisableAllPermissions(' + e.id + ')" data-target="#basic-accordion" class="show-code input input--switch border" type="checkbox"><a id="togglerbtn' + e.id + '"  href="javascript:;" class="user-permissions-list accordion__pane__toggle view-more-icon font-medium block"><i style="" class="fas fa-chevron-circle-down"></i></a></div></div><div class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed" id="module' + e.id + '" ></div></div></div></div>');

                        var id = '#module' + e.id;

                        var permissions = e.related_permissions;
                        var category = '';
                        for (let index2 = 0; index2 < permissions.length; index2++) {

                            if(category=='' || category!=permissions[index2].category_id){
                                category=permissions[index2].category_id;
                                $(id).append('<div class="text-base mt-2">'+permissions[index2].userpermissionscategory.category+'</div>');
                            }
                            $(id).append('<div class="grid grid-cols-12  content-area"><div class="col-span-12 lg:col-span-10"><div class="module-item ml-3">' + permissions[index2].permission_name + '</div></div><div class="col-span-12 lg:col-span-2"><div class="check-box-item"><input name="permissions[]" value="' + permissions[index2].permission_code + '" id="permissionrow' + permissions[index2].permission_code + '" type="checkbox"  ></div></div></div>');

                            var rowcount = 0;

                            rowcount = permissions[index2].user_group_permissions.length;

                            if (rowcount > 0) {

                                var id2 = '#permissionrow' + permissions[index2].permission_code;
                                $(id2).attr('checked', true);

                            } else {

                                $('#bulkchecker' + e.id).attr('checked', false);

                            }

                        }


                        if (permissions.length <= 0) {

                            $('#bulkchecker' + e.id).attr('checked', false);

                        }

                        var prefference = sessionStorage.getItem('modulediv' + e.id);

                        if (prefference != null && prefference == "expand") {
                            btntoggler = '#togglerbtn' + e.id;
                            $(btntoggler)[0].click();

                        }

                    });

                }

            }).catch(err => {

                console.log(err);

            });


        }

    }


    // this is used to add new user group
    // this is will submit the new user group name to by api and reload page if success

    function addgroup() {

        var name = $('#u_group').val();

        if (name != "" && name != null) {

            $('#group_select').append('<option selected value="new" >' + name + '</option>');
            $('#res_details_cls').click();
            changeUserGroup();

        } else {
            notify(1, 'provide a valid user group name');
        }

    }


    function enableDisableAllPermissions() {

        var bulkvalue = $('#bulkchecker1').is(":checked");

        $('[name="permissions[]"]').each(function() {
            $(this).attr('checked', bulkvalue);
        });

    }


    $('#save').click(function() {



        $('#user_group_field').html('');

        var user_group = $('#group_select').val();
        var user_group_name = $('#group_select').children(':selected').text();


        $('#user_group_field').append('<input hidden name="user_group_name" id="user_group_name" value="' + user_group_name + '" >');
        $('#user_group_field').append('<input hidden name="user_group_id" id="user_group_id" value="' + user_group + '" >');

        $('#permissionform').validate({
            rules: {
                user_group_id: {
                    required: true,
                }
            },
        });


        if ($('#permissionform').valid()) {

            $('#permissionform').submit();

        }

    });
</Script>


@endsection