{% extends 'admin_layout_two.html' %}
{% load static %}
{% block content %}

<!--Content body start-->
<title>Beni | Dashboard</title>
<div class="content-body">

    <div class="container-fluid mt-3">
        <div class="row">
            <div class="col-lg-3 col-sm-6" >
                <div class="card gradient-1" onclick="location.href='/stores-report-section'" style="cursor: pointer;">
                    <div class="card-body">
                        <h3 class="card-title text-white">Total orders</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{total_orders}}</h2>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-shopping-cart"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card gradient-1" style="cursor: pointer;">
                    <div class="card-body">
                        <h3 class="card-title text-white">Total Earnings</h3>
                        <div class="d-inline-block">
                            <h4 class="text-white">SAR {{ total_earnings|floatformat }}</h4>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-money"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card gradient-1" onclick="location.href='/user-lisiting'" style="cursor: pointer;">
                    <div class="card-body">
                        <h3 class="card-title text-white">Total Customers</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{total_customer}}</h2>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-users"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card gradient-1" onclick="location.href='/store-listing'" style="cursor: pointer;">
                    <div class="card-body">
                        <h3 class="card-title text-white">Total Stores</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{total_store}}</h2>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-heart"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-md-8">
                <div class="card" style="padding: 30px; ">
                    <div class="">
                        <canvas id="users"></canvas>
                    </div>
                </div>
            </div> 
            <div class="col-lg-4 col-md-4">
                <div class="card" style="padding: 30px; ">
                    <div class="">
                        <canvas id="store_cutomers"></canvas>
                    </div>
                </div>
            </div> 
        </div>
        
        <div class="row">
            <div class="col-lg-12 col-md-12">
            <div class="card" style="padding: 30px; ">
                <div class="">
                    <canvas id="stores"></canvas>
                </div>
            </div>
            </div> 
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12">
            <div class="card" style="padding: 30px; ">
                <div class="">
                    <canvas id="orders"></canvas>
                </div>
            </div>
            </div> 
        </div>

        {% comment %} <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body pb-0 d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-1">Product Sales</h4>
                                    <p>Total Earnings of the Month</p>
                                    <h3 class="m-0">$ 12,555</h3>
                                </div>
                                <div>
                                    <ul>
                                        <li class="d-inline-block mr-3"><a class="text-dark" href="#">Day</a></li>
                                        <li class="d-inline-block mr-3"><a class="text-dark" href="#">Week</a></li>
                                        <li class="d-inline-block"><a class="text-dark" href="#">Month</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="chart-wrapper">
                                <canvas id="chart_widget_2"></canvas>
                            </div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div class="w-100 mr-2">
                                        <h6>Pixel 2</h6>
                                        <div class="progress" style="height: 6px">
                                            <div class="progress-bar" style="width: 40%; background: #e2c38a;"></div>
                                        </div>
                                    </div>
                                    <div class="ml-2 w-100">
                                        <h6>iPhone X</h6>
                                        <div class="progress" style="height: 6px">
                                            <div class="progress-bar" style="width: 80%; background-color: #bc9948;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="social-graph-wrapper widget-facebook">
                        <span class="s-icon"><i class="fa fa-facebook"></i></span>
                    </div>
                    <div class="row">
                        <div class="col-6 border-right">
                            <div class="pt-3 pb-3 pl-0 pr-0 text-center">
                                <h4 class="m-1">89k</h4>
                                <p class="m-0">Friends</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="pt-3 pb-3 pl-0 pr-0 text-center">
                                <h4 class="m-1">119k</h4>
                                <p class="m-0">Followers</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="social-graph-wrapper widget-linkedin">
                        <span class="s-icon"><i class="fa fa-linkedin"></i></span>
                    </div>
                    <div class="row">
                        <div class="col-6 border-right">
                            <div class="pt-3 pb-3 pl-0 pr-0 text-center">
                                <h4 class="m-1">89k</h4>
                                <p class="m-0">Friends</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="pt-3 pb-3 pl-0 pr-0 text-center">
                                <h4 class="m-1">119k</h4>
                                <p class="m-0">Followers</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="social-graph-wrapper widget-googleplus">
                        <span class="s-icon"><i class="fa fa-google-plus"></i></span>
                    </div>
                    <div class="row">
                        <div class="col-6 border-right">
                            <div class="pt-3 pb-3 pl-0 pr-0 text-center">
                                <h4 class="m-1">89k</h4>
                                <p class="m-0">Friends</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="pt-3 pb-3 pl-0 pr-0 text-center">
                                <h4 class="m-1">119k</h4>
                                <p class="m-0">Followers</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="social-graph-wrapper widget-twitter">
                        <span class="s-icon"><i class="fa fa-twitter"></i></span>
                    </div>
                    <div class="row">
                        <div class="col-6 border-right">
                            <div class="pt-3 pb-3 pl-0 pr-0 text-center">
                                <h4 class="m-1">89k</h4>
                                <p class="m-0">Friends</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="pt-3 pb-3 pl-0 pr-0 text-center">
                                <h4 class="m-1">119k</h4>
                                <p class="m-0">Followers</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Order Summary</h4>
                        <div id="morris-bar-chart"></div>
                    </div>
                </div>

            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card card-widget">
                    <div class="card-body">
                        <h5 class="text-muted">Order Overview </h5>
                        <h2 class="mt-4">5680</h2>
                        <span>Total Revenue</span>
                        <div class="mt-4">
                            <h4>30</h4>
                            <h6>Online Order <span class="pull-right">30%</span></h6>
                            <div class="progress mb-3" style="height: 7px">
                                <div class="progress-bar bg-primary" style="width: 30%;" role="progressbar"><span
                                        class="sr-only">30% Order</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4">
                            <h4>50</h4>
                            <h6 class="m-t-10 text-muted">Offline Order <span class="pull-right">50%</span></h6>
                            <div class="progress mb-3" style="height: 7px">
                                <div class="progress-bar bg-success" style="width: 50%;" role="progressbar"><span
                                        class="sr-only">50% Order</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4">
                            <h4>20</h4>
                            <h6 class="m-t-10 text-muted">Cash On Develery <span class="pull-right">20%</span></h6>
                            <div class="progress mb-3" style="height: 7px">
                                <div class="progress-bar bg-warning" style="width: 20%;" role="progressbar"><span
                                        class="sr-only">20% Order</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card">
                    <div class="card-body px-0">
                        <h4 class="card-title px-4 mb-3">Todo</h4>
                        <div class="todo-list">
                            <div class="tdl-holder">
                                <div class="tdl-content">
                                    <ul id="todo_list">
                                        <li><label><input type="checkbox"><i></i><span>Get up</span><a href='#'
                                                    class="ti-trash"></a></label></li>
                                        <li><label><input type="checkbox" checked><i></i><span>Stand up</span><a
                                                    href='#' class="ti-trash"></a></label></li>
                                        <li><label><input type="checkbox"><i></i><span>Don't give up the fight.</span><a
                                                    href='#' class="ti-trash"></a></label></li>
                                        <li><label><input type="checkbox" checked><i></i><span>Do something
                                                    else</span><a href='#' class="ti-trash"></a></label></li>
                                    </ul>
                                </div>
                                <div class="px-4">
                                    <input type="text" class="tdl-new form-control"
                                        placeholder="Write new item and hit 'Enter'...">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>




        <div class="row">

            <div class="col-xl-6 col-lg-12 col-sm-12 col-xxl-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-0">Store Location</h4>
                        <div id="world-map" style="height: 470px;"></div>
                    </div>
                </div>
            </div>
        </div> {% endcomment %}




    </div>
    <!-- #/ container -->
