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

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

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

                <div class="row">
                    <div class="col-md-12 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title mb-4" style="text-transform: uppercase;">{{ field.name }}</h4>
                                <div class="row">
                                    <div class="col-md-3">
                                        <strong>{% trans "Ubicación:" %}</strong> {{ field.location }}
                                    </div>
                                    <div class="col-md-3">
                                        <strong>{% trans "Tamaño:" %}</strong> {{ field.size }} hectáreas
                                    </div>
                                    <div class="col-md-3">
                                        <strong>{% trans "Tipo de Suelo:" %}</strong> {{ field.soil_type }}
                                    </div>
                                    <div class="col-md-3">
                                        <strong>{% trans "Clima actual:" %}</strong> <span id="weather-info-{{ field.id }}">{% trans "Cargando ..." %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="card mb-3">
                            <div class="card-header justify-content-between d-flex align-items-center align-middle">
                                <h4 class="card-title">{% trans "Distribución de los Tipos de Cultivos" %}</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 "Ayuda a visualizar qué tipo de cultivo predomina en el campo y la diversidad de cultivos presentes" %}'><i class="bi bi-info-circle-fill"></i></button>
                            </div><!-- end card header -->                        
                            <div class="card-body">
                                {% if has_crops %}
                                    <div id="crop-types-chart"></div>
                                {% else %}
                                    <p>{% trans "No hay datos disponibles" %}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-3">
                            <div class="card-header justify-content-between d-flex align-items-center align-middle">
                                <h4 class="card-title">{% trans "Evolución del Crecimiento Promedio" %}</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 identificar tendencias de crecimiento y detectar posibles problemas o mejoras en el manejo del campo." %}'><i class="bi bi-info-circle-fill"></i></button>
                            </div><!-- end card header -->                        
                            <div class="card-body">
                                {% if has_crops %}
                                    <div id="growth-trend-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-4">
                        <div class="card mb-3">
                            <div class="card-header justify-content-between d-flex align-items-center align-middle">
                                <h4 class="card-title">{% trans "Condiciones del Suelo y Clima" %}</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 ver cómo las condiciones del suelo y el clima están afectando el crecimiento de los cultivos en el campo." %}'><i class="bi bi-info-circle-fill"></i></button>
                            </div><!-- end card header -->                        
                            <div class="card-body">
                                {% if has_crops %}
                                    <div id="soil-climate-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">
                    <div class="col-md-4">
                    <!-- Botón para abrir el modal de agregar cultivo -->
                    <a href="/create-crop/" class="btn-primary btn btn-agricarm" role="button"><i class="bi bi-plus-circle-fill"></i> {% trans "Crear Cultivo" %}</a>                    
                    </div>
                    
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">{% trans "Cultivos para" %} {{ field.name }}</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    {% if has_crops %}
                                        <table id="cropsTable" class="ui celled table striped responsive" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "Nombre" %}</th>
                                                    <th>{% trans "Tipo" %}</th>
                                                    <th>{% trans "Condiciones Óptimas" %}</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.optimal_conditions }}</td>
                                                    <td>{{ crop.expected_harvest_date|date:"d M, Y" }}</td>
                                                    <td>
                                                        <a href="{% url 'crop-detail' crop.id %}" class=" btn btn-sm btn-primary btn-agricarm"><i class="bi bi-search"></i> {% trans "Ver Detalle" %}</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 mb-2 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>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    {% else %}
                                        <!-- Mostrar un mensaje si no hay cultivos -->
                                        <p>{% trans "No hay datos disponibles" %}</p>
                                    {% endif %}
                                </div>
                            </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 -->




<!-- Modal para crear Cultivo -->
<div class="modal fade" id="createCropModal" tabindex="-1" aria-labelledby="createCropModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="post" id="createCropForm">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="createCropModalLabel">{% trans "Crear Cultivo" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="id_field" class="form-label">{% trans "Campo" %}</label>
                        <select name="field" id="id_field" class="form-select" required>
                            {% for field in fields %}
                            <option value="{{ field.id }}">{{ field.name }} ({{ field.location }})</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="id_name" class="form-label">{% trans "Nombre del Cultivo" %}</label>
                        <input type="text" name="name" id="id_name" class="form-control" placeholder='{% trans "Ingrese el nombre del cultivo" %}' required>
                    </div>

                    <div class="mb-3">
                        <label for="id_crop_type" class="form-label">{% trans "Tipo de Cultivo" %}</label>
                        <select name="crop_type" id="id_crop_type" class="form-select" required>
                            {% for code, label in model.CROP_TYPE_CHOICES %}
                            <option value="{{ code }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="id_optimal_conditions" class="form-label">{% trans "Condiciones Óptimas" %}</label>
                        <textarea name="optimal_conditions" id="id_optimal_conditions" class="form-control" rows="3" placeholder='{% trans "Describa las condiciones óptimas" %}'></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="id_expected_harvest_date" class="form-label">{% trans "Fecha de Cosecha Esperada" %}</label>
                        <input type="date" name="expected_harvest_date" id="id_expected_harvest_date" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label for="id_num_plants" class="form-label">{% trans "Número de Plantas" %}</label>
                        <input type="number" name="num_plants" id="id_num_plants" class="form-control" placeholder='{% trans "Ingrese el número de plantas" %}'>
                    </div>

                    <div class="mb-3">
                        <label for="id_yield_per_plant" class="form-label">{% trans "Rendimiento por Planta" %} (kg)</label>
                        <input type="number" step="any" name="yield_per_plant" id="id_yield_per_plant" class="form-control" placeholder='{% trans "Ingrese el rendimiento por planta" %}'>
                    </div>

                    <div class="mb-3">
                        <label for="id_market_price" class="form-label">{% trans "Precio de Mercado (por kg)" %}</label>
                        <input type="number" step="any" name="market_price" id="id_market_price" class="form-control" placeholder='{% trans "Ingrese el precio de mercado" %}'>
                    </div>

                    <div class="mb-3">
                        <label for="id_planting_date" class="form-label">{% trans "Fecha de Siembra" %}</label>
                        <input type="date" name="planting_date" id="id_planting_date" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label for="id_harvest_date" class="form-label">{% trans "Fecha de Cosecha" %}</label>
                        <input type="date" name="harvest_date" id="id_harvest_date" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label for="id_yield_estimate" class="form-label">{% trans "Rendimiento Estimado" %} (kg/ha)</label>
                        <input type="number" step="any" name="yield_estimate" id="id_yield_estimate" class="form-control" placeholder="Ingrese el rendimiento estimado">
                    </div>

                    <div class="mb-3">
                        <label for="id_nutrient_requirements" class="form-label">{% trans "Requerimientos de Nutrientes" %}</label>
                        <textarea name="nutrient_requirements" id="id_nutrient_requirements" class="form-control" rows="3" placeholder='{% trans "Describa los requerimientos de nutrientes en formato JSON" %}'></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">{% trans "Guardar Cultivo" %}</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>


