{% extends "base.html" %}

{% block title %}Gestionar Redes Sociales{% endblock %}

{% block content %}
<div id="admin-content" class="container-fluid">
    <div class="row">
        <div class="col-12 mb-4 admin-header">
            <h1>Gestionar Redes Sociales</h1>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-md-6">
            <p class="mb-0">Configure las redes sociales disponibles para compartir contenido desde la plataforma.</p>
        </div>
        <div class="col-md-6 text-md-end">
            <a href="{{ url_for('admin.create_social_network') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i> Añadir Red Social
            </a>
        </div>
    </div>
    
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Redes Sociales para Compartir</h5>
        </div>
        <div class="card-body">
            {% if social_networks %}
            <div class="table-responsive">
                <table class="table table-hover" id="social-networks-table">
                    <thead>
                        <tr>
                            <th style="width: 50px">#</th>
                            <th style="width: 80px">Icono</th>
                            <th>Nombre</th>
                            <th>Patrón URL</th>
                            <th>Estado</th>
                            <th style="width: 150px">Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="sortable-networks">
                        {% for network in social_networks %}
                        <tr data-id="{{ network.id }}" class="network-item">
                            <td>
                                <div class="drag-handle">
                                    <i class="fas fa-grip-vertical"></i>
                                    <span>{{ network.position }}</span>
                                </div>
                            </td>
                            <td>
                                <div class="social-icon" data-color="{{ network.color|default('#cccccc') }}">
                                    <i class="{{ network.icon }}"></i>
                                </div>
                            </td>
                            <td>{{ network.name }}</td>
                            <td><small class="text-muted">{{ network.url_pattern }}</small></td>
                            <td>
                                <div class="form-check form-switch">
                                    <input class="form-check-input toggle-network" type="checkbox" role="switch" 
                                           id="network-{{ network.id }}" data-id="{{ network.id }}" 
                                           {% if network.is_active %}checked{% endif %}>
                                    <label class="form-check-label" for="network-{{ network.id }}">
                                        {% if network.is_active %}
                                        <span class="badge bg-success">Activo</span>
                                        {% else %}
                                        <span class="badge bg-secondary">Inactivo</span>
                                        {% endif %}
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ url_for('admin.edit_social_network', network_id=network.id) }}" 
                                       class="btn btn-outline-primary">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button type="button" class="btn btn-outline-danger delete-network" 
                                            data-id="{{ network.id }}" data-name="{{ network.name }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="alert alert-info">
                No hay redes sociales configuradas. Haga clic en "Añadir Red Social" para crear una.
            </div>
            {% endif %}
        </div>
        <div class="card-footer">
            <small class="text-muted">
                <i class="fas fa-info-circle"></i> 
                Las redes sociales aparecerán en el orden establecido en esta tabla. Puede arrastrar las filas para reordenarlas.
            </small>
        </div>
    </div>
</div>

<!-- Modal de confirmación de eliminación -->
<div class="modal fade" id="deleteNetworkModal" tabindex="-1" aria-labelledby="deleteNetworkModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteNetworkModalLabel">Confirmar eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                ¿Está seguro de que desea eliminar la red social <strong id="networkNameToDelete"></strong>?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <form id="deleteNetworkForm" method="POST" action="">
                    <button type="submit" class="btn btn-danger">Eliminar</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<!-- SortableJS para arrastrar y soltar elementos -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    $(document).ready(function() {
        // Inicializar SortableJS para reordenar las redes sociales
        const sortable = new Sortable(document.getElementById('sortable-networks'), {
            handle: '.drag-handle',
            animation: 150,
            onEnd: function() {
                // Actualizar las posiciones
                saveOrder();
            }
        });
        
        // Guardar el nuevo orden
        function saveOrder() {
            const positions = {};
            $('.network-item').each(function(index) {
                const id = $(this).data('id');
                positions[id] = index + 1;
                $(this).find('.drag-handle span').text(index + 1);
            });
            
            // Enviar las nuevas posiciones al servidor
            $.ajax({
                url: '{{ url_for("admin.reorder_networks") }}',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ positions: positions }),
                success: function(response) {
                    if (response.success) {
                        toastr.success('Orden actualizado correctamente');
                    } else {
                        toastr.error('Error al actualizar el orden');
                    }
                },
                error: function() {
                    toastr.error('Error al comunicarse con el servidor');
                }
            });
        }
        
        // Toggle de activación/desactivación
        $('.toggle-network').on('change', function() {
            const id = $(this).data('id');
            const $label = $(this).next('label');
            const $badge = $label.find('.badge');
            
            $.ajax({
                url: '{{ url_for("admin.toggle_social_network", network_id=0) }}'.replace('0', id),
                type: 'POST',
                success: function(response) {
                    if (response.success) {
                        if (response.is_active) {
                            $badge.removeClass('bg-secondary').addClass('bg-success').text('Activo');
                        } else {
                            $badge.removeClass('bg-success').addClass('bg-secondary').text('Inactivo');
                        }
                        toastr.success(response.message);
                    } else {
                        toastr.error('Error al cambiar el estado');
                    }
                },
                error: function() {
                    toastr.error('Error al comunicarse con el servidor');
                }
            });
        });
        
        // Confirmación de eliminación
        $('.delete-network').on('click', function() {
            const id = $(this).data('id');
            const name = $(this).data('name');
            
            $('#networkNameToDelete').text(name);
            $('#deleteNetworkForm').attr('action', '{{ url_for("admin.delete_social_network", network_id=0) }}'.replace('0', id));
            $('#deleteNetworkModal').modal('show');
        });
        // Aplicar colores de fondo a los iconos sociales
        $('.social-icon').each(function() {
            var color = $(this).data('color');
            $(this).css('background-color', color || '#cccccc');
        });
    });
</script>
{% endblock %}