@extends('dashboard.admin.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                {{ trans('roles.permissions') }}
            </h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">{{ trans('Toolbar.home') }}</a>
                </li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ trans('Toolbar.user') }}</li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('admin.UserManagement.roles.index') }}" class="text-muted text-hover-primary">{{ trans('Toolbar.roles') }}</a>
                </li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ $role->title }}</li>
            </ul>
        </div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('admin.UserManagement.roles.index') }}" class="btn btn-sm btn-light">
                <i class="ki-duotone ki-arrow-left fs-4"><span class="path1"></span><span class="path2"></span></i>
                {{ trans('roles.Close') }}
            </a>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @php
            $title = $role->getTranslations('title');
            $titleEn = $title['en'] ?? $role->getTranslation('title', 'en', false) ?? '';
            $titleAr = $title['ar'] ?? $role->getTranslation('title', 'ar', false) ?? '';
            $selectedCount = count($role_permissions);
            $totalCount = $permissionGroups->sum(fn ($group) => $group['permissions']->count());
        @endphp

        <form action="{{ route('admin.UserManagement.roles.update', $role->id) }}" method="POST" class="form">
            @csrf
            @method('PUT')

            <input type="hidden" name="id" value="{{ $role->id }}">
            <input type="hidden" name="title_en" value="{{ $titleEn }}">
            <input type="hidden" name="title_ar" value="{{ $titleAr }}">
            <input type="hidden" name="name" value="{{ $role->name }}">
            <input type="hidden" name="guard_name" value="{{ $role->guard_name }}">

            <div class="card card-flush mb-6">
                <div class="card-body py-5">
                    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-5">
                        <div class="d-flex align-items-center">
                            <div class="symbol symbol-60px me-5">
                                <span class="symbol-label bg-light-primary">
                                    <i class="ki-duotone ki-shield-tick fs-2x text-primary">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </span>
                            </div>
                            <div>
                                <h3 class="fw-bold mb-2">{{ $role->title }}</h3>
                                <div class="d-flex flex-wrap gap-2">
                                    <span class="badge badge-light-secondary">{{ $role->name }}</span>
                                    <span class="badge badge-light-info">{{ $role->guard_name }}</span>
                                    <span class="badge badge-light-success">
                                        <span data-selected-permissions-count>{{ $selectedCount }}</span>/{{ $totalCount }}
                                        {{ trans('roles.permissions') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-column flex-sm-row gap-2">
                            <button type="button" class="btn btn-light-primary" data-permission-select-all>
                                <i class="ki-duotone ki-check-square fs-4"><span class="path1"></span><span class="path2"></span></i>
                                {{ trans('roles.select_all') }}
                            </button>
                            <button type="button" class="btn btn-light" data-permission-clear-all>
                                <i class="ki-duotone ki-cross-square fs-4"><span class="path1"></span><span class="path2"></span></i>
                                {{ trans('roles.clear_all') }}
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="ki-duotone ki-check fs-4"><span class="path1"></span><span class="path2"></span></i>
                                {{ trans('roles.Save') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card card-flush">
                <div class="card-header align-items-center py-4">
                    <div class="card-title">
                        <div class="d-flex align-items-center position-relative">
                            <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-4">
                                <span class="path1"></span><span class="path2"></span>
                            </i>
                            <input type="text"
                                   class="form-control form-control-solid w-250px ps-12"
                                   placeholder="{{ trans('roles.search_permissions') }}"
                                   data-permission-search>
                        </div>
                    </div>
                </div>
                <div class="card-body pt-0">
                    @include('dashboard.admin.UserManagement.roles.partials.permission-groups', [
                        'groupPrefix' => 'role-permissions-' . $role->id,
                        'permissionModules' => $permissionModules,
                        'selectedPermissions' => old('permissions', $role_permissions),
                    ])
                </div>
            </div>
        </form>
    </div>
@endsection

@section('js')
    <script>
        function updatePermissionGroupState(groupContainer) {
            const groupToggle = groupContainer.querySelector('.permission-group-toggle');
            const permissionItems = groupContainer.querySelectorAll('.permission-item');
            const checkedItems = groupContainer.querySelectorAll('.permission-item:checked');
            const groupCounter = groupContainer.querySelector('[data-permission-group-count]');

            if (!groupToggle || permissionItems.length === 0) {
                return;
            }

            groupToggle.checked = permissionItems.length === checkedItems.length;
            groupToggle.indeterminate = checkedItems.length > 0 && checkedItems.length < permissionItems.length;

            if (groupCounter) {
                groupCounter.textContent = checkedItems.length;
            }
        }

        function updatePermissionModuleState(moduleContainer) {
            const moduleToggle = moduleContainer.querySelector('.permission-module-toggle');
            const permissionItems = moduleContainer.querySelectorAll('.permission-item');
            const checkedItems = moduleContainer.querySelectorAll('.permission-item:checked');
            const moduleCounter = moduleContainer.querySelector('[data-permission-module-count]');

            if (!moduleToggle || permissionItems.length === 0) {
                return;
            }

            moduleToggle.checked = permissionItems.length === checkedItems.length;
            moduleToggle.indeterminate = checkedItems.length > 0 && checkedItems.length < permissionItems.length;

            if (moduleCounter) {
                moduleCounter.textContent = checkedItems.length;
            }
        }

        function updateSelectedPermissionsCount() {
            const counter = document.querySelector('[data-selected-permissions-count]');

            if (counter) {
                counter.textContent = document.querySelectorAll('.permission-item:checked').length;
            }
        }

        function initializePermissionGroups(root = document) {
            root.querySelectorAll('[data-permission-group]').forEach(updatePermissionGroupState);
            root.querySelectorAll('[data-permission-module]').forEach(updatePermissionModuleState);
            updateSelectedPermissionsCount();
        }

        document.addEventListener('change', function (event) {
            const moduleToggle = event.target.closest('.permission-module-toggle');

            if (moduleToggle) {
                const moduleContainer = moduleToggle.closest('[data-permission-module]');

                moduleContainer.querySelectorAll('.permission-item').forEach(function (permissionItem) {
                    permissionItem.checked = moduleToggle.checked;
                });

                moduleContainer.querySelectorAll('[data-permission-group]').forEach(updatePermissionGroupState);
                updatePermissionModuleState(moduleContainer);
                updateSelectedPermissionsCount();
                return;
            }

            const groupToggle = event.target.closest('.permission-group-toggle');

            if (groupToggle) {
                const groupContainer = groupToggle.closest('[data-permission-group]');

                groupContainer.querySelectorAll('.permission-item').forEach(function (permissionItem) {
                    permissionItem.checked = groupToggle.checked;
                });

                updatePermissionGroupState(groupContainer);
                const moduleContainer = groupContainer.closest('[data-permission-module]');
                if (moduleContainer) {
                    updatePermissionModuleState(moduleContainer);
                }
                updateSelectedPermissionsCount();
                return;
            }

            const permissionItem = event.target.closest('.permission-item');

            if (permissionItem) {
                const groupContainer = permissionItem.closest('[data-permission-group]');
                updatePermissionGroupState(groupContainer);

                const moduleContainer = permissionItem.closest('[data-permission-module]');
                if (moduleContainer) {
                    updatePermissionModuleState(moduleContainer);
                }

                updateSelectedPermissionsCount();
            }
        });

        document.querySelector('[data-permission-select-all]')?.addEventListener('click', function () {
            document.querySelectorAll('.permission-item').forEach(function (permissionItem) {
                permissionItem.checked = true;
            });

            initializePermissionGroups();
        });

        document.querySelector('[data-permission-clear-all]')?.addEventListener('click', function () {
            document.querySelectorAll('.permission-item').forEach(function (permissionItem) {
                permissionItem.checked = false;
            });

            initializePermissionGroups();
        });

        document.querySelector('[data-permission-search]')?.addEventListener('input', function (event) {
            const search = event.target.value.trim().toLowerCase();

            document.querySelectorAll('[data-permission-module]').forEach(function (module) {
                let visibleGroups = 0;

                module.querySelectorAll('[data-permission-group]').forEach(function (group) {
                    let visibleItems = 0;

                    group.querySelectorAll('[data-permission-item-wrap]').forEach(function (item) {
                        const isVisible = item.textContent.toLowerCase().includes(search);

                        item.classList.toggle('d-none', !isVisible);
                        visibleItems += isVisible ? 1 : 0;
                    });

                    const groupVisible = search === '' || visibleItems > 0;
                    group.classList.toggle('d-none', !groupVisible);
                    visibleGroups += groupVisible ? 1 : 0;
                });

                module.classList.toggle('d-none', search !== '' && visibleGroups === 0);
            });
        });

        initializePermissionGroups();
    </script>
@endsection