@extends('layouts.admin')

@section('title', $user->name)

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-900">{{ $user->name }}</h1>
        <div class="flex space-x-3">
            <a href="{{ route('admin.users.edit', $user->id) }}" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
                <i class="fas fa-edit mr-2"></i>Edit User
            </a>
            <a href="{{ route('admin.users.index') }}" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition duration-300">
                <i class="fas fa-arrow-left mr-2"></i>Back to Users
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- User Stats -->
            @if($user->role === 'vendor')
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="flex items-center">
                        <div class="p-3 bg-blue-100 rounded-lg">
                            <i class="fas fa-car text-blue-600 text-2xl"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">Total Vehicles</p>
                            <p class="text-2xl font-semibold text-gray-900">{{ $stats['total_vehicles'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="flex items-center">
                        <div class="p-3 bg-purple-100 rounded-lg">
                            <i class="fas fa-cog text-purple-600 text-2xl"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">Total Spare Parts</p>
                            <p class="text-2xl font-semibold text-gray-900">{{ $stats['total_spare_parts'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="flex items-center">
                        <div class="p-3 bg-green-100 rounded-lg">
                            <i class="fas fa-check-circle text-green-600 text-2xl"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">Active Listings</p>
                            <p class="text-2xl font-semibold text-gray-900">{{ $stats['active_vehicles'] + $stats['active_spare_parts'] }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- User Information -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">User Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Full Name</label>
                            <p class="mt-1 text-gray-900">{{ $user->name }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Email Address</label>
                            <p class="mt-1 text-gray-900">{{ $user->email }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Phone Number</label>
                            <p class="mt-1 text-gray-900">{{ $user->phone ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Address</label>
                            <p class="mt-1 text-gray-900">{{ $user->address ?? 'N/A' }}</p>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-600">User Role</label>
                            <span class="mt-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                {{ $user->role === 'admin' ? 'bg-purple-100 text-purple-800' : 
                                   ($user->role === 'vendor' ? 'bg-green-100 text-green-800' : 'bg-orange-100 text-orange-800') }}">
                                {{ ucfirst($user->role) }}
                            </span>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Account Status</label>
                            <span class="mt-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                {{ $user->email_verified_at ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $user->email_verified_at ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Email Verification</label>
                            <span class="mt-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                {{ $user->email_verified_at ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                {{ $user->email_verified_at ? 'Verified' : 'Not Verified' }}
                            </span>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Member Since</label>
                            <p class="mt-1 text-gray-900">{{ $user->created_at->format('M d, Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Vendor Information -->
            @if($user->role === 'vendor' && ($user->business_name || $user->kra_pin || $user->id_number || $user->business_certificate))
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Vendor Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        @if($user->business_name)
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Business Name</label>
                            <p class="mt-1 text-gray-900">{{ $user->business_name }}</p>
                        </div>
                        @endif
                        @if($user->kra_pin)
                        <div>
                            <label class="block text-sm font-medium text-gray-600">KRA PIN</label>
                            <p class="mt-1 text-gray-900">{{ $user->kra_pin }}</p>
                        </div>
                        @endif
                    </div>
                    <div class="space-y-4">
                        @if($user->id_number)
                        <div>
                            <label class="block text-sm font-medium text-gray-600">ID Number</label>
                            <p class="mt-1 text-gray-900">{{ $user->id_number }}</p>
                        </div>
                        @endif
                        @if($user->business_certificate)
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Business Certificate</label>
                            <div class="mt-1">
                                <a href="{{ route('admin.users.download-business-certificate', $user->id) }}" 
                                   class="text-red-600 hover:text-red-700 flex items-center">
                                    <i class="fas fa-download mr-2"></i>Download Certificate
                                </a>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif

            <!-- Recent Activity -->
            @if($user->role === 'vendor' && ($user->vehicles->count() > 0 || $user->spareParts->count() > 0))
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Listings</h3>
                <div class="space-y-4">
                    <!-- Recent Vehicles -->
                    @foreach($user->vehicles->take(3) as $vehicle)
                    <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-car text-gray-400"></i>
                            <div>
                                <p class="font-medium text-gray-900">{{ $vehicle->title }}</p>
                                <p class="text-sm text-gray-500">KSh {{ number_format($vehicle->price) }}</p>
                            </div>
                        </div>
                        <span class="px-2 py-1 text-xs rounded-full {{ $vehicle->is_approved ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                            {{ $vehicle->is_approved ? 'Approved' : 'Pending' }}
                        </span>
                    </div>
                    @endforeach

                    <!-- Recent Spare Parts -->
                    @foreach($user->spareParts->take(3) as $part)
                    <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-cog text-gray-400"></i>
                            <div>
                                <p class="font-medium text-gray-900">{{ $part->name }}</p>
                                <p class="text-sm text-gray-500">KSh {{ number_format($part->price) }}</p>
                            </div>
                        </div>
                        <span class="px-2 py-1 text-xs rounded-full {{ $part->is_approved ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                            {{ $part->is_approved ? 'Approved' : 'Pending' }}
                        </span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Quick Actions -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
                <div class="space-y-3">
                    <a href="{{ route('admin.users.change-password', $user->id) }}" 
                       class="w-full bg-yellow-600 text-white py-2 rounded-lg hover:bg-yellow-700 transition duration-300 flex items-center justify-center">
                        <i class="fas fa-key mr-2"></i>Change Password
                    </a>

                    @if($user->id !== auth()->id())
                    <form action="{{ route('admin.users.toggle-status', $user->id) }}" method="POST" class="inline w-full">
                        @csrf
                        <button type="submit" 
                                class="w-full {{ $user->email_verified_at ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700' }} text-white py-2 rounded-lg transition duration-300 flex items-center justify-center">
                            <i class="fas fa-power-off mr-2"></i>{{ $user->email_verified_at ? 'Deactivate User' : 'Activate User' }}
                        </button>
                    </form>

                    <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST" class="inline w-full">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                onclick="return confirm('Are you sure you want to delete this user? This action cannot be undone.')"
                                class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 transition duration-300 flex items-center justify-center">
                            <i class="fas fa-trash mr-2"></i>Delete User
                        </button>
                    </form>
                    @endif
                </div>
            </div>

            <!-- Account Information -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Account Information</h3>
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Member Since:</span>
                        <span class="font-medium">{{ $user->created_at->format('M d, Y') }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Last Updated:</span>
                        <span class="font-medium">{{ $user->updated_at->format('M d, Y') }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Email Verified:</span>
                        <span class="font-medium">{{ $user->email_verified_at ? $user->email_verified_at->format('M d, Y') : 'Not Verified' }}</span>
                    </div>
                </div>
            </div>

            <!-- Listing Statistics -->
            @if($user->role === 'vendor')
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Listing Statistics</h3>
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Total Vehicles:</span>
                        <span class="font-medium">{{ $stats['total_vehicles'] }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Pending Vehicles:</span>
                        <span class="font-medium text-orange-600">{{ $stats['pending_vehicles'] }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Active Vehicles:</span>
                        <span class="font-medium text-green-600">{{ $stats['active_vehicles'] }}</span>
                    </div>
                    <div class="border-t border-gray-200 pt-3">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Total Spare Parts:</span>
                        <span class="font-medium">{{ $stats['total_spare_parts'] }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Pending Parts:</span>
                        <span class="font-medium text-orange-600">{{ $stats['pending_spare_parts'] }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Active Parts:</span>
                        <span class="font-medium text-green-600">{{ $stats['active_spare_parts'] }}</span>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection