@extends('frontend.layout')
@section('title', 'Inve Security - ' . t('Application Submitted'))
@section('description', 'Your business registration application has been submitted successfully.')

@section('content')
    <!-- LUXURY SUCCESS SECTION -->
    <section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-gold-50 via-white to-gold-50/30 dark:from-gray-950 dark:via-gray-900 dark:to-gold-900/10">
        <!-- Animated Background Elements -->
        <div class="absolute inset-0 overflow-hidden">
            <!-- Gradient Orbs -->
            <div class="absolute top-1/4 -left-40 lg:-left-20 w-80 lg:w-96 h-80 lg:h-96 bg-gradient-to-br from-green-500/20 to-green-400/30 dark:from-green-500/10 dark:to-green-400/5 rounded-full blur-3xl animate-pulse-gold opacity-60 dark:opacity-30"></div>
            <div class="absolute bottom-1/3 -right-32 lg:-right-24 w-64 lg:w-80 h-64 lg:h-80 bg-gradient-to-tr from-green-500/15 to-transparent dark:from-green-500/5 dark:to-transparent rounded-full blur-3xl opacity-40 dark:opacity-20 animate-pulse-gold" style="animation-delay: 2s"></div>
            
            <!-- Animated Confetti Pattern -->
            <div class="absolute inset-0 opacity-10">
                <div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(22,163,74,0.1)_0%,transparent_50%),radial-gradient(circle_at_80%_20%,rgba(250,204,21,0.1)_0%,transparent_50%)]"></div>
            </div>
        </div>

        <div class="w-full max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 py-8 lg:py-12">
            <!-- Success Icon -->
            <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-gradient-to-br from-green-500 to-green-400 rounded-full flex items-center justify-center mx-auto mb-6 lg:mb-8 shadow-2xl shadow-green-500/30 animate-bounce-slow animate-slide-up">
                <i class="fas fa-check text-white text-2xl sm:text-3xl lg:text-4xl"></i>
            </div>

            <!-- Success Message -->
            <div class="text-center mb-8 lg:mb-12 animate-slide-up animation-delay-100">
                <!-- Success Badge -->
                <div class="inline-flex items-center gap-2 lg:gap-3 px-4 lg:px-6 py-2 lg:py-3 bg-gradient-to-r from-green-500/10 to-green-400/10 dark:from-green-500/20 dark:to-green-400/5 border border-green-500/30 dark:border-green-500/40 rounded-full mb-4 lg:mb-6 backdrop-blur-sm">
                    <div class="w-1.5 h-1.5 lg:w-2 lg:h-2 bg-gradient-to-r from-green-500 to-green-400 rounded-full animate-pulse"></div>
                    <span class="text-xs lg:text-sm font-semibold text-green-600 dark:text-green-400 uppercase tracking-wider">
                        {{ t('success') ?? 'Success' }}
                    </span>
                </div>

                <!-- Main Heading -->
                <h1 class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold leading-tight mb-3 lg:mb-4">
                    <span class="block text-gray-900 dark:text-white">{{ t('application') ?? 'Application' }}</span>
                    <span class="block bg-gradient-to-r from-green-500 via-green-400 to-green-500 bg-clip-text text-transparent animate-gradient-x mt-1 lg:mt-2">
                        {{ t('submitted') ?? 'Submitted Successfully!' }}
                    </span>
                </h1>
                
                <!-- Subheading -->
                <p class="text-sm lg:text-base text-gray-600 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed px-2">
                    {{ t('success_thank_message') ?? 'Thank you for submitting your business registration application. Our team will review it shortly.' }}
                </p>
            </div>

            <!-- Application Details Card -->
            <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl lg:rounded-2xl p-4 sm:p-6 lg:p-8 border border-gray-100 dark:border-gray-700 shadow-xl mb-6 lg:mb-8 text-left animate-slide-up animation-delay-200">
                <div class="flex items-center gap-3 mb-4 sm:mb-6">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-gold-500/20 to-gold-300/20 rounded-lg lg:rounded-xl flex items-center justify-center">
                        <i class="fas fa-file-alt text-gold-500 text-lg sm:text-xl"></i>
                    </div>
                    <h2 class="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">
                        {{ t('application_details') ?? 'Application Details' }}
                    </h2>
                </div>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div class="space-y-1">
                        <label class="text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">
                            {{ t('application_reference') ?? 'Application Reference' }}
                        </label>
                        <p class="text-sm sm:text-base lg:text-lg font-semibold text-gray-900 dark:text-white">
                            #SR-{{ str_pad($serviceRequest->id, 6, '0', STR_PAD_LEFT) }}
                        </p>
                    </div>
                    
                    <div class="space-y-1">
                        <label class="text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">
                            {{ t('submitted_on') ?? 'Submitted On' }}
                        </label>
                        <p class="text-sm sm:text-base lg:text-lg font-semibold text-gray-900 dark:text-white">
                            {{ $serviceRequest->created_at->format('F j, Y g:i A') }}
                        </p>
                    </div>
                    
                    <div class="space-y-1">
                        <label class="text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">
                            {{ t('package_type') ?? 'Package Type' }}
                        </label>
                        <p class="text-sm sm:text-base lg:text-lg font-semibold text-gray-900 dark:text-white capitalize">
                            {{ $serviceRequest->package_type }}
                        </p>
                    </div>
                    
                    <div class="space-y-1">
                        <label class="text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">
                            {{ t('total_amount') ?? 'Total Amount' }}
                        </label>
                        <p class="text-sm sm:text-base lg:text-lg font-bold bg-gradient-to-r from-gold-500 to-gold-400 bg-clip-text text-transparent">
                            {{ number_format($serviceRequest->total_price, 2) }} SR
                        </p>
                    </div>
                </div>

                <!-- Status Badge -->
                <div class="mt-4 sm:mt-6 pt-4 border-t border-gray-200 dark:border-gray-600">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
                        <span class="font-semibold text-gray-900 dark:text-white text-sm sm:text-base">
                            {{ t('current_status') ?? 'Current Status' }}
                        </span>
                        <span class="px-3 py-2 bg-gradient-to-r from-yellow-500 to-yellow-400 text-white rounded-full font-semibold text-xs sm:text-sm capitalize inline-flex items-center gap-2 shadow-lg shadow-yellow-500/20">
                            <div class="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></div>
                            {{ $serviceRequest->status }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Next Steps -->
            <div class="bg-gradient-to-br from-blue-500/5 to-blue-400/5 dark:from-blue-500/10 dark:to-blue-400/5 border border-blue-200 dark:border-blue-800 rounded-xl lg:rounded-2xl p-4 sm:p-6 lg:p-8 mb-6 lg:mb-8 text-left animate-slide-up animation-delay-300">
                <div class="flex items-center gap-3 mb-4 sm:mb-6">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-blue-500/20 to-blue-400/20 rounded-lg lg:rounded-xl flex items-center justify-center">
                        <i class="fas fa-road text-blue-500 text-lg sm:text-xl"></i>
                    </div>
                    <h3 class="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">
                        {{ t('What_Happens_Next') ?? 'What Happens Next?' }}
                    </h3>
                </div>
                
                <div class="space-y-4">
                    <div class="flex items-start gap-3 sm:gap-4 p-3 sm:p-4 bg-white/50 dark:bg-gray-700/50 rounded-xl hover:transform hover:-translate-y-1 transition-all duration-300">
                        <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-400 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 text-sm sm:text-base font-bold shadow-lg">
                            1
                        </div>
                        <div class="flex-1">
                            <h4 class="font-semibold text-gray-900 dark:text-white text-sm sm:text-base mb-1">
                                {{ t('Initial_Review') ?? 'Initial Review' }}
                            </h4>
                            <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm">
                                {{ t('Our_team_will_review') ?? 'Our team will review your application within 24-48 hours.' }}
                            </p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-3 sm:gap-4 p-3 sm:p-4 bg-white/50 dark:bg-gray-700/50 rounded-xl hover:transform hover:-translate-y-1 transition-all duration-300">
                        <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-400 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 text-sm sm:text-base font-bold shadow-lg">
                            2
                        </div>
                        <div class="flex-1">
                            <h4 class="font-semibold text-gray-900 dark:text-white text-sm sm:text-base mb-1">
                                {{ t('document_preparation') ?? 'Document Preparation' }}
                            </h4>
                            <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm">
                                {{ t('Well_prepare_all_necessary') ?? 'We\'ll prepare all necessary legal documents and registration forms.' }}
                            </p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-3 sm:gap-4 p-3 sm:p-4 bg-white/50 dark:bg-gray-700/50 rounded-xl hover:transform hover:-translate-y-1 transition-all duration-300">
                        <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-400 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 text-sm sm:text-base font-bold shadow-lg">
                            3
                        </div>
                        <div class="flex-1">
                            <h4 class="font-semibold text-gray-900 dark:text-white text-sm sm:text-base mb-1">
                                {{ t('Updates_Communication') ?? 'Updates & Communication' }}
                            </h4>
                            <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm">
                                {{ t('Youll_receive_regular_updates') ?? 'You\'ll receive regular updates via email and SMS about your application progress.' }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center animate-slide-up animation-delay-400">
                <a href="{{ route('dashboard') }}" 
                   class="px-6 sm:px-8 py-3 bg-gradient-to-r from-gold-500 to-gold-400 hover:from-gold-600 hover:to-gold-500 text-white font-semibold rounded-xl transition-all duration-200 transform hover:scale-105 flex items-center justify-center gap-2 text-sm sm:text-base shadow-lg shadow-gold-500/30">
                    <i class="fas fa-tachometer-alt text-sm sm:text-base"></i>
                    {{ t('view_dashboard') ?? 'View Dashboard' }}
                </a>
                
                <a href="{{ route('home') }}" 
                   class="px-6 sm:px-8 py-3 bg-white/50 dark:bg-gray-700/50 hover:bg-white dark:hover:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white font-semibold rounded-xl transition-all duration-200 transform hover:scale-105 flex items-center justify-center gap-2 text-sm sm:text-base">
                    <i class="fas fa-home text-sm sm:text-base"></i>
                    {{ t('back_to_home') ?? 'Back to Home' }}
                </a>
            </div>
        </div>

        <!-- Floating Celebration Confetti -->
        <div class="fixed top-0 left-0 w-full h-full pointer-events-none z-0">
            <div class="absolute top-0 left-1/4 w-2 h-2 bg-gold-500 rounded-full animate-confetti-1"></div>
            <div class="absolute top-0 left-1/2 w-2 h-2 bg-green-500 rounded-full animate-confetti-2"></div>
            <div class="absolute top-0 left-3/4 w-2 h-2 bg-blue-500 rounded-full animate-confetti-3"></div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Add subtle animation to success icon
            const successIcon = document.querySelector('.animate-bounce-slow');
            setTimeout(() => {
                successIcon.classList.add('animate-pulse');
                setTimeout(() => {
                    successIcon.classList.remove('animate-pulse');
                }, 2000);
            }, 1000);

            // Copy reference number functionality
            const refNumber = document.querySelector('.text-gray-900.font-semibold');
            if (refNumber) {
                refNumber.addEventListener('click', function() {
                    const text = this.textContent.trim();
                    navigator.clipboard.writeText(text).then(() => {
                        // Show copied notification
                        const tooltip = document.createElement('div');
                        tooltip.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 animate-slide-up';
                        tooltip.textContent = 'Reference number copied!';
                        document.body.appendChild(tooltip);
                        
                        setTimeout(() => {
                            tooltip.remove();
                        }, 2000);
                    });
                });
            }

            // Update timeline animation based on status
            function updateTimeline() {
                const status = '{{ strtolower($serviceRequest->status) }}';
                const timelineSteps = document.querySelectorAll('.flex.flex-col.items-center');
                
                timelineSteps.forEach((step, index) => {
                    const stepElement = step.querySelector('div');
                    if (status === 'submitted' && index === 1) {
                        stepElement.classList.remove('bg-gradient-to-br', 'from-gray-300', 'to-gray-200', 'dark:from-gray-600', 'dark:to-gray-700');
                        stepElement.classList.add('bg-gradient-to-br', 'from-yellow-500', 'to-yellow-400', 'animate-pulse');
                    }
                });
            }

            updateTimeline();

            // Auto-refresh page every 5 minutes to check status updates
            setTimeout(() => {
                window.location.reload();
            }, 300000); // 5 minutes
        });
    </script>

    <style>
        /* Custom Animations */
        @keyframes pulse-gold {
            0%, 100% {
                opacity: 0.7;
            }
            50% {
                opacity: 0.4;
            }
        }

        @keyframes gradient-x {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        @keyframes bounce-slow {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes confetti-1 {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        @keyframes confetti-2 {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(-360deg);
                opacity: 0;
            }
        }

        @keyframes confetti-3 {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(180deg);
                opacity: 0;
            }
        }

        .animate-pulse-gold {
            animation: pulse-gold 3s ease-in-out infinite;
        }

        .animate-gradient-x {
            background-size: 200% auto;
            animation: gradient-x 3s ease infinite;
        }

        .animate-bounce-slow {
            animation: bounce-slow 2s ease-in-out infinite;
        }

        .animate-slide-up {
            animation: slideUp 0.6s ease-out forwards;
            opacity: 0;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in {
            animation: fadeIn 0.8s ease-out forwards;
            opacity: 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .animate-confetti-1 {
            animation: confetti-1 5s linear infinite;
            animation-delay: 0s;
        }

        .animate-confetti-2 {
            animation: confetti-2 5s linear infinite;
            animation-delay: 1s;
        }

        .animate-confetti-3 {
            animation: confetti-3 5s linear infinite;
            animation-delay: 2s;
        }

        .animation-delay-100 {
            animation-delay: 100ms;
        }

        .animation-delay-200 {
            animation-delay: 200ms;
        }

        .animation-delay-300 {
            animation-delay: 300ms;
        }

        .animation-delay-400 {
            animation-delay: 400ms;
        }

        .animation-delay-500 {
            animation-delay: 500ms;
        }

        .animation-delay-600 {
            animation-delay: 600ms;
        }

        /* Gold Button Styles */
        .btn-gold {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
        }

        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4);
            background: linear-gradient(135deg, #eab308 0%, #facc15 100%);
        }

        .btn-gold::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: translateX(-100%);
        }

        .btn-gold:hover::after {
            animation: shimmer 1.5s infinite;
        }
        
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        /* Mobile Responsive Improvements */
        @media (max-width: 640px) {
            .animate-bounce-slow {
                animation: bounce-slow 3s ease-in-out infinite;
            }
            
            .fixed.top-0 {
                display: none; /* Hide confetti on mobile for performance */
            }
            
            .grid-cols-2 {
                grid-template-columns: 1fr;
            }
        }

        /* Better tap targets on mobile */
        @media (max-width: 768px) {
            button, 
            a {
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        /* Truncation utilities */
        .truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Focus styles for accessibility */
        button:focus, 
        a:focus {
            outline: 2px solid rgba(250, 204, 21, 0.5);
            outline-offset: 2px;
        }

        /* Timeline responsive adjustments */
        @media (max-width: 640px) {
            .relative.flex.justify-between {
                gap: 0.5rem;
            }
            
            .flex-col.items-center span {
                font-size: 10px;
            }
            
            .w-8.h-8 {
                width: 1.5rem;
                height: 1.5rem;
            }
        }

        /* Custom scrollbar */
        .overflow-y-auto::-webkit-scrollbar {
            width: 4px;
        }

        .overflow-y-auto::-webkit-scrollbar-track {
            background: transparent;
        }

        .overflow-y-auto::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, rgba(34, 197, 94, 0.3), rgba(21, 128, 61, 0.3));
            border-radius: 2px;
        }
    </style>
@endsection