{{ block title }}
<strong> बिना सामान के भिखारी: Observations Table </strong>
{{ endblock }}

{{ block content }}
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
            border: 1px solid #000; /* Add border to table cells */
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        th {
            background-color: #0000FF;
            color: white;
        }
    </style>
<table>
    <tr>
        <th>कुल भिखारी: <strong><input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="total_beggars" name="total_beggars" required></strong></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><strong>टोटल</strong></td>
    </tr>
    <tr>
        <th>लिंग</th>
        <td>पुरुष: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="male" name="total_male" required></td>
        <td>महिला: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="female" name="total_female" required></td>
        <td>अन्य: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="other_gender" name="total_other_gender" required></td>
        <td></td>
        <td><strong><span id="total_gender"></span></strong></td>
    </tr>
    <tr>
    <th>आयु</th>
    <td>बच्चे (12 वर्ष से कम): <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="kids" name="total_kids" required></td>
    <td>किशोर (13-19): <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="teenagers" name="total_teenagers" required></td>
    <td>वयस्क (20-60): <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="adults" name="total_adults" required></td>
    <td>वरिष्ठ (60+): <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="seniors" name="total_seniors" required></td>
    <td><strong><span id="total_age"></span></strong></td>
</tr>
<tr>
    <th>विकलांगता</th>
    <td>विकलांग: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="disabled" name="total_disabled" required></td>
    <td>संपूर्ण: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="able" name="total_able" required></td>
    <td></td>
    <td></td>
    <td><strong><span id="total_disability"></span></strong></td>
</tr>
<tr>
    <th>समूह</th>
    <td>समूह में हैं: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="in_group" name="total_in_group" required></td>
    <td>अकेले है: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="alone" name="total_alone" required></td>
    <td>अकेले है पर छोटा बच्चा साथ है: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="with_child" name="total_with_child" required></td>
    <td></td>
    <td><strong><span id="total_group"></span></strong></td>
</tr>
<tr>
    <th>गति</th>
    <td>इधर उधर: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="moving" name="total_moving" required></td>
    <td>एक जगह: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="stationary" name="total_stationary" required></td>
    <td></td>
    <td></td>
    <td><strong><span id="total_movement"></span></strong></td>
</tr>
<tr>
    <th>कपड़े</th>
    <td>सम्पूर्ण: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="total_fully_clothed" name="total_fully_clothed" required></td>
    <td>आंशिक: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="total_partially_clothed" name="total_partially_clothed" required></td>
    <td>धार्मिक: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="total_religious_clothed" name="total_religious_clothed" required></td>
    <td></td>
    <td><strong><span id="total_clothing"></span></strong></td>
</tr>
<tr>
    <th>चप्पल/जूते</th>
    <td>साथ: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="total_with_footwear" name="total_with_footwear" required></td>
    <td>बिना: <input type="number" style="width: 4em" onkeypress="return event.keyCode != 13;" min="0" max="100" id="total_without_footwear" name="total_without_footwear" required></td>
    <td></td>
    <td></td>
    <td><strong><span id="total_footwear"></span></strong></td>
</tr>

</table>

<p> </p>

<script>
var maleInput = document.getElementById("male");
var femaleInput = document.getElementById("female");
var otherGenderInput = document.getElementById("other_gender");
var totalGenderDisplay = document.getElementById("total_gender");
var kidsInput = document.getElementById("kids");
var teenagersInput = document.getElementById("teenagers");
var adultsInput = document.getElementById("adults");
var seniorsInput = document.getElementById("seniors");
var disabledInput = document.getElementById("disabled");
var ableInput = document.getElementById("able");
var inGroupInput = document.getElementById("in_group");
var aloneInput = document.getElementById("alone");
var withChildInput = document.getElementById("with_child");
var movingInput = document.getElementById("moving");
var stationaryInput = document.getElementById("stationary");
var total_age = document.getElementById("total_age");
var total_disability = document.getElementById("total_disability");
var total_movement = document.getElementById("total_movement");
var total_group = document.getElementById("total_group");
var totalBeggarsInput = document.getElementById("total_beggars");
var total_fully_clothedInput = document.getElementById("total_fully_clothed");
var total_partially_clothedInput = document.getElementById("total_partially_clothed");
var total_religious_clothedInput = document.getElementById("total_religious_clothed");
var total_with_footwearInput = document.getElementById("total_with_footwear");
var total_without_footwearInput = document.getElementById("total_without_footwear");
var total_footwear = document.getElementById("total_footwear");
var total_clothing = document.getElementById("total_clothing");

function X(a, b) {
    return a + b;
}

function Y(a, b, c) {
    return a + b + c;
}

function Z(a, b, c, d) {
    return a + b + c + d;
}

