<?php $design_setting = get_design_setting();?>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/billing/billing_membership_card.js"></script>
<style>
.keypad {
    float: left;
    width: 27%;
    height: 100%;
   /* background: -webkit-linear-gradient(#fdf5b5, #ecdaa7, #bc8322, #d9a73b);*/
   /*  background: #c8faf6; */
    border-radius: 5px;
    margin: 3%;
    cursor: pointer;
}
.keypad_txt {
    float: left;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    padding: 15px 0px;
    -webkit-text-stroke: 1px #e6dec7;
}
.keypad_div_row {
    float: left;
    width: 90%;
    margin: 0 5%;
}
.login_div_div {
    margin: auto; 
    display: inline-block;
    width: 70%;
    background-color: <?php echo $design_setting->login_page_color; ?>;
    border-radius: 20px 20px 20px 20px;
    padding: 20px;
}
</style>
<aside class="right-side">
    <section class="content-header">
        <div class="title_bar">
            <h1 class="major_txt_color"><a href="<?php echo base_url();?>billing_membership_card/index/12" class="list-btn"><i class="fa fa-list" title="Go to Listing"></i></a>Membership Card Topup</h1>
            <div class="breadcrumb_container"><?php echo breadcrumb_links();?></div>
        </div>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <form action="<?php echo $form_action;?>" method="post"  enctype="multipart/form-data" method="post" >
                    <input type="hidden" name="mem_id" class="mem_id" />
                    <input type="hidden" name="user_id" class="user_id" />
                    <input type="hidden" name="hidden_id" class="hidden_id" />
                    <!--<div class="box box-danger">
                        <div class="box-body table-responsive">
                            <?php if(!empty($success)) {?>
                                <div class="alert alert-success alert-dismissable">
                                    <i class="fa fa-thumbs-o-up"></i>
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                    <h4><?php echo $success;?></h4>
                                </div>
                            <?php }
                            else if(!empty($error)) {?>
                                <div class="alert alert-danger alert-dismissable">
                                    <i class="fa fa-thumbs-o-down"></i>
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                    <h4><?php echo $error;?></h4>
                                </div>
                            <?php }?>
                        </div>
                        <div class="box-body">
                            <ul class="error_container"></ul>
                            <div class="err-blck"></div>
                            <div class="col-xs-12">
                                <div class="col-md-7">&nbsp;</div>
                                <div class="col-md-5">
                                    <div class="form-group float-clear" style="text-align: right;">
                                        <button type="button" class="btn btn-success"><a href="<?php echo base_url();?>billing_membership_card/user_add/12" style="color: #fff;"><i class="fa fa-user" title="Go to User Creation" style="color: #fff;"></i> User Creation</a></button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-xs-12" style="margin-bottom: -2%; margin-top: -2%;">
                                <div class="col-md-4">&nbsp;</div>
                                <div class="col-md-4">                   
                                    <div class="form-group" style="text-align: center; color: #0B45B3 !important;"><h4>Topup</h4></div>
                                </div>
                                <div class="col-md-5">&nbsp;</div>
                            </div>
                            
                            
                            <div class="col-xs-12">
                                <div class="col-md-4">&nbsp;</div>
                                <div class="col-md-4">                   
                                    <div class="form-group" style="text-align: center; color: #0B45B3 !important;"><h4>Please Scan Your Card</h4></div>
                                </div>
                                <div class="col-md-5">&nbsp;</div>
                            </div>
                            
                            <div class="col-xs-12">
                                <div class="col-md-4">&nbsp;</div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <input type="text" class="form-control req" name="t_card_no" placeholder="Card No" data-err-msg="Card No" />
                                    </div>
                                </div>
                                <div class="col-md-5">&nbsp;</div>
                            </div>
                               
                            <div class="col-xs-12">
                                <div class="col-md-2">&nbsp;</div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <span class="first-coln">Card Holder Name</span>
                                        <span class="seperator">:</span>
                                        <span class="second-coln t_name"></span>
                                    </div>
                                </div>
                                <div class="col-md-4">&nbsp;</div>
                            </div>
                            
                            <div class="col-xs-12">
                                <div class="col-md-2">&nbsp;</div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <span class="first-coln">Balance Amount</span>
                                        <span class="seperator">:</span>
                                        <span class="second-coln t_balance_amount"></span>
                                    </div>
                                </div>
                                <div class="col-md-4">&nbsp;</div>
                            </div>
                            
                            <div class="col-xs-12">
                                <div class="col-md-2">&nbsp;</div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <span class="first-coln">Topup Amount</span>
                                        <span class="seperator">:</span>
                                        <span class="second-coln">
                                        <div class="input-group">
                                            <div class="input-group-addon">$</div>
                                            <input type="text" class="form-control req float_value amount num-pad" name="topup_amount" data-err-msg="Topup Amount" /></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">&nbsp;</div>
                            </div>
                            
                            <div class="col-xs-12">
                                <div class="col-md-2">&nbsp;</div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <span class="first-coln">Password</span>
                                        <span class="seperator">:</span>
                                        <span class="second-coln"><input type="password" class="form-control req" name="password" data-err-msg="Password" /></span>
                                    </div>
                                </div>
                                <div class="col-md-4">&nbsp;</div>
                            </div>
                        </div>
                        
                        <div class="box-footer form-actions float-clear" style="text-align: right; padding-right: 30px;">
                            <button class="btn btn-primary" type="reset" id="clrbtn"><i class="fa fa-trash"></i> Clear</button>
                            <button type="button" class="btn btn-danger" id="payment-btn" disabled><i class="fa fa-credit-card"></i> Payment</button>
                        </div>
                    </div>--><!-- /.box -->
                    
                    <div class="box box-danger">
                        <div class="box-body">
                            <?php if( !empty( $success ) || !empty( $error ) ) : ?>
                                <div class="alert alert-<?php echo !empty( $success ) ? 'success' : 'danger'; ?> alert-dismissable">
                                    <i class="fa fa-thumbs-o-<?php echo !empty( $success ) ? 'up' : 'down'; ?>"></i>
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                    <h4><?php echo !empty( $success ) ? $success : $error; ?></h4>
                                </div>
                            <?php endif; ?>
                            
                            <ul class="error_container"></ul>
                            <div class="col-xs-12">
                                <div class="col-md-6">&nbsp;</div>
                                
                                <div class="col-md-6">
                                    <div class="form-group float-clear" style="text-align: right;">
                                        <button type="button" class="btn btn-success"><a href="<?php echo base_url();?>billing_membership_card/user_add/12" style="color: #fff;"><i class="fa fa-user" title="Go to User Creation" style="color: #fff;"></i> User Creation</a></button>
                                    </div>
                                </div>
                            </div>    
                                    
                            <div class="col-xs-12 blck">
                                <div class="sub-title" ><h4><i class="fa fa-fire" style="font-size: 14px;"></i> Topup</h4><i class="ctrl opener opened fa fa-chevron-up" style="float: right; margin-top: -25px;"></i></div>
                                <div class="blck-content col-xs-12">
                                    <div class="col-md-6">
                                        <div class="form-group float-clear">
                                            <label>Card No<span class="required">*</span></label>
                                            <input type="text" class="form-control req t_card_no" name="t_card_no" placeholder="Card No" data-err-msg="Card No" />
                                        </div>
                                        <div class="form-group">
                                            <label>Card Holder Name</label>
                                            <input type="text" class="form-control t_name readonly" name="t_name" placeholder="Card Holder Name" readonly />
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>Balance Amount</label>
                                            <input type="text" class="form-control t_balance_amount readonly" name="t_balance_amount" placeholder="0.00" readonly />
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>Topup Amount<span class="required">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-addon">$</div>
                                                <input type="text" class="form-control req float_value amount num-pad" name="topup_amount" data-err-msg="Topup Amount" /></span>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>Password<span class="required">*</span></label>
                                            <input type="password" class="form-control req" name="password" data-err-msg="Password" /></span>
                                        </div>
                                        
                                    </div>
									
                                    <div class="col-md-6">
                                        <div class="login_div_div">
                                            <div><h4 style="text-align: center; color: #CB952F;">Topup Amount</h4></div>
                                            <div class="keypad_div_row">
                                                <div class="keypad cell memCard" style="background:-webkit-linear-gradient(#fdf5b5, #ecdaa7, #bc8322, #d9a73b);">
                                                    <span class="keypad_txt card_val" data-value="10">$ 10</span>
                                                </div>
                                                <div class="keypad cell memCard" style="background: -webkit-linear-gradient(#fdf5b5, #ecdaa7, #bc8322, #d9a73b);">
                                                    <span class="keypad_txt card_val" data-value="20">$ 20</span>
                                                </div>
                                                <div class="keypad cell memCard" style="background: -webkit-linear-gradient(#fdf5b5, #ecdaa7, #bc8322, #d9a73b);">
                                                    <span class="keypad_txt card_val" data-value="30">$ 30</span>
                                                </div>
                                            </div>
                                            <div class="keypad_div_row memCard" style="margin-left: 20%;">
                                                <div class="keypad cell" style="background: -webkit-linear-gradient(#fdf5b5, #ecdaa7, #bc8322, #d9a73b);">
                                                    <span class="keypad_txt card_val" data-value="50">$ 50</span>
                                                </div>
                                                <div class="keypad cell memCard" style="background: -webkit-linear-gradient(#fdf5b5, #ecdaa7, #bc8322, #d9a73b);">
                                                    <span class="keypad_txt card_val" data-value="100">$ 100</span>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div> <!-- blck-content -->    
                            </div> <!-- blck -->
                        </div>
                        
                        
                        <div class="box-footer form-actions float-clear" style="text-align: right; padding-right: 30px;">
                            <button class="btn btn-primary" type="reset" id="clrbtn"><i class="fa fa-trash"></i> Clear</button>
                            <button type="button" class="btn btn-danger" id="payment-btn" disabled><i class="fa fa-credit-card"></i> Payment</button>
                        </div>
                    </div><!-- /.box -->
                    
                    <!-- Payment types Modal -->
                    <div class="modal fade mem_topup" id="ptypes-dialog" role="dialog">
                        <div class="modal-dialog">
                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header" style="background-color: #337AB7;">
                                    <h4 class="modal-title" style="color: #FFF;">Payment Details</h4>
                                </div>
                                <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-md-6">                                    
                                            <div class="form-group float-clear">
                                                <label>Amount To Pay</label>
                                                <input type="text" class="form-control readonly" name="pay_amount" placeholder="0.00" readonly />
                                            </div>
                                        </div>

                                        <div class="col-md-6">                                    
                                            <div class="form-group float-clear">
                                                <label>Now Paying</label>
                                                <input type="text" class="form-control readonly" name="paid_amount" placeholder="0.00" value="" readonly />
                                            </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"  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"  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"  name="chq_date" placeholder="dd/mm/YYYY" value="<?php echo date('d-m-Y');?>"/>
                                            </div>
                                        </div>
                
                                    </div> 
                                    
                                    <div style="margin-top: 10px; border-top: 1px dotted #1ba; padding: 20px 0px;">
                                        <div class="row">
                                            <?php
                                                $step = 4;
                                                foreach( $payments as $k => $ptype ) :

                                                    echo '<div class="col-md-'. floor( 12 / $step ) .'">';
                                                    ?>
                                                        <div class="form-group float-clear blck-content ptype-box" 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 amount num-pad" data-id="<?php echo $ptype->id; ?>" name="pay_type[<?php echo $ptype->id; ?>]" value="" />
                                                        </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;">
                                    <button type="button" class="btn 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="btn btn-danger" name="submit" value="Submit" ><i class="fa fa-floppy-o"></i> Submit</button>
                                </div>
                            </div>   <!-- Modal Content -->     
                        </div> 
                    </div> <!-- Payment Types Dialog -->
                    
                </form>
            </div><!-- /.col-xs-12 -->
        </div><!-- /.row -->
    <!-- End Modal -->
    </section><!-- /.content -->
</aside>