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

{% block title %}{{ _("Detalle del Cultivo") }}{% endblock title %}

{% block head %}

{% endblock %}

{% block content %}s
    {% load static %}
    {% load humanize %}

    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid contenido-principal">
                <div class="row sub-header-menu">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header crop-detail justify-content-between text-center">
                                <h4 class="card-title" style="text-transform: uppercase;font-size: 26px;font-weight: bold;">{% trans "CULTIVO:" %} {{ crop.name }}</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab" aria-controls="tab1" aria-selected="true">{% trans "Especificaciones Agronómicas" %}</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab" aria-controls="tab2" aria-selected="false">{% trans "Gráficos" %}</button>
                        </li>
                    </ul>

                    <div class="tab-content mt-3">
                    <!-- Tab 1 -->
                    <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
                        <div class="row">
                            <div class="col-md-12">
                                    <div class="card-body grid-especificaciones">
                                        <!-- Tipo -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-seedling especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Tipo" %}</h6>
                                                <p>{{ crop.get_crop_type_display }}</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Campo -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-tractor especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Campo" %}</h6>
                                                <p>{{ crop.field.name }}</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Condiciones Óptimas -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-cloud-sun-rain especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Condiciones Óptimas" %}</h6>
                                                <p>{{ crop.optimal_conditions }}</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Fecha de Siembra -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-calendar-day especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Fecha de Siembra" %}</h6>
                                                <p>{{ crop.planting_date|date:"d M, Y" }}</p>
                                            </div>
                                        </div>

                                        <!-- Fecha de Cosecha Esperada -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-calendar-check especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Fecha de Cosecha Esperada" %}</h6>
                                                <p>{{ crop.expected_harvest_date|date:"d M, Y" }}</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Fecha de Cosecha -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-calendar-alt especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Fecha de Cosecha" %}</h6>
                                                <p>{{ crop.harvest_date|date:"d M, Y" }}</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Número de Plantas -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-seedling especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Número de Plantas" %}</h6>
                                                <p>{{ num_plants }}</p> <!-- Usar el valor de la última observación -->
                                            </div>
                                        </div>
  
                                        <!-- Rendimiento por Planta -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-chart-line especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Rendimiento por Planta (kg)" %}</h6>
                                                <p>{{ crop.yield_per_plant }}</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Rendimiento Estimado -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-calculator especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Rendimiento Estimado (bushels/acre)" %}</h6>
                                                <p>{{ crop.yield_estimate }}</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Precio de Mercado -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-dollar-sign especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Precio de Mercado (por kg)" %}</h6>
                                                <p>{{ crop.market_price }}</p>
                                            </div>
                                        </div>

                                        <!-- Requerimientos de Nutrientes -->
                                        <div class="card especificaciones-campo">
                                            <div class="card-body text-center">
                                                <i class="fas fa-leaf especificaciones-icono"></i>
                                                <h6 class="card-title">{% trans "Requerimientos de Nutrientes" %}</h6>
                                                <p>
                                                    {% if crop.nutrient_requirements %}
                                                        N: {{ crop.nutrient_requirements.N }}, 
                                                        P: {{ crop.nutrient_requirements.P }}, 
                                                        K: {{ crop.nutrient_requirements.K }}
                                                    {% else %}
                                                        {% trans "Sin datos de nutrientes" %}
                                                    {% endif %}
                                                </p>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tab 2 -->
                    <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
                        <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 "Evolución del Crecimiento del Cultivo" %}</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 "Permite observar tendencias de crecimiento y detectar posibles problemas en fases específicas." %}'><i class="bi bi-info-circle-fill"></i></button>   
                                    </div>
                                  <div class="card-body">
                                    <div id="crop-growth-chart"></div>
                                  </div>
                                </div>                        

                            </div>
                            <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 "Relación entre Temperatura del Suelo y Altura del Cultivo" %}</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 identificar la temperatura óptima del suelo para el crecimiento del cultivo." %}'><i class="bi bi-info-circle-fill"></i></button>   
                                    </div>
                                    <div class="card-body">
                                        <div id="soil-temp-height-chart"></div> <!-- Elemento contenedor para el gráfico -->
                                    </div>
                                </div>   

                            </div>


                            <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 "Histórico de la Cantidad de Plantas" %}</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 "Este gráfico de líneas muestra el historial de la cantidad de plantas del cultivo a lo largo del tiempo, basado en las observaciones registradas." %}'><i class="bi bi-info-circle-fill"></i></button>   
                                    </div>
                                    <div class="card-body">
                                        <div id="plant-count-history-chart"></div> <!-- Elemento contenedor para el gráfico -->
                                    </div>
                                </div>   

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








                    <div class="col-md-12 mt-3">

                        <!-- Botón para crear una nueva observación -->
                        <button class=" btn btn-sm btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#createObservationModal">
                            <i class="bi bi-plus-circle"></i> {% trans "Agregar Observación" %}
                        </button>

                        <!-- Tabla de Observaciones del Cultivo -->

                        {% if crop.observations.all %}
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table  id="tablaobservaciones" class="ui celled table striped responsive" style="width:100%">
                                        <thead class="table-light">
                                            <tr>
                                                <th>{% trans "Fecha" %}</th>
                                                <th>{% trans "Cont. Plantas" %}</th>
                                                <th>{% trans "Alt. Cultivo (cm)" %}</th>
                                                <th>{% trans "Temp. Suelo (°C)" %}</th>
                                                <th>{% trans "Presión de Malezas" %}</th>
                                                <th>{% trans "Alt. de Malezas (cm)" %}</th>
                                                <th>{% trans "Plagas" %}</th>
                                                <th>{% trans "Acum. Lluvia (mm)" %}</th>
                                                <th>{% trans "Notas" %}</th>
                                                <th>{% trans "Editar" %}</th>
                                                <th>{% trans "Eliminar" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for observation in crop.observations.all %}
                                            <tr>
                                                <td>{{ observation.date|date:"Y-m-d" }}</td>
                                                <td>{{ observation.stand_count }}</td>
                                                <td>{{ observation.crop_height }}</td>
                                                <td>{{ observation.soil_temperature }}</td>
                                                <td>{{ observation.weed_pressure }}</td>
                                                <td>{{ observation.weed_height }}</td>
                                                <td>{{ observation.pests }}</td>
                                                <td>{{ observation.rain_accumulation }}</td>
                                                <td>{{ observation.notes }}</td>
                                                <td>
                                                    <!-- Botón de Editar -->
                                                    <button class="btn btn-warning btn-agricarm btn-agricarm-edit" data-bs-toggle="modal" data-bs-target="#editObservationModal{{ observation.id }}">
                                                        <i class="bi bi-pencil-square"></i>
                                                    </button>
                                                </td>
                                                <td>
                                                    <!-- Botón de Eliminar -->
                                                    <button type="button" class="btn btn-danger btn-agricarm" data-bs-toggle="modal" data-bs-target="#deleteObservationModal" data-id="{{ observation.id }}"><i class="bi bi-trash"></i>
                                                    </button>
                                                </td>                                                
                                            </tr>

                                            <!-- Modal para Editar Observación -->
                                            <div class="modal fade" id="editObservationModal{{ observation.id }}" tabindex="-1" aria-labelledby="editObservationModalLabel{{ observation.id }}" aria-hidden="true">
                                                <div class="modal-dialog modal-lg">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="editObservationModalLabel{{ observation.id }}">{% trans "Editar Observación" %}</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <form method="post" action="{% url 'edit-observation' observation.id %}">
                                                            {% csrf_token %}
                                                            <div class="modal-body">
                                                                {{ observation_form }}
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="submit" class=" btn btn-sm btn-primary">{% trans "Guardar Cambios" %}</button>
                                                                <button type="button" class=" btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        {% else %}
                        <div class="card">
                            <div class="card-header justify-content-between d-flex align-items-center">
                                <h4 class="card-title">{% trans "OBSERVACIONES DEL CULTIVO" %}</h4>
                            </div><!-- end card header -->
                            <div class="card-body">
                                <p>{% trans "No hay observaciones para este cultivo." %}</p>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Crear Observación -->
    <div class="modal fade" id="createObservationModal" tabindex="-1" aria-labelledby="createObservationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createObservationModalLabel">{% trans "Crear Nueva Observación" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{% url 'create-observation' crop.id %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="id_stand_count" class="col-label">{% trans "Número de Plantas" %}</label>
                        {{ form.stand_count }}
                    </div>

                    <div class="form-group">
                        <label for="id_crop_height" class="col-label">{% trans "Altura del Cultivo (cm)" %}</label>
                        {{ form.crop_height }}
                    </div>

                    <div class="form-group">
                        <label for="id_soil_temperature" class="col-label">{% trans "Temperatura del Suelo (C°)" %}</label>
                        {{ form.soil_temperature }}
                    </div>

                    <div class="form-group">
                        <label for="id_weed_pressure" class="col-label">{% trans "Presión de Malezas" %}</label>
                        {{ form.weed_pressure }}
                    </div>

                    <div class="form-group">
                        <label for="id_weed_height" class="col-label">{% trans "Altura de las Malezas (cm)" %}</label>
                        {{ form.weed_height }}
                    </div>

                    <div class="form-group">
                        <label for="id_pests" class="col-label">{% trans "Plagas Observadas" %}</label>
                        {{ form.pests }}
                    </div>

                    <div class="form-group">
                        <label for="id_rain_accumulation" class="col-label">{% trans "Acumulación de Lluvia (mm)" %}</label>
                        {{ form.rain_accumulation }}
                    </div>

                    <div class="form-group">
                        <label for="id_notes" class="col-label">{% trans "Notas Adicionales" %}</label>
                        {{ form.notes }}
                    </div>

                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">{% trans "Guardar Observación" %}</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Confirmación de Eliminación -->
    <div class="modal fade" id="deleteObservationModal" tabindex="-1" aria-labelledby="deleteObservationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteObservationModalLabel">{% trans "Confirmar Eliminación" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {% trans "¿Estás seguro de que deseas eliminar esta observación?" %}
                </div>
                <div class="modal-footer">
                    <button type="button" class=" btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
                    <!-- El botón de eliminar será configurado con JavaScript para enviar el formulario de eliminación -->
                    <button type="button" id="confirmDeleteBtn" class="btn btn-danger">{% trans "Eliminar" %}</button>
                </div>
            </div>
        </div>
    </div>


{% endblock content %}

{% block footer %}


<script type="text/javascript" class="init">
    $('#tablaobservaciones').DataTable({
        dom: 'Bfrtip',
        buttons: [
            { extend: 'excelHtml5', text: '{% trans "Descargar Planilla" %}' },
            { extend: 'pdfHtml5', text: '{% trans "PDF" %}' },
        ],
        order: [[0, 'desc']],
        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' %}",
            "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' %}"
            },
            "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 'count num_rows as d' %} {{ d }} {% trans 'filas seleccionadas' %}",
                    0: "{% trans 'clic fila para seleccionar' %}",
                    1: "{% trans 'una fila seleccionada' %}"
                }
            }
        }
    });  
