{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
<style>
.cards-store h2 {
    font-size: 23px;
}
</style>
<title>Beni | Dashboard</title>

<!--Content body start-->
<div class="content-body">

    <div class="container-fluid mt-3 store-dashboard">
        <div class="row cards-store">
            <div class="col-lg-4 col-sm-6" onclick="location.href='/product-listing-store'" style="cursor:pointer;">
                <div class="card gradient-1">
                    <div class="card-body">
                        <h3 class="card-title text-black">Total Products</h3>
                        <div class="d-inline-block">
                            <h2 class="yellow">{{total_products}}</h2>
                        </div>
                        <div class="store-dsin"><i class="fa fa-shopping-cart"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6" onclick="location.href='/order-listing-store'" style="cursor:pointer;">
                <div class="card gradient-1">
                    <div class="card-body">
                        <h3 class="card-title">Total Orders</h3>
                        <div class="d-inline-block">
                            <h2 class="yellow">{{order_count}}</h2>
                        </div>
                        <div class="store-dsin"><i class="fa fa-list-alt" aria-hidden="true"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6" onclick="location.href='/service-request-list'" style="cursor:pointer;">
                <div class="card gradient-1">
                    <div class="card-body">
                        <h3 class="card-title">Total Services</h3>
                        <div class="d-inline-block">
                            <h2 class="yellow">{{total_service_request}}</h2>
                        </div>
                        <div class="store-dsin"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></div>
                    </div>
                </div>
            </div>
            {% comment %} <div class="col-lg-3 col-sm-6" style="cursor:pointer;">
                <div class="card gradient-1">
                    <div class="card-body">
                        <h3 class="card-title">Total Earnings</h3>
                        <div class="d-inline-block">
                            <h2 class="yellow">SAR {{total_earning|floatformat:"-2"}}</h2>
                        </div>
                        <div class="store-dsin"><i class="fa fa-money" aria-hidden="true"></i></div>
                    </div>
                </div>
            </div> {% endcomment %}
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                <div class="card" style="padding: 30px; ">
                    <div class="">
                        <canvas id="orders"></canvas>
                    </div>
                </div>
                </div> 
                <div class="col-md-6">
                <div class="card" style="padding: 30px; ">
                    <div class="">
                        <canvas id="services"></canvas>
                    </div>
                </div>
                </div> 
            </div>
        </div>
    </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 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 ctxy = document.getElementById('services');
let store_data = '{{ services }}'
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(services, {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      label: 'Service Request',
      backgroundColor: barColors,
      data: store_count1
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "Service Request"
    }
  }
});

</script>


{% endblock %}