{% extends "generic/object_edit.html" %}

{% block javascript %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const contentTypeSelect = document.getElementById('id_content_type');
    const objectIdInput = document.getElementById('id_object_id');

    if (!contentTypeSelect || !objectIdInput) {
        console.error("Missing fields");
        return;
    }

    function loadObjectOptions(contentTypeId, preselectedId = null) {
        const ts = objectIdInput.tomselect;
        if (!ts) {
            console.error("Tom Select missing");
            return;
        }

        ts.clearOptions();
        ts.addOption({ value: "", text: "Loading..." });
        ts.refreshOptions(false);

        fetch(`/plugins/itsm/contractserviceitem/object-choices/?content_type=${contentTypeId}`)
            .then(response => response.json())
            .then(data => {
                ts.clearOptions();
                if (data.choices.length === 0) {
                    ts.addOption({ value: "", text: "No objects found" });
                } else {
                    data.choices.forEach(obj => {
                        ts.addOption({ value: obj.id, text: obj.name });
                    });

                    if (preselectedId) {
                        ts.setValue(preselectedId);  // Preselect correct object on page load
                    }
                }
                ts.refreshOptions(false);
            })
            .catch(err => {
                console.error("Failed to load:", err);
                ts.clearOptions();
                ts.addOption({ value: "", text: "Error loading options" });
                ts.refreshOptions(false);
            });
    }

    contentTypeSelect.addEventListener('change', function () {
        loadObjectOptions(this.value);
    });

    // Important: If editing and content_type + object_id already exist, preload them
    if (contentTypeSelect.value && objectIdInput.value) {
        loadObjectOptions(contentTypeSelect.value, objectIdInput.value);
    }
});
</script>
{% endblock %}