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

@section('title', 'Enrollment — ' . ($enrollment->user->name ?? 'Unknown'))
@section('page-title', 'Enrollment Details')
@section('page-subtitle', ($enrollment->user->name ?? 'Unknown') . ' — ' . ($enrollment->course->title ?? 'Unknown Course'))

@section('hero-actions')
    @can('manage self-paced enrollments')
    @if(!$enrollment->canAccess())
    <form action="{{ route('self-paced.dashboard.enrollments.activate', $enrollment) }}" method="POST" class="inline">
        @csrf
        <button type="submit"
                class="inline-flex items-center gap-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-semibold rounded-lg transition shadow">
            <i class="fas fa-play"></i> Activate
        </button>
    </form>
    @endif
    @if(!$enrollment->isCompleted() && !$enrollment->isCancelled())
    <form action="{{ route('self-paced.dashboard.enrollments.cancel', $enrollment) }}" method="POST" class="inline"
          onsubmit="return confirm('Cancel this enrollment?')">
        @csrf
        <button type="submit"
                class="inline-flex items-center gap-2 px-4 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-semibold rounded-lg transition shadow">
            <i class="fas fa-ban"></i> Cancel
        </button>
    </form>
    @endif
    @if($enrollment->isPendingPayment() || $enrollment->isPaymentFailed())
    <form action="{{ route('self-paced.dashboard.enrollments.check-payment', $enrollment) }}" method="POST" class="inline">
        @csrf
        <button type="submit"
                class="inline-flex items-center gap-2 px-4 py-2 bg-teal-500 hover:bg-teal-600 text-white text-sm font-semibold rounded-lg transition shadow">
            <i class="fas fa-rotate"></i> Check Payment
        </button>
    </form>
    @endif
    @endcan
    <a href="{{ route('self-paced.dashboard.enrollments.index') }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-arrow-left"></i> Back
    </a>
@endsection

