@extends('layout.default')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/jquery.treeview.min.css') }}">
    <style>
        .permissions-tree .permissions-item {
            background-color: #f6f8fb;
            border-radius: 4px;
            margin-bottom: 10px;
            padding: 0;
        }

        .permissions-tree .permissions-item .permissions-body,
        .permissions-tree .permissions-item .permissions-header {
            padding: 10px;
        }

        .permissions-tree .permissions-item .permissions-body {
            padding: 10px 20px;
        }

        .permissions-tree .permissions-item .permissions-header {
            background-color: #f2f5f7;
            border-bottom: 1px solid #cfd7e0;
        }

        .permissions-tree .daredevel-tree {
            border: none !important;
            border-left: var(--bb-border-width) solid var(--bb-border-color) !important;
            padding-top: 5px;
        }

        .permissions-tree .daredevel-tree > div {
            padding-left: 10px;
        }

        .permissions-tree .daredevel-tree:not(:has(ul)) > .daredevel-tree-anchor {
            display: none;
        }

        .permissions-tree .daredevel-tree-anchor {
            top: 0.5rem !important;
        }

        .permissions-tree .single-node li {
            margin: 0;
            padding: 3px 0 3px 18px;
        }

        .permissions-tree .form-check .form-check-input.check-blue:checked {
            background-color: #206bc4;
        }

        .permissions-tree .form-check .form-check-input.check-blue:focus {
            border-color: #206bc4;
        }

        .permissions-tree .form-check .form-check-input.check-danger:checked {
            background-color: #e73f3f;
        }

        .permissions-tree .form-check .form-check-input.check-danger:focus {
            border-color: #e73f3f;
        }

        .permissions-tree .form-check .form-check-input.check-success:checked {
            background-color: #2fb344;
        }

        .permissions-tree .form-check .form-check-input.check-success:focus {
            border-color: #2fb344;
        }

        .permissions-tree .form-check .form-check-input.check-yellow:checked {
            background-color: #efc656;
        }

        .permissions-tree .form-check .form-check-input.check-yellow:focus {
            border-color: #efc656;
        }

        .permissions-tree .form-check .form-check-input.check-secondary:checked {
            background-color: #6c7a91;
        }

        .permissions-tree .form-check .form-check-input.check-secondary:focus {
            border-color: #6c7a91;
        }


        .badge {
            align-items: center;
            background: #eef3f6;
            border: 1px solid transparent;
            font-weight: 600;
            justify-content: center;
            letter-spacing: 0.04em;
            min-width: 1.35714285em;
            overflow: hidden;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            vertical-align: bottom;
        }

        a.badge {
            color: #fff;
        }

        .badge .avatar {
            box-sizing: content-box;
            height: 1.25rem;
            margin: 0 0.5rem 0 -0.5rem;
            width: 1.25rem;
        }

        .badge .icon {
            stroke-width: 2;
            font-size: 1rem;
            height: 1em;
            width: 1em;
        }

        .badge-empty,
        .badge:empty {
            border-radius: 100rem;
            display: inline-block;
            height: 0.5rem;
            min-height: auto;
            min-width: 0;
            padding: 0;
            vertical-align: baseline;
            width: 0.5rem;
        }

        .bg-primary {
            --bb-bg-opacity: 1;
            background-color: rgba(32, 107, 196, 1) !important;
        }

        .bg-primary-lt {
            --bb-bg-opacity: 1;
            --bb-text-opacity: 1;
            background-color: rgba(233, 240, 249, 1) !important;
            color: rgba(32, 107, 196, 1) !important;
        }

        .bg-success {
            --bb-bg-opacity: 1;
            background-color: rgba(47, 179, 68, 1) !important;
        }

        .bg-success-lt {
            --bb-bg-opacity: 1;
            --bb-text-opacity: 1;
            background-color: rgba(234, 247, 236, 1) !important;
            color: rgba(47, 179, 68, 1) !important;
        }

        .bg-yellow {
            --bb-bg-opacity: 1;
            background-color: rgba(245, 159, 0, 1) !important;
        }

        .bg-yellow-lt {
            --bb-bg-opacity: 1;
            --bb-text-opacity: 1;
            background-color: rgba(254, 245, 230, 1) !important;
            color: rgba(245, 159, 0, 1) !important;
        }

    </style>
