<?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');
Ci::set_title($doorprize->nama);
?>
<style type="text/css">
    #gif, #gif2 {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        /* width: 100vh; */
        /* height: 100vw; */
    }
    #gif > #gif_img {
        display: block;
        /*height: 100%;*/
        margin: 0px auto;
        max-width: 100%;
        max-height: 100%;
    }
    #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%);
    }
    #gif_txt {
        font-size:35px;
        font-weight:bold;
        display:block;
        text-align:center;
    }
    .randomizer {
        display:block;
        width:90vh;
        margin: auto 0px auto auto;
    }
    .randomizer .name-display {
        font-size: 3.6vw;
        font-weight:bold;
        font-family:'MuseoBold';
        /*font-family: quicksandbold;*/
        text-align: center;
        padding-left:2%;
        text-transform: capitalize;
    }
    .dorr {
        font-size:3vw;
        line-height:5vh;
        display:block;
        font-family:'Museo';
        font-weight:normal;
    }
    .text-auk {
        position:fixed;
        display:block;
        top:75vh;
        z-index:2;
        text-align: center;
        width:100%;
    }

</style>
<span style="position:absolute;top:20vh;font-weight:bold;font-size:50px;font-family:'Museo900';">DOOR PRIZE</span>
<div id="gif" style="display:none;">
    <?= show_file($doorprize->gambar) ?>
    <span id="gif_txt"></span>
</div>
<div class="row" style="display:block;width:160vh;">
    <div class="col-xs-12" style="background:transparent !important;">
        <span class="randomizer randomizer1">
        </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>
        <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 text-auk"></span>
<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 is_img = '{$is_img}';
        var is_video = '{$is_video}';
        var collected = [];
        return{
            init: function () {
                the = this;
                the.updatelist();
            },
            view_gif: function(){
                $('#gif').show();
//                $(".randomizer").hide();
                if(is_video === '1'){
//                    $('#gif_img').get(0).play(); 
                }
            },
            hide_gif: function(){
                $('#gif').hide();
                $(".randomizer").show();
                if(is_video === '1'){
                    $('#gif_img').get(0).currentTime = 0;
                    $('#gif_img').get(0).pause(); 
                }
            },
            updatelist: function () {
                $.ajax({
                    url: '{$list_url}', type: 'POST', dataType: 'JSON',
                    success: function (res) {
                        source = res.data;
                        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');