function updateTotalColors() {
    // Check and change text color based on the comparison with total_beggars
    var totalBeggarsValue = parseFloat(totalBeggarsInput.value) || 0;

    if (totalBeggarsValue === parseFloat(totalGenderDisplay.textContent)) {
        totalGenderDisplay.style.color = "green";
    } else {
        totalGenderDisplay.style.color = "red";
    }

    if (totalBeggarsValue === parseFloat(total_age.textContent)) {
        total_age.style.color = "green";
    } else {
        total_age.style.color = "red";
    }

    if (totalBeggarsValue === parseFloat(total_disability.textContent)) {
        total_disability.style.color = "green";
    } else {
        total_disability.style.color = "red";
    }

    if (totalBeggarsValue === parseFloat(total_group.textContent)) {
        total_group.style.color = "green";
    } else {
        total_group.style.color = "red";
    }

    if (totalBeggarsValue === parseFloat(total_movement.textContent)) {
        total_movement.style.color = "green";
    } else {
        total_movement.style.color = "red";
    }

    if (totalBeggarsValue === parseFloat(total_clothing.textContent)) {
        total_clothing.style.color = "green";
    } else {
        total_clothing.style.color = "red";
    }

    if (totalBeggarsValue === parseFloat(total_footwear.textContent)) {
        total_footwear.style.color = "green";
    } else {
        total_footwear.style.color = "red";
    }
}

function calculateTotalGender() {
    console.log("Calculating total gender");
    var maleValue = parseFloat(maleInput.value) || 0;
    var femaleValue = parseFloat(femaleInput.value) || 0;
    var otherGenderValue = parseFloat(otherGenderInput.value) || 0;

    var totalGender = Y(maleValue, femaleValue, otherGenderValue);
    totalGenderDisplay.textContent = totalGender;

    // Update text colors
    updateTotalColors();
}

function calculateTotalAge() {
    console.log("Calculating total age");
    var kidsValue = parseFloat(kidsInput.value) || 0;
    var teenagersValue = parseFloat(teenagersInput.value) || 0;
    var adultsValue = parseFloat(adultsInput.value) || 0;
    var seniorsValue = parseFloat(seniorsInput.value) || 0;

    var totalAge = Z(kidsValue, teenagersValue, adultsValue, seniorsValue);
    total_age.textContent = totalAge;

    // Update text colors
    updateTotalColors();
}

function calculateTotalDisability() {
    console.log("Calculating total disability");
    var disabledValue = parseFloat(disabledInput.value) || 0;
    var ableValue = parseFloat(ableInput.value) || 0;

    var totalDisability = X(disabledValue, ableValue);
    total_disability.textContent = totalDisability;

    // Update text colors
    updateTotalColors();
}

function calculateTotalGroup() {
    console.log("Calculating total group");
    var inGroupValue = parseFloat(inGroupInput.value) || 0;
    var aloneValue = parseFloat(aloneInput.value) || 0;
    var withChildValue = parseFloat(withChildInput.value) || 0;

    var totalGroup = Y(inGroupValue, aloneValue, withChildValue);
    total_group.textContent = totalGroup;

    // Update text colors
    updateTotalColors();
}

function calculateTotalMovement() {
    console.log("Calculating total movement");
    var movingValue = parseFloat(movingInput.value) || 0;
    var stationaryValue = parseFloat(stationaryInput.value) || 0;

    var totalMovement = X(movingValue, stationaryValue);
    total_movement.textContent = totalMovement;

    // Update text colors
    updateTotalColors();
}

function calculateTotalClothing() {
    console.log("Calculating total clothing");
    var fullyClothedValue = parseFloat(total_fully_clothedInput.value) || 0;
    var partiallyClothedValue = parseFloat(total_partially_clothedInput.value) || 0;
    var religiousClothedValue = parseFloat(total_religious_clothedInput.value) || 0;

    var totalClothing = Y(fullyClothedValue, partiallyClothedValue, religiousClothedValue);
    total_clothing.textContent = totalClothing;

    // Update text colors
    updateTotalColors();
}

function calculateTotalFootwear() {
    console.log("Calculating total footwear");
    var withFootwearValue = parseFloat(total_with_footwearInput.value) || 0;
    var withoutFootwearValue = parseFloat(total_without_footwearInput.value) || 0;

    var totalFootwear = X(withFootwearValue, withoutFootwearValue);
    total_footwear.textContent = totalFootwear;

    // Update text colors
    updateTotalColors();
}


// Add event listeners to all input fields, including total_beggars
maleInput.addEventListener("change", calculateTotalGender);
femaleInput.addEventListener("change", calculateTotalGender);
otherGenderInput.addEventListener("change", calculateTotalGender);
kidsInput.addEventListener("change", calculateTotalAge);
teenagersInput.addEventListener("change", calculateTotalAge);
adultsInput.addEventListener("change", calculateTotalAge);
seniorsInput.addEventListener("change", calculateTotalAge);
disabledInput.addEventListener("change", calculateTotalDisability);
ableInput.addEventListener("change", calculateTotalDisability);
inGroupInput.addEventListener("change", calculateTotalGroup);
aloneInput.addEventListener("change", calculateTotalGroup);
withChildInput.addEventListener("change", calculateTotalGroup);
movingInput.addEventListener("change", calculateTotalMovement);
stationaryInput.addEventListener("change", calculateTotalMovement);
totalBeggarsInput.addEventListener("change", updateTotalColors);
total_fully_clothedInput.addEventListener("change", calculateTotalClothing);
total_partially_clothedInput.addEventListener("change", calculateTotalClothing);
total_religious_clothedInput.addEventListener("change", calculateTotalClothing);
total_with_footwearInput.addEventListener("change", calculateTotalFootwear);
total_without_footwearInput.addEventListener("change", calculateTotalFootwear);


// Initial update of text colors
updateTotalColors();
</script>

{{ endblock }}