@extends('base::layouts.default')

@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('adminview/assets/css/select2.min.css') }}" />

    <style>
        .check-box {
            display: flex;
            align-items: center;
            justify-content: space-around
        }

        .label-div {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .org-div {
            border: 1px solid #c6c2c2;
        }

        .table-body td {
            padding: 10px;
        }

        .table-body td input {
            margin-right: 10px;
        }

        .table-row {
            border-bottom: 1px solid #dcd9d9;
        }

        .rule-table {
            margin: 20px 0px;
        }

        /* plus glyph for showing collapsible panels */
        .panel-heading .accordion-plus-toggle:before {
            font-family: FontAwesome;
            content: "\f068";
            float: right;
            color: silver;
        }

        .panel-heading .accordion-plus-toggle.collapsed:before {
            content: "\f067";
            color: silver;
        }

        /* arrow glyph for showing collapsible panels */
        .panel-heading .accordion-arrow-toggle:before {
            font-family: FontAwesome;
            content: "\f078";
            float: right;
            color: silver;
            margin-top: 8px
        }

        .panel-heading .accordion-arrow-toggle.collapsed:before {
            content: "\f054";
            color: rgb(57, 56, 56);
        }

        /* sets the link to the width of the entire panel title */
        .panel-title>a {
            display: block;
        }

        .check-div {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            gap: 7%;
            align-items: baseline;
        }

        .table-body td {
            width: 28%;
        }

        .panel-default>.panel-heading {
            background-color: #e8e8e8;
        }

        .panel-heading {
            height: 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .accordion-toggle {
            color: #333333;
        }

        .panel-body {
            padding: 0px;
        }

        .panel-group .panel-heading {
            border-bottom: 1px solid #dcd9d9;
            height: 10%;
        }

        .panel-heading {
            border-bottom: 1px solid #dcd9d9;
        }

        .panel-group {
            border: 1px solid #dcd9d9;
            overflow: auto;
        }

        .individual-rules {
            overflow: auto;
        }
    </style>
@endsection

@section('header')
    @include('base::layouts.headers.dashboard')
@endsection

@section('content')
    <div data-ng-controller="PermissionRuleController as permsnRuleCtrl">
        <div class=" " id="dashboard-page">
            <div class="page-heading flexbox align-items-center flex-wrap">
                <ol class="breadcrumb">
                    <li><a href="{{ route('permission.index') }}">{{ __('permission-rules::index.permission_rules') }}</a>
                    </li>
                    <li class="active">Add Permission Rule</li>
                </ol>
            </div>
            <br>

            <div id="edit-form-div" class="tab-pane fade in active"><br>
                <div class="row">
                    <div class="mx-auto" style="width:80%; margin-left: 10rem;">
                        <form method="POST" enctype="multipart/form-data" data-base-validator
                            data-ng-submit="permsnRuleCtrl.savePermissionRule($event)">
                            {!! csrf_field() !!}
                            <input type="hidden" id="permission-rule-id" ng-model="permsnRuleCtrl.permissionRuleData.id"
                                value="{{ request()->id }}">

                            <!-- rule name -->
                            <div class="form-group row" style="margin-bottom: 15px;">
                                <label for="rule_name" class="col-xs-12 col-sm-2 control-label"
                                    style="font-size: 14px; color: #000; margin-top: 10px;"><strong>Rule
                                        Name*:</strong></label>
                                <div class="col-sm-9 col-xs-12">
                                    <input type="text" class="form-control"
                                        ng-model="permsnRuleCtrl.permissionRuleData.rule_name"
                                        placeholder="{{ trans('partner-programs::index.pname_placeholder') }}"
                                        id="name"
                                        style="border: 2px solid rgba(128, 130, 133, 0.36); border-radius: 20px; padding: 0px 9px; height: auto;">
                                </div>
                            </div>

                            <!-- organization -->
                            <div class="form-group row" style="margin-bottom: 15px;">
                                <label class="col-xs-12 col-sm-2 control-label" for="organization"
                                    style="font-size: 14px; color: #000; margin-top: 10px;"><strong>Organization
                                        Restrictions*:</strong></label>
                                <div class="col-sm-9 col-xs-12">
                                    <select name="organization" id="organization"
                                        ng-model="permsnRuleCtrl.permissionRuleData.organization"
                                        ng-options="rule.organization_name for rule in permsnRuleCtrl.orgList"
                                        class="form-control"
                                        style="border: 2px solid rgba(128, 130, 133, 0.36); border-radius: 20px; padding: 0px 9px; height: auto;">
                                        <option value="">Select Organization</option>
                                    </select>
                                </div>
                            </div>

                            <!-- permission rule tables -->
                            <!-- Dashboard Permissions -->
                            <div class="panel-heading">
                                <div class="heading-div">
                                    <h5 class="panel-title">
                                        <div class="label-div">
                                            <input type="hidden" name="module_name"
                                                ng-model="permsnRuleCtrl.permissionRuleData.module_name"
                                                ng-init="permsnRuleCtrl.permissionRuleData.modules['dashboard'].name='Dashboard'">
                                            <label for="dashboard">Dashboard</label>
                                        </div>
                                    </h5>
                                </div>

                                <!-- Dashboard Permissions -->
                                <div class="check-div col-sm-9">
                                    <div class="checkbox">
                                        <label for="view"><input type="checkbox" name="dash_view" id="dash_view"
                                                value="view"
                                                ng-model="permsnRuleCtrl.permissionRuleData.modules['dashboard'].permissions['View']"
                                                ng-disabled="permsnRuleCtrl.permissionRuleData.modules['dashboard'].permissions['Hide']">View</label>
                                    </div>
                                    <div class="checkbox">
                                        {{-- <label for="create"><input type="checkbox" name="dash_create"
                                                id="dash_create">Create</label> --}}
                                    </div>
                                    <div class="checkbox">
                                        <label for="dash_edit"><input type="checkbox" name="dash_edit" id="dash_edit"
                                                value="edit"
                                                ng-model="permsnRuleCtrl.permissionRuleData.modules['dashboard'].permissions['Edit']"
                                                ng-disabled="permsnRuleCtrl.permissionRuleData.modules['dashboard'].permissions['Hide']">Edit</label>
                                    </div>
                                    <div class="checkbox">
                                        {{-- <label for="delete"><input type="checkbox" name="dash_delete"
                                                id="dash_delete">Delete</label> --}}
                                    </div>
                                    <div class="checkbox">
                                        <label for="dash_hide">
                                            <input type="checkbox" name="dash_hide" id="dash_hide" value="hide"
                                                ng-model="permsnRuleCtrl.permissionRuleData.modules['dashboard'].permissions['Hide']">
                                            Hide
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Organizations Permissions -->
                            <div class="panel-group" id="accordion-7544257" role="tablist" aria-multiselectable="false">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="heading-3145675">
                                        <div class="heading-div">
                                            <h5 class="panel-title">
                                                <a role="button" data-toggle="collapse" class="collapsed"
                                                    data-parent="#accordion-7544257" href="#collapse-3145675"
                                                    aria-expanded="false" aria-controls="collapse-3145675">
                                                    <div class="label-div">
                                                        <svg fill="#000000" width="17px" height="17px"
                                                            viewBox="0 0 24 24" id="down-arrow-circle"
                                                            data-name="Flat Color" xmlns="http://www.w3.org/2000/svg"
                                                            class="icon flat-color">
                                                            <circle id="primary" cx="12" cy="12" r="10"
                                                                style="fill: rgb(0, 0, 0);"></circle>
                                                            <path id="secondary"
                                                                d="M14.14,13H13V7a1,1,0,0,0-2,0v6H9.86a1,1,0,0,0-.69,1.5l2.14,3.12a.82.82,0,0,0,1.38,0l2.14-3.12A1,1,0,0,0,14.14,13Z"
                                                                style="fill: rgb(44, 169, 188);"></path>
                                                        </svg>
                                                        <input type="hidden" name="module_name"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.module_name"
                                                            ng-init="permsnRuleCtrl.permissionRuleData.modules['organization'].name='Organization'">
                                                        Organization
                                                    </div>
                                                </a>
                                            </h5>
                                        </div>

                                        <div class="check-div col-sm-9">
                                            <div class="checkbox">
                                                <label for="view"><input type="checkbox" name="org_view"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['organization'].permissions['View']"
                                                        ng-disabled="permsnRuleCtrl.permissionRuleData.modules['organization'].permissions['Hide']">View
                                                </label>
                                            </div>
                                            <div class="checkbox">
                                                <label for="create"><input type="checkbox" name="org_create"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['organization'].permissions['Create']"
                                                        ng-disabled="permsnRuleCtrl.permissionRuleData.modules['organization'].permissions['Hide']">Create</label>
                                            </div>
                                            <div class="checkbox">
                                                <label for="edit"><input type="checkbox" name="org_edit"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['organization'].permissions['Edit']"
                                                        ng-disabled="permsnRuleCtrl.permissionRuleData.modules['organization'].permissions['Hide']">Edit</label>
                                            </div>
                                            <div class="checkbox">
                                                <label for="delete"><input type="checkbox" name="org_delete"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['organization'].permissions['Delete']"
                                                        ng-disabled="permsnRuleCtrl.permissionRuleData.modules['organization'].permissions['Hide']">Delete</label>
                                            </div>
                                            <div class="checkbox">
                                                <label for="hide"><input type="checkbox" name="org_hide"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['organization'].permissions['Hide']">Hide</label>
                                            </div>
                                        </div>

                                        <div class="arrow-icon accordion-toggle accordion-arrow-toggle collapsed"></div>
                                    </div>
                                </div>

                                <!-- Organizations Permissions -->
                                <div id="collapse-3145675" class="panel-collapse collapse" role="tabpanel"
                                    aria-labelledby="heading-3145675">
                                    <div class="panel-body">

                                        <!------------->
                                        <div class="panel-heading" ng-repeat="orgMod in permsnRuleCtrl.orgModules">
                                            <div class="label-div">
                                                <input type="hidden" name="module_name"
                                                    ng-model="permsnRuleCtrl.permissionRuleData.modules[orgMod.key]"
                                                    ng-init="permsnRuleCtrl.permissionRuleData.modules[orgMod.key].name=orgMod.label">
                                                @{{ orgMod.label }}
                                            </div>

                                            <div class="check-div col-sm-9">
                                                <div class="checkbox" ng-repeat="permsn in orgMod.permissions">
                                                    <label>
                                                        <input type="checkbox" name="@{{ orgMod.key }}[]"
                                                            value="@{{ permsn }}"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.modules[orgMod.key].permissions[permsn]"
                                                            ng-disabled="permsn != 'Hide' && permsnRuleCtrl.permissionRuleData.modules[orgMod.key].permissions['Hide']">
                                                        @{{ permsn }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Organizations Permissions -->

                            <!-- Subscribers Permissions -->
                            <div class="panel-group" id="accordion-7544257" role="tablist" aria-multiselectable="false">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="heading-3145676">
                                        <div class="heading-div">
                                            <h5 class="panel-title">
                                                <a role="button" data-toggle="collapse"
                                                    class="accordion-toggle collapsed" data-parent="#accordion-7544257"
                                                    href="#collapse-3145676" aria-expanded="false"
                                                    aria-controls="collapse-3145676">
                                                    <div class="label-div">
                                                        <svg fill="#000000" width="17px" height="17px"
                                                            viewBox="0 0 24 24" id="down-arrow-circle"
                                                            data-name="Flat Color" xmlns="http://www.w3.org/2000/svg"
                                                            class="icon flat-color">
                                                            <circle id="primary" cx="12" cy="12" r="10"
                                                                style="fill: rgb(0, 0, 0);"></circle>
                                                            <path id="secondary"
                                                                d="M14.14,13H13V7a1,1,0,0,0-2,0v6H9.86a1,1,0,0,0-.69,1.5l2.14,3.12a.82.82,0,0,0,1.38,0l2.14-3.12A1,1,0,0,0,14.14,13Z"
                                                                style="fill: rgb(44, 169, 188);"></path>
                                                        </svg>
                                                        <input type="hidden" name="module_name"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.module_name"
                                                            ng-init="permsnRuleCtrl.permissionRuleData.modules['subscribers'].name='Subscribers'">
                                                        Subscribers
                                                    </div>
                                                </a>
                                            </h5>
                                        </div>

                                        <div class="check-div col-sm-9">
                                            <div class="checkbox checkbox d-flex flex-column">
                                                <label for="view"><input type="checkbox" name="subs_view"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['subscribers'].permissions['View']"
                                                        ng-disabled="permsnRuleCtrl.permissionRuleData.modules['subscribers'].permissions['Hide']">View
                                                </label>
                                                <label for="ss"><input type="checkbox" name="subs_ss"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['subscribers'].permissions['Security Search']">Security
                                                    Search</label>
                                            </div>
                                            <div class="checkbox">
                                                <label for="create"><input type="checkbox" name="subs_create"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['subscribers'].permissions['Create']"
                                                        ng-disabled="permsnRuleCtrl.permissionRuleData.modules['subscribers'].permissions['Hide']">Create</label>
                                            </div>
                                            <div class="checkbox">
                                                <label for="edit"><input type="checkbox" name="subs_edit"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['subscribers'].permissions['Edit']"
                                                        ng-disabled="permsnRuleCtrl.permissionRuleData.modules['subscribers'].permissions['Hide']">Edit</label>
                                            </div>
                                            <div class="checkbox">
                                                <label for="delete"><input type="checkbox" name="subs_delete"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['subscribers'].permissions['Delete']"
                                                        ng-disabled="permsnRuleCtrl.permissionRuleData.modules['subscribers'].permissions['Hide']">Delete</label>
                                            </div>
                                            <div class="checkbox">
                                                <label for="hide"><input type="checkbox" name="subs_hide"
                                                        ng-model="permsnRuleCtrl.permissionRuleData.modules['subscribers'].permissions['Hide']">Hide</label>
                                            </div>
                                        </div>

                                        <div class="accordion-toggle accordion-arrow-toggle collapsed"></div>
                                    </div>
                                </div>

                                <!-- Subscribers Permissions -->
                                <div id="collapse-3145676" class="panel-collapse collapse" role="tabpanel"
                                    aria-labelledby="heading-3145676">
                                    <div class="panel-body">
                                        <!------------->
                                        <div class="panel-heading" ng-repeat="subsMod in permsnRuleCtrl.subsModules">
                                            <div class="label-div">
                                                <input type="hidden" name="module_name"
                                                    ng-model="permsnRuleCtrl.permissionRuleData[subsMod.key]"
                                                    ng-init="permsnRuleCtrl.permissionRuleData.modules[subsMod.key].name=subsMod.label">
                                                @{{ subsMod.label }}
                                            </div>

                                            <div class="check-div col-sm-9">
                                                <div class="checkbox" ng-repeat="permsn in subsMod.permissions">
                                                    <label for="view">
                                                        <input type="checkbox" name="@{{ subsMod.key }}[]"
                                                            value="@{{ permsn }}"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.modules[subsMod.key].permissions[permsn]"
                                                            ng-disabled="permsn != 'Hide' && permsnRuleCtrl.permissionRuleData.modules[subsMod.key].permissions['Hide']">
                                                        @{{ permsn }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Subscribers Permissions -->

                            <!-- Individual1 Rules -->
                            <div class="individual-rules">
                                <!-- Module -->
                                <div class="panel-heading" ng-repeat="ind1Mod in permsnRuleCtrl.indModules1">
                                    <div class="heading-div">
                                        <h5 class="panel-title">
                                            <div class="label-div">
                                                <input type="hidden" name="module_name"
                                                    ng-model="permsnRuleCtrl.permissionRuleData[ind1Mod.key]"
                                                    ng-init="permsnRuleCtrl.permissionRuleData.modules[ind1Mod.key].name=ind1Mod.label">
                                                @{{ ind1Mod.label }}
                                            </div>
                                        </h5>
                                    </div>

                                    <!-- Permissions -->
                                    <div class="check-div col-sm-9">
                                        <div class="checkbox" ng-repeat="permsn in ind1Mod.permissions">
                                            <label for="view">
                                                <input type="checkbox" name="@{{ ind1Mod.key }}[]"
                                                    value="@{{ permsn }}"
                                                    ng-model="permsnRuleCtrl.permissionRuleData.modules[ind1Mod.key].permissions[permsn]"
                                                    ng-disabled="permsn!='Hide' && permsnRuleCtrl.permissionRuleData.modules[ind1Mod.key].permissions['Hide']">
                                                @{{ permsn }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Categories Permissions -->
                            <div class="panel-group" id="accordion-7544257" role="tablist" aria-multiselectable="false">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="heading-3145677">
                                        <div class="heading-div">
                                            <h5 class="panel-title">
                                                <a role="button" data-toggle="collapse" class="collapsed"
                                                    data-parent="#accordion-7544257" href="#collapse-3145677"
                                                    aria-expanded="false" aria-controls="collapse-3145677">
                                                    <div class="label-div">
                                                        <svg fill="#000000" width="17px" height="17px"
                                                            viewBox="0 0 24 24" id="down-arrow-circle"
                                                            data-name="Flat Color" xmlns="http://www.w3.org/2000/svg"
                                                            class="icon flat-color">
                                                            <circle id="primary" cx="12" cy="12" r="10"
                                                                style="fill: rgb(0, 0, 0);"></circle>
                                                            <path id="secondary"
                                                                d="M14.14,13H13V7a1,1,0,0,0-2,0v6H9.86a1,1,0,0,0-.69,1.5l2.14,3.12a.82.82,0,0,0,1.38,0l2.14-3.12A1,1,0,0,0,14.14,13Z"
                                                                style="fill: rgb(44, 169, 188);"></path>
                                                        </svg>
                                                        <input type="hidden" name="module_name"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.module_name">
                                                        Categories
                                                    </div>
                                                </a>
                                            </h5>
                                        </div>
                                        <div class="arrow-icon accordion-toggle accordion-arrow-toggle collapsed"></div>
                                    </div>
                                </div>

                                <!-- Categories Permissions -->
                                <div id="collapse-3145677" class="panel-collapse collapse" role="tabpanel"
                                    aria-labelledby="heading-3145677">
                                    <div class="panel-body">
                                        <div class="panel-heading" ng-repeat="catMod in permsnRuleCtrl.catgryModules">
                                            <div class="label-div">
                                                <input type="hidden" name="module_name"
                                                    ng-model="permsnRuleCtrl.permissionRuleData[catMod.key].module_name"
                                                    ng-init="permsnRuleCtrl.permissionRuleData.modules[catMod.key].name=catMod.label">
                                                @{{ catMod.label }}
                                            </div>

                                            <div class="check-div col-sm-9">
                                                <div class="checkbox" ng-repeat="permsn in catMod.permissions">
                                                    <label for="view">
                                                        <input type="checkbox" name="@{{ catMod.key }}[]"
                                                            value="@{{ permsn }}"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.modules[catMod.key].permissions[permsn]"
                                                            ng-disabled="permsn != 'Hide' && permsnRuleCtrl.permissionRuleData.modules[catMod.key].permissions['Hide']">
                                                        @{{ permsn }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Categories Permissions -->

                            <!-- Channel Service Permissions -->
                            <div class="panel-group" id="accordion-7544257" role="tablist" aria-multiselectable="false">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="heading-3145681">
                                        <div class="heading-div">
                                            <h5 class="panel-title">
                                                <a role="button" data-toggle="collapse" class="collapsed"
                                                    data-parent="#accordion-7544257" href="#collapse-3145681"
                                                    aria-expanded="false" aria-controls="collapse-3145681">
                                                    <div class="label-div">
                                                        <svg fill="#000000" width="17px" height="17px"
                                                            viewBox="0 0 24 24" id="down-arrow-circle"
                                                            data-name="Flat Color" xmlns="http://www.w3.org/2000/svg"
                                                            class="icon flat-color">
                                                            <circle id="primary" cx="12" cy="12" r="10"
                                                                style="fill: rgb(0, 0, 0);"></circle>
                                                            <path id="secondary"
                                                                d="M14.14,13H13V7a1,1,0,0,0-2,0v6H9.86a1,1,0,0,0-.69,1.5l2.14,3.12a.82.82,0,0,0,1.38,0l2.14-3.12A1,1,0,0,0,14.14,13Z"
                                                                style="fill: rgb(44, 169, 188);"></path>
                                                        </svg>
                                                        <input type="hidden" name="module_name"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.module_name">
                                                        Channel Service
                                                    </div>
                                                </a>
                                            </h5>
                                        </div>

                                        <div class="arrow-icon accordion-toggle accordion-arrow-toggle collapsed"></div>
                                    </div>
                                </div>

                                <!-- Channel Service Permissions -->
                                <div id="collapse-3145681" class="panel-collapse collapse" role="tabpanel"
                                    aria-labelledby="heading-3145681">
                                    <div class="panel-body">
                                        <!------------->
                                        <div class="panel-heading"
                                            ng-repeat="chnlSrvcMod in permsnRuleCtrl.chanlSrvcModules">
                                            <div class="label-div">
                                                <input type="hidden" name="module_name"
                                                    ng-model="permsnRuleCtrl.permissionRuleData[chnlSrvcMod.key]"
                                                    ng-init="permsnRuleCtrl.permissionRuleData.modules[chnlSrvcMod.key].name=chnlSrvcMod.label">
                                                @{{ chnlSrvcMod.label }}
                                            </div>

                                            <div class="check-div col-sm-9">
                                                <div class="checkbox" ng-repeat="permsn in chnlSrvcMod.permissions">
                                                    <label for="view">
                                                        <input type="checkbox" name="@{{ chnlSrvcMod.key }}[]"
                                                            value="@{{ permsn }}"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.modules[chnlSrvcMod.key].permissions[permsn]"
                                                            ng-disabled="permsn != 'Hide' && permsnRuleCtrl.permissionRuleData.modules[chnlSrvcMod.key].permissions['Hide']">
                                                        @{{ permsn }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Channel Service Permissions -->

                            <!-- Settings Permissions -->
                            <div class="panel-group" id="accordion-7544257" role="tablist" aria-multiselectable="false">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="heading-3145678">
                                        <div class="heading-div">
                                            <h5 class="panel-title">
                                                <a role="button" data-toggle="collapse" class="collapsed"
                                                    data-parent="#accordion-7544257" href="#collapse-3145678"
                                                    aria-expanded="false" aria-controls="collapse-3145678">
                                                    <div class="label-div">
                                                        <svg fill="#000000" width="17px" height="17px"
                                                            viewBox="0 0 24 24" id="down-arrow-circle"
                                                            data-name="Flat Color" xmlns="http://www.w3.org/2000/svg"
                                                            class="icon flat-color">
                                                            <circle id="primary" cx="12" cy="12" r="10"
                                                                style="fill: rgb(0, 0, 0);"></circle>
                                                            <path id="secondary"
                                                                d="M14.14,13H13V7a1,1,0,0,0-2,0v6H9.86a1,1,0,0,0-.69,1.5l2.14,3.12a.82.82,0,0,0,1.38,0l2.14-3.12A1,1,0,0,0,14.14,13Z"
                                                                style="fill: rgb(44, 169, 188);"></path>
                                                        </svg>
                                                        <input type="hidden" name="module_name"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.module_name">
                                                        Settings
                                                    </div>
                                                </a>
                                            </h5>
                                        </div>

                                        <div class="arrow-icon accordion-toggle accordion-arrow-toggle collapsed"></div>
                                    </div>
                                </div>

                                <!-- Settings Permissions -->
                                <div id="collapse-3145678" class="panel-collapse collapse" role="tabpanel"
                                    aria-labelledby="heading-3145678">
                                    <div class="panel-body">
                                        <!------------->
                                        <div class="panel-heading"
                                            ng-repeat="settingMod in permsnRuleCtrl.settingModules">
                                            <div class="label-div">
                                                <input type="hidden" name="module_name"
                                                    ng-model="permsnRuleCtrl.permissionRuleData[settingMod.key].module_name"
                                                    ng-init="permsnRuleCtrl.permissionRuleData.modules[settingMod.key].name=settingMod.label">
                                                @{{ settingMod.label }}
                                            </div>

                                            <div class="check-div col-sm-9">
                                                <div class="checkbox" ng-repeat="permsn in settingMod.permissions">
                                                    <label for="view">
                                                        <input type="checkbox" name="@{{ settingMod.key }}[]"
                                                            value="@{{ permsn }}"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.modules[settingMod.key].permissions[permsn]"
                                                            ng-disabled="permsn != 'Hide' && permsnRuleCtrl.permissionRuleData.modules[settingMod.key].permissions['Hide']">
                                                        @{{ permsn }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Settings Permissions -->

                            <!-- Individual2 Rules -->
                            <div class="individual-rules">
                                <!-- Module -->
                                <div class="panel-heading" ng-repeat="ind2Mod in permsnRuleCtrl.indModules2">
                                    <div class="heading-div">
                                        <h5 class="panel-title">
                                            <div class="label-div">
                                                <input type="hidden" name="module_name"
                                                    ng-model="permsnRuleCtrl.permissionRuleData.modules[ind2Mod.key]"
                                                    ng-init="permsnRuleCtrl.permissionRuleData.modules[ind2Mod.key].name=ind2Mod.label">
                                                @{{ ind2Mod.label }}
                                            </div>
                                        </h5>
                                    </div>

                                    <!-- Permissions -->
                                    <div class="check-div col-sm-9">
                                        <div class="checkbox" ng-repeat="permsn in ind2Mod.permissions">
                                            <label for="view">
                                                <input type="checkbox" name="@{{ ind2Mod.key }}[]"
                                                    value="@{{ permsn }}"
                                                    ng-model="permsnRuleCtrl.permissionRuleData.modules[ind2Mod.key].permissions[permsn]"
                                                    ng-disabled="permsn != 'Hide' && permsnRuleCtrl.permissionRuleData.modules[ind2Mod.key].permissions['Hide']">
                                                @{{ permsn }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Reports Permissions -->
                            <div class="panel-group" id="accordion-7544257" role="tablist" aria-multiselectable="false">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="heading-3145679">
                                        <div class="heading-div">
                                            <h5 class="panel-title">
                                                <a role="button" data-toggle="collapse" class="collapsed"
                                                    data-parent="#accordion-7544257" href="#collapse-3145679"
                                                    aria-expanded="false" aria-controls="collapse-3145679">
                                                    <div class="label-div">
                                                        <svg fill="#000000" width="17px" height="17px"
                                                            viewBox="0 0 24 24" id="down-arrow-circle"
                                                            data-name="Flat Color" xmlns="http://www.w3.org/2000/svg"
                                                            class="icon flat-color">
                                                            <circle id="primary" cx="12" cy="12" r="10"
                                                                style="fill: rgb(0, 0, 0);"></circle>
                                                            <path id="secondary"
                                                                d="M14.14,13H13V7a1,1,0,0,0-2,0v6H9.86a1,1,0,0,0-.69,1.5l2.14,3.12a.82.82,0,0,0,1.38,0l2.14-3.12A1,1,0,0,0,14.14,13Z"
                                                                style="fill: rgb(44, 169, 188);"></path>
                                                        </svg>
                                                        <input type="hidden" name="module_name"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.module_name">
                                                        Reports
                                                    </div>
                                                </a>
                                            </h5>
                                        </div>

                                        <div class="arrow-icon accordion-toggle accordion-arrow-toggle collapsed"></div>
                                    </div>
                                </div>

                                <!-- Reports Permissions -->
                                <div id="collapse-3145679" class="panel-collapse collapse" role="tabpanel"
                                    aria-labelledby="heading-3145679">
                                    <div class="panel-body">
                                        <!------------->
                                        <div class="panel-heading" ng-repeat="reprtMod in permsnRuleCtrl.reportModules">
                                            <div class="label-div">
                                                <input type="hidden" name="module_name"
                                                    ng-model="permsnRuleCtrl.permissionRuleData[reprtMod.key].module_name"
                                                    ng-init="permsnRuleCtrl.permissionRuleData.modules[reprtMod.key].name=reprtMod.label">
                                                @{{ reprtMod.label }}
                                            </div>

                                            <div class="check-div col-sm-9">
                                                <div class="checkbox" ng-repeat="permsn in reprtMod.permissions">
                                                    <label for="view">
                                                        <input type="checkbox" name="@{{ reprtMod.key }}[]"
                                                            value="@{{ permsn }}"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.modules[reprtMod.key].permissions[permsn]"
                                                            ng-disabled="permsn != 'Hide' && permsnRuleCtrl.permissionRuleData.modules[reprtMod.key].permissions['Hide']">
                                                        @{{ permsn }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Reports Permissions -->

                            <!-- DRM Service Permissions -->
                            <div class="panel-group" id="accordion-7544257" role="tablist" aria-multiselectable="false">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="heading-3145680">
                                        <div class="heading-div">
                                            <h5 class="panel-title">
                                                <a role="button" data-toggle="collapse" class="collapsed"
                                                    data-parent="#accordion-7544257" href="#collapse-3145680"
                                                    aria-expanded="false" aria-controls="collapse-3145680">
                                                    <div class="label-div">
                                                        <svg fill="#000000" width="17px" height="17px"
                                                            viewBox="0 0 24 24" id="down-arrow-circle"
                                                            data-name="Flat Color" xmlns="http://www.w3.org/2000/svg"
                                                            class="icon flat-color">
                                                            <circle id="primary" cx="12" cy="12" r="10"
                                                                style="fill: rgb(0, 0, 0);"></circle>
                                                            <path id="secondary"
                                                                d="M14.14,13H13V7a1,1,0,0,0-2,0v6H9.86a1,1,0,0,0-.69,1.5l2.14,3.12a.82.82,0,0,0,1.38,0l2.14-3.12A1,1,0,0,0,14.14,13Z"
                                                                style="fill: rgb(44, 169, 188);"></path>
                                                        </svg>
                                                        <input type="hidden" name="module_name"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.module_name">
                                                        DRM Service
                                                    </div>
                                                </a>
                                            </h5>
                                        </div>

                                        <div class="arrow-icon accordion-toggle accordion-arrow-toggle collapsed"></div>
                                    </div>
                                </div>

                                <!-- DRM Service Permissions -->
                                <div id="collapse-3145680" class="panel-collapse collapse" role="tabpanel"
                                    aria-labelledby="heading-3145680">
                                    <div class="panel-body">
                                        <!------------->
                                        <div class="panel-heading"
                                            ng-repeat="drmSrvcMod in permsnRuleCtrl.drmServiceModules">
                                            <div class="label-div">
                                                <input type="hidden" name="module_name"
                                                    ng-model="permsnRuleCtrl.permissionRuleData[drmSrvcMod.key].module_name"
                                                    ng-init="permsnRuleCtrl.permissionRuleData.modules[drmSrvcMod.key].name=drmSrvcMod.label">
                                                @{{ drmSrvcMod.label }}
                                            </div>

                                            <div class="check-div col-sm-9">
                                                <div class="checkbox" ng-repeat="permsn in drmSrvcMod.permissions">
                                                    <label for="view">
                                                        <input type="checkbox" name="@{{ drmSrvcMod.key }}[]"
                                                            value="@{{ permsn }}"
                                                            ng-model="permsnRuleCtrl.permissionRuleData.modules[drmSrvcMod.key].permissions[permsn]"
                                                            ng-disabled="permsn != 'Hide' && permsnRuleCtrl.permissionRuleData.modules[drmSrvcMod.key].permissions['Hide']">
                                                        @{{ permsn }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of DRM Service Permissions -->

                            <!-- Individual3 Rules -->
                            <div class="individual-rules" style="margin-bottom: 20px;">
                                <!-- Module -->
                                <div class="panel-heading" ng-repeat="ind3Mod in permsnRuleCtrl.indModules3">
                                    <div class="heading-div">
                                        <h5 class="panel-title">
                                            <div class="label-div">
                                                <input type="hidden" name="module_name"
                                                    ng-model="permsnRuleCtrl.permissionRuleData.modules[ind3Mod.key]"
                                                    ng-init="permsnRuleCtrl.permissionRuleData.modules[ind3Mod.key].name=ind3Mod.label">
                                                @{{ ind3Mod.label }}
                                            </div>
                                        </h5>
                                    </div>

                                    <!-- Permissions -->
                                    <div class="check-div col-sm-9">
                                        <div class="checkbox" ng-repeat="permsn in ind3Mod.permissions">
                                            <label for="@{{ ind3Mod.key }}">
                                                <input type="checkbox" name="@{{ ind3Mod.key }}[]"
                                                    value="@{{ permsn }}"
                                                    ng-model="permsnRuleCtrl.permissionRuleData.modules[ind3Mod.key].permissions[permsn]"
                                                    ng-disabled="permsn != 'Hide' && permsnRuleCtrl.permissionRuleData.modules[ind3Mod.key].permissions['Hide']">
                                                @{{ permsn }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- button group -->
                            <div class="form-group text-center">
                                <button type="submit" class="btn btn-success" id="permissionruleadd">
                                    <strong>Add</strong>
                                </button>&nbsp;&nbsp;
                                {{-- <button type="button" class="btn btn-danger"
                                    onclick="deleteApiUser({{ request()->id }})">
                                    <strong>Remove</strong>
                                </button>&nbsp;&nbsp; --}}
                                <button type="button" class="btn btn-default"
                                    ng-click="permsnRuleCtrl.cancelPermissionRule($event)">
                                    <strong>Cancel</strong>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('adminview/assets/js/classieSidebarEffects.js') }}"></script>
    <script src="{{ asset('adminview/assets/js/classieSidebarEffectsDirective.js') }}"></script>
    <script src="{{ asset('adminview/assets/js/canvasjs.min.js') }}"></script>
    <script src="{{ asset('adminview/assets/js/requestFactory.js') }}"></script>
    <script src="{{ asset('adminview/assets/js/gridView.js') }}"></script>
    <script src="{{ asset('adminview/assets/js/permission-rules/index.js') }}"></script>
    <script src="{{ asset('adminview/assets/js/common/common.js') }}"></script>
    <script src="{{ asset('adminview/assets/js/grid.js') }}"></script>
    <script src="{{ asset('adminview/assets/js/common/directive.js') }}"></script>
@endsection