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

{% block title %} {{ _("Recomendaciones") }} {% 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 "Recomendaciones" %}</h5>
			                    </div>
			                    <div class="card-body">
                                    {% if recommendations %}
                                        <div class="table-responsive">
                                            <table id="recommendationsTable" class="table table-striped table-bordered" style="width:100%;">
                                                <thead>
                                                    <tr>
                                                        <th>{% trans "Fecha" %}</th>
                                                        <th>{% trans "Cultivo / Campo" %}</th>
                                                        <th>{% trans "Detalles" %}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for recommendation in recommendations %}
                                                        <tr>
                                                            <td data-order="{{ recommendation.created_at|date:'Ymd' }}">
                                                                {{ recommendation.created_at|date:'Y-m-d' }}
                                                            </td>
                                                            <td>
                                                                {% if recommendation.crop %}
                                                                    {{ recommendation.crop.name }}
                                                                {% elif recommendation.field %}
                                                                    {{ recommendation.field.name }}
                                                                {% else %}
                                                                    Sin asignación
                                                                {% endif %}
                                                            </td>
                                                            <td>{{ recommendation.description }}</td>
                                                        </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    {% else %}
                                        <div class="alert alert-warning mt-3" role="alert">
                                            {% trans "No hay recomendaciones de suelo disponibles" %}.
                                        </div>
                                    {% endif %}
                                </div>
			                </div>
			            </div>
			        </div>

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


{% endblock %}

{% block footer %}
 <script>
    $(document).ready(function() {
        $('#recommendationsTable').DataTable({
            dom: 'Bfrtip',
            order: [[0, "desc"]],  // 📌 Ordenar por la primera columna (Fecha) en orden descendente

            columnDefs: [
            { width: "10%", targets: 0 },  // 📌 Ancho de la columna Fecha
            { width: "20%", targets: 1 },  // 📌 Ancho de la columna Cultivo / Campo
            { width: "70%", targets: 2 }   // 📌 Ancho de la columna Descripción
        ],
            buttons: [
                {
                    extend: 'excelHtml5',
                    text: '{% trans "Exportar a Excel" %}',
                    className: 'btn-sm'
                },
                {
                    extend: 'pdfHtml5',
                    text: '{% trans "Exportar a PDF" %}',
                    className: 'btn-sm'
                }
            ],
            language: {
                search: '{% trans "Buscar:" %}',
                lengthMenu: '{% trans "Mostrar _MENU_ registros por página" %}',
                zeroRecords: '{% trans "No se encontraron resultados" %}',
                info: '{% trans "Mostrando _START_ a _END_ de _TOTAL_ registros" %}',
                infoEmpty: '{% trans "No hay registros disponibles" %}',
                infoFiltered: '{% trans "(filtrado de _MAX_ registros en total)" %}',
                paginate: {
                    first: '{% trans "Primero" %}',
                    last: '{% trans "Último" %}',
                    next: '{% trans "Siguiente" %}',
                    previous: '{% trans "Anterior" %}',
                }
            }
        });
    });
</script>

{% endblock %}