<?php

/* 
 * Author       : Jai K
 * Purpose      : The add page for Archanai Billing
 * Created On   : 2016-08-22 12:24    
 */
?>
<script type="text/javascript">var catImgDir = '<?php echo DIR_CATEGORY_IMAGE; ?>'; var itemImgDir = '<?php echo DIR_ITEM_IMAGE; ?>';</script>

<link rel="stylesheet" href="<?php echo BASE_URL; ?>assets/billing/css/jquery.bxslider.css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/speech-input.css">
<link rel="stylesheet" href="<?php echo BASE_URL; ?>assets/billing/css/jquery.bxslider.css"/>
<style type="text/css">
    body {
        overflow: hidden;
    }
    
    .bx-wrapper .bx-controls-direction a {
        z-index: 99;
    }
    
    .content_right {float:left; width:23%; background:rgba(210,222,236,0.5); padding:0.5% 1%; position:relative;}
    .input_set {float:left; width:100%; margin-top:6px;}
    .input_name {height: 18px; float:left; width:94%; background:url(<?php echo BASE_URL; ?>assets/billing/images/keypad.png) top 8px right 10px no-repeat #FFF; padding:8px 7px; font-size:14px; border:none;}
    .input_star {height: 36px; float:left; width:99%; background:url(<?php echo BASE_URL; ?>assets/billing/images/star.png) top 8px right 24px no-repeat #FFF; padding:8px 7px; font-size:14px; border:none; margin-top:4px;}
    .amt_content_div {float:left; width:100%; margin-top:10px;} /*background:#bcfdb9;*/
    .amt_content {float:left; width:100%; height:100%; overflow-y:scroll;}
	
	
	.modal-dialog {margin:0 auto !important;}
	.dialog {padding-left:0px;}
	.dialog .form-group{padding:10px 25px 10px 10px;}
	.dialog .form-group .input {width:99%;}
	#pay-preview {width:86px; height:41px;}
	/* For Responsive Style */
	@media screen and (max-width:991px) {
	#ptypes-dialog {padding-left:0px !important;}
	.pay-box {width:100% !important;}
	.dialog .col-xs-3 {width:50%;}
	.dialog .col-xs-6 {width:100%;}
	#pay-amounts-box {padding-left:0px !important;}
	.form_row {width:100%; padding:10px 0px !important;}
	.form_row label, input {width:98% !important;}
	.form_row_ptype {width: 86%;}
	}
	@media screen and (max-width:540px) {
		.form_row label, input {width:90% !important;}
		.dialog .col-xs-3 {width:95%;}
	}
	@media screen and (max-width:540px) {
	.dialog .ctrls {float:left;width:100%;}
	}
        
        #gods-dialog .main-wrapper {
            margin: 5% 2%;
            background: #fff;
            width: 95%;
            padding: 30px 0px;
            text-align: center;
            max-height: 380px;
            overflow: auto;
        }
        
        #gods-dialog .cell {
            min-height: 100px;
            cursor: pointer;
            margin: 20px;
        }
        
        #gods-dialog .cell.active .lbl, #gods-dialog .cell.active .lbl > div:last-child input {
            background: #1ba;
            color: #fff;
        }
        
        #gods-dialog .cell .img {
            float: left;
            padding-top: 6px;
            /*width: 135px;
            height: 80px;*/
            width: 100px;
            height: 100px;
        }
        
        #gods-dialog .cell .img img{
            height: 100%;
            width: 100%;
        }

        #gods-dialog .cell .lbl {
            float: left;
            /*width: 60%;*/
            color: #999;
            min-height: 106px;
        }
        
        #gods-dialog .cell .lbl > div {
            margin: 5px 0px;
            padding: 10px 0px;
            
        }
        
        #gods-dialog .cell .lbl > div:last-child {
            border-top: 1px dotted #999;
            
        }
        
        #gods-dialog .cell .lbl > div:last-child input {
            text-align: center;
        }
        
        .event_icon.cat-ico img{
            border-radius: 0px 5px 5px 0px;
            /*box-shadow: 1px 3px 3px #333;*/
        }
        
        #plot .bxslider li {
            margin: 5px 0px;
        }
        
        #plot .bx-viewport {
            padding-bottom: 25px;
        }
     
        
        .naming {
            background: #f33;
            color: #fff !important;
        }
        