@endsection
@section('subheaderRightToolbar')
    @PermissionsCan(groupPermissionName('role_permission.index'))
    <a href="{{ route('role_permission.index') }}"
       class="btn btn-light-primary font-weight-bolder mr-2"><i
                class="ki ki-long-arrow-back icon-sm"></i>Back</a>
    @endPermissionsCan
    @PermissionsCan(groupPermissionName('role_permission.update'))
    <div class="btn-group">
        <button type="submit" class="btn btn-primary font-weight-bolder" form="role_edit_form">
            <i class="ki ki-check icon-sm"></i><u>S</u>ave
        </button>
    </div>
    @endPermissionsCan
@endsection
@section('content')
    <form class="form" id="role_edit_form" data-method="put"
          data-url="{{ route('role_permission.update', $role->id) }}">
        <div class="card card-custom card-sticky" id="kt_page_sticky_card">
            <div class="card-body" id="load-section-js">
                <div class="form-container" id="form-container-js">
                    <div class="row fv-row form-group mb-6">
                        <div class="col-lg-4"></div>
                        <div class="col-lg-4">
                            <label class="form-control-label" for="role">
                                Name: <span class="text-danger">*</span>
                            </label>
                            <input type="text"
                                   class="form-control form-control-sm form-control-solid"
                                   id="role" name="name" placeholder="Role name"
                            value="{{ $role->name }}" readonly/>
                            <div class="fv-plugins-message-container invalid-feedback">
                            </div>
                        </div>
                        <div class="col-lg-4"></div>
                    </div>
                    <div class="separator separator-solid my-7"></div>
                    <div class="row justify-content-center mb-5">
                        <div class="col-md-12">
                            <div class="d-flex justify-content-between">
                                {{--<div class="form-check form-switch form-check-custom form-check-solid me-10 mt-3">
                                    <input class="form-check-input allTree"
                                           type="checkbox" id="allTreeChecked"/>
                                    <label class="form-check-label"
                                           for="allTreeChecked">
                                        All Permissions
                                    </label>
                                </div>--}}
                                <div class="checkbox-inline">
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" id="allTreeChecked" name="Checkboxes2"
                                               class="form-check-input allTree">
                                        <span></span>
                                        All Permissions
                                    </label>
                                </div>

                                <div id="sidetreecontrol" class="ms-3">
                                    <a href="?#" class="btn btn-secondary btn-sm">
                                        <i class="fa fa-angle-double-up"
                                           aria-hidden="true"></i>
                                        Collapse all
                                    </a> |
                                    <a href="?#" class="btn btn-info btn-sm">
                                        <i class="fa fa-angle-double-down"
                                           aria-hidden="true"></i>
                                        Expand all
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="permissions-tree" id="checkboxes-permisstions"
                                 data-name="foo">
                                @foreach ($permission_tree as $module_key => $module)
                                    <ul class="parent_tree m-0 p-0 list-unstyled"
                                        id="{{ 'node' . $module_key }}">
                                        <li class="permissions-item list-unstyled">
                                            <div class="permissions-header">
                                                <div class="checkbox-inline">
                                                    <label class="checkbox">
                                                        <input type="checkbox" id="checkbox_one_{{ $module_key }}"
                                                               name="flags[]" value="{{ $module['flag'] ?? '' }}"
                                                               class="form-check-input check-success"
                                                               @if (!empty($active) and recursiveArraySearchByKey($module['flag'], $active)) checked @endif>
                                                        <span></span>
                                                        {{ $module['name'] ?? '' }}
                                                    </label>
                                                </div>
                                            </div>
                                            @if (array_key_exists('children', $module) and count($module['children']) > 0)
                                                @include(
                                                    'rolepermission::permission-tree',
                                                    [
                                                        'baseKey' => $module_key,
                                                        'childPermissions' =>
                                                            $module['children'],
                                                    ]
                                                )
                                            @endif
                                        </li>
                                    </ul>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

{{-- Scripts Section --}}
@section('scripts')
    {{-- page scripts --}}
    <script type="text/javascript" src="{{ asset('js/modules/role_permission/edit.js?=v'.time()) }}"></script>
    <script type="text/javascript" src="{{ asset('js/modules/role_permission/waterfall.min.js?=v'.time()) }}"></script>

    <script src="{{ asset('js/jquery.treeview.min.js') }}"></script>
    <script src="{{ asset('js/check-uncheck.js') }}"></script>
@endsection