@extends('layouts.install')
@section('title', 'Installation Complete')

@section('content')
    <!-- Confetti CDN -->
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

    <style>
        /* Ultra-Modern Enhancements */
        /* Removed heavy 3D transforms on container to prevent click blocking */
        .success-card-container {
            position: relative;
            z-index: 10;
        }

        .success-card {
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.7);
            border-radius: 2rem;
            padding: 3rem 2rem;
            text-align: center;
            box-shadow:
                0 20px 50px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
            /* Removed translateZ to avoid stacking context issues */
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Ambient Glow behind card */
        .success-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.15), transparent 60%);
            pointer-events: none;
            z-index: -1;
        }

        .success-icon-wrapper {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto 2rem;
            z-index: 20;
        }

        .success-checkmark {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #10b981, #059669);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                0 10px 30px -10px rgba(16, 185, 129, 0.6),
                0 0 0 8px rgba(16, 185, 129, 0.15);
            animation: floatIcon 3s ease-in-out infinite;
        }

        .success-checkmark i {
            font-size: 3.5rem;
            color: white;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }

        @keyframes floatIcon {

            0%,
            100% {
                transform: translateY(0) scale(1);
                box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.6);
            }

            50% {
                transform: translateY(-10px) scale(1.05);
                box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.4);
            }
        }

        .success-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, var(--text-main) 0%, var(--primary-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -1.5px;
            line-height: 1.1;
            position: relative;
            z-index: 20;
        }

        .success-message {
            font-size: 1.25rem;
            color: var(--text-muted);
            font-weight: 500;
            margin-bottom: 3rem;
            position: relative;
            z-index: 20;
        }

        .info-box-modern {
            background: white;
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 1.5rem;
            padding: 1.5rem;
            margin-bottom: 2.5rem;
            text-align: left;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
            display: flex;
            align-items: center;
            gap: 1.5rem;
            transition: transform 0.3s ease;
            position: relative;
            z-index: 20;
        }

        .info-box-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
        }

        .info-icon {
            width: 3rem;
            height: 3rem;
            background: #eff6ff;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .info-content h4 {
            margin: 0 0 0.25rem 0;
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-main);
        }

        .info-content p {
            margin: 0;
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .btn-super {
            display: block;
            /* Ensure it behaves like a block */
            background: linear-gradient(135deg, var(--primary-color), #4f46e5);
            color: white;
            padding: 1.25rem 2.5rem;
            border-radius: 1.25rem;
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.4);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            z-index: 50;
            /* Super high z-index */
            text-decoration: none;
            /* Ensure no underline */
        }

        .btn-super:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 20px 30px -10px rgba(79, 70, 229, 0.5);
            color: white;
            text-decoration: none;
        }

        .actions {
            position: relative;
            z-index: 50;
        }

        /* Important: Stop confetti from blocking clicks */
        canvas {
            pointer-events: none !important;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
            /* Behind everything */
        }
    </style>

    <div class="success-card-container">
        <div class="success-card" id="cardEffect">
            <div class="success-icon-wrapper">
                <div class="success-checkmark">
                    <i class="fa-solid fa-check"></i>
                </div>
            </div>

            <h1 class="success-title">Success!</h1>
            <p class="success-message">APK HUB is installed & ready.</p>

            <div class="info-box-modern">
                <div class="info-icon">
                    <i class="fa-solid fa-file-shield"></i>
                </div>
                <div class="info-content">
                    <h4>Secure Configuration</h4>
                    <p>Environment settings saved to <strong>.env</strong></p>
                </div>
            </div>

            <div class="actions">
                <!-- Using direct JS functionality to guarantee navigation -->
                <a href="{{ url('/business/register') }}" class="btn btn-super"
                    onclick="event.preventDefault(); window.location.href='{{ url('/business/register') }}';">
                    Get Started <i class="fa-solid fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 1. Trigger Confetti
            var duration = 3 * 1000;
            var animationEnd = Date.now() + duration;
            var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

            function randomInRange(min, max) {
                return Math.random() * (max - min) + min;
            }

            var interval = setInterval(function () {
                var timeLeft = animationEnd - Date.now();

                if (timeLeft <= 0) {
                    return clearInterval(interval);
                }

                var particleCount = 50 * (timeLeft / duration);
                confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
                confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
            }, 250);

            // 2. Simplified CSS3 Hover Effect (No complex JS transforms)
            const card = document.getElementById('cardEffect');

            card.addEventListener('mousemove', (e) => {
                // Very subtle parallax
                // let x = (window.innerWidth / 2 - e.pageX) / 25;
                // let y = (window.innerHeight / 2 - e.pageY) / 25;
                // card.style.transform = `translate(${x}px, ${y}px)`; 
                // Disabled to ensure clickability first
            });
        });
    </script>
@endsection