<x-site-layout title="Application Status" meta-description="Track your mentorship application status">
    {{-- Hero Section — Advocacy Style --}}
    <div class="relative bg-gradient-to-r from-green-700 to-emerald-800 shadow-xl">
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="text-center">
                <span class="inline-block px-4 py-1 bg-white/20 text-white rounded-full text-sm font-semibold mb-4">
                    <i class="fas fa-clipboard-check mr-2"></i> Application Tracking
                </span>
                <h1 class="text-4xl md:text-5xl font-serif font-bold text-white mb-4">Application Status</h1>
                <p class="text-xl text-green-100 max-w-3xl mx-auto">
                    Track the progress of your mentorship application
                </p>
            </div>
        </div>
    </div>

    {{-- Breadcrumb --}}
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-green-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="{{ route('mentorship.public.index') }}" class="hover:text-green-600 transition">Mentorship</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Application Status</span>
            </nav>
        </div>
    </div>

    <section class="py-12 bg-gray-50 min-h-screen">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-6">
                    <i class="fas fa-check-circle mr-2"></i>
                    {{ session('success') }}
                </div>
            @endif

            {{-- Status Card --}}
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-8">
                {{-- Status Header --}}
                <div class="p-8 text-center @if($application->status === 'approved') bg-green-600 @elseif($application->status === 'rejected') bg-red-600 @else bg-yellow-500 @endif text-white">
                    @if($application->status === 'approved')
                        <i class="fas fa-check-circle text-6xl mb-4"></i>
                        <h1 class="text-2xl font-bold mb-2">Congratulations!</h1>
                        <p>Your application has been approved</p>
                    @elseif($application->status === 'rejected')
                        <i class="fas fa-times-circle text-6xl mb-4"></i>
                        <h1 class="text-2xl font-bold mb-2">Application Not Approved</h1>
                        <p>Thank you for your interest</p>
                    @else
                        <i class="fas fa-hourglass-half text-6xl mb-4"></i>
                        <h1 class="text-2xl font-bold mb-2">Application Under Review</h1>
                        <p>We're reviewing your application</p>
                    @endif
                </div>

                {{-- Application Details --}}
                <div class="p-6">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Application Details</h2>
                    <dl class="space-y-4">
                        <div class="flex justify-between py-2 border-b border-gray-100">
                            <dt class="text-gray-500">Application ID</dt>
                            <dd class="font-medium text-gray-900">#{{ $application->id }}</dd>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-100">
                            <dt class="text-gray-500">Programme</dt>
                            <dd class="font-medium text-gray-900">{{ $application->programme->title ?? 'N/A' }}</dd>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-100">
                            <dt class="text-gray-500">Role</dt>
                            <dd class="font-medium text-gray-900 capitalize">{{ $application->role_preference }}</dd>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-100">
                            <dt class="text-gray-500">Status</dt>
                            <dd>
                                <span class="px-3 py-1 rounded-full text-sm font-semibold
                                    @if($application->status === 'approved') bg-green-100 text-green-800
                                    @elseif($application->status === 'rejected') bg-red-100 text-red-800
                                    @elseif($application->status === 'under_review') bg-blue-100 text-blue-800
                                    @else bg-yellow-100 text-yellow-800 @endif">
                                    {{ ucfirst(str_replace('_', ' ', $application->status)) }}
                                </span>
                            </dd>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-100">
                            <dt class="text-gray-500">Applied On</dt>
                            <dd class="font-medium text-gray-900">{{ $application->created_at->format('M d, Y \a\t h:i A') }}</dd>
                        </div>
                    </dl>
                </div>
            </div>

            {{-- Payment Status --}}
            @if($application->payment_required)
                <div class="bg-white rounded-2xl shadow-lg p-6 mb-8">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">
                        <i class="fas fa-credit-card text-green-600 mr-2"></i>
                        Payment Status
                    </h2>

                    @if($application->payment_status === 'paid')
                        <div class="flex items-center p-4 bg-green-50 rounded-lg">
                            <i class="fas fa-check-circle text-green-600 text-2xl mr-4"></i>
                            <div>
                                <h3 class="font-medium text-green-800">Payment Complete</h3>
                                <p class="text-sm text-green-600">
                                    Amount: {{ number_format($application->programme->fee_amount, 2) }} {{ $application->programme->currency }}
                                </p>
                            </div>
                        </div>
                    @elseif($application->payment_status === 'pending')
                        <div class="flex items-center justify-between p-4 bg-yellow-50 rounded-lg">
                            <div class="flex items-center">
                                <i class="fas fa-clock text-yellow-600 text-2xl mr-4"></i>
                                <div>
                                    <h3 class="font-medium text-yellow-800">Payment Pending</h3>
                                    <p class="text-sm text-yellow-600">
                                        Amount: {{ number_format($application->programme->fee_amount, 2) }} {{ $application->programme->currency }}
                                    </p>
                                </div>
                            </div>
                            <a href="{{ route('mentorship.payments.create', ['application_id' => $application->id]) }}" 
                               class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition">
                                Complete Payment
                            </a>
                        </div>
                    @else
                        <div class="flex items-center justify-between p-4 bg-red-50 rounded-lg">
                            <div class="flex items-center">
                                <i class="fas fa-exclamation-circle text-red-600 text-2xl mr-4"></i>
                                <div>
                                    <h3 class="font-medium text-red-800">Payment Required</h3>
                                    <p class="text-sm text-red-600">
                                        Please complete payment to proceed
                                    </p>
                                </div>
                            </div>
                            <a href="{{ route('mentorship.payments.create', ['application_id' => $application->id]) }}" 
                               class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
                                Pay Now
                            </a>
                        </div>
                    @endif
                </div>
            @endif

            {{-- Timeline --}}
            <div class="bg-white rounded-2xl shadow-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-6">
                    <i class="fas fa-history text-green-600 mr-2"></i>
                    Application Timeline
                </h2>

                <div class="relative">
                    {{-- Timeline Line --}}
                    <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200"></div>

                    {{-- Timeline Items --}}
                    <div class="space-y-6">
                        {{-- Applied --}}
                        <div class="relative flex items-start ml-12">
                            <div class="absolute left-[-2rem] w-8 h-8 bg-green-600 rounded-full flex items-center justify-center">
                                <i class="fas fa-file-alt text-white text-sm"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-900">Application Submitted</h4>
                                <p class="text-sm text-gray-500">{{ $application->created_at->format('M d, Y \a\t h:i A') }}</p>
                            </div>
                        </div>

                        @if($application->status !== 'pending')
                            {{-- Under Review --}}
                            <div class="relative flex items-start ml-12">
                                <div class="absolute left-[-2rem] w-8 h-8 @if($application->status === 'under_review') bg-blue-600 @else bg-green-600 @endif rounded-full flex items-center justify-center">
                                    <i class="fas fa-eye text-white text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-900">Under Review</h4>
                                    <p class="text-sm text-gray-500">Application is being reviewed</p>
                                </div>
                            </div>
                        @endif

                        @if($application->status === 'approved')
                            {{-- Approved --}}
                            <div class="relative flex items-start ml-12">
                                <div class="absolute left-[-2rem] w-8 h-8 bg-green-600 rounded-full flex items-center justify-center">
                                    <i class="fas fa-check text-white text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-900">Approved</h4>
                                    <p class="text-sm text-gray-500">
                                        {{ $application->reviewed_at?->format('M d, Y \a\t h:i A') ?? 'Review completed' }}
                                    </p>
                                </div>
                            </div>
                        @endif

                        @if($application->status === 'rejected')
                            {{-- Rejected --}}
                            <div class="relative flex items-start ml-12">
                                <div class="absolute left-[-2rem] w-8 h-8 bg-red-600 rounded-full flex items-center justify-center">
                                    <i class="fas fa-times text-white text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-900">Not Approved</h4>
                                    @if($application->rejection_reason)
                                        <p class="text-sm text-gray-600 mt-1">
                                            Reason: {{ $application->rejection_reason }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Actions --}}
            <div class="mt-8 text-center">
                <a href="{{ route('mentorship.public.index') }}" 
                   class="inline-flex items-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Browse Other Programmes
                </a>
            </div>
        </div>
    </section>
</x-site-layout>
