{% extends "base.html" %}

{% block title %}Gestión de Artículos del Blog{% endblock %}

{% block content %}
<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-4 admin-header">
                <h1>Gestión de Artículos del Blog</h1>
            </div>
        </div>
        
        <div class="row mb-4">
            <div class="col-md-6">
                <p class="mb-0">Administre los artículos del blog desde esta interfaz.</p>
            </div>
            <div class="col-md-6 text-md-end">
                <a href="{{ url_for('admin.create_article') }}" class="btn btn-primary me-2">
                    <i class="fas fa-plus me-2"></i> Nuevo Artículo
                </a>
                <a href="{{ url_for('admin.generate_ai_article') }}" class="btn btn-primary">
                    <i class="fas fa-bolt me-2"></i> Generar con IA
                </a>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        {% include '_flash_messages.html' %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr class="resizable-headers">
                                        <th class="sortable resizable" data-sort="id" style="min-width: 80px; width: 80px; cursor: pointer;">ID <i class="fas fa-sort"></i><div class="resize-handle"></div></th>
                                        <th class="sortable resizable" data-sort="title" style="cursor: pointer">Título <i class="fas fa-sort"></i><div class="resize-handle"></div></th>
                                        <th class="sortable resizable" data-sort="slug" style="cursor: pointer;">URL <i class="fas fa-sort"></i><div class="resize-handle"></div></th>
                                        <th class="sortable resizable" data-sort="status" style="cursor: pointer;">Estado <i class="fas fa-sort"></i><div class="resize-handle"></div></th>
                                        <th class="sortable resizable" data-sort="date" style="cursor: pointer;">Fecha <i class="fas fa-sort"></i><div class="resize-handle"></div></th>
                                        <th class="resizable">Acciones<div class="resize-handle"></div></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for article in articles %}
                                    <tr>
                                        <td>{{ article.id }}</td>
                                        <td>{{ article.title }}</td>
                                        <td><code>{{ article.slug }}</code></td>
                                        <td>
                                            {% if article.is_published %}
                                            <span class="badge bg-success">Publicado</span>
                                            {% else %}
                                            <span class="badge bg-secondary">Borrador</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ article.created_at }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <a href="{{ url_for('admin.edit_article', article_id=article.id) }}" class="btn btn-outline-primary" title="Editar artículo">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <form method="POST" action="{{ url_for('admin.delete_article', article_id=article.id) }}" class="d-inline" id="deleteForm{{ article.id }}">
                                                    {{ form.hidden_tag() }}
                                                </form>
                                                <button type="submit" form="deleteForm{{ article.id }}" class="btn btn-outline-danger" title="Eliminar artículo" 
                                                        onclick="return confirm('¿Estás seguro de que quieres eliminar este artículo? Esta acción no se puede deshacer.');">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                                <a href="{{ url_for('admin.preview_article', article_id=article.id) }}" class="btn btn-outline-secondary" title="Vista previa">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            

                        </div>

                        {# Pagination controls #}
                        {% if pagination.total > 0 %}
                        <nav aria-label="Page navigation">
                            <ul class="pagination pagination-sm flex-wrap justify-content-center mt-4">
                                {% if pagination.has_prev %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('admin.manage_articles', page=pagination.prev_num, per_page=per_page) }}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                {% endif %}
                                
                                {% for p in pagination.iter_pages() %}
                                    {% if p %}
                                        {% if p == pagination.page %}
                                        <li class="page-item active" aria-current="page"><a class="page-link" href="#">{{ p }}</a></li>
                                        {% else %}
                                        <li class="page-item"><a class="page-link" href="{{ url_for('admin.manage_articles', page=p, per_page=per_page) }}">{{ p }}</a></li>
                                        {% endif %}
                                    {% else %}
                                        <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
                                    {% endif %}
                                {% endfor %}
                                
                                {% if pagination.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('admin.manage_articles', page=pagination.next_num, per_page=per_page) }}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_styles %}
<style>
    .table th {
        background-color: #f8f9fa;
        position: relative;
        overflow: visible;
        cursor: pointer !important;
    }
    
    .btn-group-sm .btn {
        padding: .25rem .5rem;
    }
    
    .sortable {
        cursor: pointer;
        position: relative;
    }
    
    .sortable:hover {
        background-color: #e9ecef;
    }
    
    .sortable i {
        margin-left: 5px;
        opacity: 0.5;
    }
    
    .sortable.asc i:before {
        content: "\f0de"; /* fa-sort-up */
        opacity: 1;
    }
    
    .sortable.desc i:before {
        content: "\f0dd"; /* fa-sort-down */
        opacity: 1;
    }
    
    /* Estilos para columnas redimensionables */
    .resizable {
        position: relative;
    }
    
    .resize-handle {
        position: absolute;
        top: 0;
        right: 0;
        width: 5px;
        height: 100%;
        background-color: transparent;
        cursor: col-resize;
        z-index: 10;
    }
    
    .resize-handle:hover, .resize-handle.active {
        background-color: #007bff;
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(0, 123, 255, 0.05);
    }
    
    /* Asegurar que la tabla ocupe todo el ancho disponible */
    .table-responsive {
        overflow-x: auto;
    }
    
    .table {
        width: 100%;
        table-layout: fixed;
    }
