@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' ? 'إضافة دور جديد' : 'Create New Role' }}
    </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.store') }}" method="POST">
                    @csrf
                    
                    <!-- 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" 
                            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" 
                            placeholder="{{ app()->getLocale() == 'ar' ? 'أدخل اسم الدور...' : 'Enter role name...' }}"
                            required>
                        @error('name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Permissions -->
                    <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">
                            {{ app()->getLocale() == 'ar' ? 'الصلاحيات' : 'Permissions' }}
                        </h3>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                            @foreach($permissions as $module => $modulePermissions)
                                @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">
                                        <input type="checkbox" name="permissions[]" value="{{ $permission->name }}" 
                                            class="w-4 h-4 rounded border-gray-700 bg-gray-900 text-[#d4af37] focus:ring-[#d4af37] focus:ring-offset-black transition-all">
                                        <span class="text-xs text-gray-400 mr-3 group-hover:text-white transition-colors">
                                            {{ $permission->name }}
                                        </span>
                                    </label>
                                @endforeach
                            @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 active:scale-95">
                            {{ app()->getLocale() == 'ar' ? 'حفظ الدور' : 'Save Role' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection