@extends('layouts.app')

@section('title', 'Your Website is Ready! - Success')
@section('description', 'Congratulations! Your professional website has been created and is now live. View your website and learn about next steps.')

@push('styles')
<style>
    .celebration-animation {
        animation: celebrate 2s ease-in-out;
    }
    @keyframes celebrate {
        0% { transform: scale(0.8) rotate(-10deg); opacity: 0; }
        50% { transform: scale(1.1) rotate(5deg); opacity: 1; }
        100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    .confetti {
        position: absolute;
        width: 10px;
        height: 10px;
        background: #f59e0b;
        animation: confetti-fall 3s infinite linear;
    }
    .confetti:nth-child(1) { left: 10%; animation-delay: 0s; background: #ef4444; }
    .confetti:nth-child(2) { left: 20%; animation-delay: 0.5s; background: #10b981; }
    .confetti:nth-child(3) { left: 30%; animation-delay: 1s; background: #3b82f6; }
    .confetti:nth-child(4) { left: 40%; animation-delay: 1.5s; background: #8b5cf6; }
    .confetti:nth-child(5) { left: 50%; animation-delay: 2s; background: #f59e0b; }
    .confetti:nth-child(6) { left: 60%; animation-delay: 0.3s; background: #ef4444; }
    .confetti:nth-child(7) { left: 70%; animation-delay: 0.8s; background: #10b981; }
    .confetti:nth-child(8) { left: 80%; animation-delay: 1.3s; background: #3b82f6; }
    .confetti:nth-child(9) { left: 90%; animation-delay: 1.8s; background: #8b5cf6; }
    
    @keyframes confetti-fall {
        0% { transform: translateY(-100vh) rotate(0deg); }
        100% { transform: translateY(100vh) rotate(360deg); }
    }
    
    .website-preview {
        border: 8px solid #f3f4f6;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        transition: transform 0.3s ease;
    }
    .website-preview:hover {
        transform: scale(1.02);
    }
    
    .share-button {
        transition: all 0.3s ease;
    }
    .share-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    }
    
    .feature-card {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border: 1px solid #e2e8f0;
        transition: all 0.3s ease;
    }
    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }
</style>
@endpush

@section('content')
<!-- Confetti Animation -->
<div class="fixed inset-0 pointer-events-none overflow-hidden z-10">
    <div class="confetti"></div>
    <div class="confetti"></div>
    <div class="confetti"></div>
    <div class="confetti"></div>
    <div class="confetti"></div>
    <div class="confetti"></div>
    <div class="confetti"></div>
    <div class="confetti"></div>
    <div class="confetti"></div>
</div>

<div class="min-h-screen bg-gray-50 py-12">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Success Header -->
        <div class="text-center mb-12 celebration-animation">
            <div class="mb-6">
                <div class="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-check text-white text-4xl"></i>
                </div>
                <h1 class="text-4xl md:text-5xl font-heading font-bold text-gray-900 mb-4">
                    🎉 Congratulations! 🎉
                </h1>
                <h2 class="text-2xl md:text-3xl font-heading font-semibold text-gray-700 mb-6">
                    Your Website is Live!
                </h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    Your professional website has been created and is now live on the internet. 
                    Share it with your customers and start growing your online presence today!
                </p>
            </div>
        </div>

        <!-- Website Info Card -->
        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                <div>
                    <h3 class="text-2xl font-heading font-bold text-gray-900 mb-4">Website Details</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="text-sm font-medium text-gray-600">Company Name</label>
                            <p class="text-lg font-semibold text-gray-900">{{ $website->company_name }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Website Address</label>
                            <div class="flex items-center space-x-3">
                                <p class="text-lg font-semibold text-primary-600">{{ $website->full_url ?? $website->subdomain . '.' . ($website->domain ?? 'find-local-services.com') }}</p>
                                <button onclick="copyWebsiteUrl()" class="text-gray-500 hover:text-primary-600 transition-colors" title="Copy URL">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Template Used</label>
                            <p class="text-lg text-gray-900">{{ $website->template->name ?? 'Default Template' }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Created</label>
                            <p class="text-lg text-gray-900">{{ $website->created_at->format('M j, Y \a\t g:i A') }}</p>
                        </div>
                    </div>
                </div>
                
                <!-- Website Preview -->
                <div class="website-preview">
                    <iframe src="https://{{ $website->full_url ?? $website->subdomain . '.' . ($website->domain ?? 'find-local-services.com') }}" 
                            class="w-full h-96" 
                            loading="lazy"
                            onerror="this.src='/images/website-preview-placeholder.jpg'">
                    </iframe>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
            <h3 class="text-2xl font-heading font-bold text-gray-900 mb-6">What's Next?</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <a href="https://{{ $website->full_url ?? $website->subdomain . '.' . ($website->domain ?? 'find-local-services.com') }}" 
                   target="_blank" 
                   class="bg-primary-600 text-white px-6 py-4 rounded-lg font-semibold text-center hover:bg-primary-700 transition-colors share-button">
                    <i class="fas fa-external-link-alt mr-2"></i>
                    View Live Site
                </a>
                
                <button onclick="shareWebsite()" 
                        class="bg-green-600 text-white px-6 py-4 rounded-lg font-semibold hover:bg-green-700 transition-colors share-button">
                    <i class="fas fa-share-alt mr-2"></i>
                    Share Website
                </button>
                
                <a href="#" 
                   class="bg-yellow-500 text-white px-6 py-4 rounded-lg font-semibold text-center hover:bg-yellow-600 transition-colors share-button">
                    <i class="fas fa-edit mr-2"></i>
                    Customize Design
                </a>
                
                <a href="{{ route('home') }}" 
                   class="bg-gray-600 text-white px-6 py-4 rounded-lg font-semibold text-center hover:bg-gray-700 transition-colors share-button">
                    <i class="fas fa-plus mr-2"></i>
                    Create Another
                </a>
            </div>
        </div>

        <!-- Share Section -->
        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
            <h3 class="text-2xl font-heading font-bold text-gray-900 mb-6">Share Your New Website</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <button onclick="shareOnFacebook()" 
                        class="bg-blue-600 text-white px-4 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors share-button">
                    <i class="fab fa-facebook-f mr-2"></i>Facebook
                </button>
                
                <button onclick="shareOnTwitter()" 
                        class="bg-blue-400 text-white px-4 py-3 rounded-lg font-semibold hover:bg-blue-500 transition-colors share-button">
                    <i class="fab fa-twitter mr-2"></i>Twitter
                </button>
                
                <button onclick="shareOnLinkedIn()" 
                        class="bg-blue-800 text-white px-4 py-3 rounded-lg font-semibold hover:bg-blue-900 transition-colors share-button">
                    <i class="fab fa-linkedin-in mr-2"></i>LinkedIn
                </button>
                
                <button onclick="shareByEmail()" 
                        class="bg-gray-600 text-white px-4 py-3 rounded-lg font-semibold hover:bg-gray-700 transition-colors share-button">
                    <i class="fas fa-envelope mr-2"></i>Email
                </button>
            </div>
        </div>

        <!-- Next Steps -->
        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
            <h3 class="text-2xl font-heading font-bold text-gray-900 mb-6">Recommended Next Steps</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="feature-card p-6 rounded-lg">
                    <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-search text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-gray-900 mb-3">SEO Optimization</h4>
                    <p class="text-gray-600 mb-4">Improve your search engine rankings and get found by more customers.</p>
                    <a href="#" class="text-primary-600 hover:text-primary-700 font-medium">Learn More →</a>
                </div>
                
                <div class="feature-card p-6 rounded-lg">
                    <div class="w-12 h-12 bg-green-100 text-green-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-chart-line text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-gray-900 mb-3">Analytics Setup</h4>
                    <p class="text-gray-600 mb-4">Track your website visitors and understand your audience better.</p>
                    <a href="#" class="text-primary-600 hover:text-primary-700 font-medium">Setup Analytics →</a>
                </div>
                
                <div class="feature-card p-6 rounded-lg">
                    <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-bullhorn text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-gray-900 mb-3">Marketing Tools</h4>
                    <p class="text-gray-600 mb-4">Promote your business with email marketing and social media integration.</p>
                    <a href="#" class="text-primary-600 hover:text-primary-700 font-medium">Get Started →</a>
                </div>
            </div>
        </div>

        <!-- Support Section -->
        <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl p-8 text-center">
            <h3 class="text-2xl font-heading font-bold mb-4">Need Help Getting Started?</h3>
            <p class="text-xl text-blue-100 mb-6">
                Our support team is here to help you make the most of your new website.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="#" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                    <i class="fas fa-life-ring mr-2"></i>Contact Support
                </a>
                <a href="#" class="bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition-colors border border-blue-500">
                    <i class="fas fa-book mr-2"></i>View Documentation
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Copy Success Toast -->
<div id="copy-toast" class="hidden fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50">
    <i class="fas fa-check mr-2"></i>Website URL copied to clipboard!
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const websiteUrl = 'https://{{ $website->full_url ?? $website->subdomain . '.' . ($website->domain ?? 'find-local-services.com') }}';
    const companyName = '{{ $website->company_name }}';
    
    // Copy website URL to clipboard
    window.copyWebsiteUrl = function() {
        navigator.clipboard.writeText(websiteUrl).then(function() {
            showCopyToast();
        }).catch(function() {
            // Fallback for older browsers
            const textArea = document.createElement('textarea');
            textArea.value = websiteUrl;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            showCopyToast();
        });
    };
    
    function showCopyToast() {
        const toast = document.getElementById('copy-toast');
        toast.classList.remove('hidden');
        setTimeout(() => {
            toast.classList.add('hidden');
        }, 3000);
    }
    
    // Share functions
    window.shareWebsite = function() {
        if (navigator.share) {
            navigator.share({
                title: `${companyName} - Professional Website`,
                text: `Check out the new website for ${companyName}!`,
                url: websiteUrl
            });
        } else {
            copyWebsiteUrl();
        }
    };
    
    window.shareOnFacebook = function() {
        const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(websiteUrl)}`;
        window.open(url, '_blank', 'width=600,height=400');
    };
    
    window.shareOnTwitter = function() {
        const text = `Check out the new website for ${companyName}!`;
        const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(websiteUrl)}`;
        window.open(url, '_blank', 'width=600,height=400');
    };
    
    window.shareOnLinkedIn = function() {
        const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(websiteUrl)}`;
        window.open(url, '_blank', 'width=600,height=400');
    };
    
    window.shareByEmail = function() {
        const subject = `Check out the new website for ${companyName}`;
        const body = `Hi,\n\nI wanted to share the new website for ${companyName}:\n${websiteUrl}\n\nBest regards`;
        const url = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
        window.location.href = url;
    };
    
    // Add some celebration sounds/animations
    setTimeout(() => {
        // Remove confetti after animation
        const confetti = document.querySelectorAll('.confetti');
        confetti.forEach(piece => {
            piece.style.display = 'none';
        });
    }, 4000);
});
</script>
@endpush