<form class="env-form dvz-fee-calculator" id="raknesnurra" style="max-width: 600px;">

    <!-- Steg 1: Inkomst -->
    <ol style="padding-left: 20px;">
        <li>
            <strong>Fyll i dina inkomstuppgifter</strong>

            <h3 class="sv-font-rubrik-4">
                <a
                    class="env-collapse-header env-flex env-flex--justify-content-between"
                    role="button"
                    href="#inkomster"
                    data-env-collapse="data-env-collapse"
                    aria-expanded="false"
                    aria-controls="inkomster">
                    <span class="env-collapse-header--icons"></span>
                    <span class="env-m-right--x-large">Klicka här för att fylla i inkomster efter skatt</span>
                </a>
            </h3>

            <div class="env-collapse dvz-fee-calculator__collapse" id="inkomster">
                <div class="env-form-field">
                    <label for="lon" class="env-form-label">Nettoinkomst (per månad), exempelvis lön, pension, livränta etc.</label>
                    <div class="dvz-fee-calculator__input-row">
                        <input class="env-form-input" type="number" id="lon" min="0" step="1" value="0">
                        kronor
                    </div>
                </div>
                <div class="env-form-field">
                    <label for="kapital" class="env-form-label">Kapitalinkomst (per år)</label>
                    <div class="dvz-fee-calculator__input-row">
                        <input class="env-form-input" type="number" id="kapital" min="0" step="1" value="0">
                        kronor
                    </div>
                </div>
                <div class="env-form-field">
                    <label for="bostadsbidrag" class="env-form-label">Bostadsbidrag och bostadstillägg (per månad)</label>
                    <div class="dvz-fee-calculator__input-row">
                        <input class="env-form-input" type="number" id="bostadsbidrag" min="0" step="1" value="0">
                        kronor
                    </div>
                </div>
            </div>
            <div class="env-form-field">
                <label class="env-form-label" for="inkomst">
                    <b>Summa</b>
                </label>
                <div class="dvz-fee-calculator__input-row">
                    <input
                        class="env-form-input"
                        type="number"
                        id="inkomst"
                        readonly="readonly"
                        placeholder="Fyll i dina inkomster ovan">
                    kronor
                </div>
            </div>
        </li>

        <!-- Steg 2: Schablonbelopp -->
        <li >
            <strong>Fyll i schablonbelopp</strong>
            <fieldset class="env-form-fieldset">
                <legend class="env-form-legend">Välj det alternativ som passar din situation. Du kan även justera beloppet manuellt.
                </legend>
                <div class="env-form-field">
                    <div class="env-form-control">
                        <input
                            class="env-radio"
                            type="radio"
                            name="typ"
                            value="ensam61"
                            id="ensam61"
                            onclick='document.getElementById("schablon").value="$scriptVariables.schablonEnsam61"'>
                        <label class="env-form-label" for="ensam61">Jag är ensamstående och över 61 år</label>
                    </div>
                </div>
                <div class="env-form-field">
                    <div class="env-form-control">
                        <input
                            class="env-radio"
                            type="radio"
                            name="typ"
                            value="ensam"
                            id="ensam"
                            onclick='document.getElementById("schablon").value="$scriptVariables.schablonEnsam"'>
                        <label class="env-form-label" for="ensam">Jag är ensamstående och under 61 år </label>
                    </div>
                </div>
                <div class="env-form-field">
                    <div class="env-form-control">
                        <input
                            class="env-radio"
                            type="radio"
                            name="typ"
                            value="makar61"
                            id="makar61"
                            onclick='document.getElementById("schablon").value="$scriptVariables.schablonSambo61"'>
                        <label class="env-form-label" for="makar61">
                            Jag bor med make/maka/registrerad partner och är över 61 år
                        </label>
                    </div>
                </div>
                
                <div class="env-form-field">
                    <div class="env-form-control">
                        <input
                            class="env-radio"
                            type="radio"
                            name="typ"
                            value="makar"
                            id="makar"
                            onclick='document.getElementById("schablon").value="$scriptVariables.schablonSambo"'>
                        <label class="env-form-label" for="makar">
                            Jag bor med make/maka/registrerad partner och är under 61 år 
                        </label>
                    </div>
                </div>
                <label class="env-form-label env-assistive-text" for="schablon"></label>
                <div class="dvz-fee-calculator__input-row">
                    <input class="env-form-input" type="number" id="schablon" min="0" step="1" required="required">
                    kronor
                </div>
            </fieldset>
        </li>

        <!-- Steg 3: Boendekostnad -->
        <li >
            <strong>Fyll i boendekostnad</strong>
            <h3 class="sv-font-rubrik-4">
                <a
                    class="env-collapse-header env-flex env-flex--justify-content-between"
                    role="button"
                    href="#boendekostnader"
                    data-env-collapse="data-env-collapse"
                    aria-expanded="false"
                    aria-controls="boendekostnader">
                    <span class="env-collapse-header--icons"></span>
                    <span class="env-m-right--x-large">Klicka här för att fylla i boendekostnader</span>
                </a>
            </h3>
            <div class="env-collapse dvz-fee-calculator__collapse" id="boendekostnader">
                <div class="env-form-field">
                    <label for="hyra" class="env-form-label">Hyra (per månad)</label>
                    <div class="dvz-fee-calculator__input-row">
                        <input class="env-form-input" type="number" id="hyra" min="0" step="1" value="0">
                        kronor
                    </div>
                </div>
                <div class="env-form-field">
                    <label for="ranteutgifter" class="env-form-label">Ränteutgifter för lån på fastighet eller bostadsrätt (per månad)</label>
                    <div class="dvz-fee-calculator__input-row">
                        <input class="env-form-input" type="number" id="ranteutgifter" min="0" step="1" value="0">
                        kronor</div>

                    <label for="driftskostnader" class="env-form-label">Driftskostnader (per månad), exempelvis uppvärmning, vatten, avlopp etc.</label>
                    <div class="dvz-fee-calculator__input-row">
                        <input class="env-form-input" type="number" id="driftskostnader" min="0" step="1" value="0">
                        kronor
                    </div>
                </div>
            </div>
            <label style="display:block; margin-bottom: 12px;">
                <label class="env-form-label" for="boende">Summa</label>
                <div class="dvz-fee-calculator__input-row">
                    <input
                        type="number"
                        id="boende"
                        readonly="readonly"
                        class="env-form-input"
                        placeholder="Fyll i dina boendekostnader ovan"
                        required="required">
                    kronor
                </div>
            </label>
        </li>

        <!-- Steg 4: Resultat -->
        <li style="margin-top: 20px;">
            <strong>Klicka på knappen Räkna ut</strong>
            <p class="font-small">
                Då ser du vad du har kvar att leva på och en kort förklaring till resultatet.
            </p>
            <button class="env-button" type="button" onclick="raknaUt()">
                Räkna ut
            </button>
            <p id="resultat" class="font-description"></p>
            <p id="infoText" class="font-normal"></p>
        </li>
    </ol>

