<style>

.form-horizontal .input-group {

	max-width: 100%;

	min-width: 100%;

}

.form-horizontal .nopadding {

	padding: 0px;

}

.form-horizontal label {

	margin-top: 5px;

	width: auto;

	text-align: left;

}

.form-horizontal .form-control.customwidth {

	width: auto;

}

.form-horizontal .start_date, .form-horizontal .end_date {

	width: 100%;

    min-width: 100%;

    max-width: 100%;

}

.input-group .form-control {

	width: 100%;

    min-width: 100%;

    max-width: 100%;

}

.submit_excel {

	background-image: url(./assets/images/file-icons/xlsx.png);

	border: 0px;

	background-color: #FFFFFF;

	color: transparent;

	/*float: left;*/

	margin: 5px 0 10px 10px;

	height: 25px;

	width: 25px;

}

.submit_pdf {

	background-image: url(./assets/images/file-icons/pdf.png);

	border: 0px;

	background-color: #FFFFFF;

	color: transparent;

	float: none;

	margin: 5px 0px 10px 25px;

	height: 25px;

	width: 25px;

}
.print_chart {
    background-image: url(./assets/images/file-icons/chart.png);
    border: 0px;
    background-color: #FFFFFF;
    color: transparent;
    /*float: left;*/
    margin: 5px 0 10px 20px;
    height: 24px;
    width: 24px;
}
.cht-pie{
    width: 75%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 60px;
    background: #f3f3f3;
    padding: 30px 30px;
    box-shadow: -1px 20px 7px -18px #717171;
}
</style>

