<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<div class="clearfix"></div>
  <div class="content-wrapper">
    <div class="container-fluid">

      <div class="row mt-4">

        <div class="col-12 col-lg-6 col-xl-3">

          <div class="card gradient-purpink">

            <div class="card-body">

              <div class="media">
			  <?php $this->db->select("*");
					$this->db->from("agents");
					//$this->db->join("cities","cities.city_id=agents.ag_city","left");
					$this->db->where("agents.staff_id",$this->uri->segment(3));
					//$this->db->order_by("agents.ag_id","desc");
					$total_dist=$this->db->get()->num_rows();?>
              <a href="#" class="media-body text-left">

                <h4 class="text-white"><?php echo $total_dist;?></h4>

                <span class="text-white">Total Distributors</span>

              </a>

			  <div class="align-self-center"><i class="fa fa-users fa-3x"></i></div>

            </div>

            </div>

          </div>

        </div>

		<div class="col-12 col-lg-6 col-xl-3">

          <div class="card gradient-scooter">

            <div class="card-body">

              <div class="media">

              <a href="<?php //echo base_url().'admin/distributors';?>" class="media-body text-left">
				<?php $total_sell=0;
				  if($this->db->get_where("orders",array("order_staff"=>$this->uri->segment(3),"ostatus"=>"Completed"))->num_rows()>0){
				  $this->db->select_sum('ototal');  
					  //$this->db->where("dep_status","Pending"); 
				  $this->db->where("order_staff",$this->uri->segment(3));
				  $chk= $this->db->get('orders')->row();
				  $total_sell=$total_sell->ototal;
				  }
				?>
                <h4 class="text-white"><?php echo $total_sell;?></h4>

                <span class="text-white">Total Sell</span>

              </a>

			  <div class="align-self-center"><i class="fa fa-inr fa-3x"></i></div>

            </div>

            </div>

          </div>

        </div>

        <div class="col-12 col-lg-6 col-xl-3">

          <div class="card gradient-ibiza">

            <div class="card-body">

              <div class="media">

			  <a href="#" class="media-body text-left">
				<?php $total_coll=0; 
				  if($this->db->get("wallet")->num_rows()>0){
					  $this->db->select_sum('trans_amt');  
					  $this->db->where("trans_type","Credit"); 
					  $this->db->where("wallet_staff_id",$this->uri->segment(3));
					  $chk= $this->db->get('wallet')->row();
					  $total_coll=$chk->trans_amt;
				  }
				  if($this->db->get_where("orders",array("order_staff"=>$this->uri->segment(3),"ostatus"=>"Completed"))->num_rows()>0){
				  $this->db->select_sum('ototal');  
				  $this->db->where("ostatus","Completed"); 
				  $this->db->where("order_staff",$this->uri->segment(3));
				  $chk= $this->db->get('orders')->row();
				  $total_coll=$chk->ototal;
				  }
				?>
                <h4 class="text-white"><?php echo $total_coll;?></h4>

                <span class="text-white">Total Collection</span>

              </a>

               <div class="align-self-center"><i class="fa fa-inr fa-3x"></i></div>

            </div>

            </div>

          </div>

        </div>
        
        <div class="col-12 col-lg-6 col-xl-3">

          <div class="card gradient-purpink">

            <div class="card-body">

              <div class="media">

              <a href="#" class="media-body text-left">

                <?php $total_out=0; 
				  if($this->db->get_where("orders",array("order_staff"=>$this->uri->segment(3),"ostatus"=>"Delivered"))->num_rows()>0){
				  $this->db->select_sum('ototal');  
				  $this->db->where("ostatus","Delivered"); 
				  $this->db->where("order_staff",$this->uri->segment(3));
				  $chk= $this->db->get('orders')->row();
				  $total_out=$chk->ototal;
				  }
				?>
                <h4 class="text-white"><?php echo $total_out;?></h4>

                <span class="text-white">Total Outstanding</span>

              </a>

			  <div class="align-self-center"><i class="fa fa-inr fa-3x"></i></div>

            </div>

            </div>

          </div>

        </div>

      </div><!--End Row-->
	  <style>
		#chartdiv {
		  width: 100%;
		  height: 500px;
		}
		#chartdiv2 {
		  width: 100%;
		  height: 250px;
		}
		#chartdiv3 {
		  width: 100%;
		  height: 500px;
		}
	  </style>
      
      <div class="row">
   		 <div id="chartdiv" class="col-md-6" style="background:#FFF; margin-top:20px;"></div>
         <div class="col-md-6" id="chartdiv2" style="background:#FFF; margin-top:20px;"></div>
      </div>
	  
    </div><!--End content-wrapper-->

   <!--Start Back To Top Button-->

    <a href="#" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>

    <!--End Back To Top Button-->

	

	<!--Start footer-->

	<footer class="footer">

      <div class="container">

        <div class="text-center">

          Copyright © 2022

        </div>

      </div>

    </footer>

	<!--End footer-->

   

  </div><!--End wrapper-->


