{{-- resources/views/livewire/permission-manager.blade.php --}}
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Gestión de Permisos</h2>

        {{-- Selector de Recurso --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Proyecto
                </label>
                <select wire:model.live="selectedProject" 
                        class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300">
                    <option value="">Seleccionar Proyecto</option>
                    @foreach($projects as $project)
                        <option value="{{ $project->id }}">{{ $project->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Carpeta (Opcional)
                </label>
                <select wire:model="selectedFolder" 
                        class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300"
                        {{ !$folders->count() ? 'disabled' : '' }}>
                    <option value="">Seleccionar Carpeta</option>
                    @foreach($folders as $folder)
                        <option value="{{ $folder->id }}">{{ $folder->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Selector de Usuario/Grupo --}}
        <div class="mb-8">
            <div class="flex items-center space-x-4 mb-4">
                <button @class([
                    'px-4 py-2 rounded-lg font-medium',
                    'bg-blue-600 text-white' => $assignTo === 'user',
                    'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300' => $assignTo !== 'user'
                ]) wire:click="setAssignTo('user')">
                    Usuario
                </button>
                <button @class([
                    'px-4 py-2 rounded-lg font-medium',
                    'bg-blue-600 text-white' => $assignTo === 'group',
                    'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300' => $assignTo !== 'group'
                ]) wire:click="setAssignTo('group')">
                    Grupo
                </button>
            </div>

            @if($assignTo === 'user')
                <livewire:user-search :key="'user-search-'.$selectedProject"/>
            @else
                <livewire:group-search :key="'group-search-'.$selectedProject"/>
            @endif
        </div>

        {{-- Permisos --}}
        <div class="space-y-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Permisos Disponibles</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($permissions as $permission)
                    <label @class([
                        'flex items-center p-4 border rounded-lg cursor-pointer transition-colors',
                        'border-blue-200 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-800' => in_array($permission, $selectedPermissions),
                        'border-gray-200 hover:border-blue-200 dark:border-gray-700 dark:hover:border-blue-800' => !in_array($permission, $selectedPermissions)
                    ])>
                        <input type="checkbox" 
                               value="{{ $permission }}" 
                               wire:model.live="selectedPermissions"
                               class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700">
                        <span class="ml-3 text-sm text-gray-700 dark:text-gray-300">
                            {{ __("permissions.$permission") }}
                        </span>
                    </label>
                @endforeach
            </div>
        </div>

        {{-- Botones de Acción --}}
        <div class="mt-8 flex justify-end space-x-4">
            <button wire:click="savePermissions"
                    @class([
                        'px-6 py-2 rounded-lg font-medium',
                        'bg-blue-600 hover:bg-blue-700 text-white' => $canSave,
                        'bg-gray-400 cursor-not-allowed text-gray-100' => !$canSave
                    ])
                    {{ !$canSave ? 'disabled' : '' }}>
                Guardar Permisos
            </button>
        </div>
    </div>

    {{-- Listado de Permisos Actuales --}}
    <div class="mt-12 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Permisos Asignados</h3>
        
        <livewire:permissions-list :resourceId="$selectedResourceId"/>
    </div>
</div>