@extends('back.layout')

@section('content')
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center justify-between py-5 lg:py-6">
            <div class="flex items-center space-x-4">
                <h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
                    Détails de l'utilisateur
                </h2>
                <div class="badge rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
                    Utilisateur #{{ $user->id }}
                </div>
            </div>
            
            @can('manage-users')
                <div class="flex space-x-2">
                    <a href="{{ route('users.edit', $user->id) }}" 
                       class="btn bg-warning font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90">
                        <i class="fa fa-edit mr-1"></i>
                        Modifier
                    </a>
                    <a href="{{ route('users.index') }}" 
                       class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                        <i class="fa fa-list mr-1"></i>
                        Liste
                    </a>
                </div>
            @endcan
        </div>

        <!-- Messages de notification -->
        @if (session('success'))
            <div class="alert-success fixed top-4 right-4 z-50 max-w-sm rounded-lg border-l-4 border-green-500 bg-green-100 p-4 text-green-800 shadow-lg dark:bg-green-900 dark:text-green-200 animate-fade-in"
                x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                x-transition:leave="transition ease-in-out duration-500" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0">
                <div class="flex items-center space-x-3">
                    <svg class="h-6 w-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span style="color: white; font-weight: bold">{{ session('success') }}</span>
                </div>
            </div>
        @endif

        @if (session('error'))
            <div class="alert-error fixed top-4 right-4 z-50 max-w-sm rounded-lg border-l-4 border-red-500 bg-red-100 p-4 text-red-800 shadow-lg dark:bg-red-900 dark:text-red-200 animate-fade-in"
                x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                x-transition:leave="transition ease-in-out duration-500" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0">
                <div class="flex items-center space-x-3">
                    <svg class="h-6 w-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span style="color: white; font-weight: bold">{{ session('error') }}</span>
                </div>
            </div>
        @endif
        
        <!-- Grille d'informations -->
        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
            
            <!-- Colonne de gauche - Informations de base -->
            <div class="col-span-12 lg:col-span-4">
                <div class="card p-4 sm:p-5">
                    <div class="flex flex-col items-center space-y-4">
                        <!-- Photo de profil -->
                        <div class="avatar h-24 w-24">
                            @if($user->profile_photo_path)
                                <img class="rounded-full object-cover" src="{{ Storage::url($user->profile_photo_path) }}" alt="Photo de profil">
                            @else
                                <div class="is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                </div>
                            @endif
                        </div>
                        
                        <!-- Nom et ID -->
                        <div class="text-center">
                            <h3 class="text-lg font-medium text-slate-700 dark:text-navy-100">
                                {{ $user->name }}
                            </h3>
                            <p class="text-xs+ text-slate-400 dark:text-navy-300">
                                ID: {{ $user->id }}
                            </p>
                        </div>
                        
                        <!-- Statut -->
                        <div class="flex justify-center mt-2">
                            @if($user->statut)
                                <div class="badge bg-error/10 text-error dark:bg-error/15">
                                    <i class="fa fa-ban mr-1"></i>
                                    Bloqué
                                </div>
                            @else
                                <div class="badge bg-success/10 text-success dark:bg-success/15">
                                    <i class="fa fa-check mr-1"></i>
                                    Actif
                                </div>
                            @endif
                        </div>
                    </div>
                    
                    <div class="mt-6 space-y-4">
                        <div class="flex justify-between">
                            <div class="font-medium text-slate-700 dark:text-navy-100">Email</div>
                            <div>{{ $user->email }}</div>
                        </div>
                        
                        @if($user->telephone)
                            <div class="flex justify-between">
                                <div class="font-medium text-slate-700 dark:text-navy-100">Téléphone</div>
                                <div>{{ $user->telephone }}</div>
                            </div>
                        @endif
                        
                        @if($user->pays)
                            <div class="flex justify-between">
                                <div class="font-medium text-slate-700 dark:text-navy-100">Pays</div>
                                <div>{{ $user->pays }}</div>
                            </div>
                        @endif
                        
                        @if($user->adresse)
                            <div class="flex justify-between">
                                <div class="font-medium text-slate-700 dark:text-navy-100">Adresse</div>
                                <div>{{ $user->adresse }}</div>
                            </div>
                        @endif
                        
                        <div class="flex justify-between">
                            <div class="font-medium text-slate-700 dark:text-navy-100">Date d'inscription</div>
                            <div>{{ $user->created_at->format('d/m/Y') }}</div>
                        </div>
                    </div>

                    <div class="mt-6 space-y-4">
                        <div>
                            <div class="font-medium text-slate-700 dark:text-navy-100 mb-2">Rôles</div>
                            <div class="flex flex-wrap gap-2">
                                @if($user->roles->isNotEmpty())
                                    @foreach($user->roles as $role)
                                        <div class="badge {{ $role->name === 'Admin' ? 'bg-primary/10 text-primary' : ($role->name === 'Service' ? 'bg-success/10 text-success' : 'bg-info/10 text-info') }} dark:bg-{{ $role->name === 'Admin' ? 'primary' : ($role->name === 'Service' ? 'success' : 'info') }}/15">
                                            {{ $role->name }}
                                        </div>
                                    @endforeach
                                @else
                                    <div class="badge bg-slate-150 text-slate-800 dark:bg-navy-700 dark:text-navy-100">
                                        Aucun rôle
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Colonne de droite - Informations détaillées -->
            <div class="col-span-12 lg:col-span-8">
                <div class="card p-4 sm:p-5">
                    <div class="flex items-center space-x-4 pb-4 border-b border-slate-200 dark:border-navy-500">
                        <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-primary/10 p-1 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                            <i class="fa-solid fa-key"></i>
                        </div>
                        <h4 class="text-lg font-medium text-slate-700 dark:text-navy-100">
                            Permissions spécifiques
                        </h4>
                    </div>

                    <div class="mt-4 space-y-4">
                        @if($user->permissions->isNotEmpty())
                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                                @foreach($user->permissions->chunk(ceil($user->permissions->count() / 3)) as $permissionGroup)
                                    <div>
                                        @foreach($permissionGroup as $permission)
                                            <div class="flex items-center space-x-2 mb-2">
                                                <div class="h-2 w-2 rounded-full bg-primary"></div>
                                                <span class="text-sm">{{ $permission->name }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="p-4 border border-dashed rounded-lg bg-slate-50 dark:border-navy-500 dark:bg-navy-800">
                                <div class="flex flex-col items-center justify-center space-y-2 text-center">
                                    <i class="fa fa-info-circle text-lg text-slate-400 dark:text-navy-300"></i>
                                    <p class="text-slate-600 dark:text-navy-200">
                                        Aucune permission spécifique attribuée à cet utilisateur.
                                    </p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal pour gérer les permissions -->
        <div id="manage-permissions-modal" x-data="{ isOpen: false }" x-show="isOpen" 
            x-on:open-modal.window="if($event.detail.id === 'manage-permissions-modal') isOpen = true"
            x-on:close-modal.window="if($event.detail.id === 'manage-permissions-modal') isOpen = false"
            x-on:keydown.escape.window="isOpen = false"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 backdrop-blur" style="display: none">
            <div x-show="isOpen" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-90" @click.outside="isOpen = false"
                class="card w-full max-w-3xl max-h-[90vh] overflow-auto p-5">
                
                <div class="flex items-center justify-between border-b border-slate-200 pb-3 dark:border-navy-500">
                    <h3 class="text-lg font-medium text-slate-700 dark:text-navy-100">
                        Gérer les permissions de {{ $user->name }}
                    </h3>
                    <button @click="isOpen = false" class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </main>

    <script>
        // Script pour filtrer les permissions
        document.getElementById('permission-search').addEventListener('input', function(e) {
            const filter = e.target.value.toLowerCase();
            const items = document.querySelectorAll('.permission-item');
            
            items.forEach(item => {
                const permissionName = item.querySelector('.permission-name').textContent.toLowerCase();
                if (permissionName.includes(filter)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    </script>
@endsection