{"id":110459,"date":"2025-06-04T15:54:00","date_gmt":"2025-06-04T08:54:00","guid":{"rendered":"https:\/\/jblstore.co.id\/?page_id=110459"},"modified":"2025-06-05T00:01:49","modified_gmt":"2025-06-04T17:01:49","slug":"raffle","status":"publish","type":"page","link":"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/","title":{"rendered":"Raffle"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"110459\" class=\"elementor elementor-110459\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-eda60e9 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"eda60e9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-795eafc\" data-id=\"795eafc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9268f3c elementor-widget elementor-widget-shortcode\" data-id=\"9268f3c\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\n    #title {\n        display: none;\n    }\n\n    @media (max-width: 767px) {\n        .is-desktop {\n            display: none !important;\n        }\n    }\n\n    @media (min-width: 768px) {\n        .is-mobile {\n            display: none !important;\n        }\n    }\n\n    .cta:not(:disabled),\n    .cta:not(.active) {\n        transition: all .2s ease-in;\n\n        &:focus,\n        &:hover {\n            outline: none;\n        }\n\n        &:hover {\n            opacity: 0.8;\n        }\n    }\n    \n    .raffle-tomorrowland {\n        max-width: var(--sizing-max-page);\n        margin: 0 auto;\n        overflow: visible;\n        background-image: url('\/wp-content\/uploads\/2025\/04\/tomorrowland2025-background-desktop.webp');\n        background-position: center;\n        background-size: cover;\n        background-repeat: no-repeat;\n        display: flex;\n        overflow: hidden;\n        position: relative;\n\n        #raffle-container {\n            \n\n            .inside {\n                display: grid;\n                grid-template-columns: repeat(2, minmax(0, 1fr));\n                align-items: center;\n                \/* position: relative; *\/\n                width: 100%;\n                padding-inline: 100px;\n\n                @media (max-width: 960px) {\n                    padding-inline: 30px;\n                    padding-block: 50px;\n                }\n                \n                @media (max-width: 767px) {\n                    grid-template-columns: repeat(1, minmax(0, 1fr));\n                }\n\n                .text-section {\n                    display: flex;\n                    flex-direction: column;\n                    justify-content: space-between;\n                    width: 100%;\n                    padding-block: 100px;\n                    \n                    .top-wrap {\n                        position: relative;\n\n                        .img-wrapper {\n                            display: flex;\n                            max-width: 200px;\n                        }\n\n                        .title-section {\n                            font-family: \"Kostic - Roc Grotesk Bold\",Arial, Helvetica, sans-serif;\n                            color: white;\n                            font-size: clamp(24px, calc(1.5rem + ((1vw - 3.76px) * 2.8195)), 54px);\n                            min-height: 0vw;\n                            margin: 0px;\n                            margin-bottom: 20px;\n                        }\n\n                        .description-section, .flight {\n                            font-family: \"Kostic - Roc Grotesk Regular\",Arial, Helvetica, sans-serif;\n                            color: white;\n                            margin: 0px;\n                            font-size: clamp(18px, calc(1.125rem + ((1vw - 3.76px) * 1.2218)), 31px);\n                            min-height: 0vw;\n                            line-height: 100%;\n                            text-wrap: balance;\n                            max-width: 700px;\n                        }\n\n                        .flight {\n                            font-size: clamp(14px, calc(0.875rem + ((1vw - 3.76px) * 1.2218)), 27px);\n                        }\n\n                        .form-link {\n                            color: white;\n                            margin: 0;\n                            margin-top: 20px;\n                            font-family: \"Kostic - Roc Grotesk Bold\",Arial, Helvetica, sans-serif;\n                            font-size: clamp(12px, calc(0.75rem + ((1vw - 3.76px) * 1.2218)), 25px);\n                            min-height: 0vw;\n\n                            a {\n                                color: var(--jblorange);\n                                \n                                &:hover {\n                                    text-decoration: underline;\n                                }\n                            }\n                        }\n\n                    }\n\n                    .tnc-link {\n                        margin-top: 30px;\n                        \n                        a {\n                            color: white;\n                            font-family: \"Kostic - Roc Grotesk Regular\",Arial, Helvetica, sans-serif;\n                            text-decoration: underline;\n\n                            &:hover {\n                                text-decoration: none;\n                            }\n                        }\n                    }\n                }\n\n                .roll-section {\n                    width: 100%;\n                    \n                    .roll-container {\n                        position: relative;\n\n                        .roll-wheel-bg {\n                            position: relative;\n                            right: -25%;\n                            margin-block: -20%;\n                            top: 0;\n                            bottom: 0;\n                            height: 120%;\n                            width: 140%;\n                            z-index: 2;\n                            \n                            img {\n                                display: block;\n                            }\n                        }\n\n                        .logo-centre {\n                            position: absolute;\n                            top: 50%;\n                            transform: translateY(-50%) translateX(50%);\n                            max-width: 90px;\n                            right: 50%;\n                            z-index: 2;\n                        }\n\n                        .pointer-raffle {\n                            max-width: 120px;\n                            position: absolute;\n                            top: 50%;\n                            transform: translateY(-50%);\n                            left: -2%;\n                            z-index: 2;\n\n                            @media (min-width: 1700px) {\n                                max-width: 150px;\n                            }\n                        }\n\n                        \n                        .wheel-labels {\n                            position: absolute;\n                            width: 100%;\n                            height: 100%;\n                            top: 0;\n                            left: 0;\n                        }\n\n                        .segment-label {\n                            position: absolute;\n                            top: 50%;\n                            left: 50%;\n                            width: 120px;\n                            text-align: center;\n                            font-size: 14px;\n                            color: white;\n                            font-family: \"Kostic - Roc Grotesk Bold\", Arial, Helvetica, sans-serif;\n                            text-transform: uppercase;\n                            font-weight: bold;\n                            transform-origin: center;\n                            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);\n                            pointer-events: none;\n                        }\n\n                        @media (max-width: 767px) {\n                            .wheel-label-container {\n                                width: 300px;\n                                height: 300px;\n                            }\n                            \n                            .segment-label {\n                                width: 80px;\n                                font-size: 10px;\n                                margin-left: -40px;\n                                padding-bottom: 120px;\n                            }\n                        }\n\n                    }\n                }\n\n                .mycta {\n                    color: white;\n                    background-color: var(--jblorange);\n                    font-family: Grostesk-ExtraBold, sans-serif;\n                    font-size: clamp(11px, calc(0.6875rem + ((1vw - 3.76px) * 0.8459)), 20px);\n                    min-height: 0vw;\n                    padding: 10px 35px;\n                    text-transform: uppercase;\n                    text-wrap: balance;\n                    margin-bottom: 62px;\n                    display: block;\n                    width: fit-content;\n\n                    @media (max-width: 767px) {\n                        padding: 9px 19px;\n                        margin-top: 80px;\n                        margin-bottom: 16px;\n                    }\n                }\n            }\n        }\n    }\n\n    .wheel-wrapper {\n        position: relative;\n        width: 920px;\n        height: 920px;\n        right: -140px;\n    }\n\n    .wheel-background {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n        background: radial-gradient(circle at center, white 0%, #2e060e 70%, #1a0106 100%);\n        box-shadow:\n            0 0 10px gold,\n            inset 0 0 30px rgba(255, 255, 255, 0.2); \/* efek glow *\/\n        z-index: 0;\n    }\n\n    canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        z-index: 1;\n        transform: rotate(270deg);\n    }\n\n    .modal-popup {\n        display: none;\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgba(0,0,0,0.7);\n        z-index: 1000;\n        opacity: 0;\n        transition: opacity 0.3s ease;\n    }\n\n    .modal-popup.show {\n        opacity: 1;\n    }\n\n    .modal-content h2 {\n        margin: 0;\n        font-family: \"Kostic - Roc Grotesk Bold\",Arial, Helvetica, sans-serif;\n        font-size: 25px;\n        \/* font-size: clamp(12px, calc(0.75rem + ((1vw - 3.76px) * 1.2218)), 25px); *\/\n        min-height: 0vw;\n        color: white;\n    }\n\n    .modal-content {\n        background-color: #fff;\n        margin: 5% auto;\n        border-radius: 10px;\n        width: 80%;\n        max-width: 600px;\n        position: relative;\n        transform: translateY(-20px);\n        transition: transform 0.3s ease;\n\n        @media (max-width: 767px) {\n            padding: 20px;\n            width: 90%;\n        }\n    }\n\n    .modal-content p {\n        font-size: 18px;\n        margin: 0;\n        text-align: center;\n        font-family: \"Kostic - Roc Grotesk Regular\",Arial, Helvetica, sans-serif;\n    }\n\n    .modal-content .modal-topwrap {\n        background: linear-gradient(251.5deg, #F04C24 46.51%, #F88D2A 99.75%);\n        border-top-right-radius: 10px;\n        border-top-left-radius: 10px;\n        padding-block: 10px;\n    }\n\n    .modal-content .modal-bottomwrap {\n        padding: 30px;\n    }\n\n    .modal-popup.show .modal-content {\n        transform: translateY(0);\n    }\n\n    #modalResult {\n        font-size: 20px;\n        text-align: center;\n        font-family: \"Kostic - Roc Grotesk Regular\",Arial, Helvetica, sans-serif;\n        margin: 10px 0;\n        letter-spacing: -0.02em;\n        text-decoration-line: underline;\n        color: #F04C24;\n        text-transform: uppercase;\n        line-height: 130%;\n    }\n    #infoModal .modal-topwrap {\n        padding: 20px 30px;\n    }\n\n    .img-wrapper {\n        max-width: 200px;\n        margin: 0 auto;\n        display: block;\n        margin-top: 20px;\n    }\n\n    .close-modal {\n        position: absolute;\n        top: 20px;\n        right: 15px;\n        cursor: pointer;\n        width: 24px;\n        height: 24px;\n        color: white;\n    }\n<\/style>\n<div class=\"raffle-tomorrowland\">\n    <section id=\"raffle-container\">\n        <div class=\"inside\">\n            <div class=\"text-section\">\n                <div class=\"top-wrap\">\n                    <picture class=\"img-wrapper\">\n                        <img loading=\"lazy\" decoding=\"async\" \n                        src=\"\/wp-content\/uploads\/2025\/04\/tomorrowland-logo-hd.png\" \n                        alt=\"JBL x Tomorrowland 2025 Logo\"\n                        width=\"542\"\n                        height=\"286\"\n                        >\n                    <\/picture>\n                    <br\/>\n                    <h1 class=\"title-section\">Roll and get the prize!<\/h1>\n                                    <\/div>\n            <\/div>\n            <div class=\"roll-section\">\n                <div class=\"roll-container\">\n                    <div class=\"wheel-wrapper\">\n                        <div class=\"logo-centre\">\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/tomorrowland2025-raffle-logocentre.png\" alt=\"Logo JBL\" loading=\"eager\" width=\"197\" height=\"197\">\n                        <\/div>\n                        <div class=\"pointer-raffle\">\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/tomorrowland2025-raffle-pointer.png\" alt=\"Pointer Wheel\" loading=\"eager\" width=\"234\" height=\"175\">\n                        <\/div>\n                        <!-- <div class=\"wheel-background\"><\/div> -->\n                        <canvas id=\"canvas\" width=\"915\" height=\"918\">\n                            <p style=\"{color: white}\" align=\"center\">Sorry, your browser doesn't support canvas. Please try another.<\/p>\n                        <\/canvas>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n<div class=\"modal-popup\" id=\"diceModal\">\n    <div class=\"modal-content\">\n        <span class=\"close-modal\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" \/>\n            <\/svg>\n        <\/span>\n        <div class=\"modal-topwrap\">\n                         <h2 style=\"text-align: center;\">Congratulations!<\/h2>\n        <\/div>\n        <div class=\"modal-bottomwrap\">\n            <div id=\"modalResult\"><\/div>\n            <p>You\u2019ve Won <\/p>\n        <\/div>\n    <\/div>\n<\/div>\n <div class=\"modal-popup\" id=\"infoModal\">\n    <div class=\"modal-content\">\n        <span class=\"cta close-modal\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" \/>\n            <\/svg>\n        <\/span>\n        <div class=\"modal-topwrap\">\n            <h2>Info<\/h2>\n        <\/div>\n\n        <div class=\"modal-bottomwrap\">\n            <div class=\"must-login\">\n                <p id=\"messagePopup\"><\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/zarocknz\/javascript-winwheel@2.7.0\/Winwheel.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/latest\/TweenMax.min.js\"><\/script>\n\n<script>\n    const modal = document.getElementById('diceModal');\n    const modalResult = document.getElementById('modalResult');\n    const closeButtons = document.querySelectorAll('.close-modal');\n    const infoResult = document.getElementById('infoModal');\n    const messageInfoPopup = document.getElementById('messagePopup');\n    const wheelBtn = document.getElementById('shakeBtn');\n    const resetBtnWheel = document.getElementById('resetBtnWheel');\n    \n    function showModal(modalElement) {\n        modalElement.style.display = 'block';\n        setTimeout(() => {\n            modalElement.classList.add('show');\n        }, 10);\n    }\n\n    function hideModal(modalElement) {\n        resetWheel();\n        modalElement.classList.remove('show');\n        setTimeout(() => {\n            modalElement.style.display = 'none';\n        }, 300);\n    }\n\n    closeButtons.forEach(button => {\n        button.addEventListener('click', function() {\n            const modalToClose = button.parentElement.parentElement;\n            if (modalToClose) {\n                hideModal(modalToClose);\n            } else {\n                console.log(\"not found\", modalToClose)\n            }\n        });\n    });\n\n    function setSpinButtonState(state = 'normal', message = '') {\n        switch (state) {\n            case 'loading':\n                wheelBtn.setAttribute('disabled', true);\n                wheelBtn.innerText = message || 'Loading...';\n                break;\n\n            case 'disabled':\n                wheelBtn.setAttribute('disabled', true);\n                wheelBtn.innerText = message || \"Limit Reached\";\n                break;\n\n            case 'normal':\n            default:\n                wheelBtn.removeAttribute('disabled');\n                wheelBtn.innerText = message || 'Roll Now';\n                break;\n        }\n    }\n    \n        const prizes = [{\"nama_lengkap\":\"Ar\",\"email\":\"a@gmail.com\"},{\"nama_lengkap\":\"abdul azis\",\"email\":\"abdulazis459@gmail.com\"},{\"nama_lengkap\":\"Kiki Apriyani\",\"email\":\"apriyanikiki38@gmail.com\"},{\"nama_lengkap\":\"Ayunda Ramadhani Ardaningrum\",\"email\":\"ayundaramadhani12@gmail.com\"},{\"nama_lengkap\":\"Nadia\",\"email\":\"bapakenashahla@gmail.com\"},{\"nama_lengkap\":\"Damar kurniawan\",\"email\":\"damarkurniawan62@gmail.com\"},{\"nama_lengkap\":\"Deni Setya\",\"email\":\"deni@provaliantgroup.com\"},{\"nama_lengkap\":\"DEVI ANDRIANTI \",\"email\":\"deviandrianti2611@gmail.com\"},{\"nama_lengkap\":\"Djasa pinaragusti\",\"email\":\"djasa@mayaksa.co.id\"},{\"nama_lengkap\":\"Deni Setya\",\"email\":\"dstaryadi@gmail.com\"},{\"nama_lengkap\":\"Anggi Apriliana\",\"email\":\"enggii2204@gmail.com\"},{\"nama_lengkap\":\"mukh faris zainur rosyidin\",\"email\":\"faris.simple27@gmail.com\"},{\"nama_lengkap\":\"Gunawan Wiradharma\",\"email\":\"gunawan.wiradharma@ecampus.ut.ac.id\"},{\"nama_lengkap\":\"Indah Lestari Hertanto \",\"email\":\"iherta1@yahoo.com\"},{\"nama_lengkap\":\"randy anwar\",\"email\":\"irazwitt@gmail.com\"},{\"nama_lengkap\":\"Irfan boy c\",\"email\":\"irfanboyc@gmail.com\"},{\"nama_lengkap\":\"JONDY ITEN\",\"email\":\"jondyiten@gmail.com\"},{\"nama_lengkap\":\"Sony Lesmana\",\"email\":\"lesmana236@gmail.com\"},{\"nama_lengkap\":\"Muammer Ardy\",\"email\":\"muammerardy@rocketmail.com\"},{\"nama_lengkap\":\"Nugroho Tri Saputro\",\"email\":\"nugroho.trisaputro86@gmail.com\"},{\"nama_lengkap\":\"Okto khaisar\",\"email\":\"okhai.js@yahoo.com\"},{\"nama_lengkap\":\"Testing Nama Lengkap\",\"email\":\"pajitest1@gmail.com\"},{\"nama_lengkap\":\"Putri Mila\",\"email\":\"putrimilaa@gmail.com\"},{\"nama_lengkap\":\"Rangga Dwi Putra Firmansyah\",\"email\":\"ranggaputra12343@gmail.com\"},{\"nama_lengkap\":\"Rini wahyuni\",\"email\":\"Rhiyuarin2937@gmail.com\"},{\"nama_lengkap\":\"Haryo Wibisono\",\"email\":\"riouhunter@gmail.com\"},{\"nama_lengkap\":\"Roni Parlindungan Tua \",\"email\":\"roniparlindungantua@ymail.com\"},{\"nama_lengkap\":\"Rosanna Sukarno\",\"email\":\"rosannasukarno@gmail.com\"},{\"nama_lengkap\":\"Shohifatus syifak\",\"email\":\"shohifatussyifa92@gmail.com\"},{\"nama_lengkap\":\"Test\",\"email\":\"test22@gmail.com\"},{\"nama_lengkap\":\"raisa\",\"email\":\"thaliarizky12345@gmail.com\"}];\n\n    const segments = prizes.map(prize => ({\n        text: `${prize.nama_lengkap}\\n(${prize.email})`\n    }));\n\n    let theWheel = new Winwheel({\n        'numSegments': segments.length,\n        'outerRadius': 380,\n        'drawMode': 'image',\n        'rotationAngle': 180,\n        'drawText': true,\n        'drawSegmentBorders': true,\n        'lineWidth': 2,\n        'lineColor': '#FFFFFF26',\n        'textFontSize': 14,\n        'textOrientation': 'horizontal',\n        'textDirection': 'reversed',\n        'textAlignment': 'center',\n        'textMargin': 70,\n        'textFontFamily': 'Grostesk-Regular, sans-serif',\n        'textLineWidth': 1,\n        'textFillStyle': 'white',\n        'segments': segments,\n        'animation': {\n            'type': 'spinToStop',\n            'duration': 5,\n            'spins': 8,\n            'callbackFinished': alertPrize,\n        },\n    });\n\n    let idleInterval = null;\n\n    function startIdleSpin() {\n        if (idleInterval) return; \/\/ sudah aktif, jangan dobel\n\n        idleInterval = setInterval(() => {\n            theWheel.rotationAngle += 0.15; \/\/ muter pelan\n            if (theWheel.rotationAngle >= 360) {\n                theWheel.rotationAngle -= 360;\n            }\n            theWheel.draw();\n        }, 50); \/\/ setiap 50ms\n    }\n\n    function stopIdleSpin() {\n        clearInterval(idleInterval);\n        idleInterval = null;\n    }\n\n    const bgImage = new Image();\n    bgImage.onload = function () {\n        theWheel.wheelImage = bgImage;\n\n        theWheel.drawWheelImage = function () {\n            const ctx = this.ctx;\n            const canvas = this.canvas;\n            const img = this.wheelImage;\n\n            const centerX = canvas.width \/ 2;\n            const centerY = canvas.height \/ 2;\n\n            ctx.save();\n            ctx.translate(centerX, centerY);\n            ctx.rotate(this.rotationAngle * Math.PI \/ 180);\n\n            \/\/ Draw background image\n            ctx.drawImage(\n                img,\n                -canvas.width \/ 2,\n                -canvas.height \/ 2,\n                canvas.width,\n                canvas.height\n            );\n\n            \/\/ Draw segment borders manually (with corrected rotation)\n            \/\/ ctx.beginPath();\n            \/\/ ctx.strokeStyle = this.lineColor || '#ffffff';\n            \/\/ ctx.lineWidth = this.lineWidth || 2;\n\n            \/\/ const numSegments = this.segments.length-1;\n            \/\/ const anglePerSegment = (2 * Math.PI) \/ numSegments;\n\n            \/\/ for (let i = 0; i < numSegments; i++) {\n            \/\/     const angle = i * anglePerSegment + this.rotationAngle * Math.PI \/ 180;\n            \/\/     ctx.moveTo(0, 0);\n            \/\/     ctx.lineTo(\n            \/\/         Math.cos(angle) * this.outerRadius,\n            \/\/         Math.sin(angle) * this.outerRadius\n            \/\/     );\n            \/\/ }\n            \/\/ ctx.stroke();\n\n            ctx.restore();\n\n            \/\/ Draw the text on top of the wheel\n            this.drawSegmentText();\n        };\n\n        document.fonts.ready.then(() => {\n            theWheel.draw();\n        });\n    };\n    bgImage.src = '\/wp-content\/uploads\/2025\/06\/tomorrowland2025-raffle-bg-1.webp';\n\n    let wheelPower    = 0;\n    let wheelSpinning = false;\n\n    \/\/ -------------------------------------------------------\n    \/\/ Click handler for spin button.\n    \/\/ -------------------------------------------------------\n    async function startSpin() {\n        if (wheelSpinning) return;\n\n        stopIdleSpin();\n        setSpinButtonState('loading');\n\n        const prizeId = 0; \/\/ Ganti sesuai ID hadiah yang sedang digunakan\n\n        try {\n            const response = await fetch(\"https:\/\/jblstore.co.id\/wp-admin\/admin-ajax.php\", {\n                method: 'POST',\n                headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n                body: new URLSearchParams({\n                    action: 'jblweb_run_tomorrowland_raffle_winner',\n                    prize_id: prizeId\n                })\n            });\n\n            const result = await response.json();\n\n            if (!result.success) {\n                if (result.data && result.data === \"Kuota pemenang sudah habis untuk hadiah ini.\") {\n                    showModal(infoResult)\n                    messageInfoPopup.innerText =result.data;\n\n                    setSpinButtonState('disabled');\n                    return;\n                }\n                \n                showModal(infoResult)\n                messageInfoPopup.innerText =result.data;\n\n                setSpinButtonState();\n                return;\n            }\n\n            const winner = result.data;\n            const winnerName = winner.winner_name;\n            const winnerEmail = winner.winner_email;\n\n            const segmentNumber = theWheel.segments.findIndex(seg =>\n                seg?.text.includes(winnerName) && seg.text.includes(winnerEmail)\n            );\n\n            if (segmentNumber === -1) {\n                console.log('Nama hadiah tidak ditemukan di wheel: ' + winnerName);\n                return;\n            }\n\n            theWheel.animation.spins = 8;\n\n            const stopAt = theWheel.getRandomForSegment(segmentNumber); \/\/ Tanpa penyesuaian\n            theWheel.animation.stopAngle = stopAt;\n\n            theWheel.startAnimation();\n            wheelSpinning = true;\n\n            window.currentWinner = winner;\n\n            setSpinButtonState();\n\n        } catch (error) {\n            console.error('Fetch error:', error);\n\n            showModal(infoResult)\n            messageInfoPopup.innerText = 'Gagal menghubungi server.';\n\n            setSpinButtonState();\n        }\n    }\n\n    \/\/ -------------------------------------------------------\n    \/\/ Function for reset button.\n    \/\/ -------------------------------------------------------\n    function resetWheel(reset = false)\n    {\n        wheelSpinning = false;          \/\/ Reset to false to power buttons and spin can be clicked again.\n        \n        if (reset) {\n            theWheel.stopAnimation(false);  \/\/ Stop the animation, false as param so does not call callback function.\n            theWheel.rotationAngle = 0;  \n            theWheel.draw();                \/\/ Call draw to render changes to the wheel.\n            resetBtnWheel.style.display = 'none';\n            wheelBtn.style.display = 'block';\n\n            startIdleSpin();\n        }\n    }\n\n    \/\/ -------------------------------------------------------\n    \/\/ Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.\n    \/\/ note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.\n    \/\/ -------------------------------------------------------\n    function alertPrize(indicatedSegment)\n    {\n        resetBtnWheel.style.display = 'block';\n        wheelBtn.style.display = 'none';\n        \n        modalResult.innerText = indicatedSegment.text;\n        showModal(modal);\n        setSpinButtonState();\n        wheelSpinning = false;\n    }\n\n    window.addEventListener('DOMContentLoaded', () => {\n        startIdleSpin();\n    });\n<\/script>\n    \t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":88637,"featured_media":0,"parent":109629,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-110459","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tomorrowland Raffle - JBL Store<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tomorrowland Raffle - JBL Store\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/\" \/>\n<meta property=\"og:site_name\" content=\"JBL Store\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-04T17:01:49+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/\",\"url\":\"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/\",\"name\":\"Tomorrowland Raffle - JBL Store\",\"isPartOf\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\"},\"datePublished\":\"2025-06-04T08:54:00+00:00\",\"dateModified\":\"2025-06-04T17:01:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jblstore.co.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JBL x Tomorrowland 2025\",\"item\":\"https:\/\/jblstore.co.id\/tomorrowland\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Raffle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"name\":\"JBL Store\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jblstore.co.id\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\",\"name\":\"JBL Store\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\",\"url\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"contentUrl\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"width\":70,\"height\":52,\"caption\":\"JBL Store\"},\"image\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\",\"https:\/\/www.instagram.com\/jblindonesia\/\",\"https:\/\/www.youtube.com\/c\/JBLIndonesia\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tomorrowland Raffle - JBL Store","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/","og_locale":"en_US","og_type":"article","og_title":"Tomorrowland Raffle - JBL Store","og_url":"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/","og_site_name":"JBL Store","article_publisher":"https:\/\/www.facebook.com\/JBLAudioIndonesia\/","article_modified_time":"2025-06-04T17:01:49+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/","url":"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/","name":"Tomorrowland Raffle - JBL Store","isPartOf":{"@id":"https:\/\/jblstore.co.id\/en\/#website"},"datePublished":"2025-06-04T08:54:00+00:00","dateModified":"2025-06-04T17:01:49+00:00","breadcrumb":{"@id":"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jblstore.co.id\/en\/tomorrowland\/raffle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jblstore.co.id\/"},{"@type":"ListItem","position":2,"name":"JBL x Tomorrowland 2025","item":"https:\/\/jblstore.co.id\/tomorrowland\/"},{"@type":"ListItem","position":3,"name":"Raffle"}]},{"@type":"WebSite","@id":"https:\/\/jblstore.co.id\/en\/#website","url":"https:\/\/jblstore.co.id\/en\/","name":"JBL Store","description":"","publisher":{"@id":"https:\/\/jblstore.co.id\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jblstore.co.id\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jblstore.co.id\/en\/#organization","name":"JBL Store","url":"https:\/\/jblstore.co.id\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","contentUrl":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","width":70,"height":52,"caption":"JBL Store"},"image":{"@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/JBLAudioIndonesia\/","https:\/\/www.instagram.com\/jblindonesia\/","https:\/\/www.youtube.com\/c\/JBLIndonesia"]}]}},"_links":{"self":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/110459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/users\/88637"}],"replies":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/comments?post=110459"}],"version-history":[{"count":4,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/110459\/revisions"}],"predecessor-version":[{"id":110464,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/110459\/revisions\/110464"}],"up":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/109629"}],"wp:attachment":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/media?parent=110459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}