{# Garantiza que se envía un valor válido en el campo name para evitar errores en fs_settings #}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        let nameInput = form.querySelector('input[name="name"]');
        if (!nameInput) {
            nameInput = document.createElement('input');
            nameInput.type = 'hidden';
            nameInput.name = 'name';
            form.appendChild(nameInput);
        }
        if (!nameInput.value) {
            nameInput.value = 'theme';
        }
    });

    // Botón de restablecer tema (solo en el formulario de tema)
    const themeForm = Array.from(forms).find(f =>
        f.querySelector('input[name="primary"]') &&
        f.querySelector('input[name="secondary"]') &&
        f.querySelector('input[name="select_menu"]')
    );

    if (themeForm) {
        const defaults = {
            primary: '#0085CC',
            secondary: '#31374a',
            success: '#68904c',
            info: '#0097eb',
            warning: '#e5780b',
            danger: '#fa3b1d',
            link_color: '#0085CC',
            link_hover_color: '#003cc7',
            select_menu: 'horizontal'
        };

        const container = document.createElement('div');
        container.className = 'd-flex justify-content-end mb-3';
        const resetBtn = document.createElement('button');
        resetBtn.type = 'button';
        resetBtn.className = 'btn btn-outline-secondary btn-sm';
        resetBtn.textContent = 'Restablecer tema';
        resetBtn.addEventListener('click', () => {
            Object.keys(defaults).forEach(key => {
                const input = themeForm.querySelector(`[name="${key}"]`);
                if (input) {
                    input.value = defaults[key];
                }
            });
        });
        container.appendChild(resetBtn);
        themeForm.prepend(container);
    }
});
</script>