<?php
/*
 * Author       : Jai K
 * Purpose      : The View for Kiosk Home Page
 * Created On   : 2016-09-14 12:18
 */

$bg_clr = $settings_design['service_menu_color'];
$title = !empty($settings['app_title']) ? $settings['app_title'] : (!empty($settings['temple_name']) ? $settings['temple_name'] : 'Thiru');
?>
<html >
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title><?php echo $title . ' - Kiosk'; ?></title>
        <link rel="shortcut icon" href="<?php echo BASE_URL; ?>assets/images/favicon.ico">
        <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/common.css">
        <link rel="stylesheet" href="<?php echo BASE_URL; ?>assets/css/style.css">

<!--<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL . 'assets/css/'; ?>library/bootstrap.css" />-->
        <link rel="stylesheet" type="text/css" href="<?php echo BASE_URL . 'assets/css/'; ?>library/daterangepicker-bs3.css" />
        <link rel="stylesheet" type="text/css" href="<?php echo BASE_URL . 'assets/css/'; ?>library/datepicker3.css" />

<!--<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>assets/css/library/bootstrap-material-datetimepicker.css" />-->

        <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/js/library/moment-with-locales.min.js"></script>
        <script type="text/javascript" src="<?php echo BASE_URL; ?>assets/js/library/bootstrap-material-datetimepicker.js"></script>-->
        <script src="<?php echo base_url(); ?>assets/js/library/daterangepicker/daterangepicker.js" type="text/javascript"></script>
        <script src="<?php echo base_url(); ?>assets/js/library/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>

        <script type="text/javascript">
            var base_url = baseURL = '<?php echo base_url(); ?>';
            var controller = '<?php echo $controller; ?>';
            var method     = '<?php echo $this->uri->segments[2]; ?>';
            var pStatus    = '<?php echo $this->session->flashdata(REMOTE_ADDR . '_flag'); ?>'
            var userRole   = '<?php echo $users->role; ?>';
            var isNumpad   = <?php echo $user_data['numpad'] ? 'true' : 'false'; ?>;

            var minW = 230
                    , cBox = rBox = 1;

            var sW = screen.width;
            if (sW > 1280) { // 1280x720 (Each 640)
                var d = sW - 1280
                        , m = Math.ceil(d / 640);

                if (m > 0) {
                    minW += (m * 100);
                }
            }

            function setPlot() {
                var minH = minW // 150
                        , pW = $(window).width() - $('#side-bar').width()
                        , pH = $('#sidebar').height();//$(document).height();////screen.height;////$('#sidebar').height(); //screen.height-120;

                //minW = minH = ( Math.floor(pH/2) ) - 50;

                //$('#sidebar').css({'min-height' : pH})
                pW -= ($('#sidebar').width() + 20);

                cBox = Math.floor(pW / minW);

                rBox = Math.floor(pH / minH);
                //alert(cBox+', '+rBox);
                //alert(screen.height+' | '+pH+', '+minH);

                pW -= (cBox * 2);
                pH -= (rBox * 5)
                minW = pW / cBox;
                minH = pH / rBox;

                var styles = {
                    'width': minW + 'px',
                    'min-width': minW + 'px',
                    'min-height': minH + 'px',
                    //'display' : 'inline-block',
                }

                $('.blck').css(styles);
            }

            function setSlider() {
                var step = cBox * rBox
                        , blckLen = $('.blck').length;

                //alert(step+' | '+cBox+', '+rBox);
                if (blckLen > step) {
                    $('#plot').fadeOut();

                    var len = Math.ceil(blckLen / step)
                            , html = ''
                            , isRound = blckLen % step == 0 ? true : false;

                    //$('#plot').prepend(html);

                    //var $clone = $('#plot').clone(true);

                    $('#plot > div').each(function (i) {
                        html += $(this).html();
                        //alert((i+1)+', '+blckLen);
                        html += ((i + 1) % step == 0) ? (((i + 1) == blckLen) ? '</li>' : '</li><li>') : '';

                        /*if( (i+1) % step == 0 ) { // html += ( x % step == 0 ) ? ((x == len) ? '</li>' : '</li><li>') : '';
                         html += '</li><li>';
                         }*/
                    })
                    /*
                     
                     for( var i =1; i < len; i++ ) {
                     $('#plot .blck:eq('+(i*step)+')').after('</li><li>');
                     }
                     
                     $('#plot').append('</li></ul>').fadeIn('slow');*/

                    $('#plot').html('<ul class="bxslder"><li>' + html + '</li></ul>').fadeIn('slow');

                    var slider = $('.bxslder').bxSlider({
                        auto: false,
                        responsive: true,
                        mode: 'horizontal',
                        useCSS: false,
                        infiniteLoop: false,
                        hideControlOnEnd: true,
                        easing: 'swing', //'easeInQuart',//'easeOutElastic',
                        speed: 500,
                        pager: false,
                        //slideWidth: 150,
                    });
                }
            }

            function getSync() {
                var post_url = $('.sync_url').val();
                var request = $.ajax({
                    url: base_url + "general_settings/readHTML",
                    type: 'POST',
                    data: {post_url: post_url},
                    dataType: "html",
                    beforeSend: function () {
                        //alert('Progress');  
                        $('.sync_btn').attr('disabled','disabled');
                        $('.close_popup_report').hide();
                        $('.loadingContent').show();
                    },
                    success: function (data) {
                        //alert('Success');            
                        console.log(data);
                    },
                    complete: function () {
                       // alert('Synchronos Completed');
                        $('.sync_btn').removeAttr('disabled');
                        $('.close_popup_report').show();
                        $('.loadingComplete').show();
                        $('.loadingContent').hide();
                    },
                    error: function () {
                        alert('Error');
                    },
                });
            }

            $(document).on('ready', function () {
                setPlot();

                // $('#plot').fadeIn();
                setSlider();

                /*  $('.adminKiosk').click(function() {
                 if(userRole == 1) {
                 msgBox('No Access for this User!','','info');
                 }
                 }); */
                var d = new Date();
                $('.dailyReport').click(function () {
                    dialog($('#daily-dialog'));
                    $('#daily-dialog .lang-switch-btn').remove();
                });

                $('.prasadamReport').click(function () {
                    dialog($('#prasadam-dialog'));
                    $('#prasadam-dialog .lang-switch-btn').remove();
                });

                $('.kattalaiReport').click(function () {
                    dialog($('#kattalai-dialog'));
                    $('#kattalai-dialog .lang-switch-btn').remove();
                });
                $('button[data-loading-text]').on('click', function () {
                    $('.loadingComplete').hide();
                    var btn = $(this);
                    getSync();
                });

                /* $('.date').bootstrapMaterialDatePicker({ 
                 time: false, 
                 format: 'DD-MM-YYYY'
                 }). on('change', function(e, date) {
                 
                 }); */

                $('.date').datepicker({
                    format: 'dd-mm-yyyy',
                    autoclose: true,
                    todayHighlight: true,
                    startView: 0
                });

                //if($('input[name=type]:checked').val() == 1) {
                var form_action = "<?php echo base_url(); ?>prasadam_report/index/kiosk"
                /* } else { 
                 var form_action = "<?php echo base_url(); ?>madappalli_service_report/index/kiosk"
                 } */

                $('.prasadam-dialog form').attr('action', form_action);

                /* $('input[name=type]').click(function() {
                 if($(this).val() == 1) { */

                var form_action = "<?php echo base_url(); ?>prasadam_report/index/kiosk"
                /* } else { 
                 var form_action = "<?php echo base_url(); ?>madappalli_service_report/index/kiosk"
                 } */

                $('.prasadam-dialog form').attr('action', form_action);
                //});

                $('.close_popup_report').click(function () {
                    $('.loadingComplete').hide();
                    resetAll($('.dialog'));
                    $('.dialog').find('.date').val(((d.getDate() > 9) ? d.getDate() : '0' + d.getDate()) + '-' + (d.getMonth() + 1) + '-' + d.getFullYear());
                    $('.submit').val('Submit');
                    $('.print').val('Print');
                    $('.dialog').hide();
                });


            })

        </script>

        <style type="text/css">
            body { overflow: hidden; }

            .bxslider li { padding: 0px 10px !important;}

            .bx-wrapper .bx-controls-direction a { top: 37%  !important; margin-top: -20px  !important; width: 25px !important; height: 120px !important; }

            .single.bxslider .bx-wrapper .bx-controls-direction a{ top: 20%  !important;}

            .bx-wrapper .bx-next { right: 0px !important; background-position: -28px 10px  !important; }

            .bx-wrapper .bx-prev { left: 0px !important; background-position: 0px 10px  !important;}

            .bxslider .item { margin-left: 18px; }

            #plot { width: 90%; }

            #plot > div { display: inline-block; }

            .blck {
                min-width: 300px;
                min-height: 300px;
                width: 300px;
                display: inline-block;
                background: #eee;


            }

            #sidebar {
                min-width: 10%;
                background: <?php echo !empty( $bg_clr ) ? $bg_clr : '#36250e' ?>;
                height: 100%;
                float: right;

                max-width: 10%;
            }

            .blck  {
                text-align: center;
                min-width: 300px;
                min-height: 280px;
                width: 80%;
                height: 40%;
                background: #fff;
                line-height: 300px;
                margin: 10px auto;
                vertical-align: middle;
                border: 1px solid #fde500;

                margin-top: -5px;
            }
            .content_img img {float:left; width:100%; height:100%; background-size:cover; background-position:50% 50%;}
            .content_trans_bg {float:left; width:100%;text-align: center; height:259px; margin-top:-259px; background:linear-gradient(rgba(255,0,0,0), rgba(71,52,22,1));}

            .blck {background: <?php echo!empty($bg_clr) ? $bg_clr : '#3f5100'; ?>;}

            .content_txt_tm {float:left; width: 100%; text-align:center; font-family:amudham; color:#ded590; font-size:20px; padding:5px 0px 0px 0px;}
            .content_txt_eng {float:left; width: 100%; text-align:center; font-family:Verdana, Geneva, sans-serif; color:#ded590; font-size:20px; padding:4px 0px 10px 0px;}
            .content_rgt {float:right; width:120px; height:100%; background:#36250e; position:absolute; right:0;}
            .icon_div {float:left; width:60%; height:10%; border-bottom:1px solid #523c1d; padding:10% 20% 10% 20%;}

            .daily-report-dialog h3 { color: #068200; font-size: 21px; text-align: right; font-style: italic; }

            .daily-report-dialog #name { font-weight: bold; }

            .daily-report-dialog .main-info { padding: 10px; color: #999; border: 1px inset #eee; background: #3c2c17; margin-top: 25px; }

            .daily-report-dialog .main-info h4 { -webkit-text-fill-color: transparent; text-shadow: 0px 0px 0px #dbc497, 1px 3px 4px #000; }

            .daily-report-dialog .main-info .options { padding: 70px 10px; text-align: center;}

            .daily-report-dialog .main-info .options .btn{  width: 80px;  padding: 10px; background: -webkit-linear-gradient(#fdf5b5, #ecdaa7, #bc8322, #d9a73b); color: #000; /* box-shadow: 1px 1px 3px #999; */ text-decoration: none; cursor: pointer; margin: 10px auto; }

            .daily-report-dialog {opacity: 1; margin:5% auto auto; width:41%;}
            .dialog_form {display:block !important;}
            .dialog_bk_shadow { position:absolute; width:100%; min-width:100% !important; height:100%; top:0; background:rgba(0,0,0,0.8); z-index:1001; padding:0;}
            .datepicker.dropdown-menu {z-index:1001 !important;}

            @media screen and (max-width:960px) {.daily-report-dialog {width:50%;}}
            @media screen and (max-width:800px) {.daily-report-dialog {width:62%;}}
            @media screen and (max-width:640px) {.dialog .form-group label {width:100%; float:left; margin:15px 0px; font-size:16px !important;} .daily-report-dialog .wrapper {margin-top:0px;}}
            @media screen and (max-width:400px) {.daily-report-dialog {width:84%;}}
        </style>
    </head>
    <body style="overflow: none;">
        <div class="page_loader"></div>
        <div id="wrapper">

            <div id="sidebar">
                <div class="icon_div">
                    <a href="<?php echo base_url() . 'kiosk/logout/'; ?>" title="Logout"><span class="icon1"></span></a>
                </div> 

                <div class="icon_div adminKiosk">
                    <a href="<?php echo base_url() . ( $users->role != 1 ? 'kiosk/index/admin' : 'user/profile/' ); ?>" title="Administrator"><span class="icon2"></span></a>
                </div>

                <?php if (!empty($extra_permission['daily_report'][0])) : ?>
                    <div class="icon_div dailyReport">
                        <a href="javascript:void(0);" title="Daily Report"><span class="icon3"></span></a>
                    </div>
                <?php endif; ?>

                <?php if (!empty($extra_permission['prasadam_consolidate'][0])) : ?>
                    <div class="icon_div prasadamReport">
                        <a href="javascript:void(0);" title="Prasadam Consolidated Report"><span class="icon4"></span></a>
                    </div>
                <?php endif; ?>

                <?php if (!empty($extra_permission['day_end_report'][0])) : ?>
                    <div class="icon_div">
                        <a href="<?php echo base_url() . 'kiosk/day_end_report'; ?>" title="Day End Report"><span class="icon5"></span></a>
                    </div>
                <?php endif; ?>

                 <?php if (!empty($extra_permission['kattalai_archanai_report'][0])) : ?>
                    <div class="icon_div kattalaiReport">
                        <a href="javascript:void(0);" title="Kattalai Archanai Report"><span class="icon6"></span></a>
                    </div>
                <?php endif; ?>

                <?php #if( !empty( $extra_permission['notification'][0] ) ) :  ?>
                <!--<div class="icon_div">
                    <a href="#" title="Logout"><span class="icon8"></span></a>
                </div>-->
                <?php #endif; ?>

                <?php if (!empty($extra_permission['sms'][0])) : ?>
                    <div class="icon_div">
                        <a href="<?php echo base_url() . 'billing_sms/send/'; ?>"><span class="icon7"></span></a>
                    </div>
                <?php endif; ?>
            </div>

            <div id="plot">
                <?php
                if (!empty($services)) :
                    foreach ($services as $k => $service) :
                        if (empty($permission[$service['controller_name']])) :
                            // No permission
                            continue;
                        endif;

                        $img_url = DIR_SERVICE_IMAGE . $service['image'];
                        $img_url = !empty($service['image']) && file_exists($img_url) ? base_url() . $img_url : base_url() . 'assets/billing/images/ksk-placeholder.png';
                        ?>
                        <div>
                            <div class="blck"  id="ser-<?php echo $c; ?>">

                                <a href="<?php echo base_url() . $service['controller_name'] . '/add/' . $service['id']; ?>">
                                    <div class="content_img">
                                        <img src="<?php echo $img_url; ?>">
                                    </div>
                                    <div class="content_trans_bg"></div>
                                    <div style="float:left; line-height:20px; margin-top: -80px; width: 100%; text-align: center;">
                                        <span class="content_txt_tm"><?php echo $service['tamil_name']; ?></span>
                                        <span class="content_txt_eng"><?php echo $service['service_name']; ?></span>
                                    </div>
                                </a>

                            </div>
                        </div>
                        <?php
                    endforeach;
                else :
                    echo '<b style="color: #f33;">Sorry, No Services found!</b>';
                endif;
                ?>

            </div>


        </div>


        <div class="dialog dialog_bk_shadow" id="daily-dialog">
            <div class="dialog daily-report-dialog dialog_form" id="daily-dialog" style="position: relative;">
                <span class="close_popup_report" style="float: right; color: red; cursor: pointer;">X</span>
                <div class="wrapper">
                    <div>
                        <h3 style="text-align: center;">Daily Report</h3>
                    </div>
                    <div class="main-info" style="<?php echo!empty($bg_clr) ? 'background: ' . $bg_clr : ''; ?>;">
                        <form class="DailyReport" name="DailyReport" method="post" action="<?php echo base_url(); ?>daily_summary_report/index/kiosk">
                            <div class="options" style="padding: 90px 10px !important;">
                                <div class="form-group float-clear">
                                    <label style="font-size: 14px; color: #bd8423; -webkit-text-fill-color: transparent;text-shadow: 0px 0px 0px #dbc497, 1px 3px 4px #000; margin-right:16px;"><b>Date</b></label>
                                    <input type="text" class="date" name="search_date" style="min-width: 200px; max-width: 294px; width: 100%; height: 34px; padding-left: 10px; font-size: 13px;" value="<?php echo date('d-m-Y'); ?>" />
                                </div>
                                <div>
                                    <input type="submit" name="submit" value="Submit" class="submit btn" />
                                    <input type="submit" name="print" value="Print" class="print btn" />
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="dialog dialog_bk_shadow prasadam-dialog" id="prasadam-dialog">
            <div class="dialog daily-report-dialog dialog_form" id="prasadam-dialog" style="position: relative;">
                <span class="close_popup_report" style="float: right; color: red; cursor: pointer;">X</span>
                <div class="wrapper" style="margin: 0px !important;">
                    <div>
                        <!--<h3 style="text-align: center;">Prasadam / Madappalli Report</h3>-->
                        <h3 style="text-align: center;">Prasadam Consolidated Report</h3>
                    </div>
                    <div class="main-info" style="<?php echo!empty($bg_clr) ? 'background: ' . $bg_clr : ''; ?>;">
                        <form class="PrasadamReport" name="prasadamReport" method="post">

                            <div class="options">

                                <!-- <div class="form-group float-clear" style="float:none; margin:0 auto; width:68%;">
                                <?php if (!empty($report_permission['prasadam_report'][0])) : ?>
                                                 <label style="font-size: 13px; -webkit-text-fill-color: transparent;text-shadow: 0px 0px 0px #dbc497, 1px 3px 4px #000; margin-right:16px;">
                                                     <input type="radio" name="type" value="1" checked />
                                                     <span><b>Prasadam</b></span>
                                                 </label>
                                <?php endif; ?>
                                     
                                <?php if (!empty($report_permission['madappalli_service_report'][0])) : ?>
                                    <?php $checked = (!empty($report_permission['prasadam_report'][0])) ? '' : 'checked'; ?>
                                                 <label style="font-size: 13px; -webkit-text-fill-color: transparent;text-shadow: 0px 0px 0px #dbc497, 1px 3px 4px #000;">
                                                     <input type="radio" name="type" value="2" <?php echo $checked; ?> />
                                                     <span><b>Madappalli</b></span>
                                                 </label>
                                <?php endif; ?>
                                 </div>-->
                                <div class="form-group float-clear">
                                    <label style="font-size: 14px; color: #bd8423; -webkit-text-fill-color: transparent;text-shadow: 0px 0px 0px #dbc497, 1px 3px 4px #000; margin-right:16px;"><b>Date</b></label>
                                    <input type="text" class="date" name="start_date" style="min-width: 200px; max-width: 294px; width: 100%; height: 34px; padding-left: 10px; font-size: 13px;" value="<?php echo date('d-m-Y'); ?>" />
                                </div>

                                <div class="form-group float-clear">
                                    <label style="font-size: 14px; color: #bd8423; -webkit-text-fill-color: transparent;text-shadow: 0px 0px 0px #dbc497, 1px 3px 4px #000; margin-right:7px;"><b>Period</b></label>
                                    <select name="period" style="min-width: 200px; max-width: 294px; width: 100%; height: 34px; padding-left: 10px; font-size: 13px;">
                                        <option value="1" selected>Morning</option>
                                        <option value="2">Evening</option>
                                    </select>
                                </div>

                                <input type="hidden" class="sync_url" name="sync_url" value="<?php echo $settings_general->sync_url; ?>" />
                                <div style="margin-left: 30px;">
                                    <!--<input type="submit" name="submit" value="Submit" class="submit btn" />-->                                    
                                    <input type="submit" name="print" value="Print" class="print btn" />
                                    <button type="button" class="sync_btn btn" data-loading-text="Loading...">Sync</button>
                                </div>
                                <div class="loadingContent" style="display:none;color:#FFF;">Sync operation in progress.please wait...</div>
                                <div class="loadingComplete" style="display:none;color:#FFF;">Sync operation completed successfully.</div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="dialog dialog_bk_shadow" id="kattalai-dialog">
            <div class="dialog daily-report-dialog dialog_form" id="kattalai-dialog" style="position: relative;">
                <span class="close_popup_report" style="float: right; color: red; cursor: pointer;">X</span>
                <div class="wrapper">
                    <div>
                        <h3 style="text-align: center;">Kattalai Archanai Report</h3>
                    </div>
                    <div class="main-info" style="<?php echo!empty($bg_clr) ? 'background: ' . $bg_clr : ''; ?>;">
                        <form class="DailyReport" name="DailyReport" method="post" action="<?php echo base_url(); ?>kattalai_archanai_report/index/kiosk">
                            <div class="options" style="padding: 90px 10px !important;">
                                <div class="form-group float-clear">
                                    <label style="font-size: 14px; color: #bd8423; -webkit-text-fill-color: transparent;text-shadow: 0px 0px 0px #dbc497, 1px 3px 4px #000; margin-right:16px;"><b>Date</b></label>
                                    <input type="text" class="date" name="start_date" style="min-width: 200px; max-width: 294px; width: 100%; height: 34px; padding-left: 10px; font-size: 13px;" value="<?php echo date('d-m-Y'); ?>" />
                                </div>
                                <div>
                                    <input type="submit" name="submit" value="Submit" class="submit btn" />
                                    <input type="submit" name="print" value="Print" class="print btn" />
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        <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/js/default.js"></script>
    </body>
</html>    

<!-- -->