{% endblock content %}

{% block footer %}


<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;
            });
        });

        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 () {
            $('#cropsTable').DataTable({
                dom: 'Bfrtip',
                columnDefs: [
                    { width: '30%', targets: 4 },
                ],
                buttons: [
                    { extend: 'excelHtml5', text: 'Descarga Planilla' },
                    { extend: 'pdfHtml5', text: 'PDF' },
                ],
                autoWidth: true,
                responsive: true,
                paging: true,
                pageLength: 10,
                "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 () {
        const fieldId = {{ field.id }};
        const url = "{% url 'field-crop-types-data' field.id %}";

        fetch(url)
            .then(response => response.json())
            .then(data => {
                var options = {
                    chart: {
                        type: 'pie',
                        height: 300
                    },
                    series: data.counts,
                    labels: data.labels,
                    title: {
                        text: '',
                        align: 'center'
                    },
                    colors: ['#E67034', '#C68739', '#B6C8A7', '#3D6E42', '#2B7561'],  // Opcional: Personaliza los colores
                };

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


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const fieldId = {{ field.id }};
        const url = "{% url 'field-growth-trend-data' field.id %}";

        fetch(url)
            .then(response => response.json())
            .then(data => {
                var options = {
                    chart: {
                        type: 'bar',
                        height: 300
                    },
                    series: [{
                        name: '{% trans "Altura Promedio" %}',
                        data: data.average_heights
                    }],
                    xaxis: {
                        categories: data.dates,
                        title: {
                            text: '{% trans "Fecha" %}'
                        }
                    },
                    yaxis: {
                        title: {
                            text: '{% trans "Altura (cm)" %}'
                        }
                    },
                    title: {
                        text: '',
                        align: 'center'
                    },
                    colors: ['#2B7561'], 
                };

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

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const fieldId = {{ field.id }};
        fetch(`/fields/${fieldId}/soil-climate-data/`)
            .then(response => response.json())
            .then(data => {
                const soilConditionsChartOptions = {
                    chart: {
                        type: 'area'
                    },
                    series: [
                        {
                            name: '{% trans "Temperatura del Suelo" %}',
                            data: data.soil_temperatures
                        },
                        {
                            name: '{% trans "Altura del Cultivo" %}',
                            data: data.crop_heights
                        }
                    ],
                    xaxis: {
                        categories: data.dates
                    },
                    colors: ['#3D6E42', '#C68739'],  // Opcional: Personaliza los colores                    
                };
                const soilConditionsChart = new ApexCharts(document.querySelector("#soil-climate-chart"), soilConditionsChartOptions);
                soilConditionsChart.render();
            })
            .catch(error => {
                console.error('{% trans "Error al obtener los datos de condiciones del suelo y clima:" %}', error);
            });
    });
</script>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Iterar sobre cada campo para obtener su clima
                const field = [{ id: {{ field.id }}, latitude: {{ field.latitude|unlocalize }}, longitude: {{ field.longitude|unlocalize }} }];

                field.forEach(field => {
                    const url = `/fields/${field.id}/weather/`;

                    fetch(url)
                        .then(response => response.json())
                        .then(data => {
                            const weatherElement = document.getElementById(`weather-info-${field.id}`);
                            if (data.error) {
                                weatherElement.textContent = data.error;
                            } else {
                                weatherElement.textContent = `${data.temperature}°C, ${data.description}`;
                            }
                        })
                        .catch(error => {
                            console.error('{% trans "Error al obtener el clima:" %}', error);
                            const weatherElement = document.getElementById(`weather-info-${field.id}`);
                            weatherElement.textContent = '{% trans "Error al obtener el clima." %}';
                        });
                });
            });
        </script>

{% endblock footer %}