{% extends 'base/base.html' %}

{% load static %}
{% load index %}

{% block title %} Add attendance {% endblock %}

{% block body %}
    {% include 'base/nav-bar.html' %}
    <div id="wrap">
        <div id="main">
            <!-- content goes here -->
            <div class="container graph-div">
                <div class="row">
                    {% if errors %}
                        <div class="col-md-12">
                            <div class="alert alert-danger" role="alert">
                              <strong>Oh snap!</strong> {{ errors }}
                            </div>
                        </div>
                    {% else %}
                        <div class="col-md-10">
                            <h2>{{ user.first_name }} {{ user.last_name }}</h2>
                            <hr>
                            <canvas id="myChart" width="400" height="400"></canvas>
                        </div>
                        <div class="col-md-2">
                            <div class="col-md-12">
                                <h2>{{ year }}</h2>
                            </div>
                            <hr>
                            {% for i in month_num %}
                            <div class="col-md-12">
                                <p>{{ month|index:i }} - {{ month_att|index:i }}</p>
                            </div>
                            {% endfor %}
                        </div>

                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% include 'base/footer.html' %}

    <script src="{% static 'base/js/chart-bundle.js'%}"></script>

    <script>

        window.chartColors = {
            red: 'rgb(255, 99, 132)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 205, 86)',
            green: 'rgb(75, 192, 192)',
            blue: 'rgb(54, 162, 235)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(201, 203, 207)'
        };

        var MONTHS = [
            {% for i in month %}
                    '{{ i }}',
                {% endfor %}
        ];
        var config = {
            type: 'line',
            data: {
                labels: MONTHS,
                datasets: [{
                    label: "{{ user.first_name }} {{ user.last_name }}",
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: [
                        {% for i in month_att %}
                            {{ i }},
                        {% endfor %}
                    ],
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title:{
                    display:true,
                    text:'Attendance report'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Months'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Number of days'
                        }
                    }]
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById("myChart").getContext("2d");
            window.myLine = new Chart(ctx, config);
        };

    </script>

    <style>
        .graph-div {
            margin-top: 40px;
        }
        canvas {
            max-height: 500px;
        }
    </style>
{% endblock %}