{% extends "layout.html" %}
{% load i18n %}

{% block title %} {{ _("Dashboard de Cultivos") }} {% endblock title %}

{% block head %}

{% endblock %}

{% block  content %}
	{% load static %}
	{% load humanize %}
	
        <div class="main-content">
            <div class="page-content">
			    <div class="container-fluid contenido-principal">
					<div class="row">
						 <!-- Gráficos de Cultivos -->
			            <div class="col-md-12 mb-4">
			                <div class="card shadow">
			                    <div class="card-header">
			                        <h5 class="card-title">{% trans "Estado de los Cultivos" %}</h5>
			                    </div>
			                    <div class="card-body">
			                    	{% if has_crops %}
			                        <div id="crop-growth-chart"></div>
			                        {% else %}
						                <!-- Mostrar un mensaje si no hay cultivos -->
						                <p>{% trans "No hay datos disponibles." %}</p>
						            {% endif %}
			                    </div>
			                </div>
			            </div>
			        </div>

			        <div class="row">
			            <!-- Próximas Cosechas -->
			            <div class="col-md-6 mb-4">
			                <div class="card shadow">
			                    <div class="card-header">
			                        <h5 class="card-title">{% trans "Próximas Cosechas" %}</h5>
			                    </div>
			                    <div class="card-body">
									{% if has_crops %}
									    <div id="harvest-date-chart"></div>
									{% else %}
									    <!-- Mostrar un mensaje si no hay cultivos -->
									    <p>{% trans "No hay datos disponibles" %}</p>
									{% endif %}
			                    </div>
			                </div>
			            </div>


			            <!-- Recomendaciones -->
			            <div class="col-md-6 mb-4">
			                <div class="card shadow">
			                    <div class="card-header">
			                        <h5 class="card-title">{% trans "Recomendaciones Recientes" %}</h5>
			                    </div>
			                    <div class="card-body">
									{% if recommendations %}
				                        <ul>
				                            {% for recommendation in recommendations %}
				                                <li><strong>Cultivo: {{ recommendation.crop_observation.crop.name }} | {{ recommendation.title }}</strong> | {{ recommendation.description }}</li>
				                            {% endfor %}
				                        </ul>
				                    {% else %}
				                        <p>{% trans "No hay recomendaciones disponibles" %}</p>
				                    {% endif %}
			                    </div>
			                </div>
			            </div>	

			        </div>


			        <div class="row">
			            <!-- Información del Foro Social -->
			            <div class="col-md-6 mb-4">
			                <div class="card shadow">
			                    <div class="card-header">
			                        <h5 class="card-title">{% trans "Últimas Publicaciones del Foro" %}</h5>
			                    </div>
			                    <div class="card-body">
				                   {% if recent_posts %}
				                        <ul>
				                            {% for post in recent_posts %}
				                                <li><a href="/social/">{{ post.title }}</a> - {{ post.created_at|date:"d M Y" }}</li>
				                            {% endfor %}
				                        </ul>
				                    {% else %}
				                        <p>{% trans "No hay publicaciones recientes" %}</p>
				                    {% endif %}
			                    </div>
			                </div>
			            </div>


			            <!-- Noticias -->
			            <div class="col-md-6 mb-4">
			                <div class="card shadow">
			                    <div class="card-header">
			                        <h5 class="card-title">{% trans "Noticias" %}</h5>
			                    </div>
			                    <div class="card-body">
				 					{% if news_items %}
				                        <ul>
				                            {% for news in news_items %}
				                                <li><a href="{% url 'news_detail' news.id %}">{{ news.title }}</a> - {{ news.created_at|date:"d M Y" }}</li>
				                            {% endfor %}
				                        </ul>
				                    {% else %}
				                        <p>{% trans "No hay noticias disponibles" %}</p>
				                    {% endif %}
			                    </div>
			                </div>
			            </div>
					</div>
				</div>
			</div>		
		</div>


<!-- Modal Promoción Curso -->
<div class="modal fade" id="cursoModal" tabindex="-1" aria-labelledby="cursoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h5 class="modal-title" id="cursoModalLabel">¡Nuevo Curso Disponible!</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-5">
            <img src="{% static 'images/curso-agricultura-thumbnail.jpg' %}" class="img-fluid rounded" alt="Agricultura de Precisión">
          </div>
          <div class="col-md-7">
            <h4 class="text-success">Agricultura de Precisión y Sostenible</h4>
            <p class="mb-2"><i class="bi bi-clock text-success"></i> Duración: 5 horas</p>
            <p class="mb-2"><i class="bi bi-laptop text-success"></i> Modalidad: Online</p>
            <p class="mb-3"><i class="bi bi-currency-dollar text-success"></i> Inversión: $50 USD</p>
            
            <div class="alert alert-success">
              <i class="bi bi-star-fill"></i> <strong>Oferta especial:</strong> Acceso a materiales exclusivos
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Quizás más tarde</button>
        <a href="{% url 'agriculture_course' %}" class="btn btn-success">
          <i class="bi bi-book"></i> Ver detalles del curso
        </a>
      </div>
    </div>
  </div>
</div>


{% endblock %}

