{% extends "farmer/layout_farmer.html" %}
{% load i18n %}

{% block title %} {{_("Editar Cultivo")}} {% 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-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="editCropForm">
                                {% csrf_token %}
                                
                                <div class="form-group">
                                    <label class="col-label" for="id_edit_name">{% trans "Nombre del Cultivo:" %}</label>
                                    <input type="text" id="id_edit_name" name="name" class="form-control" value="{{ crop.name }}" required>
                                </div>

                                <div class="form-group">
                                    <label class="col-label" for="id_edit_crop_type">{% trans "Tipo de Cultivo:" %}</label>
                                    <select id="id_edit_crop_type" name="crop_type" class="form-control">
                                        {% for choice in crop_type_choices %}
                                            <option value="{{ choice.0 }}" {% if crop.crop_type == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

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

                                <div class="form-group">
                                    <label class="col-label" for="id_edit_expected_harvest_date">{% trans "Fecha Esperada de Cosecha:" %}</label>
                                    <input type="date" id="id_edit_expected_harvest_date" name="expected_harvest_date" class="form-control" value="{{ crop.expected_harvest_date|date:'Y-m-d' }}" required>
                                </div>

                                <div class="form-group">
                                    <label class="col-label" for="id_edit_field">{% trans "Campo:" %}</label>
                                    <select id="id_edit_field" name="field" class="form-control">
                                        {% for field in fields %}
                                            <option value="{{ field.id }}" {% if crop.field.id == field.id %}selected{% endif %}>{{ field.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="col-label" for="id_edit_num_plants">{% trans "Número de Plantas:" %}</label>
                                    <input type="number" id="id_edit_num_plants" name="num_plants" class="form-control" value="{{ crop.num_plants|unlocalize }}">
                                </div>

                                <div class="form-group">
                                    <label class="col-label" for="id_edit_yield_per_plant">{% trans "Rendimiento por Planta (kg):" %}</label>
                                    <input type="number" id="id_edit_yield_per_plant" name="yield_per_plant" class="form-control" value="{{ crop.yield_per_plant|floatformat }}">
                                </div>

                                <div class="form-group">
                                    <label class="col-label" for="id_edit_market_price">{% trans "Precio de Mercado (por kg):" %}</label>
                                    <input type="number" id="id_edit_market_price" name="market_price" class="form-control" value="{{ crop.market_price|floatformat }}">
                                </div>

                                <div class="form-group">
                                    <label class="col-label" for="id_edit_planting_date">{% trans "Fecha de Siembra:" %}</label>
                                    <input type="date" id="id_edit_planting_date" name="planting_date" class="form-control" value="{{ crop.planting_date|date:'Y-m-d' }}">
                                </div>

                                <div class="form-group">
                                    <label class="col-label" for="id_edit_harvest_date">{% trans "Fecha de Cosecha:" %}</label>
                                    <input type="date" id="id_edit_harvest_date" name="harvest_date" class="form-control" value="{{ crop.harvest_date|date:'Y-m-d' }}">
                                </div>

                                <div class="form-group">
                                    <label class="col-label" for="id_edit_yield_estimate">{% trans "Estimación de Rendimiento (bushels/acre):" %}</label>
                                    <input type="number" id="id_edit_yield_estimate" name="yield_estimate" class="form-control" value="{{ crop.yield_estimate|unlocalize }}">
                                </div>

                                <div class="form-group">
                                    <label for="id_edit_nitrogen" class="col-label">{% trans "Nitrógeno (N)" %}</label>
                                    <input type="number" step="any" name="nitrogen" id="id_edit_nitrogen" class="form-control" value="{{ crop.nutrient_requirements.N|unlocalize }}">
                                </div>

                                <div class="form-group">
                                    <label for="id_edit_phosphorus" class="col-label">{% trans "Fósforo (P)" %}</label>
                                    <input type="number" step="any" name="phosphorus" id="id_edit_phosphorus" class="form-control" value="{{ crop.nutrient_requirements.P|unlocalize }}">
                                </div>

                                <div class="form-group">
                                    <label for="id_edit_potassium" class="col-label">{% trans "Potasio (K)" %}</label>
                                    <input type="number" step="any" name="potassium" id="id_edit_potassium" class="form-control" value="{{ crop.nutrient_requirements.K|unlocalize }}">
                                </div>

                                <div class="text-center mt-4">
                                    <button type="submit" class="btn btn-primary">{% trans "Guardar Cambios" %}</button>
                                    <a onclick="history.back()" class="btn btn-secondary">{% trans "Cancelar" %}</a>
                                </div>
                            </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>

<!-- Incluir el JavaScript para manejar la cámara -->
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('startCamera').addEventListener('click', function() {
            const video = document.getElementById('video');
            const cameraContainer = document.getElementById('camera-container');

            // Mostrar el contenedor de la cámara
            cameraContainer.style.display = 'block';

            // Solicitar acceso a la cámara
            navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
                .then(function(stream) {
                    video.srcObject = stream;
                    video.play();
                })
                .catch(function(err) {
                    console.error("Error al acceder a la cámara: " + err);
                    alert("No se pudo acceder a la cámara. Asegúrate de que esté permitida.");
                });
        });

        document.getElementById('snap').addEventListener('click', function() {
            const canvas = document.getElementById('canvas');
            const context = canvas.getContext('2d');
            context.drawImage(video, 0, 0, canvas.width, canvas.height);

            const imageData = canvas.toDataURL('image/png');

            // Obtener el código de idioma actual desde el contexto Django
            const languageCode = '{{ request.LANGUAGE_CODE }}';  // Asegúrate de que esto se evalúe correctamente

            fetch(`/${languageCode}/count-plants/`, {  // Construye la URL con el código de idioma
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({ image: imageData })
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.error || 'Error desconocido');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.num_plants !== undefined) {
                    document.getElementById('num_plants').value = data.num_plants; // Actualiza el campo de número de plantas
                    alert('Conteo de plantas completado: ' + data.num_plants);
                    $('#countPlantsModal').modal('hide'); // Cierra el modal
                } else {
                    alert('Error: No se recibió un conteo válido.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error al procesar la imagen: ' + error.message);
            });
        });


    });
</script>

<script type="text/javascript">
    
    let mediaRecorder;
    let recordedChunks = [];

    document.getElementById('startRecording').addEventListener('click', async function() {
        const video = document.getElementById('video');

        // Solicitar acceso a la cámara
        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
        video.srcObject = stream;

        mediaRecorder = new MediaRecorder(stream);

        mediaRecorder.ondataavailable = function(event) {
            if (event.data.size > 0) {
                recordedChunks.push(event.data);
            }
        };

        mediaRecorder.start();
    });

    document.getElementById('stopRecording').addEventListener('click', function() {
        mediaRecorder.stop();
        mediaRecorder.onstop = async function() {
            const blob = new Blob(recordedChunks, { type: 'video/webm' });
            const url = URL.createObjectURL(blob);
            // Aquí puedes enviar el video al servidor o procesarlo localmente
            console.log('Grabación detenida. URL del video:', url);
            recordedChunks = [];  // Reiniciar el array para la próxima grabación
        };
    });

</script>

{% endblock content %}