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

{% block title %} {{_("Crear Cultivo")}} {% endblock title %}

{% block content %}


<div class="main-content">
    <div class="page-content">
        <div class="container-fluid contenido-principal">


            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{% trans "Crear un Nuevo Cultivo" %}</h4>
                        </div>
                        <div class="card-body">
                          
                            {% if messages %}
                                <div class="alert alert-success">
                                    {% for message in messages %}
                                        {{ message }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                            
                                <form method="post" enctype="multipart/form-data" id="cropForm">
                                    {% csrf_token %}

                                    <!-- Nombre del Cultivo -->
                                    <div class="form-group">
                                        <label class="col-label" for="id_name">{% trans "Nombre del Cultivo:" %}</label>
                                        <input type="text" id="id_name" name="name" class="form-control" required>
                                    </div>

                                    <!-- Campo -->
                                    <div class="form-group">
                                        <label class="col-label" for="id_field">{% trans "Campo:" %}</label>
                                        {{ has_fields }}
                                        <select id="id_field" name="field" class="form-select">
                                            {% for field in fields %}
                                            <option value="{{ field.id }}">{{ field.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <!-- Tipo de Cultivo -->
                                    <div class="form-group">
                                        <label class="col-label" for="id_crop_type">{% trans "Tipo de Cultivo:" %}</label>
                                        <select id="id_crop_type" name="crop_type" class="form-select">
                                            {% for value, label in form.crop_type.field.choices %}
                                            <option value="{{ value }}">{{ label }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <!-- Condiciones Óptimas -->
                                    <div class="form-group">
                                        <label class="col-label" for="id_optimal_conditions">{% trans "Condiciones Óptimas:" %}</label>
                                        <textarea id="id_optimal_conditions" name="optimal_conditions" class="form-control" required></textarea>
                                    </div>

                                    <!-- Fecha Esperada de Cosecha -->
                                    <div class="form-group">
                                        <label class="col-label" for="id_expected_harvest_date">{% trans "Fecha Esperada de Cosecha:" %}</label>
                                        <input type="date" id="id_expected_harvest_date" name="expected_harvest_date" class="form-control" required>
                                    </div>

                                    <!-- Número de Plantas -->
                                    <div class="form-group">
                                        <label class="col-label" for="id_num_plants">{% trans "Número de Plantas:" %}</label>
                                        <input type="number" id="id_num_plants" name="num_plants" class="form-control" placeholder="{% trans 'Ingresa o cuenta el número de plantas' %}" required>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-label" for="num_plants"></label>
                                        <button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#countPlantsModal">{% trans "Contar Plantas" %}</button>
                                    </div>

                                    <!-- Rendimiento por Planta -->
                                    <div class="form-group">
                                        <label class="col-label" for="id_yield_per_plant">{% trans "Rendimiento por Planta (kg):" %}</label>
                                        <input type="number" id="id_yield_per_plant" name="yield_per_plant" class="form-control" placeholder="{% trans 'Ingresa el rendimiento por planta' %}" required>
                                    </div>

                                    <!-- Precio de Mercado -->
                                    <div class="form-group">
                                        <label class="col-label" for="id_market_price">{% trans "Precio de Mercado (por kg):" %}</label>
                                        <input type="number" id="id_market_price" name="market_price" class="form-control" placeholder="{% trans 'Ingresa el precio de mercado' %}" required>
                                    </div>

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

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

                                    <!-- Estimación de Rendimiento -->
                                    <div class="form-group">
                                        <label class="col-label" for="id_yield_estimate">{% trans "Estimación de Rendimiento (bushels/acre):" %}</label>
                                        <input type="number" id="id_yield_estimate" name="yield_estimate" class="form-control" placeholder="{% trans 'Ingresa la estimación de rendimiento' %}">
                                    </div>

                                    <!-- Requerimientos de Nutrientes -->
                                    <div class="text-center">
                                        <h3 class="titulo-noticia mb-4 mt-4">{% trans "Requerimientos de Nutrientes:" %}</h3>
                                    </div>
                                    <div class="form-group">
                                        <label for="id_nitrogen" class="col-label">{% trans "Nitrógeno (N):" %}</label>
                                        <input type="number" step="any" name="nitrogen" id="id_nitrogen" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="id_phosphorus" class="col-label">{% trans "Fósforo (P):" %}</label>
                                        <input type="number" step="any" name="phosphorus" id="id_phosphorus" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="id_potassium" class="col-label">{% trans "Potasio (K):" %}</label>
                                        <input type="number" step="any" name="potassium" id="id_potassium" class="form-control" required>
                                    </div>

                                    <!-- Botones -->
                                    <button type="submit" class="btn btn-primary mt-3">{% trans "Crear Cultivo" %}</button>
                                    <a href="{% url 'crop-list' %}" class="btn btn-secondary mt-3">{% trans "Cancelar" %}</a>
                                </form>


                        </div>
                    </div>
                </div>
                <div class="col-md-3"></div>
            </div>

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

<!-- Modal para contar plantas -->
<div class="modal fade" id="countPlantsModal" tabindex="-1" aria-labelledby="countPlantsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="countPlantsModalLabel">{% trans "Contar Plantas" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="camera-container" style="display:block;">
                    <video id="video" width="100%" autoplay playsinline></video>
                    <canvas id="canvas" style="display:none;"></canvas>
                    <div class="d-flex mt-3">
                        <button type="button" class="btn btn-primary me-2" id="startCamera">{% trans "Iniciar Cámara" %}</button>
                        <button type="button" class="btn btn-danger" id="snap">{% trans "Tomar Foto" %}</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cerrar" %}</button>
            </div>
        </div>
    </div>
</div>

{% endblock content %}
{% block footer %}

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        const video = document.getElementById('video');
        const startCameraButton = document.getElementById('startCamera');
        const snapButton = document.getElementById('snap');

        if (!video || !startCameraButton || !snapButton) {
            console.error("Uno o más elementos del DOM no se encontraron.");
            return;
        }

        // Iniciar cámara
        startCameraButton.addEventListener('click', function() {
            navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
                .then(stream => {
                    video.srcObject = stream;
                    video.play();
                })
                .catch(err => {
                    console.error("{% trans 'Error al acceder a la cámara:' %}", err);
                    alert("{% trans 'No se pudo acceder a la cámara.' %}");
                });
        });

        // Tomar foto y enviar al backend
        snapButton.addEventListener('click', function() {
            snapButton.classList.add('btn-loading');
            snapButton.disabled = true;

            setTimeout(() => {
                const canvas = document.getElementById('canvas');
                if (!canvas) {
                    console.error("{% trans 'El elemento canvas no existe.' %}");
                    alert("{% trans 'Error al capturar la imagen.' %}");
                    snapButton.classList.remove('btn-loading');
                    snapButton.disabled = false;
                    return;
                }

                const context = canvas.getContext('2d');

                // Configurar canvas con las dimensiones del video
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                context.drawImage(video, 0, 0, canvas.width, canvas.height);

                // Obtener imagen en base64
                const imageData = canvas.toDataURL('image/png');
                console.log("{% trans "Imagen capturada:" %}", imageData.substring(0, 50));

                fetch("{% url 'count_plants' %}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    body: JSON.stringify({ image: imageData })
                })
                .then(response => response.json())
                .then(data => {
                    let numPlantsInput = document.getElementById('id_num_plants');
                    console.log("Imagen base64 capturada:", imageData.substring(0, 100)); // Mostrar solo los primeros caracteres

                    // Si el input no existe, lo creamos dinámicamente
                    if (!numPlantsInput) {
                        console.warn("El input 'id_num_plants' no se encontró, creando uno nuevo...");
                        numPlantsInput = document.createElement("input");
                        numPlantsInput.type = "text";
                        numPlantsInput.id = "id_num_plants";
                        numPlantsInput.classList.add("form-control");
                        numPlantsInput.setAttribute("readonly", true);
                        document.body.appendChild(numPlantsInput);  // Agrégalo donde sea necesario
                    }

                    if (data.num_plants !== undefined) {
                        numPlantsInput.value = data.num_plants;
                    } else {
                        alert("Error en el conteo de plantas.");
                    }

                    $('#countPlantsModal').modal('hide');
                })
                .catch(error => {
                    console.error("Error:", error);
                    alert("Error al procesar la imagen");
                })
                .finally(() => {
                    snapButton.classList.remove('btn-loading');
                    snapButton.disabled = false;
                });

            }, 300);
        });

    });


</script>

{% endblock %}