{{ block content }}
<h2>Common Fund Application</h2> <br>
<div style="overflow: hidden; float: right;">
    <button id="Button" class="popup-button" type="button"
            style="width: 140px; height: auto; padding: 0; border: none; background: none;">
        <img src="{{ static 'images/check.png' }}"
             style="width: 100%; height: 100%; object-fit: contain;" alt="Popup">
    </button>
</div>

<p> Below you can find the application field for the Common Fund.<br>
    The fund has 150 points to be divided equally.
    Depending on the number of applicants,<br> one may receive up to 150 points.
    Participants with less than 200 points are eligible to apply.
</p>
<br>
<p>
    ▶ Do you have 200 points or more? <br>
    &emsp;&numsp;✓ Click <span style="color: crimson; font-weight: bold">"Skip & Finish"</span>. <br>
    ▶ Do you have less than 200 points?<br>
    &emsp;&numsp;✓ Click <span style="color: royalblue; font-weight: bold">"Apply & Finish"</span>. <br><br>
</p>

<p style="font-weight: bold"> Click the button on the top-right corner of the page to check your points <br>
    and report how many points you have in the field below:</p>
{{ formfield player.declared_balance }}
<br><br>


<style>
        .popup-button {
            float: right;
            margin-right: 10px;
            background: transparent;
            border: none;
            cursor: pointer;
        }
        .popup-button img {
            width: 70px;
            height: 55px;
        }
        .popup-content {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .popup-content .content {
            background-color: white;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888888;
            width: 70%;
            font-weight: normal;
            position: relative;
            max-height: 90%;
            overflow-y: auto;
        }
        .show {
            display: block;
        }
</style>
<div id="Popup" class="popup-content">
        <div class="content">
            <p> You now have <b>{{ points }} points</b>.</p>
            <button id="closePopup" type="button">Close</button></div>
</div>

<input type="hidden" id="submitted_bonus" name="submitted_bonus" value="0">
<input type="hidden" id="clicked_finish" name="clicked_finish" value="0">



    <button class="otree-btn-next btn btn-primary" style="background-color: royalblue; border-color: royalblue"
            onclick="return calc_bonus()">Apply & Finish</button>


    <button class="otree-btn-next btn btn-primary" style="margin-left: 60px; background-color: crimson; border-color: crimson"
            onclick="return toFinish()">Skip & Finish</button>


<style>
    .spaced-buttons button {
        margin-right: 60px;
    }
</style>

{% block scripts %}
<script>
    function check_and_calc() {
        const result = parseFloat(document.getElementById("id_declared_balance").value);
        const correct_balance = js_vars.correct_balance;
        if (isNaN(result)) {
        alert("Please report your points in order to apply.");
        return false;
    }

        if (result === correct_balance) {
            if (result >= 200){
                alert("This number is not eligible for extra points from the fund.");
                return false;
            } else {
                calc_bonus();
            }
        }
        else {
            // If incorrect, prevent form submission and show an alert
            liveSend({'misreport_attempt': true});
            alert("Please enter the correct number.");
            return false;  // Prevent form submission
        }
    }
    function calc_bonus() {
        const result = parseFloat(document.getElementById("id_declared_balance").value);
        if (isNaN(result)) {
        alert("Please report your points in order to apply.");
        return false;
    }
        if (result >= 200){
                liveSend({'misreport_attempt': true});
                alert("This number is not eligible for extra points from the fund.");
                return false;
            }
        else {
            document.getElementById('submitted_bonus').value = 1;
            document.getElementById('form').submit();
        }
    }
    function toFinish() {
        document.getElementById('clicked_finish').value = 1;
        document.getElementById('submitted_bonus').value = '0';
        document.getElementById('form').submit();
    }

    const button = document.getElementById("Button");
    const popup = document.getElementById("Popup");
    const closePopup = document.getElementById("closePopup");

        button.addEventListener("click", function () {
            popup.classList.add("show");
        });
        closePopup.addEventListener("click", function () {
            popup.classList.remove("show");
        });
        window.addEventListener("click", function (event) {
            if (event.target == Popup) {
                popup.classList.remove("show");
            }
        });
</script>
{% endblock %}

{{ endblock }}