@forelse($enrollments as $i => $enrollment)
<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 font-medium">
        {{ $enrollments->firstItem() + $i }}
    </td>

    {{-- Trainee --}}
    <td class="px-4 py-3">
        <div class="flex items-center gap-2">
            <span class="w-7 h-7 bg-purple-100 rounded-full flex items-center justify-center text-xs font-bold text-purple-600 flex-shrink-0">
                {{ strtoupper(substr($enrollment->user->name ?? 'U', 0, 1)) }}
            </span>
            <div>
                <p class="font-semibold text-gray-800 text-sm leading-tight">{{ $enrollment->user->name ?? '—' }}</p>
                <p class="text-gray-400 text-xs mt-0.5">{{ $enrollment->user->email ?? '—' }}</p>
            </div>
        </div>
    </td>

    {{-- Course --}}
    <td class="px-4 py-3">
        <p class="text-sm font-medium text-gray-700 line-clamp-1">{{ $enrollment->course->title ?? '—' }}</p>
    </td>

    {{-- Status --}}
    <td class="px-4 py-3">
        @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 px-2 py-0.5 rounded-full text-xs font-medium {{ $cls }}">
            <i class="fas {{ $icon }} text-xs"></i> {{ $label }}
        </span>
    </td>

    {{-- Amount Paid --}}
    <td class="px-4 py-3">
        @if($enrollment->amount_paid > 0)
            <span class="text-sm font-medium text-gray-700">
                {{ $enrollment->course->currency ?? 'UGX' }} {{ number_format($enrollment->amount_paid) }}
            </span>
        @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
    </td>

    {{-- Payment Method --}}
    <td class="px-4 py-3">
        <span class="text-xs text-gray-500">
            {{ $enrollment->payment_method === 'mtn_momo' ? 'MTN MoMo' : ucfirst(str_replace('_', ' ', $enrollment->payment_method)) }}
        </span>
    </td>

    {{-- Enrolled At --}}
    <td class="px-4 py-3">
        <span class="text-xs text-gray-500">
            {{ $enrollment->enrolled_at?->format('d M Y') ?? $enrollment->created_at->format('d M Y') }}
        </span>
    </td>

    {{-- Actions --}}
    <td class="px-4 py-3">
        <div class="flex items-center gap-1">
            @can('view self-paced enrollments')
            <a href="{{ route('self-paced.dashboard.enrollments.show', $enrollment) }}"
               title="View"
               class="w-7 h-7 flex items-center justify-center rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-600 transition">
                <i class="fas fa-eye text-xs"></i>
            </a>
            @endcan
            @can('manage self-paced enrollments')
            @if(!$enrollment->canAccess())
            <button type="button"
                    title="Activate"
                    onclick="confirmActivate({{ $enrollment->id }})"
                    class="w-7 h-7 flex items-center justify-center rounded-lg bg-green-50 hover:bg-green-100 text-green-600 transition">
                <i class="fas fa-play text-xs"></i>
            </button>
            <form id="activate-form-{{ $enrollment->id }}"
                  action="{{ route('self-paced.dashboard.enrollments.activate', $enrollment) }}"
                  method="POST" class="hidden">
                @csrf
            </form>
            @endif
            @if(!$enrollment->isCompleted() && !$enrollment->isCancelled())
            <button type="button"
                    title="Cancel"
                    onclick="confirmCancel({{ $enrollment->id }}, '{{ addslashes($enrollment->user->name ?? '') }}')"
                    class="w-7 h-7 flex items-center justify-center rounded-lg bg-red-50 hover:bg-red-100 text-red-600 transition">
                <i class="fas fa-ban text-xs"></i>
            </button>
            <form id="cancel-form-{{ $enrollment->id }}"
                  action="{{ route('self-paced.dashboard.enrollments.cancel', $enrollment) }}"
                  method="POST" class="hidden">
                @csrf
            </form>
            @endif
            @if($enrollment->isPendingPayment() || $enrollment->isPaymentFailed())
            <button type="button"
                    title="Check Payment"
                    onclick="document.getElementById('check-payment-form-{{ $enrollment->id }}').submit()"
                    class="w-7 h-7 flex items-center justify-center rounded-lg bg-teal-50 hover:bg-teal-100 text-teal-600 transition">
                <i class="fas fa-rotate text-xs"></i>
            </button>
            <form id="check-payment-form-{{ $enrollment->id }}"
                  action="{{ route('self-paced.dashboard.enrollments.check-payment', $enrollment) }}"
                  method="POST" class="hidden">
                @csrf
            </form>
            @endif
            @endcan
        </div>
    </td>
</tr>
@empty
<tr>
    <td colspan="8" class="px-6 py-16 text-center">
        <i class="fas fa-users text-5xl text-gray-200 mb-4 block"></i>
        <p class="text-gray-400 font-medium">No enrollments found</p>
        <p class="text-gray-300 text-sm mt-1">Try adjusting your search or filters.</p>
    </td>
</tr>
@endforelse
