    <style>
#defination{
  display:none;
}
#back{
  display:none;
}

</style>
<link href="<?php echo base_url(); ?>assets/vendors/select2/dist/css/select2.min.css" rel="stylesheet">
<!--row-->

        <!-- page content -->
        <div class="right_col" role="main" id="">
          <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3 style="float:right">Loan</h3>
                </div>
            </div>
            <div class="clearfix"></div>
             <?php if ($this->session->flashdata('error_msg')): ?>
<div class="alert alert-danger">
<?php echo $this->session->flashdata('error_msg'); ?>
</div>
<?php endif ?>
 <input id="add_def"  class="btn btn-success" value="Add Definition"  type="button">
 <input id="back"  class="btn btn-success" value="Loan Assign" type="button">
            <div class="row">

 <div id="defination">
   <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Loan Definition </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 class="form-horizontal form-label-left"  action="" method="post">
                        
                      <input type="hidden" name="id" id="edit_id">   
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="b_head">Loan Name<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="Loan_name"  class="form-control col-md-7 col-xs-12 abc"  name="Loan_name" 
                          placeholder="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="b_head">Description<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <textarea id="Loan_des" class="form-control col-md-7 col-xs-12 abc1" maxlength="25" name="des" placeholder="Description Here...." required="required"></textarea>
                        </div>
                      </div>
                      
                      <div class="ln_solid"></div>
                      <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                          <!--<button id="new_type" type="submit" class="btn btn-success">Add</button>-->
                          <input style="float:right" type="button" id="new_type" value="Add" class="btn btn-success">
                        </div>
                      </div>
                    </form>
 </div><!--x_content div-->
 </div><!--x_panel div-->
</div><!--col-md-12 div-->

 <!--View Defination-->
  <div class="row" class="col-lg-12">
             <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Loan View</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">
                  <div class="x_content">
                     <div class="row">
                        
                    <table id="datatable"  class="table">
                      <thead>
                        <tr>
                          <th style="width:100px;">#</th>
                          <th style="width:100px;">Name</th>
                          <th style="width:100px;">Description</th>
                          <th style="width:100px;">Actions</th>
                        </tr>
                      </thead>
 

                      <tbody class="center">
                    
                    
                      </tbody>
                   </table>

                  </div>
                    
                  </div>
                </div>
             
              </div>
              </div>
            </div>

  


</div><!--id div-->

<div id="Loan_Assign">
 <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                
                  <div class="x_title">
                    <h2>Assign Loan</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 class="form-horizontal form-label-left"  action="<?php echo $base_url; ?>salary/assignloan" method="post">
                        
                      <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Type <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <select class="form-control" name="type" id="type" required>
                                    <option value="">Select Type</option>
                                    <option value="teacher">Teacher</option>
                                    <option value="staff">Staff</option>
                                 </select> 
                           </div>
                      </div>
                  
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Employee 
                        <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                        <select class="form-control" name="emp" id="empp" required>
                       
                                 </select>                    
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="month">Month <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="month" id='month' name="month" class="form-control" required>
                           <div class="error" style="color:red;"></div>
                           </div>
                           
                      </div>  
                       
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="b_head">Loan Amount<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="amount" class="form-control col-md-7 col-xs-12 num" maxlength="25" name="amount" placeholder="Loan Amount...." 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="b_head">Monthly Deduction<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="monthly_amount" class="form-control col-md-7 col-xs-12 num" maxlength="25"
                           name="monthly_amount" placeholder="Monthly Deduction in Salary...." 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="b_h_contact">Type <span class="required">*</span>
                        </label>
                       <div class="col-md-6 col-sm-6 col-xs-12">
                     <select class="form-control" name="loantype" id="loantype" required>
                        
                      </select>
                       </div>
                         
                        </div>

                       <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="b_head">Loan Recovery<span class="required"></span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="rec_month" class="form-control col-md-7 col-xs-12" maxlength="25" name="rec_month"  type="text" readonly>
                        </div>
                      </div>
                      
                      <div class="ln_solid"></div>
                      <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                          <button style="float:right" id="send" type="submit" class="btn btn-success">Add</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
               
                  <!--View-->
<div class="row" class="col-lg-12" id="assigned_allownce">
             <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Assigned Loan</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">
                  <div class="x_content">
                     <div class="row">
                        
                    <table id="datatable2"  class="table">
                      <thead>
                        <tr>
                          <th style="width:100px;">#</th>
                          <th style="width:100px;">Name</th>
                          <th style="width:100px;">Loan</th>
                          <th style="width:100px;">Month</th>
                          <th style="width:100px;">Amount</th>
                          <th style="width:100px;">Monthly Deduction</th>
                          <th style="width:100px;">Recovery</th>
                          <th style="width:100px;">Action</th>
                        </tr>
                      </thead>
 

                      <tbody class="center22">
                    
                    
                      </tbody>
                   </table>

                  </div>
                    
                  </div>
                </div>
             
              </div>
              </div>
            </div>
