          <style>
    .required{
        color: #bf5050;
    }
    
</style>
        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3></h3>
                </div>
            </div>
            <div class="clearfix"></div>

            <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Add Branch</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">

                    <form id="routePermit" class="form-horizontal form-label-left" action="<?php echo $base_url; ?>branch/save" method="post" enctype="multipart/form-data">
                      
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Branch Logo <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="b_logo" type="file" name="b_logo" class="form-control col-md-7 col-xs-12" required="required">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="Branch Name" required="required" type="text">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="address">Address <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <textarea id="address" class="form-control col-md-7 col-xs-12" name="address" required="required"></textarea>
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="b_head">Branch Head Name<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="b_head" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="b_head" placeholder="Branch Head" required="required" type="text">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="contact">Branch Head Contact1 <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" id="contact" name="contact" class="form-control col-md-7 col-xs-12 phone" maxlength="13" type="text" placeholder="+92XXXXXXXXXX" pattern="[\+]\d{2}\d{4}\d{6}" title="Phone No. Format: +92XXXXXXXXXX" required>
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="b_h_contact">Branch Head Contact2 <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text" id="b_h_contact" name="b_h_contact" class="form-control col-md-7 col-xs-12 phone" maxlength="13" type="text" placeholder="+92XXXXXXXXXX" pattern="[\+]\d{2}\d{4}\d{6}" title="Phone No. Format: +92XXXXXXXXXX" required>
                        </div>
                      </div>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Concerned Person <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="c_person" type="text" name="c_person" placeholder="Concerned Person" class="form-control col-md-7 col-xs-12" required="required">
                        </div>
                      </div>
                      <div class="ln_solid"></div>
                      <h2>Branch Header</h2>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Title <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="title" type="text" name="title" placeholder="Branch Title" class="form-control col-md-7 col-xs-12" required="required">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">TagLine <span class="required"></span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="tagline" type="text" name="tagline" placeholder="Branch TagLine" class="form-control col-md-7 col-xs-12" >
                        </div>
                      </div>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Short Address <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="short_address" type="text" name="short_address" placeholder="Short Address" class="form-control col-md-7 col-xs-12" required="required">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Phone Number <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input id="phone_no" name="phone_no" class="form-control col-md-7 col-xs-12 phone" maxlength="13" type="text" placeholder="+92XXXXXXXXXX" pattern="[\+]\d{2}\d{4}\d{6}" title="Phone No. Format: +92XXXXXXXXXX" required>
                        </div>
                      </div>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Email <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="email" type="email" name="email" pattern="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$" placeholder="username@domain.com" class="form-control col-md-7 col-xs-12" required="required">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">LOGO 1 <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="logo1" type="file" name="logo1" value="" class="form-control col-md-7 col-xs-12" required="required">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">LOGO 2 <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="logo2" type="file" name="logo2" class="form-control col-md-7 col-xs-12" required="required">
                        </div>
                      </div>
                      <h2>Fee Info</h2>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Due Date (No.of Days) (1-365) <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="due_date" type="number" name="due_date" min="1" max='365' class="form-control col-md-7 col-xs-12" required="required">
                        </div>
                      </div>
                      <!--<div class="item form-group">-->
                      <!--  <label for="password" class="control-label col-md-3">Late Fine (%) <span class="required">*</span></label>-->
                      <!--  <div class="col-md-6 col-sm-6 col-xs-12">-->
                      <!--    <input id="late_fine" type="number" name="late_fine" min="0" max="100" class="form-control col-md-7 col-xs-12" required="required">-->
                      <!--  </div>-->
                      <!--</div>-->
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Late Fine Type <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                        <select class="form-control" name="late_fine_type" id="late_fine_type" required>
                            <option value="">Select Late Fine Type</option>
                            <option value="0">Percentage (%)</option>
                            <option value="1">Shillings (Ksh)</option>
                        </select> 
                        </div>
                     </div>
                     <div class="col-md-3 col-sm-3 col-xs-6"></div>
                     <div class="col-md-6 col-sm-6 col-xs-12">
                                    <div class="row">
                                        <div class="form-sidoup col-md-12 col-sm-12 col-xs-12">
                                            <label for="disc">Late Fine</label>
                                            <div class="row">
                                                <div class="col-md-6 col-sm-6 col-xs-6">
                                                    <input type="number" min="0" max="100" name="late_fine" id="late_fine_per" class="form-control" readonly placeholder="IN %">
                                                </div>
                                                <div class="col-md-6 col-sm-6 col-xs-6">
                                                    <input type="number" min="0" max="5000" name="late_fine_rs" id="late_fine_rs" class="form-control" readonly placeholder="IN RS">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                       </div>
                       <div class="clearfix"></div><br>
                       <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Fee Deposit Type <span class="required"></span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="bank_cash" type="radio" name="bank" value="bank" checked> Bank 
                          <input id="bank_cash" type="radio" name="bank" value="mpesa"> Mpesa
                        </div>
                      </div>
                    
                       <div class="clearfix"></div><br>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Bank(If fee receive in bank)<span class="required"></span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <select name="bank_primary" class="form-control col-md-7 col-xs-12">
                              <?php 
                              $banks=$this->db->select('*')
                                              ->from('bank_def')
                                              ->where('is_active',1)
                                              ->get()->result_array();
                                if(!empty($banks))
                                {
                                    foreach($banks as $row)
                                    {?>
                                        <option value="<?php echo $row['id'];?>"><?php echo $row['b_name'];?></option>
                                  <?php  } }?>
                          </select>
                        </div>
                      </div>
                
                       <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Bank Address <span class="required"></span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="bank_address" type="text" name="bank_address" class="form-control col-md-7 col-xs-12" >
                        </div>
                      </div>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Account Title <span class="required"></span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="acc_title" type="text" name="acc_title" class="form-control col-md-7 col-xs-12" >
                        </div>
                      </div>
                      <div class="item form-group">
                        <label for="password" class="control-label col-md-3">Account No <span class="required"></span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="acc_no" type="text" name="acc_no"  class="form-control col-md-7 col-xs-12" >
                        </div>
                      </div>
                     
                      <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                          <button id="send" type="submit" class="btn btn-success pull-right">Save</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <footer>
          <div class="pull-right">
            Prudmac
          </div>
          <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
      </div>
    </div>

    <!-- jQuery -->
    <script src="<?php echo base_url(); ?>assets/vendors/jquery/dist/jquery.min.js"></script>
    <!-- Custom JS -->
    <script src="<?php echo base_url(); ?>assets/js/main.js"></script>
    <!-- Bootstrap -->
    <script src="<?php echo base_url(); ?>assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="<?php echo base_url(); ?>assets/vendors/fastclick/lib/fastclick.js"></script>
    <!-- NProgress -->
    <script src="<?php echo base_url(); ?>assets/vendors/nprogress/nprogress.js"></script>
    <!-- Chart.js -->
    <script src="<?php echo base_url(); ?>assets/vendors/Chart.js/dist/Chart.min.js"></script>
    <!-- gauge.js -->
    <script src="<?php echo base_url(); ?>assets/vendors/gauge.js/dist/gauge.min.js"></script>
    <!-- bootstrap-progressbar -->
    <script src="<?php echo base_url(); ?>assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <!-- iCheck -->
    <script src="<?php echo base_url(); ?>assets/vendors/iCheck/icheck.min.js"></script>
    <!-- Skycons -->
    <script src="<?php echo base_url(); ?>assets/vendors/skycons/skycons.js"></script>
    <!-- Flot -->
    <script src="<?php echo base_url(); ?>assets/vendors/Flot/jquery.flot.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/Flot/jquery.flot.pie.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/Flot/jquery.flot.time.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/Flot/jquery.flot.stack.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/Flot/jquery.flot.resize.js"></script>
    <!-- Flot plugins -->
    <script src="<?php echo base_url(); ?>assets/js/flot/jquery.flot.orderBars.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/flot/date.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/flot/jquery.flot.spline.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/flot/curvedLines.js"></script>
    <!-- jVectorMap -->
    <script src="<?php echo base_url(); ?>assets/js/maps/jquery-jvectormap-2.0.3.min.js"></script>
    <!-- bootstrap-daterangepicker -->
    <script src="<?php echo base_url(); ?>assets/js/moment/moment.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/datepicker/daterangepicker.js"></script>

    <!-- Custom Theme Scripts -->
    <script src="<?php echo base_url(); ?>assets/build/js/custom.min.js"></script>
    
      
    <!-- Form Validator -->
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/bootstrapValidator.js"></script>
<!-- Form Validator-->
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/bootstrapValidator.css"/>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
    <script type="text/javascript">
  $("#password").password('toggle');
  $(document).on("change","#late_fine_type",function(){
                var val = $(this).val();
                if(val=="")
                {
                    $("#late_fine_per").prop('readonly', true);
                    $("#late_fine_rs").prop('readonly', true);
                        $("#late_fine_rs").val(0);
                        $("#late_fine_per").val(0);
                }else if (val=="0") {
                    $("#late_fine_per").prop('readonly', false);
                     $("#late_fine_rs").val(0);
                    $("#late_fine_rs").prop('readonly', true);
                }else if(val=="1")
                {
                    $("#late_fine_per").prop('readonly', true);
                     $("#late_fine_per").val(0);
                    $("#late_fine_rs").prop('readonly', false);
                }
            });
  </script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#routePermit')
            .on('init.form.bv', function(e, data) {
                //console.log(data);
            })
            .bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    name: {
                        trigger:'blur',
                        validators: {
                            notEmpty: {
                                message: 'The name is required'
                            }
                        }
                    },
                     address: {
                        trigger:'blur',
                        validators: {
                            notEmpty: {
                                message: 'The address is required'
                            }
                        }
                    },
                     b_head: {
                        trigger:'blur',
                        validators: {
                            notEmpty: {
                                message: 'The branch head is required'
                            }
                        }
                    },
                    c_person: {
                         trigger:'blur',
                        validators: 

                        {
                            notEmpty: {
                                message: 'The Concerned Person is required'
                            },
                            
                        }
                    },

                
                contact: {
                                    validators: {
                                        notEmpty: {
                                            message: 'The contact is required and cannot be empty'
                                        },
                                        
                                    }
                                },
                                'phone[]': {
                      
                    trigger:'blur',
                validators: {
                    
                         stringLength: {
                            min: 13,
                            max: 13,
                            message: 'The phone number must be mobile number'
                        }      
                }
            },
                    b_h_contact: {
                        validators: {
                            notEmpty: {
                                message: 'The branch head contact is required and cannot be empty'
                            },
                            
                        }
                    },
                    'phone[]': {
                      
                    trigger:'blur',
                validators: {
                    
                         stringLength: {
                            min: 13,
                            max: 13,
                            message: 'The phone number must be mobile number'
                        }      
                }
            },
                    phone_no: {
                                    validators: {
                                        notEmpty: {
                                            message: 'The contact is required and cannot be empty'
                                        },
                                        
                                    }
                                },
                                'phone[]': {
                      
                    trigger:'blur',
                validators: {
                    
                         stringLength: {
                            min: 13,
                            max: 13,
                            message: 'The phone number must be mobile number'
                        }      
                }
            },

                    
                    short_address: {
                         trigger:'blur',
                        validators: {
                            notEmpty: {
                                message: 'The short address is required'
                            }
                        }
                    },

                    title: {
                         trigger:'blur',
                        validators: {
                            notEmpty: {
                                message: 'The Title is required'
                            }
                        }
                    },
                    tagline: {
                         trigger:'blur',
                        validators: {
                            notEmpty: {
                                message: 'The Tagline is required'
                            }
                        }
                    },
                    email: {
                                    validators: {
                                        notEmpty: {
                                            message: 'The email address is required and cannot be empty'
                                        },
                                        emailAddress: {
                                            message: 'The email address is not valid'
                                        }
                                    }
                                },
                }
            });
    });
$("#zzz").click(function(){
   $('#routePermit').bootstrapValidator("resetForm",true);    
});
$(document).on("keypress",".abc1", function (event) {
            var englishAlphabetAndWhiteSpace = /[A-Za-z0-9|-]/g;
            var key = String.fromCharCode(event.which);
            if (event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 32 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key)) {
                return true;
            }
            return false;
        });
</script>
<script>
    
    // Select your input element.

var number = document.getElementById('late_fine_per');

// Listen for input event on numInput.
number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}

var numberr = document.getElementById('late_fine_rs');

// Listen for input event on numInput.
numberr.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}

    </script>

  </body>
</html>