{% extends "admin/layout_admin.html" %}
{% load i18n %}

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

{% block head %}

{% endblock %}

{% block content %}s
    {% load static %}
    {% load humanize %}
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid contenido-principal">
                <h2 class="mb-4">{% trans "Listado de Scouts" %}</h2>

                <div class="card">
                    <div class="card-body">
                        <table id="scoutTable" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>{% trans "Nombre" %}</th>
                                    <th>{% trans "Correo Electrónico" %}</th>
                                    <th>{% trans "Teléfono" %}</th>
                                    <th>{% trans "Finquero" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for scout in scouts %}
                                <tr>
                                    <td>{{ scout.first_name }} {{ scout.last_name }}</td>
                                    <td>{{ scout.email }}</td>
                                    <td>{{ scout.phone }}</td>
                                    <td>
                                        {% if scout.farmer %}
                                        <a href="#" class="farmer-details" data-farmer-id="{{ scout.farmer.id }}">
                                            {{ scout.farmer.first_name }} {{ scout.farmer.last_name }}
                                        </a>
                                        {% else %}
                                        <span>{% trans "No asignado" %}</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <!-- Modal para Detalles del Finquero -->
                                <div class="modal fade" id="farmerDetailsModal" tabindex="-1" aria-labelledby="farmerDetailsModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="farmerDetailsModalLabel">{% trans "Detalles del Finquero" %}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <p><strong>{% trans "Nombre:" %}</strong> <span id="farmerName"></span></p>
                                                <p><strong>{% trans "Correo Electrónico:" %}</strong> <span id="farmerEmail"></span></p>
                                                <p><strong>{% trans "Teléfono:" %}</strong> <span id="farmerPhone"></span></p>
                                                <p><strong>{% trans "Dirección:" %}</strong> <span id="farmerAddress"></span></p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cerrar" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>  

                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
{% endblock content %}

{% block footer %}
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // Inicializar DataTable
        $('#scoutTable').DataTable({
            responsive: true,
            autoWidth: false,
            paging: true,
            pageLength: 10,
            language: {
                search: "{% trans 'Buscar:' %}",
                zeroRecords: "{% trans 'No se encontraron resultados' %}",
                info: "{% trans 'Mostrando _START_ a _END_ de _TOTAL_ registros' %}",
                infoEmpty: "{% trans 'No hay registros disponibles' %}",
                lengthMenu: "{% trans 'Mostrar _MENU_ registros' %}",
                paginate: {
                    previous: "{% trans 'Anterior' %}",
                    next: "{% trans 'Siguiente' %}"
                }
            }
        });

        // Mostrar detalles del Finquero en el modal
        const farmerLinks = document.querySelectorAll('.farmer-details');
        farmerLinks.forEach(link => {
            link.addEventListener('click', function (event) {
                event.preventDefault();
                const farmerId = this.dataset.farmerId;

                fetch(`/agronomist/farmer/${farmerId}/details/`)
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('farmerName').textContent = data.name;
                        document.getElementById('farmerEmail').textContent = data.email;
                        document.getElementById('farmerPhone').textContent = data.phone;
                        document.getElementById('farmerAddress').textContent = data.address;

                        const modal = new bootstrap.Modal(document.getElementById('farmerDetailsModal'));
                        modal.show();
                    })
                    .catch(error => console.error('Error fetching farmer details:', error));
            });
        });
    });
</script>
{% endblock %}