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

{% block title %} {{_("Gestión 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">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header justify-content-between d-flex align-items-center align-middle">
                                    <h4 class="card-title">{% trans "Distribución de Cultivos por Tipo" %}</h4><button type="button" class="btn btn-lg btn-danger btn-agricarm" data-bs-toggle="popover" data-bs-title="Información" data-bs-content='{% trans "Útil para evaluar la diversificación de la producción agrícola." %}'><i class="bi bi-info-circle-fill"></i></button>
                                </div><!-- end card header -->
                                <div class="card-body">
                                    {% if crops %}
                                        <div id="crop-type-chart"></div>
                                    {% else %}
                                        <!-- Mostrar un mensaje si no hay cultivos -->
                                        <p>{% trans "No hay datos disponibles" %}</p>
                                    {% endif %}
                                </div>
                            </div>
                    </div>
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header justify-content-between d-flex align-items-center align-middle">
                                    <h4 class="card-title">{% trans "Distribución de Fechas de Cosecha" %}</h4><button type="button" class="btn btn-lg btn-danger btn-agricarm" data-bs-toggle="popover" data-bs-title="Información" data-bs-content='{% trans "Útil para ver cómo las diferentes condiciones climáticas afectan a cada campo y su producción." %}'><i class="bi bi-info-circle-fill"></i></button>
                                </div><!-- end card header -->
                                <div class="card-body">
                                    {% if 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>
                    </div>

                    <div class="row sub-header-menu">
                    <div class="col-md-4">
                    {% if has_fields %}
                        <a href="/create-crop/" class="btn-primary btn btn-agricarm" role="button"><i class="bi bi-plus-circle-fill"></i> {% trans "Crear Cultivo" %}</a>
                    {% else %}
                        <p>{% trans "Antes de crear cultivos, es necesario que primero registres un campo." %}</p>
                    {% endif %}
                    </div><div class="col-md-4"></div>
                    <div class="col-md-4"></div> 
                </div>                                      
                </div>



 
                <div class="row">
                                  
                        <div class="col-md-12">

                            <!-- Estructura de la tabla para mostrar los cultivos -->
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">{% trans "Mis Cultivos" %}</h5>
                                </div>
                                <div class="card-body"> 
                                  {% if crops %} 
                                    <table id="tablacrops" class="ui celled table striped responsive" style="width:100%">
                                        <thead class="table-light">
                                            <tr>
                                                <th>{% trans "Nombre del Cultivo" %}</th>
                                                <th>{% trans "Tipo" %}</th>
                                                <th>{% trans "Nombre del Campo" %}</th>
                                                <th>{% trans "Condiciones Óptimas" %}</th>
                                                <th>{% trans "Fecha de Siembra" %}</th>
                                                <th>{% trans "Fecha de Cosecha" %}</th>
                                                <th>{% trans "Rendimiento Estimado (bushels/acre)" %}</th>
                                                <th>{% trans "Acciones" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for crop in crops %}
                                            <tr>
                                                <td>{{ crop.name }}</td>
                                                <td>{{ crop.get_crop_type_display }}</td>
                                                <td>{{ crop.field.name }}</td>
                                                <td>{{ crop.optimal_conditions }}</td>
                                                <td>{{ crop.planting_date|date:"d M, Y" }}</td> <!-- New field -->
                                                <td>{{ crop.harvest_date|date:"d M, Y" }}</td> <!-- New field -->
                                                <td>{{ crop.yield_estimate }}</td> <!-- New field -->
                                                <td>
                                                    <div class="d-grid gap-2 d-md-block">
                                                        <a href="{% url 'crop-detail' crop.id %}" class=" btn btn-sm btn-primary btn-agricarm">
                                                            <i class="bi bi-search"></i> {% trans "Ver" %}
                                                        </a>
                                                        <a href="{% url 'edit-crop' crop.id %}" class="btn btn-sm btn-primary btn-agricarm btn-agricarm-edit">
                                                            <i class="bi bi-pencil-square"></i> {% trans "Editar" %}
                                                        </a>
                                                        <button class="btn btn-sm btn-danger btn-agricarm btn-delete"
                                                                data-bs-toggle="modal" 
                                                                data-bs-target="#deleteCropModal" 
                                                                data-crop-id="{{ crop.id }}">
                                                            <i class="bi bi-x-circle-fill"></i> {% trans "Eliminar" %}
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                {% else %}
                                    <p>{% trans "No hay datos disponibles" %}</p>
                                {% endif %}                                
                                </div>
                            </div>
                        </div> 
                </div>         
            </div>
        </div>
    </div>


<!-- MODAL CONFIRMACIÓN ELIMINACIÓN -->
<div class="modal fade" id="deleteCropModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Eliminar Cultivo" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>{% trans "¿Estás seguro de que deseas eliminar este cultivo?" %}</p>
            </div>
            <div class="modal-footer">
                <form method="post" id="deleteCropForm">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">{% trans "Eliminar" %}</button>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- FIN MODAL CONFIRMACIÓN ELIMINACIÓN -->


{% endblock content %}

{% block footer %}

<script type="text/javascript" class="init">
    $('#tablacrops').DataTable({
        dom: 'Bfrtip',
        "columnDefs": [
            { "width": "20%", "targets": 3 },
        ],
        buttons: [
            { extend: 'excelHtml5', text: '{% trans "Descarga Planilla" %}' },
            { extend: 'pdfHtml5', text: '{% trans "PDF" %}' },
        ],
        order: [[0, 'asc']],
        responsive: true,
        paging: true,
        pageLength: 30,
        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' %}",
            "infoPostFix": "",
            "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' %}"
            },
            // only works for built-in buttons, not for custom buttons
            "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() {
                var editButtons = document.querySelectorAll('.btn-edit');
                var editCropForm = document.getElementById('editCropForm');
                
                editButtons.forEach(function(button) {
                    button.addEventListener('click', function() {
                        var cropId = button.getAttribute('data-crop-id');
                        var cropName = button.getAttribute('data-crop-name');
                        var cropType = button.getAttribute('data-crop-type');
                        var cropConditions = button.getAttribute('data-crop-conditions');
                        var cropHarvest = button.getAttribute('data-crop-harvest');
                        var cropField = button.getAttribute('data-crop-field');

                        // Populate the form with the crop's current data
                        editCropForm.setAttribute('action', `/crops/edit/${cropId}/`);
                        document.getElementById('id_edit_name').value = cropName;
                        document.getElementById('id_edit_crop_type').value = cropType;
                        document.getElementById('id_edit_optimal_conditions').value = cropConditions;
                        document.getElementById('id_edit_expected_harvest_date').value = cropHarvest;
                        document.getElementById('id_edit_field').value = cropField;
                    });
                });


            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                fetch("{% url 'crop-type-distribution' %}")
                    .then(response => response.json())
                    .then(data => {
                        var options = {
                            chart: {
                                type: 'pie',
                                height: 300
                            },
                            series: data.data, // Datos de la cantidad de cultivos por tipo
                            labels: data.labels, // Nombres de los tipos de cultivos
                            title: {
                                text: '',
                                align: 'center'
                            },
                            colors: ['#E67034', '#C68739', '#B6C8A7', '#3D6E42', '#2B7561'] // Colores personalizables
                        };

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

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var deleteButtons = document.querySelectorAll('.btn-delete');
        var deleteCropForm = document.getElementById('deleteCropForm');
        
        deleteButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                var cropId = button.getAttribute('data-crop-id');
                deleteCropForm.setAttribute('action', `/crops/delete/${cropId}/`);
            });
        });
    });
</script>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                fetch("{% url 'harvest-date-distribution' %}")
                    .then(response => response.json())
                    .then(data => {
                        var options = {
                            chart: {
                                type: 'bar',
                                height: 300
                            },
                            series: [{
                                name: '{% trans "Número de Cultivos" %}',
                                data: data.counts
                            }],
                            xaxis: {
                                categories: data.dates,
                                title: {
                                    text: '{% trans "Fecha de Cosecha" %}'
                                },
                                labels: {
                                    rotate: -45
                                }
                            },
                            yaxis: {
                                title: {
                                    text: '{% trans "Número de Cultivos" %}'
                                }
                            },
                            title: {
                                text: '',
                                align: 'center'
                            },
                            plotOptions: {
                                bar: {
                                    horizontal: false
                                }
                            },
                            // Añadir colores personalizados para las barras
                            colors: ['#2B7561'], 
                            // Puedes personalizar esta lista de colores según tus preferencias
                            dataLabels: {
                                enabled: true,
                                style: {
                                    colors: ['#fff']  // Color de las etiquetas de datos (opcional)
                                }
                            }
                        };

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




{% endblock%}