<?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" type="text/css" href="https://a.kabachnik.info/assets/js/jQuery.NumPad/jquery.numpad.css">
<!-- <link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>assets/css/library/bootstrap.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/css/speech-input.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:86%; background:url(<?php echo BASE_URL; ?>assets/billing/images/keypad.png) top 8px right 8px no-repeat #FFF; padding-right:10%; font-size:20px; 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;min-height: calc(100vh - 300px);} /*background:#bcfdb9;*/

    .amt_content {float:left; width:100%; height:100%; max-height: calc(100vh - 428px); overflow-y:auto;}

	

	

	.modal-dialog {margin:0 auto !important;}

	.dialog {padding-left:0px;}

	.dialog .form-group{padding:10px 20px 10px 20px;}
	
	#remaining-dialog .form-group {
		width: calc( 100% - 60px ) !important;
	}

	.dialog .form-group .input {width: calc( 100% - 20px );}

	#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: 15px;

        }

     

        

        .naming {

            background: #f33;

            color: #fff !important;

        }


        /*keyboard*/
.nmpd-wrapper .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .nmpd-wrapper .table>tfoot>tr>td {
  border-top: none !important; 
}
td .nmpd-display{font-size: 20px;border-radius: 3px !important;height: 40px; }
.nmpd-wrapper table {
  border-spacing: 0;
  border-collapse: inherit;
}
.nmpd-wrapper td .btn {           
  padding: 12px 22px;
  font-size: 20px;
  font-weight: 600 !important;
}
.nmpd-wrapper td .btn-primary {
  font-size: 20px;
  padding: 12px 0;
}    
.nmpd-wrapper button.btn.sep{color:#666;}   

.nmpd-wrapper button.btn.del, .nmpd-wrapper button.btn.clear, .nmpd-wrapper button.btn.cancel {
  background: rgba(245, 132, 0,0.9);
  color: #fff;
}    
.nmpd-wrapper button.btn.neg{color:transparent;cursor: not-allowed;}   
.nmpd-wrapper button.btn.neg:hover{color:transparent !important;}
.ui-keyboard-preview-wrapper input {
  width: 100%;
  min-width: 100%;
  max-width: 100%;

  padding: 30px 20px;

  border-radius: 6px !important;
}
.ui-state-default, .ui-widget-content .ui-state-default {
  background: lightgray; 
  font-weight: 400; 
  color: #525252;
}
.ui-state-active, .ui-widget-content .ui-state-active{
  border: 1px solid #ffaf0f;
  background: #f58400 url(images/ui-bg_inset-soft_30_f58400_1x100.png) 50% 50% repeat-x;
  font-weight: bold;
  color: #fff;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-size: 1.8em;
}
.ui-widget-content {
  color: #3a3a3a;
}
.ui-widget-content {
  background: #ffffff;
}
@media screen and (min-width:1024px) {
  .ui-keyboard{    
    top: 15% !important;
    left: 15% !important;
  }
} 




        .balancewrapper {
        width: 600px;
        margin: 0 auto;
      }
      .balancecontainer .formcontainer {
/*        width: calc(100% - 22px);
        width: 100%;*/
        background: #ccc;
        border: 1px solid #999;
        border-radius: 3px;
        padding: 10px;
        display: flex;
        margin-bottom: 15px;
      }
      .balancecontainer .formcontainer .col6left {
        width: 130px;
        float: left;
        display: inline-flex;
      }
      .balancecontainer .formcontainer .col6right {
        width: calc(100% - 130px);
        float: left;
        display: inline-flex;
      }
      .balancecontainer .formcontainer .col6left label {
        width: 100%;
        font-weight: bold;
        font-size: 16px;
        padding: 10px;
        margin: 0;
      }
      .balancecontainer .formcontainer .col6right input {
        width: 100%;
        font-weight: bold;
        font-size: 16px;
        padding: 10px;
        margin: 0;
        border: 1px solid #454545;
      }
      .balancecontainer .amtbtncontainer {
        /*width: calc(100% - 20px);*/
        width: 100%;
        padding: 5px 0px 0px 0px;
        display: flex;
        margin-bottom: 15px;
      }
      .balancecontainer .amtbtncontainer .btnwrap {
        /*width: calc(33.333333% - 20px);*/
        width: 100%;
        padding: 0px 10px;
        display: inline-flex;
      }
      .balancecontainer .amtbtncontainer .btnwrap .btn {
        width: calc(100% - 2px);
        background: #2d9961;
        border: 2px solid #b9d6c3;
        border-radius: 6px;
        padding: 10px;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        outline: none;
      }
      .balancecontainer .formcontainer.balancebg {
        background: #ccc;
      }
      .balancecontainer .formcontainer .col6left label.balanceamts {
        font-weight: bold;
        font-size: 20px;
    color: red;
    padding: 10px 0px 0px 10px !important;
      }
      input.balanceinput {
    font-size: 26px !important;
    color: red;
    padding: 3px 10px !important;
}
input.balanceinput::placeholder {
    font-size: 26px !important;
    color: red;
    padding: 3px 10px !important;
}

      #remaining-dialog {
    top: 0;
    margin: 0;
    padding: 0;
}
#remaining-dialog .modal-dialog {
    padding: 0;
    margin-top: 150px !important;
    width: 80%;
}
#remaining-dialog .modal-body {
    padding-bottom: 0;
}
#remaining-dialog .row {
    margin: 20px 0px;
    float: none !important;
}

