eveAI/eveai_app/templates/scripts.html

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/perfect-scrollbar.min.js"></script>
        <script src="{{url_for('static', filename='assets/js/plugins/typedjs.js')}}"></script>
        <script src="{{url_for('static', filename='assets/js/plugins/prism.min.js')}}"></script>
        <script src="{{url_for('static', filename='assets/js/plugins/highlight.min.js')}}"></script>
        <script src="{{url_for('static', filename='assets/js/plugins/parallax.min.js')}}"></script>
        <script src="{{url_for('static', filename='assets/js/plugins/nouislider.min.js')}}"></script>
        <script src="{{url_for('static', filename='assets/js/plugins/anime.min.js')}}"></script>
        <script src="{{url_for('static', filename='assets/js/material-kit-pro.min.js')}}?v=3.0.4 type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.0/jsoneditor.min.css" rel="stylesheet" type="text/css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.0/jsoneditor.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    // Initialize JSON editors
    document.querySelectorAll('.json-editor').forEach(function(textarea) {
        // Create container for editor
        var container = document.getElementById(textarea.id + '-editor');

        // Initialize the editor
        var editor = new JSONEditor(container, {
            mode: 'code',
            modes: ['code', 'tree'],
            onChangeText: function(jsonString) {
                textarea.value = jsonString;
            }
        });

        // Set initial value
        try {
            const initialValue = textarea.value ? JSON.parse(textarea.value) : {};
            editor.set(initialValue);
        } catch (e) {
            console.error('Error parsing initial JSON:', e);
            editor.set({});
        }

        // Add validation indicator
        editor.validate().then(function(errors) {
            if (errors.length) {
                container.style.border = '2px solid red';
            } else {
                container.style.border = '1px solid #ccc';
            }
        });
    });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get all forms with tabs
    const formsWithTabs = document.querySelectorAll('form');

    formsWithTabs.forEach(form => {
        // Handle the form's submit event
        form.addEventListener('submit', function(event) {
            const invalidFields = form.querySelectorAll(':invalid');

            if (invalidFields.length > 0) {
                // Prevent form submission
                event.preventDefault();

                // Find which tab contains the first invalid field
                const firstInvalidField = invalidFields[0];
                const tabPane = firstInvalidField.closest('.tab-pane');

                if (tabPane) {
                    // Get the tab ID
                    const tabId = tabPane.id;

                    // Find and click the corresponding tab button
                    const tabButton = document.querySelector(`[data-bs-toggle="tab"][data-bs-target="#${tabId}"]`);
                    if (tabButton) {
                        const tab = new bootstrap.Tab(tabButton);
                        tab.show();
                    }

                    // Scroll the invalid field into view and focus it
                    firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    firstInvalidField.focus();
                }

                // Optional: Show a message about validation errors
                const errorCount = invalidFields.length;
                const message = `Please fill in all required fields (${errorCount} ${errorCount === 1 ? 'error' : 'errors'} found)`;
                if (typeof Swal !== 'undefined') {
                    // If SweetAlert2 is available
                    Swal.fire({
                        title: 'Validation Error',
                        text: message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                } else {
                    // Fallback to browser alert
                    alert(message);
                }
            }
        });

        // Optional: Real-time validation as user switches tabs
        const tabButtons = document.querySelectorAll('[data-bs-toggle="tab"]');
        tabButtons.forEach(button => {
            button.addEventListener('shown.bs.tab', function() {
                const previousTabPane = document.querySelector(button.getAttribute('data-bs-target'));
                if (previousTabPane) {
                    const invalidFields = previousTabPane.querySelectorAll(':invalid');
                    if (invalidFields.length > 0) {
                        // Add visual indicator to tab
                        button.classList.add('has-error');
                    } else {
                        button.classList.remove('has-error');
                    }
                }
            });
        });
    });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('textarea[data-handle-enter="true"]').forEach(function(textarea) {
        textarea.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && e.shiftKey) {
                e.preventDefault();
                const start = this.selectionStart;
                const end = this.selectionEnd;
                this.value = this.value.substring(0, start) + '\n' + this.value.substring(end);
                this.selectionStart = this.selectionEnd = start + 1;
            }
        });
    });
});
</script>


<style>
.json-editor-container {
    height: 400px;
    margin-bottom: 1rem;
}
.tooltip {
    position: fixed;
}
</style>