@section('content')
<div class="space-y-5">

    {{-- Enrollment Detail Card --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

        {{-- Main Info --}}
        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 class="text-sm font-semibold text-gray-800 mb-5 flex items-center gap-2">
                <i class="fas fa-id-card text-indigo-500"></i> Enrollment Information
            </h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                {{-- Trainee --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-user text-gray-300"></i> Trainee
                    </p>
                    <div class="flex items-center gap-2">
                        <span class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center text-sm font-bold text-purple-600 flex-shrink-0">
                            {{ strtoupper(substr($enrollment->user->name ?? 'U', 0, 1)) }}
                        </span>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">{{ $enrollment->user->name ?? '—' }}</p>
                            <p class="text-xs text-gray-400">{{ $enrollment->user->email ?? '—' }}</p>
                        </div>
                    </div>
                </div>

                {{-- Course --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-book text-gray-300"></i> Course
                    </p>
                    <a href="{{ route('self-paced.dashboard.courses.show', $enrollment->course) }}"
                       class="text-sm font-semibold text-indigo-600 hover:text-indigo-800 transition">
                        {{ $enrollment->course->title ?? '—' }}
                    </a>
                </div>

                {{-- Status --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-circle-info text-gray-300"></i> Status
                    </p>
                    @php
                        $statusMap = [
                            'active'          => ['bg-green-100 text-green-700',  'fa-circle-check',   'Active'],
                            'completed'       => ['bg-blue-100 text-blue-700',    'fa-graduation-cap', 'Completed'],
                            'pending_payment' => ['bg-amber-100 text-amber-700',  'fa-clock',          'Pending Payment'],
                            'payment_failed'  => ['bg-red-100 text-red-700',      'fa-circle-xmark',   'Payment Failed'],
                            'cancelled'       => ['bg-gray-100 text-gray-500',    'fa-ban',            'Cancelled'],
                        ];
                        [$cls, $icon, $label] = $statusMap[$enrollment->status] ?? ['bg-gray-100 text-gray-500', 'fa-circle', ucfirst($enrollment->status)];
                    @endphp
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-semibold {{ $cls }}">
                        <i class="fas {{ $icon }}"></i> {{ $label }}
                    </span>
                </div>

                {{-- Payment Reference --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-hashtag text-gray-300"></i> Payment Reference
                    </p>
                    <p class="text-sm font-mono text-gray-700">{{ $enrollment->payment_reference ?? '—' }}</p>
                </div>

                {{-- Payment Method --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-mobile-screen text-gray-300"></i> Payment Method
                    </p>
                    <p class="text-sm text-gray-700">
                        {{ $enrollment->payment_method === 'mtn_momo' ? 'MTN Mobile Money' : ucfirst(str_replace('_', ' ', $enrollment->payment_method)) }}
                    </p>
                </div>

                {{-- Amount Paid --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-money-bill text-gray-300"></i> Amount Paid
                    </p>
                    @if($enrollment->amount_paid > 0)
                        <p class="text-sm font-semibold text-gray-800">
                            {{ $enrollment->course->currency ?? 'UGX' }} {{ number_format($enrollment->amount_paid) }}
                        </p>
                    @else
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
                            <i class="fas fa-gift text-xs"></i> Free
                        </span>
                    @endif
                </div>

                {{-- Payment Date --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-calendar-check text-gray-300"></i> Payment Date
                    </p>
                    <p class="text-sm text-gray-700">{{ $enrollment->payment_date?->format('d M Y, H:i') ?? '—' }}</p>
                </div>

                {{-- Enrolled At --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-calendar text-gray-300"></i> Enrolled At
                    </p>
                    <p class="text-sm text-gray-700">{{ $enrollment->enrolled_at?->format('d M Y, H:i') ?? '—' }}</p>
                </div>

                {{-- Completed At --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-flag-checkered text-gray-300"></i> Completed At
                    </p>
                    <p class="text-sm text-gray-700">{{ $enrollment->completed_at?->format('d M Y, H:i') ?? '—' }}</p>
                </div>

            </div>
        </div>

        {{-- Right Panel --}}
        <div class="space-y-4">

            {{-- Progress Card --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-chart-line text-teal-500"></i> Learning Progress
                </h2>
                <div class="mb-3">
                    <div class="flex items-center justify-between mb-1.5">
                        <span class="text-xs text-gray-500">Overall Progress</span>
                        <span class="text-sm font-bold text-indigo-700">{{ $progressPercentage }}%</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2.5">
                        <div class="bg-indigo-500 h-2.5 rounded-full transition-all"
                             style="width: {{ $progressPercentage }}%"></div>
                    </div>
                </div>

                {{-- Topic timers --}}
                @if($enrollment->topicTimers->isNotEmpty())
                <div class="space-y-2 mt-3">
                    @foreach($enrollment->topicTimers as $timer)
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-gray-600 truncate flex-1 mr-2">{{ $timer->topic->title ?? 'Topic' }}</span>
                        <span class="text-gray-400 flex-shrink-0">
                            @php
                                $h = intdiv($timer->elapsed_seconds, 3600);
                                $m = intdiv($timer->elapsed_seconds % 3600, 60);
                            @endphp
                            {{ $h > 0 ? "{$h}h " : '' }}{{ $m }}m
                        </span>
                    </div>
                    @endforeach
                </div>
                @else
                <p class="text-xs text-gray-400 mt-2">No time tracked yet.</p>
                @endif
            </div>

            {{-- Certificate Card --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-certificate text-amber-500"></i> Certificate
                </h2>
                @if($enrollment->certificate)
                    <div class="space-y-2 text-xs">
                        <div class="flex justify-between">
                            <span class="text-gray-400">Certificate #</span>
                            <span class="font-mono font-semibold text-gray-700">{{ $enrollment->certificate->certificate_number }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Issue Date</span>
                            <span class="text-gray-700">{{ $enrollment->certificate->issue_date?->format('d M Y') ?? '—' }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Status</span>
                            @if($enrollment->certificate->is_revoked)
                                <span class="text-red-600 font-semibold">Revoked</span>
                            @else
                                <span class="text-green-600 font-semibold">Valid</span>
                            @endif
                        </div>
                    </div>
                    <a href="{{ route('self-paced.dashboard.certificates.show', $enrollment->certificate) }}"
                       class="mt-3 flex items-center gap-1.5 text-xs text-indigo-600 hover:text-indigo-800 font-medium transition">
                        <i class="fas fa-arrow-right"></i> View Certificate
                    </a>
                @else
                    <p class="text-xs text-gray-400">No certificate issued yet.</p>
                @endif
            </div>

        </div>
    </div>

    {{-- Exam Attempts Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
            <h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                <i class="fas fa-clipboard-question text-purple-500"></i> Exam Attempts
            </h2>
            <span class="text-xs text-gray-400">{{ $enrollment->examAttempts->count() }} attempt(s)</span>
        </div>

        @if($enrollment->examAttempts->isEmpty())
        <div class="px-5 py-10 text-center">
            <i class="fas fa-clipboard text-4xl text-gray-200 mb-3 block"></i>
            <p class="text-gray-400 text-sm">No exam attempts yet.</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">Started At</th>
                        <th class="bg-blue-50 text-blue-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Submitted At</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">Score</th>
                        <th class="bg-teal-50 text-teal-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Result</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($enrollment->examAttempts as $i => $attempt)
                    <tr class="odd:bg-white even:bg-gray-50 hover:bg-indigo-50/60 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 text-xs text-gray-600">{{ $attempt->started_at?->format('d M Y, H:i') ?? '—' }}</td>
                        <td class="px-4 py-3 text-xs text-gray-600">{{ $attempt->submitted_at?->format('d M Y, H:i') ?? '—' }}</td>
                        <td class="px-4 py-3">
                            @php
                                $attemptStatusMap = [
                                    'in_progress' => 'bg-amber-100 text-amber-700',
                                    'submitted'   => 'bg-blue-100 text-blue-700',
                                    'timed_out'   => 'bg-red-100 text-red-700',
                                    'abandoned'   => 'bg-gray-100 text-gray-500',
                                ];
                            @endphp
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $attemptStatusMap[$attempt->status] ?? 'bg-gray-100 text-gray-500' }}">
                                {{ ucfirst(str_replace('_', ' ', $attempt->status)) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-700">
                            @if($attempt->result)
                                {{ $attempt->result->correct_answers }}/{{ $attempt->result->total_questions }}
                                ({{ $attempt->result->score_percentage }}%)
                            @else
                                <span class="text-gray-300">—</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @if($attempt->result)
                                @if($attempt->result->passed)
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                                        <i class="fas fa-check text-xs"></i> PASS
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">
                                        <i class="fas fa-times text-xs"></i> FAIL
                                    </span>
                                @endif
                            @else
                                <span class="text-gray-300 text-xs">—</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>

</div>
@endsection
