<style>
#defination{
  display:none;
}
#back{
  display:none;
}
</style>
<link href="<?php echo base_url(); ?>assets/vendors/select2/dist/css/select2.min.css" rel="stylesheet">
 <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
                <div class="title_left">
                
                    <h3 style="float:right"></h3>
                    <input id="add_def"  class="btn btn-success" value="Add Definition"  type="button">
                    <input id="back"  class="btn btn-success" value="Allowance Assign" type="button">
                </div>
            </div>
            <div class="clearfix"></div>
             <?php if ($this->session->flashdata('errormsg')): ?>
<div class="alert alert-danger">
<?php echo $this->session->flashdata('errormsg'); ?>
</div>
<?php endif ?>

             <?php if ($this->session->flashdata('errormsg2')): ?>
<div class="alert alert-danger">
<?php echo $this->session->flashdata('errormsg2'); ?>
</div>
<?php endif ?>
 <div class="container" id="defination">
       <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12" id="defing">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Allowance 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="month">Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" id='alloncename' name="alloncename" required placeholder="Allowance Name...." class="form-control abc">
                           </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="allonce_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>
                </div>
             
              </div>
               </div><!--End uper row-->
               <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>Allowance 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>#</th>
                          <th>Name</th>
                          <th>Description</th>
                          <th>Actions</th>
                        </tr>
                      </thead>
 

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

                  </div>
                    
                  </div>
                </div>
             
              </div>
              </div>
            </div>
        </div><!--End Container-->    
                

      <div class="row" id="Allowance">

                 <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Allowance Assign</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/saveteacherallowance" 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-6">
                            <select class="form-control" required name="type" id="type">
                              <option value=''>Select Type</option>
                              <option value='teacher'>Teacher</option>
                              <option value='staff'>Staff</option>
                              
                                                </select> 
                           </div>
                      </div>
              
                     <div class="item form-group" id="myemp">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Employee Name<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <select class="form-control" required name="emp" id="empee">
                              <option value=''>Select Employee</option>
                                                </select> 
                           </div>
                      </div>
                     
                       <div class="item form-group">
                       <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Month<span class="required"></span>
                        </label>
                         <div class="col-md-6 col-sm-6 col-xs-6">
                        <input type="month" class="form-control" value="<?php echo date('Y-m');?>" name="month" id="month" required>
                        </div>
                     </div>
                     
                     <div class="item form-group">
                       <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Basic Salary<span class="required"></span>
                        </label>
                         <div class='col-md-2 col-sm-4 col-xs-2'>
                        <input type="text" class="form-control" name="basic_salary" id="basic_salary" readonly>
                        </div>
                     </div>

                        <div class="item form-group res">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="b_h_contact">Allowance <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12" id="get_data">
                       



                       </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="save" type="submit" class="btn btn-success">Save</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>    
            </div>


 <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 Allowance</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;">Allowance</th>
                          <th style="width:100px;">Month</th>
                          <th style="width:100px;">Percentage</th>
                          <th style="width:100px;">Shillings</th>
                          <th style="width:100px;">Status</th>
                        </tr>
                      </thead>
 

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

                  </div>
                    
                  </div>
                </div>
             
              </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="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>

    

    <!-- Datatables -->
     <script>
     $(document).ready(function() {
    $('#datatable').DataTable(
          {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
        );
           });
 </script>

  <script>
     $(document).ready(function() {
    $('#datatable2').DataTable(
          {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
        );
           });
 </script>
    <!-- /Datatables -->
<script>
$(document).ready(function(){

   $.ajax({
    url: '<?php echo base_url(); ?>Salary/allallowncee/',data: {},
         success: function (result) {
               $("#get_data").html(result);
           }
     });//end ajax for loading form


});
</script>


  <script>
$("#add_def").click(function(event){
 
  var house="allonce";
        $.ajax({
    url: '<?php echo base_url(); ?>Salary/act_dec/'+house,data: {},
         success: function (result) {
           $("#datatable").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center").html(result);
                $('#datatable').DataTable(
                      {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
                    );
            },500);
           }
     });//end ajax for loading datatables
 $("#Allowance").hide();
 $("#defination").show();
 $("#back").show();
 $("#add_def").hide();
 $("#assigned_allownce").hide();
 
});//end add defination button click functionalty

 $("#back").click(function(event){
 $("#Allowance").show();
 $("#defination").hide();
 $("#back").hide();
 $("#assigned_allownce").show();
 $("#add_def").show();
 $.ajax({
    url: '<?php echo base_url(); ?>Salary/allallowncee/',data: {},
         success: function (result) {
         console.log(result);
               $("#get_data").html(result);
           }
     });//end ajax for loading form

  });//end assign allownce button click functionalty

$("#new_type").click(function(event){
  event.preventDefault();
  var value=$("#new_type").val();
  var name=$("#alloncename").val();
  var des=$("#allonce_des").val();
  if(name=="" || des=="")
  {
    alert("Please fill the fields");
    return false;
  }
if(value=="Add")
{
$.ajax({
 url:'<?php echo base_url();?>Salary/save_allonce/'+name+'/'+des,data:{},
        success: function (result) {
        
        if(result != "false")
        {
           $("#datatable").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center").html(result);
                $('#datatable').DataTable(
                      {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
                    );
            },500);
            
            }
            else
            {
             alert("This name of allownce already added");
             return false;
            }
            
           }
    });
$("#alloncename").val("");
 $("#allonce_des").val("");
}
else if(value=="Update")
{
  var id=$("#edit_id").val();
  var up_name=$("#alloncename").val();
  var up_des=$("#allonce_des").val();
   $.ajax({
    url:'<?php echo base_url()?>Salary/update_allonceee/'+id+"/"+up_name+"/"+up_des,data:{},
    success: function (result) {
           $("#datatable").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center").html(result);
                $('#datatable').DataTable(
                      {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
                    );
            },500);
           }
  });
   $("#alloncename").val("");
 $("#allonce_des").val("");
 $("#new_type").val("Add");
}
});//end if for button type checking
</script>

