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

@section('content')
<div class="row g-3 mb-3">
    <div class="col-md-8">
        <h2 class="mb-2 text-body-emphasis">User Details</h2>
        <p class="text-body-tertiary lh-sm">Comprehensive user information and activity</p>
    </div>
    <div class="col-md-4 d-flex justify-content-end">
        <div class="btn-group" role="group">
            <a href="{{ route('state.users.index') }}" class="btn btn-phoenix-secondary">
                <span class="fas fa-arrow-left me-2"></span>Back to Users
            </a>
            <a href="{{ route('state.users.edit', $user->id ?? 1) }}" class="btn btn-primary">
                <span class="fas fa-edit me-2"></span>Edit User
            </a>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">User Information</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <h6 class="text-body-secondary mb-1">Full Name</h6>
                        <p class="mb-0">{{ $user->name ?? 'John Doe' }}</p>
                    </div>
                    
                    <div class="col-md-6">
                        <h6 class="text-body-secondary mb-1">Email Address</h6>
                        <p class="mb-0">{{ $user->email ?? 'john.doe@example.com' }}</p>
                    </div>
                    
                    <div class="col-md-6">
                        <h6 class="text-body-secondary mb-1">Phone Number</h6>
                        <p class="mb-0">{{ $user->phone ?? '+1 (555) 123-4567' }}</p>
                    </div>
                    
                    <div class="col-md-6">
                        <h6 class="text-body-secondary mb-1">Date of Birth</h6>
                        <p class="mb-0">{{ $user->date_of_birth ? $user->date_of_birth->format('M d, Y') : 'Not provided' }}</p>
                    </div>
                    
                    <div class="col-md-6">
                        <h6 class="text-body-secondary mb-1">Belt Rank</h6>
                        <p class="mb-0">
                            <span class="badge bg-primary-subtle text-primary">
                                {{ $user->belt_rank ?? 'White Belt' }}
                            </span>
                        </p>
                    </div>
                    
                    <div class="col-md-6">
                        <h6 class="text-body-secondary mb-1">Status</h6>
                        <p class="mb-0">
                            @if(($user->status ?? 'pending') == 'approved')
                                <span class="badge bg-success-subtle text-success">Approved</span>
                            @elseif(($user->status ?? 'pending') == 'pending')
                                <span class="badge bg-warning-subtle text-warning">Pending</span>
                            @else
                                <span class="badge bg-danger-subtle text-danger">Rejected</span>
                            @endif
                        </p>
                    </div>
                    
                    <div class="col-12">
                        <h6 class="text-body-secondary mb-1">Address</h6>
                        <p class="mb-0">{{ $user->address ?? 'Address not provided' }}</p>
                    </div>
                    
                    <div class="col-md-6">
                        <h6 class="text-body-secondary mb-1">Member Since</h6>
                        <p class="mb-0">{{ $user->created_at ? $user->created_at->format('M d, Y') : now()->format('M d, Y') }}</p>
                    </div>
                    
                    <div class="col-md-6">
                        <h6 class="text-body-secondary mb-1">Last Login</h6>
                        <p class="mb-0">{{ $user->last_login_at ? $user->last_login_at->diffForHumans() : 'Never' }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Activity Log -->
        <div class="card mt-3">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">Recent Activity</h6>
            </div>
            <div class="card-body">
                <div class="timeline timeline-simple">
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary"></div>
                        <div class="timeline-content">
@extends('layouts.state')

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

@section('content')
<div class="row g-3 mb-3">
    <div class="col-md-8">
        <h2 class="mb-2 text-body-emphasis">User Details</h2>
        <p class="text-body-tertiary lh-sm">View complete member information</p>
    </div>
    <div class="col-md-4 d-flex justify-content-end">
        <a href="{{ route('state.users.index') }}" class="btn btn-phoenix-secondary me-2">
            <span class="fas fa-arrow-left me-2"></span>Back
        </a>
        <a href="{{ route('state.users.edit', $user->id) }}" class="btn btn-phoenix-primary">
            <span class="fas fa-edit me-2"></span>Edit
        </a>
    </div>
</div>

<div class="row g-3">
    <div class="col-xxl-4">
        <div class="card border h-100">
            <div class="card-body">
                <div class="text-center">
                    <div class="avatar avatar-5xl mb-3">
                        <div class="avatar-name rounded-circle bg-primary">
                            <span class="text-white fs-2">{{ substr($user->name, 0, 1) }}</span>
                        </div>
                    </div>
                    <h5 class="mb-2">{{ $user->name }}</h5>
                    <p class="text-body-tertiary mb-3">{{ $user->email }}</p>
                    
                    @if($user->status == 'active')
                        <span class="badge badge-phoenix badge-phoenix-success fs-9 mb-4">Active Member</span>
                    @elseif($user->status == 'inactive')
                        <span class="badge badge-phoenix badge-phoenix-warning fs-9 mb-4">Inactive</span>
                    @else
                        <span class="badge badge-phoenix badge-phoenix-danger fs-9 mb-4">Suspended</span>
                    @endif
                    
                    <div class="d-flex justify-content-center gap-2">
                        <button class="btn btn-phoenix-primary btn-sm" data-bs-toggle="modal" data-bs-target="#statusModal">
                            <span class="fas fa-edit me-2"></span>Update Status
                        </button>
                        <button class="btn btn-phoenix-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#beltModal">
                            <span class="fas fa-medal me-2"></span>Update Belt
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xxl-8">
        <div class="card border h-100">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">Member Information</h6>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="mb-4">
                            <h6 class="text-body-secondary mb-2">Personal Information</h6>
                            <div class="border-start border-primary ps-3">
                                <div class="mb-2">
                                    <strong>Full Name:</strong> {{ $user->name }}
                                </div>
                                <div class="mb-2">
                                    <strong>Email:</strong> {{ $user->email }}
                                </div>
                                <div class="mb-2">
                                    <strong>Phone:</strong> {{ $user->phone ?? 'Not provided' }}
                                </div>
                                <div class="mb-2">
                                    <strong>Date of Birth:</strong> {{ $user->date_of_birth ?? 'Not provided' }}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="mb-4">
                            <h6 class="text-body-secondary mb-2">Training Information</h6>
                            <div class="border-start border-success ps-3">
                                <div class="mb-2">
                                    <strong>Current Belt:</strong> 
                                    <span class="badge badge-phoenix badge-phoenix-info">{{ $user->belt_level ?? 'White Belt' }}</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Program:</strong> {{ $user->program ?? 'Adult Program' }}
                                </div>
                                <div class="mb-2">
                                    <strong>Experience:</strong> {{ $user->experience_years ?? 0 }} years
                                </div>
                                <div class="mb-2">
                                    <strong>Instructor:</strong> {{ $user->instructor ?? 'Master Kim' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
                            <h6 class="timeline-title">Profile Updated</h6>
                            <p class="text-body-tertiary fs-9 mb-0">User updated their profile information</p>
                            <small class="text-body-tertiary">2 hours ago</small>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker bg-success"></div>
                        <div class="timeline-content">
                            <h6 class="timeline-title">Event Registration</h6>
                            <p class="text-body-tertiary fs-9 mb-0">Registered for Spring Tournament</p>
                            <small class="text-body-tertiary">1 day ago</small>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker bg-info"></div>
                        <div class="timeline-content">
                            <h6 class="timeline-title">Login Activity</h6>
                            <p class="text-body-tertiary fs-9 mb-0">User logged into the system</p>
                            <small class="text-body-tertiary">3 days ago</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- User Stats -->
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">User Statistics</h6>
            </div>
            <div class="card-body">
                <div class="row g-3 text-center">
                    <div class="col-6">
                        <div class="border-end">
                            <h4 class="text-primary mb-1">5</h4>
                            <p class="text-body-tertiary fs-9 mb-0">Events Joined</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <h4 class="text-success mb-1">3</h4>
                        <p class="text-body-tertiary fs-9 mb-0">Certificates</p>
                    </div>
                    <div class="col-6">
                        <div class="border-end border-top pt-3">
                            <h4 class="text-warning mb-1">2</h4>
                            <p class="text-body-tertiary fs-9 mb-0">Belt Tests</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="border-top pt-3">
                            <h4 class="text-info mb-1">8</h4>
                            <p class="text-body-tertiary fs-9 mb-0">Total Sessions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="card mt-3">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">Quick Actions</h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('state.users.edit', $user->id ?? 1) }}" class="btn btn-outline-primary btn-sm">
                        <span class="fas fa-edit me-2"></span>Edit Profile
                    </a>
                    <a href="#" class="btn btn-outline-success btn-sm">
                        <span class="fas fa-envelope me-2"></span>Send Message
                    </a>
                    <a href="#" class="btn btn-outline-info btn-sm">
                        <span class="fas fa-certificate me-2"></span>View Certificates
                    </a>
                    <hr>
                    <button class="btn btn-outline-warning btn-sm" onclick="resetPassword()">
                        <span class="fas fa-key me-2"></span>Reset Password
                    </button>
                    <button class="btn btn-outline-danger btn-sm" onclick="suspendUser()">
                        <span class="fas fa-ban me-2"></span>Suspend User
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function resetPassword() {
    if (confirm('Are you sure you want to reset this user\'s password?')) {
        alert('Password reset functionality will be implemented');
    }
}

function suspendUser() {
    if (confirm('Are you sure you want to suspend this user?')) {
        alert('User suspension functionality will be implemented');
    }
}
</script>
@endsection