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

{% block title %}{{ _("Recomendaciones Personalizadas") }}{% endblock %}

{% block content %}
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <h1>{% trans "Tablero de Recomendaciones" %}</h1>

            <!-- Indicadores -->
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{% trans "Cultivos en Alerta" %}</h5>
                            <p id="alert-crops-count" class="card-text display-4">0</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{% trans "Rendimiento Promedio Estimado" %}</h5>
                            <p id="average-yield" class="card-text display-4">0 kg/ha</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{% trans "Total de Cultivos" %}</h5>
                            <p id="total-crops" class="card-text display-4">0</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Gráficos -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div id="crop-status-chart"></div>
                </div>
                <div class="col-md-6">
                    <div id="yield-comparison-chart"></div>
                </div>
            </div>

            <!-- Tabla de Cultivos -->
            <div class="mt-4">
                <div class="card">
                    <div class="card-body">
                         <table id="cropsTable" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% trans "Nombre del Cultivo" %}</th>
                                    <th>{% trans "Campo" %}</th>
                                    <th>{% trans "Tipo" %}</th>
                                    <th>{% trans "Rendimiento Estimado" %}</th>
                                    <th>{% trans "Última Observación" %}</th>
                                    <th>{% trans "Estado" %}</th>
                                    <th>{% trans "Acciones" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Los datos se llenan dinámicamente -->
                            </tbody>
                        </table>                       
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Modal para Crear Recomendación -->
<div class="modal fade" id="createRecommendationModal" tabindex="-1" aria-labelledby="createRecommendationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="recommendationForm" method="post" action="{% url 'create-recommendation' %}">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title">{% trans "Crear Recomendación" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="crop_id" id="crop_id">
                    <div class="mb-3">
                        <label for="title" class="form-label">{% trans "Título" %}</label>
                        <input type="text" class="form-control" name="title" id="title" required>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">{% trans "Descripción" %}</label>
                        <textarea class="form-control" name="description" id="description" rows="4" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="priority" class="form-label">{% trans "Prioridad" %}</label>
                        <select class="form-select" name="priority" id="priority" required>
                            <option value="alta">{% trans "Alta" %}</option>
                            <option value="media">{% trans "Media" %}</option>
                            <option value="baja">{% trans "Baja" %}</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">{% trans "Guardar" %}</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cerrar" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block footer %}
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // Inicializar DataTable
        $('#cropsTable').DataTable({
            ajax: "{% url 'recommendations-crop-data' %}",
            columns: [
                { data: 'name' },
                { data: 'field' },
                { data: 'type' },
                { data: 'expected_yield' },
                { data: 'last_observation' },
                { data: 'status' },
                {
                    data: null,
                    render: function (data) {
                        return `
                            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createRecommendationModal" onclick="prepareRecommendation(${data.id}, '${data.name}')">
                                Crear Recomendación
                            </button>`;
                    }
                }
            ]
        });

        // Función para preparar el modal
        window.prepareRecommendation = function (id, name) {
            document.getElementById('crop_id').value = id;
            document.getElementById('title').value = `Recomendación para ${name}`;
        };
    });
    </script>
{% endblock %}