<?php

/* 
 * Author       : Jai K
 * Purpose      : The view for Login ( Kiosk Mode )
 * Created On   : 2016-09-12 10:20
 */

$log_img = DIR_LOGIN_IMG . $settings_design['login_image'];
$log_img = !empty( $settings_design['login_image'] ) && file_exists( $log_img ) ? base_url() . $log_img : base_url() . 'assets/billing/images/ksk-login-logo.png';

$bg_clr = $settings_design['login_page_color'];

?>
<style type="text/css">
    body {overflow: hidden; }
    
    .logo_div {
        text-align: center;
    }
    
    .logo {
        float: none;
        height: 400px;
        width: 400px;
    }
    
    .logo img {
        width: 400px;
        height: 400px;
        background-size: contain;
    }
    
    .title_hd_tm {
        font-family: amudham;
    }
    .ksk-box-dialog {min-width:100% !important;}
</style>
<div class="page_loader"></div>
<div class="container" id="ksk-login">
    <div id="numpad-login">
        <div class="logo_div" <?php echo $settings_general->kiosk_availability == '1' ? '' : 'style="width: 100%; position: fixed; bottom: 0px;"'; ?> >
        	<span class="logo">
                    <img src="<?php echo $log_img; ?>" />
            </span>
            <div class="title_div" style="<?php echo !empty( $bg_clr ) ? 'background: '.$bg_clr : ''; ?>">
            	<span class="title_hd_tm"><?php echo $settings['tamil_name']; ?></span>
                <span class="title_hd_eng"><?php echo $settings['temple_name']; ?></span>
            </div>
        </div>
        
        <?php if( $settings_general->kiosk_availability == '1' ) : ?>
            <div class="login_div ksk-num-pad num-pad">
                <div class="login_div_div" style="<?php echo !empty( $bg_clr ) ? 'background-color: '.$bg_clr : ''; ?>">
                    <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">
                                    <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">
                                    <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">
                                    <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">
                                <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>
        
        <?php else : ?>
            <script type="text/javascript">
                $(document).on('ready', function(){
                    window.setInterval(function(){
                        $('.msg-box').fadeOut('slow', function(){
                            $(this).css({'background' : 'rgba('+rand(255)+','+rand(255)+','+rand(255)+',1)'}).fadeIn('slow');
                        });
                    }, 12000);
                    var html = '';
                    for(var i=1; i <= 1; i++) {
                        //html += '<div class="scroller" style="background: '+( i == 1 ? '#f33' : ( i == 2 ? '#3f3' : ( i == 3 ? '#33f' : ( i == 4 ? '#ff3' : 'rgba('+rand(255)+','+rand(255)+','+rand(255)+',1)' ) ) ) )+';">Service is temporarily unavailable!</div>'; // 
                        html += '<div class="scroller" style="">Service is temporarily unavailable!</div>'; // 
                    }
                    msgBox('<marquee style="max-height: 100px; width: 95%; float: right;" behavior="alternate" truespeed="10" direction="right">'+html+'</marquee>', -1, 'info');
                    $('.msg-box .clse-btn, .msg-box .fa-info').remove();
                    
                });
            </script>
        <?php endif;?>
    </div>
</div>    

<div class="dialog ksk-box-dialog" id="ksk-menu-dialog" >
    <div class="wrapper">
        <div>
            <h1>Welcome <span id="name"></span>!</h1>
        </div>
        <div class="main-info" style="<?php echo !empty( $bg_clr ) ? 'background: '.$bg_clr : ''; ?>">
            <h4>Login For:</h4>
            <div class="options">
                <input type="hidden" class="user_role_id" name="user_role_id" value="" />
                <!--<a href="<?php echo base_url().'kiosk/index/bill'; ?>" class="btn open_amt" id="bill-btn">Billing Information</a>-->
                <a href="javascript:void(0);" class="bttn open_amt" id="bill-btn" data-url="<?php echo base_url().'kiosk/index/bill'; ?>">Billing Information</a>
                <a href="javascript:void(0);" class="bttn btn-primary open_amt" id="admin-btn" data-url="<?php echo base_url().'kiosk/index/admin'; ?>">Administration</a>
                <!--<a href="<?php echo base_url().'kiosk/index/admin'; ?>" class="btn btn-primary open_amt" id="admin-btn">Administration</a>-->
            </div>
        </div>
    </div>
</div>

<div class="dialog ksk-box-dialog opening_amt_dialog" id="ksk-bal-dialog">
    <div class="wrapper opening_amt_container">
        <div>
            <h1 style="text-align: center;">Opening Balance Details</h1>
        </div>
        <div class="main-info" style="<?php echo !empty( $bg_clr ) ? 'background: '.$bg_clr : ''; ?>">
            <form class="open_balance" name="open_balance">
                <h4>Amount:</h4>
                <div class="options">
                    <div class="form-group float-clear">
                        <input type="text" name="opening_amt" class="opening_amt float_value amount num-pad" style="height: 34px; padding-left: 10px; font-size: 16px;" />
                    </div><br/>
                    <div style="float:left; width:100%; margin-top:10px;">
                        <a href="javascript:void(0);" class="btn" id="open-submit-btn" style="width: 40% !important;">Submit</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
</div>