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

{% block title %} {{ _("Gestion de Campos") }} {% endblock title %}

{% block head %}

{% endblock %}

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

        <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 "Comparación del Área de los Campos" %}</h4><button type="button" class="btn btn-lg btn-danger btn-agricarm" data-bs-toggle="popover" data-bs-title="Información" data-bs-content="Útil para identificar qué campos tienen más superficie cultivable."><i class="bi bi-info-circle-fill"></i></button>
	                            </div><!-- end card header -->
                        		<div class="card-body">
                        			{% if has_crops %}
                        			    <div id="field-area-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">
	                            <div class="card-header justify-content-between d-flex align-items-center align-middle">
	                                <h4 class="card-title">{% trans "Análisis de Condiciones Climáticas entre Campos" %}</h4><button type="button" class="btn btn-lg btn-danger btn-agricarm" data-bs-toggle="popover" data-bs-title="Información" data-bs-content="Ú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 has_crops %}
                        			    <div id="climate-analysis-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">
	                            <div class="card-header justify-content-between d-flex align-items-center align-middle">
	                                <h4 class="card-title">{% trans "Distribución de Tipos de Suelo entre Campos" %}</h4><button type="button" class="btn btn-lg btn-danger btn-agricarm" data-bs-toggle="popover" data-bs-title="Información" data-bs-content="Útil para entender qué tipos de suelo predominan en los campos gestionados y cómo se distribuyen en términos de área cultivable."><i class="bi bi-info-circle-fill"></i></button>
	                            </div><!-- end card header -->
	                    		<div class="card-body">
	                    			{% if has_crops %}
	                    			    <div id="soil-type-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">
							<button class=" btn btn-sm btn-primary btn-agricarm" data-bs-target="#exampleModalToggle" data-bs-toggle="modal"><i class="bi bi-plus-circle-fill"></i> {% trans "Crear Campo" %}</button>
						</div><div class="col-md-4"></div>
						<div class="col-md-4"></div>
					</div>
					<div class="row">
							<div class="col-md-12">
	                        	<div class="card">
		                            <div class="card-header justify-content-between d-flex align-items-center">
		                                <h4 class="card-title">{% trans "MIS CAMPOS" %}</h4>
		                            </div><!-- end card header -->
                            		<div class="card-body">
                            			{% if fields %}
                                		<div class="table-responsive">
								            <table  id="tablafields" class="ui celled table striped responsive" style="width:100%">
			                                    <thead class="table-light">
										            <tr>
										                <th>{% trans "Nombre del Campo" %}</th>
										                <th>{% trans "Ubicación" %}</th>
										                <th>{% trans "Tamaño (hectáreas)" %}</th>
										                <th>{% trans "Clima Actual" %}</th>
										                <th>{% trans "Tipo de Suelo" %}</th>
										                <th>{% trans "Acciones" %}</th>
										            </tr>
										        </thead>
										        <tbody>
										            {% for field in fields %}
										            {% if field.id %}
										            <tr>
										                <td><strong>{{ field.name }}</strong></td>
										                <td>{{ field.location }}</td>
										                <td>{{ field.size }}</td>
										                <td id="weather-info-{{ field.id }}">{% trans "Cargando..." %}</td> <!-- Este dato puede venir dinámicamente del objeto field o de una API -->
										                <td>{{ field.soil_type.name }}</td>
										                <td>
										                    <div class="d-grid gap-2 d-md-block">
										                        <a href="{% url 'field-detail' field.id %}" class=" btn btn-sm btn-primary btn-agricarm mb-2"><i class="bi bi-search"></i> {% trans "Ver Campo" %}</a>
										                         <button class="btn btn-warning btn-sm btn-agricarm btn-agricarm-edit mb-2" data-bs-toggle="modal" data-bs-target="#editFieldModal{{ field.id }}"><i class="bi bi-pencil-square"></i> Editar</button>
										                        <button class="btn btn-danger btn-agricarm mb-2 btn-delete btn-sm" 
										                                data-bs-toggle="modal" 
										                                data-bs-target="#deleteModal" 
										                                data-field-id="{{ field.id }}">
										                            <i class="bi bi-x-circle-fill"></i> {% trans "Eliminar" %}
										                        </button>
										                        <a href="{% url 'scout-soil-test-list' field.id %}" class="btn btn-secondary btn-sm btn-agricarm mb-2"><i class="bi bi-x-circle-fill"></i> {% trans "Ver Análisis de Suelo" %}</a>
										                    </div>
										                </td>
										            </tr>


												<!-- Modal de edición -->
												        <div class="modal fade" id="editFieldModal{{ field.id }}" tabindex="-1" aria-hidden="true">
												            <div class="modal-dialog">
												                <div class="modal-content">
												                    <form method="post" action="{% url 'edit-field' field.id %}">
														                {% csrf_token %}
														                <div class="modal-header">
														                    <h5 class="modal-title">{% trans "Editar Campo" %}</h5>
														                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
														                </div>
														                <div class="modal-body">
														                    <div class="form-group">
														                        <label for="id_edit_name_{{ field.id }}" class="col-label">{% trans "Nombre Campo:" %}</label>
														                        <input type="text" name="name" id="id_edit_name_{{ field.id }}" class="form-control" value="{{ field.name }}" required>
														                    </div>
														                    <div class="form-group">
														                        <label for="id_edit_location_{{ field.id }}" class="col-label">{% trans "Ubicación:" %}</label>
														                        <input type="text" name="location" id="id_edit_location_{{ field.id }}" class="form-control" value="{{ field.location }}" required>
														                    </div>
														                    <div class="form-group">
														                        <label for="id_edit_latitude_{{ field.id }}" class="col-label">{% trans "Latitud:" %}</label>
														                        <input type="number" step="any" name="latitude" id="id_edit_latitude_{{ field.id }}" class="form-control" value="{{ field.latitude|unlocalize }}">
														                    </div>
														                    <div class="form-group">
														                        <label for="id_edit_longitude_{{ field.id }}" class="col-label">{% trans "Longitud:" %}</label>
														                        <input type="number" step="any" name="longitude" id="id_edit_longitude_{{ field.id }}" class="form-control" value="{{ field.longitude|unlocalize }}">
														                    </div>
														                    <div class="form-group">
														                        <label for="id_edit_size_{{ field.id }}" class="col-label">{% trans "Tamaño" %} (Ha):</label>
														                        <input type="number" step="any" name="size" id="id_edit_size_{{ field.id }}" class="form-control" value="{{ field.size|unlocalize }}">
														                    </div>
														                    <div class="form-group">
														                        <label for="id_edit_soil_type_{{ field.id }}" class="col-label">{% trans "Tipo de Suelo" %}:</label>
																				<select name="soil_type" id="id_edit_soil_type_{{ field.id }}" class="form-control">
                                                                                    {% for soil in soil_types %}
                                                                                        <option value="{{ soil.id }}" {% if field.soil_type.id == soil.id %}selected{% endif %}>
                                                                                            {{ soil.name }}
                                                                                        </option>
                                                                                    {% endfor %}
                                                                                </select>
														                    </div>
														                </div>
														                <div class="modal-footer">
														                    <button type="submit" class="btn btn-primary">{% trans "Guardar cambios" %}</button>
														                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
														                </div>
														            </form>
												                </div>
												            </div>
												        </div>
												    {% else %}
												        <tr>
												            <td colspan="3">{% trans "Error: Este campo no tiene un ID válido." %}</td>
												        </tr>
												    {% endif %}


										            {% endfor %}
										        </tbody>
										    </table>
					        			</div>
						  				{% else %}
						    			
						    			<p>{% trans "No se han agregado campos aun." %}</p>
						  				
						  				{% endif %}
										</div>
									</div>
								</div>		
							</div>
					</div>

		        </div>
		    </div>
		</div>
		<!-- MODAL CREAR CAMPO -->
		<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
		  <div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">{% trans "CREA UN NUEVO CAMPO" %}</h1>
		        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      </div>
				<form method="post">
				    {% csrf_token %}
				    <div class="modal-body">
				        <div class="form-group">
				            <label for="id_name" class="col-label">{% trans "Nombre Campo:" %}</label>
				            {{ form.name }}
				        </div>
				        <div class="form-group">
				            <label for="id_location" class="col-label">{% trans "Ubicación:" %}</label>
				            {{ form.location }}
				        </div>
				        <div class="form-group">
				            <label for="id_latitude" class="col-label">{% trans "Latitud:" %}</label>
				            {{ form.latitude }}
				        </div>
				        <div class="form-group">
				            <label for="id_longitude" class="col-label">{% trans "Longitud:" %}</label>
				            {{ form.longitude }}
				        </div>               
				        <div class="form-group">
				            <label for="id_size" class="col-label">{% trans "Tamaño" %} (Ha):</label>
				            {{ form.size }}
				        </div>
				        <div class="form-group">
				            <label for="id_soil_type" class="col-label">{% trans "Tipo de Suelo:" %}</label>
				            {{ form.soil_type }}
				        </div>                                
				    </div>
				    <div class="modal-footer">
				        <button type="submit" class="btn btn-sm btn-primary">{% trans "Guardar" %}</button>
				        <button class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
				    </div>
				</form>
		    </div>
		  </div>
		</div>
		<!-- FIN MODAL CREAR CAMPO -->		

		<!-- MODAL CONFIRMACIÓN ELIMINACIÓN -->
		<div class="modal fade" id="deleteModal" 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 Campo" %}</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 campo?" %}</p>
		            </div>
		            <div class="modal-footer">
		                <form method="post" id="deleteFieldForm">
		                    {% 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 %}

