{% extends "layout.html" %}

{% block left_top_bar %}
    <button class="uk-button uk-button-default uk-button-small uk-border-rounded"
        uk-toggle="target: #charts-container">Show/Hide Charts</button>
{% endblock %}

{% block center_top_bar %}
    <h4 class="uk-text-center">{{ product.name }}</h4>
{% endblock %}

{% block content %}
    <div id="charts-container" uk-grid hidden>
        <div class="uk-width-1-1">
            <canvas id="time-chart"></canvas>
        </div>
    </div>
    <table id="products" class="uk-table uk-table-small uk-table-striped uk-table-hover uk-margin-large-left">
        <thead>
            <tr>
                <th>Stock</th>
                <th>Price (Raw)</th>
                <th>Price (Cvt)</th>
                <th>Update</th>
            </tr>
        </thead>
        <tbody>
            {% for entry in product.entries %}
                <tr>
                    <td>{{ entry.stock }}</td>
                    <td>{{ entry.raw_price }}</td>
                    <td>A${{ entry.price }}</td>
                    <td>{{ entry.date.isoformat() }}</td>
                </tr>
            {% endfor %}
        </tbody>
        <caption class="uk-margin-small-bottom">{{ product.entries | length }} total entries.</caption>
    </table>
{% endblock %}

{% block pagescripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script>
    /* Chart.js */
    var item_labels = [
        "{{ product.name }}",
    ];
    var time_data = [
        {% for entry in product.entries %}
            {x: "{{ entry.date.isoformat() }}", y: {{ entry.stock }}},
        {% endfor %}
    ];

    function init_time_chart(labels, timedata) {
        var ctx = document.getElementById("time-chart").getContext('2d');
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Entries',
                        backgroundColor: 'rgb(93, 173, 226)',
                        borderColor: 'rgb(89, 131, 227)',
                        fill: false,
                        data: timedata,
                    }
                ],
            },
            options: {
                responsive: true,
                title: { display: true, text: 'Entries'},
                scales: {
                    xAxes: [
                        {
                            type: 'time',
                            distribution: 'series',
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Date'
                            },
                            time: {
                                unit: 'day',
                                unitStepSize: 1,
                                displayFormats: {
                                    day: 'MMM D YYYY h:mm a'
                                }
                            },
                            ticks: {
                                major: {
                                    fontStyle: "bold",
                                    fontColor: "#FF0000"
                                },
                                source: 'data'
                            }
                        }
                    ],
                    yAxes: [
                        {
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Stock'
                            }
                        }
                    ]
                }
            }
        });
    }

    /* On Page Ready */
    document.addEventListener("DOMContentLoaded", function(event) {
        init_time_chart(item_labels, time_data);
    });
</script>
{% endblock %}