{% extends 'economy/economy_base.html.twig' %}

{% block title %}{{ item.name }}{% endblock %}

{% block right %}
    {% if priceHistories is empty %}
        <div class="row">
            <div class="col">
                <div class="h-100 p-3 bg-white border rounded-3 text-center">
                    <div class="fw-bold">{{ item.name }}</div>
                    <div class="pt-2"><img src="{{ item.icon }}"></div>
                    <div class="display-6 fw-bold">No data yet!</div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="row">
            <div class="col">
                <div class="h-100 p-3 bg-grey border rounded-3 text-center">
                    <div class="display-6 fw-bold">{{ item.name }}</div>
                    <div class="pt-2"><img src="{{ item.icon }}"></div>
                    <div><p>All prices are expressed in chaos</p></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="align-items-md-stretch">
                    {% set displayBetween = 'Seller has stock' %}
                    {% for chunk in priceHistories|batch(2) %}
                        <div class="row">
                            {% for key, histories in chunk %}
                                <div class="col-md-6 mb-1">
                                    <div class="card mb-2 rounded-3 shadow-sm">
                                        <div class="card-header py-3">
                                            {% if histories[0].getQuantityBetween is not empty  %}
                                                {% if displayBetween == 'Seller has stock' %}
                                                    {% if histories[0].getQuantityBetween[1] is null %}
                                                        {% set displayBetween = displayBetween ~ ' larger than ' ~ histories[0].getQuantityBetween[0] %}
                                                    {% else %}
                                                        {% set displayBetween = displayBetween ~ ' between ' ~ histories[0].getQuantityBetween[0] ~ ' and ' ~ histories[0].getQuantityBetween[1] %}
                                                    {% endif %}
                                                {% endif %}
                                                {{ displayBetween|trim('and ', 'right') }}
                                                {% set displayBetween = 'Seller has stock' %}
                                            {% endif %}
                                        </div>
                                        <div class="card-body">
                                            <div>
                                                <canvas id="chart{{ key }}"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}
    {% block javascripts %}
        {{ parent() }}
        {% if priceHistories is not empty %}

        <script>
            document.onreadystatechange = function () {
                let data, labels;
                if (document.readyState === "complete") {
                    {% for chunk in priceHistories|batch(2) %}
                    {% for key, histories in chunk %}
                    data = [];
                    labels = [];
                    {% for history in histories %}
                    data.push(Number({{ history.getPriceAggregate }}).toFixed(2))
                    labels.push('{{ history.getCreatedAt.format('m/d H:i') }}')
                    {% endfor %}
                    new Chart(document.getElementById('chart{{ key }}').getContext('2d'), {
                        plugins: [ChartDataLabels],
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: [{
                                data: data,
                                borderWidth: 1
                            }]
                        },
                        options: {
                            plugins: {
                                legend: {
                                    display: false
                                },
                                datalabels: {
                                    anchor: 'end',
                                    align: 'end',
                                    font: {
                                        weight: 'bold',
                                    },
                                    formatter: function (value, context) {
                                        return value;
                                    }
                                }
                            },
                        }
                    });
                    {% endfor %}
                    {% endfor %}
                }
            };
        </script>
    {% endif %}
{% endblock %}