@csrf
@php
    $selected = collect(old('permissions', $rolePermissions ?? []))->map(fn ($value) => (int) $value)->all();
    $isEdit = isset($role);
    $selectedCount = count($selected);
    $totalPermissions = $permissions->flatten()->count();
@endphp

@if($errors->any())
    <div class="alert alert-danger">
        <div class="fw-semibold mb-1">{{ __('admin.roles.errors_heading') }}</div>
        <ul class="mb-0 ps-3">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="row g-4">
    <div class="col-xl-8">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-transparent border-bottom-0">
                <h4 class="mb-1">{{ __('admin.roles.form_title') }}</h4>
                <p class="text-muted mb-0 small">{{ __('admin.roles.form_hint') }}</p>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">{{ __('admin.roles.fields.name') }}</label>
                        <input
                            type="text"
                            name="name"
                            id="role-name"
                            class="form-control @error('name') is-invalid @enderror"
                            value="{{ old('name', $role->name ?? '') }}"
                            @if($isEdit) readonly @endif
                            placeholder="project_manager"
                        >
                        <small class="text-muted">{{ __('admin.roles.name_hint') }}</small>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">{{ __('admin.roles.fields.display_name_en') }}</label>
                        <input
                            type="text"
                            name="display_name_en"
                            id="display-name-en"
                            class="form-control @error('display_name_en') is-invalid @enderror"
                            value="{{ old('display_name_en', $role->display_name_en ?? '') }}"
                            placeholder="Project Manager"
                        >
                        @error('display_name_en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">{{ __('admin.roles.fields.display_name_ar') }}</label>
                        <input
                            type="text"
                            name="display_name_ar"
                            class="form-control @error('display_name_ar') is-invalid @enderror"
                            value="{{ old('display_name_ar', $role->display_name_ar ?? '') }}"
                            placeholder="مدير المشروع"
                        >
                        @error('display_name_ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">{{ __('admin.roles.fields.description_en') }}</label>
                        <textarea name="description_en" rows="4" class="form-control @error('description_en') is-invalid @enderror" placeholder="{{ __('admin.roles.description_placeholder_en') }}">{{ old('description_en', $role->description_en ?? '') }}</textarea>
                        @error('description_en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">{{ __('admin.roles.fields.description_ar') }}</label>
                        <textarea name="description_ar" rows="4" class="form-control @error('description_ar') is-invalid @enderror" placeholder="{{ __('admin.roles.description_placeholder_ar') }}">{{ old('description_ar', $role->description_ar ?? '') }}</textarea>
                        @error('description_ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom-0">
                <h4 class="mb-1">{{ __('admin.roles.blueprint_title') }}</h4>
                <p class="text-muted mb-0 small">{{ __('admin.roles.blueprint_hint') }}</p>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    @foreach($blueprints as $blueprint)
                        <div class="border rounded p-3 bg-light-secondary border-secondary-subtle">
                            <div class="d-flex align-items-start gap-3">
                                <div class="icon-shape bg-secondary flex-shrink-0"><i class="{{ $blueprint['icon'] }}"></i></div>
                                <div>
                                    <h6 class="mb-1">{{ $blueprint['title'] }}</h6>
                                    <p class="text-muted mb-0 small">{{ $blueprint['description'] }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent border-bottom-0">
                <h4 class="mb-1">{{ __('admin.roles.quick_tips_title') }}</h4>
                <p class="text-muted mb-0 small">{{ __('admin.roles.quick_tips_hint') }}</p>
            </div>
            <div class="card-body">
                <ul class="mb-0 ps-3 text-muted small d-grid gap-2">
                    <li>{{ __('admin.roles.quick_tips.auto_name') }}</li>
                    <li>{{ __('admin.roles.quick_tips.use_groups') }}</li>
                    <li>{{ __('admin.roles.quick_tips.keep_minimum') }}</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2 bg-transparent">
                <div>
                    <h4 class="mb-1">{{ __('admin.roles.fields.permissions') }}</h4>
                    <p class="text-muted mb-0 small">{{ __('admin.roles.permissions_hint') }}</p>
                </div>
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <span class="badge bg-light-primary text-primary border border-primary-subtle" id="selected-permissions-count">
                        {{ trans_choice('admin.roles.metrics.permissions_count', $selectedCount, ['count' => $selectedCount]) }}
                    </span>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="select-all-permissions">{{ __('admin.roles.actions.select_all_permissions') }}</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="clear-all-permissions">{{ __('admin.roles.actions.clear_permissions') }}</button>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-3 mb-3">
                    <div class="col-lg-8">
                        <label class="form-label">{{ __('admin.roles.search_permissions') }}</label>
                        <input type="text" id="permissions-search" class="form-control" placeholder="{{ __('admin.roles.search_permissions_placeholder') }}">
                    </div>
                    <div class="col-lg-4">
                        <label class="form-label">{{ __('admin.roles.metrics.permission_groups') }}</label>
                        <div class="form-control bg-light d-flex align-items-center">{{ $permissions->count() }} / {{ $totalPermissions }}</div>
                    </div>
                </div>

                <div class="row g-3" id="permission-groups-wrapper">
                    @forelse($permissions as $group => $groupPermissions)
                        @php
                            $groupKey = 'group-'.md5((string) $group);
                            $translatedGroup = __('admin.roles.groups.'.$group);
                            $groupLabel = $translatedGroup !== 'admin.roles.groups.'.$group ? $translatedGroup : ucfirst((string) $group);
                        @endphp
                        <div class="col-md-6 col-xl-4 permission-group-card" data-group-name="{{ strtolower($groupLabel) }}">
                            <div class="border rounded p-3 h-100 bg-white">
                                <div class="d-flex justify-content-between align-items-center gap-2 mb-3">
                                    <div>
                                        <h6 class="mb-1">{{ $groupLabel }}</h6>
                                        <p class="text-muted small mb-0">{{ trans_choice('admin.roles.metrics.permissions_count', $groupPermissions->count(), ['count' => $groupPermissions->count()]) }}</p>
                                    </div>
                                    <label class="form-check form-switch m-0">
                                        <input type="checkbox" class="form-check-input group-toggle" data-group="{{ $groupKey }}">
                                    </label>
                                </div>

                                <div class="d-flex flex-column gap-2">
                                    @foreach($groupPermissions as $permission)
                                        @php
                                            $permissionLabel = $permission->localizedDisplayName();
                                        @endphp
                                        <label class="form-check border rounded px-3 py-2 permission-item" data-permission-name="{{ strtolower($permission->name.' '.$permission->display_name_en.' '.$permission->display_name_ar) }}">
                                            <input
                                                class="form-check-input permission-checkbox {{ $groupKey }}"
                                                type="checkbox"
                                                name="permissions[]"
                                                value="{{ $permission->id }}"
                                                @checked(in_array($permission->id, $selected, true))
                                            >
                                            <span class="form-check-label d-block ms-1">
                                                <span class="fw-semibold d-block">{{ $permissionLabel }}</span>
                                                <span class="text-muted small">{{ $permission->name }}</span>
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12 text-muted">{{ __('admin.roles.no_permissions') }}</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<div class="d-flex gap-2 mt-4 flex-wrap">
    <button class="btn btn-primary" type="submit">
        <i class="ti ti-device-floppy me-1"></i>{{ $submitLabel }}
    </button>
    @if(!empty($cancelRoute))
        <a href="{{ $cancelRoute }}" class="btn btn-light">{{ __('admin.actions.cancel') }}</a>
    @endif
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const allCheckboxes = Array.from(document.querySelectorAll('.permission-checkbox'));
        const groupToggles = Array.from(document.querySelectorAll('.group-toggle'));
        const selectedCounter = document.getElementById('selected-permissions-count');
        const searchInput = document.getElementById('permissions-search');
        const selectAllBtn = document.getElementById('select-all-permissions');
        const clearAllBtn = document.getElementById('clear-all-permissions');
        const displayNameEn = document.getElementById('display-name-en');
        const roleName = document.getElementById('role-name');
        const roleNameReadonly = roleName ? roleName.hasAttribute('readonly') : true;

        function slugify(value) {
            return value
                .toLowerCase()
                .trim()
                .replace(/[^a-z0-9]+/g, '_')
                .replace(/^_+|_+$/g, '')
                .replace(/_{2,}/g, '_');
        }

        function updateSelectedCounter() {
            const selectedCount = allCheckboxes.filter(function (item) { return item.checked; }).length;

            if (selectedCounter) {
                selectedCounter.textContent = '{{ trans_choice('admin.roles.metrics.permissions_count', 2, ['count' => '__COUNT__']) }}'.replace('__COUNT__', selectedCount);
            }
        }

        function syncGroupToggles() {
            groupToggles.forEach(function (toggle) {
                const groupCheckboxes = Array.from(document.querySelectorAll('.' + toggle.dataset.group));
                const checkedCount = groupCheckboxes.filter(function (checkbox) { return checkbox.checked; }).length;

                toggle.checked = groupCheckboxes.length > 0 && checkedCount === groupCheckboxes.length;
                toggle.indeterminate = checkedCount > 0 && checkedCount < groupCheckboxes.length;
            });
        }

        allCheckboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', function () {
                updateSelectedCounter();
                syncGroupToggles();
            });
        });

        groupToggles.forEach(function (toggle) {
            toggle.addEventListener('change', function () {
                document.querySelectorAll('.' + toggle.dataset.group).forEach(function (checkbox) {
                    checkbox.checked = toggle.checked;
                });

                updateSelectedCounter();
                syncGroupToggles();
            });
        });

        if (selectAllBtn) {
            selectAllBtn.addEventListener('click', function () {
                allCheckboxes.forEach(function (checkbox) {
                    checkbox.checked = true;
                });

                updateSelectedCounter();
                syncGroupToggles();
            });
        }

        if (clearAllBtn) {
            clearAllBtn.addEventListener('click', function () {
                allCheckboxes.forEach(function (checkbox) {
                    checkbox.checked = false;
                });

                updateSelectedCounter();
                syncGroupToggles();
            });
        }

        if (searchInput) {
            searchInput.addEventListener('input', function () {
                const term = searchInput.value.trim().toLowerCase();

                document.querySelectorAll('.permission-item').forEach(function (item) {
                    const matches = item.dataset.permissionName.indexOf(term) !== -1;
                    item.style.display = matches || term === '' ? '' : 'none';
                });

                document.querySelectorAll('.permission-group-card').forEach(function (card) {
                    const visibleItems = Array.from(card.querySelectorAll('.permission-item')).some(function (item) {
                        return item.style.display !== 'none';
                    });
                    const matchesGroup = card.dataset.groupName.indexOf(term) !== -1;

                    card.style.display = visibleItems || matchesGroup || term === '' ? '' : 'none';
                });
            });
        }

        if (displayNameEn && roleName && !roleNameReadonly) {
            displayNameEn.addEventListener('input', function () {
                if (roleName.value.trim() === '' || roleName.dataset.autoGenerated === 'true') {
                    roleName.value = slugify(displayNameEn.value);
                    roleName.dataset.autoGenerated = 'true';
                }
            });

            roleName.addEventListener('input', function () {
                roleName.dataset.autoGenerated = 'false';
            });
        }

        updateSelectedCounter();
        syncGroupToggles();
    });
</script>
@endpush