@props(['registrations' => collect()])

<div class="bg-white rounded-xl p-6 shadow-lg border border-gray-100">
    <div class="flex items-center gap-2 mb-5">
        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
            <i class="fas fa-tasks text-blue-600 text-sm"></i>
        </div>
        <h3 class="text-lg font-semibold text-gray-800">Training Progress</h3>
    </div>

    @forelse($registrations as $reg)
        @php
            $pct = (float) ($reg->attendance_percentage ?? 0);
            $pct = max(0, min(100, $pct));
        @endphp
        <div class="mb-5"
             x-data="{ width: 0 }"
             x-init="setTimeout(() => width = {{ $pct }}, 100)">

            <div class="flex justify-between items-center mb-1">
                <span class="text-sm font-medium text-gray-700 truncate max-w-[60%]">
                    {{ $reg->trainingPackage?->name ?? 'Unknown Package' }}
                </span>
                <div class="flex items-center gap-2 flex-shrink-0">
                    @if($reg->passed === true)
                        <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs font-medium">Pass</span>
                    @elseif($reg->passed === false)
                        <span class="px-2 py-0.5 bg-red-100 text-red-700 rounded-full text-xs font-medium">Fail</span>
                    @else
                        <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">In Progress</span>
                    @endif
                    <span class="text-xs text-gray-500 w-8 text-right">{{ number_format($pct, 0) }}%</span>
                </div>
            </div>

            <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div class="bg-gradient-to-r from-blue-500 to-cyan-500 h-2.5 rounded-full transition-all duration-700 ease-out"
                     :style="`width: ${width}%`"></div>
            </div>

            @if($reg->score !== null)
                <p class="text-xs text-gray-400 mt-1">Score: {{ number_format($reg->score, 1) }}</p>
            @endif
        </div>
    @empty
        <div class="flex flex-col items-center justify-center py-8 text-center">
            <div class="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mb-3">
                <i class="fas fa-book-open text-gray-400 text-xl"></i>
            </div>
            <p class="text-gray-500 text-sm mb-2">No active registrations yet.</p>
            @can('view training packages')
                <a href="{{ route('training.packages.index') }}"
                   class="text-blue-500 hover:text-blue-700 text-sm font-medium hover:underline transition">
                    Browse available packages →
                </a>
            @endcan
        </div>
    @endforelse
</div>
