<!-- resources/views/permissions/assign.blade.php -->
x-layouts.app :title="__('Permissions Management')">
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800">
            {{ __('Gestión de Permisos y Roles') }}
        </h2>
    </x-slot>

    <div class="py-6">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <!-- Buscador -->
                    <div class="mb-6">
                        <input type="text" id="search" placeholder="Buscar usuario..." 
                               class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <!-- Lista de Usuarios -->
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Usuario</th>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Roles</th>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Permisos Directos</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="users-table">
                                @foreach($users as $user)
                                <tr class="user-row">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">{{ $user->name }}</div>
                                                <div class="text-sm text-gray-500">{{ $user->email }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    
                                    <!-- Asignación de Roles -->
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <form class="update-roles" data-user-id="{{ $user->id }}">
                                            @csrf
                                            <select name="roles[]" multiple 
                                                    class="w-48 px-3 py-2 border rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
                                                    x-data="{}" x-init="tomSelect($el, {
                                                        plugins: ['remove_button'],
                                                        maxItems: 3
                                                    })">
                                                @foreach($roles as $role)
                                                <option value="{{ $role->name }}" {{ $user->hasRole($role) ? 'selected' : '' }}>
                                                    {{ $role->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </form>
                                    </td>
                                    
                                    <!-- Asignación de Permisos -->
                                    <td class="px-6 py-4">
                                        <form class="update-permissions" data-user-id="{{ $user->id }}">
                                            @csrf
                                            <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
                                                @foreach($permissions->groupBy('category') as $category => $perms)
                                                <div class="p-4 border rounded-lg">
                                                    <h3 class="mb-2 text-sm font-semibold">{{ $category }}</h3>
                                                    @foreach($perms as $permission)
                                                    <label class="flex items-center space-x-2">
                                                        <input type="checkbox" 
                                                               name="permissions[]" 
                                                               value="{{ $permission->name }}"
                                                               {{ $user->hasDirectPermission($permission) ? 'checked' : '' }}
                                                               class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
                                                        <span class="text-sm">{{ $permission->name }}</span>
                                                    </label>
                                                    @endforeach
                                                </div>
                                                @endforeach
                                            </div>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('styles')
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.0.0/dist/css/tom-select.css" rel="stylesheet">
    @endpush

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.0.0/dist/js/tom-select.complete.min.js"></script>
    <script>
        // Búsqueda en tiempo real
        document.getElementById('search').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            document.querySelectorAll('.user-row').forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(searchTerm) ? '' : 'none';
            });
        });

        // Actualización automática de roles
        document.querySelectorAll('select[name="roles[]"]').forEach(select => {
            new TomSelect(select, {
                plugins: ['remove_button'],
                onChange: function(value) {
                    const form = select.closest('form');
                    submitForm(form, 'roles');
                }
            });
        });

        // Actualización automática de permisos
        document.querySelectorAll('input[name="permissions[]"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const form = this.closest('form');
                submitForm(form, 'permissions');
            });
        });

        // Función para enviar el formulario
        function submitForm(form, type) {
            const userId = form.dataset.userId;
            const formData = new FormData(form);
            
            fetch(`/admin/users/${userId}/${type}`, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    showNotification('Cambios guardados exitosamente', 'success');
                } else {
                    showNotification('Error al guardar los cambios', 'error');
                }
            });
        }

        function showNotification(message, type) {
            // Implementar notificación (ej: Toast)
            console.log(`${type}: ${message}`);
        }
    </script>
    @endpush
</x-layouts.app>