sistema_funcionando_lastwar/templates/admin/language_form.php

<?php
$isEdit = isset($language) && !empty($language);
$pageTitle = $isEdit ? 'Editar Idioma' : 'Agregar Idioma';
$formAction = $isEdit ? "?action=edit&code=" . urlencode($language['code']) : '?action=add';
$submitText = $isEdit ? 'Actualizar Idioma' : 'Agregar Idioma';

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="<?php echo $isEdit ? 'edit_language' : 'add_language'; ?>">
            <?php echo $isEdit ? 'Editar Idioma' : 'Agregar Idioma'; ?>
        </h1>
        <a href="languages.php" class="btn btn-outline-secondary" data-translate="back_to_languages">Volver a Idiomas</a>
    </div>

    <?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">
            <form method="POST" action="<?php echo $formAction; ?>" id="languageForm">
                <div class="mb-3">
                    <label for="name" class="form-label" data-translate="language_name">Nombre del Idioma</label>
                    <input type="text" class="form-control" id="name" name="name" required 
                           value="<?php echo htmlspecialchars($language['name'] ?? ''); ?>">
                </div>
                
                <div class="mb-3">
                    <label for="native_name" class="form-label" data-translate="native_name">Nombre Nativo</label>
                    <input type="text" class="form-control" id="native_name" name="native_name" required
                           value="<?php echo htmlspecialchars($language['native_name'] ?? ''); ?>">
                </div>
                
                <div class="mb-3">
                    <label for="code" class="form-label" data-translate="language_code">Código de Idioma (ej: es, en, fr)</label>
                    <input type="text" class="form-control" id="code" name="code" required 
                           pattern="[a-z]{2}(-[A-Z]{2})?" 
                           title="El código debe tener 2 letras minúsculas (ej: es, en, fr) o formato de localización (ej: es-ES, en-US)"
                           <?php echo $isEdit ? 'readonly' : ''; ?>
                           value="<?php echo htmlspecialchars($language['code'] ?? ''); ?>">
                    <div class="form-text" data-translate="language_code_help">
                        Usa códigos ISO 639-1 (ej: es, en, fr) o códigos de localización (ej: es-ES, en-US)
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="flag_emoji" class="form-label" data-translate="flag_emoji">Emoji de Bandera</label>
                    <div class="input-group">
                        <span class="input-group-text" id="flag-preview"><?php echo htmlspecialchars($language['flag_emoji'] ?? '🏳️'); ?></span>
                        <input type="text" class="form-control" id="flag_emoji" name="flag_emoji" required
                               maxlength="4"
                               value="<?php echo htmlspecialchars($language['flag_emoji'] ?? ''); ?>">
                    </div>
                    <div class="form-text" data-translate="flag_emoji_help">
                        Ingresa un emoji de bandera (ej: 🇪🇸, 🇬🇧, 🇫🇷). Puedes copiarlos de <a href="https://emojicopy.com/" target="_blank">emojicopy.com</a>
                    </div>
                </div>
                
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1"
                           <?php echo (isset($language['is_active']) && $language['is_active']) ? 'checked' : ''; ?>>
                    <label class="form-check-label" for="is_active" data-translate="is_active">Activo</label>
                    <div class="form-text" data-translate="is_active_help">
                        Los idiomas inactivos no estarán disponibles para los usuarios
                    </div>
                </div>
                
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <a href="languages.php" class="btn btn-secondary me-md-2" data-translate="cancel">Cancelar</a>
                    <button type="submit" class="btn btn-primary">
                        <?php echo $isEdit ? 'Actualizar Idioma' : 'Agregar Idioma'; ?>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Actualizar vista previa del emoji de bandera
    const flagEmojiInput = document.getElementById('flag_emoji');
    const flagPreview = document.getElementById('flag-preview');
    
    if (flagEmojiInput && flagPreview) {
        flagEmojiInput.addEventListener('input', function() {
            flagPreview.textContent = this.value || '🏳️';
        });
    }
    
    // Validación del formulario
    const form = document.getElementById('languageForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            // Validar código de idioma
            const codeInput = document.getElementById('code');
            if (codeInput && !/^[a-z]{2}(-[A-Z]{2})?$/.test(codeInput.value)) {
                e.preventDefault();
                alert('Por favor ingresa un código de idioma válido (ej: es, en, fr, es-ES, en-US)');
                codeInput.focus();
                return false;
            }
            
            // Validar emoji de bandera
            if (flagEmojiInput && !flagEmojiInput.value.trim()) {
                e.preventDefault();
                alert('Por favor ingresa un emoji de bandera');
                flagEmojiInput.focus();
                return false;
            }
            
            return true;
        });
    }
    
    // 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'; ?>