<?
$pay_amount = $gsi->getTotalPaymentAmountByJobId($_REQUEST['id']);
$remaining_amount = $enq_row["hourly_amount"] - $pay_amount;
?>
<section style="width:100%;">
<div class="box-header with-border">
  <h3 class="box-title">Payment</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
  <div class="row">
	<div class="col-md-8">
	  <div class="chart-responsive">
		<canvas id="pieChart_payment" height="150"></canvas>
	  </div>
	  <!-- ./chart-responsive -->
	</div>
	<!-- /.col -->
	<div class="col-md-4">
	  <ul class="chart-legend clearfix">
		<li><i class="fa fa-circle-o text-yellow"></i> Paid</li>
		<li><i class="fa fa-circle-o text-maroon"></i> Remaining</li>
	  </ul>
	</div>
	<!-- /.col -->
  </div>
  <!-- /.row -->
</div>
<!-- /.box-body -->
<div class="box-footer no-padding">
  <ul class="nav nav-pills nav-stacked">
	<li><a href="#">Total
	  <span class="pull-right text-green"><?=number_format($enq_row["hourly_amount"],2);?></span></a></li>
	<li><a href="#">Paid Amount <span class="pull-right text-yellow"><?=number_format($pay_amount,2);?></span></a>
	</li>
	<li><a href="#">Remaining Amount
	  <span class="pull-right text-red"><?=number_format($remaining_amount,2);?></span></a></li>
  </ul>
</div>
<!-- /.box -->
</section>
<script>
  $(function () {
//-------------
    //- PIE CHART -
    //-------------
    // Get context with jQuery - using jQuery's .get() method.
    var pieChartCanvas = $("#pieChart_payment").get(0).getContext("2d");
    var pieChart = new Chart(pieChartCanvas);
    var PieData = [
      {
        value: <?=$pay_amount;?>,
        color: "#f39c12",
        highlight: "#f39c12",
        label: "Paid"
      },
      {
        value: <?=$remaining_amount;?>,
        color: "#D81B60",
        highlight: "#D81B60",
        label: "Remaining"
      }
    ];
    var pieOptions = {
      //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke: true,
      //String - The colour of each segment stroke
      segmentStrokeColor: "#fff",
      //Number - The width of each segment stroke
      segmentStrokeWidth: 2,
      //Number - The percentage of the chart that we cut out of the middle
      percentageInnerCutout: 50, // This is 0 for Pie charts
      //Number - Amount of animation steps
      animationSteps: 100,
      //String - Animation easing effect
      animationEasing: "easeOutBounce",
      //Boolean - Whether we animate the rotation of the Doughnut
      animateRotate: true,
      //Boolean - Whether we animate scaling the Doughnut from the centre
      animateScale: false,
      //Boolean - whether to make the chart responsive to window resizing
      responsive: true,
      // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio: true,
      //String - A legend template
      legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
    };
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    pieChart.Doughnut(PieData, pieOptions);
  });
</script>