{% extends "farmer/layout_farmer.html" %}
{% load i18n %}

{% block title %}{{ _("Gestión de Cultivos") }}{% endblock title %}

{% block content %}
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid contenido-principal">

            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{% trans "Distribución de Cultivos por Tipo" %}</h4>
                        </div>
                        <div class="card-body">
                            {% if has_crops %}
                                <div id="crop-type-chart"></div>
                            {% else %}
                                <p>{% trans "No hay datos disponibles" %}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{% trans "Producción Estimada por Tipo de Cultivo" %}</h4>
                        </div>
                        <div class="card-body">
                            {% if has_crops %}
                                <div id="crop-production-chart"></div>
                            {% else %}
                                <p>{% trans "No hay datos disponibles" %}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{% trans "Ingresos Estimados por Tipo de Cultivo" %}</h4>
                        </div>
                        <div class="card-body">
                            {% if has_crops %}
                                <div id="crop-income-chart"></div>
                            {% else %}
                                <p>{% trans "No hay datos disponibles" %}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>        

                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{% trans "Acciones" %}</h4>
                        </div>
                        <div class="card-body">
                            <a href="{% url 'farmer-create-crop' %}" class="btn btn-sm btn-primary">
                            <i class="bi bi-plus-circle-fill"></i> {% trans "Crear Cultivo" %}</a>
                        </div>                 
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{% trans "Mis Cultivos" %}</h4>
                        </div>
                        <div class="card-body">
                            {% if crops %}
                                <table class="table table-striped" id="CropsTable">
                                    <thead>
                                        <tr>
                                            <th>{% trans "Nombre" %}</th>
                                            <th>{% trans "Tipo" %}</th>
                                            <th>{% trans "Campo" %}</th>
                                            <th>{% trans "Fecha de Cosecha Esperada" %}</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.expected_harvest_date|date:"d M, Y" }}</td>
                                                <td>
                                                        <a href="{% url 'farmer-crop-detail' crop.id %}" class="btn btn-sm btn-primary">
                                                            <i class="bi bi-search"></i> {% trans "Ver Detalle" %}
                                                        </a>
                                                        <a href="{% url 'farmer-edit-crop' crop.id %}" class="btn btn-warning btn-sm">
                                                            <i class="bi bi-pencil-square"></i> Editar
                                                        </a>

                                                        <button class="btn btn-danger btn-sm delete-crop-btn"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#deleteCropModal"
                                                                data-crop-id="{{ crop.id }}">
                                                            <i class="bi bi-trash"></i> Eliminar
                                                        </button>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                <p>{% trans "No hay cultivos registrados" %}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

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

<div class="modal fade" id="deleteCropModal" tabindex="-1" aria-labelledby="deleteCropModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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>
                <input type="hidden" id="delete-crop-id">  <!-- ✅ Captura correctamente el `crop_id` -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="confirmDeleteCrop">{% trans "Eliminar" %}</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}



{% block footer %}
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
    fetch("{% url 'farmer-crop-type-distribution' %}")
        .then(response => response.json())
        .then(data => {
            const options = {
                chart: { type: 'pie', height: 300 },
                series: data.data,
                labels: data.labels,
                title: { text: '', align: 'center' },
                colors: ['#E67034', '#C68739', '#B6C8A7', '#3D6E42', '#2B7561'],
            };
            const chart = new ApexCharts(document.querySelector("#crop-type-chart"), options);
            chart.render();
        });
});

</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Gráfico de Producción Estimada por Tipo de Cultivo
    fetch("{% url 'farmer-crop-production-by-type' %}")
        .then(response => response.json())
        .then(data => {
            const options = {
                chart: { type: 'bar', height: 300 },
                series: [{ name: '{% trans "Producción Estimada (kg)" %}', data: data.data }],
                xaxis: { categories: data.labels },
                colors: ['#3D6E42'],
                title: { text: '{% trans "Producción Estimada por Tipo de Cultivo" %}', align: 'center' },
            };
            const chart = new ApexCharts(document.querySelector("#crop-production-chart"), options);
            chart.render();
        });

        // Gráfico de Ingresos Estimados por Tipo de Cultivo
        fetch("{% url 'farmer-crop-income-by-type' %}")
            .then(response => response.json())
            .then(data => {
                const options = {
                    chart: { type: 'pie', height: 300 },
                    series: data.data,
                    labels: data.labels,
                    colors: ['#FF5733', '#FFC300', '#DAF7A6', '#900C3F', '#581845'], // Paleta de colores alternativa
                    title: { text: '{% trans "Ingresos Estimados por Tipo de Cultivo" %}', align: 'center' },
                };
                const chart = new ApexCharts(document.querySelector("#crop-income-chart"), options);
                chart.render();
            });
        });

</script>


    <script type="text/javascript" class="init">
        $('#CropsTable').DataTable({
            dom: 'Bfrtip',
            buttons: [
                { extend: 'excelHtml5', text: '{% trans "Descarga Planilla" %}' },
                { extend: 'pdfHtml5', text: '{% trans "PDF" %}' },
            ],
            // order: [[0, 'asc']],
            // autoWidth: true,
            // responsive: true,
            // paging: true,
            // pageLength: 10,
            // fixedHeader: {
            //     header: false,
            //     footer: false
            // },
            searching: false, // Desactivar el campo de búsqueda
            columnDefs: [
                { targets: '_all', visible: true }, // Asegurar que todas las columnas sean visibles
            ],
            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...' %}",
                "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": {
                    "excel": "{% trans 'Exportar a Excel' %}",
                    "pdf": "{% trans 'Exportar a PDF' %}"
                },
                "select": {
                    "rows": {
                        _: '{% trans "%d filas seleccionadas" %}',
                        0: '{% trans "Haga clic en una fila para seleccionarla" %}',
                        1: '{% trans "Una fila seleccionada" %}'
                    }
                }
            }
        });
    </script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Capturar ID del cultivo a eliminar
        document.querySelectorAll(".delete-crop-btn").forEach(button => {
            button.addEventListener("click", function () {
                let cropId = this.dataset.cropId;
                document.getElementById("delete-crop-id").value = cropId;
            });
        });

        // Confirmar y eliminar cultivo con AJAX
        document.getElementById("confirmDeleteCrop").addEventListener("click", function () {
            let cropId = document.getElementById("delete-crop-id").value;
            let csrfToken = document.querySelector("[name=csrfmiddlewaretoken]")?.value;  // ✅ Obtener CSRF Token

            if (!csrfToken) {
                alert("Error: No se encontró el CSRF Token.");
                return;
            }

            fetch(`/farmer/crops/delete/${cropId}/`, {  // ✅ Asegurar que la URL es correcta
                method: "POST",  // ✅ Forzar `POST`
                headers: {
                    "X-CSRFToken": csrfToken,  // ✅ Enviar CSRF Token
                    "Content-Type": "application/json"
                },
                credentials: "same-origin",  // ✅ Asegura que las cookies de sesión se envíen
                body: JSON.stringify({})  // ✅ Se necesita un `body`, aunque esté vacío
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`{% trans "Error en la respuesta del servidor:" %} ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // alert(data.message);
                    window.location.reload();  // ✅ Recargar la lista de cultivos después de eliminar
                } else {
                    alert("Error: " + data.message);
                }
            })
            .catch(error => console.error("{% trans "Error en la petición AJAX:" %}", error));
        });
    });
</script>

{% endblock footer %}