
<x-layouts.app :title="__('Show User')" :showSidebar={{ $showSidebar }}>

    <!-- Header Section -->
    <div class="bg-white p-6 mb-6 flex content-start justify-between">
        <!-- User Info Left -->
        <div class="flex content-start space-x-6">
            <!-- User Photo -->
            <flux:avatar 
                class="w-24 h-24 rounded-lg shadow-lg object-cover border-2 border-gray-600"
                namue="{{ $user->first_name }} {{ $user->last_name }}"
                src="{{ $user->profile_photo_path ? asset('storage/' . $user->profile_photo_path) : null }}" />

            <!-- User Details -->
            <div>
                <h1 class="text-2xl font-bold text-gray-700">
                    {{ $user->first_name }} {{ $user->last_name }}
                </h1>
                
                <!-- Contact Info -->
                <div class="mt-2 space-y-1">
                    @if($user->address )
                        <div class="flex items-center text-gray-600">
                            <flux:icon.map-pin />
                            <p class="text-sm text-gray-700">
                                {{ $user->address }}
                            </p>
                        </div>
                    @endif
                    
                    <div class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
                        </svg>
                        <a href="mailto:{{ $user->email }}" class="hover:text-blue-600">
                            {{ $user->email }}
                        </a>
                    </div>
                    
                    @if($user->phone)
                    <div class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
                        </svg>
                        <a href="tel:{{ $user->phone }}" class="hover:text-blue-600">
                            {{ $user->phone }}
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Right Section -->
        <div class="flex flex-col items-end space-y-4">
            <!-- Navigation Toolbar -->
            <div class="flex space-x-2">

                <flux:button
                    href="{{ route('users.index') }}"
                    icon:trailing="arrow-uturn-left"
                    variant="ghost"
                >
                </flux:button>
                
                @if($previousUser)
                <flux:button
                    href="{{ route('users.show', $previousUser) }}"
                    icon:trailing="chevron-left"
                    variant="ghost"
                >
                </flux:button>
                @endif

                @if($nextUser)
                <flux:button
                    href="{{ route('users.show', $nextUser) }}"
                    icon:trailing="chevron-right"
                    variant="ghost"
                >
                </flux:button>
                @endif
            </div>

            <!-- Status Badge -->
            <span class="px-4 py-2 w-30 rounded-lg text-sm text-center font-semibold 
                        {{ $user->is_active ? 'bg-green-600 text-white' : 'bg-red-100 text-red-800' }}">
                {{ $user->is_active ? 'Activo' : 'Inactivo' }}
            </span>
        </div>
    </div>

    <!-- Contend: -->
    <div x-data="{ activeTab: 'info' }" class="bg-white rounded-lg shadow-md border-1">
        <!-- Tab Headers -->
        <div class="border-b border-gray-200">
            <nav class="flex space-x-8 px-6">
                <button @click="activeTab = 'info'" 
                        :class="activeTab === 'info' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'" 
                        class="py-4 px-1 border-b-2 font-medium">
                    Usuario
                </button>
                
                <button @click="activeTab = 'permissions'" 
                        :class="activeTab === 'permissions' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'" 
                        class="py-4 px-1 border-b-2 font-medium">
                    Permisos
                </button>

                <button @click="activeTab = 'projects'" 
                        :class="activeTab === 'projects' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'" 
                        class="py-4 px-1 border-b-2 font-medium">
                    Proyectos
                </button>
            </nav>
        </div>

        <!-- Tab Content -->
        <div class="p-6">
            <!-- Info Tab -->
            <div x-show="activeTab === 'info'">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach(['name' => 'Nombre', 'last_name' => 'Apellido', 'email' => 'Email', 'phone' => 'Teléfono', 'created_at' => 'Fecha Registro'] as $field => $label)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $label }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $user->$field ?? 'N/A' }}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Action Buttons -->
                <div class="mt-6 flex justify-end space-x-4">
                    <a href="{{ route('users.edit', $user) }}" 
                    class="w-[150px] px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                        </svg>
                        Editar
                    </a>

                    {{-- Formulario de Edición --}}
                    <form method="POST" action="{{ route('users.update', $user) }}">
                        @csrf
                        @method('PUT') <!-- Important! -->
                        <button type="submit" 
                            class="w-[150px] px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg flex items-center justify-center">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                            </svg>
                            {{ $user->is_active ? 'Desactivar' : 'Activar' }}
                        </button>
                    </form>

                    {{-- Formulario de Eliminación --}}
                    <form method="POST" action="{{ route('users.destroy', $user) }}">
                        @csrf
                        @method('DELETE') <!-- Important! -->
                        <button type="submit" 
                                onclick="return confirm('¿Estás seguro de querer eliminar este usuario?')"
                                class="px-4 py-2 w-[150px] bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center justify-center">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                            Eliminar
                        </button>
                    </form>
                </div>
            </div>

            <!-- Permissions Tab -->
            <div x-show="activeTab === 'permissions'" x-cloak>
                <div class="space-y-4">
                    @foreach($permissionGroups as $groupName => $group)
                    <div class="border rounded-lg overflow-hidden">
                        <!-- Group Header -->
                        <div class="bg-gray-50 px-4 py-3 flex justify-between items-center border-b">
                            <h3 class="font-semibold text-gray-700">
                                {{ ucfirst($groupName) }}
                            </h3>
                            
                            <div class="flex space-x-2">
                                <!-- Toggle All On -->
                                <button wire:click="toggleAllGroupPermissions('{{ $groupName }}', true)"
                                        class="px-3 py-1 text-xs bg-green-100 text-green-800 rounded hover:bg-green-200 flex items-center">
                                    <svg class="w-3 h-3 mr-1" 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>
                                    Activar Todos
                                </button>
                                
                                <!-- Toggle All Off -->
                                <button wire:click="toggleAllGroupPermissions('{{ $groupName }}', false)"
                                        class="px-3 py-1 text-xs bg-red-100 text-red-800 rounded hover:bg-red-200 flex items-center">
                                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                    Desactivar Todos
                                </button>
                            </div>
                        </div>
                        
                        <!-- Permissions List -->
                        <div class="divide-y divide-gray-200">
                            @foreach($group['permissions'] as $permission)
                            <div class="px-4 py-3 flex justify-between items-center hover:bg-gray-50">
                                <div class="flex items-center">
                                    <span class="text-sm text-gray-700">{{ $permission['description'] ?? $permission['name'] }}</span>
                                    
                                    @if($permission['description'])
                                    <span class="ml-2 text-xs text-gray-500">({{ $permission['name'] }})</span>
                                    @endif
                                </div>
                                
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" 
                                        @if(true || $user->hasPermissionTo($permission['name'])) checked @endif
                                        wire:change="togglePermission('{{ $permission['name'] }}')"
                                        class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Pestaña de Proyectos -->
            <div x-show="activeTab === 'projects'" x-cloak>
                <div class="space-y-6">
                    <!-- Proyectos Actuales -->
                    <div class="border rounded-lg p-4">
                        <h3 class="text-lg font-semibold mb-4">Proyectos Asociados</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            falta implementar
                        </div>
                    </div>

                    <!-- Añadir Proyectos (Solo con permisos) -->
                    
                </div>
            </div>
        </div>
    </div>

    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input { 
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #3B82F6;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }
    </style>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('permissions', () => ({
                init() {
                    // Inicializar datos desde Livewire
                    this.$watch('$wire.permissionGroups', value => {
                        this.groups = value;
                    });
                },
                
                toggleAll(groupName, enable) {
                    this.$wire.toggleAllGroupPermissions(groupName, enable);
                }
            }));
        });
    </script>

    <!-- Sidebar menu -->
    @push('sidebar-menu')
    <flux:navlist variant="outline">
        <!-- Sección de Usuarios -->
        <flux:navlist.group :heading="__('User')">
            <flux:navlist.item 
                icon="users" 
                :href="route('users.index')" 
                wire:navigate
            >
                {{ __('List Users') }}
            </flux:navlist.item>
            
            <flux:navlist.item 
                icon="user-plus" 
                :href="route('users.create')" 
                wire:navigate
            >
                {{ __('Create User') }}
            </flux:navlist.item>
        </flux:navlist.group>
        
        <flux:separator />
    </flux:navlist>

    @endpush
   
</x-layouts.app>