<script>
function deactive(id,event){
  event.preventDefault();
   $.ajax({
     url: '<?php echo base_url(); ?>Salary/deactive/'+id,data: {},
      success: function (result) {
           $("#datatable").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center").html(result);
                $('#datatable').DataTable(
                      {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
                    );
            },500);
           }
      });

}
</script>
<script>
function active(id,event){
event.preventDefault();
  $.ajax({
     url: '<?php echo base_url(); ?>Salary/active/'+id,
      success: function (result) {
           $("#datatable").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center").html(result);
                $('#datatable').DataTable(
                      {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
                    );
            },500);
           }
      });
}
</script>
<script>
function edit(id,event){
  event.preventDefault();
  $.ajax({
     url: '<?php echo base_url(); ?>Salary/get_record/'+id,
         success: function (result)
          { 
           
            var obj=JSON.parse(result);
           
            $("#edit_id").val(obj.id);
            $("#alloncename").val(obj.name);
            $("#allonce_des").val(obj.description);
            $("#new_type").val("Update");
            $('html, body').animate({
        scrollTop: $("#defing").offset().top
    }, 2000);
            //$("tbody.center").html(result);
            }
      });
}
</script>

<script>
function Per(id,event){
     
  event.preventDefault(); 
 var rup_id='#allowance_rup'+id;
 var per_id='#allowance_per'+id;
 
 $(per_id).prop("readonly", false); 

 $(rup_id).val(0);
 var value=$(per_id).val();
 $(rup_id).prop("readonly", true); 

 $(per_id).keypress(function(event){
  var inputValue = event.which;
  if (inputValue != 8 && inputValue != 0 && (inputValue < 48 || inputValue > 57)) {
        //display error message
        alert("Please press only digit..");
               return false;
    }
    
    });

     $(per_id).change(function(event){
  var inputValue = $(this).val();
  if (inputValue > 100) {
        //display error message
        $("#save").attr("disabled","disabled");
        alert("Maximum 100% allowed");
          return false;         
    }else
    {
            $("#save").removeAttr("disabled");
    }
    
    });

}
</script>

<script>
function Rup(id,event){
  event.preventDefault();
 var per_id='#allowance_per'+id;
 var rup_id='#allowance_rup'+id;
 $(rup_id).prop("readonly", false); 
 $(per_id).val(0);
var value=$(rup_id).val();
 $(per_id).prop("readonly", true); 
 $(rup_id).keypress(function(event){
  var inputValue = event.which;
  if (inputValue != 8 && inputValue != 0 && (inputValue < 48 || inputValue > 57)) {
        //display error message
        alert("Please press only digit..");
               return false;
    }
 });
}
</script>

 <script>

    $('#type').change(function() {


   var c=$(this).val();
   
   if(c=="teacher"){
      $.ajax({
            url: "<?php echo base_url();?>Load/checkval/"+c, 
          success: function(result){
                 
                $("#empee").html(result);
                jq('#empee').multiselect('reload');
                
            }}
            );
       $.ajax({
     url: '<?php echo base_url(); ?>Salary/load_teacher_allownce/',
      success: function (result) {
           $("#datatable2").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center22").html(result);
                $('#datatable2').DataTable(
                      {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
                    );
            },500);
           }
      });


   }else{
      $.ajax({
            url: "<?php echo base_url();?>Load/checkval1/"+c, 
          success: function(result){
                $("#empee").html(result);
                jq('#empee').multiselect('reload');
                
            }});
             
             $.ajax({
     url: '<?php echo base_url(); ?>Salary/load_staff_allownce/',
      success: function (result) {
           $("#datatable2").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center22").html(result);
                $('#datatable2').DataTable(
                      {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
                    );
            },500);
           }
      });


    }
        
        
        $("#empee").select2({
          
        });
   

            //loading form again
            $.ajax({
    url: '<?php echo base_url(); ?>Salary/allallowncee/',data: {},
         success: function (result) {
               $("#get_data").html(result);
           }
     });//end ajax for loading form

  });
   

