  <link href="<?php echo base_url(); ?>assets/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>assets/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>assets/vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>assets/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>assets/vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
       

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>Budget</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><?php echo $this->account_model->id_('head',$type,'id')['name']; ?> Budget VS Actual</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                      <form  method="post" action="<?php echo  base_url(); ?>account/incomebudget/">
                       <input type="hidden" name="date1" value="<?php echo $date1; ?>" >
                    <input type="hidden" name="date2" value="<?php echo $date2; ?>" >
                    <input type="hidden" name="type" value="<?php echo $type; ?>" >
                    <button type="submit" class="btn"><i class="fa fa-edit"></i></button>
                    </form>
                      </form>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content ">
                  <style>
                 .form-control{
                     font-size: 12px;
                     padding:0px;
                 }
                 thead{
                     background-color:#176bb9;
                     color:#fff;
                     text-align:center;
                 }
                 th{
                     width:12px;
                 }
                  </style>
                     <table id="myDataTable" class="table table-bordered table-responsive">
                    <thead>
                    <tr>
                    
                    <th>#</th>
                    <th>Head</th>
                    <?php foreach ($date as $key => $value) { ?>
                        <th class="th"><?php echo date('y-F',strtotime($value['month'])); ?> </th>
                        <th class="th">income </th>
                        <th class="th">Varience</th>
                   <?php  } ?>
                    <th>Total Receivable Amount for Year</th>
                    <th>Total Receivable Amount for Year</th>
                    <th>Budget Received Percentage</th>
                    
                    </tr>
                    </thead>
                    <tbody>
                    <?php  foreach ($head as $key => $value) { 
                    $budg=0;$trans=0;
                    ?>
                    <tr>
                    <td><?php echo $key++; ?></td>
                    <td> <?php echo $value['name']; ?></td>
                    <?php $i=0; foreach ($date as $n => $dat) { 
                   
                       $v=$this->account_model->findbudget($value['id'],$dat['month']);
                       $b=$this->account_model->incomebudget($type,$value['id'],$dat['month']);
                       $diff=$b-$v;
                       ?>
                    <td class="price-vr price-vr<?php echo $n; ?>" data-vr="<?php echo $n; ?>" > <?php echo ($v==null?0:$v); $budg+=$v; ?> </td>
                    <td class="priceincome-vr priceincome-vr<?php echo $n; ?>" data-vr="<?php echo $n; ?>"> <?php echo ($b==null?0:$b); $trans+=$b; ?> </td>
                    <td> <?php echo abs($diff); ?></td>
                    <?php $i++; } ?>
                    <td class="total1"><?php echo $budg; ?></td>
                    <td class="total2"><?php echo $trans ?></td>
                    <td><?php echo ($budg!=0?($trans/$budg)*100:"-"); ?></td>
                    </tr>

                    <?php  } ?>
                    <tr><td></td><td>Total</td><?php foreach ($date as $key => $value) { ?><td class="totaldown<?php echo $key; ?>"></td><td class="totalincome<?php echo $key; ?>"></td><td></td><?php } ?><td class="finaltotal"></td><td class="finaltotal1"></td><td></td></tr>
                    </tbody>
                    </table>
                    
                     <div class="ln_solid"></div>
                      
                      
                          </div>
                    
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
         <script src="<?php echo base_url(); ?>assets/vendors/jquery/dist/jquery.min.js"></script>  
         <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>
        <script>
        $(document).ready(function() {
        setTimeout(function(){
             
              
        $('#myDataTable').DataTable(
            {
            "bPaginate":false,
            "bFilter":true,
            "bInfo":false,
            "ordering":false,
            "scrollX":true,
            dom: 'Bfrtip',
            buttons: [
            'csv', 'excel', 'pdf',{extend:'print',text:'Print'}  ]
            }
        );
        
        // $('#myDataTable').DataTable();

       }, 2000);
        });
        
        </script>
         <script>
         $(document).ready(function(){

          setTimeout(function(){
             $('.priceincome-vr').trigger('keyup');
             $('.price-vr').trigger('keyup');
              total1();
              total2();
              }, 1000);
             
              function total1(){
                  
                var Total = 0;
                //console.log('.price-vr'+id);
                $.each($('.total1'),function(i,v){
                var val = $(v).html();
                if(val=="")
                val = 0;
                Total += parseFloat( val );
                });
                $('.finaltotal').html(Total);
                }
                function total2(){
                var Total = 0;
                //console.log('.price-vr'+id);
                $.each($('.total2'),function(i,v){
                var val = $(v).html();
                if(val=="")
                val = 0;
                Total += parseFloat( val );
                });
                $('.finaltotal1').html(Total);
                }

         $('body').removeClass('nav-md');
         $('body').addClass('nav-sm');

            $(document).on('keyup','.priceincome-vr',function(){
                
                var id=$(this).attr('data-vr');
                var total=calculatepricevr(id);
                $('.totalincome'+id).html(total);
                
                    });
                function calculatepricevr(id){
                var Total = 0;
                //console.log('.price-vr'+id);
                $.each($('.priceincome-vr'+id),function(i,v){
                var val = $(v).html();
                if(val=="")
                val = 0;
                Total += parseFloat( val );
                });
                return Total;
                }
          $(document).on('keyup','.price-vr',function(){   
                var id=$(this).attr('data-vr');
               var total=update_vertical(id);
               $('.totaldown'+id).html(total);
          });

          function update_vertical(id) {
              var Total = 0;
                
                $.each($('.price-vr'+id),function(i,v){
                var val = $(v).html();
                //console.log(val);
                if(val=="")
                val = 0;
                Total += parseFloat(val);
                console.log(val);
                });
                return Total;
          }
          function calculate_total(){
            var total=0;
             $.each($('.total'),function(i,v){
                var val = parseInt($(v).html());
                if(val=="")
                val = 0;
                total += parseFloat( val );
                });
                return total;
          }

          

         });
         </script>