{% extends 'main/base.html' %}

{% block title %}Task - Movie Ticket Ordering{% endblock %}
{% block top_icon %}
    <a href="/description/" class="top-icon-btn" aria-label="Task rules" style="gap: 8px;">
        <span style="font-size: 1.2rem;">☰</span>
        <span style="font-size: 0.85rem; font-weight: 600;">Description</span>
    </a>
{% endblock %}

{% block content %}
    <div class="content-card section-inner" style="margin: 0 auto;">
        {% include 'main/_subheader.html' with title="Task" back="/dashboard/" %}
        {% if progress.welcome_bonus_active %}
{#        <div style="margin-bottom: 1.25rem; padding: 0.85rem 1rem; border-radius: 10px; background: var(--bg-elev); border: var(--border-soft); color: var(--text-main); font-size: 0.85rem; line-height: 1.5;">#}
{#            🎁 <strong>€{{ progress.welcome_bonus_amount }} welcome bonus active.</strong> Use it for your free {{ progress.training_total }}-ticket training round. The bonus expires when training ends, but the commission you earn is yours to keep — withdrawable before you join the 3-set game.#}
{#        </div>#}
        {% endif %}
        <!-- Hero Movie Poster -->
        <div id="movie-animation-container" style="position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 2rem; aspect-ratio: 3 / 4; background: #000; border: var(--border-tech); box-shadow: 0 0 15px var(--primary-glow); display: flex; align-items: center; justify-content: center;">
            <div id="movie-poster-wrapper" style="width: 100%; height: 100%; position: relative;">
                <img id="active-poster" src="
" alt="Movie poster" style="width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease-in-out;" />
                <div id="movie-info-overlay" style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.9)); padding: 2rem 1.25rem 1.25rem; color: white;">
                    <h3 id="active-title" style="margin: 0; font-size: 1.25rem; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px;">Loading movies...</h3>
                </div>
            </div>
{#            <button id="play-trailer-btn" type="button" aria-label="Play trailer" style="position: absolute; width: 60px; height: 60px; border-radius: 4px; background: rgba(43, 111, 255, 0.2); border: 2px solid var(--primary); display: grid; place-items: center; cursor: pointer; font-size: 1.5rem; color: white; transition: all 0.2s ease; z-index: 10; box-shadow: 0 0 10px var(--primary-glow);">▶</button>#}
        </div>

        <!-- Trailer player overlay -->
        <div id="trailer-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 1250; place-items: center; padding: 1.25rem;">
            <div style="width: 100%; max-width: 720px; position: relative;">
                <button id="trailer-close" aria-label="Close" style="position: absolute; top: -42px; right: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer;">×</button>
                <div style="position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.5);">
                    <iframe id="trailer-frame" src="" title="Trailer" allow="accelerated-encoder; autoplay; encrypted-media; picture-in-picture" allowfullscreen style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0;"></iframe>
                </div>
            </div>
        </div>

        <!-- START Button -->
        <button id="start-task-btn" class="button primary" style="width: 100%; margin-bottom: 1.5rem;">START TASK</button>

        <!-- Rating Modal (Hidden by default) -->
        <div id="rating-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000; place-items: center; padding: 1.5rem;">
            <div class="content-card" style="width: 100%; max-width: 360px; padding: 0; text-align: left; overflow: hidden; position: relative; max-height: 92vh; overflow-y: auto;">
                <!-- Ticket type badge (Premium / Standard) -->
                <div id="modal-badge" style="position: absolute; top: 0; left: 0; z-index: 2; background: linear-gradient(135deg, #2563eb, #38bdf8); color: #fff; font-size: 0.7rem; font-weight: 800; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; padding: 0.4rem 0.9rem; border-bottom-right-radius: 10px;">Standard Ticket</div>
                <!-- Close -->
                <button id="cancel-rating" aria-label="Close" style="position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer;">×</button>

                <!-- Poster -->
                <div style="aspect-ratio: 2 / 3; background: #000; overflow: hidden;">
                    <img id="modal-movie-img" src="" alt="" style="width: 100%; height: 100%; object-fit: cover;">
                </div>

                <div style="padding: 1.25rem;">
                    <h3 id="modal-movie-title" style="margin: 0 0 1rem; color: var(--text-main); font-size: 1.15rem; font-weight: 800;">Movie Title</h3>

                    <!-- Order details -->
                    <div style="display: grid; gap: 0.55rem; font-size: 0.85rem; margin-bottom: 1rem;">
                        <div style="display: flex; justify-content: space-between; gap: 1rem;"><span style="color: var(--text-muted);">Order Number:</span><span id="modal-order-number" style="color: var(--text-main); font-family: var(--font-mono);">—</span></div>
                        <div style="display: flex; justify-content: space-between; gap: 1rem;"><span style="color: var(--text-muted);">Order time:</span><span id="modal-order-time" style="color: var(--text-main); font-family: var(--font-mono);">—</span></div>
                        <div style="display: flex; justify-content: space-between; gap: 1rem;"><span style="color: var(--text-muted);">Product Brand:</span><span id="modal-product-brand" style="color: var(--text-main); text-align: right;">—</span></div>
                        <div style="display: flex; justify-content: space-between; gap: 1rem;"><span style="color: var(--text-muted);">Price:</span><span style="color: var(--text-main); font-weight: 700;"><span id="modal-movie-price">—</span> x 1</span></div>
                        <div style="display: flex; justify-content: space-between; gap: 1rem;"><span style="color: var(--text-muted);">Commission:</span><span id="modal-movie-commission" style="color: #34d399; font-weight: 800;">—</span></div>
                    </div>

                    <!-- Commission badge -->
                    <div id="modal-commission-badge" style="display: inline-block; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4); color: #f87171; font-weight: 800; font-size: 0.8rem; padding: 0.3rem 0.8rem; border-radius: 6px; margin-bottom: 1rem; font-family: var(--font-mono);">Commission 3%</div>

                    <!-- Ticket processing status -->
                    <div id="modal-status" style="font-size: 0.8rem; margin-bottom: 1rem; padding: 0.6rem 0.75rem; border-radius: 8px; background: var(--bg-elev); border: var(--border-soft); color: var(--text-muted);">Tap a star to rate — your ticket amount is reserved while you rate.</div>

                    <!-- Star rating -->
                    <div style="display: flex; justify-content: flex-start; gap: 0.4rem; margin-bottom: 1.25rem; font-size: 1.8rem; cursor: pointer;">
                        <span class="star" data-value="1" style="color: #475569;">★</span>
                        <span class="star" data-value="2" style="color: #475569;">★</span>
                        <span class="star" data-value="3" style="color: #475569;">★</span>
                        <span class="star" data-value="4" style="color: #475569;">★</span>
                        <span class="star" data-value="5" style="color: #475569;">★</span>
                    </div>

                    <!-- Submit -->
                    <button id="submit-rating" disabled class="button primary" style="width: 100%; opacity: 0.5; cursor: not-allowed;">Submit</button>
                </div>
            </div>
        </div>

        <!-- Special-ticket NOTICE (shown when a star is clicked on a premium /
             golden egg / special ticket). The body is filled by JS per kind. -->
        <div id="notice-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1100; place-items: center; padding: 1.5rem;">
            <div class="content-card" style="width: 100%; max-width: 360px; padding: 1.5rem; text-align: center;">
                <h3 style="margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.12); color: var(--text-main); font-weight: 800; letter-spacing: 1px;">NOTICE</h3>
                <p id="notice-body" style="margin: 0 0 1.5rem; color: #ef4444; font-size: 0.9rem; line-height: 1.7;"></p>
                <button id="notice-yes" class="button primary" style="width: 60%;">YES</button>
            </div>
        </div>

        <!-- Golden Egg picker — the user must pick ONE of three eggs to open and
             book the golden-egg ticket. Only one egg may be clicked. -->
        <style>
            @keyframes egg-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
            @keyframes egg-shake { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-5px) rotate(-7deg); } 40% { transform: translateX(5px) rotate(7deg); } 60% { transform: translateX(-4px) rotate(-5deg); } 80% { transform: translateX(4px) rotate(5deg); } }
            @keyframes egg-pop { 0% { transform: scale(1); } 55% { transform: scale(1.25); } 100% { transform: scale(0.2); opacity: 0; } }
            /* Per-egg colour palette (set on the variant classes below). */
            .egg { position: relative; width: 74px; height: 98px; padding: 0; border: none; background: transparent; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; animation: egg-float 2.6s ease-in-out infinite; --egg-hi: #fff6d6; --egg-mid: #fcd34d; --egg-lo: #f59e0b; --egg-dk: #b45309; --egg-shadow: rgba(146,64,14,0.45); --egg-glow: rgba(245,158,11,0.85); }
            .egg-gold { --egg-hi: #fff6d6; --egg-mid: #fcd34d; --egg-lo: #f59e0b; --egg-dk: #b45309; --egg-shadow: rgba(146,64,14,0.45); --egg-glow: rgba(245,158,11,0.85); }
            .egg-rose { --egg-hi: #ffe1ec; --egg-mid: #fb7faf; --egg-lo: #ec4899; --egg-dk: #9d174d; --egg-shadow: rgba(157,23,77,0.45); --egg-glow: rgba(236,72,153,0.85); }
            .egg-cyan { --egg-hi: #d9f6ff; --egg-mid: #5fd0e6; --egg-lo: #0ea5e9; --egg-dk: #075985; --egg-shadow: rgba(7,89,133,0.45); --egg-glow: rgba(14,165,233,0.85); }
            .egg .egg-body { display: block; width: 100%; height: 100%; border-radius: 50% 50% 50% 50% / 60% 60% 42% 42%; background: radial-gradient(circle at 32% 26%, var(--egg-hi), var(--egg-mid) 38%, var(--egg-lo) 72%, var(--egg-dk)); box-shadow: inset -6px -8px 14px var(--egg-shadow), inset 6px 8px 14px rgba(255,255,255,0.55), 0 8px 18px rgba(0,0,0,0.45); position: relative; overflow: hidden; }
            .egg .egg-body::after { content: ''; position: absolute; top: 12%; left: 20%; width: 26%; height: 34%; border-radius: 50%; background: rgba(255,255,255,0.7); filter: blur(2px); }
            .egg:hover:not(.dimmed):not(.opened) { transform: scale(1.08); filter: drop-shadow(0 0 12px var(--egg-glow)); }
            .egg.dimmed { opacity: 0.3; filter: grayscale(0.7); pointer-events: none; animation: none; }
            .egg.opening { animation: none; }
            .egg.opening .egg-body { animation: egg-shake 0.5s ease 2; }
            .egg.opened { animation: none; }
            .egg.opened .egg-body { animation: egg-pop 0.45s ease forwards; }
            .egg .egg-burst { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; opacity: 0; pointer-events: none; }
            .egg.opened .egg-burst { opacity: 1; transition: opacity 0.2s ease 0.32s; }
        </style>
        <div id="egg-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 1150; place-items: center; padding: 1.5rem;">
            <div class="content-card" style="width: 100%; max-width: 360px; padding: 1.5rem; text-align: center;">
                <h3 style="margin: 0 0 0.35rem; color: #f59e0b; font-weight: 800; letter-spacing: 1px;">🥚 GOLDEN EGG</h3>
                <p id="egg-instruction" style="margin: 0 0 1.5rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6;">You've received a <strong style="color: #f59e0b;">Golden Egg</strong>! Pick <strong style="color: var(--text-main);">one</strong> egg to open and book your ticket.</p>
                <div style="display: flex; justify-content: center; gap: 1rem;">
                    <button class="egg egg-gold" data-egg="1" aria-label="Egg 1" style="animation-delay: 0s;"><span class="egg-body"></span><span class="egg-burst">✨</span></button>
                    <button class="egg egg-rose" data-egg="2" aria-label="Egg 2" style="animation-delay: 0.3s;"><span class="egg-body"></span><span class="egg-burst">✨</span></button>
                    <button class="egg egg-cyan" data-egg="3" aria-label="Egg 3" style="animation-delay: 0.6s;"><span class="egg-body"></span><span class="egg-burst">✨</span></button>
                </div>
            </div>
        </div>

        <!-- Cool success response (after completing a ticket) -->
        <style>
            @keyframes sc-pop { 0% { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
            @keyframes sc-draw { to { stroke-dashoffset: 0; } }
            @keyframes sc-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
            #success-modal .success-card { animation: sc-pop 0.38s cubic-bezier(0.2, 0.8, 0.3, 1.25) both; }
            .success-glow { position: absolute; top: -45%; left: 50%; transform: translateX(-50%); width: 260px; height: 260px; background: radial-gradient(circle, rgba(52,211,153,0.28), transparent 70%); pointer-events: none; animation: sc-glow 2.2s ease-in-out infinite; }
            .sc-circle { stroke: #34d399; stroke-width: 3; fill: none; stroke-dasharray: 151; stroke-dashoffset: 151; animation: sc-draw 0.5s ease forwards; }
            .sc-tick { stroke: #34d399; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 42; stroke-dashoffset: 42; animation: sc-draw 0.35s 0.42s ease forwards; }
        </style>
        <div id="success-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 1200; place-items: center; padding: 1.5rem;">
            <div class="success-card content-card" style="width: 100%; max-width: 360px; padding: 2rem 1.5rem; text-align: center; position: relative; overflow: hidden;">
                <div class="success-glow"></div>
                <svg viewBox="0 0 52 52" width="86" height="86" style="display: block; margin: 0 auto; position: relative;">
                    <circle class="sc-circle" cx="26" cy="26" r="24"/>
                    <path class="sc-tick" d="M14 27 l8 8 l16 -18"/>
                </svg>
                <h3 style="margin: 1rem 0 0.25rem; color: #34d399; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.5px;">Ticket Completed!</h3>
                <p id="success-movie" style="margin: 0 0 1.25rem; color: var(--text-muted); font-size: 0.85rem;">Movie</p>

                <div style="display: grid; gap: 0.5rem; text-align: left; background: var(--bg-elev); border: var(--border-soft); border-radius: 10px; padding: 0.9rem 1rem; margin-bottom: 1.5rem;">
                    <div style="display: flex; justify-content: space-between;"><span style="color: var(--text-muted); font-size: 0.85rem;">Principal returned</span><span id="success-returned" style="color: var(--text-main); font-weight: 700; font-family: var(--font-mono);">—</span></div>
                    <div style="display: flex; justify-content: space-between;"><span style="color: var(--text-muted); font-size: 0.85rem;">Commission earned</span><span id="success-commission" style="color: #34d399; font-weight: 700; font-family: var(--font-mono);">—</span></div>
                    <div style="display: flex; justify-content: space-between; border-top: var(--border-soft); padding-top: 0.55rem; margin-top: 0.15rem;"><span style="color: var(--text-main); font-weight: 800;">Total credited</span><span id="success-total" style="color: var(--primary); font-weight: 800; font-size: 1.05rem; font-family: var(--font-mono);">—</span></div>
                </div>

                <button id="success-continue" class="button primary" style="width: 100%;">Continue</button>
            </div>
        </div>

        <!-- Set complete — must contact support for admin approval to proceed -->
        <div id="approval-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 1300; place-items: center; padding: 1.5rem;">
            <div class="success-card content-card" style="width: 100%; max-width: 360px; padding: 2rem 1.5rem; text-align: center; position: relative; overflow: hidden;">
                <div style="font-size: 2.6rem; line-height: 1; margin-bottom: 0.5rem;">🎉</div>
                <h3 style="margin: 0 0 0.5rem; color: var(--primary); font-size: 1.3rem; font-weight: 800; letter-spacing: 0.5px;">Set Completed!</h3>
                <p style="margin: 0 0 1.25rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6;">You have completed a set of <strong style="color: var(--text-main);">32 tickets</strong>. To unlock the next set, please <strong style="color: var(--text-main);">contact customer support</strong> for approval. No further tickets can be booked until you are approved.</p>
                <a href="/customer-service/" class="button primary" style="width: 100%; margin-bottom: 0.6rem;">Contact Customer Support</a>
                <button id="approval-close" class="button secondary" style="width: 100%;">Close</button>
            </div>
        </div>

        <script>
            (function() {
                const startBtn = document.getElementById('start-task-btn');
                const modal = document.getElementById('rating-modal');
                const cancelBtn = document.getElementById('cancel-rating');
                const submitBtn = document.getElementById('submit-rating');
                const stars = document.querySelectorAll('.star');
                const activePoster = document.getElementById('active-poster');
                const activeTitle = document.getElementById('active-title');
                const modalMovieImg = document.getElementById('modal-movie-img');
                const modalMovieTitle = document.getElementById('modal-movie-title');
                const modalMoviePrice = document.getElementById('modal-movie-price');
                const modalMovieCommission = document.getElementById('modal-movie-commission');
                const modalOrderNumber = document.getElementById('modal-order-number');
                const modalOrderTime = document.getElementById('modal-order-time');
                const modalProductBrand = document.getElementById('modal-product-brand');
                const modalStatus = document.getElementById('modal-status');
                const modalBadge = document.getElementById('modal-badge');
                const modalCommissionBadge = document.getElementById('modal-commission-badge');
                const noticeModal = document.getElementById('notice-modal');
                const noticeBody = document.getElementById('notice-body');
                const noticeYes = document.getElementById('notice-yes');
                const successModal = document.getElementById('success-modal');
                const successMovie = document.getElementById('success-movie');
                const successReturned = document.getElementById('success-returned');
                const successCommission = document.getElementById('success-commission');
                const successTotal = document.getElementById('success-total');
                const successContinue = document.getElementById('success-continue');

                function showSuccess(title, result) {
                    successMovie.textContent = '"' + title + '"';
                    successReturned.textContent = result.price;
                    successCommission.textContent = result.commission;
                    successTotal.textContent = result.total;
                    if (result.bonus_expired) {
                        successMovie.innerHTML = '"' + title + '"<br><span style="color: var(--primary); font-weight: 700;">🎁 Welcome bonus round complete — your earnings are now yours to withdraw!</span>';
                    }
                    successModal.style.display = 'grid';
                }
                // Continue reloads to refresh balance, progress and orders.
                successContinue.addEventListener('click', () => window.location.reload());

                // The user finished a set and must be approved by an admin before
                // booking any more tickets.
                const awaitingApproval = {{ awaiting_approval|yesno:"true,false" }};
                const approvalModal = document.getElementById('approval-modal');

                // Approval gate: block booking and surface the support popup.
                document.getElementById('approval-close').addEventListener('click', () => {
                    approvalModal.style.display = 'none';
                });
                if (awaitingApproval) {
                    approvalModal.style.display = 'grid';
                    startBtn.disabled = true;
                    startBtn.style.opacity = '0.5';
                    startBtn.style.cursor = 'not-allowed';
                    startBtn.textContent = 'AWAITING APPROVAL';
                }

                // An admin-set special ticket is pending: it is the only ticket
                // the user can book next, with a notice + bonus commission. The
                // kind (premium / golden egg / special) drives the branding below.
                const specialPending = {{ special_pending|yesno:"true,false" }};
                const specialKind = '{{ special_kind|escapejs }}' || 'premium';
                const specialPrice = '{{ special_price|escapejs }}';
                const specialCommission = '{{ special_commission|escapejs }}';

                // Per-kind presentation: badge label/colour, commission badge text,
                // and the NOTICE body. Behaviour is identical across kinds.
                const SPECIAL_BRANDING = {
                    premium: {
                        label: 'Premium Ticket',
                        badgeGradient: 'linear-gradient(135deg, #7c3aed, #a855f7)',
                        commissionBadge: 'x5 Commission',
                        accent: '#a855f7',
                        notice: 'Congratulations on receiving a <span style="color: #a855f7; font-weight: 700;">Premium Ticket</span>. You will earn x5 commission on this ticket, please contact online support representative for more information.',
                    },
                    golden_egg: {
                        label: 'Golden Egg',
                        badgeGradient: 'linear-gradient(135deg, #d97706, #fcd34d)',
                        commissionBadge: 'Golden Egg Bonus',
                        accent: '#f59e0b',
                        notice: 'Congratulations — you have hatched a <span style="color: #f59e0b; font-weight: 700;">Golden Egg</span> 🥚! It carries a bonus commission on this ticket. Please contact online support representative for more information.',
                    },
                    special: {
                        label: 'Special Ticket',
                        badgeGradient: 'linear-gradient(135deg, #0d9488, #34d399)',
                        commissionBadge: 'Special Bonus',
                        accent: '#10b981',
                        notice: 'Congratulations on receiving a <span style="color: #10b981; font-weight: 700;">Special Ticket</span>. It carries a bonus commission on this ticket, please contact online support representative for more information.',
                    },
                };
                const brand = SPECIAL_BRANDING[specialKind] || SPECIAL_BRANDING.premium;

                let currentBookingId = null;   // set once the ticket is reserved
                let starting = false;          // a start-ticket request is in flight
                let noticeAccepted = false;    // the premium NOTICE was acknowledged

                function generateOrderNumber() {
                    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
                    let out = '';
                    for (let i = 0; i < 10; i++) out += chars[Math.floor(Math.random() * chars.length)];
                    return out;
                }

                function formatNow() {
                    const d = new Date();
                    const p = (n) => String(n).padStart(2, '0');
                    return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) +
                        ' ' + p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds());
                }
                
                let selectedRating = 0;
                let movies = [];
                let currentIndex = 0;
                let animationInterval;

                async function fetchMovies() {
                    try {
                        const response = await fetch('/api/movies/');
                        const data = await response.json();
                        if (data.movies && data.movies.length > 0) {
                            movies = data.movies;
                            // Shuffle (Fisher–Yates) so the poster reel doesn't
                            // always start on — or run through — the same movies.
                            for (let i = movies.length - 1; i > 0; i--) {
                                const j = Math.floor(Math.random() * (i + 1));
                                [movies[i], movies[j]] = [movies[j], movies[i]];
                            }
                            currentIndex = 0;
                            startAnimation();
                        }
                    } catch (error) {
                        console.error('Failed to fetch movies:', error);
                        activeTitle.textContent = 'Failed to load movies';
                    }
                }

                function startAnimation() {
                    updateDisplay();
                    animationInterval = setInterval(() => {
                        currentIndex = (currentIndex + 1) % movies.length;
                        updateDisplay();
                    }, 3000);
                }

                function updateDisplay() {
                    const movie = movies[currentIndex];
                    // Fade out
                    activePoster.style.opacity = '0';
                    setTimeout(() => {
                        activePoster.src = movie.image;
                        activeTitle.textContent = movie.title;
                        // Fade in
                        activePoster.style.opacity = '1';
                    }, 500);
                }

                // Golden Egg gate: the user picks one of three eggs to open the
                // ticket. Only one egg may be clicked; once opened, START goes
                // straight to the booking modal.
                const eggModal = document.getElementById('egg-modal');
                const eggs = document.querySelectorAll('.egg');
                let eggChosen = false;   // a pick is in progress / done (locks the others)
                let eggOpened = false;   // the golden egg has been opened this page load

                function openRatingModal(fromEgg) {
                    const currentMovie = movies[currentIndex];
                    modalMovieImg.src = currentMovie.image;
                    modalMovieTitle.textContent = currentMovie.title;
                    modalProductBrand.textContent = currentMovie.title;
                    modalMoviePrice.textContent = currentMovie.price || '—';
                    modalMovieCommission.textContent = currentMovie.commission_hint || '3%';
                    modalOrderNumber.textContent = generateOrderNumber();
                    modalOrderTime.textContent = formatNow();

                    // A pending special ticket is shown upfront (and cannot be
                    // skipped); otherwise reset to the standard/preview state until
                    // reserved. Branding (badge/colour/notice) follows the kind.
                    if (specialPending) {
                        modalBadge.textContent = brand.label;
                        modalBadge.style.background = brand.badgeGradient;
                        modalCommissionBadge.textContent = brand.commissionBadge;
                        modalMoviePrice.textContent = specialPrice || currentMovie.price || '—';
                        modalMovieCommission.textContent = specialCommission || '—';
                    } else {
                        modalBadge.textContent = 'Standard Ticket';
                        modalBadge.style.background = 'linear-gradient(135deg, #2563eb, #38bdf8)';
                        modalCommissionBadge.textContent = 'Commission 3%';
                    }

                    modal.style.display = 'grid';
                    selectedRating = 0;
                    currentBookingId = null;
                    starting = false;
                    // Opening via the egg satisfies the notice gate for golden eggs.
                    noticeAccepted = !!fromEgg;
                    modalStatus.style.color = 'var(--text-muted)';
                    modalStatus.textContent = 'Tap a star to rate — your ticket amount is reserved while you rate.';
                    updateStars();
                }

                startBtn.addEventListener('click', () => {
                    if (awaitingApproval) {
                        approvalModal.style.display = 'grid';
                        return;
                    }
                    if (movies.length === 0) return;

                    // Golden Egg: pick one egg first (only the first run).
                    if (specialPending && specialKind === 'golden_egg' && !eggOpened) {
                        eggModal.style.display = 'grid';
                        return;
                    }
                    openRatingModal(false);
                });

                eggs.forEach(egg => {
                    egg.addEventListener('click', () => {
                        if (eggChosen) return;   // only one egg allowed
                        eggChosen = true;
                        egg.classList.add('opening');
                        eggs.forEach(other => { if (other !== egg) other.classList.add('dimmed'); });
                        // Shake, then crack open, then proceed to the booking.
                        setTimeout(() => {
                            egg.classList.remove('opening');
                            egg.classList.add('opened');
                        }, 1000);
                        setTimeout(() => {
                            eggOpened = true;
                            eggModal.style.display = 'none';
                            openRatingModal(true);
                        }, 1750);
                    });
                });

                cancelBtn.addEventListener('click', () => {
                    modal.style.display = 'none';
                });

                // Close when tapping the dark backdrop (outside the card).
                modal.addEventListener('click', (e) => {
                    if (e.target === modal) modal.style.display = 'none';
                });

                stars.forEach(star => {
                    star.addEventListener('click', () => {
                        selectedRating = parseInt(star.dataset.value);
                        updateStars();
                        if (currentBookingId !== null || starting) return;
                        // For a special ticket, show the NOTICE first; reserving
                        // happens after the user acknowledges it.
                        if (specialPending && !noticeAccepted) {
                            noticeBody.innerHTML = brand.notice;
                            noticeModal.style.display = 'grid';
                            return;
                        }
                        startTicket();
                    });
                });

                noticeYes.addEventListener('click', () => {
                    noticeAccepted = true;
                    noticeModal.style.display = 'none';
                    if (currentBookingId === null && !starting) startTicket();
                });

                async function startTicket() {
                    starting = true;
                    const currentMovie = movies[currentIndex];
                    modalStatus.style.color = 'var(--text-muted)';
                    modalStatus.textContent = '⏳ Reserving your ticket…';
                    try {
                        const response = await fetch('/api/start-ticket/', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' },
                            body: JSON.stringify({ movie_id: currentMovie.id, movie_title: currentMovie.title })
                        });
                        const result = await response.json();
                        if (result.success) {
                            currentBookingId = result.booking_id;
                            // Authoritative price/commission for this reserved ticket.
                            modalMoviePrice.textContent = result.price;
                            modalMovieCommission.textContent = result.commission;
                            if (result.is_premium) {
                                const rb = SPECIAL_BRANDING[result.kind] || brand;
                                modalBadge.textContent = rb.label;
                                modalBadge.style.background = rb.badgeGradient;
                                modalCommissionBadge.textContent = rb.label + ' · ' + result.commission;
                            } else {
                                modalCommissionBadge.textContent = 'Commission ' + (result.commission_pct || '');
                            }
                            if (result.needs_deposit) {
                                // The principal was deducted and the balance is now
                                // negative — deposit the shortfall before submitting.
                                modalStatus.style.color = '#f87171';
                                modalStatus.innerHTML = (result.error || 'Insufficient balance to submit this ticket.') +
                                    ' <a href="/deposit/" style="color: #38bdf8; font-weight: 700; text-decoration: none;">Deposit now ›</a>';
                            } else {
                                modalStatus.style.color = '#fbbf24';
                                modalStatus.innerHTML = '⏳ <strong>Processing</strong> — ' + result.price +
                                    ' deducted. Submit to receive ' + result.price + ' + ' + result.commission + ' commission.';
                            }
                        } else if (result.needs_deposit) {
                            // Could not reserve (e.g. balance under the €50 minimum).
                            modalStatus.style.color = '#f87171';
                            let links = ' <a href="/deposit/" style="color: #38bdf8; font-weight: 700; text-decoration: none;">Deposit now ›</a>';
                            if (result.contact_support) {
                                links += ' <a href="/customer-service/" style="color: #38bdf8; font-weight: 700; text-decoration: none;">Contact support ›</a>';
                            }
                            modalStatus.innerHTML = (result.error || 'Insufficient balance.') + links;
                        } else {
                            modalStatus.style.color = '#f87171';
                            modalStatus.textContent = result.error || 'Could not reserve ticket.';
                            alert(result.error || 'Could not reserve ticket.');
                            modal.style.display = 'none';
                        }
                    } catch (error) {
                        console.error('Error starting ticket:', error);
                        modalStatus.style.color = '#f87171';
                        modalStatus.textContent = 'Network error reserving ticket. Please try again.';
                    } finally {
                        starting = false;
                    }
                }

                function updateStars() {
                    stars.forEach(star => {
                        const val = parseInt(star.dataset.value);
                        star.style.color = val <= selectedRating ? '#fbbf24' : '#475569';
                        star.style.textShadow = val <= selectedRating ? '0 0 10px var(--primary-glow)' : 'none';
                    });
                    
                    if (selectedRating > 0) {
                        submitBtn.disabled = false;
                        submitBtn.style.cursor = 'pointer';
                        submitBtn.style.opacity = '1';
                    } else {
                        submitBtn.disabled = true;
                        submitBtn.style.cursor = 'not-allowed';
                        submitBtn.style.opacity = '0.5';
                    }
                }

                submitBtn.addEventListener('click', async () => {
                    if (selectedRating === 0) return;
                    if (starting) {
                        alert('Reserving your ticket, please wait a moment…');
                        return;
                    }
                    if (currentBookingId === null) {
                        alert('Could not reserve your ticket. Please try again.');
                        return;
                    }

                    const currentMovie = movies[currentIndex];
                    try {
                        const response = await fetch('/api/rate-movie/', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRFToken': '{{ csrf_token }}'
                            },
                            body: JSON.stringify({ booking_id: currentBookingId, stars: selectedRating })
                        });
                        const result = await response.json();
                        if (result.success) {
                            // Swap the rating modal for the celebratory success response.
                            modal.style.display = 'none';
                            showSuccess(currentMovie.title, result);
                        } else if (result.needs_deposit) {
                            // Balance still negative from the reserved principal —
                            // the user must deposit before the ticket can submit.
                            modalStatus.style.color = '#f87171';
                            modalStatus.innerHTML = (result.error || 'Insufficient balance to submit this ticket.') +
                                ' <a href="/deposit/" style="color: #38bdf8; font-weight: 700; text-decoration: none;">Deposit now ›</a>';
                        } else {
                            modalStatus.style.color = '#f87171';
                            modalStatus.textContent = 'Failed to submit rating: ' + (result.error || 'Unknown error');
                        }
                    } catch (error) {
                        console.error('Error submitting rating:', error);
                        modalStatus.style.color = '#f87171';
                        modalStatus.textContent = 'Network error submitting rating. Please try again.';
                    }
                });

                fetchMovies();

                // Hero ▶ button — play the current movie's trailer in an overlay.
                const playBtn = document.getElementById('play-trailer-btn');
                const trailerModal = document.getElementById('trailer-modal');
                const trailerFrame = document.getElementById('trailer-frame');
                const trailerClose = document.getElementById('trailer-close');

                function closeTrailer() {
                    trailerModal.style.display = 'none';
                    trailerFrame.src = '';   // stop playback
                }
                function openTrailer() {
                    const movie = movies[currentIndex];
                    const url = movie && movie.trailer;
                    if (!url) return;
                    // Autoplay the embed.
                    trailerFrame.src = url + (url.indexOf('?') === -1 ? '?' : '&') + 'autoplay=1&rel=0';
                    trailerModal.style.display = 'grid';
                }
                playBtn.addEventListener('click', openTrailer);
                trailerClose.addEventListener('click', closeTrailer);
                trailerModal.addEventListener('click', (e) => { if (e.target === trailerModal) closeTrailer(); });
            })();
        </script>

        <!-- Wallet and Orders Buttons -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
            <a href="/wallet/" class="button secondary" style="font-size: 0.85rem;">
                <span style="font-size: 1.1rem;">💼</span>
                <span>Wallet</span>
            </a>
            <a href="/orders/" class="button secondary" style="font-size: 0.85rem;">
                <span style="font-size: 1.1rem;">📋</span>
                <span>Orders</span>
            </a>
        </div>

        <!-- Progress: free training round, then the 3-set game -->
        <div style="margin-bottom: 1.5rem; padding: 1rem; background: var(--bg-page); border: 1px dashed var(--primary); border-radius: 8px;">
            {% if progress.in_training %}
            <!-- Training round (separate from the 3 sets) -->
            <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem;">
                <span style="color: var(--primary); font-weight: 800; font-size: 0.85rem; font-family: var(--font-mono); text-transform: uppercase;">🎓 Training Round</span>
                <span style="color: var(--text-muted); font-size: 0.75rem; font-family: var(--font-mono);">{{ progress.training_done }} / {{ progress.training_total }}</span>
            </div>
            <div style="height: 8px; border-radius: 999px; background: var(--bg-elev); overflow: hidden; border: var(--border-soft);">
                <div style="height: 100%; width: {{ progress.training_percent }}%; background: var(--primary); box-shadow: 0 0 10px var(--primary-glow); transition: width 0.4s ease;"></div>
            </div>
            <p style="margin: 0.6rem 0 0; text-align: center; font-size: 0.75rem; font-family: var(--font-mono);">
                <span style="color: var(--text-muted);">Free practice with your bonus · <span style="color: var(--primary); font-weight: 700;">{{ progress.training_total }}</span> tickets to finish training</span>
            </p>
            {% else %}
            <!-- 3-set game (previous logic; training excluded) -->
            <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem;">
                <span style="color: var(--primary); font-weight: 800; font-size: 0.85rem; font-family: var(--font-mono); text-transform: uppercase;">Set {{ progress.current_set }} / {{ progress.required_sets }}</span>
                <span style="color: var(--text-muted); font-size: 0.75rem; font-family: var(--font-mono);">{{ progress.in_set }} / {{ progress.tickets_per_set }} this set</span>
            </div>
            <div style="height: 8px; border-radius: 999px; background: var(--bg-elev); overflow: hidden; border: var(--border-soft);">
                <div style="height: 100%; width: {{ progress.percent }}%; background: var(--primary); box-shadow: 0 0 10px var(--primary-glow); transition: width 0.4s ease;"></div>
            </div>
            <p style="margin: 0.6rem 0 0; text-align: center; font-size: 0.75rem; font-family: var(--font-mono);">
                {% if progress.can_withdraw %}
                <span style="color: #34d399; font-weight: 800; text-transform: uppercase;">✓ All {{ progress.required_tickets }} done — commission unlocked</span>
                {% else %}
                <span style="color: var(--text-muted);">{{ progress.completed_capped }} / {{ progress.required_tickets }} rated · <span style="color: var(--primary); font-weight: 700;">{{ progress.remaining }} more</span> to unlock withdrawal</span>
                {% endif %}
            </p>
            {% endif %}
        </div>

        <!-- Avatar Group and Description -->
        <div style="text-align: center; padding: 1.5rem; background: var(--bg-card); border-radius: 12px; border: 1px solid rgba(43, 111, 255, 0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.02);">
            <div style="display: flex; justify-content: center; align-items: center; gap: -8px; margin-bottom: 1rem;">
                <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--primary); border: 3px solid white; display: grid; place-items: center; color: white; font-weight: 800; font-size: 0.75rem; box-shadow: 0 0 10px var(--primary-glow);">50K+</div>
                <div style="width: 40px; height: 40px; border-radius: 50%; background: #e2e8f0; border: 3px solid white; margin-left: -12px;"></div>
                <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--text-muted); border: 3px solid white; margin-left: -12px;"></div>
                <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--text-muted); border: 3px solid white; margin-left: -12px;"></div>
            </div>
            <p style="margin: 0 0 0.5rem; color: var(--text-main); font-weight: 800; font-family: var(--font-mono); text-transform: uppercase; font-size: 0.9rem;">Online booking 50000+</p>
            <p style="margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.8rem;">Fun, easy & free food and drinks at your fingertips</p>
            <p style="margin: 0; color: var(--primary); font-size: 0.8rem; font-weight: 600;">Enjoy the sight of the movie.</p>
        </div>

        {% include 'main/_bottomnav.html' with active='task' %}
    </div>
{% endblock %}