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

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

{{-- ===================================================================
     HERO — stats cards inside the gradient banner
=================================================================== --}}
@section('hero')
<div class="bg-gradient-to-r from-indigo-600 to-purple-700 shadow-md">
    <div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">

        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
            <div>
                <h1 class="text-2xl font-bold text-white">
                    <i class="fas fa-graduation-cap mr-2"></i>
                    Self-Paced Learning Portal
                </h1>
                <p class="text-indigo-200 mt-1 text-sm">
                    Welcome back, {{ auth()->user()->name }}. Here's what's happening today.
                </p>
            </div>
            <div class="flex flex-wrap gap-2">
                @can('create self-paced courses')
                <a href="{{ route('self-paced.dashboard.courses.create') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-white text-indigo-700 font-semibold text-sm rounded-lg hover:bg-indigo-50 transition shadow">
                    <i class="fas fa-plus"></i> New Course
                </a>
                @endcan
                @can('manage self-paced exams')
                <a href="{{ route('self-paced.dashboard.exams.index') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 text-white font-medium text-sm rounded-lg hover:bg-white/20 transition border border-white/30">
                    <i class="fas fa-plus"></i> Add Question
                </a>
                @endcan
            </div>
        </div>

        {{-- Quick-stats cards --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">

            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-indigo-200 text-xs font-medium uppercase tracking-wide">Total Courses</p>
                        <p class="text-3xl font-bold text-white mt-1">{{ $stats['total_courses'] }}</p>
                        <p class="text-indigo-300 text-xs mt-0.5">{{ $stats['published_courses'] }} published</p>
                    </div>
                    <i class="fas fa-book-open text-3xl text-white/30"></i>
                </div>
            </div>

            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-indigo-200 text-xs font-medium uppercase tracking-wide">Active Enrollments</p>
                        <p class="text-3xl font-bold text-white mt-1">{{ $stats['active_enrollments'] }}</p>
                        <p class="text-indigo-300 text-xs mt-0.5">{{ $stats['total_enrollments'] }} total</p>
                    </div>
                    <i class="fas fa-users text-3xl text-white/30"></i>
                </div>
            </div>

            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-indigo-200 text-xs font-medium uppercase tracking-wide">Exams Taken</p>
                        <p class="text-3xl font-bold text-white mt-1">{{ $stats['exams_taken'] }}</p>
                        <p class="text-indigo-300 text-xs mt-0.5">submitted attempts</p>
                    </div>
                    <i class="fas fa-clipboard-check text-3xl text-white/30"></i>
                </div>
            </div>

            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-indigo-200 text-xs font-medium uppercase tracking-wide">Certificates Issued</p>
                        <p class="text-3xl font-bold text-white mt-1">{{ $stats['certificates_issued'] }}</p>
                        <p class="text-indigo-300 text-xs mt-0.5">valid certificates</p>
                    </div>
                    <i class="fas fa-certificate text-3xl text-white/30"></i>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

{{-- ===================================================================
     MAIN CONTENT
=================================================================== --}}
@section('content')
<div class="space-y-6">

    {{-- Quick Actions --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h2 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
            <i class="fas fa-bolt text-amber-500"></i> Quick Actions
        </h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">

            @can('create self-paced courses')
            <a href="{{ route('self-paced.dashboard.courses.create') }}"
               class="flex flex-col items-center gap-2 p-4 bg-indigo-50 hover:bg-indigo-100 rounded-xl text-center transition group">
                <span class="w-10 h-10 bg-indigo-100 group-hover:bg-indigo-200 rounded-full flex items-center justify-center transition">
                    <i class="fas fa-plus text-indigo-600"></i>
                </span>
                <span class="text-xs font-medium text-gray-700">New Course</span>
            </a>
            @endcan

            @can('view self-paced courses')
            <a href="{{ route('self-paced.dashboard.courses.index') }}"
               class="flex flex-col items-center gap-2 p-4 bg-blue-50 hover:bg-blue-100 rounded-xl text-center transition group">
                <span class="w-10 h-10 bg-blue-100 group-hover:bg-blue-200 rounded-full flex items-center justify-center transition">
                    <i class="fas fa-book-open text-blue-600"></i>
                </span>
                <span class="text-xs font-medium text-gray-700">All Courses</span>
            </a>
            @endcan

            @can('manage self-paced exams')
            <a href="{{ route('self-paced.dashboard.exams.index') }}"
               class="flex flex-col items-center gap-2 p-4 bg-purple-50 hover:bg-purple-100 rounded-xl text-center transition group">
                <span class="w-10 h-10 bg-purple-100 group-hover:bg-purple-200 rounded-full flex items-center justify-center transition">
                    <i class="fas fa-question-circle text-purple-600"></i>
                </span>
                <span class="text-xs font-medium text-gray-700">Add Question</span>
            </a>
            @endcan

            @can('view self-paced enrollments')
            <a href="{{ route('self-paced.dashboard.enrollments.index') }}"
               class="flex flex-col items-center gap-2 p-4 bg-green-50 hover:bg-green-100 rounded-xl text-center transition group">
                <span class="w-10 h-10 bg-green-100 group-hover:bg-green-200 rounded-full flex items-center justify-center transition">
                    <i class="fas fa-users text-green-600"></i>
                </span>
                <span class="text-xs font-medium text-gray-700">Enrollments</span>
            </a>
            @endcan

            @can('view self-paced results')
            <a href="{{ route('self-paced.dashboard.results.index') }}"
               class="flex flex-col items-center gap-2 p-4 bg-amber-50 hover:bg-amber-100 rounded-xl text-center transition group">
                <span class="w-10 h-10 bg-amber-100 group-hover:bg-amber-200 rounded-full flex items-center justify-center transition">
                    <i class="fas fa-chart-bar text-amber-600"></i>
                </span>
                <span class="text-xs font-medium text-gray-700">View Results</span>
            </a>
            @endcan

            @can('manage self-paced certificates')
            <a href="{{ route('self-paced.dashboard.certificates.index') }}"
               class="flex flex-col items-center gap-2 p-4 bg-rose-50 hover:bg-rose-100 rounded-xl text-center transition group">
                <span class="w-10 h-10 bg-rose-100 group-hover:bg-rose-200 rounded-full flex items-center justify-center transition">
                    <i class="fas fa-certificate text-rose-600"></i>
                </span>
                <span class="text-xs font-medium text-gray-700">Certificates</span>
            </a>
            @endcan

        </div>
    </div>

    {{-- Status & Configuration Widgets --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        {{-- Paystack Configuration Widget --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <div class="flex items-start justify-between mb-4">
                <div>
                    <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-credit-card text-indigo-600"></i> Paystack Configuration
                    </h3>
                    <p class="text-xs text-gray-400 mt-1">Payment gateway status</p>
                </div>
                @can('manage self-paced paystack')
                <a href="{{ route('self-paced.dashboard.paystack.config') }}"
                   class="inline-flex items-center gap-1 px-3 py-1.5 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-medium rounded-lg transition">
                    <i class="fas fa-cog text-xs"></i> Configure
                </a>
                @endcan
            </div>

            @php
                $paystackConfigured = config('paystack.public_key') && config('paystack.secret_key');
            @endphp

            <div class="space-y-3">
                <div class="flex items-center gap-3 p-3 rounded-lg {{ $paystackConfigured ? 'bg-green-50' : 'bg-red-50' }}">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center {{ $paystackConfigured ? 'bg-green-100' : 'bg-red-100' }}">
                        <i class="fas {{ $paystackConfigured ? 'fa-check text-green-600' : 'fa-exclamation text-red-600' }}"></i>
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-medium {{ $paystackConfigured ? 'text-green-800' : 'text-red-800' }}">
                            Paystack: {{ $paystackConfigured ? 'Configured' : 'Not Configured' }}
                        </p>
                        <p class="text-xs {{ $paystackConfigured ? 'text-green-700' : 'text-red-700' }} mt-0.5">
                            {{ $paystackConfigured ? 'Ready to accept online payments' : 'Add keys to enable online payments' }}
                        </p>
                    </div>
                </div>

                @if(!$paystackConfigured)
                <div class="p-3 bg-amber-50 border border-amber-100 rounded-lg flex items-start gap-2">
                    <i class="fas fa-info-circle text-amber-500 mt-0.5 flex-shrink-0 text-sm"></i>
                    <p class="text-xs text-amber-700">
                        Online payments are disabled until Paystack keys are configured. Go to settings to add your keys.
                    </p>
                </div>
                @endif
            </div>
        </div>

        {{-- Pending Payment Verifications Widget --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <div class="flex items-start justify-between mb-4">
                <div>
                    <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-clipboard-check text-amber-600"></i> Pending Verifications
                    </h3>
                    <p class="text-xs text-gray-400 mt-1">Cash payment proofs awaiting approval</p>
                </div>
                @can('verify self-paced payments')
                <a href="{{ route('self-paced.dashboard.payment-proofs.index') }}"
                   class="inline-flex items-center gap-1 px-3 py-1.5 bg-amber-50 hover:bg-amber-100 text-amber-700 text-xs font-medium rounded-lg transition">
                    <i class="fas fa-eye text-xs"></i> View
                </a>
                @endcan
            </div>

            @php
                $pendingProofsCount = \App\Models\SelfPacedPaymentProof::where('status', 'pending')->count();
            @endphp

            <div class="space-y-3">
                <div class="flex items-center gap-3 p-3 rounded-lg {{ $pendingProofsCount > 0 ? 'bg-amber-50' : 'bg-green-50' }}">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center {{ $pendingProofsCount > 0 ? 'bg-amber-100' : 'bg-green-100' }}">
                        <span class="text-sm font-bold {{ $pendingProofsCount > 0 ? 'text-amber-600' : 'text-green-600' }}">
                            {{ $pendingProofsCount }}
                        </span>
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-medium {{ $pendingProofsCount > 0 ? 'text-amber-800' : 'text-green-800' }}">
                            {{ $pendingProofsCount }} {{ Str::plural('Proof', $pendingProofsCount) }} Pending
                        </p>
                        <p class="text-xs {{ $pendingProofsCount > 0 ? 'text-amber-700' : 'text-green-700' }} mt-0.5">
                            {{ $pendingProofsCount > 0 ? 'Waiting for your review' : 'All proofs verified' }}
                        </p>
                    </div>
                </div>

                @if($pendingProofsCount > 0)
                <div class="p-3 bg-amber-50 border border-amber-100 rounded-lg flex items-start gap-2">
                    <i class="fas fa-hourglass-end text-amber-500 mt-0.5 flex-shrink-0 text-sm"></i>
                    <p class="text-xs text-amber-700">
                        <strong>{{ $pendingProofsCount }}</strong> {{ $pendingProofsCount == 1 ? 'payment is' : 'payments are' }} awaiting your approval or rejection.
                    </p>
                </div>
                @endif
            </div>
        </div>

    </div>

    {{-- Recent Enrollments Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <h2 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                <i class="fas fa-clock text-indigo-500"></i> Recent Enrollments
            </h2>
            @can('view self-paced enrollments')
            <a href="{{ route('self-paced.dashboard.enrollments.index') }}"
               class="text-xs text-indigo-600 hover:text-indigo-800 font-medium transition">
                View all <i class="fas fa-arrow-right ml-1"></i>
            </a>
            @endcan
        </div>

        @if($recentEnrollments->isEmpty())
            <div class="px-6 py-12 text-center">
                <i class="fas fa-users text-4xl text-gray-200 mb-3 block"></i>
                <p class="text-gray-400 text-sm">No enrollments yet.</p>
                <p class="text-gray-300 text-xs mt-1">Enrollments will appear here once learners register.</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr>
                            <th class="bg-indigo-50 text-indigo-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">#</th>
                            <th class="bg-purple-50 text-purple-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Learner</th>
                            <th class="bg-blue-50 text-blue-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Course</th>
                            <th class="bg-green-50 text-green-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Status</th>
                            <th class="bg-amber-50 text-amber-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Amount Paid</th>
                            <th class="bg-rose-50 text-rose-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Enrolled</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($recentEnrollments as $i => $enrollment)
                        <tr class="odd:bg-white even:bg-gray-50 hover:bg-indigo-50/30 transition-colors border-b border-gray-100 last:border-0">
                            <td class="px-4 py-3 text-gray-400 text-xs">{{ $i + 1 }}</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <span class="w-7 h-7 bg-indigo-100 rounded-full flex items-center justify-center text-xs font-bold text-indigo-600 flex-shrink-0">
                                        {{ strtoupper(substr($enrollment->user->name ?? 'U', 0, 1)) }}
                                    </span>
                                    <div>
                                        <p class="font-medium text-gray-800 text-xs">{{ $enrollment->user->name ?? '—' }}</p>
                                        <p class="text-gray-400 text-xs">{{ $enrollment->user->email ?? '' }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <p class="font-medium text-gray-700 text-xs">{{ $enrollment->course->title ?? '—' }}</p>
                            </td>
                            <td class="px-4 py-3">
                                @php
                                    $statusColors = [
                                        'active'          => 'bg-green-100 text-green-700',
                                        'completed'       => 'bg-blue-100 text-blue-700',
                                        'pending_payment' => 'bg-amber-100 text-amber-700',
                                        'payment_failed'  => 'bg-red-100 text-red-700',
                                        'cancelled'       => 'bg-gray-100 text-gray-600',
                                    ];
                                    $color = $statusColors[$enrollment->status] ?? 'bg-gray-100 text-gray-600';
                                @endphp
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $color }}">
                                    {{ ucfirst(str_replace('_', ' ', $enrollment->status)) }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-gray-700 text-xs font-medium">
                                {{ $enrollment->amount_paid ? 'UGX ' . number_format($enrollment->amount_paid) : '—' }}
                            </td>
                            <td class="px-4 py-3 text-gray-400 text-xs">
                                {{ $enrollment->created_at?->diffForHumans() ?? '—' }}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

</div>
@endsection