<aside class="right-side">

  <section class="content-header">

    <div class="title_bar">

      <h1 class="major_txt_color"><?php echo $title;?></h1>

      <div class="breadcrumb_container"><?php echo breadcrumb_links();?></div>

    </div>

  </section>

  <?php $general = get_general_setting();?>

  <!-- Main content -->

  <section class="content">

    <div class="row">

      <div class="col-xs-12"> 

        <!-- /.box -->

        <div class="box box-primary">

          <div class="box-body table-responsive">
			<div class="cht-pie">
                <canvas id="chart-area"></canvas>
            </div>
            <form name="get_data_search" action="<?php echo $form_action;?>" method="post" class="search_form validate_form form-horizontal">

              <input type="hidden" name="hidden_id" class="hidden_id" value="<?php echo (!empty($hidden_id)) ? $hidden_id : '';?>" />

              <div class="form-group">

                <div class="col-md-1 col-sm-2 col-xs-12">

                  <label class="" for="">Expenses:</label>

                </div>

                <div class="col-md-3 col-sm-4 col-xs-6 nopadding">

                <div class="col-md-4 col-sm-3 col-xs-3">

                  <label class="" for="">From</label>

                  </div>

                  <div class="col-md-8 col-sm-9 col-xs-9">

                    <div class="input-group">

                      <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div>

                      <input type="text" class="form-control start_date" placeholder="DD-MM-YYYY" style="" id="start_date" name="filter[start_date]" value="<?php echo $filter['start_date']; ?>" autocomplete="off" >

                    </div>

                  </div>

                </div>

                <div class="col-md-3 col-sm-4 col-xs-6 nopadding">

                  <div class="col-md-4 col-sm-3 col-xs-2 text-center">

                    <label class="" for="">To</label>

                  </div>

                  <div class="col-md-8 col-sm-9 col-xs-9">

                    <div class="input-group">

                      <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div>

                      <input type="text" class="form-control end_date" placeholder="DD-MM-YYYY" style=""  id="end_date" name="filter[end_date]" value="<?php echo $filter['end_date']; ?>" autocomplete="off" >

                    </div>

                  </div>

                </div>

              </div>

              <div class="form-group">

                <div class="col-md-2 col-sm-2 col-xs-12">

                  <label class="" for="">Expenses Type :</label>

                </div>

                 <div class="col-md-5 col-sm-4 col-xs-6">

                 <div class="input-group">

                    <div class="input-group-addon"> <i class="fa fa-soccer-ball-o"></i> </div>

                    <select name="filter[type]" class="form-control select2">

                      <option value="">Select Type</option>

                      <?php 

                                                foreach($types as $k => $r ) :

                                                    ?>

                      <option value="<?php echo $r['exp_type_id']; ?>" <?php echo $r['exp_type_id'] == $filter['type'] ? 'selected' : ''; ?>><?php echo $r['exp_type_name']; ?></option>

                      <?php

                                                endforeach;

                                            ?>

                    </select>

                  </div>

                 </div>

                </div>

                <div class="form-group">

                <div class="col-md-2 col-sm-2 col-xs-12">

                  <label class="" for="">Expenses for :</label>

                </div>

                 <div class="col-md-5 col-sm-4 col-xs-6">

                 <div class="input-group">

                      <div class="input-group-addon"> <i class="fa fa-soccer-ball-o"></i> </div>

                      <select name="filter[sub]" class="form-control select2">

                        <option value="">Select Expenses for</option>

                        <?php foreach($expenses as $k => $r ) : ?>

                        <option value="<?php echo $r['expenses_for']; ?>" <?php echo $r['expenses_for'] == $filter['sub'] ? 'selected' : ''; ?>><?php echo $r['expenses_for']; ?></option>

                        <?php endforeach; ?>

                      </select>

                    </div>

                 </div>

                 <div class="col-md-4 col-sm-6 col-xs-6">

                     <input type="submit" value="Submit" name="submit" class="btn btn-primary btn-sm"/>

                     <input type="submit" value="PDF Data" name="submit" class="submit_pdf" title="Export PDF" />

                     <input type="submit" name="submit" value="Excel Data" class="submit_excel" title="Export Excel" />
                     
                     <input type="submit" name="submit" value="Chart Data" class="print_chart" title="PDF Chart" />

                 </div>

                 </div>

              <div class="form-group">

               

                

                

                <div class="col-md-1 col-sm-2 col-xs-2">

                  

                  &nbsp;&nbsp; </div>

                <div class="col-md-2 col-sm-2 col-xs-2">

                  

                </div>

              </div>

            </form>

          </div>

          <div class="box-body table-responsive">

            <table class="table table-bordered table-striped data_table filterTable" id="filterTable">

              <thead>

                <tr>

                  <th width="5%" class="align-center">S.No</th>

                  <th>Expenses Type</th>

                  <th>Subject Name</th>

                  <th>Name</th>

                  <th>Date</th>

                  <th>Amount</th>

                  <th>Description</th>

                  <th>Expenses For</th>

                </tr>

              </thead>

              <tbody>

                <?php 
				$total_amt = 0;
				foreach($results as $k => $r ) :
					$chartData[$r['exp_type_name']] += $r['exp_amount'];
					  //  $total_amt += $r['exp_amount'];

				?>

                <tr>

                  <td class="align-center"><?php echo $k+1; ?></td>

                  <td><?php echo $r['exp_type_name']; ?></td>

                  <td><?php echo $r['exp_subject']; ?></td>

                  <td><?php echo $r['exp_name']; ?></td>

                  <td><?php echo date("d-m-Y", strtotime($r['exp_date'])); ?></td>

                  <td class="align-right"><?php echo number_format($r['exp_amount'], 2, '.', ''); ?></td>

                  <td><?php echo text($r['exp_desc']); ?></td>

                  <td><?php echo $r['expenses_for']; ?></td>

                </tr>

                <?php 

                                    endforeach; 

                                ?>

              </tbody>

              <!--<tfoot>

                                <?php if( !empty( $total_amt ) ) : ?>

                                    <tr>

                                        <td colspan="9" align="right"><b>Total</b></td>

                                        <td align="right"><b><?php echo number_format($total_amt,2,'.','');?></b></td>

                                    </tr>

                                <?php endif; ?>

                            </tfoot>-->

            </table>

          </div>

          <!-- /.box-body --> 

        </div>

        <!-- /.box --> 

      </div>

    </div>

  </section>

  <!-- /.content --> 

