{{-- Public Application Success --}}
<x-site-layout title="Application Submitted">
    
    {{-- Hero Section --}}
    <section class="relative min-h-[60vh] 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-20">
            <div class="text-center">
                <div class="w-24 h-24 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-8">
                    <i class="fas fa-check text-white text-5xl"></i>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">
                    Application Submitted Successfully!
                </h1>
                <p class="text-xl text-green-100 max-w-5xl mx-auto mb-8">
                    Thank you for your interest in becoming a member. Your application has been received and is being processed.
                </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</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Application Submitted</span>
            </nav>
        </div>
    </div>

    {{-- Application Details --}}
    <section class="py-16 bg-gray-50">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            
            {{-- Application Reference 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>
                        Your Application Details
                    </h2>
                </div>
                <div class="p-6">
                    <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">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>
                            <label class="block text-sm font-medium text-gray-500 mb-1">Status</label>
                            <span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-700">
                                                Pending Review
                                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- What Happens Next --}}
            <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-clock text-green-600 mr-3"></i>
                        What Happens Next?
                    </h2>
                </div>
                <div class="p-6">
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <span class="text-green-700 font-bold">1</span>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Application Review</h3>
                                <p class="text-gray-600">Our team will review your application and verify the information provided. This typically takes 3-5 business days.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <span class="text-green-700 font-bold">2</span>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Email Confirmation</h3>
                                <p class="text-gray-600">You will receive a confirmation email at {{ $application->email }} with your application details.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <span class="text-green-700 font-bold">3</span>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Approval & Payment</h3>
                                <p class="text-gray-600">Once approved, you will receive instructions to pay your membership subscription fee.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <span class="text-green-700 font-bold">4</span>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Welcome!</h3>
                                <p class="text-gray-600">After payment, your membership will be activated and you'll receive login credentials.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Important Notice --}}
            <div class="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-8">
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-500 text-xl mr-4 mt-1"></i>
                    <div>
                        <h3 class="font-semibold text-blue-900 mb-2">Important Information</h3>
                        <ul class="text-blue-800 text-sm space-y-2">
                            <li>• Please save your reference number: <strong>{{ $application->reference_number }}</strong></li>
                            <li>• You can use this reference to check your application status</li>
                            <li>• Check your email (including spam folder) for updates</li>
                            <li>• If you have questions, contact our support team</li>
                        </ul>
                    </div>
                </div>
            </div>

            {{-- Action Buttons --}}
            <div class="flex flex-wrap justify-center gap-4">
                <a href="{{ route('membership.categories.index') }}" 
                   class="px-6 py-3 border-2 border-green-600 text-green-600 rounded-lg hover:bg-green-600 hover:text-white transition font-medium">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Categories
                </a>
                <a href="{{ route('membership.status', $application->reference_number) }}" 
                   class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                    <i class="fas fa-search mr-2"></i>
                    Check Status
                </a>
            </div>

        </div>
    </section>

</x-site-layout>