<script>
am5.ready(function() {


var root = am5.Root.new("chartdiv2");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);

// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(
  am5percent.PieChart.new(root, {
    endAngle: 270
  })
);

// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series = chart.series.push(
  am5percent.PieSeries.new(root, {
    valueField: "value",
    categoryField: "category",
    endAngle: 270
  })
);

series.states.create("hidden", {
  endAngle: -90
});

// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([<?php 
		$total_oitems=$this->db->get_where("order_items",array("order_item_staff"=>$this->uri->segment(3)))->num_rows();
		$this->db->order_by("msort","asc");
		$cats=$this->db->get_where("mcategory",array("mcat_status"=>""))->result();
		foreach($cats as $cat){
			$item=$this->db->get_where("order_items",array("item_category"=>$cat->mid,"order_item_staff"=>$this->uri->segment(3)))->num_rows();
			$percent=round($item*100/$total_oitems);
			if($percent>0){$percent=$percent;}else{$percent=0;}
			?>{
		  category: "<?php echo $cat->mcat_name;?>",
		  value: <?php echo $percent;?>
		}, <?php }?>]);

series.appear(1000, 100);

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");


// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);


// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  panY: true,
  wheelX: "panX",
  wheelY: "zoomX",
  pinchZoomX:true
}));

// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
cursor.lineY.set("visible", false);


// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
xRenderer.labels.template.setAll({
  rotation: -90,
  centerY: am5.p50,
  centerX: am5.p100,
  paddingRight: 15
});

var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  maxDeviation: 0.3,
  categoryField: "country",
  renderer: xRenderer,
  tooltip: am5.Tooltip.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  maxDeviation: 0.3,
  renderer: am5xy.AxisRendererY.new(root, {})
}));


// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  name: "Series 1",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  sequencedInterpolation: true,
  categoryXField: "country",
  tooltip: am5.Tooltip.new(root, {
    labelText:"{valueY}"
  })
}));

series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
series.columns.template.adapters.add("fill", function(fill, target) {
  return chart.get("colors").getIndex(series.columns.indexOf(target));
});

series.columns.template.adapters.add("stroke", function(stroke, target) {
  return chart.get("colors").getIndex(series.columns.indexOf(target));
});


// Set data
var data = [{
  country: "Target",
  value: <?php echo $staff->staff_target;?>
}, {
  country: "Sell",
  value: <?php echo $total_sell;?>
}, {
  country: "Collection",
  value: <?php echo $total_coll;?>
}, {
  country: "Outstanding",
  value: <?php echo $total_out;?>
}];

xAxis.data.setAll(data);
series.data.setAll(data);


// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);

}); // end am5.ready()
</script>

  <script src="<?php echo base_url();?>adminassets/js/sidebar-menu.js"></script>
  <!-- Custom scripts -->

  <script src="<?php echo base_url();?>adminassets/js/app-script.js"></script>

  

  <!-- Vector map JavaScript -->

  <!-- Index js -->

  <script src="<?php echo base_url();?>adminassets/js/index.js"></script>

  

</body>

</html>

