<x-app-layout>

<x-module-hero
    title="Training Reports"
    description="Comprehensive analytics and insights"
    icon="fa-chart-bar">

    <x-slot name="tabs">
        @can('view training packages')
            <a href="{{ route('training.packages.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.packages.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-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.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-calendar-alt text-sm"></i> Sessions
            </a>
            <a href="{{ route('training.sessions.calendar') }}"
               class="module-hero-tab {{ request()->routeIs('training.sessions.calendar') ? '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-week text-sm"></i> Calendar
            </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> Registrations
            </a>
            <a href="{{ route('training.registrations.pending') }}"
               class="module-hero-tab {{ request()->routeIs('training.registrations.pending') ? '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-clock text-sm"></i> Pending
            </a>
        @endcan
        @can('view training certificates')
            <a href="{{ route('training.certificates.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.certificates.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-certificate text-sm"></i> Certificates
            </a>
        @endcan
        @can('view training reports')
            <a href="{{ route('training.reports.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.reports.*') ? '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-chart-bar text-sm"></i> Reports
            </a>
        @endcan
    </x-slot>

</x-module-hero>

<div class="p-6">

    {{-- Packages Section --}}
    <div class="mb-6">
        <h2 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
            <i class="fas fa-box text-green-600"></i> Training Packages
        </h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-box text-blue-600"></i>
                </div>
                <p class="text-2xl font-bold text-gray-800">{{ $overview['packages']['total'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Total Packages</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-check-circle text-green-600"></i>
                </div>
                <p class="text-2xl font-bold text-green-600">{{ $overview['packages']['active'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Active</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-gift text-purple-600"></i>
                </div>
                <p class="text-2xl font-bold text-gray-800">{{ $overview['packages']['free'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Free Programs</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-dollar-sign text-yellow-600"></i>
                </div>
                <p class="text-2xl font-bold text-gray-800">{{ $overview['packages']['paid'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Paid Programs</p>
            </div>
        </div>
    </div>

    {{-- Sessions Section --}}
    <div class="mb-6">
        <h2 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
            <i class="fas fa-calendar text-green-600"></i> Training Sessions
        </h2>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-calendar-alt text-blue-600"></i>
                </div>
                <p class="text-2xl font-bold text-gray-800">{{ $overview['sessions']['total'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Total Sessions</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-clock text-yellow-600"></i>
                </div>
                <p class="text-2xl font-bold text-yellow-600">{{ $overview['sessions']['upcoming'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Upcoming</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-check text-green-600"></i>
                </div>
                <p class="text-2xl font-bold text-green-600">{{ $overview['sessions']['completed'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Completed</p>
            </div>
        </div>
    </div>

    {{-- Registrations Section --}}
    <div class="mb-6">
        <h2 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
            <i class="fas fa-users text-green-600"></i> Registrations
        </h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <p class="text-2xl font-bold text-gray-800">{{ $overview['registrations']['total'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Total</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <p class="text-2xl font-bold text-yellow-600">{{ $overview['registrations']['pending'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Pending</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <p class="text-2xl font-bold text-green-600">{{ $overview['registrations']['approved'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Approved</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-5 text-center">
                <p class="text-2xl font-bold text-blue-600">{{ $overview['registrations']['completed'] }}</p>
                <p class="text-xs text-gray-500 mt-1">Completed</p>
            </div>
        </div>
    </div>

    {{-- Certificates & Revenue --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <h3 class="font-semibold text-gray-800 text-sm mb-4 flex items-center gap-2">
                <i class="fas fa-certificate text-green-600"></i> Certificates
            </h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg text-sm">
                    <span class="text-gray-600">Total Issued</span>
                    <span class="font-bold text-gray-800">{{ $overview['certificates']['total'] }}</span>
                </div>
                <div class="flex justify-between items-center p-3 bg-green-50 rounded-lg text-sm">
                    <span class="text-gray-600">Valid</span>
                    <span class="font-bold text-green-600">{{ $overview['certificates']['valid'] }}</span>
                </div>
                <div class="flex justify-between items-center p-3 bg-red-50 rounded-lg text-sm">
                    <span class="text-gray-600">Revoked</span>
                    <span class="font-bold text-red-600">{{ $overview['certificates']['revoked'] }}</span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <h3 class="font-semibold text-gray-800 text-sm mb-4 flex items-center gap-2">
                <i class="fas fa-dollar-sign text-green-600"></i> Revenue
            </h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center p-3 bg-green-50 rounded-lg text-sm">
                    <span class="text-gray-600">Total Revenue</span>
                    <span class="font-bold text-green-600">{{ number_format($overview['revenue']['total'], 0) }} UGX</span>
                </div>
                <div class="flex justify-between items-center p-3 bg-yellow-50 rounded-lg text-sm">
                    <span class="text-gray-600">Pending Payments</span>
                    <span class="font-bold text-yellow-600">{{ number_format($overview['revenue']['pending'], 0) }} UGX</span>
                </div>
                <div class="flex justify-between items-center p-3 bg-blue-50 rounded-lg text-sm">
                    <span class="text-gray-600">This Month</span>
                    <span class="font-bold text-blue-600">{{ number_format($overview['revenue']['this_month'], 0) }} UGX</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Links --}}
    <div class="bg-white rounded-xl border border-gray-200 p-5">
        <h3 class="font-semibold text-gray-800 text-sm mb-4 flex items-center gap-2">
            <i class="fas fa-link text-green-600"></i> Detailed Reports
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <a href="{{ route('training.reports.registrations') }}"
               class="flex items-center gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-users text-blue-600"></i>
                </div>
                <div>
                    <p class="font-medium text-gray-800 text-sm">Registration Report</p>
                    <p class="text-xs text-gray-500">Registration trends and stats</p>
                </div>
            </a>
            <a href="{{ route('training.reports.completion') }}"
               class="flex items-center gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-graduation-cap text-green-600"></i>
                </div>
                <div>
                    <p class="font-medium text-gray-800 text-sm">Completion Report</p>
                    <p class="text-xs text-gray-500">Completion rates and certificates</p>
                </div>
            </a>
            <a href="{{ route('training.reports.revenue') }}"
               class="flex items-center gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-dollar-sign text-yellow-600"></i>
                </div>
                <div>
                    <p class="font-medium text-gray-800 text-sm">Revenue Report</p>
                    <p class="text-xs text-gray-500">Financial analysis</p>
                </div>
            </a>
        </div>
    </div>
</div>

</x-app-layout>
