@extends('layouts.app')
@section('head')
    <style>
        :root {
            --dr-primary: #2E3A4A;
            --dr-secondary: #B99474;
            --dr-accent: #d4a87c;
            --dr-success: #28a745;
            --dr-dark: #1e1e1e;
            --dr-light: #f8f9fa;
            --dr-border: #e0e4e8;
            --dr-gradient: linear-gradient(135deg, #2E3A4A 0%, #3d4d61 100%);
            --dr-gradient-gold: linear-gradient(135deg, #B99474 0%, #a37f5f 100%);
        }

        /* Override layout styles for confirmation page */
        body {
            background: linear-gradient(135deg, #f5f3f0 0%, #e8e3db 100%) !important;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
            color: var(--dr-dark) !important;
            padding: 0 !important;
            line-height: 1.6 !important;
            margin: 0 !important;
        }

        /* Wrapper for confirmation page content */
        .confirmation-page-wrapper {
            width: 100vw !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 20px !important;
            background: linear-gradient(135deg, #f5f3f0 0%, #e8e3db 100%);
            min-height: calc(100vh - 40px);
            position: relative;
            overflow-x: hidden;
        }

        /* Ensure content section takes full width */
        body > div > div:not(.preloader) {
            max-width: 100% !important;
            width: 100% !important;
        }

        /* Override any container constraints */
        .container,
        .container-fluid {
            max-width: 100% !important;
            width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /* Ensure confirmation page wrapper is isolated */
        .confirmation-page-wrapper * {
            box-sizing: border-box;
        }

        /* Animation de l'icône de succès */
        .success-icon {
            margin: 0 auto 20px;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--dr-success);
            border-radius: 50%;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
            animation: iconPulse 0.6s ease-in-out, iconScale 0.3s ease-in-out 0.6s both;
        }

        .success-icon i {
            font-size: 2.5rem;
            color: white;
            animation: iconBeat 1s ease-in-out infinite 1s;
        }

        @keyframes iconPulse {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes iconScale {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        @keyframes iconBeat {
            0%, 100% {
                transform: scale(1);
            }
            25% {
                transform: scale(1.1);
            }
            50% {
                transform: scale(1);
            }
            75% {
                transform: scale(1.05);
            }
        }

        /* Animations de fade-in */
        .fade-in {
            animation: fadeIn 0.8s ease-in;
        }

        .fade-in-delay {
            animation: fadeIn 0.8s ease-in 0.3s both;
        }

        .fade-in-delay-2 {
            animation: fadeIn 0.8s ease-in 0.6s both;
        }

        .fade-in-delay-3 {
            animation: fadeIn 0.8s ease-in 0.9s both;
        }

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

        /* Canvas pour confettis */
        #confetti-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }

        /* Container principal */
        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            padding: 0 20px;
        }

        /* Header */
        .confirmation-page-wrapper .header-logo {
            text-align: center;
            margin-bottom: 30px;
            padding: 30px 20px !important;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            max-width: 100% !important;
            width: 100% !important;
        }

        .confirmation-page-wrapper .header-logo h1 {
            font-size: 2.8rem;
            color: var(--dr-primary);
            font-weight: 700;
            margin: 0;
            letter-spacing: 2px;
        }

        .confirmation-page-wrapper .header-logo .subtitle {
            color: var(--dr-secondary);
            font-size: 1rem;
            margin-top: 8px;
            font-weight: 500;
        }

        /* Card principale */
        .confirmation-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            margin-bottom: 20px;
            border: 1px solid var(--dr-border);
        }

        /* Section Header avec succès */
        .success-header {
            background: var(--dr-gradient);
            color: white;
            padding: 40px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .success-header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(185, 148, 116, 0.2) 0%, transparent 70%);
            animation: pulse 3s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        .confirmation-page-wrapper .success-header h2 {
            font-size: 2rem;
            margin: 10px 0;
            font-weight: 600;
            position: relative;
            z-index: 1;
            color: white !important;
        }

        .confirmation-page-wrapper .success-header .reference {
            font-size: 0.95rem;
            margin-top: 5px;
            opacity: 0.95;
            position: relative;
            z-index: 1;
            color: white !important;
        }

        .success-header .amount {
            font-size: 2.8rem;
            font-weight: 700;
            margin: 20px 0;
            position: relative;
            z-index: 1;
            color: var(--dr-secondary);
        }

        /* Two Column Layout */
        .two-column-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            border-bottom: 1px solid var(--dr-border);
        }

        .column-left,
        .column-right {
            padding: 25px;
        }

        .column-left {
            border-right: 1px solid var(--dr-border);
            background: #f8f6f3;
        }

        .column-right {
            background: white;
        }

        /* Labels et valeurs */
        .info-label {
            font-size: 0.85rem;
            color: var(--dr-secondary);
            font-weight: 700;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .info-value {
            font-size: 1.05rem;
            color: var(--dr-primary);
            font-weight: 500;
            margin-bottom: 20px;
        }

        .info-value.large {
            font-size: 1.5rem;
            /*color: var(--dr-secondary);*/
            font-weight: 700;
        }

        /* Section Title */
        .section-title {
            font-size: 1.4rem;
            color: var(--dr-primary);
            font-weight: 700;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid var(--dr-secondary);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .section-title i {
            color: var(--dr-secondary);
            font-size: 1.5rem;
        }

        /* Detail Rows */
        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .detail-row:last-child {
            border-bottom: none;
        }

        .detail-label {
            font-size: 0.95rem;
            color: var(--dr-secondary);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .detail-label i {
            color: var(--dr-secondary);
            width: 20px;
        }

        .detail-value {
            font-size: 0.95rem;
            color: var(--dr-primary);
            font-weight: 600;
            text-align: right;
        }

        /* Services section */
        .services-section {
            background: linear-gradient(135deg, #faf8f5 0%, #f5f0ea 100%);
            padding: 25px;
            border-radius: 10px;
            margin-top: 20px;
            border: 1px solid #e8dfd5;
        }

        .services-section h5 {
            color: var(--dr-primary);
            margin-bottom: 20px;
            font-weight: 700;
            font-size: 1.1rem;
        }

        .service-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #e8dfd5;
        }

        .service-item:last-child {
            border-bottom: none;
        }

        .service-item strong {
            color: var(--dr-secondary);
        }

        /* Alert Boxes */
        .alert-box {
            padding: 20px;
            border-radius: 10px;
            margin: 15px 0;
            border-left: 4px solid;
            display: flex;
            gap: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .alert-box i {
            font-size: 1.3rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .alert-warning {
            background: #fff3cd;
            border-color: #ffc107;
            color: #856404;
        }

        .alert-info {
            background: #d1ecf1;
            border-color: #17a2b8;
            color: #0c5460;
        }

        .alert-medical {
            background: #f8f6f3;
            border-color: var(--dr-secondary);
            color: var(--dr-primary);
        }

        /* Map Section */
        .map-container {
            border-radius: 12px;
            overflow: hidden;
            margin-top: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .map-container iframe {
            width: 100%;
            height: 350px;
            border: none;
        }

        .address-card {
            background: linear-gradient(135deg, #faf8f5 0%, #f5f0ea 100%);
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 20px;
            border: 1px solid #e8dfd5;
        }

        .address-card h5 {
            color: var(--dr-primary);
            margin-bottom: 15px;
            font-weight: 700;
            font-size: 1.2rem;
        }

        .address-card p {
            margin: 10px 0;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.95rem;
            color: var(--dr-primary);
        }

        .address-card i {
            color: var(--dr-secondary);
            width: 22px;
            font-size: 1.1rem;
        }

        /* Doctor Info Box */
        .doctor-info {
            background: var(--dr-gradient);
            color: white;
            padding: 25px;
            border-radius: 12px;
            margin: 20px 0;
            box-shadow: 0 4px 20px rgba(46, 58, 74, 0.3);
            position: relative;
            overflow: hidden;
        }

        .doctor-info::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(185, 148, 116, 0.2) 0%, transparent 70%);
            border-radius: 50%;
        }

        .doctor-info h4 {
            margin-bottom: 15px;
            font-weight: 700;
            position: relative;
            z-index: 1;
        }

        .doctor-info p {
            margin: 8px 0;
            opacity: 0.95;
            position: relative;
            z-index: 1;
        }

        /* Footer */
        .footer-signature {
            text-align: center;
            padding: 40px 20px;
            margin-top: 30px;
            border-top: 3px solid var(--dr-secondary);
            background: white;
            border-radius: 15px;
        }

        .footer-signature p {
            margin: 10px 0;
        }

        .footer-signature .team-name {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dr-primary);
            margin: 15px 0;
        }

        /* Buttons */
        .btn-dr {
            background: var(--dr-gradient-gold);
            color: white;
            border: none;
            padding: 14px 35px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(185, 148, 116, 0.3);
        }

        .btn-dr:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(185, 148, 116, 0.4);
            color: white;
        }

        /* Badge */
        .badge-confirmed {
            background: var(--dr-success);
            color: white;
            padding: 6px 18px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-block;
            box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
        }

        /* Content Padding */
        .content-section {
            padding: 30px;
        }

        /* Medical Icon */
        .medical-icon {
            width: 60px;
            height: 60px;
            background: var(--dr-gradient-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            box-shadow: 0 4px 15px rgba(185, 148, 116, 0.3);
        }

        .medical-icon i {
            font-size: 28px;
            color: white;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            body {
                padding: 10px !important;
            }

            .main-container {
                padding: 0 10px;
            }

            .confirmation-page-wrapper .header-logo h1 {
                font-size: 2rem;
            }

            .success-header .amount {
                font-size: 2.2rem;
            }

            .two-column-section {
                grid-template-columns: 1fr;
            }

            .column-left {
                border-right: none;
                border-bottom: 1px solid var(--dr-border);
            }

            .detail-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .detail-value {
                text-align: left;
            }

            .content-section {
                padding: 20px;
            }

            .section-title {
                font-size: 1.2rem;
            }
        }

        /* Print Styles */
        @media print {
            #confetti-canvas {
                display: none;
            }

            .btn-dr {
                display: none;
            }

            body {
                background: white;
            }
        }
    </style>
@endsection
@section('content')
    <div class="confirmation-page-wrapper">
        <!-- Canvas pour les confettis -->
        <canvas id="confetti-canvas"></canvas>

        <div class="main-container">
            <!-- Header Logo -->
            <div class="header-logo fade-in">
                <div class="medical-icon">
                    <i class="fas fa-heartbeat"></i>
                </div>
                <h1>DR CLINICA</h1>
                <p class="subtitle">@lang("Centre Dermo-Médical Spécialisé à Bruxelles")</p>
            </div>

            <!-- Success Card -->
            <div class="confirmation-card fade-in-delay">
                <div class="success-header">
                    <!-- Icône de succès animée -->
                    <div class="success-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    @if($item->isRdv())
                        <h2>@lang("Votre rendez-vous est confirmé !") 🎉</h2>
                    @else
                        <h2>@lang("Votre achat est confirmé !") 🎉</h2>
                    @endif
                    <p class="reference">
                        @lang("Référence")
                        @if($item->isRdv())
                            @lang("de rendez-vous")
                        @endif :
                        <strong>{{ $item->getRef() }}</strong>
                    </p>
                </div>

                <!-- Two Column: Message de confirmation -->
                <div class="two-column-section">
                    <div class="column-left">
                        <div class="info-label">@lang("Message de confirmation")</div>
                        <div class="info-value">
                            @if($item->isRdv())
                                @lang("Bonjour Madame/Monsieur, nous sommes heureux de confirmer votre rendez-vous au centre DR Clinica.")
                            @else
                                @lang("Bonjour Madame/Monsieur, nous vous remercions pour votre achat au centre DR Clinica.")
                            @endif
                        </div>
                        <div class="info-value" style="margin-top: 15px;">
                            @lang("Notre équipe médicale compétente et chaleureuse vous accueillera dans nos locaux modernes et confortables.")
                        </div>
                    </div>
                    <div class="column-right">
                        @if($item->isRdv())
                            <div class="info-label">@lang("Date du rendez-vous")</div>
                            <div class="info-value">{{ $item->getDate()->translatedFormat('d F Y') }}</div>
                        @endif
                        <div class="info-label" style="margin-top: 15px;">@lang("Montant")</div>
                        <div class="info-value large">{{ number_format($item->getAmount(), 2, ',', ' ') }} &euro;</div>

                        <div class="info-label" style="margin-top: 15px;">@lang("Statut")</div>
                        <div class="info-value">
                            <span class="badge-confirmed">✓ @lang("CONFIRMÉ")</span>
                        </div>
                    </div>
                </div>

                <!-- Section: Message d'accueil -->
                <div class="content-section" style="background: linear-gradient(135deg, #faf8f5 0%, #ffffff 100%); text-align: center; padding: 30px;">
                    <p style="font-size: 1.15rem; color: var(--dr-primary); line-height: 1.8;">
                        @lang("C'est avec un immense plaisir que l'équipe du") <strong style="color: var(--dr-secondary);">DR Clinica</strong>
                        @if($item->isRdv())
                            @lang("vous accueillera le") <strong>{{ $item->getDate()->translatedFormat('d F Y') }} @lang("à") {{ $item->getTime()->format('H:i') }}</strong> @lang("pour votre consultation.")
                        @else
                            @lang("vous remercie pour votre confiance et votre achat.")
                        @endif
                    </p>
                </div>
            </div>

            <!-- Votre rendez-vous -->
            <div class="confirmation-card fade-in-delay-2">
                <div class="content-section">
                    <div class="section-title">
                        <i class="fas fa-calendar-check"></i>
                        @lang("Détails de votre")
                        @if($item->isRdv())
                            @lang("rendez-vous")
                        @else
                            @lang("achat")
                        @endif
                    </div>

                    <!-- Two Column: Détails -->
                    <div class="two-column-section">
                        <div class="column-left">
                            @if($item->isRdv())
                                <div class="info-label">@lang("Date et heure")</div>
                                <div class="info-value">{{ $item->getDate()->translatedFormat('d F Y') }}</div>
                                <div class="info-value" style="font-size: 2rem; /*color: var(--dr-secondary);*/ font-weight: 700; margin-top: 10px;">
                                    {{ $item->getTime()->format('H:i') }}
                                </div>
                            @endif
                            <div class="info-label" style="margin-top: 25px;">
                                <i class="far fa-clock"></i> @lang("Durée estimée")
                            </div>
                            <div class="info-value">{{ $item->getDurationText() }}</div>
                        </div>
                        <div class="column-right">
                            @if($item->isRdv())
                                <div class="info-label">@lang("Traitement réservé")</div>
                            @else
                                <div class="info-label">@lang("Achat effectué")</div>
                            @endif
                            <div class="info-value large">{{ $item->getTitle() }}</div>
                            <div style="margin-top: 25px;">
                                @if(0)
                                    <div class="detail-row">
                                        <span class="detail-label">
                                            <i class="fas fa-user-md"></i> @lang("Praticien")
                                        </span>
                                        <span class="detail-value">Dr. François Strawczynski</span>
                                    </div>
                                @endif
                                @if($item->zoneDeTraitement())
                                    <div class="detail-row">
                                        <span class="detail-label">
                                            <i class="fas fa-map-marker-alt"></i> @lang("Zone de traitement")
                                        </span>
                                        <span class="detail-value">
                                            {{-- Visage complet --}}
                                            {{ $item->zoneDeTraitement() }}
                                        </span>
                                    </div>
                                @endif
                                @if($item->isRdv())
                                    <div class="detail-row">
                                        <span class="detail-label">
                                            <i class="fas fa-procedures"></i> @lang("Type de consultation")
                                        </span>
                                        <span class="detail-value">
                                            @lang("Première séance")
                                        </span>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Informations médicales importantes -->
            <div class="confirmation-card fade-in-delay-2">
                <div class="content-section">
                    <div class="section-title">
                        <i class="fas fa-info-circle"></i>
                        @lang("Informations importantes")
                    </div>

                    <!-- Two Column: Alertes -->
                    <div class="two-column-section">
                        <div class="column-right">
                            <div class="alert-box alert-info">
                                <i class="far fa-clock"></i>
                                <div>
                                    <strong>@lang("Ponctualité")</strong><br><br>
                                    @lang("Merci d'arriver") <strong>@lang("10 minutes à l'avance")</strong> @lang("pour compléter votre dossier médical")
                                    @lang("et permettre à notre équipe de vous accueillir dans les meilleures conditions.")
                                </div>
                            </div>
                        </div>
                        <div class="column-left">
                            <div class="alert-box alert-warning">
                                <i class="fas fa-calendar-times"></i>
                                <div>
                                    <strong>@lang("Politique d'annulation")</strong><br><br>
                                    @lang("Toute annulation ou modification de rendez-vous doit être effectuée au moins") <strong>@lang("48 heures à l'avance")</strong>.
                                    @lang("Les rendez-vous non annulés dans les délais pourront faire l'objet d'une facturation.")
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="text-align: center; margin-top: 25px;">
                        <a href="{{ route('cgv') }}" class="btn-dr" target=_blank>
                            <i class="fas fa-file-contract"></i> @lang("Consulter nos conditions générales")
                        </a>
                    </div>
                </div>
            </div>

            <!-- Adresse et Plan -->
            <div class="confirmation-card fade-in-delay-3">
                <div class="content-section">
                    <div class="section-title">
                        <i class="fas fa-map-marker-alt"></i>
                        @lang("Comment nous trouver")
                    </div>

                    <!-- Two Column: Adresse et Carte -->
                    <div class="two-column-section">
                        <div class="column-left">
                            <div class="address-card">
                                <h5><i class="fas fa-hospital-alt"></i> DR Clinica</h5>
                                <p><i class="fas fa-map-marker-alt"></i> {{ $calmspa->address }}<br>{{ $calmspa->postcode }} {{ $calmspa->city }}, Belgique</p>
                                <p><i class="fas fa-phone"></i> {{ $calmspa->phone }}</p>
                                <p><i class="fas fa-envelope"></i> {{ $calmspa->email }}</p>
                                <p><i class="fas fa-clock"></i> @lang("Lun-Ven: 9h-19h • Sam: 9h-17h")</p>
                            </div>

                            <div class="alert-box alert-info" style="margin-top: 15px;">
                                <i class="fas fa-parking"></i>
                                <div>
                                    <strong>@lang("Parking")</strong><br>
                                    @lang("Parking privé disponible pour nos patients à l'arrière du bâtiment.")
                                </div>
                            </div>
                        </div>
                        <div class="column-right">
                            <div class="map-container">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1259.9402524942636!2d4.35407731904907!3d50.833377263764405!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3c462483dad0f%3A0x30e72c43541d6c88!2sRue%20Bosquet%2047%2F19%2C%201060%20Saint-Gilles%2C%20Belgique!5e0!3m2!1sfr!2stn!4v1688373788968!5m2!1sfr!2stn"
                                    allowfullscreen=""
                                    loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade">
                                </iframe>
                            </div>
                            <div style="text-align: center; margin-top: 15px;">
                                <a href="https://maps.google.com/?q={{ urlencode($calmspa->address . ', ' . $calmspa->postcode . ' ' . $calmspa->city . ', Belgique') }}" target="_blank" style="color: var(--dr-secondary); text-decoration: none; font-weight: 600;">
                                    <i class="fas fa-directions"></i> @lang("Ouvrir dans Google Maps")
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer Signature -->
            <div class="footer-signature fade-in-delay-3">
                <div class="medical-icon" style="margin: 0 auto 20px;">
                    <i class="fas fa-heartbeat"></i>
                </div>
                <p style="color: var(--dr-secondary); font-size: 1.1rem;">
                    <strong>@lang("Cordialement"),</strong>
                </p>
                <p class="team-name">@lang("L'équipe DR Clinica")</p>
                <p style="color: var(--dr-secondary); font-size: 0.9rem; margin-top: 20px; max-width: 600px; margin-left: auto; margin-right: auto;">
                    @lang("Nous sommes impatients de vous accueillir dans notre centre et de vous accompagner")
                    @lang("dans votre parcours de soins esthétiques et dermatologiques.")
                </p>
                <p style="color: var(--dr-secondary); font-size: 0.85rem; margin-top: 25px;">
                    <em>@lang("Pour toute question, contactez-nous au") {{ $calmspa->phone }}</em>
                </p>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        function startConfettiAnimation() {
            const canvas = document.getElementById('confetti-canvas');
            if (!canvas) return;

            const ctx = canvas.getContext('2d');

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            const confetti = [];
            const confettiCount = 120;
            const gravity = 0.5;
            const terminalVelocity = 5;
            const drag = 0.075;

            const colors = [
                {front: '#2E3A4A', back: '#25303d'},
                {front: '#3d4d61', back: '#344258'},
                {front: '#B99474', back: '#a37f5f'},
                {front: '#d4a87c', back: '#c09366'},
                {front: '#e8dfd5', back: '#d4c7b8'},
                {front: '#ffffff', back: '#f5f0ea'}
            ];

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

            function initConfetti() {
                for (let i = 0; i < confettiCount; i++) {
                    confetti.push({
                        color: colors[Math.floor(randomRange(0, colors.length))],
                        dimensions: {
                            x: randomRange(10, 20),
                            y: randomRange(10, 30),
                        },
                        position: {
                            x: randomRange(0, canvas.width),
                            y: canvas.height - 1,
                        },
                        rotation: randomRange(0, 2 * Math.PI),
                        scale: {
                            x: 1,
                            y: 1,
                        },
                        velocity: {
                            x: randomRange(-25, 25),
                            y: randomRange(0, -50),
                        },
                    });
                }
            }

            function render() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                confetti.forEach((confetto, index) => {
                    let width = confetto.dimensions.x * confetto.scale.x;
                    let height = confetto.dimensions.y * confetto.scale.y;

                    ctx.translate(confetto.position.x, confetto.position.y);
                    ctx.rotate(confetto.rotation);

                    confetto.velocity.x -= confetto.velocity.x * drag;
                    confetto.velocity.y = Math.min(confetto.velocity.y + gravity, terminalVelocity);
                    confetto.velocity.x += Math.random() > 0.5 ? Math.random() : -Math.random();

                    confetto.position.x += confetto.velocity.x;
                    confetto.position.y += confetto.velocity.y;

                    if (confetto.position.y >= canvas.height) confetti.splice(index, 1);

                    if (confetto.position.x > canvas.width) confetto.position.x = 0;
                    if (confetto.position.x < 0) confetto.position.x = canvas.width;

                    confetto.scale.y = Math.cos(confetto.position.y * 0.1);
                    ctx.fillStyle = confetto.scale.y > 0 ? confetto.color.front : confetto.color.back;

                    ctx.fillRect(-width / 2, -height / 2, width, height);

                    ctx.setTransform(1, 0, 0, 1, 0, 0);

                    confetto.rotation += confetto.velocity.x * 0.01;
                });

                if (confetti.length > 0) {
                    window.requestAnimationFrame(render);
                }
            }

            initConfetti();
            render();

            window.addEventListener('resize', function () {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
        }

        (function () {
            function waitForPreloaderFadeOut() {
                if (typeof jQuery === 'undefined') {
                    setTimeout(waitForPreloaderFadeOut, 100);
                    return;
                }

                const $preloader = jQuery('.preloader');

                if ($preloader.length === 0) {
                    startConfettiAnimation();
                    return;
                }

                const isHidden = $preloader.css('display') === 'none' ||
                    $preloader.css('opacity') === '0' ||
                    !$preloader.is(':visible');

                if (isHidden) {
                    startConfettiAnimation();
                    return;
                }

                $preloader.promise().done(function () {
                    setTimeout(function () {
                        if ($preloader.css('display') === 'none' ||
                            $preloader.css('opacity') === '0' ||
                            !$preloader.is(':visible')) {
                            startConfettiAnimation();
                        } else {
                            checkPreloaderHidden();
                        }
                    }, 100);
                });

                function checkPreloaderHidden() {
                    const checkInterval = setInterval(function () {
                        const $preloader = jQuery('.preloader');
                        if ($preloader.length === 0 ||
                            $preloader.css('display') === 'none' ||
                            $preloader.css('opacity') === '0' ||
                            !$preloader.is(':visible')) {
                            clearInterval(checkInterval);
                            startConfettiAnimation();
                        }
                    }, 50);

                    setTimeout(function () {
                        clearInterval(checkInterval);
                        startConfettiAnimation();
                    }, 3000);
                }

                checkPreloaderHidden();
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', waitForPreloaderFadeOut);
            } else {
                waitForPreloaderFadeOut();
            }
        })();
    </script>
@endsection