@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">Shop Approved & Live! 🎉</h1>
        
        <div class="text-gray-600 space-y-4 mb-8">
            <p class="text-lg">Congratulations! Your shop has been approved and is now live on our platform. Customers can now discover and visit your store!</p>
            
            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                <h3 class="font-semibold text-green-900 mb-2">Your shop is now:</h3>
                <ul class="text-sm text-green-800 space-y-1 text-left">
                    <li>✅ Visible to all customers on the platform</li>
                    <li>🛍️ Ready to receive customer visits and inquiries</li>
                    <li>📱 Accessible through our mobile app and website</li>
                    <li>🔔 You'll receive notifications for customer interactions</li>
                </ul>
            </div>
            
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <h3 class="font-semibold text-blue-900 mb-2">💡 Next Steps:</h3>
                <ul class="text-sm text-blue-800 space-y-1 text-left">
                    <li>• Add your products and services to attract more customers</li>
                    <li>• Update your shop hours and contact information</li>
                    <li>• Upload high-quality photos of your store and products</li>
                    <li>• Promote your shop on social media to increase visibility</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 Shops
                </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">
                    Add Another Shop
                </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