</style>
<?php $general_setting = get_general_setting();?>
<div id="main-content" class="fixed archanai">
<div class="container">
    <div class="content_left">
        
        <div class="dialog" id="gods-dialog">
            <div class="main-wrapper grid">
                
                <?php 
                    //for( $i = 0; $i < 30; $i++ ) :
                    foreach( $gods as $k => $god ) :
                        $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="cell" data-id="<?php echo $god['id']; ?>" style="min-width: 272px !important;">
                            <div>
                                <div class="img" style="padding: 3px;">
                                    <img src="<?php echo base_url() . $img_url; ?>" />
                                </div>
                                <div class="lbl">
                                    <div><?php echo $god['name']; ?></div>
                                    <div><?php echo tamil( $god['tamil_name'] ); ?></div>
                                </div>
                            </div>
                        </div>    
                        <?php
                    endforeach;
                    //endfor;
                ?>
            </div>    
            
            <div class="col-xs-12 ctrls">
                    <div class="bttn primary ok-btn"><i class="fa fa-check"></i> Ok</div>
            </div>
        </div> <!-- gods-dialog -->

        <?php if($general_setting->is_category == 1) { ?> 
            <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;
                        
                        //for( $i = 0; $i <= 9; $i++) :
                        foreach( $categories as $k => $cat ) :
                            $mod = ++$c % 5;
                            //$cls = $mod == 0 ?  'events_div_red' : ( $mod == 1 ?  'events_div_green' : ( $mod == 2 ?  'events_div_skyblue' : ( $mod == 3 ?  'events_div_green' : 'events_div_blue' ) ) );
                            
                            $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 $c % $step == 0 && ( $c == $total && !$is_round ) ? '</li><li>' : '';
                            //echo $c % $step == 0 ? (($i == 5) ? '</li>' : '</li><li>') : '';
                            echo $mod == 0 ? (($c == $total) ? '</li>' : '</li><li>') : ''; 
                        endforeach;

                        //endfor;

                    ?>
                    </li>
                </ul>    
            </div>
        
        <?php } ?>
        
        <?php $style = ($general_setting->is_category == 0) ? 'style="padding: 0% 1% !important;"' : '';?>
        <div class="content_left_bottom" <?php echo $style;?>>
            <div id="plot">
            <!--<h1 style="color:#' . rand(100,999) . '">Archanai Items</h1>-->
                <?php echo ($general_setting->is_category == 0) ? '' : '<h1></h1>';?>
                <div style="float: left; width: 100%; margin: 15px 0px;">
                    <?php if($general_setting->is_category == 0) { ?>
                        <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'];?>" 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 } ?>
                                            </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>') : '';?>
                                <?php } ?>
                            </li>
                        </ul>
                    <?php } ?>
                </div>
            </div>
        
            <div id="num-pad" >
                
                <?php  
                
                    for($i = 1; $i <= 9; $i++) :
                        ?>
                            <div class="num-cell" data-value="<?php echo $i; ?>">
                                <div class="add-btn"><?php echo $i; ?></div>
                            </div>
                        <?php
                    endfor;
                ?>
                <div class="num-cell" data-value="0"><div class="add-btn">0</div></div>
                <div id="num-ok-btn"><div style="border-bottom: 1px dotted #fff;">Ok</div><div></div></div>
            </div>
            
        </div>    
    </div>


    <div class="content_right">
        <div id="name-sec">
            <div class="input_set">
                <h2 style="display: none;">&nbsp;</h2>
                <input type="text" class="input-1 name input_name speech-input" id="i-1" placeholder="Name" value="" lang="ta">
                <input type="hidden" class="contact-no" id="devotee_contact" >
                <select class="input-2 input_star star" id="i-2">
                    <option value="">-- Star --</option>
                    <?php 
                        foreach($stars as $k => $star) :
                            ?>
                                <option value="<?php echo $star['id']; ?>"><?php echo $star['name'].' / '.$star['tamil_name']; ?></option>
                            <?php
                        endforeach;
                    ?>
                </select>
            </div>
            <div class="input_set">
                <h2 style="display: none;">&nbsp;</h2>
                <input type="text" class="input-3 name input_name speech-input" id="i-3" placeholder="Name" lang="ta">                <select class="input-4 input_star star" id="i-4">
                    <option value="">-- Star --</option>
                    <?php 
                        foreach($stars as $k => $star) :
                            ?>
                                <option value="<?php echo $star['id']; ?>"><?php echo $star['name'].' / '.$star['tamil_name']; ?></option>
                            <?php
                        endforeach;
                    ?>
                </select>
            </div>
            <?php /*
            <div class="input_set">
                <input type="text" class="input-5 name input_name" id="i-5" placeholder="Name">
                <select class="input-6 input_star" id="i-6">
                    <option value="">-- Star --</option>
                    <?php 
                        foreach($stars as $k => $star) :
                            ?>
                                <option value="<?php echo $star['id']; ?>"><?php echo $star['name'].' / '.$star['tamil_name']; ?></option>
                            <?php
                        endforeach;
                    ?>
                </select>
            </div> */ ?>
        </div>
        <div class="amt_content_div" id="amt-section">
            <div class="amt_content_hd_div">
                <span class="amt_dollor">$</span>
                <span class="amt_close"></span>
                <span class="amt_total" id="total-amt">0.00</span>
            </div>
            <div class="amt_content" id="amt-grid">
                  
            </div>
            <div class="bottom_icon_div">
                <span class="bottom_icon1 sbmt-btn tender-btn"><input type="button" value="Payment" /></span>
                <span class="bottom_icon2" id="payment-btn"><input type="button" value="Tender" /></span>
                
            </div>
        </div>
    </div>