{% block footer %}


        <script type="text/javascript" class="init">
            $('#tablafields').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    { extend: 'excelHtml5', text: '{% trans "Descarga Planilla" %}' },
                    { extend: 'pdfHtml5', text: 'PDF' },
                ],
                columnDefs: [
            	// { width: '28%', targets: 4 },
            	],
                order: [[0, 'asc']],
                autoWidth: true,
                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' %}"
		            },
		            // 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 () {
    // Capturar datos y abrir modal de edición
    document.querySelectorAll(".btn-edit").forEach(button => {
        button.addEventListener("click", function () {
            let fieldId = this.dataset.fieldId;
            let fieldName = this.dataset.fieldName;
            let fieldLocation = this.dataset.fieldLocation;
            let fieldLatitude = this.dataset.fieldLatitude;
            let fieldLongitude = this.dataset.fieldLongitude;
            let fieldSize = this.dataset.fieldSize;
            let fieldSoilType = this.dataset.fieldSoilType;

            // Rellenar el formulario dentro del modal
            let editFieldForm = document.getElementById("editFieldForm");
            editFieldForm.setAttribute("action", `/fields/edit/${fieldId}/`);

            document.getElementById("id_edit_name").value = fieldName;
            document.getElementById("id_edit_location").value = fieldLocation;
            document.getElementById("id_edit_latitude").value = fieldLatitude;
            document.getElementById("id_edit_longitude").value = fieldLongitude;
            document.getElementById("id_edit_size").value = fieldSize;
            document.getElementById("id_edit_soil_type").value = fieldSoilType;
        });
    });

    // Capturar ID del campo a eliminar
    document.querySelectorAll(".btn-delete").forEach(button => {
        button.addEventListener("click", function () {
            let fieldId = this.dataset.fieldId;
            let deleteFieldForm = document.getElementById("deleteFieldForm");
            deleteFieldForm.setAttribute("action", `/fields/delete/${fieldId}/`);
        });
    });
});
</script>


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

		        fields.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('Error al obtener el clima:', error);
		                    const weatherElement = document.getElementById(`weather-info-${field.id}`);
		                    weatherElement.textContent = 'Error al obtener el clima.';
		                });
		        });
		    });
		</script>

		<script>
		    document.addEventListener('DOMContentLoaded', function () {
		        fetch('/fields/area-comparison/')
		            .then(response => response.json())
		            .then(data => {
		                var options = {
		                    chart: {
		                        type: 'bar', // Tipo de gráfico: Barras horizontales
		                        height: 300
		                    },
		                    series: [{
		                        name: '{% trans "Hectáreas del Campo" %}',
		                        data: data.areas // Datos de área para cada campo
		                    }],
		                    xaxis: {
		                        categories: data.names, // Nombres de los campos
		                        title: {
		                            text: '{% trans "Campo" %}'
		                        }
		                    },
		                    yaxis: {
		                        title: {
		                            text: '{% trans "Área (hectáreas)" %}'
		                        }
		                    },
		                    colors: ['#E67034', '#C68739', '#B6C8A7', '#3D6E42', '#2B7561'], // Lista de colores para las barras
		                    title: {
		                        text: '',
		                        align: 'center'
		                    },
		                    plotOptions: {
		                        bar: {
		                            horizontal: true, // Barras horizontales
		                            distributed: true  // Distribuye los colores de las barras individualmente
		                        }
		                    }
		                };

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



		<script>
		    document.addEventListener('DOMContentLoaded', function () {
		        const url = "{% url 'field-climate-analysis' %}";

		        fetch(url)
		            .then(response => response.json())
		            .then(data => {
		                var names = data.map(field => field.name);
		                var temperatures = data.map(field => field.temperature);
		                var humidities = data.map(field => field.humidity);
		                var precipitations = data.map(field => field.precipitation);

		                var options = {
		                    chart: {
		                        type: 'area', // Tipo de gráfico: Radar
		                        height: 300
		                    },
		                    series: [
		                        {
		                            name: '{% trans "Temperatura (°C)" %}',
		                            data: temperatures
		                        },
		                        {
		                            name: '{% trans "Humedad (%)" %}',
		                            data: humidities
		                        },
		                        {
		                            name: '{% trans "Precipitación (mm)" %}',
		                            data: precipitations
		                        }
		                    ],
		                    labels: names, // Etiquetas para los ejes del radar
		                    colors: ['#E67034', '#C68739', '#2B7561'], // Colores para las series
		                    title: {
		                        text: '',
		                        align: 'center'
		                    },
		                    yaxis: {
		                        title: {
		                            text: 'Valor'
		                        }
		                    },
		                    tooltip: {
		                        y: {
		                            formatter: function(value) {
		                                return value; // Formato del tooltip para los valores
		                            }
		                        }
		                    }
		                };

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


		<script>
		    document.addEventListener('DOMContentLoaded', function () {
		        fetch("{% url 'soil-type-distribution' %}")
		            .then(response => response.json())
		            .then(data => {
		                var options = {
		                    chart: {
		                        type: 'pie',  // Puedes cambiar a 'bar' para barras horizontales
		                        height: 300
		                    },
		                    series: data.soil_areas,  // Datos de áreas
		                    labels: data.soil_types,  // Tipos de suelo
		                    title: {
		                        text: '',
		                        align: 'center'
		                    },
		                    colors: ['#E67034', '#C68739', '#B6C8A7', '#3D6E42', '#2B7561'],  // Opcional: Personaliza los colores
		                    tooltip: {
		                        y: {
		                            formatter: function (value) {
		                                return value.toFixed(2) + ' {% trans "hectáreas" %}';  // Formato de tooltip
		                            }
		                        }
		                    }
		                };

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


{% endblock %}