<!--End View-->
           </div> 
          
            </div>
          </div>
      </div>
   
        </div>




        
        
               <!-- /page content -->

     
<script src="<?php echo base_url(); ?>assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/vendors/select2/dist/js/select2.full.min.js"></script>

<script>
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
    $(this).remove(); 
});
}, 3000);
</script>
 
    <!-- Datatables -->
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/datatables.net-scroller/js/datatables.scroller.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/jszip/dist/jszip.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/pdfmake/build/pdfmake.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/pdfmake/build/vfs_fonts.js"></script>

    

    <!-- Datatables -->
    <script>
     $(document).ready(function() {
           $.get("<?php echo base_url(); ?>Salary/getln/",{},function(d){
                    var pre = '<option value="">Select Type</opiton>';
                    $("#loantype").html(pre+d);
                });
    $('#datatable').DataTable();
           });
 </script>

  <script>
     $(document).ready(function() {
    $('#datatable2').DataTable();
           });
 </script>

         <script>
$("#add_def").click(function(event){

 var house="loan_def";
        $.ajax({
    url: '<?php echo base_url(); ?>Salary/act_dec_loan/'+house,data: {},
       success: function (result) {
         $("#datatable").dataTable().fnDestroy();
          setTimeout(function(){ 
              $("tbody.center").html(result);
               $('#datatable').DataTable();
           },500);
           }
     });//end ajax for loading datatables
 $("#Loan_Assign").hide();
 $("#defination").show();
 $("#back").show();
 $("#add_def").hide();
 
});//end add defination button click functionalty

$("#back").click(function(event){
 $("#Loan_Assign").show();
 $("#defination").hide();
 $("#back").hide();
 $("#add_def").show();
  $.get("<?php echo base_url(); ?>Salary/getln/",{},function(d){
                    var pre = '<option value="">Select Type</opiton>';
                    $("#loantype").html(pre+d);
                });

  });//end assign allownce button click functionalty

</script>
<script>
$("#monthly_amount").change(function(){
  var total_amount=$("#amount").val();
  var per_month=$(this).val();
  if(total_amount!="")
  {
    var months=total_amount/per_month;
    var new_mnth=Math.ceil(months);
    $("#rec_month").val(new_mnth+"month");
  }
  //alert(per_month);
});
</script>
<script>
$("#new_type").click(function(event){
 
  event.preventDefault();
  var value=$("#new_type").val();
  var name=$("#Loan_name").val();
  var des=$("#Loan_des").val();
  if(name=="" || des=="")
  {
    alert("Please fill the fields");
    return false;
  }
if(value=="Add")
{
$.ajax({
 url:'<?php echo base_url();?>Salary/save_loan/'+name+'/'+des,data:{},
        success: function (result) {
         if(result != "false")
        {
           $("#datatable").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center").html(result);
                $('#datatable').DataTable();
            },500);
            }
            else
            {
             alert("This name of Loan already added");
             return false;
            }
           }
    });
$("#Loan_name").val("");
 $("#Loan_des").val("");
}
else if(value=="Update")
{
  var id=$("#edit_id").val();
  var up_name=$("#Loan_name").val();
  var up_des=$("#Loan_des").val();
   $.ajax({
    url:'<?php echo base_url()?>Salary/update_loan/'+id+"/"+up_name+"/"+up_des,data:{},
    success: function (result) {
           $("#datatable").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center").html(result);
                $('#datatable').DataTable();
            },500);
           }
  });
   $("#Loan_name").val("");
 $("#Loan_des").val("");
 $("#new_type").val("Add");
}
});//end if for button type checking
</script>

<script>
function deactive_loan(id,event){
  event.preventDefault();
 
$.ajax({
     url: '<?php echo base_url(); ?>Salary/deactive_loan/'+id,data: {},
      success: function (result) {
           $("#datatable").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center").html(result);
                $('#datatable').DataTable();
            },500);
           }
      });

}
</script>
<script>
function active_loan(id,event){
event.preventDefault();
  $.ajax({
     url: '<?php echo base_url(); ?>Salary/active_loan/'+id,
      success: function (result) {
           $("#datatable").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center").html(result);
                $('#datatable').DataTable();
            },500);
           }
      });
}
</script>
<script>
function edit(id,event){
  event.preventDefault();
  $.ajax({
     url: '<?php echo base_url(); ?>Salary/get_loan_byid/'+id,
         success: function (result)
          { 
           
            var obj=JSON.parse(result);
           
            $("#edit_id").val(obj.id);
            $("#Loan_name").val(obj.name);
            $("#Loan_des").val(obj.description);
            $("#new_type").val("Update");
            
            //$("tbody.center").html(result);
            }
      });
}
</script>

