{{-- Public Application Status --}}
<x-site-layout title="Application Status">
    
    {{-- Hero Section --}}
    <section class="relative bg-gradient-to-r from-green-600 to-green-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="text-center">
                <h1 class="text-4xl font-bold text-white mb-4">
                    Application Status
                </h1>
                <p class="text-green-100 max-w-5xl mx-auto">
                    Check the status of your membership application
                </p>
            </div>
        </div>
    </section>

    {{-- 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('membership.categories.index') }}" class="hover:text-green-600 transition">
                    Membership Categories
                </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>

    {{-- Main Content --}}
    <section class="py-16 bg-gray-50">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            
            {{-- Application Card --}}
            <div class="theme-card rounded-xl shadow-lg overflow-hidden mb-8">
                <div class="bg-gradient-to-r from-green-600 to-green-700 px-6 py-4">
                    <h2 class="text-xl font-semibold text-white flex items-center">
                        <i class="fas fa-file-alt mr-3"></i>
                        Application Details
                    </h2>
                </div>
                <div class="p-6">
                    {{-- Status Banner --}}
                    @php
                        $statusConfig = [
                            'pending' => [
                                'color' => 'yellow',
                                'icon' => 'fa-clock',
                                'message' => 'Your application is pending review. Our team will process it shortly.'
                            ],
                            'under_review' => [
                                'color' => 'blue',
                                'icon' => 'fa-search',
                                'message' => 'Your application is currently under review. We will notify you soon.'
                            ],
                            'approved' => [
                                'color' => 'green',
                                'icon' => 'fa-check-circle',
                                'message' => 'Congratulations! Your application has been approved. Please proceed with payment.'
                            ],
                            'rejected' => [
                                'color' => 'red',
                                'icon' => 'fa-times-circle',
                                'message' => 'We regret to inform you that your application was not approved.'
                            ],
                        ];
                        $config = $statusConfig[$application->status] ?? $statusConfig['pending'];
                    @endphp
                    
                    <div class="bg-{{ $config['color'] }}-50 border border-{{ $config['color'] }}-200 rounded-lg p-4 mb-6">
                        <div class="flex items-center">
                            <i class="fas {{ $config['icon'] }} text-{{ $config['color'] }}-500 text-2xl mr-4"></i>
                            <div>
                                <h3 class="font-semibold text-{{ $config['color'] }}-900">
                                    Status: {{ ucfirst(str_replace('_', ' ', $application->status)) }}
                                </h3>
                                <p class="text-{{ $config['color'] }}-700 text-sm">{{ $config['message'] }}</p>
                            </div>
                        </div>
                    </div>

                    {{-- Application Details --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">Reference Number</label>
                            <p class="text-xl font-bold text-green-600 font-mono">{{ $application->reference_number }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">Applicant Name</label>
                            <p class="text-gray-900 font-medium">{{ $application->full_name }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">Email</label>
                            <p class="text-gray-900">{{ $application->email }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">Phone</label>
                            <p class="text-gray-900">{{ $application->phone }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">Applied Category</label>
                            <p class="text-gray-900">{{ $application->membershipCategory?->name }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">Submitted On</label>
                            <p class="text-gray-900">{{ $application->created_at->format('F d, Y \a\t H:i') }}</p>
                        </div>
                    </div>

                    {{-- Rejection Reason --}}
                    @if($application->status === 'rejected' && $application->rejection_reason)
                        <div class="mt-6 bg-red-50 border border-red-200 rounded-lg p-4">
                            <h4 class="font-semibold text-red-800 mb-2">Rejection Reason</h4>
                            <p class="text-red-700">{{ $application->rejection_reason }}</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Status Timeline --}}
            <div class="theme-card rounded-xl shadow-lg overflow-hidden mb-8">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-history text-green-600 mr-3"></i>
                        Application Timeline
                    </h2>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-check text-white text-sm"></i>
                            </div>
                            <div class="flex-1 pb-4 border-l-2 border-green-200 pl-4 -ml-4">
                                <h4 class="font-semibold text-gray-900">Application Submitted</h4>
                                <p class="text-sm text-gray-500">{{ $application->created_at->format('F d, Y \a\t H:i') }}</p>
                            </div>
                        </div>

                        @if($application->status !== 'pending')
                            <div class="flex items-start">
                                <div class="w-8 h-8 bg-{{ $application->status === 'rejected' ? 'red' : 'blue' }}-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fas fa-search text-white text-sm"></i>
                                </div>
                                <div class="flex-1 pb-4 border-l-2 border-gray-200 pl-4 -ml-4">
                                    <h4 class="font-semibold 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')
                            <div class="flex items-start">
                                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fas fa-check text-white text-sm"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-semibold text-gray-900">Approved</h4>
                                    <p class="text-sm text-gray-500">Your application has been approved</p>
                                </div>
                            </div>
                        @endif

                        @if($application->status === 'rejected')
                            <div class="flex items-start">
                                <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fas fa-times text-white text-sm"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-semibold text-gray-900">Rejected</h4>
                                    <p class="text-sm text-gray-500">Application was not approved</p>
                                </div>
                            </div>
                        @endif

                        @if($application->status === 'pending')
                            <div class="flex items-start">
                                <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                    <span class="text-gray-500 text-sm font-bold">2</span>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-gray-400">Under Review</h4>
                                    <p class="text-sm text-gray-400">Pending</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Check Another Status Form --}}
            <div class="theme-card rounded-xl shadow-lg overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-search text-green-600 mr-3"></i>
                        Check Another Application
                    </h2>
                </div>
                <div class="p-6">
                    <form method="POST" action="{{ route('membership.check-status.submit') }}">
                        @csrf
                        <div class="flex gap-4">
                            <input type="text" 
                                   name="reference_number" 
                                   placeholder="Enter reference number..."
                                   class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                                   required>
                            <button type="submit" 
                                    class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                                Check
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </section>

</x-site-layout>