</aside>

<!-- /.right-side --> 

<!-- ./wrapper --> 
<div class="modal fade" id="pdfchartModal" role="dialog">
    <div class="modal-dialog modal-lg">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Temple Expenses Chart Report PDF</h4>
        </div>
        <div class="modal-body">
         <iframe src="" class="pdf_iframe" width="850" height="600"></iframe>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
</div>
<?php 
//echo "<pre>"; print_r($chartData); echo "</pre>"; exit;  
$label 		= '';
$dataval 	= '';

if($chartData){
	foreach($chartData as $key => $amount){
		if(empty($label)){
			$label = "'".$key."'";
		}else{
			$label .= ",'".$key."'";
		}
		
		if(empty($dataval)){
			$dataval = "'".number_format($amount,2,".","")."'";
		}else{
			$dataval .= ",'".number_format($amount,2,".","")."'";
		}
	}		
}
?>
<script src="<?php echo base_url().'assets/js/Chart.min.js'?>"></script>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [<?php echo $label; ?>],
    datasets: [{
      backgroundColor: [
        "#ff4700",
        "#FFA07A",
        "#bc00bf",
        "#FA8072",
        "#E9967A",
        "#E74C3C",
        "#34495E",
        "#bf8400",
        "#148F77",
        "#dd0000",
        "#0093f4",
		"#B22222",
		'#FFD700',
		'#FFEFD5',
		'#FFE4B5',
		'#7CFC00',
		'#00FF7F',
		'#98FB98',
		'#808000',
		'#00FFFF',
		'#008B8B'
       
      ],
      //label: '',
      data: [<?php echo $dataval; ?>]
     
    }]
    
  },
  options: {
	  		tooltips: {
			  callbacks: {
					label: function(tooltipItem, data) {
						var value = data.datasets[0].data[tooltipItem.index];
						if(parseInt(value) >= 1000){
						   return 'S$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
						} else {
						   return 'S$' + value;
						}
					}
			  } // end callbacks:
			}, //end tooltips
          responsive: true,
          legend: false,
		  scales: {
				yAxes: [{
					ticks: {
						beginAtZero: true
					}
				}]
			}
        }
	});
};

    $(document).ready(function() {
		
		<?php if(isset($_SESSION['pdf_chart'])): ?>
		var srcval='<?php echo base_url().'uploads/temple_pdf/'.$_SESSION['pdf_chart_file']; ?>';
		$('.pdf_iframe').attr("src",srcval);
		$('#pdfchartModal').modal({"show":true}); 
		<?php 
		$_SESSION['pdf_chart'] = '';
		unset($_SESSION['pdf_chart']);
		endif; 
		?>

        $('.start_date').bootstrapMaterialDatePicker({ 

            time: false, 

            format: 'DD-MM-YYYY'

        }). on('change', function(e, date) {

            if($('.end_date').val() != '') {

                $('.end_date').val('');

                var cur_date = new Date(date);

                $('.end_date').val(getTwoDigits(cur_date.getDate()) + '-'+ getTwoDigits((cur_date.getMonth() + 1)) + '-'+ cur_date.getFullYear());

                change_todate(getTwoDigits(cur_date.getDate()) + '-'+ getTwoDigits((cur_date.getMonth() + 1)) + '-'+ cur_date.getFullYear());

            }

        });

        

        $('.end_date').bootstrapMaterialDatePicker({ 

            time: false, 

            format: 'DD-MM-YYYY'

        });

        

        var date = $('.start_date').val();

        change_todate(date);

    });

   

    function change_todate(date) {

       $('.end_date').bootstrapMaterialDatePicker('setMinDate', date);

    }

</script>