<script>
        
    $('#type').change(function(){
                 
                var value=$(this).val();
                
                
                $.get("<?php echo base_url(); ?>load/getemp/"+value,{},function(d){
                    var pre = '<option value="">Select Employee</opiton>';
                    $("#empp").html(pre+d);
                });
                tabledata(value);

   if(value=="teacher")
   {
       $.ajax({
     url: '<?php echo base_url(); ?>Salary/load_teacher_loan/',
      success: function (result) {
           $("#datatable2").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center22").html(result);
                $('#datatable2').DataTable();
            },500);
           }
      });
   }
   else
   {
      $.ajax({
     url: '<?php echo base_url(); ?>Salary/load_staff_loan/',
      success: function (result) {
           $("#datatable2").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center22").html(result);
                $('#datatable2').DataTable();
            },500);
           }
      });
   }

            });
            function tabledata(val){
               $.get("<?php echo base_url(); ?>load/getemp_advance/"+val,{},function(d){
                   $("tbody.center").html(d);

                    
                });
            }

            $('#empp').change(function(){
                 var ref=$('#type').val();
                 var val=$(this).val();
                if(val !="")
                {
                 //   alert(val);
                if(ref=="staff")
                {
                       $.ajax({
                   url: '<?php echo base_url(); ?>Salary/load_staff_loan_byid/'+val,
                  success: function (result) {
                  $("#datatable2").dataTable().fnDestroy();
                     setTimeout(function(){ 
                        $("tbody.center22").html(result);
                         $('#datatable2').DataTable();
                          },500);
                          }
                           });
                }
                else{
                         
                          $.ajax({
                   url: '<?php echo base_url(); ?>Salary/load_teacher_loan_byid/'+val,
                  success: function (result) {
                  $("#datatable2").dataTable().fnDestroy();
                     setTimeout(function(){ 
                        $("tbody.center22").html(result);
                         $('#datatable2').DataTable();
                          },500);
                          }
                           });
                }

                 $.ajax({
                   url:"<?php echo base_url(); ?>load/getemp_advance1/"+val+"/"+ref,
                   data:{},
                   success:function(result){
                     var d=jQuery.parseJSON(result);
                     
                     var ret = "";
                     $("tbody.center").empty();
                     $.each(d, function(i,v){
                       
                       ret += "<tr><td>"+(++i)+"</td><td>"+v.firstname+" "+v.lastname+"</td><td>"+v.refrence+"</td><td>"+v.Amount+"</td><td>"+v.month+"</td><td><a href='<?php echo base_url(); ?>salary/actions/del/"+v.id+"'><i class='fa fa-trash'></i></a>  <a href='<?php echo base_url(); ?>salary/actions/edit/"+v.id+"'><i class='fa fa-pencil'></i></a></td></tr>";
                     });
                     $("tbody.center").html(ret);
                   },
                 });

            }else
            {
                   if(ref=="teacher")
   {
       $.ajax({
     url: '<?php echo base_url(); ?>Salary/load_teacher_loan/',
      success: function (result) {
           $("#datatable2").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center22").html(result);
                $('#datatable2').DataTable();
            },500);
           }
      });
   }
   else
   {
      $.ajax({
     url: '<?php echo base_url(); ?>Salary/load_staff_loan/',
      success: function (result) {
           $("#datatable2").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center22").html(result);
                $('#datatable2').DataTable();
            },500);
           }
      });
   }
            }
            });
            
            
            
            
            $('#month').change(function(){
              var val=$('#month').val();
              var alag = val.split("-");
              var sy=parseInt(alag[0]);
              var sm=parseInt(alag[1]);
              var d = new Date();
              var m = d.getMonth()+1;
              var y = d.getFullYear();
              if(sy>=y && sm>=m){
                // $('#send').prop("disabled",false);
                 // $('.error').html("");
              }else{
              //  $('.error').html("Please Select  Current Month ");
              //  $('#send').prop("disabled",true);
                
              }
              });
      
        </script>   
        <script type="text/javascript">
      $(document).ready(function() {
        
        $("#empp").select2({
          
        });
      });
    </script>