<x-app-layout>
    <x-module-hero
        title="My Certificates"
        description="Your earned mentorship completion certificates"
        icon="fa-award">

        <x-slot name="tabs">
            @can('view mentorship programmes')
                <a href="{{ route('mentorship.programmes.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.programmes.*') ? '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-list text-sm"></i> Programmes
                </a>
            @endcan
            @can('view mentorship certificates')
                <a href="{{ route('mentorship.certificates.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.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> All Certificates
                </a>
            @endcan
            @can('download mentorship certificates')
                <a href="{{ route('mentorship.certificates.my-certificates') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.certificates.my-certificates') ? '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-award text-sm"></i> My Certificates
                </a>
            @endcan
            @can('view mentorship assignments')
                <a href="{{ route('mentorship.assignments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.assignments.*') ? '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-link text-sm"></i> {{ auth()->user()->hasAnyRole(['Mentor', 'Mentee']) ? 'My Assignments' : 'Assignments' }}
                </a>
            @endcan
            @can('view mentorship sessions')
                <a href="{{ route('mentorship.sessions.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.sessions.index') || request()->routeIs('mentorship.sessions.show') || request()->routeIs('mentorship.sessions.create') || request()->routeIs('mentorship.sessions.edit') ? '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> {{ auth()->user()->hasAnyRole(['Mentor', 'Mentee']) ? 'My Sessions' : 'Sessions' }}
                </a>
            @endcan
            @can('view own mentorship applications')
                @cannot('view mentorship applications')
                    <a href="{{ route('mentorship.applications.index') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.applications.*') ? '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-file-alt text-sm"></i> My Applications
                    </a>
                @endcannot
            @endcan
            @can('view own mentorship payments')
                @cannot('view mentorship payments')
                    <a href="{{ route('mentorship.payments.my-payments') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.payments.my-payments') ? '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-history text-sm"></i> My Payments
                    </a>
                @endcannot
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @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

        @if($certificates->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($certificates as $certificate)
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
                        <div class="bg-gradient-to-br from-amber-50 to-amber-100 p-6 text-center">
                            <div class="w-14 h-14 mx-auto bg-gradient-to-br from-amber-400 to-amber-600 rounded-full flex items-center justify-center mb-3">
                                <i class="fas fa-award text-white text-xl"></i>
                            </div>
                            <h3 class="text-base font-bold text-amber-700">Certificate</h3>
                            <p class="text-xs text-amber-600">of Completion</p>
                        </div>
                        <div class="p-4">
                            <h4 class="font-semibold text-gray-900 text-sm mb-3">{{ $certificate->programme_name }}</h4>
                            <div class="space-y-1 text-xs text-gray-600 mb-4">
                                <div class="flex justify-between">
                                    <span class="text-gray-500">Certificate #:</span>
                                    <span class="font-mono">{{ $certificate->certificate_number }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">Issued:</span>
                                    <span>{{ $certificate->issue_date?->format('M d, Y') ?? 'N/A' }}</span>
                                </div>
                            </div>
                            <div class="flex gap-2">
                                <a href="{{ route('mentorship.certificates.show', $certificate) }}"
                                   class="flex-1 text-center px-3 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-xs font-medium">
                                    <i class="fas fa-eye mr-1"></i> View
                                </a>
                                @can('download mentorship certificates')
                                    <a href="{{ route('mentorship.certificates.download', $certificate) }}"
                                       class="flex-1 text-center px-3 py-2 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition text-xs font-medium">
                                        <i class="fas fa-download mr-1"></i> Download
                                    </a>
                                @endcan
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @if($certificates->hasPages())
                <div class="mt-6">{{ $certificates->links() }}</div>
            @endif
        @else
            <div class="text-center py-16">
                <div class="w-20 h-20 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-certificate text-gray-400 text-3xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No Certificates Yet</h3>
                <p class="text-gray-500 mb-4 max-w-md mx-auto">
                    Complete a mentorship programme to receive your certificate of completion.
                </p>
                <a href="{{ route('mentorship.public.index') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition text-sm">
                    <i class="fas fa-search"></i> Browse Programmes
                </a>
            </div>
        @endif
    </div>
</x-app-layout>
