<?php
$pageTitle = 'Gestión de Idiomas';
require_once __DIR__ . '/../header.php';
?>

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0" data-translate="language_management">Gestión de Idiomas</h1>
        <a href="languages.php?action=add" class="btn btn-primary" data-translate="add_language">Agregar Idioma</a>
    </div>

    <?php if (!empty($message)): ?>
        <div class="alert alert-success"><?php echo htmlspecialchars($message); ?></div>
    <?php endif; ?>
    
    <?php if (!empty($error)): ?>
        <div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div>
    <?php endif; ?>

    <div class="card shadow-sm">
        <div class="card-body">
            <?php if (empty($languages)): ?>
                <div class="text-center py-4">
                    <p class="text-muted" data-translate="no_languages_found">No se encontraron idiomas configurados.</p>
                    <a href="languages.php?action=add" class="btn btn-primary" data-translate="add_first_language">Agregar primer idioma</a>
                </div>
            <?php else: ?>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th data-translate="flag">Bandera</th>
                                <th data-translate="language_name">Nombre</th>
                                <th data-translate="native_name">Nombre Nativo</th>
                                <th data-translate="language_code">Código</th>
                                <th data-translate="is_active">Activo</th>
                                <th data-translate="actions">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($languages as $lang): ?>
                                <tr>
                                    <td><?php echo htmlspecialchars($lang['flag_emoji']); ?></td>
                                    <td><?php echo htmlspecialchars($lang['name']); ?></td>
                                    <td><?php echo htmlspecialchars($lang['native_name']); ?></td>
                                    <td><code><?php echo htmlspecialchars($lang['code']); ?></code></td>
                                    <td>
                                        <?php if ($lang['is_active']): ?>
                                            <span class="badge bg-success" data-translate="yes">Sí</span>
                                        <?php else: ?>
                                            <span class="badge bg-secondary" data-translate="no">No</span>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="languages.php?action=translations&code=<?php echo urlencode($lang['code']); ?>" 
                                               class="btn btn-outline-primary" 
                                               title="Editar traducciones"
                                               data-translate="edit_translations">
                                                <i class="bi bi-translate"></i>
                                            </a>
                                            <a href="languages.php?action=edit&code=<?php echo urlencode($lang['code']); ?>" 
                                               class="btn btn-outline-secondary" 
                                               title="Editar idioma"
                                               data-translate="edit">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <?php if ($lang['code'] !== 'es' && $lang['code'] !== 'en'): ?>
                                                <a href="#" 
                                                   class="btn btn-outline-danger delete-language" 
                                                   data-code="<?php echo htmlspecialchars($lang['code']); ?>"
                                                   title="Eliminar idioma"
                                                   data-translate="delete">
                                                    <i class="bi bi-trash"></i>
                                                </a>
                                            <?php else: ?>
                                                <button class="btn btn-outline-secondary" disabled>
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Modal de confirmación para eliminar idioma -->
<div class="modal fade" id="deleteLanguageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" data-translate="confirm_delete">Confirmar eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" data-translate="are_you_sure_delete_language">
                ¿Estás seguro de que deseas eliminar este idioma? Todas sus traducciones también se eliminarán.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="cancel">Cancelar</button>
                <a href="#" id="confirmDeleteBtn" class="btn btn-danger" data-translate="delete">Eliminar</a>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Manejar clic en botón de eliminar idioma
    document.querySelectorAll('.delete-language').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const languageCode = this.getAttribute('data-code');
            const modal = new bootstrap.Modal(document.getElementById('deleteLanguageModal'));
            
            // Actualizar el enlace de confirmación
            document.getElementById('confirmDeleteBtn').href = `languages.php?action=delete&code=${encodeURIComponent(languageCode)}`;
            
            // Mostrar el modal
            modal.show();
        });
    });
    
    // Traducir elementos con el atributo data-translate
    const elements = document.querySelectorAll('[data-translate]');
    elements.forEach(element => {
        const key = element.getAttribute('data-translate');
        if (translations[key]) {
            if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
                element.placeholder = translations[key];
            } else {
                element.textContent = translations[key];
            }
        }
    });
});
</script>

<?php require_once __DIR__ . '/../footer.php'; ?>
