<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fuel Management System</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px 12px;
            border: 1px solid #ddd;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
        .highlight-yellow {
            background-color: yellow;
        }
    </style>
</head>
<body>

<h2>Fuel Management System</h2>
<table id="fuelTable">
    <thead>
        <tr>
            <th>S No.</th>
            <th>Date</th>
            <th>Km</th>
            <th>Liters</th>
            <th>Old Petrol</th>
            <th>Km Run</th>
            <th>Gadirunkm</th>
            <th>Remaining Km</th>
            <th>Remaining Liters</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><input type="date" class="date"></td>
            <td><input type="number" class="km highlight-yellow" oninput="calculate(this)"></td>
            <td><input type="number" class="liters" oninput="calculate(this)"></td>
            <td><input type="number" class="oldPetrol" oninput="calculate(this)"></td>
            <td><input type="number" class="kmRun" readonly></td>
            <td><input type="number" class="gadirunkm" oninput="calculate(this)"></td>
            <td><input type="number" class="remainingKm" readonly></td>
            <td><input type="number" class="remainingLiters" readonly></td>
        </tr>
    </tbody>
</table>

<button onclick="addRow()">Add New Entry</button>

<script>
    function calculate(element) {
        let row = element.parentNode.parentNode;
        let km = parseFloat(row.querySelector(".km").value);
        let liters = parseFloat(row.querySelector(".liters").value);
        let oldPetrol = parseFloat(row.querySelector(".oldPetrol").value) || 0;
        let gadirunkm = parseFloat(row.querySelector(".gadirunkm").value);

        let kmRun = (liters + oldPetrol) * 4;
        let remainingKm = gadirunkm - km;
        let remainingLiters = remainingKm * 4;

        row.querySelector(".kmRun").value = kmRun.toFixed(2);
        row.querySelector(".remainingKm").value = remainingKm.toFixed(2);
        row.querySelector(".remainingLiters").value = remainingLiters.toFixed(2);
    }

function addRow() {
    let table = document.getElementById("fuelTable").getElementsByTagName('tbody')[0];
    let rowCount = table.rows.length;
    let row = table.insertRow(rowCount);
    let serialNo = rowCount + 1;

    // Copy the value of "Gadirunkm" from the previous row to the new row's "Km" input field
    let previousGadirunkm = parseFloat(table.rows[rowCount - 1].querySelector(".gadirunkm").value) || 0;

    row.innerHTML = `<td>${serialNo}</td>
                    <td><input type="date" class="date"></td>
                    <td><input type="number" class="km highlight-yellow" value="${previousGadirunkm}" oninput="calculate(this)"></td>
                    <td><input type="number" class="liters" oninput="calculate(this)"></td>
                    <td><input type="number" class="oldPetrol" oninput="calculate(this)"></td>
                    <td><input type="number" class="kmRun" readonly></td>
                    <td><input type="number" class="gadirunkm" oninput="calculate(this)"></td>
                    <td><input type="number" class="remainingKm" readonly></td>
                    <td><input type="number" class="remainingLiters" readonly></td>`;
}

</script>

</body>
</html>