</div>
<!--Content body end-->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>

const ctx = document.getElementById('users');
let user_data = '{{ customers }}'
user_count1 = JSON.parse(user_data)
var xValues = ["January", "February", "March", "April", "May", "June", "July","August", "September", "October", "November", "December"];
var yValues = [55, 49, 44, 24, 15,22,54,67,24,55,66];
var barColors = ["rgba(255, 99, 132, 0.8)", "rgba(255, 159, 64, 0.8)","rgba(255, 205, 86, 0.8)","rgba(54, 162, 235, 0.8)","rgba(75, 192, 192, 0.8)","rgba(54, 162, 235, 0.8)","rgba(153, 102, 255, 0.8)","rgba(201, 203, 207, 0.8)", "rgba(255, 99, 132, 0.8)","rgba(205, 199, 132, 0.8)","rgba(223, 200, 132, 0.8)","rgba(201, 211, 132, 0.8)"];

new Chart(users, {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      label: 'customers',
      backgroundColor: barColors,
      data: user_count1
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "Users Count"
    }
  }
}); 

const ctxy = document.getElementById('stores');
let store_data = '{{ stores }}'
store_count1 = JSON.parse(store_data)
var xValues = ["January", "February", "March", "April", "May", "June", "July","August", "September", "October", "November", "December"];
var yValues = [55, 49, 44, 24, 15,22,54,67,24,55,66];
var barColors = ["rgba(255, 99, 132, 0.8)", "rgba(255, 159, 64, 0.8)","rgba(255, 205, 86, 0.8)","rgba(54, 162, 235, 0.8)","rgba(75, 192, 192, 0.8)","rgba(54, 162, 235, 0.8)","rgba(153, 102, 255, 0.8)","rgba(201, 203, 207, 0.8)", "rgba(255, 99, 132, 0.8)","rgba(205, 199, 132, 0.8)","rgba(223, 200, 132, 0.8)","rgba(201, 211, 132, 0.8)"];

new Chart(stores, {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      label: 'Stores',
      backgroundColor: barColors,
      data: store_count1
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "Store Count"
    }
  }
});

const ctxyz = document.getElementById('orders');
let orders_data = '{{ orders }}'
order_count1 = JSON.parse(orders_data)
var xValues = ["January", "February", "March", "April", "May", "June", "July","August", "September", "October", "November", "December"];
var yValues = [55, 49, 44, 24, 15,22,54,67,24,55,66];
var barColors = ["rgba(255, 99, 132, 0.8)", "rgba(255, 159, 64, 0.8)","rgba(255, 205, 86, 0.8)","rgba(54, 162, 235, 0.8)","rgba(75, 192, 192, 0.8)","rgba(54, 162, 235, 0.8)","rgba(153, 102, 255, 0.8)","rgba(201, 203, 207, 0.8)", "rgba(255, 99, 132, 0.8)","rgba(205, 199, 132, 0.8)","rgba(223, 200, 132, 0.8)","rgba(201, 211, 132, 0.8)"];

new Chart(orders, {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      label: 'orders',
      backgroundColor: barColors,
      data: order_count1
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "Orders"
    }
  }
});

const ctxx = document.getElementById('store_cutomers');
new Chart(ctxx, {
  type: 'doughnut',
  data: {
    labels: [
    'Store',
    'Cutomers',
  ],
  datasets: [{
    label: '',
    data: ['{{total_customer}}','{{total_store}}'],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
    ],
    hoverOffset: 4
  }]
  },
}); 

</script>

{% endblock %}