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

{% block title %} {{ _("Historial de Análisis de Suelo") }} {% endblock title %}

{% block head %}

{% endblock %}

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

    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <h2 class="mt-4">{% trans "Historial de Análisis de Suelo" %} - {{ field.name }}</h2>

                <!-- Botón para abrir el modal -->
                <button type="button" class="btn btn-primary my-3" data-bs-toggle="modal" data-bs-target="#addSoilTestModal">
                    {% trans "Agregar Análisis de Suelo" %}
                </button>

                <!-- Modal para agregar análisis de suelo -->
                <div class="modal fade" id="addSoilTestModal" tabindex="-1" aria-labelledby="addSoilTestModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="addSoilTestModalLabel">{% trans "Agregar Análisis de Suelo" %}</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 'scout-add-soil-test' field.id %}">
                                    {% csrf_token %}

                                    <div class="form-group">
                                        <label for="id_date" class="form-label col-label">{% trans "Fecha" %}</label>
                                        {{ form.date }}
                                    </div>
                                    <div class="form-group">
                                        <label for="id_pH" class="form-label col-label">{% trans "pH del Suelo" %}</label>
                                        {{ form.pH }}
                                    </div>
                                    <div class="form-group">
                                        <label for="id_nitrate_ppm" class="form-label col-label">{% trans "Nitrógeno" %} (ppm)</label>
                                        {{ form.nitrate_ppm }}
                                    </div>
                                    <div class="form-group">
                                        <label for="id_phosphorus_ppm" class="form-label col-label">{% trans "Fósforo" %} (ppm)</label>
                                        {{ form.phosphorus_ppm }}
                                    </div>
                                    <div class="form-group">
                                        <label for="id_potassium_ppm" class="form-label col-label">{% trans "Potasio" %} (ppm)</label>
                                        {{ form.potassium_ppm }}
                                    </div>
                                    <div class="form-group">
                                        <label for="id_zinc_ppm" class="form-label col-label">{% trans "Zinc" %} (ppm)</label>
                                        {{ form.zinc_ppm }}
                                    </div>
                                    <div class="form-group">
                                        <label for="id_sulfur_ppm" class="form-label col-label">{% trans "Azufre" %} (ppm)</label>
                                        {{ form.sulfur_ppm }}
                                    </div>
                                    <div class="form-group">
                                        <label for="id_organic_matter_percentage" class="form-label col-label">{% trans "Materia Orgánica" %} (%)</label>
                                        {{ form.organic_matter_percentage }}
                                    </div>
                                    <div class="form-group">
                                        <label for="id_bulk_density" class="form-label col-label">{% trans "Densidad Aparente" %} (g/cm³)</label>
                                        {{ form.bulk_density }}
                                    </div>
                                    <div class="form-group">
                                        <label for="id_yield_target" class="form-label col-label">{% trans "Rendimiento Objetivo" %} (bushels/acre)</label>
                                        {{ form.yield_target }}
                                    </div>

                                    <button type="submit" class="btn btn-success">{% trans "Guardar" %}</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        
                        <div class="card">
                            <div class="card-body">
                                                 {% if soil_tests %}
                        <div class="table-responsive">
                            <table id="soilTestTable" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>{% trans "Fecha" %}</th>
                                        <th>{% trans "Nitrógeno" %} (ppm)</th>
                                        <th>{% trans "Fósforo" %} (ppm)</th>
                                        <th>{% trans "Potasio" %} (ppm)</th>
                                        <th>{% trans "Materia Orgánica" %} (%)</th>
                                        <th>{% trans "Acciones" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for test in soil_tests %}
                                        <tr>
                                            <td data-order="{{ test.date|date:'Ymd' }}">
                                                {{ test.date|date:'Y-m-d' }}
                                            </td>
                                            <td>{{ test.nitrate_ppm }}</td>
                                            <td>{{ test.phosphorus_ppm }}</td>
                                            <td>{{ test.potassium_ppm }}</td>
                                            <td>{{ test.organic_matter_percentage }}</td>
                                            <td>
                                                <a href="{% url 'recommendations_view' %}" class="btn btn-info btn-sm">{% trans "Ver Recomendaciones" %}</a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="alert alert-warning mt-3" role="alert">
                            {% trans "No hay análisis de suelo registrados para este campo." %}
                        </div>
                    {% endif %}
                            </div>
                        </div>

                    </div>                
                </div>


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

{% endblock %}

{% block footer %}
 <!-- Script para enviar el formulario con AJAX -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.getElementById("addSoilTestForm").addEventListener("submit", function (event) {
            event.preventDefault();  // Evitar recarga de página

            let form = this;
            let formData = new FormData(form);
            let fieldId = form.dataset.fieldId;  // Obtener el ID del campo desde el formulario

            fetch(`/fields/${fieldId}/soil-tests/add/`, {
                method: "POST",
                body: formData,
                headers: {
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    window.location.href = `/fields/${fieldId}/soil-tests/`;  // ✅ Redirigir a la lista
                } else {
                    alert("Error: " + JSON.stringify(data.errors));
                }
            })
            .catch(error => console.error("{% trans 'Error en la petición AJAX:' %}", error));
        });
    });
</script>

<script>
$(document).ready(function() {
    $('#soilTestTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                text: '{% trans "Exportar a Excel" %}',
                className: 'btn-sm'
            },
            {
                extend: 'pdfHtml5',
                text: '{% trans "Exportar a PDF" %}',
                className: 'btn-sm'
            }
        ],
        language: {
            search: '{% trans "Buscar:" %}',
            lengthMenu: '{% trans "Mostrar _MENU_ registros por página" %}',
            zeroRecords: '{% trans "No se encontraron resultados" %}',
            info: '{% trans "Mostrando _START_ a _END_ de _TOTAL_ registros" %}',
            infoEmpty: 'N{% trans "o hay registros disponibles" %}',
            infoFiltered: '{% trans "(filtrado de _MAX_ registros en total)" %}',
            paginate: {
                first: '{% trans "Primero" %}',
                last: '{% trans "Último" %}',
                next: '{% trans "Siguiente" %}',
                previous: '{% trans "Anterior" %}',
            }
        }
    });
});
</script>

{% endblock %}