<x-app-layout>
    <x-slot name="header">
        <h2 class="font-black text-2xl text-slate-800 dark:text-white leading-tight uppercase tracking-tight">
            {{ isset($role) ? 'Editar Rol: ' . $role->name : 'Crear Nuevo Rol' }}
        </h2>
        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Gestión de Control de Acceso</p>
    </x-slot>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            
            <div class="bg-white dark:bg-slate-800 overflow-hidden shadow-2xl rounded-[2rem] border border-slate-100 dark:border-slate-700">
                <div class="p-8 md:p-12">
                    
                    <form method="POST" action="{{ isset($role) ? route('roles.update', $role->id) : route('roles.store') }}">
                        @csrf
                        @if(isset($role))
                            @method('PUT')
                        @endif

                        <div class="space-y-8">
                            
                            {{-- 1. Nombre del Rol --}}
                            <div class="space-y-2">
                                <label for="name" class="text-xs font-black text-slate-400 uppercase tracking-widest ml-1">Nombre Identificador</label>
                                <input type="text" name="name" id="name" 
                                       value="{{ old('name', $role->name ?? '') }}"
                                       class="w-full bg-slate-50 dark:bg-slate-900 border-none rounded-2xl p-4 font-black text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500 shadow-sm"
                                       placeholder="Ej. GERENTE, AUDITOR..." required autofocus>
                                <p class="text-[10px] text-slate-400 font-medium ml-1">Evita espacios si es posible, usa guiones bajos si es necesario.</p>
                                @error('name') <p class="text-rose-500 text-xs font-bold mt-1">{{ $message }}</p> @enderror
                            </div>

                            <hr class="border-slate-100 dark:border-slate-700">

                            {{-- 2. Permisos --}}
                            <div class="space-y-6">
                                <div class="flex justify-between items-end">
                                    <div>
                                        <h4 class="text-md font-black text-slate-900 dark:text-white uppercase tracking-tight">Permisos del Sistema</h4>
                                        <p class="text-xs text-slate-400 font-bold uppercase tracking-widest mt-1">Selecciona las capacidades de este rol</p>
                                    </div>
                                    <button type="button" onclick="toggleAll(true)" class="text-[9px] font-black text-indigo-600 hover:text-indigo-700 uppercase tracking-widest">Marcar todos</button>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    @foreach($permissions as $permission)
                                        <label class="flex items-center group cursor-pointer p-4 bg-slate-50 dark:bg-slate-900/50 rounded-2xl hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-all border border-transparent hover:border-indigo-100">
                                            <input type="checkbox" name="permissions[]" value="{{ $permission->name }}"
                                                   class="permission-check w-5 h-5 rounded-lg border-slate-300 text-indigo-600 focus:ring-indigo-500 transition-all"
                                                   {{ (isset($rolePermissions) && in_array($permission->name, $rolePermissions)) || (is_array(old('permissions')) && in_array($permission->name, old('permissions'))) ? 'checked' : '' }}>
                                            <div class="ml-4">
                                                <span class="block text-xs font-black text-slate-700 dark:text-slate-300 uppercase tracking-widest">{{ str_replace('_', ' ', $permission->name) }}</span>
                                                <span class="block text-[9px] text-slate-400 font-bold uppercase tracking-tighter mt-0.5">Acceso a {{ $permission->name }}</span>
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                                @error('permissions') <p class="text-rose-500 text-xs font-bold mt-1">{{ $message }}</p> @enderror
                            </div>

                            <div class="flex items-center justify-end gap-4 pt-8">
                                <a href="{{ route('roles.index') }}" class="px-8 py-4 bg-slate-100 hover:bg-slate-200 text-slate-600 font-black rounded-2xl text-[10px] uppercase tracking-widest transition-all">
                                    Cancelar
                                </a>
                                <button type="submit" class="px-10 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-2xl text-[10px] uppercase tracking-widest shadow-xl shadow-indigo-200 dark:shadow-none transition-all active:scale-95">
                                    {{ isset($role) ? 'Actualizar Rol' : 'Guardar Nuevo Rol' }}
                                </button>
                            </div>

                        </div>
                    </form>

                </div>
            </div>

        </div>
    </div>

    <script>
        function toggleAll(status) {
            const checks = document.querySelectorAll('.permission-check');
            checks.forEach(c => c.checked = status);
        }
    </script>
</x-app-layout>
