{% extends 'Admin/Sidebar2.html' %}
{% block content %}
{% load widget_tweaks %}
{%load static%}
<head>
        <!-- Font special for pages-->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

        <!-- ChartJs CDN-->
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>

        <link href="{% static "css/main.css" %}"rel="stylesheet" media="all">
</head>
<style>

.my-card:hover{
    transform: scale(1.1);
    transition: 0.2s ease-in-out;
}
</style>

<!-- <div class=">
    <div class="wrapper wrapper">

        <div style="margin-left: 0px;" class="card card-5">

            {% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li  {% if message.tags %} class=" {{ message.tags }} " {% endif %}> {{ message }} </li>
    {% endfor %}
</ul>
{% endif %} -->

            <!--<div class="card-heading">
                <h2 class="title">  SERVPORT</h2>
            </div>
            <div class="card-body">


                <center>
     <h1>     ------</h1></center>
                <br>


            </div>
        </div> -->

            <div class="container">
              <div class="row" style="margin-top: 70px;">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-secondary text-white">
                            Statistics
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <a class="text-decoration-none text-dark">
                                        <div class="card my-card shadow text-center p-3">
                                            <h4>Service Bookings <i class="fas fa-car"></i> </h4>
                                            <h3>500</h3>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-4">
                                    <a class="text-decoration-none text-dark">
                                        <div class="card my-card shadow text-center p-3">
                                            <h4>Employees <i class="fas fa-user"></i></i> </h4>
                                            <h3>5</h3>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-4">
                                    <a class="text-decoration-none text-dark">
                                        <div class="card my-card shadow text-center p-3">
                                            <h4>Stock Quantity <i class="fas fa-shipping-fast"></i></i> </h4>
                                            <h3>60</h3>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                   <div>
                </div>
            </div>

            <div class="container">
                <div class="row" style="margin-top: 20px;">
                    <div class="col-md-12">

                        <canvas id="myChart" height="100px"></canvas>
                        <script>
                        const ctx = document.getElementById('myChart').getContext('2d');
                        const myChart = new Chart(ctx, {
                            type: 'line',
                            data: {
                                labels: ['February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'],
                                datasets: [{
                                    label: 'Number of Service bookings',
                                    data: [6, 15, 8, 5, 10, 6, 12, 9, 15],
                                    backgroundColor: [
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(54, 162, 235, 0.2)'
                                    ],
                                    borderColor: [
                                        'rgba(54, 162, 235, 2)',
                                        'rgba(54, 162, 235, 2)',
                                        'rgba(54, 162, 235, 2)',
                                        'rgba(54, 162, 235, 2)',
                                        'rgba(54, 162, 235, 2)',
                                        'rgba(54, 162, 235, 2)',
                                        'rgba(54, 162, 235, 2)',
                                        'rgba(54, 162, 235, 2)',
                                        'rgba(54, 162, 235, 2)'
                                    ],
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            }
                        });
                    </script>
                </div>
            </div>
        </div>

    <div class="alert alert-primary fixed-bottom mb-0 text-center" style="background: #747578; border: none; color: white;" role="alert"  > © SERVPORT 2022   </div>
</div>

{% endblock content %}
