<?php
/*
 * Author       : Jai K
 * Purpose      : The View for Kiosk Scan Page
 * Created On   : 2017-06-03 14:18
 */

$logo_url = $settings_design['scan_login_image'];
if( empty( $logo_url ) || !file_exists( DIR_LOGIN_IMG . $logo_url ) ) :
    $logo_url = 'assets/billing/images/scan/scan_login.png';
else :
    $logo_url = DIR_LOGIN_IMG . $logo_url;
endif;

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Tiru Kiosk</title>
        <link rel="stylesheet" href="<?php echo BASE_URL; ?>assets/css/library/font-awesome.min.css" />
        <link rel="stylesheet" href="<?php echo BASE_URL; ?>assets/billing/css/scan.css" />
        <style type="text/css">
            body {
                overflow-x: hidden;
                background: url(<?php echo BASE_URL; ?>assets/billing/images/scan/bg.png) repeat;
            }
            .header {
                margin-bottom: 30px;
            }
            
            .container_hd {
                margin-top: 20px;
            }
            
            #scan-card-no {
                width: 100%;
                background: none;
                min-height: 48px;
                text-align: center;
                font-size: 28px;
                letter-spacing: 10px;
                border: none;
            }
            
            .video_section video {
                width: 100%;
                height: 100%;
            }
            
            #ad {
                min-height: 280px;
                overflow: hidden;
            }
            
            .ad-img {
                opacity: 0;
                position: absolute;
                margin-left: -630px;
            }
            
            body.login-wrap .advertisement {
                margin-top: -20px;
            }
            
            @media screen and ( min-width: 1024px ) {
                .ad-img {
                    margin-left: -320px;
                }
            }
            
            
        </style>
        <script type="text/javascript">
            var baseURL = "<?php echo BASE_URL; ?>";
            var isScan  = true;
        </script>
    </head>
    <body>
        <div class="body_wrapper">
            <div class="header">
                <div class="logo" style="background: url(<?php echo BASE_URL . $logo_url; ?>) no-repeat; "></div>
            </div>
            
            <div class="wrapper">
                <div class="" id="sc-msg"></div>
                <div class="container" id="main-wrap">
                    <div class="container_hd">please scan your member card</div>
                    <div class="strip">
                        <form method="post" onsubmit="return showScanPass();">
                            <input type="text" id="scan-card-no" name="scan_card_no" autofocus value="" autocomplete="off" />
                            <input type="submit" value="" style="display: none;">
                        </form>
                    </div>
                    <div class="video_section" id="video-wrap" >
                        <?php if( !empty( $video_url['value'] ) ) : ?>
                                <video id="video" autoplay loop >
                                    <source  src="<?php echo strpos( $video_url['value'], '://' ) === FALSE ? BASE_URL . $video_url['value'] : $video_url['value']; ?>" <?php $e = explode('.', $video_url['value']); echo 'type="video/'. $e[count($e)-1] .'"' ?> />
                                </video>    
                        <?php endif; ?>
                    </div>
                    
                </div> <!-- main wrap -->
                
                
                <div class="container" id="login-wrap" style="display: none;">
                    <div class="container_lft">
                        <span class="welcome_txt">Welcome</span>
                        <span class="name_txt"></span>
                        <input type="hidden" id="mem-id" value="" />
                    </div>
                    <div class="container_rt">
                        <div class="container_rt_hd">Enter you pin</div>
                        <div class="login_div ksk-num-pad num-pad">
                            <div class="login_div_div" style="background-color: #200d03">
                                <div class="pwd_div inp multiple">
                                    <div class="pwd_disp">
                                        <input type="password" class="pwd_bullet" data-limit="1" required="" />
                                    </div>
                                    <div class="pwd_disp">
                                        <input type="text" class="pwd_bullet" data-limit="1" required="" />
                                    </div>
                                    <div class="pwd_disp">
                                        <input type="text" class="pwd_bullet" data-limit="1" required="" />
                                    </div>
                                    <div class="pwd_disp">
                                        <input type="text" class="pwd_bullet" data-limit="1" required="" />
                                    </div>
                                </div>
                                <div class="keypad_div pad">
                                    <div class="num">
                                        <div class="keypad_div_row">
                                            <div class="keypad cell keypad_lft_none">
                                                <span class="keypad_txt">7</span>
                                            </div>
                                            <div class="keypad cell">
                                                <span class="keypad_txt">8</span>
                                            </div>
                                            <div class="keypad cell">
                                                <span class="keypad_txt">9</span>
                                            </div>
                                        </div>
                                        <div class="keypad_div_row">
                                            <div class="keypad cell keypad_lft_none">
                                                <span class="keypad_txt">4</span>
                                            </div>
                                            <div class="keypad cell">
                                                <span class="keypad_txt">5</span>
                                            </div>
                                            <div class="keypad cell">
                                                <span class="keypad_txt">6</span>
                                            </div>
                                        </div>
                                        <div class="keypad_div_row">
                                            <div class="keypad cell keypad_lft_none">
                                                <span class="keypad_txt">1</span>
                                            </div>
                                            <div class="keypad cell">
                                                <span class="keypad_txt">2</span>
                                            </div>
                                            <div class="keypad cell">
                                                <span class="keypad_txt">3</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="keypad_div_row ctrls">
                                        <div class="keypad cell clr-btn keypad_lft_none">
                                            <span class="keypad_txt">C/E</span>
                                        </div>
                                        <div class="keypad cell zero">
                                            <span class="keypad_txt">0</span>
                                        </div>
                                        <div class="keypad cell ok-btn">
                                            <span class="keypad_txt">OK</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="gap"></div>
                </div> <!-- login-wrap -->
                
                <div class="advertisement" id="ad" >
                    <?php
                        shuffle( $advertisement );
                        foreach( $advertisement as $k => $ad ) :
                            ?>
                                <img class="ad-img" id="ad-img-<?php echo $k; ?>" src="<?php echo BASE_URL . DIR_ADVERTISEMENT . $ad['value']; ?>" />
                            <?php
                        endforeach;
                    ?>
                </div>
            </div>
            <div class="footer">
                    <marquee class="footer_marquee">
                        <?php
                            
                            $H    = date("H");
                            $tomorrow_str = (time() - ( $H * 60 * 60 )) + 86400; 
                            $tomorrow = date("d-m-Y | l", time()+86400);
                            
                            foreach( $event as $k => $evt ) :
                                $str = 'Today';
                                $is_tamil = substr( $evt['name'], 0, 3 ) == 'TAM' ? TRUE : FALSE;
                                
                                if( ($evt['value'] == '1' && $H >= 11) || ($evt['value'] == '2' && $H >= 16) ) :
                                    // Passed the current Day
                                    
                                    // Check Next day is possible
                                    if( $tomorrow_str <=  strtotime( $evt['updated_on'] )) :
                                        // Possible
                                        $str = $tomorrow;
                                    else :
                                        // Expired on today
                                        continue;
                                    endif;
                                    
                                endif;
                                
                                $str .= ' | '.( $evt['value'] == "1" ? ( $is_tamil ? 'காலை' : 'Morning' ) : ( $is_tamil ? 'மாலை' : 'Evening' ) ). ' - <span style="'. ( $is_tamil ? ' font-family: amudham; font-weight: bold; font-size: 56px;' : '' ) .'" >'. substr( $evt['name'], 3 ).'</span>';
                                
                                echo '<span style="margin-right:25%; ">'. $str .'</span>';
                            
                            endforeach;
                        ?>
                    </marquee>
            </div>
        </div>
        
        <script type="text/javascript" src="<?php echo BASE_URL; ?>assets/billing/js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="<?php echo BASE_URL; ?>assets/billing/js/archanai.js"></script>
        <script type="text/javascript">
            
            var timeout = '';
            function chkActTimer(){
                window.clearTimeout(timeout);
                timeout = window.setTimeout(function(){
                    window.location.reload();
                }, 30000); // 30 secs
                        
                if( !$('#login-wrap').attr('data-activity') ) {
                    $('#login-wrap').attr('data-activity', 'ok');
                    $('body').on('click', function(){
                        chkActTimer();
                    });
                }
                
            }
            function msgBox(msg){
                if( typeof msg == 'undefined' ) {
                    $('#sc-msg').slideUp('slow', function(){
                        $(this).html('');
                    });
                }else {

                    $('#sc-msg').html('<i class="fa fa-exclamation-triangle"></i><div>'+msg+'</div>').slideDown('slow', function(){
                        //$(this).find('> div');

                        setTimeout(function(){
                             msgBox();
                         }, 5000);

                    });
                }
            }

            
            function showScanPass(){
                var cardNo = $('#scan-card-no').val();
                
                if( cardNo == '' ) { 
                    msgBox('Member Card number is empty!');
                    $('#scan-card-no').focus();
                    return false;
                }

                // Get Details
                var ajax = true
                ,   data = {
                    act     : 'scan',
                    type    : 'scanned',
                    cardNo  : cardNo,
                };
                
                window.setTimeout(function(){ if( ajax ) {
                    $('#sc-msg').html('Please wait ...').fadeIn('slow');
                }}, 700);

                $.post( baseURL + 'billing_archanai/ajax/', data, function(results){
                    ajax = false;
                    results = JSON.parse(results);

                    if( results != '' ) { 
                        var msg = '';
                        if( results['errNo'] == '1' ) {
                            msg = 'Card No is not exists!';
                        }else if( results['errNo'] == '2' ) {
                            msg = 'Card is not active!';
                        }

                        if( results['errNo'] == '0' ) {
                            var result      = results['result'];

                            $('.name_txt').html( result['name'].toUpperCase() );
                            $('#mem-id').val(result['id']);

                            $('#sc-msg').html('').fadeOut('slow');//, function(){
                                $('#main-wrap').fadeOut('slow', function(){
                                    $('#login-wrap').fadeIn('slow', function(){
                                        $('body').addClass('login-wrap');
                                        // Check for Activity timer
                                        chkActTimer();
                                    });
                                });
                            //});

                        }else {
                            msgBox(msg);
                        }
                    }
                });
                
                return false;

            }
            
            window.onload = function(){
                var video = document.getElementById('video') || "";
                if( video != '') {
                    video.addEventListener('loadeddata', function(){
                       document.getElementById('video-wrap').style.background = 'none';
                    });
                }
            }
            
            function showAd(){
                var adLen = $('.ad-img').length
                ,   id = $('#ad').attr('data-id') || -1
                ,   W  = $('#ad').outerWidth();
                
                // Hide current slide
                if( id >= 0 ) {
                    var r = Math.floor((Math.random()*2)+1);
                    $('#ad-img-'+id).stop().animate({
                        'opacity'   : 0,
                        'left'      : (r == 1 ? '-' : '+') +(r*W)+'px',
                    }, 120);
                }
                
                if( ++id >= adLen ) {
                    id = 0;
                }
                
                $('#ad').attr('data-id', id);
                
                // Next Slide
                $('#ad-img-'+id).stop().animate({
                    'opacity'   : 1,
                    'left'      : W+'px',
                }, 'swing');
                
                if( adLen > 1 ) {
                    window.setTimeout(function(){
                       showAd(); 
                    }, 5000);
                }
            }
            
            $(document).on('ready', function(){
                $('.ad-img').css({'height' : $('#ad').height() + 'px', 'width' : ($('#ad').width()) + 'px'});
                showAd(); 
                
                
            });
            
        </script>
    </body>
</html>

