Untitled

<style>
    .invalid-input {
        border-color: red;
    }
    .row > div {
        margin-bottom: 10px;
    }
    .full-width {
        width: 100%;
    }
    .carbon-result, .date-inputs {
        display: flex;
        justify-content: space-between;
    }
    .carbon-result > div, .date-inputs > div {
        width: 49%;
    }
</style>

<div class="container my-5">
    <!-- Form -->
    <div class="container my-5">
        <div class="form-group">
            <div id="scope" class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-secondary">
                    <input type="radio" name="scope" value="1"> Scope 1
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="scope" value="2"> Scope 2
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="scope" value="3"> Scope 3
                </label>
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <label>Kategori</label>
                <select id="category" class="form-control"></select>
            </div>
            <div class="col-4">
                <label>Källa</label>
                <select id="source" class="form-control"></select>
            </div>
            <div class="col-4">
                <label>Koldioxidfaktor</label>
                <input type="text" id="carbonfactor" class="form-control" disabled>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <label id="unit-label">Inmatning</label>
                <input type="text" id="unit" class="form-control">
            </div>
            <div class="col-6">
                <label id="unit-label2"></label>
                <input type="text" id="unit2" class="form-control" style="display: none;">
            </div>
            <div class="col-6">
                <label>Resultat CO2e</label>
                <input type="text" id="result" class="form-control" disabled>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <label for="dateFrom">Utsläpp från</label>
                <input type="date" id="dateFrom" class="form-control">
            </div>
            <div class="col-6">
                <label for="dateTo">Utsläpp till</label>
                <input type="date" id="dateTo" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label>Comment</label>
            <textarea class="form-control" id="comment" maxlength="250"></textarea>
            <div class="d-flex justify-content-end">
                <small id="charCount" class="form-text text-muted">0/250</small>
            </div>
        </div>
        <button class="btn btn-primary" id="submit">Lägg till</button>
        <button class="btn btn-outline-secondary" id="clear">Rensa</button>
    </div>
</div>

<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');
        categorySelect.append(new Option("Välj kategori", "", true, true)).attr('disabled', true);
        sourceSelect.append(new Option("Välj källa", "", true, true)).attr('disabled', true);
        unitInput = $('#unit');
        unitInput2 = $('#unit2').hide(); // hide second input box by default
        carbonFactorInput = $('#carbonfactor');
        resultInput = $('#result');
        commentInput = $('#comment');
        charCount = $('#charCount');

        // trigger change event on page load to initialize state
        scopeRadios.change();
    });

    // Your existing JavaScript here...
    
    $('#clear').click(function() {
        $('input').val('');
        $('textarea').val('');
        $('#unit-label2').text('');
        $('#charCount').text('0/250');
        unitInput2.hide();
        $('input[name="scope"]').prop('checked', false);
        categorySelect.prop('selectedIndex', 0).attr('disabled', true);
        sourceSelect.prop('selectedIndex', 0).attr('disabled', true);
        $('.invalid-input').removeClass('invalid-input');
    });
</script>