@extends('layouts.app')

@section('title', 'My Dashboard')

@section('content')
<div class="container-fluid">
    <!-- Welcome Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="mb-1">Welcome back, {{ $user->name }}!</h2>
                            <p class="mb-0 opacity-75">Here's your learning progress and upcoming events</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <div class="d-flex justify-content-end">
                                @if($user->badges->count() > 0)
                                    <div class="mr-3">
                                        <i class="fas fa-medal fa-2x"></i>
                                        <div class="small">{{ $user->badges->count() }} Badges</div>
                                    </div>
                                @endif
                                <div>
                                    <i class="fas fa-calendar fa-2x"></i>
                                    <div class="small">{{ $userStats['total_events'] }} Events</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-calendar-check fa-2x text-primary mb-2"></i>
                    <h4 class="mb-1">{{ $userStats['total_events'] }}</h4>
                    <p class="text-muted mb-0">Events Joined</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-tasks fa-2x text-success mb-2"></i>
                    <h4 class="mb-1">{{ $userStats['passed_assessments'] }}/{{ $userStats['total_assessments'] }}</h4>
                    <p class="text-muted mb-0">Assessments Passed</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-book fa-2x text-info mb-2"></i>
                    <h4 class="mb-1">{{ $userStats['completed_modules'] }}/{{ $userStats['total_modules'] }}</h4>
                    <p class="text-muted mb-0">Modules Completed</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-medal fa-2x text-warning mb-2"></i>
                    <h4 class="mb-1">{{ $userStats['total_badges'] }}</h4>
                    <p class="text-muted mb-0">Badges Earned</p>
                </div>
            </div>
        </div>
    </div>

    <!-- My Events Section -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">My Events</h3>
                </div>
                <div class="card-body">
                    @if($userEvents->count() > 0)
                        <div class="row">
                            @foreach($userEvents as $eventData)
                                @php $event = $eventData['event']; @endphp
                                <div class="col-md-6 col-lg-4 mb-4">
                                    <div class="card h-100 border-left-primary">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <h5 class="card-title mb-0">{{ $event->name }}</h5>
                                                @if($event->is_active)
                                                    <span class="badge badge-success">Active</span>
                                                @else
                                                    <span class="badge badge-secondary">Inactive</span>
                                                @endif
                                            </div>
                                            
                                            @if($event->description)
                                                <p class="card-text text-muted small">
                                                    {{ Str::limit(strip_tags($event->description), 100) }}
                                                </p>
                                            @endif
                                            
                                            <!-- Event Details -->
                                            <div class="mb-3">
                                                @if($event->location)
                                                    <div class="small text-muted mb-1">
                                                        <i class="fas fa-map-marker-alt"></i> {{ $event->location }}
                                                    </div>
                                                @endif
                                                @if($event->start_date)
                                                    <div class="small text-muted mb-1">
                                                        <i class="fas fa-calendar"></i> {{ $event->start_date->format('M j, Y g:i A') }}
                                                    </div>
                                                @endif
                                                @if($eventData['last_activity'])
                                                    <div class="small text-muted">
                                                        <i class="fas fa-clock"></i> Last activity: {{ $eventData['last_activity']->diffForHumans() }}
                                                    </div>
                                                @endif
                                            </div>
                                            
                                            <!-- Progress Indicators -->
                                            <div class="mb-3">
                                                @if($eventData['assessments_total'] > 0)
                                                    <div class="mb-2">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <small class="text-muted">Assessments</small>
                                                            <small class="text-muted">{{ $eventData['assessments_completed'] }}/{{ $eventData['assessments_total'] }}</small>
                                                        </div>
                                                        <div class="progress" style="height: 4px;">
                                                            <div class="progress-bar bg-success" 
                                                                 style="width: {{ $eventData['assessments_total'] > 0 ? ($eventData['assessments_completed'] / $eventData['assessments_total']) * 100 : 0 }}%"></div>
                                                        </div>
                                                    </div>
                                                @endif
                                                
                                                @if($eventData['modules_total'] > 0)
                                                    <div class="mb-2">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <small class="text-muted">Modules</small>
                                                            <small class="text-muted">{{ $eventData['modules_completed'] }}/{{ $eventData['modules_total'] }}</small>
                                                        </div>
                                                        <div class="progress" style="height: 4px;">
                                                            <div class="progress-bar bg-info" 
                                                                 style="width: {{ $eventData['modules_total'] > 0 ? ($eventData['modules_completed'] / $eventData['modules_total']) * 100 : 0 }}%"></div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                            
                                            <!-- Action Buttons -->
                                            <div class="d-flex justify-content-between">
                                                <a href="{{ route('user.event.details', $event->id) }}" class="btn btn-primary btn-sm">
                                                    View Details
                                                </a>
                                                @if($event->is_active)
                                                    <a href="#" class="btn btn-outline-primary btn-sm">
                                                        Continue Learning
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">No Events Yet</h4>
                            <p class="text-muted">You haven't been associated with any events yet. Contact your administrator or use an event registration link to join an event.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity Section -->
    @if($user->assessmentAttempts->count() > 0 || $user->moduleProgress->count() > 0)
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Recent Activity</h3>
                    </div>
                    <div class="card-body">
                        <div class="timeline">
                            @php
                                $recentActivity = collect();
                                
                                // Add recent assessment attempts
                                foreach($user->assessmentAttempts->take(5) as $attempt) {
                                    $recentActivity->push([
                                        'type' => 'assessment',
                                        'date' => $attempt->attempted_at,
                                        'title' => 'Assessment: ' . ($attempt->assessment->name ?? 'Unknown Assessment'),
                                        'status' => $attempt->status,
                                        'score' => $attempt->score,
                                    ]);
                                }
                                
                                // Add recent module progress
                                foreach($user->moduleProgress->take(5) as $progress) {
                                    $recentActivity->push([
                                        'type' => 'module',
                                        'date' => $progress->updated_at,
                                        'title' => 'Module: ' . ($progress->module->name ?? 'Unknown Module'),
                                        'status' => $progress->status,
                                    ]);
                                }
                                
                                $recentActivity = $recentActivity->sortByDesc('date')->take(8);
                            @endphp
                            
                            @foreach($recentActivity as $activity)
                                <div class="timeline-item">
                                    <div class="timeline-marker 
                                        @if($activity['type'] === 'assessment')
                                            @if($activity['status'] === 'passed') bg-success @else bg-warning @endif
                                        @else
                                            @if($activity['status'] === 'completed') bg-info @else bg-secondary @endif
                                        @endif
                                    "></div>
                                    <div class="timeline-content">
                                        <h6 class="mb-1">{{ $activity['title'] }}</h6>
                                        <p class="text-muted mb-1">
                                            Status: 
                                            <span class="badge 
                                                @if($activity['status'] === 'passed' || $activity['status'] === 'completed') badge-success 
                                                @elseif($activity['status'] === 'failed') badge-danger 
                                                @else badge-warning @endif
                                            ">
                                                {{ ucfirst($activity['status']) }}
                                            </span>
                                            @if(isset($activity['score']))
                                                - Score: {{ $activity['score'] }}%
                                            @endif
                                        </p>
                                        <small class="text-muted">{{ $activity['date']->diffForHumans() }}</small>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

<style>
.border-left-primary {
    border-left: 4px solid #007bff !important;
}

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -35px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}

.timeline::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-content h6 {
    color: #495057;
}
</style>
@endsection