<?php

/* 
 * Author       : Jai K
 * Purpose      : The add page for Kiosk Scan 
 * Created On   : 2017-06-03 17:24    
 */

$logo_url = $settings_design->scan_main_image;
if( empty( $logo_url ) || !file_exists( DIR_LOGIN_IMG . $logo_url ) ) :
    $logo_url = 'assets/billing/images/scan/scan_main.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/jquery.bxslider.css"/>
        <link rel="stylesheet" href="<?php echo BASE_URL; ?>assets/billing/css/inner.css" />
        <link rel="stylesheet" href="<?php echo BASE_URL; ?>assets/billing/css/scan.css" />
        <style type="text/css">
            .center {
                text-align: center;
            }
            .right {
                text-align: right;
            }
            .left {
                text-align: left;
            }
            
            .fR {
                float: right;
            }
            
            .bx-wrapper .bx-viewport {
                background: none;
                border: none;
                
                width: 98% !important;
                margin: 20px 12px 35px;
                padding: 20px 0px;
            }
            
            .item_list_table tbody tr td:first-child {
                padding: 5px;
            }
            
            .item_list_table .rm-btn .fa-times {
                padding: 6px;
                color: #ccc;
                cursor: pointer;
            }
            
            .no-records {
                text-align: center;
                color: rgba(255, 166, 0, .5);
                letter-spacing: 5px;
                font-size: small;
            }
            
            .icon_paynow {
                cursor: pointer;
            }
            
            
            .pwd_disp, .keypad {
                float: none;
                display: inline-block;
            }
            
            .pwd_disp {
                width: 65px;
                height: 70px;
                margin: 8px 5px;
            }
            
            .keypad {
                width: 85px;
                height: 80px;
                margin-left: 25px;
                
            }
            
            .keypad_div {
                border: 1px solid #dbc497;
                padding: 20px 0px;
                border-radius: 20px;
                box-shadow: 3px 3px 9px #333;
                width: 40%;
                margin-top: 20px;
                margin-left: 30%;
            }
            
            .keypad_div_row {
                width: 95%;
                margin: 8px -5px;
            }
           
            .dialog .lbl {
                color: #c6953d;
                font-size: 18px;
                letter-spacing: 1px;
                font-weight: bold;
                margin: 20px 0px;
            }
            
            .dialog .title .big-lbl {
                display: inline-block; 
                width: 80%;
                padding-left: 40px; 
                border-bottom: 1px solid;
                padding-bottom: 8px; 
                box-shadow: 2px 2px 3px #333;
                margin-left: 5%;
            }
            
            .container_rt_icon {
                cursor: pointer;
            }
            
            #mini-state-content {
                width: 80%;
                margin: 0 auto;
                margin-top: 40px;
                color : rgb(249, 168, 0);
            }
            
            #mini-state-content th {
                text-align: center;
            }
            @media screen and (max-width: 960px) {
                .cat-blck, .item-cell {
                    width: 16%;
                }
            }
        </style>
        <script type="text/javascript">
            var baseURL = "<?php echo BASE_URL; ?>";
            var catOn   = <?php echo $category_on ? "true" : "false"; ?>;
            var isScan  = true;
            var pStatus     = "<?php echo $this->session->flashdata( REMOTE_ADDR . '_flag'); ?>";
            var controller = 'billing_archanai';
            var isNumpad = isTamil = false;
            
        </script>
    </head>

    <body>
        <div class="body_wrapper">
            <div class="header">
                <div class="inner_logo" style="background: url(<?php echo BASE_URL . $logo_url; ?>) no-repeat; "></div>
            </div>
            <div class="inner_wrapper">
                <div class="" id="sc-msg"></div>
                <div class="container" style="margin-bottom: 20px;">
                    <div class="inner_container_lft">
                        <div class="details_div">
                            <label>Name</label>
                            <span class="colon">:</span>
                            <span class="name"><?php echo strtoupper( $user['name'] ); ?></span>
                            <input type="hidden" id="mem-id" value="<?php echo $user['id']; ?>" />
                            <input type="hidden" id="mem-name" value="<?php echo $user['name']; ?>" />
                            <input type="hidden" id="mem-card-no" value="<?php echo $user['card_no']; ?>" />
                            <input type="hidden" id="pay-id" value="<?php echo $pay_id; ?>" />
                        </div>
                        <div class="details_div">
                            <label>Balance</label>
                            <span class="colon">:</span>
                            <span class="name">S$ <span id="avail-bal"><?php echo number_format( $user['amount'], 2 ); ?></span></span>
                        </div>
                    </div>
                    <div class="inner_container_rt">
                        <a href="<?php echo BASE_URL; ?>kiosk/logout/scan/" class="logout-btn container_rt_icon"><img src="<?php echo BASE_URL; ?>assets/billing/images/scan/icon_logout.png" /></a>
                        <span class="mini-state-btn container_rt_icon"><img src="<?php echo BASE_URL; ?>assets/billing/images/scan/icon_print.png" /></span>
                        <span class="change-pass-btn container_rt_icon"><img src="<?php echo BASE_URL; ?>assets/billing/images/scan/icon_info.png" /></span>
                    </div>
                    </div>
            </div>
            
            <div class="dialog inner_wrapper" id="mini-state-dialog" style="width: 100%; float: left; text-align: center;">
                
                <div class="title">
                    <div class="big-lbl">Mini Statement</div> 
                    <div class="ctrls" style="display: inline-block;">
                        <i class="fa fa-times clse-btn"></i>
                    </div>
                </div>  
                
                <div id="mini-state-content">
                    <table border="1" class="item_list_table" style="float: none;">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Date</th>
                                <th>Amount (S$)</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                    
                    <div class="ctrls" style="margin: 40px;">
                        <button id="mini-state-print-btn" class="bttn primary">Print</button>
                    </div>
                </div>
                
            </div> <!-- mini-state-dialog -->    
            
            <div class="dialog inner_wrapper" id="change-pass-dialog" style="width: 100%; float: left; text-align: center;">
                
                <div class="title">
                    <div class="big-lbl" >Change Password</div> 
                    <div class="ctrls" style="display: inline-block;">
                        <i class="fa fa-times clse-btn"></i>
                    </div>
                </div>    
                    
                
                <div class="ksk-num-pad num-pad" style="margin-top: 70px;">
                    <div class="lbl">New Password</div>
                    <div class="" 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 id="content">
                
                <div class="dialog" id="with-name-dialog">
                    <div class="title">
                        <div  style="display: inline-block; width: 85%;">With Name</div> 
                        <div class="ctrls" style="display: inline-block;">
                            <i class="fa clse-btn">Skip</i>
                        </div>
                    </div>

                    <div>
                        <!-- <div class="center">
                            <button class="bttn" id="with-name-btn">With Name</button>
                            <button class="bttn clse-btn">Without Name</button>
                        </div> -->

                        <div class="plot" style="text-align: center; margin: 30px 0px; border: 1px solid #999; padding: 60px 0px;">
                            <input type="hidden" id="devotee_contact" name="devotee_contact" value="<?php echo $user['contact_no']; ?>" />
                            <?php
                                $members['.'] = $user;

                                foreach( $members as $k => $mem ) :
                                    $sclr = array(
                                        'rgba('.rand(100, 200).','. rand(100, 200).','. rand(100, 200).',1)',
                                        'rgba('.rand(0, 100).','. rand(0, 100).','. rand(0, 100).',1)',
                                    );
                                    ?>
                                        <div class="cell" style="background: radial-gradient(<?php echo $sclr[0]; ?>, <?php echo $sclr[1]; ?>);" data-details='<?php echo json_encode( $mem ); ?>'>
                                            <div><?php echo $mem['name']; ?></div>
                                            <div style="font-family: amudham; "><?php echo $mem['tamil_name']; ?></div>
                                        </div>
                                    <?php
                                endforeach;
                            ?>
                        </div>
                    </div>
                </div>

                <div class="dialog slider" id="gods-dialog">
                    <div class="title">
                        <div  style="display: inline-block; width: 85%;">God Name</div> 
                        <div class="ctrls" style="display: inline-block;">
                            <i class="fa fa-check ok-btn"></i>
                            <i class="fa fa-times clse-btn"></i>
                        </div>
                    </div>
                    <ul class="bxslider" id="gods-bxslider"><li>
                        <?php
                           $sclr = array(
                               'rgba(211, 141, 9, 1)', //'rgba('.rand(0, 200).','. rand(0, 200).','. rand(0, 200).',1)',
                               'rgba(90, 51, 0, 0.1)', //'rgba('.rand(0, 200).','. rand(0, 200).','. rand(0, 200).',1)',
                           );
                            $len = count($gods);
                            $step = $len < 20 ? $len : 20;

                            //echo "<pre>"; print_r( $gods ); die;
                            for($x = 1; $x <= $len; $x++ ) :
                                $god    = $gods[$x-1];
                                $img_url = DIR_GOD_ICON . $god['icon'];
                                $img_url = !empty( $god['icon'] ) && file_exists( $img_url ) ? $img_url : 'assets/images/layout/logo.png';
                            ?>
                                <div class="god-cell cell id-god-<?php echo $x; ?> archanai_list_div" data-id="<?php echo $god['id']; ?>" style="background: linear-gradient(<?php echo $sclr[0]; ?> 50%, <?php echo $sclr[1]; ?> 50%);">
                                    <div class="archanai_name_eng"><?php echo $god['name']; ?></div>
                                    <div class="event_middle">
                                    <?php if( !empty( $god['image'] ) ) : ?>
                                        <span class="event_icon cat-ico" style="background: #f5fb85; border-radius: 0px 5px 5px 0px;">
                                        <img src="<?php echo BASE_URL . $img_url; ?>" style="width: 100%;  height: 100%;">
                                    <?php else : ?>
                                        <span class="event_icon cat-ico">
                                    <?php endif; ?>

                                        </span>

                                    </div>
                                    <div class="archanai_name_tm"><?php echo $god['tamil_name']; ?></div>

                                </div>

                                <?php echo ( $x % $step == 0 ) ? (($x == $len) ? '</li>' : '</li><li>') : ''; 
                            endfor;
                        ?>
                    </li></ul>

                </div>


                <div id="sliders">
                <?php if( !empty( $category_on ) ) : ?> 
                    <div id="cat-slider" class="content_left_middle single bxslider">
                        <ul id="cat-bxslider" class="">
                            <li>
                            <?php
                                $c = 0;
                                $step = 5;

                                $total = count($categories);
                                $is_round = $total % $step == 0 ? TRUE : FALSE;

                                foreach( $categories as $k => $cat ) :
                                    $mod = ++$c % 5;

                                    $img_url = DIR_CATEGORY_IMAGE.$cat['image'];
                                    $img_avail = !empty($cat['image']) && file_exists($img_url) ? TRUE : FALSE;
                                    ?>

                                        <div class="cat-blck item events_div_red <?php echo $cls; ?>" data-clr="<?php echo $cat['color_top'].'`'.$cat['color_bottom']; ?>" style="background: linear-gradient(<?php echo $cat['color_top'].' 50%, '.$cat['color_bottom'].' 50%'; ?>);" data-id="<?php echo $cat['id']; ?>" data-name="<?php echo $cat['category_name']; ?>">
                                            <div class="event_name_eng"><?php echo $cat['category_name']; ?></div>
                                            <div class="event_middle">
                                                <!-- <span class="event_icon cat-ico" style="background: url(<?php //echo BASE_URL.DIR_CATEGORY_IMAGE.$cat['image']; ?>) no-repeat;"></span> -->
                                                <span class="event_icon cat-ico" style="<?php echo $img_avail ? 'background: #790000; border-radius: 0px 5px 5px 0px;' : ''; ?>"><?php echo $img_avail ? '<img src="'. (BASE_URL. $img_url) .'" style="width: 100%; height: 100%;" />' : ''; ?></span>
                                            </div>
                                            <div class="event_name_tm"><?php echo $cat['tamil_name']; ?></div>
                                        </div>

                                    <?php
                                    echo $mod == 0 ? (($c == $total) ? '</li>' : '</li><li>') : ''; 
                                endforeach;

                            ?>
                            </li>
                        </ul>    
                    </div>

                <?php endif; ?>


                    <div id="plot">
                        <div id="item-slider" style="float: left; width: 100%; margin-bottom: -35px; " >
                            <?php if( empty( $category_on ) ) : ?>
                            <ul class="bxslider" id="item-bxslider">
                                <li>
                                    <?php 
                                        $len = count($items);
                                        $step = $len < 20 ? $len : 20;
                                        for($x = 1; $x <= $len; $x++ ) :
                                            $item    = $items[$x-1];
                                            $price   =  $item['date_price'] != null ? $item['date_price'] : $item['price'];
                                    ?>
                                        <div class="item-cell id-<?php echo $x;?> archanai_list_div" data-id="<?php echo $item['cat_id'] .'-'. $item['item_id'] .'-'. $item['grouping'] .'-'. $item['god_name'] .'-'. $item['is_inventory'] .'-'. $item['inv_item_id'] .'-'. $item['avail_counter_qty'].'-'.$item['receipt'];?>" data-price="<?php echo $price?>" style="background: linear-gradient(<?php echo $item['item_top_color'];?> 50%, <?php echo $item['item_bottom_color'];?> 50%);">
                                            <div class="archanai_name_eng"><?php echo $item['name'];?></div>
                                            <div class="event_middle">
                                                <?php if( !empty( $item['image'] ) ) : ?>
                                                    <span class="event_icon cat-ico" style="background: #f5fb85; border-radius: 0px 5px 5px 0px;">
                                                        <img src="<?php echo BASE_URL . DIR_ITEM_IMAGE . $item['image'];?>" style="width: 100%;  height: 100%;" />
                                                <?php else :?>
                                                        <span class="event_icon cat-ico">
                                                <?php endif; ?>
                                                </span>
                                                <span class="event_amount">$<?php echo $price;?></span>
                                            </div>
                                            <div class="archanai_name_tm"><?php echo $item['tamil_name'];?></div>
                                        </div>
                                        <?php 
                                            echo ( $x % $step == 0 ) ? (($x == $len) ? '</li>' : '</li><li>') : ''; 
                                        endfor;
                                        ?>
                                </li>
                            </ul>
                            <?php  endif; ?>
                        </div>
                    </div>
                </div> <!-- sliders -->    
            
                <div class="inner_wrapper">
                    <div class="container">
                        <div class="item_list_div">
                                <div class="inner_container_lft rm_margin">
                                <div class="item_list">
                                    <table border="1" class="item_list_table">
                                        <thead>
                                            <tr>
                                                <th width="10%">S.no.</th>
                                                <th width="70%">Item Name</th>
                                                <th width="5%">Qty</th>
                                                <th width="15%;">Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody id="amt-grid">
                                            <tr class="no-results">
                                                <td>&nbsp;</td>
                                                <td class="no-records">No Records</td>
                                                <td>&nbsp;</td>
                                                <td>&nbsp;</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="inner_container_rt">
                                <div class="item_cost">
                                    <span class="item_amt_txt">Total Amount</span>
                                    <span class="item_amt">S$ <span id="total-amt">0.00</span></span>
                                </div>
                                <div class="icon_paynow sbmt-btn"></div>
                                <input type="hidden" name="pay_amount" id="to-pay" value="0" />

                                </div>
                        </div>
                    </div>
                </div>
                
            </div> <!-- content -->        
        </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/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="<?php echo BASE_URL; ?>assets/billing/js/jquery.bxslider.min.js"></script>
        
        <script type="text/javascript" src="<?php echo BASE_URL; ?>assets/billing/js/archanai.js"></script>
        <script type="text/javascript">
            
            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);

                    });
                }
            }
            
            $(document).on('ready', function(){
               
                $('#mini-state-print-btn').on('click', function(){
                    $('.mini-state-btn').addClass('to-print').trigger('click');
                });
                
                $('.mini-state-btn').on('click', function(){
                    var toPrint = $(this).hasClass('to-print') ? true : false;
                    
                    var ajax = true 
                    ,   data = {
                        act     : 'scan',
                        type    : 'log',
                        print   : toPrint,
                        id      : $('#mem-id').val(),
                        name    : $('#mem-name').val(),
                    };   
                    
                    window.setTimeout(function(){ if( ajax ) {
                        notify( toPrint ? 'Printing ...' : 'Getting Records ...', -1, 'info', 'x');
                    }}, 700);
                    
                    $.post( baseURL + 'billing_archanai/ajax/', data, function(results){
                        ajax    = false;
                        results = JSON.parse(results);
                                        
                        if( toPrint ) {
                            $('.mini-state-btn').removeClass('to-print');
                            notify('Printing ...', '', 'info', 'x');
                            //$('.notify-box').remove();
                        }else {
                            
                            // Show Dialog
                            $('#mini-state-print-btn, #change-pass-dialog').fadeOut('slow');
                            $('#content').fadeOut('slow', function(){
                                $('#mini-state-dialog').fadeIn('slow', function(){
                                    results = results['result'];
                                    var html = '<tr><td colspan="3" class="no-records">No Records</td></tr>';

                                    if( results != '' ) {
                                        html = '';
                                        var i = 0;
                                        Object.keys(results).map(function(k, v){
                                            html += '<tr>';
                                            html += '<td class="center">'+ (++i) +'</td>';
                                            html += '<td class="left">'+ results[k]['date'] +'</td>';
                                            html += '<td class="right">'+ results[k]['amount'] +'</td>';
                                            html += '</tr>';
                                        });

                                        $('#mini-state-print-btn').fadeIn('slow');
                                    }

                                    $('#mini-state-content table tbody').html(html);
                                });
                            });
                            
                        }
                        
                    });
                    
                });
                
                $('.change-pass-btn').on('click', function(){
                    
                    $('.pwd_bullet').val('');
                    $('#content').fadeOut('slow');
                    $('#change-pass-dialog').removeClass('confirmed').removeAttr('data-pass').fadeIn('slow');
                    $('#change-pass-dialog .lbl').html('New Password');
                    
                });
                
            });
            
            /** default.js - START **/
            function notify(msg, delay, type, name) {
                var delay   = typeof delay == 'undefined' || delay == '' ? 5000 : delay
                ,   type    = typeof type == 'undefined' || type == '' ? 'err' : type
                ,   fa      = type == 'success' ? 'fa-check' : ( type == 'info' ? 'fa-info' : 'fa-exclamation-triangle' ) 
                ,   name    = 'notify-'+(typeof name != undefined ? name : 'blck')
                ,   html    = '';

                if( $('.notify-box.'+name).length > 0 ) {
                    // Already Exists
                    $('.'+name).removeClass('err warning success info').addClass(type);
                    $('.'+name+' .status .fa').removeAttr('class').attr('class', 'fa '+fa);
                    $('.'+name+' .cntnt').html(msg);

                }else {    
                    if( $('#notify').length == 0 ) {
                        $('body').prepend( '<div id="notify"></div>' );
                    };

                    var idd = name+'-'+$('#notify .notify-box').length;
                    html += '<div class="notify-box '+ name +' '+ type +'" id="'+ idd +'">';
                    html +=     '<div class="status"><i class="fa '+ fa +'"></i></div>';
                    html +=     '<div class="cntnt">'+ msg +'</div>';
                    html +=     '<i class="fa fa-times-circle clse-btn"></i>';
                    html += '</div>';

                    $('#notify').prepend(html);
                    var $box = $('#notify .notify-box:first');

                    $box.slideDown('slow', function(){
                        adjNotify();
                        if( delay > 1 ) {
                            window.setTimeout(function(){
                                $box.find('.clse-btn').trigger('click');
                            }, delay);
                        }
                    });
                }
            }
            
            $(document).on('click', '.notify-box .clse-btn', function(){
                var $parent = $(this).parent().closest('.notify-box');
                $parent.slideUp(300, function(){$(this).remove(); adjNotify(); });
            });

            function adjNotify() {
                var  top     = 0
                ,   zIndx    = 9000;   

                $('#notify .notify-box').each(function(){
                    $(this).css({bottom: top+'px', 'z-index' : ++zIndx });
                    top += ($(this).height()+41);
                });
            }
            
            // Dummy
            function setFont(){};
            
            /** default.js - END **/
            
        </script>
    </body>
</html>

