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

{% block title %}{% trans "Dashboard Agronomo" %}{% endblock title %}

{% block head %}

{% endblock %}

{% block content %}s
    {% load static %}
    {% load humanize %}

<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">

            <!-- Gráficos -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5>{% trans "Desempeño General de Scouts" %}</h5>
                        </div>
                        <div class="card-body">
                            <div id="scout-performance-chart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5>{% trans "Observaciones Recientes" %}</h5>
                        </div>
                        <div class="card-body">
                            <div id="recent-observations-chart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5>{% trans "Problemas Detectados" %}</h5>
                        </div>
                        <div class="card-body">
                            <div id="detected-problems-chart"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabla de Scouts -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">{% trans "Desempeño de los Scouts" %}</h4>
                </div>
                <div class="card-body">
                    <table id="scoutTable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>{% trans "Nombre del Scout" %}</th>
                                <th>{% trans "Campos Asignados" %}</th>
                                <th>{% trans "Cultivos Activos" %}</th>
                                <th>{% trans "Observaciones Recientes" %}</th>
                                <th>{% trans "Problemas Críticos" %}</th>
                                <th>{% trans "Estado" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for scout in scout_data %}
                            <tr>
                                <td>{{ scout.name }}</td>
                                <td>{{ scout.total_fields }}</td>
                                <td>{{ scout.total_crops }}</td>
                                <td>{{ scout.recent_observations }}</td>
                                <td>{{ scout.critical_crops }}</td>
                                <td class="{% if scout.status == 'Crítico' %}bg-danger text-white{% elif scout.status == 'Bueno' %}bg-success text-white{% else %}bg-warning text-dark{% endif %}">
                                    {{ scout.status }}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

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

{% block footer %}
<script>
    
    // Configuración de gráficos
    document.addEventListener('DOMContentLoaded', function () {
        // Gráfico 1: Desempeño General de Scouts
        fetch("{% url 'scout-performance-data' %}")
            .then(response => response.json())
            .then(data => {
                const options = {
                    chart: { type: 'bar', height: 300 },
                    series: [
                        { name: '{% trans "Campos" %}', data: data.fields },
                        { name: '{% trans "Cultivos" %}', data: data.crops },
                    ],
                    xaxis: { categories: data.labels },
                };
                const chart = new ApexCharts(document.querySelector("#scout-performance-chart"), options);
                chart.render();
            });

        // Gráfico 2: Observaciones Recientes
        fetch("{% url 'recent-observations-data' %}")
            .then(response => response.json())
            .then(data => {
                const options = {
                    chart: { type: 'pie', height: 300 },
                    series: data.recent_observations,
                    labels: data.labels,
                };
                const chart = new ApexCharts(document.querySelector("#recent-observations-chart"), options);
                chart.render();
            });

    });
</script>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
    fetch("{% url 'detected-problems-data' %}")
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                console.error(data.error);
                return;
            }

            const categories = data.problems.map(problem => problem.scout);
            const pests = data.problems.map(problem => problem.pests);
            const deficiencies = data.problems.map(problem => problem.deficiencies);
            const others = data.problems.map(problem => problem.others);

            const options = {
                chart: { type: 'bar', height: 300 },
                series: [
                    { name: "{% trans 'Plagas Detectadas' %}", data: pests },
                    { name: "{% trans 'Deficiencias Detectadas' %}", data: deficiencies },
                    { name: "{% trans 'Otros Problemas' %}", data: others }
                ],
                xaxis: { categories: categories },
                colors: ['#E74C3C', '#F1C40F', '#3498DB'],
                title: { text: "{% trans 'Problemas Detectados por Scout' %}", align: 'center' }
            };

            const chart = new ApexCharts(document.querySelector("#detected-problems-chart"), options);
            chart.render();
        })
        .catch(error => {
            console.error("Error al cargar el gráfico de problemas detectados:", error);
        });
});
</script>


<script>
    $(document).ready(function() {
        $('#scoutTable').DataTable({
            responsive: true,
            autoWidth: false,
            paging: true,
            pageLength: 10,
            language: {
                search: "{% trans 'Buscar:' %}",
                zeroRecords: "{% trans 'No se encontraron resultados' %}",
                info: "{% trans 'Mostrando _START_ a _END_ de _TOTAL_ registros' %}",
                infoEmpty: "{% trans 'No hay registros disponibles' %}",
                lengthMenu: "{% trans 'Mostrar _MENU_ registros' %}",
                paginate: {
                    previous: "{% trans 'Anterior' %}",
                    next: "{% trans 'Siguiente' %}"
                }
            }
        });
    });
</script>


{% endblock %}