@extends('client-system::layouts.admin')

@section('title', 'User Details')

@section('content')
<div class="bg-white shadow-md rounded-lg p-6">
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
            <a href="{{ route('admin.users.index') }}" class="text-blue-600 hover:text-blue-800 mr-2">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
            </a>
            <h1 class="text-2xl font-bold">{{ $user->name }}</h1>
            @if($user->role)
                <span class="ml-3 px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $user->role->slug == 'super-admin' ? 'bg-purple-100 text-purple-800' : ($user->role->slug == 'admin' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800') }}">
                    {{ $user->role->name }}
                </span>
            @endif
        </div>
        
        <div class="flex space-x-2">
            <a href="{{ route('admin.users.edit', $user) }}" class="bg-yellow-600 hover:bg-yellow-700 text-white font-medium py-2 px-4 rounded-lg flex items-center">
                <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
                Edit
            </a>
            <form action="{{ route('admin.users.destroy', $user) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this user?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg flex items-center">
                    <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <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>
                    Delete
                </button>
            </form>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- User Information Card -->
        <div class="bg-white rounded-lg p-4 shadow border">
            <h2 class="text-lg font-semibold mb-4 border-b pb-2">User Information</h2>
            
            <div class="space-y-3">
                <div class="flex items-center justify-center mb-4">
                    <div class="h-20 w-20 rounded-full bg-blue-100 flex items-center justify-center">
                        <span class="text-blue-800 font-bold text-2xl">{{ substr($user->name, 0, 1) }}</span>
                    </div>
                </div>
                
                <div>
                    <p class="text-sm text-gray-500">Email</p>
                    <p class="font-medium">{{ $user->email }}</p>
                </div>
                
                <div>
                    <p class="text-sm text-gray-500">Role</p>
                    <p class="font-medium">{{ $user->role ? $user->role->name : 'User' }}</p>
                </div>
                
                <div>
                    <p class="text-sm text-gray-500">Joined</p>
                    <p class="font-medium">{{ $user->created_at->format('M d, Y') }}</p>
                </div>
                
                <div>
                    <p class="text-sm text-gray-500">Last Login</p>
                    <p class="font-medium">{{ $user->last_login_at ? $user->last_login_at->format('M d, Y H:i') : 'Never' }}</p>
                </div>
            </div>
        </div>
        
        <!-- Client Associations Card -->
        <div class="bg-white rounded-lg p-4 shadow border">
            <div class="flex justify-between items-center mb-4 border-b pb-2">
                <h2 class="text-lg font-semibold">Client Associations</h2>
                <a href="{{ route('admin.users.clients', $user) }}" class="text-blue-600 hover:text-blue-800 text-sm">View All</a>
            </div>
            
            @if($user->clients->count() > 0)
                <div class="space-y-3">
                    @foreach($user->clients as $client)
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                @if($client->getBrandingDetails() && isset($client->getBrandingDetails()['logo_url']))
                                    <img src="{{ $client->getBrandingDetails()['logo_url'] }}" alt="{{ $client->name }} Logo" class="h-8 w-8 mr-2">
                                @else
                                    <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                                        <span class="text-blue-800 font-medium">{{ substr($client->name, 0, 1) }}</span>
                                    </div>
                                @endif
                                <div>
                                    <p class="text-sm font-medium">{{ $client->name }}</p>
                                    <p class="text-xs text-gray-500">
                                        Joined: {{ $client->pivot->joined_at ? \Carbon\Carbon::parse($client->pivot->joined_at)->format('M d, Y') : 'Unknown' }}
                                    </p>
                                </div>
                            </div>
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                {{ $client->pivot->role_in_client ?? 'User' }}
                            </span>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-4">
                    <p class="text-gray-500">No client associations</p>
                </div>
            @endif
        </div>
        
        <!-- Tier Completions Card -->
        <div class="bg-white rounded-lg p-4 shadow border">
            <div class="flex justify-between items-center mb-4 border-b pb-2">
                <h2 class="text-lg font-semibold">Tier Completions</h2>
                <a href="{{ route('admin.users.tierCompletions', $user) }}" class="text-blue-600 hover:text-blue-800 text-sm">View All</a>
            </div>
            
            @if($tierCompletions->count() > 0)
                <div class="space-y-4">
                    @foreach($tierCompletions as $clientName => $completions)
                        <div>
                            <h3 class="text-sm font-medium text-gray-700 mb-2">{{ $clientName }}</h3>
                            <div class="space-y-2">
                                @foreach($completions as $completion)
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <p class="text-sm font-medium">{{ $completion->tier->name }}</p>
                                            <p class="text-xs text-gray-500">
                                                Completed: {{ $completion->completed_at ? \Carbon\Carbon::parse($completion->completed_at)->format('M d, Y') : 'Unknown' }}
                                            </p>
                                        </div>
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            Completed
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-4">
                    <p class="text-gray-500">No tier completions</p>
                </div>
            @endif
        </div>
    </div>
    
    <!-- Assessment Attempts -->
    <div class="mt-8">
        <h2 class="text-lg font-semibold mb-4 border-b pb-2">Assessment Attempts</h2>
        
        @if($assessmentAttempts->count() > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Assessment
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Date
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Score
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Result
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($assessmentAttempts as $attempt)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ $attempt->assessment->name }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $attempt->created_at->format('M d, Y H:i') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $attempt->score }} / {{ $attempt->max_score }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @if($attempt->passed)
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            Passed
                                        </span>
                                    @else
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                            Failed
                                        </span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-4 bg-gray-50 rounded-lg">
                <p class="text-gray-500">No assessment attempts</p>
            </div>
        @endif
    </div>
    
    <div class="mt-8">
        <h2 class="text-lg font-semibold mb-4">Quick Actions</h2>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
            <a href="{{ route('admin.users.edit', $user) }}" class="bg-yellow-100 hover:bg-yellow-200 text-yellow-800 rounded-lg p-4 text-center transition-colors">
                <svg class="h-8 w-8 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
                <span>Edit User</span>
            </a>
            
            <a href="{{ route('admin.users.clients', $user) }}" class="bg-blue-100 hover:bg-blue-200 text-blue-800 rounded-lg p-4 text-center transition-colors">
                <svg class="h-8 w-8 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                <span>Manage Client Associations</span>
            </a>
            
            <a href="{{ route('admin.users.tierCompletions', $user) }}" class="bg-green-100 hover:bg-green-200 text-green-800 rounded-lg p-4 text-center transition-colors">
                <svg class="h-8 w-8 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>View Tier Completions</span>
            </a>
            
            <a href="{{ route('admin.reports.user', $user) }}" class="bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-4 text-center transition-colors">
                <svg class="h-8 w-8 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                <span>Generate User Report</span>
            </a>
        </div>
    </div>
</div>
@endsection