@extends('layouts.app')

@section('title', 'Application Submitted Successfully')

@section('content')
<div class="container mx-auto px-4 py-16 max-w-2xl">
    <div class="bg-white rounded-lg shadow-lg p-8 text-center">
        <!-- Success Icon -->
        <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
        </div>

        <!-- Success Message -->
        <h1 class="text-3xl font-bold text-gray-900 mb-4">Application Submitted Successfully! 🎉</h1>
        
        <div class="text-gray-600 space-y-4 mb-8">
            <p class="text-lg">Thank you for applying to join our mall! Your shop registration has been received and is now under review.</p>
            
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <h3 class="font-semibold text-blue-900 mb-2">What happens next?</h3>
                <ul class="text-sm text-blue-800 space-y-1 text-left">
                    <li>✅ Our team will review your application within 3-5 business days</li>
                    <li>📞 We'll contact you via phone or email for any additional information needed</li>
                    <li>🏪 Once approved, we'll assign you a store location and provide setup details</li>
                    <li>📧 You'll receive email updates throughout the process</li>
                </ul>
            </div>
            
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <h3 class="font-semibold text-yellow-900 mb-2">💡 Pro Tips while you wait:</h3>
                <ul class="text-sm text-yellow-800 space-y-1 text-left">
                    <li>• Prepare your business documents (trade license, VAT registration)</li>
                    <li>• Plan your store layout and design</li>
                    <li>• Start preparing your inventory and staff</li>
                    <li>• Consider your marketing strategy for the grand opening</li>
                </ul>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="space-y-4">
            @auth
                <a href="{{ route('shop-registration.dashboard') }}" 
                   class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200">
                    View My Applications
                </a>
            @endauth
            
            <div class="space-x-4">
                <a href="{{ route('shop-registration.create') }}" 
                   class="inline-block bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                    Apply for Another Mall
                </a>
                
                <a href="{{ url('/') }}" 
                   class="inline-block bg-gray-600 hover:bg-gray-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                    Back to Home
                </a>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="mt-8 pt-6 border-t border-gray-200">
            <h3 class="font-semibold text-gray-900 mb-2">Need help or have questions?</h3>
            <div class="text-sm text-gray-600 space-y-1">
                <p>📧 Email: support@bizspot.com</p>
                <p>📞 Phone: +971 4 123 4567</p>
                <p>⏰ Business Hours: Sunday to Thursday, 9:00 AM - 6:00 PM</p>
            </div>
        </div>

        <!-- Application Reference -->
        @if(session('application_id'))
        <div class="mt-6 bg-gray-50 rounded-lg p-4">
            <p class="text-sm text-gray-600">
                <strong>Application Reference:</strong> 
                <span class="font-mono bg-gray-200 px-2 py-1 rounded text-xs">APP-{{ session('application_id') }}</span>
            </p>
            <p class="text-xs text-gray-500 mt-1">Please keep this reference number for your records</p>
        </div>
        @endif
    </div>
</div>

<style>
/* Add some animation to the success icon */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.bg-green-100 {
    animation: fadeInScale 0.6s ease-out;
}

/* Smooth transitions for buttons */
.transition {
    transition: all 0.2s ease-in-out;
}

/* Hover effects for cards */
.bg-blue-50:hover, .bg-yellow-50:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}
</style>

<script>
// Auto-scroll to top on page load
window.scrollTo(0, 0);

// Add confetti effect (simple version)
function createConfetti() {
    for (let i = 0; i < 50; i++) {
        const confetti = document.createElement('div');
        confetti.className = 'confetti';
        confetti.style.left = Math.random() * 100 + '%';
        confetti.style.animationDelay = Math.random() * 2 + 's';
        confetti.style.backgroundColor = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444'][Math.floor(Math.random() * 4)];
        document.body.appendChild(confetti);
        
        setTimeout(() => confetti.remove(), 3000);
    }
}

// Trigger confetti on page load
setTimeout(createConfetti, 500);
</script>

<style>
/* Confetti animation */
.confetti {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    z-index: 1000;
    animation: confetti-fall 3s linear forwards;
}

@keyframes confetti-fall {
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}
</style>
@endsection