@extends('layouts.app')

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

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="mb-8">
        <h1 class="text-3xl font-extrabold text-secondary">Welcome back, {{ Session::get('academy_profile')['name'] ?? Session::get('academy_username') }}!</h1>
        <p class="text-gray-500 mt-2">Here is a quick overview of your progress and current enrollments.</p>
    </div>

    <!-- Progress Overview -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col justify-between">
            <h3 class="text-gray-500 text-sm font-semibold uppercase tracking-wider mb-2">Total Courses</h3>
            <div class="text-4xl font-extrabold text-primary">{{ $progress['total_courses'] ?? 0 }}</div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col justify-between">
            <h3 class="text-gray-500 text-sm font-semibold uppercase tracking-wider mb-2">Completed</h3>
            <div class="text-4xl font-extrabold text-green-600">{{ $progress['completed_courses'] ?? 0 }}</div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col justify-between">
            <h3 class="text-gray-500 text-sm font-semibold uppercase tracking-wider mb-2">In Progress</h3>
            <div class="text-4xl font-extrabold text-blue-600">{{ $progress['in_progress_courses'] ?? 0 }}</div>
        </div>
    </div>

    <!-- Active Enrollments -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
        <div class="border-b border-gray-100 bg-gray-50 px-6 py-4 flex justify-between items-center">
            <h2 class="text-lg font-bold text-secondary">Recent Enrollments</h2>
            <a href="{{ route('enrollments') }}" class="text-sm font-medium text-primary hover:underline">View All</a>
        </div>
        
        @if(count($enrollments) > 0)
            <ul class="divide-y divide-gray-100">
                @foreach($enrollments as $enrollment)
                <li class="p-6 hover:bg-gray-50 transition-colors flex flex-col sm:flex-row sm:items-center justify-between">
                    <div class="mb-4 sm:mb-0">
                        <h4 class="text-lg font-bold text-gray-800">{{ $enrollment['course']['name'] ?? 'Course Name' }}</h4>
                        <div class="text-sm text-gray-500 mt-1">
                            Session: <span class="font-medium text-gray-700">{{ $enrollment['session']['name'] ?? 'N/A' }}</span>
                            &bull; Enrolled: {{ \Carbon\Carbon::parse($enrollment['enrollment_date'] ?? now())->format('M d, Y') }}
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                            {{ ($enrollment['status'] ?? '') === 'Complete' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800' }}">
                            {{ $enrollment['status'] ?? 'Active' }}
                        </span>
                        <a href="{{ route('course.detail', $enrollment['course']['id'] ?? 1) }}" class="px-4 py-2 bg-primary text-white text-sm font-medium rounded hover:bg-primary-hover transition-colors">
                            Continue
                        </a>
                    </div>
                </li>
                @endforeach
            </ul>
        @else
            <div class="p-6 text-center text-gray-500">
                You have no active enrollments right now.
                <div class="mt-4">
                    <a href="{{ route('courses') }}" class="text-primary hover:underline font-medium">Browse Courses</a>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection