@extends('layouts.self-paced-trainee-dashboard')

@section('title', 'My Courses - Trainee Dashboard')

@section('content')

@php
    $gradients = [
        'from-indigo-500 to-purple-600',
        'from-teal-500 to-cyan-600',
        'from-rose-500 to-pink-600',
        'from-amber-500 to-orange-600',
    ];
@endphp

{{-- ===================================================================
     1. HERO HEADER SECTION
=================================================================== --}}
<div class="w-full bg-gradient-to-br from-indigo-600 via-indigo-700 to-purple-800 relative overflow-hidden">
    
    {{-- Decorative background elements --}}
    <div class="absolute inset-0 overflow-hidden pointer-events-none opacity-10">
        <div class="absolute -top-20 -right-20 w-80 h-80 bg-white rounded-full"></div>
        <div class="absolute top-16 -left-16 w-64 h-64 bg-white rounded-full"></div>
        <div class="absolute bottom-0 right-1/4 w-40 h-40 bg-white rounded-full"></div>
    </div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
        {{-- Welcome Message --}}
        <div class="mb-10">
            <p class="text-indigo-200 text-sm font-semibold mb-2">Welcome back!</p>
            <h1 class="text-4xl sm:text-5xl font-bold text-white mb-3 leading-tight">
                Hello, {{ $user->name }}!
            </h1>
            <p class="text-indigo-100 text-lg max-w-2xl">
                Continue your learning journey. Below are all your enrolled courses and important learning statistics.
            </p>
        </div>

        {{-- Statistics Grid (Hero Section) --}}
        <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-6 gap-3 sm:gap-4">
            
            {{-- Active Registrations --}}
            <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4 text-center">
                <p class="text-3xl sm:text-4xl font-bold text-white">{{ $stats['active_registrations'] }}</p>
                <p class="text-indigo-200 text-xs mt-1 font-medium">Active Courses</p>
            </div>

            {{-- Certificates Earned --}}
            <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4 text-center">
                <p class="text-3xl sm:text-4xl font-bold text-amber-300">{{ $stats['certificates_earned'] }}</p>
                <p class="text-indigo-200 text-xs mt-1 font-medium">Certificates</p>
            </div>

            {{-- Days in System --}}
            <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4 text-center">
                <p class="text-3xl sm:text-4xl font-bold text-green-300">{{ $stats['days_in_system'] }}</p>
                <p class="text-indigo-200 text-xs mt-1 font-medium">Days Active</p>
            </div>

            {{-- Registration Date --}}
            <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4 text-center">
                <p class="text-white text-sm font-semibold">{{ $stats['registration_date']->format('M d, Y') }}</p>
                <p class="text-indigo-200 text-xs mt-1 font-medium">Joined</p>
            </div>

            {{-- Overall Progress --}}
            <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4 text-center">
                <p class="text-3xl sm:text-4xl font-bold text-blue-300">{{ $stats['overall_progress'] }}%</p>
                <p class="text-indigo-200 text-xs mt-1 font-medium">Progress</p>
            </div>

            {{-- Registered IP --}}
            <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4 text-center">
                <p class="text-white text-xs font-mono font-semibold break-all">{{ $stats['registered_ip'] }}</p>
                <p class="text-indigo-200 text-xs mt-1 font-medium">IP Address</p>
            </div>
        </div>
    </div>
</div>

{{-- ===================================================================
     2. DASHBOARD CONTENTS SECTION
=================================================================== --}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    
    {{-- Learning Progress Bar --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-8">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold text-gray-900 flex items-center gap-2">
                <i class="fas fa-chart-line text-indigo-600"></i>
                Your Learning Progress
            </h2>
            <span class="text-2xl font-bold text-indigo-600">{{ $stats['overall_progress'] }}%</span>
        </div>
        
        {{-- Progress Bar --}}
        <div class="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
            <div class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 transition-all duration-500"
                 style="width: {{ $stats['overall_progress'] }}%"></div>
        </div>
        
        <div class="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-4 text-center">
            <div>
                <p class="text-sm text-gray-600">Active Courses</p>
                <p class="text-2xl font-bold text-gray-900">{{ $stats['active_registrations'] }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-600">Completed</p>
                <p class="text-2xl font-bold text-green-600">{{ $stats['completed_courses'] }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-600">Pending Payment</p>
                <p class="text-2xl font-bold text-amber-600">{{ $stats['pending_payment'] }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-600">Total Enrolled</p>
                <p class="text-2xl font-bold text-blue-600">{{ $stats['total_enrollments'] }}</p>
            </div>
        </div>
    </div>

    {{-- Dashboard Actions Row --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
        
        {{-- Download Course Books --}}
        <a href="#" class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition group">
            <div class="flex items-start justify-between">
                <div>
                    <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mb-3 group-hover:bg-blue-200 transition">
                        <i class="fas fa-book text-blue-600 text-lg"></i>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-1">Course Books</h3>
                    <p class="text-sm text-gray-600">Download study materials and course books</p>
                </div>
                <i class="fas fa-arrow-right text-gray-400 group-hover:text-blue-600 transition"></i>
            </div>
        </a>

        {{-- Upload Payment Evidence --}}
        <a href="#" class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition group">
            <div class="flex items-start justify-between">
                <div>
                    <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mb-3 group-hover:bg-green-200 transition">
                        <i class="fas fa-receipt text-green-600 text-lg"></i>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-1">Payment Evidence</h3>
                    <p class="text-sm text-gray-600">Upload proof of payment for manual verification</p>
                </div>
                <i class="fas fa-arrow-right text-gray-400 group-hover:text-green-600 transition"></i>
            </div>
        </a>

        {{-- Course Certificates --}}
        <a href="#" class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition group">
            <div class="flex items-start justify-between">
                <div>
                    <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-3 group-hover:bg-purple-200 transition">
                        <i class="fas fa-certificate text-purple-600 text-lg"></i>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-1">My Certificates</h3>
                    <p class="text-sm text-gray-600">View and download your earned certificates</p>
                </div>
                <i class="fas fa-arrow-right text-gray-400 group-hover:text-purple-600 transition"></i>
            </div>
        </a>
    </div>
</div>

{{-- ===================================================================
     3. LEARNING DISCLAIMER SECTION
=================================================================== --}}
<div class="bg-amber-50 border border-amber-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="flex gap-4">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-amber-600 text-2xl mt-1"></i>
            </div>
            <div class="flex-1">
                <h3 class="text-lg font-bold text-amber-900 mb-3">Learning Disclaimer & Important Information</h3>
                
                <div class="text-sm text-amber-800 space-y-3">
                    <p>
                        Welcome to our Self-Paced Learning Portal. This platform is designed to provide you with flexible, 
                        accessible educational content that you can access at your own pace and according to your schedule. 
                        Please review the following important information before you begin your learning journey.
                    </p>

                    <p>
                        <strong>Content Accuracy:</strong> While we strive to ensure all course content is accurate, current, 
                        and relevant, we do not guarantee the absolute accuracy or completeness of all materials. Course content 
                        is subject to periodic updates to reflect changes in industry standards, regulations, and best practices. 
                        You are encouraged to verify critical information through additional authoritative sources.
                    </p>

                    <p>
                        <strong>Access and Usage:</strong> Your access to this platform is personal and non-transferable. You 
                        agree to use this portal only for lawful educational purposes and in accordance with our terms of service. 
                        Unauthorized sharing, reproduction, or distribution of course materials is strictly prohibited and may 
                        result in termination of your access and legal action.
                    </p>

                    <p>
                        <strong>Certificate Validity:</strong> Certificates issued upon successful course completion are valid 
                        according to the terms specified at the time of issuance. The institution reserves the right to revoke 
                        any certificate if it is discovered that the course was not completed according to the prescribed standards 
                        or if there has been academic dishonesty.
                    </p>

                    <p>
                        <strong>Learning Commitment:</strong> Successful completion of any course requires your active participation, 
                        commitment to learning, and adherence to all course policies and deadlines. While our platform is self-paced, 
                        we recommend setting regular learning schedules and completing courses within a reasonable timeframe. Factors 
                        such as poor internet connectivity, technical issues, or user error are not grounds for automatic course extensions 
                        unless otherwise specified in your enrollment agreement.
                    </p>

                    <p>
                        <strong>Disclaimer of Liability:</strong> The institution and its instructors are not responsible for any 
                        indirect, incidental, special, consequential, or punitive damages arising from your use of this platform or 
                        the courses offered. This includes, but is not limited to, loss of data, business interruption, or any other 
                        loss whatsoever, even if we have been advised of the possibility of such damages.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ===================================================================
     4. MY COURSES SECTION
=================================================================== --}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    
    {{-- Section Header --}}
    <div class="mb-8">
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 flex items-center gap-2 mb-2">
            <i class="fas fa-graduation-cap text-indigo-600"></i>
            My Courses
        </h2>
        <p class="text-gray-600">Continue your learning or start a new course</p>
    </div>

    @if($enrollments->isEmpty())
        {{-- Empty State --}}
        <div class="rounded-2xl overflow-hidden shadow-sm">
            <div class="bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 border border-indigo-100 text-center py-20 px-6">
                <div class="w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-5 shadow-lg">
                    <i class="fas fa-book-open text-white text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">No Courses Enrolled Yet</h3>
                <p class="text-gray-600 text-sm mb-8 max-w-sm mx-auto">
                    Browse our course catalogue and enroll in a course to start your learning journey today.
                </p>
                <a href="{{ route('self-paced.public.index') }}"
                   class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white text-sm font-semibold rounded-xl hover:from-indigo-700 hover:to-purple-700 transition shadow-md">
                    <i class="fas fa-compass"></i> Browse Courses
                </a>
            </div>
        </div>
    @else
        {{-- Courses Grid --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

            @foreach($enrollments as $enrollment)
            @php
                $course = $enrollment->course;
                $progress = $enrollment->getProgressPercentage();
                $canAccess = $enrollment->canAccess();
                $gradient = $gradients[$loop->index % 4];
            @endphp

            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden flex flex-col h-full group">

                {{-- Course Image / Gradient Area --}}
                <div class="relative h-40 bg-gradient-to-br {{ $gradient }} overflow-hidden">
                    @if($course->featured_image)
                        <img src="{{ asset('storage/' . $course->featured_image) }}"
                             alt="{{ $course->title }}"
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    @else
                        <div class="w-full h-full flex items-center justify-center bg-gradient-to-br {{ $gradient }}">
                            <i class="fas fa-book-open text-white/40 text-5xl"></i>
                        </div>
                    @endif

                    {{-- Status Badge --}}
                    <div class="absolute top-3 right-3">
                        <span class="text-xs font-semibold px-3 py-1 rounded-full
                            @if($enrollment->isCompleted()) bg-green-100 text-green-700
                            @elseif($enrollment->isActive()) bg-blue-100 text-blue-700
                            @elseif($enrollment->isPendingPayment()) bg-amber-100 text-amber-700
                            @else bg-red-100 text-red-700
                            @endif">
                            @if($enrollment->isCompleted()) ✓ Completed
                            @elseif($enrollment->isActive()) Active
                            @elseif($enrollment->isPendingPayment()) Pending Payment
                            @else Payment Failed
                            @endif
                        </span>
                    </div>
                </div>

                {{-- Card Body --}}
                <div class="p-6 flex flex-col flex-1">
                    {{-- Course Title & Category --}}
                    <h3 class="font-bold text-gray-900 text-base leading-snug mb-2 line-clamp-2">
                        {{ $course->title }}
                    </h3>

                    @if($course->category)
                        <span class="text-xs text-indigo-600 font-semibold mb-4">{{ $course->category->name }}</span>
                    @endif

                    {{-- Course Description --}}
                    <p class="text-sm text-gray-600 mb-4 line-clamp-2">
                        {{ $course->description }}
                    </p>

                    {{-- Progress Bar (if accessible) --}}
                    @if($canAccess)
                    <div class="mb-4 mt-auto">
                        <div class="flex items-center justify-between text-xs text-gray-600 mb-2">
                            <span>Progress</span>
                            <span class="font-semibold {{ $progress >= 100 ? 'text-green-600' : 'text-indigo-600' }}">
                                {{ number_format($progress, 0) }}%
                            </span>
                        </div>
                        <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                            <div class="h-full transition-all duration-500
                                        {{ $progress >= 100 ? 'bg-green-500' : 'bg-indigo-500' }}"
                                 style="width: {{ $progress }}%"></div>
                        </div>
                    </div>
                    @endif

                    {{-- Action Button --}}
                    <div class="mt-4">
                        @if($canAccess)
                            <a href="{{ route('self-paced.learn.overview', $course) }}"
                               class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white text-sm font-semibold rounded-lg hover:from-indigo-700 hover:to-purple-700 transition shadow-md">
                                <i class="fas fa-play"></i>
                                {{ $progress > 0 ? 'Continue Learning' : 'Start Learning' }}
                            </a>
                        @elseif($enrollment->isPendingPayment())
                            <a href="{{ route('self-paced.public.payment', [$course, $enrollment]) }}"
                               class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-amber-500 text-white text-sm font-semibold rounded-lg hover:bg-amber-600 transition shadow-md">
                                <i class="fas fa-credit-card"></i> Complete Payment
                            </a>
                        @else
                            <a href="{{ route('self-paced.public.register', $course) }}"
                               class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg hover:bg-gray-300 transition shadow-md">
                                <i class="fas fa-redo"></i> Retry Enrollment
                            </a>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach

        </div>

        {{-- Browse More Courses Button --}}
        <div class="mt-12 text-center">
            <a href="{{ route('self-paced.public.index') }}"
               class="inline-flex items-center gap-2 px-6 py-3 border-2 border-indigo-600 text-indigo-600 font-semibold rounded-xl hover:bg-indigo-50 transition">
                <i class="fas fa-plus-circle"></i> Enroll in More Courses
            </a>
        </div>
    @endif

</div>

@endsection
