<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <meta name="author" content="Ginger Technologies">
    <title>Raffle Draw</title>

    <link rel="icon" type="image/x-icon" href="<?php echo e(asset('images/favicon.ico')); ?>">


    <!-- Bootstrap core CSS -->
    <link href="<?php echo e(asset('website/assets/dist/css/bootstrap.min.css')); ?>" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link href="<?php echo e(asset('website/css/raffle_draw.css')); ?>" rel="stylesheet">


</head>

<body>

    <div class="preloader">
        <div class="overlay"></div>
        <img data-aos="zoom-in" data-aos-easing="linear" data-aos-duration="500"
            src="<?php echo e(asset('website/images/welcome.gif')); ?>">
    </div>

    <div class="success_loader"></div>

    <main class="main" style="display: none;">

        <div class="raffle-draw-box" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2500"
            style="margin: auto;">
            <div class="head-main">
                <div class="title">
                    <h4>Raffle</h4>
                    <h2>Draw</h2>
                </div>
                <div class="price-alert" id="price-alert">
                    <h6><?php echo e($next_prize->prize_name??'Completed'); ?></h6>
                </div>
            </div>
            <div class="draw_box">
                <div id="unique_code">S000000000</div>
                <div id="roll"><img src="<?php echo e(asset('website/images/switch-off.webp')); ?>"></div>
            </div>
            <div id="draw_results">
                <table style="width:100%;margin-top: 50px;">
                    <tbody id="append_res">
                        <?php $__currentLoopData = $winners; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $win): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td class="text-center"><?php echo e($win->prize->prize_name); ?></td>
                            <td class="text-center"><?php echo e($win->unique_id); ?> - <?php echo e($win->user->name); ?></td>
                            <td class="text-center"><a href="javascript:void(0);"
                                    onclick="viewWinner('<?php echo e($win->unique_id); ?>')">View</a></td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>
                <div class="lottopanda-text bottom-abs">
                    <img src="<?php echo e(asset('website/images/lottopanda.png')); ?>">
                </div>
            </div>
        </div>

    </main><!-- /.container -->


    <div class="modal center" id="viewWinnerModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">


                <!-- Modal body -->
                <div class="modal-body text-center modal-cust-body">
                    <button type="button" class="close close_btn" data-dismiss="modal"><i
                            class="fa fa-times"></i></button>
                    <h3>Congratulations</h3>
                    <h2>You won the <span class="win_prize_name" id="win_prize_name">1st prize</span></h2>
                    <table>
                        <tr>
                            <td class="text-left">Prize</td>
                            <td class="text-right"><span id="win_prize">Test Tester</span></td>
                        </tr>
                        <tr>
                            <td class="text-left">Name</td>
                            <td class="text-right"><span id="win_name">Test Tester</span></td>
                        </tr>
                        <tr>
                            <td class="text-left">Phone</td>
                            <td class="text-right"><span id="win_phone">12345678</span></td>
                        </tr>
                        <tr>
                            <td class="text-left">Unique ID</td>
                            <td class="text-right"><span id="win_unique_id">S1234567890</span></td>
                        </tr>
                        <tr>
                            <td class="text-left">Qatar ID</td>
                            <td class="text-right"><span id="win_q_id">12345679876</span></td>
                        </tr>
                        <tr>
                            <td class="text-left">IMEI</td>
                            <td class="text-right"><span id="win_imei_number">1234567812345678</span></td>
                        </tr>
                    </table>
                    <div class="lottopanda-text top-abs">
                        <img src="<?php echo e(asset('website/images/lottopanda.png')); ?>">
                    </div>
                    <a class="print-text bottom-abs" onclick="printDiv('viewWinnerModal')"><i
                            class="fa-solid fa-chevron-up fa-fade"></i>Print</a>
                </div>

            </div>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="<?php echo e(asset('website/assets/dist/js/bootstrap.bundle.min.js')); ?>"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    

    <script>
        AOS.init();

        var entrants = <?php echo json_encode($unique_ids, 15, 512) ?>;
        
        // var speedroll = parseInt("<?php echo e($settings->spin_time); ?>"); ///spin time
        // var deaccelerate = parseInt("<?php echo e($settings->speed); ?>");//spin speed
        // var max_wait_time = (deaccelerate*speedroll);
        var next_prize_name = "<?php echo e($next_prize->prize_name??''); ?>";
        var next_prize_id = "<?php echo e($next_prize->id??''); ?>";
        var _token = $('meta[name="csrf-token"]').attr('content');

        // Loader 
        setTimeout(function(){
            $('.main').css('display', 'flex');
        }, 3050);
        setTimeout(function(){
            $('.preloader').css('display', 'none');
        }, 4000);


        $('document').ready(function () {
            rollClick();
        });


        function shuffle(array) {
            let currentIndex = array.length,  randomIndex;

            // While there remain elements to shuffle.
            while (currentIndex > 0) {

                // Pick a remaining element.
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex--;

                // And swap it with the current element.
                [array[currentIndex], array[randomIndex]] = [
                array[randomIndex], array[currentIndex]];
            }

            return array;
        } 

        function rollClick() {
            $('#roll').on('click', function(e) {
                if (next_prize_id != "" && entrants.length>0) {
                
                    $('#roll').html('<img class="change-pos" src="images/switch-on.webp">');
                    $('#unique_code').show();

                    const shuffledArray = shuffle(entrants); 
                    var totalspin = shuffledArray.length;
                    var breakpoint = parseInt("<?php echo e($settings->spin_time); ?>");// assign spine times variable
                    if(totalspin < breakpoint){
                        breakpoint = totalspin;
                    }
                    else{
                        breakpoint = 100; 
                    }
                    var betweentime = parseInt("<?php echo e($settings->speed); ?>"); //Speed
                    var max_wait_time = breakpoint*betweentime+200;
                    
                    setTimeout(function() {
                        var winner = $('#unique_code').text();
                        // Add Winner data to table
                        $.ajax({
                                type: "POST",
                                url: "<?php echo e(route('raffle_draw.post')); ?>",
                                data: {
                                    _token: _token,
                                    prize_id: next_prize_id,
                                    winner: winner,
                                },
                                success: function (data) {
                                    console.log(data);
                                    if (data.status == "success") {

                                        var winner = data.data.winner;
                                        var prize = data.data.prize;
                                        var next_prize = data.data.next_prize;
                                        if (next_prize) {
                                            next_prize_name = next_prize.prize_name;
                                            next_prize_id = next_prize.id;
                                        } else {
                                            next_prize_name = "Completed";
                                            next_prize_id = "";
                                        }

                                        // // remove name from array
                                        // const indexOfWinner = entrants.indexOf(winner
                                        // .unique_id);
                                        // entrants.splice(indexOfWinner, 1);

                                        entrants = data.data.unique_ids;
                                        
                                        // Update next prize
                                        $("#price-alert").text(next_prize_name);
                                        $('#unique_code').text("S000000000")
                                        // Append result
                                        $('#append_res').append(
                                            `<tr><td class="text-center">`+prize.prize_name+`</td><td class="text-center">Unique ID - ` +
                                            winner.unique_id +
                                            `</td><td class="text-center"><a href="javascript:void(0);" onclick="viewWinner('` +
                                            winner.unique_id + `')">View</a></td></tr>`
                                        );

                                    } else {
                                        //    location.reload();
                                    }
                                },
                                error: function (data) {
                                    console.log('Error:', data);
                                    // location.reload();

                                }
                            });

                    //get ready for another roll
                    $('#roll').html(`<img src="<?php echo e(asset('website/images/switch-off.webp')); ?>">`);
                            // $('.head-main').css('background-image', 'url(<?php echo e(asset("website/images/head_new.webp")); ?>)');
                            $('.success_loader').html(`<div class="overlay"></div><div><img class="confettipop" src="<?php echo e(asset('website/images/confetti.png')); ?>"><img src="<?php echo e(asset('website/images/success_splash.webp')); ?>"><h2>Congratulations</h2></div>`
                            );
                            setTimeout(function(){
                                $('.success_loader').css('display','flex');
                            },200);
                            setTimeout(function () {
                                $('.success_loader').css('display', 'none');
                            }, 3000);
                    
                    }, max_wait_time);
                    
                    
                    
                    for(var i=0; i<totalspin; i++){
                        var newi = parseInt(i);
                        if(newi == breakpoint)
                        {
                            break;
                        }
                        var shuf_val = shuffledArray[i];
                        var newbetweentime = (i+1)*betweentime;
                        delay(shuf_val,newbetweentime);
                    }
                    
                    function delay(uniqghid,freshtime)
                    {
                        setTimeout(function(){ $('#unique_code').text(uniqghid); }, freshtime);
                    }
                }
                e.preventDefault();
            });
            }



        // function randomName() {
        //     var rand = Math.floor(Math.random() * entrants.length);
        //     var name = entrants[rand];
        //     $('#unique_code').text(name);
        // }

        // function rollClick() {
        //     $('#roll').on('click', function (e) {
        //         if (next_prize_id != "") {

        //             $('#roll').html(`<img class="change-pos" src="<?php echo e(asset('website/images/switch-on.webp')); ?>">`);
        //             $('#unique_code').show();
        //             // //$('#winner').hide();
        //             // var speedroll = 50; ///spin time
        //             // var deaccelerate = 2;//spin speed
        //             // var max_wait_time = (speedroll*((deaccelerate*10)/2))*10;
        //             setDeceleratingTimeout(function () {
        //                 randomName()
        //             }, deaccelerate, speedroll);

        //             // var speedroll = 8000;

        //             setTimeout(function () {
        //                 var winner = $('#unique_code').text();
                        
        //                 // Add Winner data to table
        //                 $.ajax({
        //                     type: "POST",
        //                     url: "<?php echo e(route('raffle_draw.post')); ?>",
        //                     data: {
        //                         _token: _token,
        //                         prize_id: next_prize_id,
        //                         winner: winner,
        //                     },
        //                     success: function (data) {
        //                         console.log(data);
        //                         if (data.status == "success") {

        //                             var winner = data.data.winner;
        //                             var prize = data.data.prize;
        //                             var next_prize = data.data.next_prize;
        //                             if (next_prize) {
        //                                 next_prize_name = next_prize.prize_name;
        //                                 next_prize_id = next_prize.id;
        //                             } else {
        //                                 next_prize_name = "Completed";
        //                                 next_prize_id = "";
        //                             }

        //                             // // remove name from array
        //                             // const indexOfWinner = entrants.indexOf(winner
        //                             // .unique_id);
        //                             // entrants.splice(indexOfWinner, 1);

        //                             entrants = data.data.unique_ids;
                                    
        //                             // Update next prize
        //                             $("#price-alert").text(next_prize_name);
        //                             $('#unique_code').text("S000000000")
        //                             // Append result
        //                             $('#append_res').append(
        //                                 `<tr><td class="text-center">`+prize.prize_name+`</td><td class="text-center">Unique ID - ` +
        //                                 winner.unique_id +
        //                                 `</td><td class="text-center"><a href="javascript:void(0);" onclick="viewWinner('` +
        //                                 winner.unique_id + `')">View</a></td></tr>`
        //                             );

        //                         } else {
        //                             //    location.reload();
        //                         }
        //                     },
        //                     error: function (data) {
        //                         console.log('Error:', data);
        //                         // location.reload();

        //                     }
        //                 });



        //                 //get ready for another roll
        //                 $('#roll').html(`<img src="<?php echo e(asset('website/images/switch-off.webp')); ?>">`);
        //                 // $('.head-main').css('background-image', 'url(<?php echo e(asset("website/images/head_new.webp")); ?>)');
        //                 $('.success_loader').html(`<div class="overlay"></div><div><img class="confettipop" src="<?php echo e(asset('website/images/confetti.png')); ?>"><img src="<?php echo e(asset('website/images/success_splash.webp')); ?>"><h2>Congratulations</h2></div>`
        //                 );
        //                 setTimeout(function(){
        //                     $('.success_loader').css('display','flex');
        //                 },200);
        //                 setTimeout(function () {
        //                     $('.success_loader').css('display', 'none');
        //                 }, 3000);

        //             }, max_wait_time+1100);
        //             // }, 1000);
        //             e.preventDefault();

        //         }
        //     });
        // }

        // function setDeceleratingTimeout(callback, factor, times) {
        //     var internalCallback = function (t, counter) {
        //         return function () {
        //             // var test = ++counter * factor;
        //             // console.log('result - '+test);
        //             if (--t > 0) {
        //                 window.setTimeout(internalCallback, factor);
        //                 // window.setTimeout(internalCallback, ++counter * factor);
        //                 ++counter;
        //                 callback();
        //             }
        //         }
        //     }(times, 0);

        //     window.setTimeout(internalCallback, factor);
        // };

        // View winner details
        function viewWinner(unique_id) {
            $.ajax({
                type: "POST",
                url: "<?php echo e(route('winner.show')); ?>",
                data: {
                    _token: _token,
                    unique_id: unique_id,
                },
                success: function (data) {
                    console.log(data);
                    if (data.status == "success") {

                        var winner = data.data.winner;
                        var prize = data.data.prize;

                        $("#win_prize_name").text(prize.prize_name);
                        $("#win_prize").text(prize.prize_value);
                        $("#win_name").text(winner.name);
                        $("#win_phone").text(winner.phone);
                        $("#win_unique_id").text(winner.unique_id);
                        $("#win_q_id").text(winner.q_id);
                        $("#win_imei_number").text(winner.imei_number);
                        $('#viewWinnerModal').modal('show');

                    }
                },
                error: function (data) {
                    // console.log('Error:', data);
                }
            });
        }

        function printDiv(divName) {
            var printContents = document.getElementById(divName).innerHTML;
            var originalContents = document.body.innerHTML;
            const frag = document.createDocumentFragment();
            while (document.body.firstChild) {
                frag.appendChild(document.body.firstChild); // Moves it
            }
            document.body.innerHTML = printContents;

            window.print();
            // document.body.innerHTML = originalContents;
            document.body.innerHTML = "";
            while (frag.firstChild) {
                document.body.appendChild(frag.firstChild); // Moves it
            }
        }

    </script>

</body>

</html>
<?php /**PATH C:\xampp\htdocs\lottopanda\resources\views/raffle_draw/home.blade.php ENDPATH**/ ?>