</form>

<!-- <style> #raknesnurra input[type=number] { width: 100px; height: 32px; font-size: 1em;
box-sizing: border-box; } #raknesnurra button { padding: 6px 14px; font-size: 1em; cursor: pointer;
} summary { font-size: 1em; } </style> -->

<script>
    function uppdateraInkomst() {
        const lon = parseFloat(document.getElementById("lon").value) || 0;
        const kapital = parseFloat(document.getElementById("kapital").value) || 0;
        const bostadsbidrag = parseFloat(document.getElementById("bostadsbidrag").value) || 0;

        // Kapitalinkomst delas med 12 och avrundas till heltal
        const total = lon + Math.round(kapital / 12) + bostadsbidrag;
        document
            .getElementById("inkomst")
            .value = total;
    }

    function uppdateraBoende() {
        const hyra = parseFloat(document.getElementById("hyra").value) || 0;
        const ranteutgifter = parseFloat(document.getElementById("ranteutgifter").value) || 0;
        const driftskostnader = parseFloat(document.getElementById("driftskostnader").value) || 0;

        const totalBoende = hyra + ranteutgifter + driftskostnader;
        document
            .getElementById("boende")
            .value = totalBoende;
    }

    // Eventlyssnare för inkomster
    ["lon", "kapital", "bostadsbidrag"].forEach(id => {
        document
            .getElementById(id)
            .addEventListener("input", uppdateraInkomst);
    });

    // Eventlyssnare för boendekostnader
    ["hyra", "ranteutgifter", "driftskostnader"].forEach(id => {
        document
            .getElementById(id)
            .addEventListener("input", uppdateraBoende);
    });

    window.addEventListener("DOMContentLoaded", () => {
        //uppdateraInkomst(); uppdateraBoende();
    });

    function raknaUt() {
        uppdateraInkomst();
        uppdateraBoende();

        const inkomst = parseFloat(document.getElementById("inkomst").value) || 0;
        const schablon = parseFloat(document.getElementById("schablon").value);
        const tillagg = parseFloat(
            document.getElementById("tillagg")
                ?.value
        ) || 0;
        const boende = parseFloat(document.getElementById("boende").value);

        const resultatElement = document.getElementById("resultat");
        const infoElement = document.getElementById("infoText");

        if (isNaN(schablon) || isNaN(boende)) {
            resultatElement.innerHTML = "<span style='color:black;'>Fyll i alla fält korrekt.</span>";
            infoElement.innerHTML = "";
            return;
        }

        const kvar = inkomst - schablon - tillagg - boende;
        const farg = kvar < 0
            ? "red"
            : kvar > 0
                ? "green"
                : "black";

        resultatElement.innerHTML = "<span style='color:black;'>Ditt avgiftsutrymme: </span><span style='color:" +
                farg + ";'>" + kvar.toLocaleString("sv-SE") + " kr</span>";

        if (kvar < 0) {
            infoElement.innerHTML = 'Det här är ditt personliga avgiftsutrymme. Din ekonomi täcker inte dina kostnader, vilket innebär ' +
                    'att kommunen inte kommer att ta ut en avgift för omsorg från dig. Vi rekommenderar att du söker bo' +
                    'stadstillägg hos <a href="https://www.pensionsmyndigheten.se/for-pensionarer/ekonomiskt-stod/sa-fu' +
                    'ngerar-bostadstillagg/ansok-om-bostadstillagg" target="_blank" rel="noopener noreferrer">Pensionsm' +
                    'yndigheten</a>.<br> Observera att detta är en uppskattning. Den slutgiltiga beräkningen görs av ko' +
                    'mmunens avgiftshandläggare.';
        } else if (kvar === 0) {
            infoElement.innerHTML = "Det här är ditt personliga avgiftsutrymme. Din ekonomi räcker precis till dina kostnader, vilket i" +
                    "nnebär att kommunen inte kommer att ta ut en avgift för omsorg från dig.<br> Observera att detta ä" +
                    "r en uppskattning. Den slutgiltiga beräkningen görs av kommunens avgiftshandläggare.";
        } else {
            infoElement.innerHTML = "Det här är ditt personliga avgiftsutrymme, det vill säga den högsta avgift du kan få betala för om" +
                    "sorg. Du betalar aldrig mer än maxtaxan.<br> Observera att detta är en uppskattning" +
                    ". Den slutgiltiga beräkningen görs av kommunens avgiftshandläggare.";
        }
    }
</script>