@extends('layouts.admin')

@section('title', 'User Details - Admin')
@section('page-title', 'User Details')
@section('page-description', 'View user information')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="glass-card rounded-2xl p-8 border border-white/10" data-aos="fade-up">
        <div class="flex items-center gap-4 mb-6">
            <img src="https://ui-avatars.com/api/?background=8B5CF6&color=fff&name=John+Doe" class="w-20 h-20 rounded-full border-2 border-purple-500">
            <div>
                <h2 class="text-2xl font-bold text-white">John Doe</h2>
                <p class="text-gray-400">john.doe@example.com</p>
                <span class="badge badge-success mt-2">Active</span>
            </div>
        </div>
        
        <div class="grid md:grid-cols-2 gap-6">
            <div class="p-4 bg-white/5 rounded-lg">
                <p class="text-gray-400 text-sm">User ID</p>
                <p class="text-white font-semibold">#USR-0012</p>
            </div>
            <div class="p-4 bg-white/5 rounded-lg">
                <p class="text-gray-400 text-sm">Role</p>
                <p class="text-white font-semibold">Couple</p>
            </div>
            <div class="p-4 bg-white/5 rounded-lg">
                <p class="text-gray-400 text-sm">Joined Date</p>
                <p class="text-white font-semibold">January 15, 2024</p>
            </div>
            <div class="p-4 bg-white/5 rounded-lg">
                <p class="text-gray-400 text-sm">Subscription</p>
                <p class="text-white font-semibold">Pro Plan</p>
            </div>
            <div class="p-4 bg-white/5 rounded-lg">
                <p class="text-gray-400 text-sm">Wedding Date</p>
                <p class="text-white font-semibold">June 15, 2024</p>
            </div>
            <div class="p-4 bg-white/5 rounded-lg">
                <p class="text-gray-400 text-sm">Guests</p>
                <p class="text-white font-semibold">156 guests</p>
            </div>
        </div>
        
        <div class="mt-6 flex gap-3">
            <a href="{{ route('admin.users.edit', 1) }}" class="px-4 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">
                <i class="fas fa-edit mr-2"></i>Edit User
            </a>
            <button class="px-4 py-2 bg-red-600/20 text-red-400 rounded-lg hover:bg-red-600/30 transition">
                <i class="fas fa-ban mr-2"></i>Suspend User
            </button>
            <a href="{{ route('admin.users.index') }}" class="px-4 py-2 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition">
                Back
            </a>
        </div>
    </div>
</div>
@endsection