<!DOCTYPE html>

<html lang="en">
  

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Car Loan Calculator</title>

  <style>
    
    body {
    background-color: white;
    padding: 0;
    height: auto;
    width: 100%;
}

.calculator {
    background-color: WhiteSmoke;
    padding: 10px;
    border-radius: 10px;
    width: 100%;
    max-width: 500px;
    margin: auto;
}

h1 {
    line-height: 1.5;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    font-size: 20px !important;
    text-align: left;
}

h2 {
    line-height: 1.5;
    text-align: center;
}

h3, h4, h5 {
margin-bottom: 5px !important;
    line-height: 1.5;
    text-align: left;
}

.form-group {
    margin-bottom: 15px;
}

label {
    font-size: larger;
    display: block;
    margin-bottom: 5px;
    color: inherit;
}

input {
flex: 5;
    width: 100%;
    padding: 10px;
    border: 1px solid darkgray !important;
    border-radius: 5px;
}
 select {

    flex: 2;

    width: 100%;

    padding: 10px;

    border: 1px solid darkgray !important;

    border-radius: 5px;

    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"%3E%3Cpath fill="none" stroke="%23333333" stroke-width="2" d="M1 3l4 4 4-4" /%3E%3C/svg%3E');

    background-repeat: no-repeat;

    background-position: right 10px center;

    background-size: 10px;

}

button {
    width: 100%;
    padding: 12px;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.result {
    padding: 10px;
    border: 1px solid darkgray !important;
    text-align: left;
    margin-top: 15px;
    border-radius: 5px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid darkgray !important;
}

th, td {
    padding: 8px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

.clear-btn {
    margin-left: 10px;
    background-color: #f44336;
    color: white;
}

.clear-btn:hover {
    background-color: #e53935;
}

 .row-button {
display: flex; 
   justify-content: space-between; 
   width: 100%;
 margin-top: 15px;
   }

    
</style>
   

</head>

<body>

<div class="calculator">

    <h2>Car Loan Calculator</h2>

    <div class="form-group">

        <label for="carPrice">Car Price ($)</label>

        <input id="carPrice" type="number" class="form-control" placeholder="Enter car price" required>

    </div>

    <div class="form-group">

        <label for="downPayment">Down Payment ($)</label>

        <input id="downPayment" type="number" class="form-control" placeholder="Enter down payment (Optional)">

    </div>

    <div class="form-group">

        <label for="salesTax">Sales Tax (%)</label>

        <input id="salesTax" type="number" class="form-control" placeholder="Enter sales tax (Optional)">

    </div>

    <div class="form-group">

        <label for="loanTerm">Loan Term</label>

        <div style="display: flex; gap: 10px;">

            <input id="loanTerm" type="number" class="form-control" placeholder="Enter term" required style="flex: 2;">

            <select id="termUnit" class="form-control" style="flex: 1;">

                <option value="years">Years</option>

                <option value="months">Months</option>

            </select>

        </div>

    </div>

    <div class="form-group">

        <label for="interestRate">Annual Interest Rate (%)</label>

        <input id="interestRate" type="number" class="form-control" placeholder="Enter interest rate" required>

    </div>

    <div class="row-button">

        <button class="calculate-btn" onclick="calculateCarLoan()">Calculate</button>

        <button class="clear-btn" onclick="clearFields()">Clear</button>

    </div>

</div>

<div class="result" id="result"></div>

<div class="amortization-section" id="amortizationSection" style="display: none;">

    <h3>Amortization Schedule</h3>

    <table>

        <thead>

        <tr>

            <th>Payment #</th>

            <th>Principal</th>

            <th>Interest</th>

            <th>Remaining Balance</th>

        </tr>

        </thead>

        <tbody id="amortizationTable">

        <!-- Amortization data will be inserted here -->

        </tbody>

    </table>

</div>

<script>

    function calculateCarLoan() {

        const carPrice = parseFloat(document.getElementById("carPrice").value);

        const downPayment = parseFloat(document.getElementById("downPayment").value) || 0;

        const salesTax = parseFloat(document.getElementById("salesTax").value) || 0;

        let loanTerm = parseFloat(document.getElementById("loanTerm").value);

        const termUnit = document.getElementById("termUnit").value;

        const interestRate = parseFloat(document.getElementById("interestRate").value) / 100;

        if (isNaN(carPrice) || isNaN(loanTerm) || isNaN(interestRate)) {

            alert("Please enter valid inputs for all required fields.");

            return;

        }

        const taxAmount = (carPrice * salesTax) / 100;

        const totalCarPrice = carPrice + taxAmount;

        const loanAmount = totalCarPrice - downPayment;

        if (termUnit === "years") {

            loanTerm *= 12; // Convert years to months

        }

        const monthlyInterestRate = interestRate / 12;

        const monthlyPayment = (loanAmount * monthlyInterestRate) / (1 - Math.pow(1 + monthlyInterestRate, -loanTerm));

        const totalPayment = monthlyPayment * loanTerm;

        const totalInterest = totalPayment - loanAmount;

        document.getElementById("result").innerHTML = `

            <p>Monthly Installment: $ ${monthlyPayment.toFixed(2)}</p>

            <p>Total Payment: $ ${totalPayment.toFixed(2)}</p>

            <p>Total Interest: $ ${totalInterest.toFixed(2)}</p>

        `;

        generateAmortizationSchedule(loanAmount, monthlyInterestRate, monthlyPayment, loanTerm);

    }

    function generateAmortizationSchedule(loanAmount, monthlyInterestRate, monthlyPayment, loanTerm) {

        const amortizationTable = document.getElementById("amortizationTable");

        amortizationTable.innerHTML = '';

        let remainingBalance = loanAmount;

        for (let i = 1; i <= loanTerm; i++) {

            const interestPayment = remainingBalance * monthlyInterestRate;

            const principalPayment = monthlyPayment - interestPayment;

            remainingBalance -= principalPayment;

            const row = `

                <tr>

                    <td>${i}</td>

                    <td>$ ${principalPayment.toFixed(2)}</td>

                    <td>$ ${interestPayment.toFixed(2)}</td>

                    <td>$ ${Math.max(remainingBalance, 0).toFixed(2)}</td>

                </tr>

            `;

            amortizationTable.innerHTML += row;

        }

        document.getElementById("amortizationSection").style.display = "block";

    }

    function clearFields() {

        document.getElementById("carPrice").value = '';

        document.getElementById("downPayment").value = '';

        document.getElementById("salesTax").value = '';

        document.getElementById("loanTerm").value = '';

        document.getElementById("termUnit").value = 'years';

        document.getElementById("interestRate").value = '';

        document.getElementById("result").innerHTML = '';

        document.getElementById("amortizationTable").innerHTML = '';

        document.getElementById("amortizationSection").style.display = 'none';

    }

</script>

</body>

</html>