{% extends "farmer/layout_farmer.html" %}
{% load i18n %}
{% block title %} {{ _("Proyección de Rendimientos") }} {% endblock title %}

{% block content %}
    {% load static %}
    {% load humanize %}
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid contenido-principal">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{% trans "Proyección de Rendimientos" %}</h4>
                        </div>
                        <div class="card-body">
                            {% if projected_gains %}
                                <div class="table-responsive">
                                    <table id="projectedGainsTable" class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>{% trans "Nombre del Cultivo" %}</th>
                                                <th>{% trans "Número de Plantas" %}</th>
                                                <th>{% trans "Producción Estimada (kg)" %}</th>
                                                <th>{% trans "Precio de Mercado ($/kg)" %}</th>
                                                <th>{% trans "Ingresos Estimados ($)" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for gain in projected_gains %}
                                                <tr>
                                                    <td>{{ gain.crop_name }}</td>
                                                    <td>{{ gain.num_plants|intcomma }}</td>
                                                    <td>{{ gain.estimated_production|floatformat:0|intcomma }}</td>
                                                    <td>${{ gain.market_price|floatformat:2|intcomma }}</td>
                                                    <td>${{ gain.estimated_income|floatformat:2|intcomma }}</td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <p>{% trans "No hay datos disponibles." %}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{% trans "Producción Estimada por Cultivo" %}</h4>
                        </div>
                        <div class="card-body">
                            <div id="estimatedProductionChart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{% trans "Ingresos Estimados por Cultivo" %}</h4>
                        </div>
                        <div class="card-body">
                            <div id="estimatedIncomeChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block footer %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        fetch("{% url 'projected-gains-chart' %}")
            .then(response => response.json())
            .then(data => {
                const productionOptions = {
                    chart: {
                        type: 'bar',
                        height: 300
                    },
                    series: [{
                        name: "{% trans 'Producción Estimada (kg)' %}",
                        data: data.estimated_production
                    }],
                    xaxis: {
                        categories: data.crop_names,
                        title: {
                            text: "{% trans 'Cultivos' %}"
                        }
                    },
                    yaxis: {
                        title: {
                            text: "{% trans 'Producción (kg)' %}"
                        }
                    },
                    colors: ['#4CAF50']
                };

                const incomeOptions = {
                    chart: {
                        type: 'bar',
                        height: 300
                    },
                    series: [{
                        name: "{% trans 'Ingresos Estimados ($)' %}",
                        data: data.estimated_income
                    }],
                    xaxis: {
                        categories: data.crop_names,
                        title: {
                            text: "{% trans 'Cultivos' %}"
                        }
                    },
                    yaxis: {
                        title: {
                            text: "{% trans 'Ingresos ($)' %}"
                        }
                    },
                    colors: ['#FF9800']
                };

                const productionChart = new ApexCharts(document.querySelector("#estimatedProductionChart"), productionOptions);
                const incomeChart = new ApexCharts(document.querySelector("#estimatedIncomeChart"), incomeOptions);

                productionChart.render();
                incomeChart.render();
            });
    });
</script>
{% endblock footer %}