@php
    // Render nothing unless the wheel is enabled and has configured segments.
    if (theme_option('nest_lucky_wheel_enabled', 'no') !== 'yes') {
        return;
    }

    $wheelSlices = app(\Theme\Nest\Services\CustomerDiscountService::class)->getWheelSlices();

    if (empty($wheelSlices)) {
        return;
    }

    // Hide entirely for a logged-in customer who already used the wheel.
    if (auth('customer')->check()
        && app(\Theme\Nest\Services\CustomerDiscountService::class)->hasUsedWidget('lucky_wheel')) {
        return;
    }

    $wheelLoginUrl = route('customer.login');

    $wheelColorBrand = theme_option('color_brand') ?: '#1d8751';
    $wheelColorBrandDark = theme_option('color_brand_dark') ?: '#166b40';
    $wheelColorBrand2 = theme_option('color_brand_2') ?: '#FDC040';
    $wheelColorBrandRgb = implode(',', BaseHelper::hexToRgb($wheelColorBrand));

    // Default palette used when a segment does not define its own colors.
    $wheelPalette = [
        ['bg' => $wheelColorBrand, 'color' => '#ffffff'],
        ['bg' => '#f0fdf4', 'color' => $wheelColorBrandDark],
        ['bg' => $wheelColorBrand2, 'color' => '#1e293b'],
        ['bg' => '#ffffff', 'color' => '#1e293b'],
        ['bg' => $wheelColorBrandDark, 'color' => '#ffffff'],
        ['bg' => '#fffbeb', 'color' => '#92400e'],
    ];

    // Static icon set (design only — not configured in admin).
    $wheelIcons = ['🎟️', '🚚', '🎁', '💰', '🏷️', '🔥'];

    $wheelPrizesForJs = [];
    foreach ($wheelSlices as $i => $s) {
        // Colors + icons are automatic (design stays tied to the system).
        $auto = $wheelPalette[$i % count($wheelPalette)];
        $wheelPrizesForJs[] = [
            'text' => $s['prize_text'] ?? '',
            'sub' => $s['prize_sub'] ?? '',
            'code' => $s['coupon_code'] ?? '',
            'icon' => $wheelIcons[$i % count($wheelIcons)],
            'bg' => $auto['bg'],
            'color' => $auto['color'],
        ];
    }

    $wheelSpinUrl = route('public.ajax.lucky-wheel.spin');

    // Editable texts (design is fixed; only the content is configurable).
    $wheelBadge = theme_option('nest_lucky_wheel_badge', 'أرخص سعر بالسنة 🔥');
    $wheelTitle = theme_option('nest_lucky_wheel_title', 'مبروك! 🎉');
    $wheelSubtitle = theme_option('nest_lucky_wheel_subtitle', 'الخطوة الأخيرة: استلمي جائزتك الحصرية');
    $wheelSpinText = theme_option('nest_lucky_wheel_spin_text', 'دَوّر');
    $wheelTimerLabel = theme_option('nest_lucky_wheel_timer_label', 'تنتهي في');
    $wheelWinText = theme_option('nest_lucky_wheel_win_text', '🎉 ألف مبروك فزت بـ:');
    $wheelCtaText = theme_option('nest_lucky_wheel_cta_text', 'استلميها وابدي اشتري');
    $wheelShopText = theme_option('nest_lucky_wheel_shop_text', 'تصفح العروض الآن');
    $wheelShopUrl = theme_option('nest_lucky_wheel_shop_url', '/products') ?: '/products';
    $wheelCountdownDays = max((int) theme_option('nest_lucky_wheel_countdown_days', 3), 0);
    $wheelDelay = max((int) theme_option('nest_lucky_wheel_delay', 3), 0);
    $wheelFrequency = theme_option('nest_lucky_wheel_frequency', 'once_per_session');
