@extends('admin.layouts.app')

@section('title', 'User Details')
@section('page-title', 'User: ' . $user->name)

@section('content')
<div style="background: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px;">
    <h3 style="margin-bottom: 20px;">User Information</h3>
    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">
        <div>
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Name</label>
            <p>{{ $user->name }}</p>
        </div>
        <div>
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Email</label>
            <p>{{ $user->email }}</p>
        </div>
        <div>
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Admin</label>
            <p>{{ $user->is_admin ? 'Yes' : 'No' }}</p>
        </div>
        <div>
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Created</label>
            <p>{{ $user->created_at->format('Y-m-d H:i:s') }}</p>
        </div>
    </div>
</div>

<div style="background: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px;">
    <h3 style="margin-bottom: 20px;">Statistics</h3>
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
        <div>
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Total Reviews</label>
            <p style="font-size: 24px; color: #3498db;">{{ $stats['total_reviews'] }}</p>
        </div>
        <div>
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Total Cards</label>
            <p style="font-size: 24px; color: #27ae60;">{{ $stats['total_cards'] }}</p>
        </div>
        <div>
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Study Streak</label>
            <p style="font-size: 24px; color: #e74c3c;">{{ $stats['study_streak'] }}</p>
        </div>
    </div>
</div>

<div style="background: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px;">
    <h3 style="margin-bottom: 20px;">Roles</h3>
    <div style="margin-bottom: 20px;">
        @foreach ($user->roles as $role)
            <span style="display: inline-block; background-color: #3498db; color: white; padding: 5px 10px; border-radius: 4px; margin-right: 10px; margin-bottom: 10px;">{{ $role->name }}</span>
        @endforeach
    </div>
    @if (auth()->user()->hasPermission('users.manage-roles'))
        <a href="{{ route('admin.users.edit', $user) }}" class="btn">Manage Roles</a>
    @endif
</div>

<div style="margin-bottom: 20px;">
    @if (auth()->user()->hasPermission('users.update'))
        <a href="{{ route('admin.users.edit', $user) }}" class="btn">Edit User</a>
    @endif
    <a href="{{ route('admin.users.index') }}" class="btn" style="background-color: #95a5a6;">Back to Users</a>
</div>
@endsection