{% block content %}

<style>
    caption {
        caption-side: top;
        font-weight: 100;
    }

    table {
        border-collapse: separate;
        border-spacing: 0 15px;
    }
</style>

<table id="offer_mask" style="display: block">
    <caption>Make an offer</caption>
    <tr>
        <td>
            <input id="wage_input" class="form-control" placeholder="Wage">
        </td>
        <td>
            <input id="effort_input" class="form-control" placeholder="Effort">
        </td>
        <td>
            <button type="button" class="btn btn-secondary" id="send_offer" onclick="sendOffer()"> Send Offer
            </button>
        </td>
    </tr>
</table>


<div class="table-responsive">
    <table class="table" id="open_offers_table">
        <caption>Job offers in the market</caption>
        <thead class="thead-light">
            <tr>
                <th scope="col">Job ID</th>
                <th scope="col">Employer ID</th>
                <th scope="col">Wage</th>
                <th scope="col">Effort</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody id="open_offers_body">
        </tbody>
    </table>
</div>


<div class="table-responsive">
    <table class="table" id="accepted_offers_table">
        <caption>Job offers in the market</caption>
        <thead class="thead-light">
            <tr>
                <th scope="col">Job ID</th>
                <th scope="col">Employer ID</th>
                <th scope="col">Wage</th>
                <th scope="col">Effort</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody id="accepted_offers_body">
        </tbody>
    </table>
</div>


<table id="accept_mask" style="display: block">
    <caption>Accept an offer</caption>
    <tr>
        <td>
            <input id="input_job_id_accept" class="form-control" placeholder="Enter Job ID">
        </td>
        <td></td>
        <td>
            <button type="button" class="btn btn-secondary" id="accept_offer" onclick="acceptOffer()"> Accept Offer </button>
        </td>
    </tr>
</table>

<span id="print1">  </span>
<span id="print2">  </span>
<span id="print3">  </span>


<script>

    const jobOfferSet = new Set();

        function liveRecv(offers) {
            let tbodyOpen = document.getElementById("open_offers_body");
            let tbodyAccepted = document.getElementById("accepted_offers_body");
            for (let offer of offers) {
                if (offer.status == 'open') {                                                                           // Table 1: Open offers
                    //console.log("row_job_id_" + offer.job_id)
                    let row = document.getElementById(`open_row_${offer.job_id}`);
                    if (row == null) {                                                                                  // If row does not exist, I create it
                        tbodyOpen.innerHTML += `<tr id="open_row_${offer.job_id}">
                                                    <td id="open_col_job_id_${offer.job_id}"> ${offer.job_id} </td>
                                                    <td id="open_col_employer_id_${offer.job_id}"> ${offer.employer_id} </td>
                                                    <td id="open_col_wage_${offer.job_id}"> ${offer.wage} </td>
                                                    <td id="open_col_effort_${offer.job_id}"> ${offer.effort} </td>
                                                    <td id="open_col_status_${offer.job_id}"> ${offer.status} </td>
                                                </tr>`;
                        jobOfferSet.add(offer.job_id);
                    } else {                                                                                            // If row exists, I update it
                        document.getElementById(`open_col_job_id_${offer.job_id}`).innerHTML = offer.job_id;
                        document.getElementById(`open_col_employer_id_${offer.job_id}`).innerHTML = offer.employer_id;
                        document.getElementById(`open_col_wage_${offer.job_id}`).innerHTML = offer.wage;
                        document.getElementById(`open_col_effort_${offer.job_id}`).innerHTML = offer.effort;
                        document.getElementById(`open_col_status_${offer.job_id}`).innerHTML = offer.status;
                    }
                } else if (offer.status == 'accepted') {                                                                // Table 2: Accepted offers (same procedure as above)
                    //console.log("Accepted offer: " + offer.job_id)
                    let row = document.getElementById(`accepted_row_${offer.job_id}`);
                    if (row == null) {                                                                                  // If row does not exist, I create it
                        tbodyAccepted.innerHTML += `<tr id="accepted_row_${offer.job_id}">
                                                    <td id="accepted_col_job_id_${offer.job_id}"> ${offer.job_id} </td>
                                                    <td id="accepted_col_employer_id_${offer.job_id}"> ${offer.employer_id} </td>
                                                    <td id="accepted_col_wage_${offer.job_id}"> ${offer.wage} </td>
                                                    <td id="accepted_col_effort_${offer.job_id}"> ${offer.effort} </td>
                                                    <td id="accepted_col_status_${offer.job_id}"> ${offer.status} </td>
                                                </tr>`;
                    } else {
                        console.log('Problem: Offer' + offer.job_id + ' is already in the accepted offers table!');
                    }
                }
            }
        }



        function acceptOffer() {
        let accepted_job_id = parseInt(document.getElementById("input_job_id_accept").value);
        if (jobOfferSet.has(accepted_job_id) == false) {
            alert("Error: The job ID you entered is available in the market.");
            document.getElementById("input_job_id_accept").value = "";
            return;
        } else {
            let accepted_employer_id = parseInt(document.getElementById(`open_col_employer_id_${accepted_job_id}`).innerHTML);
            let accepted_wage = parseInt(document.getElementById(`open_col_wage_${accepted_job_id}`).innerHTML);
            let accepted_effort = parseInt(document.getElementById(`open_col_effort_${accepted_job_id}`).innerHTML);
            liveSend({
                "information_type": "accept",
                "job_id": accepted_job_id,
                "employer_id": accepted_employer_id,
                "wage": accepted_wage,
                "effort": accepted_effort
            })
            document.getElementById("input_job_id_accept").value = "";
        }
    }

    function sendOffer() {
        let effort_inputted = parseInt(document.getElementById("effort_input").value);
        let wage_inputted = parseInt(document.getElementById("wage_input").value);
        let status = 'accepted';
        let my_id = js_vars.my_id;
        if (isNaN(wage_inputted) || isNaN(effort_inputted)) {
            alert("Error: Please enter a number in both fields before sending offer.");
            return;
        } else if (wage_inputted < 0 || wage_inputted > 100) {
            alert("Error: Please specify a wage between 0 and 100.");
            return;
        } else if (effort_inputted < 0 || effort_inputted > 10) {
            alert("Error: Please specify a requested effort between 0 and 10.");
            return;
        } else {
            liveSend({
                "information_type": "offer",
                "employer_id": my_id,
                "status": status,
                "wage": wage_inputted,
                "effort": effort_inputted
            });
            document.getElementById("effort_input").value = "";
            document.getElementById("wage_input").value = "";
        }
    }

    window.onload = function() {
        liveSend ({
            "information_type": "load",
            "sender": js_vars.my_id
        });
    };



</script>

{% endblock %}