<?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 .name-display {
        font-size: 4vw;
        font-weight:bold;
        /*font-family: quicksandbold;*/
        text-align: center;
        text-transform: capitalize;
    }
    .dorr {
        font-size:3vw;
        line-height:7vh;
        display:block;
    }
    .text-auk {
        position:fixed;
        display:block;
        top:75vh;
        z-index:2;
        text-align: center;
        width:100%;
    }

    .ramdomizer-wrapper {
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        gap:15px;
        width:100%;
        height:100%;
        max-width:60vw;
    }
    .randomizer-selected-wrapper {
        width:100%;
        height:90vh;
        /*background-color:rgba(0,0,0,0.3);*/
    }
    .randomizer-selected-winner {
        /*        display:flex;
                flex-wrap: wrap;
                flex: 1 1 auto;
        width: 68vw;
        height: 80vh;*/
        position:absolute;
        max-width: 140vh;
    }
    .randomizer-selected-item,
    .randomizer-winner-item {
        padding: 0px 15px;
        background-color:rgba(0,0,0,0.3);
        display:block;
        width:100%;
        text-align:center;
        margin-bottom:3px;
        line-height: 4vh;
        overflow:hidden;
        opacity:0;
        -transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    .randomizer-winner-item {
        background-color:rgba(0,0,0,0);
        display: inline-flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 64px;
        width: 45%;
        margin: 15px;
    }
    .randomizer-selected-item.show,
    .randomizer-winner-item.show{
        opacity:1;
        -transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);

    }
    .randomizer-selected-title1 {
        font-size:1.9vw;
        display:block;
        white-space:nowrap;
        overflow:hidden;
        width:100%;
        text-align:center;
    }
    .randomizer-selected-title2 {
        font-size:1.5vw;
        display:block;
        text-align:center;
    }

</style>

<div id="gif" style="display:none;">
    <?= show_file($doorprize->gambar) ?>
    <span id="gif_txt"></span>
</div>
<div class="ramdomizer-wrapper">
    <span class="randomizer randomizer1" style="flex:2;">
    </span>
    <div class="randomizer-selected" style="flex:1;">
        <div class="randomizer-selected-wrapper" id="randomizer-list">
        </div>
    </div>
</div>
<div class="winner randomizer-selected-winner" id="randomizer-winner">
</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_loop(<?= $doorprize->total ?>)" href="javascript:void(0)">Stop Loop</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="v" onclick="doorprize.view_winner()" href="javascript:void(0)">View Winner</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');
$winner_url = base_url('doorprize/ajax-view/' . $doorprize->id);
Ci::set_script(<<<EOD
     var doorprize = function () {
        var the;
        var source = [];
        var display = $('.randomizer1');
        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();
                $('.winner').hide();
                $(".randomizer").hide();
                $('.ramdomizer-wrapper').hide();
                if (is_video === '1') {
                    $('#gif_img').get(0).play();
                }
            },
            view_winner: function () {
                $('#gif').hide();
                $('.winner').show();
                $(".randomizer").hide();
                $('.ramdomizer-wrapper').hide();
                $.ajax({
                    url: '{$winner_url}', type: 'POST', dataType: 'JSON',
                    success: function (res) {
                        if (res.status === 1) {
                            $('#randomizer-winner').empty();
                            $.each(res.data, function (idx, data) {
                                var registerName = data.card_name;
                                if (!registerName) {
                                    registerName = data.name;
                                }
                                var title1 = $('<span>', {'class': 'randomizer-selected-title1'}).html(registerName);
                                var title2 = $('<span>', {'class': 'randomizer-selected-title2'}).html(data.optic);
                                var title = $('<div>', {'class': 'randomizer-winner-item show'}).append(title1, title2);
                                $('#randomizer-winner').append(title);
                            });
                            var i = 1;
                            $('.randomizer-selected-item').each(function () {
                                setTimeout(function () {
                                    $(this).addClass('show');
                                }, 100 );
                                i++;
                            });
                        }
                    }
                });
            },
            hide_gif: function () {
                $('#gif').hide();
                $('.winner').hide();
                $(".randomizer").show();
                $('.ramdomizer-wrapper').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);
                    }, 1);
                    the.hide_gif();
                } 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;
            },
            stop_loop: function (loop) {
                var start = 0;
                var miniInterval = setInterval(function () {
                    if (start >= loop - 1) {
                        clearInterval(miniInterval);
                        setTimeout(the.stop, 0);
                        setTimeout(the.select_loop, 666.6);
                    } else {
                        setTimeout(the.stop, 0);
                        setTimeout(the.select_loop, 666.6);
                        setTimeout(the.run, 1333.2);
                        start++;
                    }
                }, 2000);
            },
            view_one: function (data) {
//                    console.log(data);
                var registerName = data.card_name;
                if (!registerName) {
                    registerName = data.name;
                }
                var title1 = $('<span>', {'class': 'randomizer-selected-title1'}).html(registerName);
                var title2 = $('<span>', {'class': 'randomizer-selected-title2'}).html(data.optic);
                var title = $('<div>', {'class': 'randomizer-selected-item', 'id': 'willanimate-' + data.user_id}).append(title1, title2);
                $('#randomizer-list').append(title);
                setTimeout(function () {
                    $('#willanimate-' + data.user_id).addClass('show');
                }, 10);
            },
            select_loop: function () {
//                display.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();
                            the.view_one(source[number]);
                        }
                    });
                }
            },
            select: function () {
                display.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');
