<?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');
?>
<style type="text/css">
    #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%);
    }
</style>

<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;">
        <span class="randomizer randomizer1">
        </span>
    </div>
</div>
<!--    <div class="row">
        <div class="col-xs-6">

            <span class="randomizer randomizer1">
            </span>

        </div>
        <div class="col-xs-6">

            <span class="randomizer randomizer2">
            </span>

        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">

            <span class="randomizer randomizer3">
            </span>

        </div>
        <div class="col-xs-6">
            <span class="randomizer randomizer4">
            </span>

        </div>
    </div>-->
<div class="row">
    <div class="col-xs-12">

        <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>
    </div>
</div>
<span class="text bigger" style="position:fixed;display:block;top:75vh;z-index:2;text-align: center;width:100%;"></span>
<style>
    .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;
    }
</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 display2 = $('.randomizer2');
        var display3 = $('.randomizer3');
        var display4 = $('.randomizer4');
        var interval;
        var number;
        var collected = [];
        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 () {
                $.ajax({
                    url: '{$list_url}', type: 'POST', dataType: 'JSON',
                    success: function (res) {
                        source = res.data;
                    console.log(source);
                        the.stop();
                    }
                });
            },
            run: function () {
                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;
            },
            select: function () {
                    display.empty();
//                display2.empty();
//                display3.empty();
//                display4.empty();
                if (typeof source[number] !== 'undefined') {
                    $.ajax({
                        url: '{$draw_url}', type: 'POST', dataType: 'JSON',
                        data: {registerId: collected, doorprizeId: '{$doorprize_id}'},
                        success: function (res) {
                            the.updatelist();
                            display.empty();
                        }
                    });
                }
            }
        };
    }();
    $(document).ready(function () {
        doorprize.init();
    });
EOD
    , 'embed');
