@extends('admin.layout')

@section('title', 'إضافة دور جديد')
@section('header', 'إضافة دور جديد')

@section('content')
<div class="py-8">
    <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="mb-6 flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold text-gray-800 flex items-center gap-3">
                    <div class="p-2 bg-blue-100 rounded-lg">
                        <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                        </svg>
                    </div>
                    إضافة دور وظيفي جديد
                </h2>
                <p class="text-gray-600 mt-1 mr-14">قم بإنشاء دور جديد وتحديد صلاحياته</p>
            </div>
            <a href="{{ route('admin.roles.index') }}" class="flex items-center gap-2 px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition">
                <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                عودة للقائمة
            </a>
        </div>

        <form action="{{ route('admin.roles.store') }}" method="POST" x-data="{ selectedCount: 0 }">
            @csrf

            <!-- Role Name -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
                <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                    </svg>
                    بيانات الدور
                </h3>
                
                <div>
                    <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
                        اسم الدور <span class="text-red-500">*</span>
                    </label>
                    <input 
                        type="text" 
                        name="name" 
                        id="name"
                        value="{{ old('name') }}"
                        class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500 shadow-sm transition @error('name') border-red-500 @enderror" 
                        placeholder="مثال: منسق أنشطة، مشرف نقل"
                        required>
                    @error('name')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                    <p class="text-gray-500 text-xs mt-2">استخدم اسماً واضحاً يصف الدور الوظيفي</p>
                </div>
            </div>

            <!-- Permissions -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                        <svg class="w-5 h-5 text-blue-600" 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"/>
                        </svg>
                        الصلاحيات المتاحة
                    </h3>
                    <span class="text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full" x-text="'تم اختيار ' + selectedCount + ' صلاحية'"></span>
                </div>

                @php
                    $groupedPermissions = [
                        'الطلاب' => ['view-students', 'create-students', 'edit-students', 'delete-students'],
                        'المعلمين' => ['view-teachers', 'create-teachers', 'edit-teachers', 'delete-teachers'],
                        'أولياء الأمور' => ['view-parents', 'create-parents', 'edit-parents', 'delete-parents'],
                        'الصفوف' => ['view-grades', 'create-grades', 'edit-grades', 'delete-grades'],
                        'المواد' => ['view-subjects', 'create-subjects', 'edit-subjects', 'delete-subjects'],
                        'الدرجات' => ['view-marks', 'create-marks', 'edit-marks', 'delete-marks'],
                        'الحضور' => ['view-attendance', 'create-attendance', 'edit-attendance'],
                        'الاختبارات' => ['view-exams', 'create-exams', 'edit-exams', 'delete-exams'],
                        'الواجبات' => ['view-assignments', 'create-assignments', 'edit-assignments', 'delete-assignments'],
                        'المكتبة' => ['view-library', 'manage-library', 'borrow-books'],
                        'الرسوم والمدفوعات' => ['view-fees', 'create-fees', 'edit-fees', 'delete-fees', 'manage-payments'],
                        'الجداول' => ['view-schedules', 'create-schedules', 'edit-schedules'],
                        'الأحداث' => ['view-events', 'create-events', 'delete-events'],
                        'الملاحظات' => ['view-notes', 'create-notes'],
                        'الإعدادات' => ['view-settings', 'edit-settings'],
                        'الأدوار' => ['view-roles', 'create-roles', 'edit-roles', 'delete-roles'],
                        'التقارير' => ['view-reports', 'export-reports'],
                    ];
                @endphp

                <div class="space-y-6">
                    @foreach($groupedPermissions as $group => $permNames)
                        @php
                            $groupPerms = $permissions->whereIn('name', $permNames);
                        @endphp
                        @if($groupPerms->count() > 0)
                        <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
                            <h4 class="font-bold text-gray-700 mb-3 flex items-center gap-2">
                                <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
                                </svg>
                                {{ $group }}
                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                                @foreach($groupPerms as $permission)
                                <label class="flex items-center gap-2 bg-white p-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition group">
                                    <input 
                                        type="checkbox" 
                                        name="permissions[]" 
                                        value="{{ $permission->name }}" 
                                        class="rounded text-blue-600 focus:ring-blue-500 h-5 w-5"
                                        @change="selectedCount = $el.closest('form').querySelectorAll('input[type=checkbox]:checked').length">
                                    <span class="text-sm text-gray-700 group-hover:text-blue-600">{{ $permission->name }}</span>
                                </label>
                                @endforeach
                            </div>
                        </div>
                        @endif
                    @endforeach
                </div>
            </div>

            <!-- Actions -->
            <div class="flex items-center justify-end gap-3 mt-6">
                <a href="{{ route('admin.roles.index') }}" class="px-6 py-2.5 rounded-lg border-2 border-gray-300 text-gray-700 font-semibold hover:bg-gray-50 transition">
                    إلغاء
                </a>
                <button type="submit" class="px-8 py-2.5 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold shadow-lg hover:shadow-xl transition-all duration-200 flex items-center gap-2">
                    <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="M5 13l4 4L19 7"/>
                    </svg>
                    حفظ الدور
                </button>
            </div>
        </form>
    </div>
</div>
@endsection