{% block content %}

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

    table {
        border-collapse: separate;
        border-spacing: 0 15px;
    }

    body {
        margin: 0;
        padding: 0;
    }
</style>

<div class="card">
    <div class="card-body">
        <h6 class="card-subtitle mb-2 text-muted">Info Box</h6>
        <p>
            There are <b><span id="workers_left">{{ C.NUM_WORKERS}}</span> </b> unmatched workers
            and <b><span id="offers_left">0</span> </b> open offers in the market.
            In total, there are <b><span id="employers_total">{{ C.NUM_EMPLOYERS }}</span> </b> employer(s)
            and <b><span id="workers_total">{{ C.NUM_WORKERS}}</span> </b> worker(s) in your group. <br>

        </p>
        <p>
            You are in the role of <b><span id="your_role_string">{{ player.string_role }}</span></b>.
            {% if player.is_employer == True %}

            You can employ at most three workers in this round. You can send offers in the market.
            To do so, type in the wage and effort and click "Send Offer".
            {% else %}
            You can accept at most one job offer this round.
            Only job offers whose status is "open" can be accepted.
            To do so, type in the job ID and click "Accept Offer".
            {% endif %}
        </p>
    </div>
</div>

<br><br>

<button class="otree-btn-next btn otree-next-button invisible" id = "to_next_page"></button>


<table id="offer_mask" style="display: none">
    <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="card" id="employer_accept_message" style="display: none">
    <h5 class="card-header">Your offer was accepted!</h5>
    <div class="card-body">
    </div>
</div>

<div class="card" id="employer_wait" style="display: none">
    <h5 class="card-header">Your current offer</h5>
    <div class="card-body">
        <p class="card-text">
            You offered a wage <b><span id="wage_offered"></span></b> for an effort <b><span
                    id="effort_offered"></span></b>. The status of your offer is <b><span
                    id="status_offered"></span></b>. To cancel the offer, click the button below.
            <span hidden id="job_id_offered"></span>
        </p>
        <button type="button" class="btn btn-secondary" id="cancel_offer" onclick="cancelOffer()"> Cancel Offer
        </button>
    </div>
</div>


<div class="card" id="max_workers" style="display: none">
    <h5 class="card-header">Your current Offer</h5>
    <div class="card-body">
        <p class="card-text">
            You employed 3 workers. You cannot send more offers.
        </p>
    </div>
</div>


<table id="accept_mask" style="display: none">
    <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>


<div class="card" id="worker_wait" style="display: none">
    <h5 class="card-header">You accepted the following offer </h5>
    <div class="card-body">
        <p class="card-text">
          A wage of <b><span id="wage_accepted"></span> </b>
            for <b><span id="effort_accepted"></span></b> effort units
        from employer <b><span id="employer_id_accepted"></span></b>.
        Please wait until the round ends.
    </div>
</div>


<br><br>

<div class="table-responsive" id="open_offers_table" style="display: none">
    <table class="table table-sm">
        <caption>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">Worker 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>


<br>

<div class="table-responsive" id="accepted_offers_table" style="display: none">
    <table class="table table-sm">
        <caption>Your accepted offers</caption>
        <thead class="thead-light">
            <tr>
                <th scope="col">Job ID</th>
                <th scope="col">Employer ID</th>
                <th scope="col">Worker 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>