{% block footer %}

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Llama a la función para obtener los datos del gráfico
        $.getJSON("{% url 'crop_growth_chart' %}", function(data) {
            if (data.error) {
                console.error(data.error);
                return;
            }
            
            // Traducciones para el gráfico
            var noDataText = "{% trans 'No hay datos disponibles' %}";
            var yAxisTitle = "{% trans 'Tamaño acumulado de plantas' %}";
            var xAxisTitle = "{% trans 'Mes' %}";
            
            // Configuración del gráfico
            var options = {
                chart: {
                    type: 'line',
                    height: 350,
                },
                series: data.series || [],  // Asegurarse de que `series` esté definida
                xaxis: {
                    categories: data.categories || [],  // Asegurarse de que `categories` esté definida
                    title: {
                        text: xAxisTitle
                    }
                },
                stroke: {
                    curve: 'smooth'
                },
                dataLabels: {
                    enabled: false
                },
                yaxis: {
                    title: {
                        text: yAxisTitle
                    }
                },
                noData: {
                    text: noDataText
                }
            };

            // Renderizar el gráfico
            var chart = new ApexCharts(document.querySelector("#crop-growth-chart"), options);
            chart.render();
        }).fail(function(jqxhr, textStatus, error) {
            console.error("Request Failed: " + textStatus + ", " + error);
        });
    });
</script>



<script>
    document.addEventListener('DOMContentLoaded', function () {
        fetch("{% url 'harvest-date-distribution' %}")
            .then(response => response.json())
            .then(data => {
                // Traducciones para los textos
                var numberOfCrops = "{% trans 'Número de Cultivos' %}";
                var harvestDate = "{% trans 'Fecha de Cosecha' %}";

                var options = {
                    chart: {
                        type: 'bar',
                        height: 360
                    },
                    series: [{
                        name: numberOfCrops,  // Traducción aplicada
                        data: data.counts
                    }],
                    xaxis: {
                        categories: data.dates,
                        title: {
                            text: harvestDate  // Traducción aplicada
                        },
                        labels: {
                            rotate: -45
                        }
                    },
                    yaxis: {
                        title: {
                            text: numberOfCrops  // Traducción aplicada
                        }
                    },
                    title: {
                        text: '',
                        align: 'center'
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false
                        }
                    },
                    colors: ['#2B7561'],  // Colores personalizados
                    dataLabels: {
                        enabled: true,
                        style: {
                            colors: ['#fff']  // Color de las etiquetas de datos
                        }
                    }
                };

                var chart = new ApexCharts(document.querySelector("#harvest-date-chart"), options);
                chart.render();
            });
    });
</script>



 <script type="text/javascript" class="init">
    $('#projectedGainsTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            { extend: 'excelHtml5', text: '{% trans "Descarga Planilla" %}' },
            { extend: 'pdfHtml5', text: '{% trans "PDF" %}' },
        ],
        columnDefs: [
            { width: '28%', targets: 4 },
        ],
        order: [[0, 'asc']],
        autoWidth: true,
        responsive: true,
        paging: true,
        pageLength: 10,
        fixedHeader: {
            header: false,
            footer: false
        },
        language: {
            "decimal": ",",
            "thousands": ".",
            "info": "{% trans 'Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros' %}",
            "infoEmpty": "{% trans 'Mostrando registros del 0 al 0 de un total de 0 registros' %}",
            "infoFiltered": "{% trans '(filtrado de un total de _MAX_ registros)' %}",
            "loadingRecords": "{% trans 'Cargando...' %}",
            "lengthMenu": "{% trans 'Mostrar _MENU_ registros' %}",
            "paginate": {
                "first": "{% trans 'Primero' %}",
                "last": "{% trans 'Último' %}",
                "next": "{% trans 'Siguiente' %}",
                "previous": "{% trans 'Anterior' %}"
            },
            "processing": "{% trans 'Procesando...' %}",
            "search": "{% trans 'Buscar:' %}",
            "searchPlaceholder": "{% trans 'Término de búsqueda' %}",
            "zeroRecords": "{% trans 'No se encontraron resultados' %}",
            "emptyTable": "{% trans 'Ningún dato disponible en esta tabla' %}",
            "aria": {
                "sortAscending": "{% trans ': Activar para ordenar la columna de manera ascendente' %}",
                "sortDescending": "{% trans ': Activar para ordenar la columna de manera descendente' %}"
            },
            "buttons": {
                "create": "{% trans 'Nuevo' %}",
                "edit": "{% trans 'Cambiar' %}",
                "remove": "{% trans 'Borrar' %}",
                "copy": "{% trans 'Copiar' %}",
                "csv": "{% trans 'fichero CSV' %}",
                "excel": "{% trans 'tabla Excel' %}",
                "pdf": "{% trans 'documento PDF' %}",
                "print": "{% trans 'Imprimir' %}",
                "colvis": "{% trans 'Visibilidad columnas' %}",
                "collection": "{% trans 'Colección' %}",
                "upload": "{% trans 'Seleccione fichero....' %}"
            },
            "select": {
                "rows": {
                    _: '{% trans "%d filas seleccionadas" %}',
                    0: '{% trans "clic fila para seleccionar" %}',
                    1: '{% trans "una fila seleccionada" %}'
                }
            }
        }
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
      // Verificar si ya se mostró el modal en esta sesión
      
        var cursoModal = new bootstrap.Modal(document.getElementById('cursoModal'));
        cursoModal.show();

    });
</script>

{% endblock %}