@extends('layouts.app')

@section('content')
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 15px;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'تعديل الدور: ' : 'Edit Role: ' }} {{ $role->name }}
    </h2>
    <a href="{{ route('admin.roles.index') }}" style="background: #1f2937; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold; border: 1px solid #374151;">
        {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
    </a>
</div>

<div class="py-12">
    <div class="mx-auto" style="max-width: 850px;">
        <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden shadow-2xl">
            <div class="p-8 text-gray-300">
                <form action="{{ route('admin.roles.update', $role) }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <!-- Role Name -->
                    <div class="mb-8">
                        <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider font-bold">
                            {{ app()->getLocale() == 'ar' ? 'اسم الدور' : 'Role Name' }}
                        </label>
                        <input type="text" name="name" value="{{ $role->name }}"
                            class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none text-sm transition-all shadow-inner" 
                            required {{ $role->name === 'Super Admin' ? 'readonly' : '' }}>
                        @error('name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Permissions Grid -->
                    <div class="mb-8">
                        <h3 class="text-md font-bold text-[#d4af37] mb-6 flex items-center gap-2 border-b border-gray-800 pb-4">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                            {{ app()->getLocale() == 'ar' ? 'الصلاحيات حسب الموديول' : 'Permissions by Module' }}
                        </h3>
                        
                        <div class="space-y-8">
                            @foreach($permissions as $module => $modulePermissions)
                                <div class="bg-black/40 rounded-xl p-6 border border-gray-800/50">
                                    <h4 class="text-sm font-bold text-gray-400 mb-4 flex items-center gap-2">
                                        <span class="w-1.5 h-1.5 rounded-full bg-[#d4af37]"></span>
                                        {{ $module }}
                                    </h4>
                                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                                        @foreach($modulePermissions as $permission)
                                            <label class="group flex items-center p-3 rounded-lg border border-gray-800 bg-black/20 cursor-pointer hover:border-[#d4af37]/50 hover:bg-[#d4af37]/5 transition-all">
                                                <div class="relative flex items-center">
                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->name }}" 
                                                        {{ in_array($permission->name, $rolePermissions) ? 'checked' : '' }}
                                                        class="w-4 h-4 rounded border-gray-700 bg-gray-900 text-[#d4af37] focus:ring-[#d4af37] focus:ring-offset-black transition-all">
                                                </div>
                                                <span class="text-xs text-gray-400 mr-3 group-hover:text-white transition-colors">
                                                    {{ $permission->name }}
                                                </span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="flex items-center justify-end gap-4 pt-6 border-t border-gray-800">
                        <button type="submit" 
                            class="bg-[#d4af37] hover:bg-[#b08d2a] text-black font-bold py-3 px-10 rounded-lg text-sm transition-all shadow-lg hover:shadow-[#d4af37]/20 active:scale-95">
                            {{ app()->getLocale() == 'ar' ? 'تحديث الدور' : 'Update Role' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection