<?php
/*
 * *************************************************
 * Copyright (C) 2020 Earworks.                    *
 * Codeigniter Project Template Modification       *
 * Please contact our email for more information : *
 * contact@earworks.co.id                          *
 * *************************************************
 */
/*
 * SELECT user_profile.`name`, user_profile.`card_name`, user_profile.`optic`, visitor_absen.absen_id FROM `user_profile` left join visitor_absen on user_profile.user_id  = visitor_absen.visitor_id  
  ORDER BY `visitor_absen`.`absen_id` ASC, user_profile.`optic` ASC
 */
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<div id="gif" style="display:none;">
    <img src="<?= base_url('img/iphone.gif') ?>" id="gif_img" class="img img-responsive" />
    <span class="first" style="font-size:35px;font-weight:bold;display:block;text-align:center;">Iphone 14</span>
</div>
<div id="gif2" style="display:none;">
    <img src="<?= base_url('img/bose.png') ?>" id="gif_img" class="img img-responsive" style="width:80%;"/>
    <span class="first" style="font-size:35px;font-weight:bold;display:block;text-align:center;top:29%;">BOSE Earbuds</span>
</div>
<div class="row">
    <div class="col-xs-12"  style="background:transparent !important;">
        <div class="title-all-page" style="margin-top:80px;">
<!--            <span class="first" style="font-size:30px;">DOORPRIZE</span>
            <span class="first" style="font-size:35px;font-weight:bold;display:block;text-align:center;"><?= ($doorprize) ? $doorprize->nama : '-' ?></span>-->
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12" style="background:transparent !important;">

        <div class="spin-container" style="display:none;">
            <div class="spin-box" id="wheelContainer">

            </div>
        </div>
    </div>
</div>
<a class="btn btn-primary" style="display:none;" accesskey="l" onclick="doorprize.run()" href="javascript:void(0)">Get</a>
<a class="btn btn-primary" style="display:none;" accesskey="k" onclick="doorprize.stop()" href="javascript:void(0)">Stop</a>
<a class="btn btn-primary" style="display:none;" accesskey="p" onclick="doorprize.select()" href="javascript:void(0)">select</a>
<a class="btn btn-primary" style="display:none;" accesskey="o" onclick="doorprize.updatelist()" href="javascript:void(0)">select</a>
<a class="btn btn-primary" style="display:none;" accesskey="m" onclick="doorprize.view_gif()" href="javascript:void(0)">GIF</a>
<a class="btn btn-primary" style="display:none;" accesskey="n" onclick="doorprize.hide_gif()" href="javascript:void(0)">GIF</a>
<a class="btn btn-primary" style="display:none;" accesskey="b" onclick="doorprize.view_png()" href="javascript:void(0)">GIF</a>
<ul style="display:none;">
    <li>IE, Chrome, Safari, Opera 15+: [ALT] + <em>accesskey</em></li>
    <li>Opera prior version 15: [SHIFT] [ESC] + <em>accesskey</em></li>
    <li>Firefox: [ALT] [SHIFT] + <em>accesskey</em></li>
</ul>
<style type="text/css">
    .randomizer .name-display {
        font-size: 3.2em;
        font-weight:bold;
        /*font-family: quicksandbold;*/
        text-align: center;
        text-transform: capitalize;
    }
    .dorr {
        font-size:29px;
        line-height:5vh;
        display:block;
    }
    #gif, #gif2 {
        display:block;
        position:relative;
        z-index: 1000;
    }
    #gif > .first, #gif2 > .first {
        position:absolute;
        z-index: 1001;
        top:50%;
        left:50%;
        margin-bottom:200px;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    .spin-container, .spin-box {
        width:100%;
        position: relative;
        height:360px;
        overflow:hidden;
    }
    
    .spin-item {
        display:flex;
        justify-content: center;
        align-items:center;
        flex-direction: column;
        width:100%;
        height:180px;
        overflow: hidden;
        position:absolute;
    }
    .spin-item.selected >.textname,
    .spin-item.selected >.textoptic{
        color:green;
    }
    .textname, .textoptic {
        font-size:35px;
        font-weight:bold;
    }
</style>
<script type="text/javascript">
    
</script>
<?php
$doorprize_id = $doorprize ? $doorprize->id : null;
$list_url = base_url('doorprize/get_list/' . $location);
$draw_url = base_url('doorprize/draw');
Ci::set_script(<<<EOD
     var doorprize = function () {
        var the;
        var source = [];
        var display = $('.randomizer1');
        var interval;
        var number;
        var collected = [];
        var spinInterval = null;
        var startAngle = 0;
        var length = 0;
        return{
            init: function () {
                the = this;
                the.updatelist();
            },
            view_gif: function () {
                $('#gif').show();
            },
            view_png: function () {
                $('#gif2').show();
            },
            hide_gif: function () {
                $('#gif').hide();
                $('#gif2').hide();
            },
            updatelist: function () {
                $('#wheelContainer').empty();
                $('.spin-container').hide();
                $.ajax({
                    url: '{$list_url}', type: 'POST', dataType: 'JSON',
                    success: function (res) {
                        source = res.data;
                        if (source.length <= 0) {
                            return;
                        }
                        length = source.length;
//                        var degree = 360 / (length + 1);
                        var degree = 180;
                        var startDegree = 0;
                        $.each(source, function (idx, data) {
                            if (idx <= length) {
                                var textName = $('<span>', {'class': 'textname'}).html(data.name);
                                var textOptic = $('<span>', {'class': 'textoptic'}).html(data.optic);
                                var item = $('<div>', {
                                    'id': 'user-' + data.user_id,
                                    'class': 'spin-item',
                                    'data-user': data.user_id,
                                    'data-left': '0px',
                                    'data-angle': startDegree,
                                    'data-rotated': '0',
                                    'style': 'top: ' + startDegree + 'px;'
                                }).append(textName, textOptic);
                                $('#wheelContainer').append(item);
                                startDegree = startDegree + degree;
                            }
                        });
                        the.stop();
                    }
                });
            },
            doSpin: function (angle) {
                $('.spin-item').each(function () {
                    var rotateAngle = ($(this).data('angle') - angle);
                    $(this).css('top', rotateAngle + 'px');
                    $(this).attr('data-rotated', rotateAngle);
                });
            },
            run: function () {
                    $('.spin-container').show();
                interval = setInterval(function () {
                    startAngle += 3;
                    the.doSpin(startAngle);
                }, 1);
//                if (source.length > 0) {
//                    interval = setInterval(function () {
//                        the.showName(display, 0);
////                        the.showName(display2, 1);
////                        the.showName(display3, 2);
////                        the.showName(display4, 3);
//                    }, 1);
//                } else {
//                    display.html($('<h1>', {'class': 'name-display'}).text('All participant has selected'));
//                }
            },
            showName: function (objDisplay, slot) {
                number = 0 + Math.floor(Math.random() * source.length);

                var registerName = source[number].card_name;
                if (!registerName) {
                    registerName = source[number].name;
                }
                if (source[number].optic) {
                    registerName += '<br><span class="dorr">' +
                            source[number].optic +
                            '</span>';
                }


                objDisplay.html($('<h1>', {'class': 'name-display'}).html(registerName));

                if (typeof source[number] !== 'undefined') {
                    collected[slot] = source[number].user_id;
                }
            },
            stop: function () {
                clearInterval(interval);
                interval = null;
                $('.spin-item').each(function () {
                    if ($(this).attr('data-rotated') > 20 && $(this).attr('data-rotated') < 200) {
                        console.log($(this).data('rotated'));
                        $(this).addClass('selected');
                    } else {
                        $(this).removeClass('selected');
                    }
                });
                var selectedAngle = $('.spin-item.selected').attr('data-rotated');
                if (selectedAngle > 60) {

                    var newInterval = setInterval(function () {
                        startAngle += 1;
                        selectedAngle = selectedAngle - 1;
                        the.doSpin(startAngle);
                        if (selectedAngle <= 60) {
                            clearInterval(newInterval);
                        }
                    }, 1);
                }
                 collected[0] =$('.spin-item.selected').attr('data-user');
            },
            select: function () {
                 $.ajax({
                        url: '{$draw_url}', type: 'POST', dataType: 'JSON',
                        data: {registerId: collected, doorprizeId: '{$doorprize_id}'},
                        success: function (res) {
                            the.updatelist();
                        }
                    });
            }
        };
    }();
    $(document).ready(function () {
        doorprize.init();
    });
EOD
    , 'embed');
