<!DOCTYPE html><html lang="en"><head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <title><?php echo $judul_app[0]['judul_app'];?></title>
        <meta name="author" content="<?php echo $judul_app[0]['deskripsi_toko'];?>">
        <meta name="publisher" content="<?php echo $judul_app[0]['deskripsi_toko'];?>">
        <meta name="description" content="<?php echo $judul_app[0]['deskripsi_toko'];?>">
        <meta name="keywords" content="mysterybox, mysterybox indonesia">
        <link rel="icon" type="image/png" href="<?php echo site_url('uploads').'/'; ?><?php echo $judul_app[0]['favicon'];?>">
        
        <link rel="stylesheet" href="<?php echo site_url('public/mb').'/css/'; ?>bootstrap.min.css">
        <link rel="stylesheet" href="<?php echo site_url('public/mb').'/css/'; ?>all.min.css">
        <link rel="stylesheet" href="<?php echo site_url('public/mb').'/css/'; ?>animate.min.css">
        <link rel="stylesheet" href="<?php echo site_url('public/mb').'/css/'; ?>buttons.css">
        <style>
            /* Medium devices (landscape tablets, 768px and up) */
            @media only screen and (min-width: 768px) {
                .btn-marketing{
                    display: inline-block;
                    padding: 0.375rem 0.875rem;
                }
                .section-box{
                    margin-top: 150px;
                    margin-left: 50px;
                    position: fixed;
                }
            }
            @media only screen and (max-width: 600px) {
                .btn-marketing{
                    display: inline-block;
                    padding: 0.375rem 0.1rem;
                }
                .section-box{
                    margin-top: 50px;
                }
            }
        </style>
        
        <style>
            .back {
                background-image: url(<?php echo site_url('public/mb').'/'; ?>images/kotakbawah.png);
                background-size: cover;
                background-position: center;
                z-index: -1;
            } 

            .top {
                background-image: url(<?php echo site_url('public/mb').'/'; ?>images/kotakatas.png);
                background-size: cover;
                background-position: center;
                z-index: 1;
            }

            .left {
                background-image: url(<?php echo site_url('public/mb').'/'; ?>images/kotakkiri.png);
                background-size: cover;
                background-position: center;
                z-index: 1;
            }

            .right {
                background-image: url(<?php echo site_url('public/mb').'/'; ?>images/kotakkanan.png);
                background-size: cover;
                background-position: center;
                z-index: 1;
            }
        </style>
        
        <script src="<?php echo site_url('public/mb').'/'; ?>js/tailwind.min.js"></script>
        <script src="<?php echo site_url('public/mb').'/'; ?>js/index-pretty.js"></script>
        
    </head>

    <body style="height: 100vh; width: 100vw; background-image: url(<?php echo site_url('uploads').'/'; ?><?php echo $judul_app[0]['backgroundmobile'];?>); background-position: center; background-size: cover; background-repeat: no-repeat; background-color: black;">
    <div class="w-screen h-screen position-fixed top-0 left-0 right-0 left-0 d-none d-lg-block" style="z-index: 0; background-image: url(<?php echo site_url('uploads').'/'; ?><?php echo $judul_app[0]['background'];?>);  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;" id="overlay-prize">
    </div>
    <section class="container section-box">
        <div class="row justify-center">
            <div class="col-lg-12 row justify-center">
                <div class="col-lg-8 col-12 row justify-center mt-3">
                <?php foreach ($image as $value) { ?>
                        <div id="cube_<?php echo $value->id; ?>" class="lg:h-48 sm:h-32 h-32 lg:w-48 sm:w-32 w-32 relative flex justify-center items-center cursor-pointer animate__animated animate__pulse animate__slow animate__infinite boxes">
                        <div class="hexagon absolute opacity-25 lg:opacity-100" id="hexagon_<?php echo $value->id; ?>"></div>
                        <div class="cube back lg:h-48 sm:h-32 h-32 lg:w-48 sm:w-32 w-32 absolute top-0 left-0" id="back_<?php echo $value->id; ?>"></div>
                        <div class="cube top lg:h-48 sm:h-32 h-32 lg:w-48 sm:w-32 w-32 absolute top-0 left-0" id="top_<?php echo $value->id; ?>"></div>
                        <div class="cube left lg:h-48 sm:h-32 h-32 lg:w-48 sm:w-32 w-32 absolute top-0 left-0" id="left_<?php echo $value->id; ?>"></div>
                        <div class="cube right lg:h-48 sm:h-32 h-32 lg:w-48 sm:w-32 w-32 absolute top-0 left-0" id="right_<?php echo $value->id; ?>"></div>
                        <div class="powerup absolute" id="powerup_<?php echo $value->id; ?>"></div>
                        </div>
                    <?php }  ?>
                </div>
            </div>
        </div>
    </section>

    <div class="col-lg-12 flex items-center justify-center position-fixed bottom-0 left-0 right-0">
        <button class="btn-start-input btn btn-warning btn-block mb-4" type="button" style="display:none; width: 350px !important;">
            Mulai
        </button>
    </div>

    <div class="w-screen h-screen position-fixed top-0 left-0 right-0 left-0" id="form-code" style="background-color: rgba(000, 000, 000, 0.8); display: none;">
            <div class="col-lg-12 w-screen h-screen row justify-center items-center mx-0">
                <div class="col-lg-4 col-12">
                    <img src="<?php echo site_url('uploads').'/'; ?><?php echo $judul_app[0]['logo'];?>" class="img col-lg-12 my-0 py-0">
                    <form class="form" style method="POST" action="<?php echo site_url('main/check'); ?>">
                        <h2 style="color: rgb(255, 94, 0); margin: 27px;" class="text-center mt-4">
                            <b>Silahkan Masukkan Kode Tiket</b>
                        </h2>
                        <div class>
                            <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" autocomplete="off" id="code" type="text" name="code" placeholder=" Kode Tiket">
                        </div>
                        <div class style="display: none;">
                            <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" autocomplete="off" id="username" type="text" name="username" placeholder="Username">
                        </div>
                        <div class>
                            <button class="btn btn-warning btn-block" name="play_game" type="submit">
                                Mulai
                            </button>
                        </div> 
                    </form>
                </div>
            </div>
        </div>

    <img id="toggleAudio" src="<?php echo site_url('public/mb').'/'; ?>images/volume-mute.png" style="width: 35px; height: 35px; position: fixed; top: 20px; left: 20px; cursor: pointer; z-index: 500;">
    <div class="w-screen h-screen position-fixed top-0 left-0 right-0 left-0" id="welcome" style="background-color: rgba(000, 000, 000, 0.8)">
        <div class="col-lg-12 w-screen h-screen row justify-center items-center mx-0">
            <div class="col-lg-4 col-12">
                <img src="<?php echo site_url('uploads').'/'; ?><?php echo $judul_app[0]['logo'];?>" class="img col-lg-12 my-0 py-0">
                <h2 style="color: rgb(255, 94, 0); margin: 27px;" class="text-center">
                    <b>SELAMAT DATANG DI <?php echo $judul_app[0]['judul_app'];?></b>
                </h2>
                <div class="flex items-center justify-between"> 
                    <button id="btnMulai" class="btn-start-input btn btn-warning btn-block" type="button">
                        Mulai
                    </button>
                </div>
                <div class="flex items-center justify-between mt-lg-2 mt-3">
                    <button id="show-prizes" class="btn btn-danger btn-block" type="button">
                        Tampilkan Hadiah
                    </button> 
                </div>
                <?php $this->load->view('mb/wamarketing'); ?>
            </div>
        </div>
    </div>

    <div class="modal fade" id="error-mdl">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="alert alert-block alert-danger">
                        <h4>Error !</h4>
                        <div id="error-body">
                        <?php if (!empty($this->session->flashdata())) { ?>
                            <?php echo $this->session->flashdata('data_failed'); ?>
                        <?php } ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
        <script src="<?php echo site_url('public/mb').'/'; ?>js/jquery.min.js"></script>
        <script src="<?php echo site_url('public/mb').'/'; ?>js/popper.min.js"></script>
        <script src="<?php echo site_url('public/mb').'/'; ?>js/bootstrap.min.js"></script>
        <script src="<?php echo site_url('public/mb').'/'; ?>js/notify.min.js"></script>
        <script>
            var segments = [
				<?php foreach ($image as $value) {
                    $url = site_url('upload');
					$img = $url."/".$value->image;
                ?>
                {
                "id":"<?php echo $value->id; ?>",
                "uid":"<?php echo $value->id; ?>",
                "name":"<?php echo $value->value; ?>",
                "image":"<?php echo $img; ?>",
                "created_by":null,
                "created_date":null,
                "updated_by":null,
                "updated_date":null,
                "isActive":"1",
                "isDeleted":"0"
                },
                <?php }  ?>
            ];
            if ("" == true) { 
                $("#form-code").fadeIn(0);  
            }
            let audio = new Audio('<?php echo site_url('public/mb').'/'; ?>music/bg.mp3');
            
            audio.volume = audio.volume == 0 ? 0.8 : 0;
                document.getElementById("toggleAudio").src =
                audio.volume == 0
                    ? "<?php echo site_url('public/mb').'/'; ?>images/volume-mute.png"
                    : "<?php echo site_url('public/mb').'/'; ?>images/volume.png";

            var resp = audio.play();

            if (resp!== undefined) {
                resp.then(_ => {
                    audio.loop = true;
                }).catch(error => {
                    //show error
                });
            }

            document.getElementById("toggleAudio").src =
                audio.volume == 0
                    ? "<?php echo site_url('public/mb').'/'; ?>images/volume-mute.png"
                    : "<?php echo site_url('public/mb').'/'; ?>images/volume.png";

            $("#toggleAudio").on("click", function () {
                audio.volume = audio.volume == 0 ? 0.8 : 0;
                audio.play();

                localStorage.setItem("audioVolume", audio.volume);

                document.getElementById("toggleAudio").src =
                    audio.volume == 0
                        ? "<?php echo site_url('public/mb').'/'; ?>images/volume-mute.png"
                        : "<?php echo site_url('public/mb').'/'; ?>images/volume.png";
            });

            // Start Popup Welcome

            $(".btn-start-input").on("click", function () {
                $("#welcome").fadeOut(500);
                $("#form-code").fadeIn(1000);
                audio.volume = audio.volume == 0 ? 0.8 : 0;
                document.getElementById("toggleAudio").src =
                audio.volume == 0
                    ? "<?php echo site_url('public/mb').'/'; ?>images/volume-mute.png"
                    : "<?php echo site_url('public/mb').'/'; ?>images/volume.png";
                audio.play();
            });

            // End Popup Welcome

            for (var i = 0; i < segments.length; i++) {
                createBox(segments[i]["uid"]);
            }

            var alreadySelected = false;

            var isMobile = false;
            if (
                /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
                    navigator.userAgent
                )
            ) {
                isMobile = true;
            }

            var viewAllPrize = false;

            function createBox(code) {
                const cube = document.querySelector("#cube_" + code);
                const cback = document.querySelector("#back_" + code);
                const ctop = document.querySelector("#top_" + code);
                const cleft = document.querySelector("#left_" + code);
                const cright = document.querySelector("#right_" + code);
                const glow = document.querySelector("#hexagon_" + code);
                const powerup = document.querySelector("#powerup_" + code);
                const transitionTime = "750ms";

                ctop.style.transition = `all ${transitionTime}`;
                cleft.style.transition = `all ${transitionTime}`;
                cright.style.transition = `all ${transitionTime}`;
                cube.style.transition = `all ${transitionTime}`;
                powerup.style.transition = `all ${transitionTime}`;
                glow.style.transition = `all ${transitionTime}`;
                cback.style.transition = `all ${transitionTime}`;
            }

            $("#show-prizes").on("click", function () {
                for (var i = 0; i < segments.length; i++) {
                    console.log(segments[i]);
                    openCube(segments[i]["uid"], segments[i]);
                }

                $(".btn-start-input").css("display", "block");
            });

            function openCube(code, prize) {
                $("#welcome").fadeOut(500);
                audio.play();

                const cube = document.querySelector("#cube_" + code);
                const cback = document.querySelector("#back_" + code);
                const ctop = document.querySelector("#top_" + code);
                const cleft = document.querySelector("#left_" + code);
                const cright = document.querySelector("#right_" + code);
                const glow = document.querySelector("#hexagon_" + code);
                const powerup = document.querySelector("#powerup_" + code);

                ctop.style.transform = "translateY(-3rem)";
                cleft.style.transform = isMobile
                    ? "translateX(-1rem)"
                    : "translateX(-3rem)";
                cright.style.transform = isMobile ? "translateX(1rem)" : "translateX(3rem)";
                ctop.style.opacity = 0.3;
                cleft.style.opacity = 0.3;
                cright.style.opacity = 0.3;
                cback.style.opacity = 1;
                glow.style.opacity = 0.5;
                powerup.style.opacity = 1;
                isOpen = true;
                cube.style.animationPlayState = "paused";
                powerup.style.zIndex = 10;
                powerup.style.height = "90px";
                powerup.style.width = "70px";

                if (prize != null) {
                    console.log('prize ada');
                    var prize_image = prize['image'];
                    powerup.style.backgroundImage = "url(" + prize_image + ")";
                } else {
                    console.log('prize null');
                    powerup.style.backgroundImage =
                        "url('<?php echo site_url('public/mb').'/'; ?>images/rewardZonk.png')";
                }
            }

            function showError(msg, callback=null) {
                $('#error-body').html(msg);
                $('#error-mdl').modal('show');
                 setTimeout(() => {
                    $('#error-mdl').modal('hide');
                    if (typeof callback == 'function') {
                        callback();
                    }
                }, 3000);
            }
            <?php if (!empty($this->session->flashdata())) { ?>
                showError();
            <?php } ?>
        </script>
 </body>
 </html>