@section('title', 'Permission')
@extends('admin.layouts.app')

@push('style')
<link rel="stylesheet" href="{{asset('assets/css/main.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/color_skins.css')}}">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@endpush



@section('content')
<section class="content home">
    <div class="block-header">
        <!-- Start Content-->
        <div class="container-fluid">

            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb mb-4">
                                <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}">Krushley</a></li>
                                <li class="breadcrumb-item"><a href="{{route('admin-manage_sub-admin')}}">Manage Sub-Admin</a></li>
                                <li class="breadcrumb-item active">Permission</li>
                            </ol>
                        </div>
                        <!-- <h4 class="page-title">PRODUCT LISTING</h4> -->
                    </div>
                </div>
            </div>

            <div class="body">

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <a class="btn btn-white float-left ml-3 mt-2" href="{{ route('admin-manage_sub-admin') }}">
                                <i class="material-icons text-muted">arrow_back</i>
                            </a>
                            <div class="card-body mt-4">

                                <form class="form" name="updateUser" id="updateUser" method="post" action="{{route('admin-manage_sub-admin.store_permission',['id' => Crypt::encrypt($sub_admin->id)])}}" enctype="multipart/form-data">
                                    @csrf

                                    @php
                                    $permissions = $sub_admin->getPermissions($sub_admin->id);
                                    @endphp

                                    <div class="row">
                                        @foreach ($menus as $menu)
                                        <div class="col-sm-12 col-lg-6 module-box">
                                            <h4 class="border border-bottom mt-4 mb-4">{{str_replace("List"," ", $menu->manager_name)}}</h4>

                                            @if (!empty($menu->routes))
                                            @php
                                            $checked = '';
                                            if( isset($permissions[$menu->id]) && ($permissions[$menu->id] == $menu->routes) ){
                                            $checked = 'checked="checked"';
                                            }
                                            @endphp
                                            <div class="col-sm-4 col-lg-6 col-md-3 mt-3">
                                                <div class="checkbox checkbox-custom">
                                                    <input id="permission{{$menu->id}}" class="menu-checkbox" type="checkbox" name="{{'permissions['.$menu->id.']'}}" value="{{$menu->routes}}" {{$checked}}>
                                                    <label for="permission{{$menu->id}}">
                                                        {{$menu->manager_name}}
                                                    </label>
                                                </div>
                                            </div>
                                            @endif

                                            @foreach ($menu->getChildMenus($menu->id) as $key => $value)
                                            @php
                                            $checked = '';
                                            if (isset($permissions[$value->id]) && ($permissions[$value->id] == $value->routes)) {
                                            $checked = 'checked="checked"';
                                            }
                                            @endphp
                                            <div class="col-sm-4 col-lg-6 col-md-3 mt-3">
                                                <div class="checkbox checkbox-custom ml-3">
                                                    <input id="permission{{$value->id}}" class="sub-menu-checkbox" type="checkbox" name="{{'permissions['.$value->id.']'}}" value="{{$value->routes}}" {{$checked}}>
                                                    <label for="permission{{$value->id}}">
                                                        {{$value->manager_name}}
                                                    </label>
                                                </div>
                                            </div>

                                            <!-- Check if the sub-child menus have sub-child menus -->
                                            @if ($value->getChildMenus($value->id)->count() > 0)
                                            <div class="col-sm-12">
                                                @foreach ($value->getChildMenus($value->id) as $subKey => $subValue)
                                                @php
                                                $subChecked = '';
                                                if (isset($permissions[$subValue->id]) && ($permissions[$subValue->id] == $subValue->routes)) {
                                                $subChecked = 'checked="checked"';
                                                }
                                                @endphp
                                                <div class="col-sm-4 col-lg-6 col-md-3 mt-3 ml-4">
                                                    <div class="checkbox checkbox-custom">
                                                        <input id="permission{{$subValue->id}}" class="sub-menu-checkbox" type="checkbox" name="{{'permissions['.$subValue->id.']'}}" value="{{$subValue->routes}}" {{$subChecked}}>
                                                        <label for="permission{{$subValue->id}}">
                                                            {{$subValue->manager_name}}
                                                        </label>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                            @endif
                                            @endforeach
                                        </div>
                                        @endforeach
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-offset-3 col-sm-8">
                                            <button type="submit" class="btn btn-primary waves-effect waves-light">
                                                Save
                                            </button>
                                            <!-- <a href="" type="submit">Cancel</a> -->
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div> <!-- end card-->
                    </div> <!-- end col-->
                </div>

            </div>

        </div>
    </div>
</section>
@endsection


@push('script')
<script src="{{asset('assets/bundles/libscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('assets/bundles/vendorscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->
<script src="{{asset('assets/bundles/mainscripts.bundle.js')}}"></script><!-- Custom Js -->
<script src="{{asset('assets/js/pages/forms/form-validation.js')}}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
    // Function to handle parent and child checkboxes
    function handleParentChildCheckboxes() {
        // Select all elements with the class "menu-checkbox"
        const menuCheckboxes = document.querySelectorAll('.menu-checkbox');

        // Loop through all menu checkboxes
        menuCheckboxes.forEach(menuCheckbox => {
            menuCheckbox.addEventListener('change', function() {
                // Select the closest module-box (parent div) containing the menu-checkbox
                const parentModuleBox = this.closest('.module-box');

                // Select all child checkboxes within the parent module-box
                const childCheckboxes = parentModuleBox.querySelectorAll('.sub-menu-checkbox');

                // Set the state of all child checkboxes to be the same as the parent checkbox
                childCheckboxes.forEach(childCheckbox => {
                    childCheckbox.checked = this.checked;
                });
            });
        });

        // Select all elements with the class "sub-menu-checkbox"
        const subMenuCheckboxes = document.querySelectorAll('.sub-menu-checkbox');

        // Loop through all sub-menu checkboxes
        subMenuCheckboxes.forEach(subMenuCheckbox => {
            subMenuCheckbox.addEventListener('change', function() {
                // Select the closest module-box (parent div) containing the sub-menu-checkbox
                const parentModuleBox = this.closest('.module-box');

                // Select the parent checkbox within the parent module-box
                const parentCheckbox = parentModuleBox.querySelector('.menu-checkbox');

                // Check if any child checkbox is selected, if so, check the parent checkbox
                let anyChildChecked = false;
                subMenuCheckboxes.forEach(childCheckbox => {
                    if (childCheckbox.checked) {
                        anyChildChecked = true;
                    }
                });
                parentCheckbox.checked = anyChildChecked;
            });
        });
    }


    // Call the function on page load
    window.addEventListener('load', handleParentChildCheckboxes);
</script>

@endpush