@endphp
<!-- ==================================================== -->
<!-- Lucky Wheel Standalone Overlay Popup (Frontend Only) -->
<!-- ==================================================== -->
<div class="lucky-wheel-popup-overlay" id="lucky-wheel-popup" aria-hidden="true">
    <div class="lucky-wheel-backdrop" id="luckyBackdropClose"></div>
    <div class="lucky-wheel-dialog">
        <div class="lucky-wheel-content">
            <button type="button" class="lucky-close-btn" id="luckyModalCloseBtn" aria-label="Close">&times;</button>
            <div class="lucky-wheel-card">
                
                <!-- Header Banner -->
                <div class="lucky-header text-center">
                    <span class="lucky-badge-top">{{ $wheelBadge }}</span>
                    <h2 class="lucky-title">{{ $wheelTitle }}</h2>
                    <p class="lucky-subtitle">{{ $wheelSubtitle }}</p>
                </div>

                <!-- Spin Wheel Section -->
                <div class="lucky-wheel-stage">
                    <!-- Top Pointer / Arrow -->
                    <div class="lucky-pointer">
                        <div class="pointer-pin"></div>
                    </div>

                    <!-- The Wheel -->
                    <div class="lucky-wheel-container">
                        <canvas id="luckyWheelCanvas" width="360" height="360"></canvas>
                        <button type="button" class="lucky-center-btn" id="luckySpinCenterBtn" aria-label="{{ $wheelSpinText }}">
                            <span>{{ $wheelSpinText }}</span>
                        </button>
                    </div>
                </div>

                <!-- Countdown Timer -->
                <div class="lucky-timer-wrap">
                    <span class="timer-label">{{ $wheelTimerLabel }}</span>
                    <div class="lucky-countdown" id="luckyCountdown">
                        <div class="time-block"><span class="time-num" id="spinDays">02</span></div>
                        <span class="time-sep">:</span>
                        <div class="time-block"><span class="time-num" id="spinHours">23</span></div>
                        <span class="time-sep">:</span>
                        <div class="time-block"><span class="time-num" id="spinMins">59</span></div>
                        <span class="time-sep">:</span>
                        <div class="time-block"><span class="time-num" id="spinSecs">51</span></div>
                    </div>
                </div>

                <!-- Result Box (Hidden initially, appears upon winning) -->
                <div class="lucky-result-box" id="luckyResultBox" style="display: none;">
                    <div class="result-badge">{{ $wheelWinText }} <strong id="luckyPrizeTitle"></strong></div>
                    <div class="coupon-copy-row" id="luckyCouponRow" title="انقر لنسخ الكوبون">
                        <div class="coupon-code-val" id="luckyCouponCode"></div>
                        <button type="button" class="btn-copy-code" id="luckyCopyBtn">
                            <i class="fi-rs-copy mr-5"></i> <span id="copyBtnText">نسخ الكوبون</span>
                        </button>
                    </div>
                </div>

                <!-- Bottom Action Button -->
                <div class="lucky-action-wrap text-center">
                    <button type="button" class="lucky-main-btn" id="luckyMainActionBtn">
                        <span class="btn-text" id="luckyMainBtnText">{{ $wheelCtaText }}</span>
                        <span class="hand-icon">👆</span>
                    </button>
                    <a href="{{ $wheelShopUrl }}" class="lucky-shop-link mt-10 d-block" id="luckyShopLink">{{ $wheelShopText }} &larr;</a>
                </div>

                <!-- Confetti Canvas -->
                <canvas id="luckyConfettiCanvas" class="lucky-confetti"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Styles for Lucky Wheel -->