</style>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Obtener todos los encabezados ordenables
        const sortableHeaders = document.querySelectorAll('th.sortable');
        
        // Agregar evento de clic a cada encabezado para ordenamiento
        sortableHeaders.forEach(header => {
            header.addEventListener('click', function(e) {
                // Evitar que el clic en el manejador de redimensionamiento active el ordenamiento
                if (e.target.classList.contains('resize-handle')) {
                    return;
                }
                
                const sortBy = this.getAttribute('data-sort');
                const currentOrder = this.classList.contains('asc') ? 'desc' : 'asc';
                
                // Eliminar clases de ordenamiento de todos los encabezados
                sortableHeaders.forEach(h => {
                    h.classList.remove('asc', 'desc');
                });
                
                // Agregar clase de ordenamiento al encabezado actual
                this.classList.add(currentOrder);
                
                // Ordenar la tabla
                sortTable(sortBy, currentOrder);
            });
        });
        
        // Implementación de columnas redimensionables
        const resizeHandles = document.querySelectorAll('.resize-handle');
        let currentHandle = null;
        let startX, startWidth;
        
        // Agregar eventos para redimensionar columnas
        resizeHandles.forEach(handle => {
            handle.addEventListener('mousedown', function(e) {
                currentHandle = e.target;
                const th = currentHandle.parentElement;
                
                startX = e.pageX;
                startWidth = th.offsetWidth;
                
                // Agregar clase activa para mostrar el indicador visual
                currentHandle.classList.add('active');
                
                // Prevenir selección de texto durante el redimensionamiento
                document.body.style.userSelect = 'none';
                
                // Agregar eventos temporales para seguir el movimiento del mouse
                document.addEventListener('mousemove', resizeColumn);
                document.addEventListener('mouseup', stopResizing);
                
                // Evitar que el evento se propague al clic de ordenamiento
                e.preventDefault();
                e.stopPropagation();
            });
        });
        
        // Función para redimensionar la columna mientras se mueve el mouse
        function resizeColumn(e) {
            if (!currentHandle) return;
            
            const th = currentHandle.parentElement;
            const delta = e.pageX - startX;
            const newWidth = Math.max(80, startWidth + delta); // Ancho mínimo de 80px
            
            th.style.width = newWidth + 'px';
            th.style.minWidth = newWidth + 'px';
        }
        
        // Función para detener el redimensionamiento
        function stopResizing() {
            if (currentHandle) {
                currentHandle.classList.remove('active');
                currentHandle = null;
                
                // Restaurar la selección de texto
                document.body.style.userSelect = '';
                
                // Eliminar los eventos temporales
                document.removeEventListener('mousemove', resizeColumn);
                document.removeEventListener('mouseup', stopResizing);
            }
        }
        
        // Función para ordenar la tabla
        function sortTable(sortBy, order) {
            const table = document.querySelector('table');
            const tbody = table.querySelector('tbody');
            const rows = Array.from(tbody.querySelectorAll('tr'));
            
            // Ordenar las filas
            rows.sort((a, b) => {
                let aValue, bValue;
                
                if (sortBy === 'id') {
                    // Ordenar por ID (numérico)
                    aValue = parseInt(a.cells[0].textContent.trim());
                    bValue = parseInt(b.cells[0].textContent.trim());
                } else if (sortBy === 'title') {
                    // Ordenar por título
                    aValue = a.cells[1].textContent.trim().toLowerCase();
                    bValue = b.cells[1].textContent.trim().toLowerCase();
                } else if (sortBy === 'slug') {
                    // Ordenar por URL (slug)
                    aValue = a.cells[2].textContent.trim().toLowerCase();
                    bValue = b.cells[2].textContent.trim().toLowerCase();
                } else if (sortBy === 'status') {
                    // Ordenar por estado
                    aValue = a.cells[3].textContent.trim().toLowerCase();
                    bValue = b.cells[3].textContent.trim().toLowerCase();
                } else if (sortBy === 'date') {
                    // Ordenar por fecha
                    aValue = new Date(a.cells[4].textContent.trim());
                    bValue = new Date(b.cells[4].textContent.trim());
                }
                
                // Comparar valores según el orden seleccionado
                if (order === 'asc') {
                    return aValue > bValue ? 1 : -1;
                } else {
                    return aValue < bValue ? 1 : -1;
                }
            });
            
            // Eliminar todas las filas actuales
            while (tbody.firstChild) {
                tbody.removeChild(tbody.firstChild);
            }
            
            // Agregar las filas ordenadas
            rows.forEach(row => {
                tbody.appendChild(row);
            });
        }
        
        // Guardar las preferencias de ancho de columna en localStorage
        function saveColumnWidths() {
            const headers = document.querySelectorAll('th.resizable');
            const widths = {};
            
            headers.forEach((header, index) => {
                const width = header.style.width;
                if (width) {
                    widths[index] = width;
                }
            });
            
            localStorage.setItem('articleTableColumnWidths', JSON.stringify(widths));
        }
        
        // Cargar las preferencias de ancho de columna desde localStorage
        function loadColumnWidths() {
            const savedWidths = localStorage.getItem('articleTableColumnWidths');
            if (savedWidths) {
                const widths = JSON.parse(savedWidths);
                const headers = document.querySelectorAll('th.resizable');
                
                Object.keys(widths).forEach(index => {
                    if (headers[index]) {
                        headers[index].style.width = widths[index];
                        headers[index].style.minWidth = widths[index];
                    }
                });
            }
        }
        
        // Cargar anchos guardados al iniciar
        loadColumnWidths();
        
        // Guardar anchos al salir de la página
        window.addEventListener('beforeunload', saveColumnWidths);
    });
</script>
{% endblock %}
