Untitled

<script>
    let data = @Data@;
    let scopeRadios;
    let categorySelect;
    let sourceSelect;
    let unitInput;
    let unitInput2;
    let carbonFactorInput;
    let resultInput;
    let commentInput;
    let charCount;

    $(document).ready(function () {
        scopeRadios = $('input[name="scope"]');
        categorySelect = $('#category');
        sourceSelect = $('#source');
        unitInput = $('#unit');
        unitInput2 = $('#unit2').hide(); // hide second input box by default
        carbonFactorInput = $('#carbonfactor');
        resultInput = $('#result');
        commentInput = $('#comment');
        charCount = $('#charCount');

        // Event bindings
        scopeRadios.change(onScopeChange);
        categorySelect.change(onCategoryChange);
        sourceSelect.change(onSourceChange);
        unitInput.add(unitInput2).on('input', onUnitInputChange);
        commentInput.on('keyup', onCommentKeyUp);
        $('#submit').click(onSubmitClick);
        $('#clear').click(onClearClick);
        
        // Initialize form state
        resetForm();
    });

    function resetForm() {
        // Clear inputs and textarea
        $('input').val('');
        $('textarea').val('');
        $('#unit-label2').text('');
        $('#charCount').text('0/250');
        unitInput2.hide();
        unitInput.removeClass('col-4').addClass('col-12');
        $('.invalid-input').removeClass('invalid-input');
        unitInput.prop('disabled', true);
        // Clear radio button selection
        scopeRadios.parent().removeClass('active');
        scopeRadios.prop('checked', false);

        // Reset category and source select elements
        categorySelect.empty().append(new Option("Välj kategori", "", true, true)).prop('disabled', true);
        sourceSelect.empty().append(new Option("Välj källa", "", true, true)).prop('disabled', true);
    }

    function onScopeChange() {
        categorySelect.prop('disabled', false);
        let selectedScope = $(this).val();
        let categories = [...new Set(data.filter(item => item.scope == selectedScope).map(item => item.category))];
        categorySelect.empty().append(new Option("Välj kategori", "", true, true));
        categories.forEach(category => {
            categorySelect.append(new Option(category, category));
        });
    }

    function onCategoryChange() {
        if($(this).val() !== "") {
            sourceSelect.empty();
            sourceSelect.append(new Option("Välj källa", "", true, true)).prop('disabled', false);
            let selectedScope = $('input[name="scope"]:checked').val();
            let selectedCategory = $(this).val();
            let sources = [...new Set(data.filter(item => item.scope == selectedScope && item.category == selectedCategory).map(item => item.source))];
            sources.forEach(source => {
                sourceSelect.append(new Option(source, source));
            });
        }
    }

    function onSourceChange() {
        unitInput.val('');
        unitInput2.val('').hide();
        let selectedScope = $('input[name="scope"]:checked').val();
        let selectedCategory = categorySelect.val();
        let selectedSource = $(this).val();
        let selectedData = data.find(item => item.scope == selectedScope && item.category == selectedCategory && item.source == selectedSource);
        let units = selectedData.unit.split(";");
        $('#unit-label').text('Inmatning (' + units[0] + ')');
        unitInput.show().parent().addClass('col-12').removeClass('col-8 col-4'); // make full width
        if (units.length > 1) {
            $('#unit-label2').text('Inmatning (' + units[1] + ')');
            unitInput2.show().parent().addClass('col-6').removeClass('col-8 col-4'); // make half width
            unitInput.parent().removeClass('col-12').addClass('col-6'); // make half width
        } else {
            $('#unit-label2').text('');
        }
        carbonFactorInput.val(selectedData.carbonfactor);
        unitInput.prop('disabled', false);
    }

    function onUnitInputChange() {
        if (isNaN($(this).val()) || !isFinite($(this).val())) {
            $(this).addClass('invalid-input');
        } else {
            $(this).removeClass('invalid-input');
            calculateResult();
        }
    }

    function calculateResult() {
        let unit1 = parseFloat(unitInput.val()) || 0;
        let unit2 = parseFloat(unitInput2.val()) || 0;
        let carbonFactor = parseFloat(carbonFactorInput.val());
        let result = (unit1 + unit2) * carbonFactor;
        resultInput.val(result);
    }

    function onCommentKeyUp() {
        charCount.text($(this).val().length + '/250');
    }

    function onSubmitClick() {
        if ($('.invalid-input').length > 0) {
            alert('Please correct the invalid inputs');
        } else {
            alert('Form submitted!');
        }
    }

    function onClearClick() {
        resetForm();
    }
</script>