<style>
    :root,
    .lucky-wheel-popup-overlay {
        --wheel-brand: var(--color-brand, {{ $wheelColorBrand }});
        --wheel-brand-dark: var(--color-brand-dark, {{ $wheelColorBrandDark }});
        --wheel-brand-2: var(--color-brand-2, {{ $wheelColorBrand2 }});
        --wheel-brand-rgb: var(--color-brand-rgb, {{ $wheelColorBrandRgb }});
    }

    /* Fullscreen Popup Overlay - hidden by default, shown only once */
    .lucky-wheel-popup-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 2147483647 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.35s ease, visibility 0.35s ease !important;
    }
    .lucky-wheel-popup-overlay.show-lucky-wheel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .lucky-wheel-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 1;
    }
    .lucky-wheel-dialog {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 410px;
        max-height: 94vh;
        overflow-y: auto;
        border-radius: 28px;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--wheel-brand-rgb), 0.15);
        transform: scale(0.85);
        transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .lucky-wheel-popup-overlay.show-lucky-wheel .lucky-wheel-dialog {
        transform: scale(1);
    }
    .lucky-wheel-content {
        position: relative;
        background: #fff;
        border-radius: 28px;
        overflow: hidden;
    }
    .lucky-close-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 100;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        width: 36px;
        height: 36px;
        font-size: 24px;
        line-height: 32px;
        color: #333;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        transition: all 0.25s ease;
    }
    .lucky-close-btn:hover {
        transform: rotate(90deg) scale(1.1);
        background: var(--wheel-brand);
        color: #fff;
        box-shadow: 0 4px 12px rgba(var(--wheel-brand-rgb), 0.4);
    }
    .lucky-wheel-card {
        padding: 24px 16px 20px;
        background: linear-gradient(180deg, #ffffff 0%, rgba(var(--wheel-brand-rgb), 0.04) 100%);
        direction: rtl;
        text-align: center;
        position: relative;
        font-family: inherit;
    }
    .lucky-header {
        margin-bottom: 22px;
        position: relative;
        z-index: 10;
    }
    .lucky-badge-top {
        display: inline-block;
        background: linear-gradient(135deg, var(--wheel-brand), var(--wheel-brand-dark));
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        padding: 5px 18px;
        border-radius: 50px;
        margin-bottom: 6px;
        box-shadow: 0 4px 12px rgba(var(--wheel-brand-rgb), 0.35);
    }
    .lucky-title {
        font-size: 28px;
        font-weight: 900;
        color: var(--color-heading, #253D4E);
        margin: 2px 0 4px;
        letter-spacing: -0.5px;
        line-height: 1.2;
    }
    .lucky-subtitle {
        font-size: 14px;
        color: #555;
        font-weight: 600;
        margin-bottom: 0;
        line-height: 1.4;
    }
    .lucky-wheel-stage {
        position: relative;
        width: 280px;
        height: 280px;
        margin: 16px auto 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lucky-pointer {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 25;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    }
    .pointer-pin {
        width: 28px;
        height: 36px;
        background: linear-gradient(180deg, var(--wheel-brand-2) 0%, #ffb300 60%, var(--wheel-brand) 100%);
        clip-path: polygon(50% 100%, 0% 25%, 20% 0%, 80% 0%, 100% 25%);
        border-radius: 4px 4px 0 0;
        position: relative;
    }
    .pointer-pin::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 8px;
        height: 8px;
        background: #fff;
        border-radius: 50%;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
    }
    .lucky-wheel-container {
        width: 280px;
        height: 280px;
        position: relative;
        border-radius: 50%;
        padding: 6px;
        background: linear-gradient(145deg, var(--wheel-brand), var(--wheel-brand-dark), var(--wheel-brand-2));
        box-shadow: 0 12px 28px rgba(var(--wheel-brand-rgb), 0.38), inset 0 2px 4px rgba(255,255,255,0.6);
        box-sizing: border-box;
    }
    #luckyWheelCanvas {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: block;
        background: #fff;
        box-shadow: inset 0 0 15px rgba(0,0,0,0.12);
        transition: transform 5s cubic-bezier(0.15, 0.9, 0.2, 1);
    }
    .lucky-center-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: linear-gradient(145deg, var(--wheel-brand), var(--wheel-brand-dark));
        border: 4px solid #fff;
        color: #fff;
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        z-index: 20;
        box-shadow: 0 4px 15px rgba(var(--wheel-brand-rgb), 0.4), inset 0 2px 4px rgba(255,255,255,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .lucky-center-btn:hover {
        transform: translate(-50%, -50%) scale(1.08);
        background: linear-gradient(145deg, var(--wheel-brand-dark), var(--wheel-brand));
    }
    .lucky-center-btn:active {
        transform: translate(-50%, -50%) scale(0.95);
    }
    .lucky-timer-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 12px;
        direction: ltr;
    }
    .timer-label {
        font-size: 13px;
        font-weight: 700;
        color: #333;
        direction: rtl;
    }
    .lucky-countdown {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .time-block {
        background: var(--wheel-brand-dark);
        color: #fff;
        font-weight: 800;
        font-size: 14px;
        padding: 3px 7px;
        border-radius: 6px;
        min-width: 28px;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }
    .time-sep {
        font-weight: 900;
        color: var(--wheel-brand-dark);
        font-size: 14px;
    }
    .lucky-result-box {
        background: #fff;
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 12px;
        border: 2px dashed var(--wheel-brand);
        animation: luckyPop 0.4s ease;
    }
    @keyframes luckyPop {
        0% { transform: scale(0.85); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
    .result-badge {
        font-size: 14px;
        font-weight: 700;
        color: var(--wheel-brand);
        margin-bottom: 8px;
    }
    .coupon-copy-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(var(--wheel-brand-rgb), 0.05);
        border-radius: 8px;
        padding: 8px 12px;
        border: 1px solid rgba(var(--wheel-brand-rgb), 0.2);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .coupon-copy-row:hover {
        background: rgba(var(--wheel-brand-rgb), 0.1);
        border-color: var(--wheel-brand);
    }
    .coupon-code-val {
        font-family: 'Courier New', Courier, monospace;
        font-size: 18px;
        font-weight: 800;
        color: var(--wheel-brand-dark);
        letter-spacing: 1px;
        user-select: all;
    }
    .btn-copy-code {
        background: var(--wheel-brand);
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 6px 14px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .btn-copy-code:hover {
        background: var(--wheel-brand-dark);
        transform: scale(1.03);
    }
    .btn-copy-code.copied {
        background: var(--wheel-brand-dark) !important;
    }
    .lucky-main-btn {
        width: 100%;
        background: linear-gradient(135deg, var(--wheel-brand) 0%, var(--wheel-brand-dark) 100%);
        color: #fff;
        border: none;
        padding: 13px 18px;
        border-radius: 50px;
        font-size: 17px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(var(--wheel-brand-rgb), 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .lucky-main-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(var(--wheel-brand-rgb), 0.5);
        background: linear-gradient(135deg, var(--wheel-brand-dark) 0%, var(--wheel-brand) 100%);
        color: #fff;
    }
    .lucky-main-btn:active {
        transform: translateY(1px);
    }
    .hand-icon {
        font-size: 20px;
        animation: pointBounce 1.5s infinite;
    }
    @keyframes pointBounce {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-5px) scale(1.15); }
    }
    .lucky-shop-link {
        font-size: 13px;
        color: #666;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s;
    }
    .lucky-shop-link:hover {
        color: var(--wheel-brand);
        text-decoration: underline;
    }
    .lucky-confetti {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 99;
    }
</style>

<!-- Interactive Pure Frontend Lucky Wheel Script -->
<script>
    (function() {
        const WHEEL_SESSION_KEY = 'botble_lucky_wheel_shown_session';
        const WHEEL_DAILY_KEY = 'botble_lucky_wheel_last_shown_time';

        const brandColor = (getComputedStyle(document.documentElement).getPropertyValue('--color-brand') || '').trim() || '{{ $wheelColorBrand }}';
        const brandDark = (getComputedStyle(document.documentElement).getPropertyValue('--color-brand-dark') || '').trim() || '{{ $wheelColorBrandDark }}';
        const brandGold = (getComputedStyle(document.documentElement).getPropertyValue('--color-brand-2') || '').trim() || '{{ $wheelColorBrand2 }}';

        // Segments come from the admin (Theme Options -> Lucky wheel).
        const prizes = @json($wheelPrizesForJs);
        // Server endpoint that decides the winning segment and applies its coupon.
        const spinUrl = @json($wheelSpinUrl);
        const wheelLoginUrl = @json($wheelLoginUrl);
        const wheelCtaText = @json($wheelCtaText);
        const wheelCountdownDays = {{ $wheelCountdownDays }};
        const wheelDelay = {{ $wheelDelay }};
        const wheelFrequency = @json($wheelFrequency);

        // Send guests to login, then return to the page with the wheel re-opened.
        function goToLoginForWheel() {
            const back = window.location.origin + window.location.pathname + '?open_wheel=1';
            window.location.href = wheelLoginUrl + '?redirect=' + encodeURIComponent(back);
        }

        let currentRotation = 0;
        let isSpinning = false;
        let hasWon = false;
        let winningPrize = null;

        // Whether the wheel should be suppressed based on the display frequency.
        function hasOpenedBefore() {
            // Force-open for testing.
            if (window.location.search.indexOf('open_wheel=1') !== -1 || window.location.hash === '#lucky-wheel') {
                return false;
            }
            if (wheelFrequency === 'always') return false;
            if (wheelFrequency === 'once_per_day') {
                try {
                    const last = localStorage.getItem(WHEEL_DAILY_KEY);
                    if (last && ((Date.now() - parseInt(last, 10)) / (1000 * 60 * 60)) < 24) return true;
                } catch (e) {}
                return false;
            }
            // once_per_session (default)
            try {
                return sessionStorage.getItem(WHEEL_SESSION_KEY) === '1';
            } catch (e) {
                return false;
            }
        }

        function markAsOpened() {
            try { sessionStorage.setItem(WHEEL_SESSION_KEY, '1'); } catch (e) {}
            try { localStorage.setItem(WHEEL_DAILY_KEY, Date.now().toString()); } catch (e) {}
        }

        // Draw Canvas Wheel
        function initWheel() {
            const canvas = document.getElementById('luckyWheelCanvas');
            if (!canvas) return;
            const ctx = canvas.getContext('2d');
            const numSegments = prizes.length;
            const arcSize = (2 * Math.PI) / numSegments;
            const radius = canvas.width / 2;

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            prizes.forEach((prize, index) => {
                const angle = index * arcSize;
                
                // Draw segment slice
                ctx.beginPath();
                ctx.fillStyle = prize.bg;
                ctx.moveTo(radius, radius);
                ctx.arc(radius, radius, radius - 6, angle, angle + arcSize);
                ctx.lineTo(radius, radius);
                ctx.fill();

                // Segment border
                ctx.strokeStyle = '#ffffff';
                ctx.lineWidth = 2;
                ctx.stroke();

                // Segment Text & Icon
                ctx.save();
                ctx.translate(radius, radius);
                ctx.rotate(angle + arcSize / 2);
                ctx.textAlign = "right";
                ctx.textBaseline = "middle";

                // Text
                ctx.fillStyle = prize.color;
                ctx.font = "bold 15px Arial, sans-serif";
                ctx.fillText(prize.text, radius - 30, -6);

                // Subtext
                ctx.font = "11px Arial, sans-serif";
                ctx.fillStyle = prize.color === '#ffffff' ? 'rgba(255,255,255,0.85)' : '#666666';
                ctx.fillText(prize.sub, radius - 45, 12);

                // Icon
                ctx.font = "16px sans-serif";
                ctx.fillText(prize.icon, radius - 12, 0);

                ctx.restore();
            });

            // Draw outer decorative pins/dots
            for (let i = 0; i < 24; i++) {
                const dotAngle = (i * (2 * Math.PI) / 24);
                const dotX = radius + (radius - 12) * Math.cos(dotAngle);
                const dotY = radius + (radius - 12) * Math.sin(dotAngle);
                
                ctx.beginPath();
                ctx.arc(dotX, dotY, 3.5, 0, 2 * Math.PI);
                ctx.fillStyle = (i % 2 === 0) ? (brandGold || '#FDC040') : '#ffffff';
                ctx.shadowColor = 'rgba(0,0,0,0.3)';
                ctx.shadowBlur = 2;
                ctx.fill();
                ctx.shadowBlur = 0;
            }
        }

        // Spin Logic
        function spinWheel() {
            if (isSpinning) return;

            const canvas = document.getElementById('luckyWheelCanvas');
            const mainBtn = document.getElementById('luckyMainActionBtn');
            const centerBtn = document.getElementById('luckySpinCenterBtn');
            if (!canvas) return;

            if (hasWon) {
                // If user already won and clicks main button, copy code and go to shop
                copyCouponCode();
                const link = document.getElementById('luckyShopLink');
                if (link && link.href) {
                    setTimeout(() => {
                        window.location.href = link.href;
                    }, 400);
                }
                return;
            }

            isSpinning = true;
            if (mainBtn) mainBtn.disabled = true;
            if (centerBtn) centerBtn.disabled = true;

            const numSegments = prizes.length;
            const segmentAngle = 360 / numSegments;

            // Animate to a given segment, then reveal the prize/coupon.
            const animateTo = (winningIndex, prize, applied) => {
                const fullSpins = 6 + Math.floor(Math.random() * 3);
                const winningSliceCenter = (winningIndex * segmentAngle) + (segmentAngle / 2);
                const targetDegree = (360 * fullSpins) + (270 - winningSliceCenter);

                currentRotation = targetDegree;
                canvas.style.transform = `rotate(${currentRotation}deg)`;

                setTimeout(() => {
                    isSpinning = false;
                    hasWon = true;
                    winningPrize = prize || prizes[winningIndex];

                    const resultBox = document.getElementById('luckyResultBox');
                    const prizeTitle = document.getElementById('luckyPrizeTitle');
                    const couponCode = document.getElementById('luckyCouponCode');
                    const btnText = document.getElementById('luckyMainBtnText');

                    if (prizeTitle) prizeTitle.textContent = winningPrize.text || '';
                    if (couponCode) couponCode.textContent = winningPrize.code || '';
                    if (resultBox) resultBox.style.display = 'block';

                    if (mainBtn) {
                        mainBtn.disabled = false;
                        if (btnText) btnText.textContent = wheelCtaText;
                    }
                    if (centerBtn) centerBtn.disabled = false;

                    if (winningPrize.code) copyCouponCode();
                    triggerConfetti();
                }, 5000);
            };

            const failSpin = () => {
                isSpinning = false;
                if (mainBtn) mainBtn.disabled = false;
                if (centerBtn) centerBtn.disabled = false;
            };

            // The server decides the winning segment and requires login first —
            // the browser cannot tamper with it. Uses fetch (storefront has no $httpClient).
            const csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
            fetch(spinUrl, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                credentials: 'same-origin',
                body: '{}'
            }).then((r) => r.json()).then((json) => {
                const data = json && json.data ? json.data : null;
                if (data && data.require_login) {
                    goToLoginForWheel();
                    return;
                }
                if (data && data.already_used) {
                    failSpin();
                    closeLuckyWheel();
                    return;
                }
                if (json && json.error && json.message) {
                    failSpin();
                    alert(json.message);
                    return;
                }
                if (!data || typeof data.index === 'undefined') {
                    failSpin();
                    return;
                }
                const idx = Math.max(0, Math.min(prizes.length - 1, parseInt(data.index, 10)));
                const prize = data.prize ? {
                    text: data.prize.text,
                    sub: data.prize.sub,
                    code: data.prize.coupon_code
                } : prizes[idx];
                animateTo(idx, prize, true);
            }).catch(() => {
                failSpin();
            });
        }

        // Universal Clipboard Copy with Fallback (Works on HTTP, HTTPS, iOS, Android, Desktop)
        function copyTextToClipboard(text) {
            return new Promise((resolve, reject) => {
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(text).then(resolve).catch(() => {
                        fallbackCopy(text) ? resolve() : reject();
                    });
                } else {
                    fallbackCopy(text) ? resolve() : reject();
                }
            });
        }

        function fallbackCopy(text) {
            try {
                const textArea = document.createElement("textarea");
                textArea.value = text;
                textArea.style.position = "fixed";
                textArea.style.top = "0";
                textArea.style.left = "0";
                textArea.style.width = "2em";
                textArea.style.height = "2em";
                textArea.style.padding = "0";
                textArea.style.border = "none";
                textArea.style.outline = "none";
                textArea.style.boxShadow = "none";
                textArea.style.background = "transparent";
                textArea.style.opacity = "0";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                textArea.setSelectionRange(0, 99999);
                const successful = document.execCommand('copy');
                document.body.removeChild(textArea);
                return successful;
            } catch (err) {
                return false;
            }
        }

        function copyCouponCode() {
            const codeEl = document.getElementById('luckyCouponCode');
            const copyBtnText = document.getElementById('copyBtnText');
            const copyBtn = document.getElementById('luckyCopyBtn');
            if (!codeEl) return;

            const code = codeEl.textContent.trim();
            if (!code) return;

            copyTextToClipboard(code).then(() => {
                if (copyBtnText) copyBtnText.textContent = "تم النسخ! ✓";
                if (copyBtn) copyBtn.classList.add('copied');
                setTimeout(() => {
                    if (copyBtnText) copyBtnText.textContent = "نسخ الكوبون";
                    if (copyBtn) copyBtn.classList.remove('copied');
                }, 2500);
            }).catch(() => {
                if (copyBtnText) copyBtnText.textContent = "تم النسخ! ✓";
            });
        }

        // Countdown Timer
        function startCountdown() {
            let totalSecs = (wheelCountdownDays * 86400) + (23 * 3600) + (59 * 60) + 51;
            const daysEl = document.getElementById('spinDays');
            const hoursEl = document.getElementById('spinHours');
            const minsEl = document.getElementById('spinMins');
            const secsEl = document.getElementById('spinSecs');

            setInterval(() => {
                if (totalSecs <= 0) return;
                totalSecs--;
                const d = Math.floor(totalSecs / 86400);
                const h = Math.floor((totalSecs % 86400) / 3600);
                const m = Math.floor((totalSecs % 3600) / 60);
                const s = totalSecs % 60;

                if (daysEl) daysEl.textContent = String(d).padStart(2, '0');
                if (hoursEl) hoursEl.textContent = String(h).padStart(2, '0');
                if (minsEl) minsEl.textContent = String(m).padStart(2, '0');
                if (secsEl) secsEl.textContent = String(s).padStart(2, '0');
            }, 1000);
        }

        // Canvas Confetti Celebration
        function triggerConfetti() {
            const canvas = document.getElementById('luckyConfettiCanvas');
            if (!canvas) return;
            const ctx = canvas.getContext('2d');
            canvas.width = canvas.parentElement.offsetWidth;
            canvas.height = canvas.parentElement.offsetHeight;

            const particles = [];
            const colors = [brandColor, brandGold, brandDark, '#10b981', '#fbbf24', '#f8fafc'];

            for (let i = 0; i < 80; i++) {
                particles.push({
                    x: canvas.width / 2,
                    y: canvas.height / 2,
                    vx: (Math.random() - 0.5) * 12,
                    vy: (Math.random() - 0.8) * 14,
                    size: Math.random() * 8 + 4,
                    color: colors[Math.floor(Math.random() * colors.length)],
                    rotation: Math.random() * 360,
                    vRot: (Math.random() - 0.5) * 10
                });
            }

            let animFrame;
            function render() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                let active = false;

                particles.forEach(p => {
                    p.x += p.vx;
                    p.y += p.vy;
                    p.vy += 0.35;
                    p.vx *= 0.98;
                    p.rotation += p.vRot;

                    if (p.y < canvas.height + 20) {
                        active = true;
                        ctx.save();
                        ctx.translate(p.x, p.y);
                        ctx.rotate((p.rotation * Math.PI) / 180);
                        ctx.fillStyle = p.color;
                        ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
                        ctx.restore();
                    }
                });

                if (active) {
                    animFrame = requestAnimationFrame(render);
                } else {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                }
            }
            render();
        }

        // Modal Open / Close
        function openLuckyWheel() {
            const popup = document.getElementById('lucky-wheel-popup');
            if (popup) {
                initWheel();
                popup.classList.add('show-lucky-wheel');
                popup.setAttribute('aria-hidden', 'false');
                markAsOpened();
            }
        }

        function closeLuckyWheel() {
            const popup = document.getElementById('lucky-wheel-popup');
            if (popup) {
                popup.classList.remove('show-lucky-wheel');
                popup.setAttribute('aria-hidden', 'true');
                markAsOpened();
            }
        }

        // Initialize & Setup Event Handlers
        let initialized = false;
        function setupLuckyWheel() {
            if (initialized) return;
            initialized = true;

            initWheel();
            startCountdown();

            const centerBtn = document.getElementById('luckySpinCenterBtn');
            const mainBtn = document.getElementById('luckyMainActionBtn');
            const closeBtn = document.getElementById('luckyModalCloseBtn');
            const backdropClose = document.getElementById('luckyBackdropClose');
            const copyBtn = document.getElementById('luckyCopyBtn');
            const couponRow = document.getElementById('luckyCouponRow');

            if (centerBtn) centerBtn.addEventListener('click', spinWheel);
            if (mainBtn) mainBtn.addEventListener('click', spinWheel);
            if (closeBtn) closeBtn.addEventListener('click', closeLuckyWheel);
            if (backdropClose) backdropClose.addEventListener('click', closeLuckyWheel);
            
            if (copyBtn) {
                copyBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    copyCouponCode();
                });
            }

            if (couponRow) {
                couponRow.addEventListener('click', function() {
                    copyCouponCode();
                });
            }

            // Auto-open after the configured delay, respecting the frequency.
            if (!hasOpenedBefore()) {
                setTimeout(openLuckyWheel, wheelDelay * 1000);
            }
        }

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