</div>    
</div>    

    <div class="dialog" id="name-sec-dialog"></div>
    
    <div class="modal fade dialog" id="ptypes-dialog" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                    <div class="modal-body col-xs-12">
                        <div class="err-blck" style="margin-top: -20px;"></div>
                        <div class="row" id="pay-amounts-box">
    
                            <div class="col-xs-6">                                    
                                <div class="form-group float-clear form_row">
                                    <label>Amount To Pay</label>
                                    <input type="text" class="form-control input readonly" id="to-pay" name="pay_amount" placeholder="0.00" readonly value=""/>
                                </div>
                            </div>
    
                            <div class="col-xs-6">                                    
                                <div class="form-group float-clear form_row">
                                    <label>Now Paying</label>
                                    <input type="text" class="form-control input readonly" name="paid_amount" placeholder="0.00" readonly value=""/>
                                </div>
                            </div>
    
                        </div> 
                        
                        <div class="row" id="cheque-box" style="display: none;">
    
                            <div class="col-xs-4">                                    
                                <div class="form-group float-clear">
                                    <label>Bank Name</label>
                                    <input type="text" class="form-control input req ignore"  name="chq_bnk_name" placeholder="Bank Name" value=""/>
                                </div>
                            </div>
    
                            <div class="col-xs-4">                                    
                                <div class="form-group float-clear">
                                    <label>No</label>
                                    <input type="text" class="form-control input req ignore number"  name="chq_no" placeholder="No" value=""/>
                                </div>
                            </div>
                            
                            <div class="col-xs-4">                                    
                                <div class="form-group float-clear">
                                    <label>Date</label>
                                    <input type="text" class="form-control input date-picker req ignore"  name="chq_date" placeholder="dd/mm/YYYY" value="<?php echo date("d-m-Y"); ?>"/>
                                </div>
                            </div>
    
                        </div>

                        <div class="row" id="membership-card-box" style="display: none;">
                            <div class="col-xs-4">                                    
                                <div class="form-group float-clear">
                                    <label>Card No</label>
                                    <input type="text" class="form-control input"  name="card_no" placeholder="Card No" />
                                </div>
                            </div>
    
                            <div class="col-xs-4">                                    
                                <div class="form-group float-clear">
                                    <label>Card Name</label>
                                    <input type="text" class="form-control input"  name="card_name" placeholder="Card Name" readonly />
                                </div>
                            </div>
                            
                            <div class="col-xs-4">                                    
                                <div class="form-group float-clear">
                                    <label>Card Amount</label>
                                    <input type="text" class="form-control input"  name="card_amount" placeholder="Card Amount" readonly />
                                </div>
                            </div>
                            <input type="hidden" class="form-control"  name="mem_id" />
                        </div>                    
    
                        <div style="margin-top: 10px; padding: 20px 0px;">
                            <div class="row">
                                <?php
                                    $step = 4;
                                    foreach( $ptypes as $k => $ptype ) :

                                        echo '<div class="col-xs-'. floor( 12 / $step ) .'">';
                                        ?>
                                            <div class="form-group float-clear blck-content ptype-box form_row_ptype" id="ptype-box-<?php echo $ptype['slug']; ?>" style="margin: 10px 10px;">
                                                <div class="pay-box">
                                                    <?php if( !empty( $ptype['img_url'] ) && file_exists( DIR_PAY_TYPE . $ptype['img_url'] ) ) : ?><div id="pay-preview"><img src="<?php echo BASE_URL . DIR_PAY_TYPE . $ptype['img_url']; ?>" /></div><?php endif; ?>
                                                    <label><?php echo $ptype['name']; ?></label>
                                                </div>
                                                <input type="text" class="input pay-type" data-id="<?php echo $ptype['id']; ?>" name="pay_type[<?php echo $ptype['id']; ?>]" value="<?php echo $payments_arr[$ptype['id']]['pay_amount']; ?>"/>
                                            </div>
                                        <?php
                                        echo '</div>';

                                        if( ($k+1) % $step == 0 ) :
                                            echo '</div><div class="row">';
                                        endif;

                                    endforeach;
                                ?>
                            </div>
                        </div>


                    </div>

                    <div class="modal-footer" style="padding-right: 30px;">
                        <div class="ctrls draggable">
                            <button type="button" class="bttn btn-primary cancel_popup" id="sbmt-cancel-btn" data-dismiss="modal"><i class="fa fa-chevron-left"></i> Go Back</button>
                            <button type="submit" id="sbmt-btn" class="bttn primary btn-danger sbmt-btn" name="submit" value="Submit" ><i class="fa fa-floppy-o"></i> Submit</button>
                        </div>
                    </div>


            </div>   <!-- Modal Content -->     
        </div> 
    </div> <!-- Payment Types Dialog -->
    
<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">
    
    $(document).on('ready', function(){
        var wH = $(window).height()
        ,   aH = wH-230;
        
        $('#amt-section').css({'min-height': (aH)+'px'});
        
        $('#amt-grid').css({'max-height': (aH-($('#amt-section .bottom_icon_div').height()+65))+'px'});
        
        
    })

</script>