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

{% block title %} {{ _("Gestión de Noticias") }} {% endblock title %}

{% block head %}

{% endblock %}

{% block content %}s
    {% load static %}
    {% load humanize %}
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <h1>{% trans "Gestión de Noticias" %}</h1>
                <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#createNewsModal">{% trans "Crear Noticia" %}</button>
                

                <div class="card mt-4">
                    <div class="card-body">
                        <table id="newsTable" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>{% trans "Título" %}</th>
                                    <th>{% trans "Autor" %}</th>
                                    <th>{% trans "Fecha de Creación" %}</th>
                                    <th>{% trans "Acciones" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in news %}
                                <tr>
                                    <td>{{ item.title }}</td>
                                    <td>{{ item.author.first_name }} {{ item.author.last_name }}</td>
                                    <td>{{ item.created_at|date:"d/m/Y H:i" }}</td>
                                    <td>
                                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#updateNewsModal{{ item.id }}">{% trans "Editar" %}</button>
                                        <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteNewsModal{{ item.id }}">{% trans "Eliminar" %}</button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Modal para crear noticia -->
<div class="modal fade" id="createNewsModal" tabindex="-1" aria-labelledby="createNewsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="post" action="{% url 'news-create' %}">
                {% csrf_token %}
                <input type="hidden" name="author" value="{{ author }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="createNewsModalLabel">{% trans "Crear Noticia" %}</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" class="form-label">{% trans "Título" %}</label>
                        <input type="text" class="form-control" id="title" name="title" placeholder="{% trans 'Ingresa el título' %}" required>
                    </div>
                    <div class="mb-3">
                        <label for="content" class="form-label">{% trans "Contenido" %}</label>
                        <textarea class="form-control editor" name="content" rows="5" placeholder="{% trans 'Ingresa el contenido de la noticia' %}" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">{% trans "Guardar" %}</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cerrar" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para editar noticia -->
{% for item in news %}
<div class="modal fade" id="updateNewsModal{{ item.id }}" tabindex="-1" aria-labelledby="updateNewsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="post" action="{% url 'news-update' item.id %}">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="updateNewsModalLabel">{% trans "Editar Noticia" %}</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" class="form-label">{% trans "Título" %}</label>
                        <input type="text" class="form-control" name="title" value="{{ item.title }}" required>
                    </div>
                    <div class="mb-3">
                        <label for="content" class="form-label">{% trans "Contenido" %}</label>
                        <textarea class="form-control editor" name="content" rows="5">{{ item.content|safe }}</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>
{% endfor %}


    <!-- Modal para eliminar noticia -->
    {% for item in news %}
    <div class="modal fade" id="deleteNewsModal{{ item.id }}" tabindex="-1" aria-labelledby="deleteNewsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="post" action="{% url 'news-delete' item.id %}">
                    {% csrf_token %}
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteNewsModalLabel">{% trans "Eliminar Noticia" %}</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 noticia" %} "<strong>{{ item.title }}</strong>"?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-danger">{% trans "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 type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // Inicializar DataTable
        $('#newsTable').DataTable({
            responsive: true,
            autoWidth: false,
            paging: true,
            pageLength: 10,
            order: [[2, 'desc']], // Ordenar por fecha de creación (más reciente primero)
            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' %}"
                }
            }
        });

        // Inicializar Trumbowyg para los editores
        document.querySelectorAll('.editor').forEach(function (textarea) {
            $(textarea).trumbowyg();
        });

        // Reinicializar Trumbowyg en los modales al mostrarse
        const modals = document.querySelectorAll('.modal');
        modals.forEach(modal => {
            modal.addEventListener('shown.bs.modal', function () {
                const editor = modal.querySelector('.editor');
                if (editor) {
                    $(editor).trumbowyg();
                }
            });
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Inicializar DataTable
        $('#postsTable').DataTable({
            responsive: true,
            autoWidth: false,
            paging: true,
            pageLength: 10,
            order: [[2, 'desc']], // Ordenar por Fecha (más reciente primero)
            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>


{% endblock %}