{% extends 'layouts/base.html' %}
{% load static %}

{% block extra_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'report/css/dashboard.css' %}">
{% endblock extra_css %}

{% block content %}
    <div class="dashboard-header">
        <h1 class="page-title">Painel</h1>
        <a hx-get="{% url "report:request_report" %}" hx-swap="beforeend" hx-target="body" class="generate-report-button"><i class="fa-solid fa-file-arrow-down"></i> Exportar relatório completo</a>
    </div>

    <div class="dashboard-farm">
        <h2 class="dashboard-subtitle">{{ farm.name }}</h2>
        <div class="dashboard-farm-cards-container">
            {% for card in farmcards %}
                <div class="dashboard-farm-infocard">
                    <p class="title">{{ card.title }}</p>
                    <p class="info">{{ card.info }}</p>
                </div>
            {% endfor %}
        </div>
    </div>
    
    {% if warnings %}
    <div class="dashboard-warnings" id="dashboard-warnings">
        <h2 class="dashboard-subtitle"><i class="fa-solid fa-triangle-exclamation"></i> Avisos <i class="fa-solid fa-angle-down warnings-toggler" id="warnings-toggler"></i></h2>
        <p class="subtitle-footer">Últimos 12 meses</p>
        <div class="warnings-container">
        {% for warning in warnings %}
            <div class="warning">
                <p class="warning-description">{{ warning }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="dashboard-rotation">
        <h2 class="dashboard-subtitle"><i class="fa-solid fa-arrows-spin"></i> Movimentações</h2>
        <p class="subtitle-footer">Últimos 12 meses</p>
        <div class="dashboard-rotation-cards-container">
            <div class="rotation-info-card">
                <p class="title">Tempo de Ocupação Médio</p>
                <p class="info">{{ average_occupation }} dias</p>
            </div>
            <div class="rotation-info-card">
                <p class="title">Tempo de Repouso Médio</p>
                <p class="info">{{ average_rest }} dias</p>
            </div>
            <div class="rotation-info-card">
                <p class="title">Movimentações realizadas</p>
                <p class="info">{{ rotation_count }}</p>
            </div>
        </div>
        <div class="dashboard-rotation-graphs">
            <div class="average-rotation-month">
                <p class="graph-title">Média de ocupação por mês</p>
                <canvas id="occupation-chart"></canvas>
            </div>
            <div class="average-rest-month">
                <p class="graph-title">Média de repouso por mês</p>
                <canvas id="rest-chart"></canvas>
            </div>
        </div>
    </div>

    <div class="dashboard-consumption-production">
        <h2 class="dashboard-subtitle"><i class="fa-solid fa-seedling"></i> Consumo e Produção</h2>
        <p class="subtitle-footer">Últimos 12 meses</p>
        <div class="consumption-production-grid">
            <div class="dashboard-consumption-container">
                <div class="consumption-card-container">
                    <div class="consumption-card">
                        <p class="title">Consumo Total</p>
                        <p class="info">{{ total_consumed }} Mg</p>
                    </div>
                    <div class="consumption-card">
                        <p class="title">Consumo por piquete</p>
                        <p class="info">{{ average_paddock_consumption }} Mg</p>
                    </div>
                </div>
                <div class="consumption-graph-container">
                    <div class="consumption-graph">
                        <p class="graph-title">Média mensal de consumo por piquete</p>
                        <canvas id="consume-chart"></canvas>
                    </div>
                </div>
            </div>
            <div class="dashboard-production-container">
                <div class="production-card-container">
                    <div class="production-card">
                        <p class="title">Produção Total</p>
                        <p class="info">{{ total_produced }} Mg</p>
                    </div>
                    <div class="production-card">
                        <p class="title">Produção por piquete</p>
                        <p class="info">{{ average_paddock_production }} Mg</p>
                    </div>
                    <div class="production-card">
                        <p class="title">Produção por hectare</p>
                        <p class="info">{{ average_hectare_production }} Mg</p>
                    </div>
                </div>
                <div class="production-graph-container">
                    <div class="production-graph">
                        <p class="graph-title">Média mensal de produção por piquete</p>
                        <canvas id="production-chart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block extra_js %}
{{ block.super }}
<script>
    window.months = {{ months|safe }};
    window.occupation = {{ occupation|safe }};
    window.rest = {{ rest|safe }};
    window.consume = {{ consume|safe }};
    window.production = {{ production|safe }};
</script>
<script src="{% static "report/js/dashboard.js" %}"></script>
<script src="{% static "report/js/chart_creation.js" %}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock extra_js %}