$("#month").change(function(){
    var value = $('#empee').val();
    var ref=$('#type').val();
    var month=$('#month').val();
    
     if(ref=='teacher')
          {
             $.ajax({
              url: "<?php echo base_url();?>Salary/teacher_salaryinc/"+value+"/"+month,
             success: function(result){
                // alert(result);
           $('#basic_salary').val(result);    
                 }
                 });
                  
      
          }else
          {
             $.ajax({
              url: "<?php echo base_url();?>Salary/staff_salaryinc/"+value+"/"+month,
             success: function(result){
            $('#basic_salary').val(result);    
                 }
                 }); 
          }
          
})


 
  $("#myemp").change(function() {
  
                    var value = $('#empee').val();
                    var ref=$('#type').val();
                    var month=$('#month').val();
            if(value != "") 
            {
                    $.ajax({
     url: '<?php echo base_url(); ?>Salary/teacher_allownce_selected/'+value+"/"+ref,
      success: function (result) {
           $("#datatable2").dataTable().fnDestroy();
           
           setTimeout(function(){ 
                $("tbody.center22").html(result);
                $('#datatable2').DataTable(
                      {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
                    );
            },500);
           }
      });

                  if(ref=='teacher')
                  {
                     $.ajax({
                      url: "<?php echo base_url();?>Salary/teacher_salaryinc/"+value+"/"+month,
                     success: function(result){
                   // $("#empee").html(result);
                   $('#basic_salary').val(result);    
                         }
                         });
                          
              
                  }else
                  {
                     $.ajax({
                      url: "<?php echo base_url();?>Salary/staff_salaryinc/"+value+"/"+month,
                     success: function(result){
                   // $("#empee").html(result);
                    $('#basic_salary').val(result);    
                         }
                         }); 
                  }
                        $.post("<?php echo base_url(); ?>Load/checkallowan/"+value+"/"+ref,{},function(data){
                        data = JSON.parse(data);
                       if(data!=""){
                        $.each( data, function( key, value ) {
                            $('.allowance_id:input[value="'+value.allowance_id+'"]').prop('checked',true);
                             var amount=value.percentage;
                               var amount2=value.rupess;

                            $('#allowance_per'+value.allowance_id).val(amount);
                            $('#allowance_rup'+value.allowance_id).val(amount2);
                            var s=value.id;
                            $('#hid'+value.allowance_id).val(s);
                             });
                    }
                    else{
                      //loading form again
                       $.ajax({
                        url: '<?php echo base_url(); ?>Salary/allallowncee/',data: {},
                       success: function (result) {
                        $("#get_data").html(result);
                          }
                            });//end ajax for loading form
                    }
                    


                        });
                        
 }else
{
     $('#basic_salary').val(""); 
    if(ref=="teacher"){
      $.ajax({
            url: "<?php echo base_url();?>Load/checkval/"+ref, 
          success: function(result){
                 
                $("#empee").html(result);
                jq('#empee').multiselect('reload');
                
            }}
            );
       $.ajax({
     url: '<?php echo base_url(); ?>Salary/load_teacher_allownce/',
      success: function (result) {
           $("#datatable2").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center22").html(result);
                $('#datatable2').DataTable(
                      {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
                    );
            },500);
           }
      });


   }else{
      $.ajax({
            url: "<?php echo base_url();?>Load/checkval1/"+ref, 
          success: function(result){
                $("#empee").html(result);
                jq('#empee').multiselect('reload');
                
            }});
             
             $.ajax({
     url: '<?php echo base_url(); ?>Salary/load_staff_allownce/',
      success: function (result) {
           $("#datatable2").dataTable().fnDestroy();
           setTimeout(function(){ 
                $("tbody.center22").html(result);
                $('#datatable2').DataTable(
                      {
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                 "bPaginate":true,
                "paging":   true,
                "bFilter":true,
                "pageLength": 20,
                 dom: 'lBfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
                    }
                    );
            },500);
           }
      });


    }
}            
                     
                    }); 
 


  </script> 