</script>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const cropId = {{ crop.id }};
        const url = `{% url 'crop-growth-data' crop.id %}`;

        fetch(url)
            .then(response => response.json())
            .then(data => {
                var options = {
                    chart: {
                        type: 'area',
                        height: 250
                    },
                    series: [{
                        name: '{% trans "Altura del Cultivo (cm)" %}',
                        data: data.heights
                    }],
                    xaxis: {
                        categories: data.dates,
                        title: {
                            text: '{% trans "Fecha" %}'
                        }
                    },
                    yaxis: {
                        title: {
                            text: '{% trans "Altura (cm)" %}'
                        }
                    },
                    title: {
                        text: '',
                        align: 'center'
                    },
                    colors: ['#3D6E42', '#2B7561'],
                    stroke: {
                        curve: 'smooth'
                    }
                };

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


    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const cropId = {{ crop.id }};
        const url = `{% url 'crop-growth-data' crop.id %}`;

        fetch(url)
            .then(response => response.json())
            .then(data => {
                var options = {
                    chart: {
                        type: 'bar',
                        height: 250
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                        }
                    },
                    series: [{
                        name: '{% trans "Altura" %}',
                        data: data.soil_temperatures.map((temp, index) => {
                            return {
                                x: temp,
                                y: data.heights[index]
                            };
                        })
                    }],
                    xaxis: {
                        title: {
                            text: '{% trans "Temperatura del Suelo (°C)" %}'
                        }
                    },
                    yaxis: {
                        title: {
                            text: '{% trans "Altura del Cultivo (cm)" %}'
                        }
                    },
                    title: {
                        text: '',
                        align: 'center'
                    },
                    colors: ['#E67034', '#C68739', '#B6C8A7', '#3D6E42', '#2B7561'],
                    tooltip: {
                        x: {
                            formatter: function (value) {
                                return "Temp:" + value + " °C"; // Añade el símbolo de grados centígrados
                            }
                        },
                        y: {
                            formatter: function (value) {
                                return value + " cms"; // Añade la unidad de centímetros
                            }
                        }
                    }
                };

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

<script>
document.addEventListener('DOMContentLoaded', function () {
    var deleteModal = document.getElementById('deleteObservationModal');
    var confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
    var deleteForm = null;

    deleteModal.addEventListener('show.bs.modal', function (event) {
        // El botón que activó el modal
        var button = event.relatedTarget;
        // Extraer el id de la observación del atributo data-id
        var observationId = button.getAttribute('data-id');

        // Crear el formulario de eliminación
        deleteForm = document.createElement('form');
        deleteForm.method = 'POST';
        deleteForm.action = `{% url 'delete-observation' '0' %}`.replace('0', observationId);

        // Agregar el token CSRF
        var csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = 'csrfmiddlewaretoken';
        csrfInput.value = '{{ csrf_token }}';
        deleteForm.appendChild(csrfInput);
    });

    confirmDeleteBtn.addEventListener('click', function () {
        if (deleteForm) {
            // Agregar el formulario al body y enviarlo
            document.body.appendChild(deleteForm);
            deleteForm.submit();
        }
    });
});
</script>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        const cropId = {{ crop.id }};  // Obtener el ID del cultivo actual
        const url = `/crops/${cropId}/plant-count-history/`;  // URL para obtener los datos

        fetch(url)
            .then(response => response.json())
            .then(data => {
                const options = {
                    chart: {
                        type: 'area',
                        height: 250
                    },
                    series: [{
                        name: '{% trans "Cantidad de Plantas" %}',
                        data: data.plant_counts
                    }],
                    xaxis: {
                        categories: data.dates,  // Fechas de las observaciones
                        title: {
                            text: '{% trans "Fecha" %}'
                        }
                    },
                    yaxis: {
                        title: {
                            text: '{% trans "Número de Plantas" %}'
                        }
                    },
                    colors: ['#C68739'],                    
                    title: {
                        text: '',
                        align: 'center'
                    }
                };

                const chart = new ApexCharts(document.querySelector("#plant-count-history-chart"), options);
                chart.render();
            });
    });
</script>

{% endblock %}