@extends('layouts.app')
@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                        Permission List</h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-hover-primary text-muted">Permission Management</li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-hover-primary text-muted">Permissions</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <form id="kt_add_permission_form" class="form d-flex flex-column flex-lg-row"
            data-action="{{ route('role.permission.add') }}">
            @csrf
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-xxl">
                    <!--begin::Card-->
                    <div class="card">

                        <!--begin::Card header-->
                        <div class="card-header bpermission-0 pt-6">
                            <!--begin::Card title-->
                            <select class="form-select form-select-solid mb-3" id="role" name="role"
                                data-placeholder="Please choose role to see its permission">
                                <option value="">Select role</option>

                                @foreach ($roleData as $role)
                                    <option value="{{ $role->id }}" {{ $roleId == $role->id ? 'selected' : '' }}>
                                        {{ $role->name }}
                                    </option>
                                @endforeach
                            </select>
                            <!--begin::Card title-->
                            <br><br>
                        </div>
                        <br>

                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body py-4">

                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="checkAllPermissions">
                                <label class="form-check-label" for="checkAllPermissions">
                                    Check All Permissions
                                </label>
                            </div>
                            <div class="form-group row ">
                                <div class="col-sm-12 ">
                                    <div class="row ml-3">
                                        @php $columnCount = 0; @endphp
                                        @foreach ($permissions as $group => $groupPermissions)
                                            @if ($columnCount % 3 == 0 && $columnCount != 0)
                                    </div>
                                    <div class="row">
                                        @endif
                                        <div class="col-md-4">
                                            <div class="mt-3">
                                                <div class="role-list-dsgn">
                                                    <input class="form-check-input group-check" type="checkbox"
                                                        id="checkGroup_{{ $loop->index }}">
                                                    <h5 class="mb-0">{{ ucwords(str_replace('_', ' ', $group)) }}</h5>

                                                </div>
                                                @foreach ($groupPermissions as $permission)
                                                    <div class="form-check prms-rm-check">
                                                        <input class="form-check-input permission-check" type="checkbox"
                                                            name="permissions[]" value="{{ $permission->id }}"
                                                            id="permission_{{ $permission->id }}"
                                                            data-group="{{ $loop->parent->index }}">
                                                        <label class="form-check-label"
                                                            for="permission_{{ $permission->id }}">
                                                            {{ $permission->name }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        @php $columnCount++; @endphp
                                        @endforeach
                                    </div>
                                </div>
                            </div><br>
                            <div class="d-flex justify-content-end">

                                <!--begin::Button-->
                                @can('role_permission_addEdit')
                                <button type="submit" id="kt_add_permission_submit" class="btn btn-primary">
                                    <span class="indicator-label">Save Changes</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                                @endcan
                                <!--end::Button-->
                            </div>
                        </div>
                        <!--end::Card body-->
        </form>
    </div>
    <!--end::Card-->
    </div>




    </div>
    </form>
    <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
@endsection
@push('script')
    <script src="{{ asset('assets/js/permission/add.js') }}"></script>

<script>
    function fetchPermissionsForRole(roleId) {
        fetch(`{{ route('role.permission.get') }}?role_id=${roleId}`)
            .then(response => response.json())
            .then(data => {
                resetPermissions();
                data.permissions.forEach(permissionId => {
                    const permissionCheckbox = document.getElementById(`permission_${permissionId}`);
                    if (permissionCheckbox) {
                        permissionCheckbox.checked = true;
                    }
                });
                updateGroupAndAllChecks();
            });
    }

    function resetPermissions() {
        const permissionChecks = document.querySelectorAll('.permission-check');
        const groupChecks = document.querySelectorAll('.group-check');
        const checkAllPermissions = document.getElementById('checkAllPermissions');

        permissionChecks.forEach(permissionCheck => permissionCheck.checked = false);
        groupChecks.forEach(groupCheck => groupCheck.checked = false);
        checkAllPermissions.checked = false;
    }

    function updateGroupAndAllChecks() {
        const groupChecks = document.querySelectorAll('.group-check');
        const permissionChecks = document.querySelectorAll('.permission-check');
        const checkAllPermissions = document.getElementById('checkAllPermissions');

        groupChecks.forEach(groupCheck => {
            const groupIndex = groupCheck.id.split('_')[1];
            const groupPermissions = document.querySelectorAll(`.permission-check[data-group="${groupIndex}"]`);
            const allChecked = Array.from(groupPermissions).every(permission => permission.checked);
            groupCheck.checked = allChecked;
        });

        const allPermissionsChecked = Array.from(permissionChecks).every(permission => permission.checked);
        checkAllPermissions.checked = allPermissionsChecked;
    }

    document.addEventListener('DOMContentLoaded', function() {
        const checkAllPermissions = document.getElementById('checkAllPermissions');
        const groupChecks = document.querySelectorAll('.group-check');
        const permissionChecks = document.querySelectorAll('.permission-check');
        const roleSelect = document.getElementById('role');

        checkAllPermissions.addEventListener('change', function() {
            const isChecked = this.checked;
            groupChecks.forEach(groupCheck => groupCheck.checked = isChecked);
            permissionChecks.forEach(permissionCheck => permissionCheck.checked = isChecked);
        });

        groupChecks.forEach(groupCheck => {
            groupCheck.addEventListener('change', function() {
                const groupIndex = this.id.split('_')[1];
                const groupPermissions = document.querySelectorAll(`.permission-check[data-group="${groupIndex}"]`);
                groupPermissions.forEach(permissionCheck => permissionCheck.checked = this.checked);
            });
        });

        permissionChecks.forEach(permissionCheck => {
            permissionCheck.addEventListener('change', function() {
                const groupIndex = this.dataset.group;
                const groupPermissions = document.querySelectorAll(`.permission-check[data-group="${groupIndex}"]`);
                const groupCheck = document.getElementById(`checkGroup_${groupIndex}`);

                // Auto-check the "view" permission if any other permission is checked
                autoCheckViewPermission(groupIndex);

                // Check if all permissions in the group are checked
                const allChecked = Array.from(groupPermissions).every(permission => permission.checked);
                groupCheck.checked = allChecked;

                // Check if all permissions are checked
                const allPermissionsChecked = Array.from(permissionChecks).every(permission => permission.checked);
                checkAllPermissions.checked = allPermissionsChecked;
            });
        });

        function autoCheckViewPermission(groupIndex) {
            const groupPermissions = document.querySelectorAll(`.permission-check[data-group="${groupIndex}"]`);
            groupPermissions.forEach(permissionCheck => {
                if (permissionCheck.checked && !permissionCheck.id.includes('View')) {
                    const viewPermission = document.querySelector(`.permission-check[id*="View"][data-group="${groupIndex}"]`);
                    if (viewPermission) {
                        viewPermission.checked = true;
                    }
                }
            });
        }

        roleSelect.addEventListener('input', function() {
            const roleId = this.value;
            if (roleId) {
                fetchPermissionsForRole(roleId);
            } else {
                resetPermissions();
            }
        });
    });

    $(document).ready(function() {
        setTimeout(function() {
            var roleId = $('#role').val(); // Ensure the role ID is correctly retrieved
            fetchPermissionsForRole(roleId);
        }, 100); // 3000 milliseconds = 3 seconds
    });
</script>

@endpush