#ptypes-dialog {
    top: 0;
    margin: 0;
    padding: 0;
}
#ptypes-dialog .modal-dialog {
    padding: 0;
    margin-top: 150px !important;
    width: 80%;
}
#ptypes-dialog .modal-body {
    padding-bottom: 0;
}
#ptypes-dialog .row {
    margin: 20px 0px;
    float: none !important;
    clear: both;
}
#ptypes-dialog .modal-body {
    padding-bottom: 0;
	width: calc( 100% - 30px );
    float: none;
    height: auto;
    clear: both;
}
#ptypes-dialog .form-group {
    width: calc( 100% - 41px );
}
#ptypes-dialog .form-group .input {
    width: calc( 100% - 24px );
}
.nmpd-wrapper table td {
    padding: 8px;
}
.nmpd-wrapper table td .form-control {
    display: block;
    min-width: 200px;
    max-width: 300px;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
#remaining-dialog .btn, .nmpd-wrapper table td .btn{
    display: inline-block;
    margin-bottom: 0;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    outline: none;
}

.nmpd-wrapper table td .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    outline: none;
}
.nmpd-wrapper table td .btn-default:hover, .nmpd-wrapper table td .btn-default:focus, .nmpd-wrapper table td .btn-default:active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
    outline: none;
}
/*------------MODEL------------------*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}
[role="button"] {
  cursor: pointer;
}
.modal-open {
  overflow: hidden;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #ffffff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  outline: 0;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  background-color: #000000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: 0.5;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
.clearfix:before,
.clearfix:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}
.clearfix:after,
.modal-header:after,
.modal-footer:after {
  clear: both;
}
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.hidden {
  display: none !important;
}
.affix {
  position: fixed;
}



</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 < 25 ? $len : 25;
                                    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>
                <input type="hidden" name="cart_name" id="cart_name" value="0"/>
                <input type="hidden" name="daydevval" id="daydevval" value=""/>
                <input type="hidden" name="daydevref_id" id="daydevref_id" value="0"/>
                <input type="hidden" name="daydevset" id="daydevset" value="0"/>
                <input type="hidden" name="daydevname" id="daydevname" value=""/>
                <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" 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" 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>

           

            <div class="input_set">

                <input type="text" class="input-5 name input_name" id="i-5" placeholder="Name">

                <select class="input-6 input_star 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_icon3" id="balance-btn"><input type="button" value="" title="Remaining Amount" /></span>

                <span class="bottom_icon2" id="payment-btn"><input type="button" value="" title="Tender" /></span>

                <span class="bottom_icon1 sbmt-btn tender-btn"><input type="button" value="" title="Payment" /></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 -->
    
    <div class="modal fade dialog" id="remaining-dialog" role="dialog"><!-- Remaining Balance Dialog Starts -->
        <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 style="margin-top: 10px; padding: 0px;">
                        <div class="row" style="">
                            <!--<?php
                                $step = 3;
                                foreach( $ptypes as $k => $ptype ) :
									if($k == 0){
										 echo '<div class="col-xs-3">';
                                    ?>
    
                                        <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>';
									}
                                endforeach;
                            ?>-->
                            
                            <!-- <div class="col-xs-3">
                            	<div class="form-group float-clear blck-content" style="margin: 10px 10px;">    
                                    <div style="height: 60px;">
                                        <label>Receiving Amount</label><br />
                                    </div>

                                    <input type="text" class="input" name="received_amt" id="received_amt" placeholder="0.00"/>

                                </div>
                            </div>
                            
                            <div class="col-xs-3">
                            	<div class="form-group float-clear blck-content" style="margin: 10px 10px;">    
                                    <div style="height: 60px;">
                                        <label>Balance Amount</label><br />
                                    </div>

                                    <input type="text" class="input" name="balance_amt" id="balance_amt" placeholder="0.00"/>

                                </div>
                            </div> -->

                            <div class="balancewrapper">
                            <div class="balancecontainer">
                              <div class="formcontainer">
                                <div class="col6left">
                                  <label>Total :</label>
                                </div>
                                <div class="col6right">
                                  <input type="text" class="input pay-type" data-id="1"  name="pay_type[1]" id="total_amt" value="<?php echo $payments_arr[1]['pay_amount']; ?>" readonly>                                  
                                </div>
                              </div>
                              <div class="formcontainer">
                                <div class="col6left">
                                  <label>Received :</label>
                                </div>
                                <div class="col6right">
                                  <input type="text" class="input num-pad" name="received_amt" id="received_amt" placeholder="0.00">
                                </div>
                              </div>
                              <div class="formcontainer balancebg">
                                <div class="col6left">
                                  <label class="balanceamts">Balance :</label>
                                </div>
                                <div class="col6right">
                                  <input type="text" class="input balanceinput" name="balance_amt" id="balance_amt" placeholder="0.00" readonly>
                                </div>
                              </div>
                              <div class="amtbtncontainer">
                                <div class="btnwrap">
                                  <input type="submit" value="$1" class="btn" id="doll1" />
                                </div>
                                <div class="btnwrap">
                                  <input type="submit" value="$2" class="btn" id="doll2" />
                                </div>
                                <div class="btnwrap">
                                  <input type="submit" value="$5" class="btn" id="doll5" />
                                </div>
                              </div>
                              <div class="amtbtncontainer">
                                <div class="btnwrap">
                                  <input type="submit" value="$10" class="btn" id="doll10" />
                                </div>
                                <div class="btnwrap">
                                  <input type="submit" value="$50" class="btn" id="doll50" />
                                </div>
                                <div class="btnwrap">
                                  <input type="submit" value="$100" class="btn" id="doll100" />
                                </div>
                              </div>
                            </div>
                            </div>

                        </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-bal" data-dismiss="modal"><i class="fa fa-chevron-left"></i> Go Back</button>
                        <button type="submit" id="sbmt-btn" class="bttn primary btn-danger balance-btn-sub sbmt-btn" name="submit" value="Submit" ><i class="fa fa-floppy-o"></i> Submit</button>
                    </div>
                </div>
            </div>   <!-- Modal Content --> 
        </div> 
    </div> <!-- Remaining Balance Dialog Ends -->

    
    
    <!-- <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" src="<?php echo base_url(); ?>assets/js/speech-input.js"></script>-->

<script type="text/javascript" src="<?php echo BASE_URL; ?>assets/js/library/bootstrap-dialog.min.js"></script>
<script type="text/javascript" src="https://a.kabachnik.info/assets/js/jQuery.NumPad/jquery.numpad.js"></script>

        <script type="text/javascript">

        // Set NumPad defaults for jQuery mobile. 
      // These defaults will be applied to all NumPads within this document!
      $.fn.numpad.defaults.gridTpl = '<table class="table modal-content"></table>';
      $.fn.numpad.defaults.backgroundTpl = '<div class="modal-backdrop in"></div>';
      $.fn.numpad.defaults.displayTpl = '<input type="text" class="form-control" />';
      $.fn.numpad.defaults.buttonNumberTpl =  '<button type="button" class="btn btn-default"></button>';
      $.fn.numpad.defaults.buttonFunctionTpl = '<button type="button" class="btn" style="width: 100%;"></button>';
      $.fn.numpad.defaults.onKeypadCreate = function(){$(this).find('.done').addClass('btn-primary');};
      //$.fn.numpad.defaults.onKeypadCreate = function(){$(this).enhanceWithin();};

      $(document).ready(function(){


      $('.num-pad').numpad({
        //target: $('#numpadButton'),
        decimalSeparator: '.'
      });

      
//        var term = $('#received_amt').val();
//        $('#doll1').click(function() {
//          alert($('term').val());
//        });
        
        $('#doll1').click(function(){ 
          $('#received_amt').val('1.00');
          sum();
        });
        
        $('#doll2').click(function(){ 
          $('#received_amt').val('2.00');
          sum();
        });
        
        $('#doll5').click(function(){ 
          $('#received_amt').val('5.00');
          sum();
        });
        
        $('#doll10').click(function(){ 
          $('#received_amt').val('10.00');
          sum();
        });
        
        $('#doll50').click(function(){ 
          $('#received_amt').val('50.00');
          sum();
        });
        
        $('#doll100').click(function(){ 
          $('#received_amt').val('100.00');
          sum();
        });
        
        //this calculates values automatically 
        
        $("#received_amt").on("change", function() {
          sum();
          
        });
        
        function sum() {
          //alert("here");
          var num1 = document.getElementById('total_amt').value;
          var num2 = document.getElementById('received_amt').value;
          //var result = parseInt(received_amt) + parseInt(total_amt);
          var result1 = parseFloat(num2) - parseFloat(num1);
          //console.log(num1+"  => "+num2+"  => "+result1);
          if (!isNaN(result1)) {
			$.ajax({
				url: base_url + 'billing_archanai/archanai_balance_amount',
				data: {receive_amt: parseFloat(num2).toFixed(2), balance_amt: result1.toFixed(2)},
				dataType: 'JSON',
				type: 'post',
				'global': false,
				'async': false,
				success: function (output) {
					//tmp = output;
				}
			});
            document.getElementById('balance_amt').value = result1.toFixed(2);
          }
        }
        
      });

    </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>
