.elementor-7836 .elementor-element.elementor-element-4269dc76 > .elementor-background-overlay{background-color:#928E80;opacity:1;mix-blend-mode:color;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-7836 .elementor-element.elementor-element-4269dc76 > .elementor-container{max-width:988px;}.elementor-7836 .elementor-element.elementor-element-4269dc76:not(.elementor-motion-effects-element-type-background), .elementor-7836 .elementor-element.elementor-element-4269dc76 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-size:cover;}.elementor-7836 .elementor-element.elementor-element-4269dc76{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:10px 10px 10px 10px;}.elementor-7836 .elementor-element.elementor-element-4d24c748:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-7836 .elementor-element.elementor-element-4d24c748 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7836 .elementor-element.elementor-element-4d24c748 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:10px 10px 10px 10px;}.elementor-7836 .elementor-element.elementor-element-4d24c748 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-7836 .elementor-element.elementor-element-7e274511{text-align:center;}.elementor-7836 .elementor-element.elementor-element-7e274511 .elementor-heading-title{font-size:36px;font-weight:700;color:#283c61;}.elementor-7836 .elementor-element.elementor-element-42c17dd > .elementor-widget-container{margin:20px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-7836 .elementor-element.elementor-element-42c17dd{font-size:20px;line-height:1.5em;color:#000000;}@media(max-width:1025px){.elementor-7836 .elementor-element.elementor-element-7e274511 .elementor-heading-title{font-size:29px;}}@media(max-width:767px){.elementor-7836 .elementor-element.elementor-element-4269dc76{padding:10px 10px 10px 10px;}.elementor-7836 .elementor-element.elementor-element-4d24c748 > .elementor-element-populated{padding:010px 010px 010px 010px;}.elementor-7836 .elementor-element.elementor-element-7e274511{text-align:center;}.elementor-7836 .elementor-element.elementor-element-7e274511 .elementor-heading-title{font-size:27px;line-height:1.3em;}}@media(min-width:768px){.elementor-7836 .elementor-element.elementor-element-4d24c748{width:100%;}}@media(min-width:1026px){.elementor-7836 .elementor-element.elementor-element-4269dc76:not(.elementor-motion-effects-element-type-background), .elementor-7836 .elementor-element.elementor-element-4269dc76 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS for html, class: .elementor-element-2dae768 */<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mortgage Calculator</title>
    <style>
        /* Style the form container */
        #mortgage-calculator {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f9f9f9;
        }

        /* Style the labels */
        #mortgage-calculator label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        /* Style the input fields and select dropdown */
        #mortgage-calculator input[type="number"], #mortgage-calculator select {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* Style the button */
        #mortgage-calculator button {
            display: inline-block;
            width: 100%;
            padding: 10px;
            background-color: #071F4F; /* Set the background color to #071F4F */
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        #mortgage-calculator button:hover {
            background-color: #005bb5;
        }

        /* Style the result section */
        #result {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>

<div id="mortgage-calculator">
    <form id="mortgage-form">
        <label for="loan_amount">סכום ההלוואה:</label>
        <input type="number" id="loan_amount" name="loan_amount">

        <label for="interest_rate">שיעור הריבית (%):</label>
        <input type="number" id="interest_rate" name="interest_rate">

        <label for="loan_term">תקופת ההלוואה (שנים):</label>
        <input type="number" id="loan_term" name="loan_term">

        <label for="annual_increase_rate">עליה שנתית במדד (%):</label>
        <input type="number" id="annual_increase_rate" name="annual_increase_rate">

        <label for="mortgage_type">סוג משכנתא:</label>
        <select id="mortgage_type" name="mortgage_type" onchange="updateFields()">
            <option value="fixed">החזר קבוע</option>
            <option value="equal_principal">החזר לפי קרן שווה</option>
            <option value="partial_grace">גרייס חלקי</option>
            <option value="full_grace">גרייס מלא</option>
            <option value="balloon">בלון</option>
        </select>

        <!-- Additional Fields for Partial Grace -->
        <div id="partial_grace_fields" style="display:none;">
            <label for="grace_period">תקופת גרייס (חודשים):</label>
            <input type="number" id="grace_period" name="grace_period">
        </div>

        <!-- Additional Fields for Full Grace -->
        <div id="full_grace_fields" style="display:none;">
            <label for="grace_period_full">תקופת גרייס (חודשים):</label>
            <input type="number" id="grace_period_full" name="grace_period_full">
        </div>

        <!-- Additional Fields for Balloon -->
        <div id="balloon_fields" style="display:none;">
            <label for="balloon_payment">תשלום בלון:</label>
            <input type="number" id="balloon_payment" name="balloon_payment">
        </div>

        <button type="button" onclick="calculateMortgage()">חשב</button>
    </form>
    <div id="result"></div>
