@extends('layouts.app')

@section('styles')
<style>
    .confetti-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10;
    }
    .coupon-cutout {
        mask-image: radial-gradient(circle at 0 50%, transparent 10px, black 11px), 
                    radial-gradient(circle at 100% 50%, transparent 10px, black 11px);
        mask-composite: intersect;
        -webkit-mask-image: radial-gradient(circle at 0 50%, transparent 12px, black 13px), 
                            radial-gradient(circle at 100% 50%, transparent 12px, black 13px);
    }
    .float-animation {
        animation: float 6s ease-in-out infinite;
    }
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
</style>
@endsection

@section('header-back')
    <!-- No back button on success screen -->
    <div class="w-10"></div>
@endsection

@section('content')
<canvas class="confetti-canvas" id="confetti"></canvas>

<main class="flex-grow flex flex-col items-center justify-center px-container-padding pt-24 pb-32 mt-16 w-full">
    <!-- Success Indicator -->
    <div class="mb-xl relative">
        <div class="w-24 h-24 bg-primary-fixed rounded-full flex items-center justify-center text-primary-container shadow-[0_0_40px_rgba(0,105,72,0.2)]">
            <span class="material-symbols-outlined !text-5xl" style="font-variation-settings: 'FILL' 1;">check_circle</span>
        </div>
        <!-- Decorative Sparks -->
        <div class="absolute -top-2 -right-2 text-primary opacity-50"><span class="material-symbols-outlined !text-xl">auto_awesome</span></div>
    </div>

    <!-- Typography Block -->
    <div class="text-center mb-2xl">
        <h2 class="font-headline-xl text-headline-xl text-on-surface mb-sm">Congratulations!</h2>
        <p class="font-body-md text-body-md text-on-surface-variant max-w-[280px] mx-auto">Your coupon code is ready to use.</p>
    </div>

    <!-- Styled Coupon Card -->
    <div class="w-full max-w-sm relative float-animation">
        <div class="bg-surface-container-highest coupon-cutout rounded-lg p-lg flex flex-col items-center border border-outline-variant/30">
            <div class="text-on-surface-variant font-label-md text-label-md mb-md uppercase tracking-widest">Limited Offer Code</div>
            <div class="bg-surface-container-lowest border-2 border-dashed border-primary/30 rounded-md px-xl py-lg w-full text-center mb-md group transition-all hover:border-primary">
                <span class="font-mono text-4xl font-bold text-primary tracking-widest" id="couponCode">{{ $code }}</span>
            </div>
            <button class="flex items-center gap-2 text-primary font-label-md text-label-md hover:bg-primary-container/10 px-md py-sm rounded-full transition-colors active:scale-95" onclick="copyCode()">
                <span class="material-symbols-outlined" id="copyIcon">content_copy</span>
                <span id="copyText">Copy Code</span>
            </button>
        </div>
        <!-- Shadow Depth -->
        <div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-[80%] h-4 bg-primary/10 blur-xl rounded-full -z-10"></div>
    </div>

    <!-- Action Buttons -->
    <div class="w-full max-w-sm mt-2xl flex flex-col gap-md">
        <button class="w-full bg-primary text-on-primary py-md rounded-full font-label-md text-label-md shadow-[0_4px_12px_rgba(0,105,72,0.3)] hover:opacity-90 active:scale-95 transition-all">
            Redeem Now
        </button>
        <a href="{{ route('verification.index') }}" class="w-full text-center bg-transparent text-primary py-md rounded-full font-label-md text-label-md hover:bg-primary/5 active:scale-95 transition-all">
            Back to Home
        </a>
    </div>

    <!-- Info Card -->
    <div class="mt-2xl w-full max-w-sm bg-secondary-container/30 border border-secondary-container rounded-lg p-md flex gap-md items-start">
        <span class="material-symbols-outlined text-secondary">info</span>
        <p class="font-body-sm text-body-sm text-on-secondary-container">
            This coupon is valid for the next 24 hours only. Make sure to apply it during checkout to enjoy your discount.
        </p>
    </div>
</main>
@endsection

@section('scripts')
<script>
    // Confetti Logic
    const canvas = document.getElementById('confetti');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let particles = [];
    const colors = ['#006948', '#85f8c4', '#68dba9', '#00855d', '#ffdad7'];

    class Particle {
        constructor() {
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height - canvas.height;
            this.size = Math.random() * 8 + 4;
            this.speed = Math.random() * 3 + 2;
            this.color = colors[Math.floor(Math.random() * colors.length)];
            this.rotation = Math.random() * 360;
            this.rotationSpeed = Math.random() * 10 - 5;
        }
        update() {
            this.y += this.speed;
            this.rotation += this.rotationSpeed;
            if (this.y > canvas.height) {
                this.y = -20;
                this.x = Math.random() * canvas.width;
            }
        }
        draw() {
            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.rotate(this.rotation * Math.PI / 180);
            ctx.fillStyle = this.color;
            ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
            ctx.restore();
        }
    }

    function initConfetti() {
        for (let i = 0; i < 100; i++) {
            particles.push(new Particle());
        }
    }

    function animateConfetti() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.forEach(p => {
            p.update();
            p.draw();
        });
        requestAnimationFrame(animateConfetti);
    }

    initConfetti();
    animateConfetti();

    // Copy Functionality
    function copyCode() {
        const code = document.getElementById('couponCode').innerText;
        navigator.clipboard.writeText(code);
        
        const btnText = document.getElementById('copyText');
        const btnIcon = document.getElementById('copyIcon');
        
        btnText.innerText = 'Copied!';
        btnIcon.innerText = 'check';
        
        setTimeout(() => {
            btnText.innerText = 'Copy Code';
            btnIcon.innerText = 'content_copy';
        }, 2000);
    }

    // Handle window resize
    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        particles = [];
        initConfetti();
    });
</script>
@endsection