{% extends "admin/layout_admin.html" %}
{% load i18n %}

{% block title %}{% trans "Detalle del Cultivo" %}{% endblock title %}

{% block head %}

{% endblock %}

{% block content %}s
    {% load static %}
    {% load humanize %}
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid contenido-principal">

              <h2>Panel de Recomendaciones</h2>

                <!-- Indicadores Resumidos -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5>Tendencias de Problemas en Cultivos</h5>
                            </div>
                            <div class="card-body">
                                <div id="problemTrendsChart"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5>Resumen de Recomendaciones</h5>
                            </div>
                            <div class="card-body">
                                <div id="recommendationSummaryChart"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>            
{% endblock content %}

{% block footer %}

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    // Cargar el gráfico de tendencias de problemas
    fetch("{% url 'problem-trends' %}")
        .then(response => response.json())
        .then(data => {
            const chartData = {
                series: [
                    { name: "Problemas con Malezas", data: data.data.map(item => item.weed_issues) },
                    { name: "Problemas con Plagas", data: data.data.map(item => item.pest_issues) },
                    { name: "Déficit de Lluvia", data: data.data.map(item => item.rain_deficit) },
                ],
                xaxis: {
                    categories: data.data.map(item => new Date(item.month)),
                },
            };

            new ApexCharts(document.querySelector("#problemTrendsChart"), {
                chart: { type: 'line' },
                series: chartData.series,
                xaxis: chartData.xaxis,
            }).render();
        });

    // Cargar el gráfico de resumen de recomendaciones
    fetch("{% url 'recommendation-summary' %}")
        .then(response => response.json())
        .then(data => {
            const chartData = {
                series: [
                    { name: "Pendientes", data: data.data.map(item => item.pending) },
                    { name: "Completadas", data: data.data.map(item => item.completed) },
                ],
                xaxis: {
                    categories: data.data.map(item => item.title),
                },
            };

            new ApexCharts(document.querySelector("#recommendationSummaryChart"), {
                chart: { type: 'bar' },
                series: chartData.series,
                xaxis: chartData.xaxis,
            }).render();
        });
</script>

{% endblock %}