<x-app-layout>

<x-module-hero
    title="My Training Registrations"
    description="Track your training program enrollments and progress"
    icon="fa-user-graduate">

    <x-slot name="tabs">
        @can('view training packages')
            <a href="{{ route('training.packages.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.packages.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-box text-sm"></i> Packages
            </a>
        @endcan
        @can('view training sessions')
            <a href="{{ route('training.sessions.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.sessions.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-calendar-alt text-sm"></i> Sessions
            </a>
        @endcan
        @can('view training registrations')
            <a href="{{ route('training.registrations.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.registrations.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-users text-sm"></i> All Registrations
            </a>
        @endcan
        <a href="{{ route('training.registrations.my') }}"
           class="module-hero-tab border-b-2 border-[#1e293b]
                  inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                  md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
            <i class="fas fa-user text-sm"></i> My Registrations
        </a>
        <a href="{{ route('training.certificates.my') }}"
           class="module-hero-tab {{ request()->routeIs('training.certificates.my') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                  inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                  md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
            <i class="fas fa-certificate text-sm"></i> My Certificates
        </a>
    </x-slot>

    <x-slot name="actions">
        <a href="{{ route('training.registrations.create') }}"
           class="inline-flex items-center gap-2 px-4 py-2 bg-white text-[#1a4731] text-sm font-semibold rounded-lg hover:bg-green-50 transition">
            <i class="fas fa-plus"></i> Register
        </a>
    </x-slot>

</x-module-hero>

<div class="p-6">

    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    {{-- Stats Row --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-gray-800">{{ $statistics['total'] }}</div>
            <div class="text-xs text-gray-500 mt-1">Total Enrolled</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-blue-600">{{ $statistics['in_progress'] }}</div>
            <div class="text-xs text-gray-500 mt-1">In Progress</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-green-600">{{ $statistics['completed'] }}</div>
            <div class="text-xs text-gray-500 mt-1">Completed</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-purple-600">{{ $statistics['certificates'] }}</div>
            <div class="text-xs text-gray-500 mt-1">Certificates</div>
        </div>
    </div>

    @if($registrations->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            @foreach($registrations as $registration)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition">
                    {{-- Package Header --}}
                    <div class="p-4 border-b border-gray-200" style="background-color: var(--theme-bg-sidebar);">
                        <div class="flex items-start justify-between">
                            <div>
                                <h3 class="font-semibold text-white text-sm">{{ $registration->trainingPackage->name }}</h3>
                                <p class="text-white/70 text-xs mt-0.5">{{ $registration->trainingPackage->category->name ?? 'General' }}</p>
                            </div>
                            @php
                                $statusColors = ['pending' => 'bg-yellow-400 text-yellow-900', 'approved' => 'bg-green-400 text-green-900', 'completed' => 'bg-blue-400 text-blue-900', 'rejected' => 'bg-red-400 text-red-900'];
                            @endphp
                            <span class="px-2 py-0.5 rounded text-xs font-medium {{ $statusColors[$registration->status] ?? 'bg-gray-400 text-gray-900' }}">
                                {{ ucfirst($registration->status) }}
                            </span>
                        </div>
                    </div>

                    {{-- Details --}}
                    <div class="p-4 space-y-2">
                        <div class="flex items-center text-xs text-gray-600">
                            <i class="fas fa-calendar-alt text-green-600 w-4"></i>
                            <span class="ml-2">Registered: {{ $registration->registration_date->format('M d, Y') }}</span>
                        </div>
                        @if(!$registration->trainingPackage->is_free)
                            <div class="flex items-center text-xs">
                                @php
                                    $paymentColors = ['pending' => 'text-yellow-600', 'completed' => 'text-green-600', 'failed' => 'text-red-600'];
                                @endphp
                                <i class="fas fa-credit-card text-green-600 w-4"></i>
                                <span class="ml-2 {{ $paymentColors[$registration->payment_status] ?? 'text-gray-600' }}">
                                    Payment: {{ ucfirst($registration->payment_status) }}
                                </span>
                            </div>
                        @endif
                        @if($registration->status === 'approved' || $registration->status === 'completed')
                            <div class="pt-2 border-t border-gray-100">
                                <div class="flex justify-between text-xs mb-1">
                                    <span class="text-gray-600">Progress</span>
                                    <span class="font-medium text-gray-900">{{ $registration->attendance_percentage ?? 0 }}%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-1.5">
                                    <div class="bg-green-600 h-1.5 rounded-full" style="width: {{ $registration->attendance_percentage ?? 0 }}%"></div>
                                </div>
                            </div>
                        @endif
                    </div>

                    {{-- Actions --}}
                    <div class="px-4 py-3 bg-gray-50 border-t border-gray-200 flex justify-between items-center">
                        <a href="{{ route('training.registrations.show', $registration) }}"
                           class="text-green-600 hover:text-green-700 text-xs font-medium">
                            <i class="fas fa-eye mr-1"></i> View Details
                        </a>
                        @if($registration->status === 'completed' && $registration->certificate)
                            <a href="{{ route('training.certificates.show', $registration->certificate) }}"
                               class="text-blue-600 hover:text-blue-700 text-xs font-medium">
                                <i class="fas fa-certificate mr-1"></i> Certificate
                            </a>
                        @elseif($registration->status !== 'rejected' && !$registration->trainingPackage->is_free && $registration->payment_status === 'pending')
                            <a href="{{ route('training.registrations.payment', $registration) }}"
                               class="text-yellow-600 hover:text-yellow-700 text-xs font-medium">
                                <i class="fas fa-credit-card mr-1"></i> Pay Now
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        @if($registrations->hasPages())
            <div class="mt-6">{{ $registrations->links() }}</div>
        @endif
    @else
        <div class="text-center py-16 bg-white rounded-xl shadow-sm border border-gray-200">
            <i class="fas fa-book-open text-5xl text-gray-300 mb-4 block"></i>
            <h3 class="text-lg font-semibold text-gray-700 mb-2">No Registrations Yet</h3>
            <p class="text-gray-500 text-sm mb-6">You haven't registered for any training programs yet.</p>
            <a href="{{ route('training.registrations.create') }}"
               class="inline-flex items-center gap-2 px-5 py-2.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 transition">
                <i class="fas fa-plus"></i> Register for Training
            </a>
        </div>
    @endif
</div>

</x-app-layout>
