<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/printchart.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="">Category:</label>

                </div>

                

                <div class="col-md-3 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[category]" id="category" class="form-control select2">

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

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

                      <option value="<?php echo $r['id']; ?>" <?php echo $r['id'] == $filter['category'] ? 'selected' : ''; ?>><?php echo $r['name']; ?></option>

                      <?php endforeach; ?>

                    </select>

                  </div>

                 </div>

                 

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

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

                </div>

                 <div class="col-md-3 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[item]" id="item_value" class="form-control select2">

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

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

                      <option value="<?php echo $r['id']; ?>" <?php echo $r['id'] == $filter['item'] ? 'selected' : ''; ?>><?php echo $r['item_name']; ?></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="Print Chart" />

                 </div>

              </div>

              <div class="form-group">

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

                  <label class="" for="" style="padding-left: 9px;">Item Code :</label>

                </div>

                

                <div class="col-md-3 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[itemcode]" id="item_code" class="form-control select2">

                      <option value="">Select Item Code</option>

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

                      <option value="<?php echo $r['id']; ?>" <?php echo $r['id'] == $filter['itemcode'] ? 'selected' : ''; ?>><?php echo $r['code']; ?></option>

                      <?php endforeach; ?>

                    </select>

                  </div>

                 </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>Category Name</th>

                  <th>Item Name</th>

                  <th>Purchased Qty</th>

                  <th>Issued Qty</th>

                  <th>Available Qty</th>

                </tr>

              </thead>

              <tbody>

                <?php foreach($results as $k => $r ) :  //echo "<pre>"; print_r($r); echo "</pre>";?>

                <?php $category	= $this->inventory_stock_report_model->get_category_by_id($r['inv_cat_id']);  ?>

                <?php $item		= $this->inventory_stock_report_model->get_item_by_id($r['inv_item_id']);  ?>
				
                <?php  $chartData[$item] = $r['now_avail_qty']; ?>
                <tr>

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

                  <td><?php echo $category; ?></td>

                  <td><?php echo $item; ?></td>

                  <td><?php echo ($r['now_avail_qty'] + $r['total_issued_qty']); ?></td>

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

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

                </tr>

                <?php  endforeach; ?>

              </tbody>

            </table>

          </div>

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

        </div>

        <!-- /.box --> 

      </div>

    </div>

  </section>

  <!-- /.content --> 

</aside>

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

<!-- ./wrapper --> 
<div class="modal fade" id="pdfModal" 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">Statistical 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(e) {

    $('#category').on('change', function(){

		var catID = $(this).val();		

		$.ajax({

			async: false,

			url:base_url+"inventory_stock_report/get_item_records",

			type:'POST',

			data:{catId: catID}

		}).done(function(data) {            

			var dataSplit = data.split("SPLIT");

			console.log(dataSplit);

			$('#item_value').html(dataSplit[0]);

			$('#item_code').html(dataSplit[1]);

        }).fail(function(XHR, status_code, error_thrown) {

            console.log(error_thrown);

        });

	});

});

</script>