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

{% block title %}{% trans "Gestión de Publicaciones" %}{% endblock title %}

{% block head %}

<script type="text/javascript">
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let cookie of cookies) {
                cookie = cookie.trim();
                // ¿Comienza este string de cookie con el nombre que queremos?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    const csrftoken = getCookie('csrftoken');
    
    // Configurar jQuery para incluir el token CSRF en las solicitudes AJAX
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!this.crossDomain && settings.type == 'POST') {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
</script>

{% endblock %}

{% block content %}s
    {% load static %}
    {% load humanize %}
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">

                <div class="row mb-4">
                    <div class="col-md-12">
                        <h2>{% trans "Gestión de Publicaciones" %}</h2>
                    </div>
                </div>
                

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                        <div class="card-body">
                            <table class="table table-striped" id="postsTable">
                                <thead>
                                    <tr>
                                        <th>{% trans "Título" %}</th>
                                        <th>{% trans "Autor" %}</th>
                                        <th>{% trans "Fecha" %}</th>
                                        <th>{% trans "Comentarios" %}</th>
                                        <th>{% trans "Acciones" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for post in posts %}
                                    <tr>
                                        <td>{{ post.title }}</td>
                                        <td>{{ post.author }}</td>
                                        <td>{{ post.created_at|date:"d/m/Y H:i" }}</td>
                                        <td>
                                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#commentsModal{{ post.id }}">
                                                {% trans "Ver Comentarios" %} ({{ post.comments.count }})
                                            </button>
                                        </td>
                                        <td>
                                            <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#updatePostModal{{ post.id }}">{% trans "Editar" %}</button>
                                            <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deletePostModal{{ post.id }}">{% trans "Eliminar" %}</button>
                                        </td>
                                    </tr>

                                    <!-- Modal para Editar Post -->
                                    <div class="modal fade" id="updatePostModal{{ post.id }}" tabindex="-1" aria-labelledby="updatePostModalLabel{{ post.id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                               <form action="{% url 'post_update' post.id %}" method="POST">
                                                    {% csrf_token %}
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="updatePostModalLabel{{ post.id }}">{% trans "Editar Publicación" %}</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="mb-3">
                                                            <label for="title{{ post.id }}" class="form-label">{% trans "Título" %}</label>
                                                            <input type="text" class="form-control" id="title{{ post.id }}" name="title" value="{{ post.title }}" required>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="content{{ post.id }}" class="form-label">{% trans "Contenido" %}</label>
                                                            <textarea class="form-control" id="content{{ post.id }}" name="content" rows="5" required>{{ post.content }}</textarea>
                                                        </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 "Cerrar" %}</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Modal para Comentarios -->
                                    <div class="modal fade" id="commentsModal{{ post.id }}" tabindex="-1">
                                        <div class="modal-dialog modal-dialog-scrollable">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5>{% trans "Comentarios" %}</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <ul id="commentsList{{ post.id }}">
                                                        {% for comment in post.comments.all %}
                                                        <li id="comment{{ comment.id }}">
                                                            {{ comment.author.first_name }}: <span class="comment-content">{{ comment.content }}</span>
                                                            <button onclick="editComment({{ comment.id }})" class="btn btn-warning btn-sm">{% trans "Editar" %}</button>
                                                            <button onclick="deleteComment({{ comment.id }})" class="btn btn-danger btn-sm">{% trans "Eliminar" %}</button>
                                                        </li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Fin Modal para Comentarios -->
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    </div>
                </div>
                    
            </div>
        </div>
    </div>


    <!-- Crear publicación -->
    <div class="modal fade" id="createPostModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="createPostForm">
                    <div class="modal-header">
                        <h5 class="modal-title">{% trans "Crear Publicación" %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="author" value="{{ request.user.scout_profile.id }}">
                        <div class="mb-3">
                            <label>{% trans "Título" %}</label>
                            <input type="text" name="title" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label>{% trans "Contenido" %}</label>
                            <textarea name="content" class="form-control" rows="5" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">{% trans "Guardar" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


<!-- Modal para eliminar publicación -->
{% for post in posts %}
<div class="modal fade" id="deletePostModal{{ post.id }}" tabindex="-1" aria-labelledby="deletePostModalLabel{{ post.id }}" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" id="deletePostForm{{ post.id }}" action="{% url 'post-delete' post.id %}">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="deletePostModalLabel{{ post.id }}">{% trans "Eliminar Publicación" %}</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 la publicación" %} "<strong>{{ post.title }}</strong>"?</p>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Eliminar</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endfor %}

{% endblock content %}

{% block footer %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        $('#postsTable').DataTable({
            dom: 'Bfrtip',
            buttons: [
                { extend: 'excelHtml5', text: '{% trans "Exportar a Excel" %}' },
                { extend: 'pdfHtml5', text: '{% trans "Exportar a PDF" %}' }
            ],
            order: [[2, 'desc']],  // Ordenar por la columna de fecha de manera descendente
            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' %}"
                }
            }
        });
    });
</script>

<script type="text/javascript">
    const modalElement = document.getElementById('commentsModal');
    console.log(modalElement); // Verifica que el elemento esté presente en el DOM.s

    function loadComments(postId) {
        $.get(`/admin-posts/${postId}/comments/`, function (data) {
            $(`#commentsList${postId}`).html(data.html);
        }).fail(function () {
            alert('{% trans "Error al cargar los comentarios. Verifica que la URL esté configurada correctamente." %}');
        });
    }

    function editComment(commentId) {
        const content = prompt("Editar comentario:");
        if (content) {
            $.post(`/{{ request.LANGUAGE_CODE }}/admin-comments/${commentId}/update/`, { content: content }, function () {
                $(`#comment${commentId}`).find('span.comment-content').text(content);
            });
        } else {
            alert('{% trans "El contenido del comentario no puede estar vacío." %}');
        }
    }


    function deleteComment(commentId) {
        $.post(`/{{ request.LANGUAGE_CODE }}/admin-comments/${commentId}/delete/`, function () {
            $(`#comment${commentId}`).remove();
        });
    }
</script>

{% endblock %}