{% extends "super_admin_templates/base.html" %}
{% set path = "dashboard" %}
{% set subpath = "user_dashboard" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  {% with messages = get_flashed_messages() %}
  {% if messages %}
    <ul class=flashes>
    {% for message in messages %}
      <h2><b><center style="color:green">{{ message }}</center></b></h2>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}
  <style>
.canvasjs-chart-credit{
  display:none;
}
  </style>
<div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">User Dashboard</h1>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
</div>
	
	
  <section class="content-header">
  
   <div class="row">
          <div class="col-lg-4">
            <div class="card">
              <div class="card-header border-0">
                <div class="d-flex justify-content-between">
                  <h3 class="card-title">User Type Registration</h3>
                  <a href="javascript:void(0);">(Count Wise)</a>
                </div>
              </div>
              <div class="card-body">
                <div class="position-relative mb-4">
                  <div id="chartContainer" style="height: 370px; width: 100%;"></div>
                </div>
              </div>
            </div>
            <!-- /.card -->
            <!-- /.card -->
          </div>
          <!-- /.col-md-6 -->
          <div class="col-lg-4">
            <div class="card">
              <div class="card-header border-0">
                <div class="d-flex justify-content-between">
                  <h3 class="card-title">Welcome!</h3>
                </div>
              </div>
              <div class="card-body">
                <div class="position-relative mb-4">
				<div id="" style="height: 370px; width: 100%;"></div>
                </div>
              </div>
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col-md-6 -->
		  
		  <!-- /.col-md-6 -->
          <div class="col-lg-4">
            <div class="card">
              <div class="card-header border-0">
                <div class="d-flex justify-content-between">
                  <h3 class="card-title">User Type Wise Liability</h3>
                  <a href="javascript:void(0);">(Total Balance)</a>
                </div>
              </div>
              <div class="card-body">
                <div class="position-relative mb-4">
                 <div id="chartContainer3" style="height: 370px; width: 100%;"></div>
                </div>
              </div>
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col-md-6 -->
		  
		  
        </div>
        <!-- /.row -->
		
		
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="d-flex justify-content-between">
                        <h3 class="card-title">User Wise Count</h3>
                    </div>
                </div>
                <div class="card-body">
                <table id="example4" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                          <tr>
                           <th>User Type</th>
                           <th colspan='3'>User Count</th>
                           <th >Liability</th>
                         </tr>
						 <tr>
                           <th>(List of Users)</th>
                           <th>Daily</th>
                           <th>Weekly</th>
                           <th>Monthly</th>
						   <th>₹</th>
                         </tr>
                       </thead>
                       <tbody>
					   <tr>
                           <td>Master Distributor</td>
                           <td>0</td>
                           <td>0</td>
                           <td>1</td>
                           <td>	0.15</td>
                         </tr>
						   <tr>
                           <td>Area Distributor</td>
                           <td>0</td>
                           <td>0</td>
                           <td>1</td>
                           <td>0.15</td>
                         </tr>
						   <tr>
                           <td>Customer</td>
                           <td>0</td>
                           <td>0</td>
                           <td>1</td>
                           <td>405.86</td>
                         </tr>
                        </tbody>
                          
                        </table>
                </div>
            </div>
            <!-- /.card -->
            <!-- /.card -->
        </div>
    </div>
	<div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="d-flex justify-content-between">
                        <h3 class="card-title">Top Performing Retailers</h3>
                    </div>
                </div>
                <div class="card-body">
                <table id="example4" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                          <tr>
                           <th>Sr No</th>
                           <th >Username</th>
                           <th>Owner Name</th>
                           <th>Company Name</th>
                           <th>Total Transaction</th>
                           <th>	Total Volume</th>
                         </tr>
                       </thead>
                       <tbody>
					   <tr>
                           <td>1</td>
                           <td>8805298484</td>
                           <td>VK one</td>
                           <td>-</td>
                           <td>19</td>
                           <td>574.00</td>
                         </tr>
						   
                        </tbody>
                          
                        </table>
                </div>
            </div>
            <!-- /.card -->
            <!-- /.card -->
        </div>
    </div>
	
	<div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="d-flex justify-content-between">
                        <h3 class="card-title">Top Performing Distributers</h3>
                    </div>
                </div>
                <div class="card-body">
                <table id="example4" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                          <tr>
                           <th>Sr No</th>
                           <th >Username</th>
                           <th>Owner Name</th>
                           <th>Company Name</th>
                           <th>Total Transaction</th>
                           <th>	Total Volume</th>
                         </tr>
                       </thead>
                       <tbody>
					   <tr>
                           <td colspan="6">No Data Found</td>
                         </tr>
						   
                        </tbody>
                          
                        </table>
                </div>
            </div>
            <!-- /.card -->
            <!-- /.card -->
        </div>
    </div>
</section>
<script type="text/javascript">
window.onload = function() {

var options = {
	animationEnabled: true,
	data: [{
			type: "pie",
			startAngle: 45,
			showInLegend: "true",
			legendText: "{label}",
			indexLabel: "{label} ({y})",
			yValueFormatString:"#,##0.#"%"",
			dataPoints: [
				{ label: "Master Distributor", y: 1 },
				{ label: "Area Distributor", y: 1 },
				{ label: "Customer", y: 1 },
			]
	}]
};
$("#chartContainer").CanvasJSChart(options);

var options3 = {
	animationEnabled: true,
	data: [{
		type: "doughnut",
		innerRadius: "40%",
		showInLegend: true,
		legendText: "{label}",
		indexLabel: "{label}: ({y})",
		dataPoints: [
			{ label: "Master Distributor", y: 0.15 },
			{ label: "Area Distributor", y: 0.15 },
			{ label: "Customer", y: 405.86 },
		]
	}]
};
$("#chartContainer3").CanvasJSChart(options3);
}
</script>
<script type="text/javascript" src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
</div>
     {%endblock%}