</div>

<script>
function updateFields() {
    var mortgageType = document.getElementById('mortgage_type').value;
    
    document.getElementById('partial_grace_fields').style.display = 'none';
    document.getElementById('full_grace_fields').style.display = 'none';
    document.getElementById('balloon_fields').style.display = 'none';

    if (mortgageType === 'partial_grace') {
        document.getElementById('partial_grace_fields').style.display = 'block';
    } else if (mortgageType === 'full_grace') {
        document.getElementById('full_grace_fields').style.display = 'block';
    } else if (mortgageType === 'balloon') {
        document.getElementById('balloon_fields').style.display = 'block';
    }
}

function calculateMortgage() {
    var loanAmount = document.getElementById('loan_amount').value;
    var interestRate = document.getElementById('interest_rate').value;
    var loanTerm = document.getElementById('loan_term').value;
    var annualIncreaseRate = document.getElementById('annual_increase_rate').value;
    var mortgageType = document.getElementById('mortgage_type').value;

    if (loanAmount && interestRate && loanTerm && annualIncreaseRate) {
        var monthlyInterestRate = (interestRate / 100) / 12;
        var numberOfPayments = loanTerm * 12;
        var monthlyPayment, totalRepayment;

        switch (mortgageType) {
            case 'fixed':
                monthlyPayment = (loanAmount * monthlyInterestRate) / (1 - Math.pow(1 + monthlyInterestRate, -numberOfPayments));
                break;
            case 'equal_principal':
                var principalPayment = loanAmount / numberOfPayments;
                monthlyPayment = principalPayment + (loanAmount * monthlyInterestRate);
                break;
            case 'partial_grace':
                var gracePeriod = document.getElementById('grace_period').value;
                // Implement partial grace logic
                // During grace period, only interest is paid
                var gracePayment = loanAmount * monthlyInterestRate;
                monthlyPayment = gracePayment + (loanAmount * monthlyInterestRate) / (1 - Math.pow(1 + monthlyInterestRate, -(numberOfPayments - gracePeriod)));
                break;
            case 'full_grace':
                var gracePeriodFull = document.getElementById('grace_period_full').value;
                // Implement full grace logic
                // No payments during grace period, then higher payments after
                var postGracePayment = (loanAmount * monthlyInterestRate) / (1 - Math.pow(1 + monthlyInterestRate, -(numberOfPayments - gracePeriodFull)));
                monthlyPayment = postGracePayment;
                break;
            case 'balloon':
                var balloonPayment = document.getElementById('balloon_payment').value;
                // Implement balloon payment logic
                monthlyPayment = (loanAmount * monthlyInterestRate) / (1 - Math.pow(1 + monthlyInterestRate, -numberOfPayments));
                break;
        }

        // Adjust for annual increase rate
        var adjustedMonthlyPayment = monthlyPayment * Math.pow((1 + (annualIncreaseRate / 100)), loanTerm);

        // Calculate total repayment
        totalRepayment = adjustedMonthlyPayment * numberOfPayments;

        document.getElementById('result').innerHTML = 'תשלום חודשי: ₪' + adjustedMonthlyPayment.toFixed(2) + '<br>סה"כ החזר: ₪' + totalRepayment.toFixed(2);
    } else {
        document.getElementById('result').innerHTML = 'אנא מלא את כל השדות.';
    }
}
</script>

</body>
</html>/* End custom CSS */