@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Add Role'))
@section('page_heading', __('dashboard.Add Role'))
@section('page_subtitle', 'إنشاء دور جديد وتحديد الصلاحيات المرتبطة به.')
@section('page_actions')
    <a href="{{ route('admin.roles.index') }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">
        <i class="fa-solid fa-list"></i>
        <span>{{ __('dashboard.Roles') }}</span>
    </a>
@endsection

@section('content')
<div class="space-y-8">
    <section class="rounded-xl border border-surface-200 p-6 dark:border-surface-800">
        <form action="{{ route('admin.roles.store') }}" method="POST" class="space-y-8">
            @csrf

            <div class="grid gap-6 lg:grid-cols-2">
                <div>
                    <label for="name" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Name') }}</label>
                    <input id="name" type="text" name="name" value="{{ old('name') }}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900" required>
                    @error('name')
                        <p class="mt-2 text-sm font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="guard_name" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Guard Name') }}</label>
                    <input id="guard_name" type="text" name="guard_name" value="{{ old('guard_name', 'web') }}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900" required>
                    @error('guard_name')
                        <p class="mt-2 text-sm font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="space-y-6">
                <label class="block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Select All Permissions') }}</label>
                <div class="rounded-2xl border border-surface-200 bg-surface-50 p-4 dark:border-surface-800 dark:bg-surface-800/30">
                    <label class="inline-flex items-center gap-3 text-sm font-bold text-surface-700 dark:text-surface-200">
                        <input type="checkbox" id="select-all-permissions" class="h-4 w-4 rounded border-surface-300 text-brand-600 focus:ring-brand-500">
                        <span>{{ __('dashboard.Select All Permissions') }}</span>
                    </label>
                </div>

                <div class="space-y-6">
                    @foreach ($permissionGroups as $groupName => $permissions)
                        <section class="rounded-xl border border-surface-200 p-5 dark:border-surface-800">
                            <h3 class="text-lg font-black capitalize text-surface-900 dark:text-white">{{ str_replace('_', ' ', $groupName) }}</h3>
                            <div class="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                                @foreach ($permissions as $permission)
                                    <label class="flex items-center gap-3 rounded-2xl border border-surface-200 bg-surface-50 px-4 py-3 text-sm text-surface-700 transition hover:border-brand-300 dark:border-surface-800 dark:bg-surface-800/30 dark:text-surface-200">
                                        <input type="checkbox" class="permission-checkbox h-4 w-4 rounded border-surface-300 text-brand-600 focus:ring-brand-500" id="permission-{{ $permission->id }}" name="permissions[]" value="{{ $permission->id }}">
                                        <span>{{ str_replace(['_', $groupName], [' ', ''], $permission->name) }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </section>
                    @endforeach
                </div>
            </div>

            <div class="flex flex-wrap justify-end gap-3">
                <a href="{{ route('admin.roles.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-200 dark:hover:bg-surface-800">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    <i class="fa-solid fa-floppy-disk"></i>
                    <span>{{ __('dashboard.Save') }}</span>
                </button>
            </div>
        </form>
    </section>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectAllCheckbox = document.getElementById('select-all-permissions');
        const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');

        selectAllCheckbox?.addEventListener('change', function() {
            permissionCheckboxes.forEach((checkbox) => {
                checkbox.checked = this.checked;
            });
        });

        permissionCheckboxes.forEach((checkbox) => {
            checkbox.addEventListener('change', updateSelectAllState);
        });

        function updateSelectAllState() {
            const checkedCount = Array.from(permissionCheckboxes).filter((checkbox) => checkbox.checked).length;
            const totalCount = permissionCheckboxes.length;

            if (!selectAllCheckbox) {
                return;
            }

            selectAllCheckbox.checked = checkedCount === totalCount;
            selectAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < totalCount;
        }

        updateSelectAllState();
    });
</script>
@endsection