<script>

    const jobOfferSet = new Set();

        function liveRecv(data) {
            // destructuring assignment
            let {page_information, market_information, offers} = data;
            renderPage(page_information);
            updateInfobox(market_information);
            updateOffersTable(offers);
            updateAcceptedTable(offers);
            updateEmployerWaitCard(offers);
            updateWorkerWaitCard(offers);
        }

        function updateOffersTable(offers) {
            let offers_body = document.getElementById("open_offers_body");
            offers_body.innerHTML = "";
            for (let i = 0; i < offers.length; i++) {
                let {job_id, employer_id, worker_id, wage, effort, status} = offers[i];
                offers_body.innerHTML += `<tr id="open_row_${job_id}">
                                                    <td id="open_col_job_id_${job_id}"> ${job_id} </td>
                                                    <td id="open_col_employer_id_${job_id}"> ${employer_id} </td>
                                                    <td id="open_col_worker_id_${job_id}"> ${worker_id} </td>
                                                    <td id="open_col_wage_${job_id}"> ${wage} </td>
                                                    <td id="open_col_effort_${job_id}"> ${effort} </td>
                                                    <td id="open_col_status_${job_id}"> ${status} </td>
                                                </tr>`;
                if (status == 'open') {
                    jobOfferSet.add(job_id);
                } else {
                    jobOfferSet.delete(job_id);
                }
            }
        }

        function updateAcceptedTable(offers) {
            let accepted_body = document.getElementById("accepted_offers_body");
            accepted_body.innerHTML = "";
            for (let i = 0; i < offers.length; i++) {
                if (offers[i].status === "accepted" && offers[i].employer_id == js_vars.my_id) {
                    let {job_id, employer_id, worker_id, wage, effort, status} = offers[i];
                    let row = document.createElement("tr");
                    let job_id_col = document.createElement("td");
                    let employer_id_col = document.createElement("td");
                    let worker_id_col = document.createElement("td");
                    let wage_col = document.createElement("td");
                    let effort_col = document.createElement("td");
                    let status_col = document.createElement("td");
                    job_id_col.innerHTML = job_id;
                    employer_id_col.innerHTML = employer_id;
                    worker_id_col.innerHTML = worker_id;
                    wage_col.innerHTML = wage;
                    effort_col.innerHTML = effort;
                    status_col.innerHTML = status;
                    row.appendChild(job_id_col);
                    row.appendChild(employer_id_col);
                    row.appendChild(worker_id_col);
                    row.appendChild(wage_col);
                    row.appendChild(effort_col);
                    row.appendChild(status_col);
                    accepted_body.appendChild(row);
                }
            }
        }


        function updateEmployerWaitCard(offers) {
            for (let i = 0; i < offers.length; i++) {
                if (offers[i].status === "open" && offers[i].employer_id == js_vars.my_id) {
                    let {job_id, wage, effort, status} = offers[i];
                    document.getElementById("wage_offered").innerHTML = wage;
                    document.getElementById("effort_offered").innerHTML = effort;
                    document.getElementById("status_offered").innerHTML = status;
                    document.getElementById("job_id_offered").innerHTML = job_id;
                }
            }
        }

        function updateWorkerWaitCard(offers) {
            for (let i = 0; i < offers.length; i++) {
                console.log(offers[i])
                if (offers[i].status === "accepted" && offers[i].worker_id == js_vars.my_id) {
                    let {job_id, wage, effort, employer_id} = offers[i];
                    document.getElementById("wage_accepted").innerHTML = wage;
                    document.getElementById("effort_accepted").innerHTML = effort;
                    document.getElementById("employer_id_accepted").innerHTML = employer_id;
                    document.getElementById("job_id_accepted").innerHTML = job_id;
                }
            }
        }

        function updateInfobox(market_information) {
            let {workers_left, open_offers} = market_information;
            document.getElementById("workers_left").innerHTML = workers_left;
            document.getElementById("offers_left").innerHTML = open_offers;
        }

        function renderPage(page_information) {
            let {is_finished, max_workers, wait} = page_information;
            if (is_finished) {
                document.getElementById("to_next_page").click();
                document.getElementById("to_next_page").click();
            } else {
                if (js_vars.is_employer==true) {
                    document.getElementById("accepted_offers_table").style.display = "block";
                    document.getElementById("open_offers_table").style.display = "block";
                    document.getElementById("worker_wait").style.display = "none";
                    document.getElementById("accept_mask").style.display = "none";
                    if (wait) {
                        document.getElementById("offer_mask").style.display = "none";
                        document.getElementById("employer_wait").style.display = "block";
                        document.getElementById("max_workers").style.display = "none";
                    } else if (max_workers) {
                        document.getElementById("offer_mask").style.display = "none";
                        document.getElementById("employer_wait").style.display = "none";
                        document.getElementById("max_workers").style.display = "block";
                    } else {
                        document.getElementById("offer_mask").style.display = "block";
                        document.getElementById("employer_wait").style.display = "none";
                        document.getElementById("max_workers").style.display = "none";
                    }
                } else {
                    document.getElementById("open_offers_table").style.display = "block";
                    document.getElementById("accepted_offers_table").style.display = "none";
                    document.getElementById("employer_wait").style.display = "none";
                    document.getElementById("offer_mask").style.display = "none";
                    document.getElementById("max_workers").style.display = "none";
                    if (wait) {
                        document.getElementById("accept_mask").style.display = "none";
                        document.getElementById("worker_wait").style.display = "block";
                    } else {
                        document.getElementById("accept_mask").style.display = "block";
                        document.getElementById("worker_wait").style.display = "none";
                    }
                }
            }
        }

    function cancelOffer() {
        let cancel_job_id = parseInt(document.getElementById("job_id_offered").innerHTML);
        let cancel_employer_id = js_vars.my_id;
        let cancel_wage = parseInt(document.getElementById("wage_offered").innerHTML);
        let cancel_effort = parseInt(document.getElementById("effort_offered").innerHTML);
        if (jobOfferSet.has(parseInt(cancel_job_id)) == false) {
            alert("Error: You do not have an offer in the market.");
            return;
        } else {
            liveSend({
                "information_type": "cancel",
                "employer_id": cancel_employer_id,
                "job_id": cancel_job_id,
                "wage": cancel_wage,
                "effort": cancel_effort,
            })
            document.getElementById("wage_offered").innerHTML = "";
            document.getElementById("effort_offered").innerHTML = "";
            document.getElementById("status_offered").innerHTML = "";
            document.getElementById("offer_mask").style.display = "block"
            document.getElementById("employer_wait").style.display = "none"
        }
    }



        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);
            let worker_id = js_vars.my_id;
            liveSend({
                "information_type": "accept",
                "job_id": accepted_job_id,
                "employer_id": accepted_employer_id,
                "worker_id": worker_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 = 'open';
        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 %}