Property Division Calculator

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f0f0f0;
}

h1, h2 {
    text-align: center;
}

.calculator {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

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

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

label {
    display: block;
    margin-top: 10px;
}

document.addEventListener("DOMContentLoaded", () => {
    const targetPercentTony = document.getElementById("targetPercentTony");
    const targetPercentOther = document.getElementById("targetPercentOther");
    const cashAdjustmentTony = document.getElementById("cashAdjustmentTony");
    const cashAdjustmentOther = document.getElementById("cashAdjustmentOther");
    const assetTable = document.getElementById("assetTable");
    const divisionTable = document.getElementById("divisionTable");

    // Example data (you will likely need to fetch this from a server)
    const assets = [
        { description: "11 Smith Street, Appleton", yourValue: 500000, otherValue: 600000, agreedValue: 550000 },
        { description: "Unit 1.72 Beach Street", yourValue: 600000, otherValue: 550000, agreedValue: 100000 },
        // Add more assets here...
    ];

    const liabilities = [
        { description: "11 Smith Street Home Loan", yourValue: 320000, otherValue: 320000, agreedValue: 320000 },
        { description: "Beach Street Home Loan", yourValue: 250000, otherValue: 250000, agreedValue: 250000 },
        // Add more liabilities here...
    ];

    function calculateAdjustments() {
        const targetPercentTonyValue = parseFloat(targetPercentTony.value) / 100;
        const targetPercentOtherValue = parseFloat(targetPercentOther.value) / 100;
        let totalAssets = assets.reduce((sum, asset) => sum + asset.agreedValue, 0);
        let totalLiabilities = liabilities.reduce((sum, liability) => sum + liability.agreedValue, 0);
        let netValue = totalAssets - totalLiabilities;
        let cashAdjustment = netValue * (targetPercentTonyValue - targetPercentOtherValue);

        cashAdjustmentTony.textContent = cashAdjustment.toFixed(2);
        cashAdjustmentOther.textContent = (-cashAdjustment).toFixed(2);
    }

    function renderTable() {
        assets.forEach(asset => {
            let row = document.createElement("tr");
            row.innerHTML = `<td>${asset.description}</td><td>${asset.yourValue}</td><td>${asset.otherValue}</td><td>${asset.agreedValue}</td>`;
            assetTable.appendChild(row);
        });

        liabilities.forEach(liability => {
            let row = document.createElement("tr");
            row.innerHTML = `<td>${liability.description}</td><td>${liability.yourValue}</td><td>${liability.otherValue}</td><td>${liability.agreedValue}</td>`;
            assetTable.appendChild(row);
        });

        assets.forEach(asset => {
            let row = document.createElement("tr");
            row.innerHTML = `<td>${asset.description}</td><td>${asset.yourValue}</td><td>${asset.otherValue}</td>`;
            divisionTable.appendChild(row);
        });

        liabilities.forEach(liability => {
            let row = document.createElement("tr");
            row.innerHTML = `<td>${liability.description}</td><td>${liability.yourValue}</td><td>${liability.otherValue}</td>`;
            divisionTable.appendChild(row);
        });
    }

    targetPercentTony.addEventListener("input", calculateAdjustments);
    targetPercentOther.addEventListener("input", calculateAdjustments);

    renderTable();
    calculateAdjustments();
});