@extends('layouts.app')

@section('title', 'تعيين الصلاحيات للمستخدم: ' . $user->name)

@section('content')
<div class="permissions-container">
    <div class="permissions-card">
        <div class="permissions-header bg-primary-600">
            <h1 class="permissions-title">تعيين الصلاحيات للمستخدم: {{ $user->name }}</h1>
            <a href="{{ route('users.index') }}" class="permissions-back-button">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
                </svg>
                العودة إلى قائمة المستخدمين
            </a>
        </div>
        
        <div class="p-6">
            @if(session('success'))
                <div class="bg-green-100 border-r-4 border-green-500 text-green-700 p-4 mb-6 rounded">
                    {{ session('success') }}
                </div>
            @endif
            
            @if(session('error'))
                <div class="bg-red-100 border-r-4 border-red-500 text-red-700 p-4 mb-6 rounded">
                    {{ session('error') }}
                </div>
            @endif

            <form action="{{ route('users.permissions.update', $user) }}" method="POST">
                @csrf
                
                <div class="mb-6">
                    <div class="bg-blue-50 border-r-4 border-blue-400 text-blue-700 p-4 mb-4 rounded">
                        <p class="font-medium">معلومات المستخدم:</p>
                        <p><strong>الاسم:</strong> {{ $user->name }}</p>
                        <p><strong>البريد الإلكتروني:</strong> {{ $user->email }}</p>
                        <p><strong>الأدوار:</strong> 
                            @forelse($user->roles as $role)
                                <span class="inline-flex items-center p-2.5 py-0.5 rounded-full text-s font-medium bg-blue-100 text-blue-800 ml-1">
                                    {{ $role->name }}
                                </span>
                            @empty
                                <span class="text-black">لا توجد أدوار</span>
                            @endforelse
                        </p>
                    </div>

                    <div class="bg-yellow-50 border-r-4 border-yellow-400 text-yellow-700 p-4 mb-4 rounded">
                        <p class="font-medium">ملاحظة هامة:</p>
                        <p>الصلاحيات المحددة باللون الرمادي هي صلاحيات مكتسبة من الأدوار ولا يمكن تعديلها هنا.</p>
                        <p>يمكنك فقط تعيين صلاحيات إضافية للمستخدم بشكل مباشر.</p>
                    </div>
                </div>

                <div class="space-y-4" id="permissionsAccordion">
                    @forelse($permissions as $module => $modulePermissions)
                        <div class="border border-gray-200 rounded-md overflow-hidden shadow-sm" x-data="{ open: true }">
                            <div class="bg-gray-50 p-4 py-3 cursor-pointer hover:bg-gray-100" @click="open = !open" id="heading{{ Str::slug($module) }}">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center text-black">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-primary-600" viewBox="0 0 20 20" fill="currentColor">
                                            <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
                                        </svg>
                                        <span class="font-medium">{{ $module }}</span>
                                        <span class="mr-2 text-sm text-black">({{ $modulePermissions->count() }})</span>
                                    </div>
                                    <svg :class="{'rotate-180': open}" class="h-5 w-5 transform transition-transform duration-200 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </div>

                            <div x-show="open" x-transition class="border-t border-gray-200 bg-white">
                                <div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                    @foreach($modulePermissions as $permission)
                                        <div class="flex items-center">
                                            @if(in_array($permission->id, $rolePermissions))
                                                <input type="checkbox" id="permission_{{ $permission->id }}" class="h-5 w-5 text-black border-gray-300 rounded ml-2" checked disabled>
                                                <label for="permission_{{ $permission->id }}" class="text-sm text-black">
                                                    {{ $permission->display_name }}
                                                    <span class="block text-s text-black">{{ $permission->name }} (من الدور)</span>
                                                </label>
                                            @else
                                                <input type="checkbox" name="permissions[]" id="permission_{{ $permission->id }}" value="{{ $permission->id }}" class="h-5 w-5 text-primary-600 focus:ring-primary-500 border-gray-300 rounded ml-2"
                                                    {{ $user->hasDirectPermission($permission->name) ? 'checked' : '' }}>
                                                <label for="permission_{{ $permission->id }}" class="text-sm text-black">
                                                    {{ $permission->display_name }}
                                                    <span class="block text-s text-black">{{ $permission->name }}</span>
                                                </label>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="bg-blue-50 border-r-4 border-blue-400 text-blue-700 p-4 rounded">
                            لا توجد صلاحيات مضافة
                        </div>
                    @endforelse
                </div>

                <div class="mt-6 flex justify-end">
                    <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 p-4 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        حفظ الصلاحيات
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection