{% extends "global/SessionPage.html" %}
{% load otree static %}

{% block content %}
    <div id="tenantScreen" style="text-align: center;">
        <div style="text-align: center; width: 100%">
            <span style="text-align: center; float: left; display: inline-block;" class="financialCalculator">
                <ul class="noStyle">
                    <!--<li id="budget">Money available to be split with landowners in this round = {{ Constants.tenant_budget }}</li>-->
                    <li id="acceptedOffers">{{ Constants.any_offer_accepted_label }} No</li>
                    <li id="totalEarnings">{{ Constants.total_accepted_label }} None</li>
                </ul>
            </span>

            <span style="text-align: center; float: right; display: inline-block;" class="financialCalculator">
                <ul class="noStyle">
                    <li id="totalOffers"></li>
                    <li id="offersCost"></li>
                    <li id="remainingBudget"></li>
                </ul>
            </span>
        </div>

        <div style="float: none; clear:both;"></div>

        <div id="chatContainer1">
            {% chat nickname=player.role channel=tenant_messenger_1 %}
        </div>

        <div id="chatContainer2">
            {% chat nickname=player.role channel=tenant_messenger_2 %}
        </div>

        <div id="chatContainer3">
            {% chat nickname=player.role channel=tenant_messenger_3 %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="/static/otree/js/jquery.countdown.min.js"></script>
    <script>
        var totalPendingOffersAmount = 0;
        var totalOffersPrimed = 0;

        function updateBudget(newBudget) {
            roundData.budget = newBudget;
            updateCalculations();
        }

        function updateFinancials() {
            $('#acceptedOffers').html({{ Constants.any_offer_accepted_label|json }} + 'Yes');
            $('#totalEarnings').html({{ Constants.total_accepted_label|json }} + roundData.acceptedOffersAmount);
        }

        function updateCalculations(potentialOffer = null, landOwner = null) {
            potentialOffer = potentialOffer == null ? null : +potentialOffer;
            landOwner = landOwner == null ? null : +landOwner;
            if(landOwner != null){
                if(potentialOffer == '') {
                    roundData[landOwner].pendingOffer = 0;
                    roundData[landOwner].offerPrimed = 0;
                } else {
                    roundData[landOwner].pendingOffer = potentialOffer;
                    roundData[landOwner].offerPrimed = 1;
                }
            }

            totalPendingOffersAmount = roundData[1].pendingOffer + roundData[2].pendingOffer + roundData[3].pendingOffer;
            totalOffersPrimed = roundData[1].offerPrimed + roundData[2].offerPrimed + roundData[3].offerPrimed;
            var totalOffersText = {{ Constants.total_pending_offers_amount_label|json }} + totalPendingOffersAmount;

            if(totalPendingOffersAmount > roundData.budget - getProvisions()) {
                totalOffersText = '<b>Insufficient Funds:</b> ' + totalPendingOffersAmount;
            } else {
                for(var i = 1; i < 4; i++) {
                    $('#acceptButton'+i).removeAttr('disabled');
                }
            }

            $('#totalOffers').html({{ Constants.total_pending_offers_label|json }} + totalOffersPrimed);
            $('#offersCost').html(totalOffersText);
        }

        function postRow(key, channel, offerAmount, offerMadeBy, offerSentTo) {
            id = roundData[channel];
            var cellID = key+channel;
            offerSource = offerMadeBy == myChannel ? {{ Constants.offer_made_by_self|json }} : {{ Constants.land_owner_role|json }};
            var newRow = `<tr id='${roundData[id].offers}'><td>${roundData[id].offers}</td><td>${offerSource}</td><td>${offerAmount}</td><td id='${cellID}'>Pending</td></tr>`;
            $('#offersTable'+id).append(newRow);
        }

        function updateRow(key, channel, response) {
            var cellID = '#'+key+channel;
            var cellIDNull = '$'+channel;
            $(cellID).html(response)
            $(cellID).attr('id', cellIDNull);
        }

        function reloadRow(offerNumber, offerMadeBy, offerAmount, response, id) {
            var newRow = `<tr><td>${offerNumber}</td><td>${offerMadeBy}</td><td>${offerAmount}</td><td>${response}</td></tr>`;
            $('#offersTable'+id).append(newRow);
        }

        function reloadBackup(backupData) {
             if(defaultReload()) {
                console.log('Default Reload');
                return null;
             }
             if(backupData.hasOwnProperty('Last')) {
                var channel = roundData[+backupData.Land_Owner*1111];
                roundData[+backupData.Land_Owner].offers = +backupData.Number-1;
                if(backupData.Source == 'You') {
                    $('#inputOffer'+backupData.Land_Owner).val(+backupData.Offer);
                    roundData[+backupData.Land_Owner].pendingOffer = +backupData.Offer;
                    updateCalculations();
                    prepareOffer(channel, +backupData.Offer);
                } else {
                    openOffer(channel, +backupData.Offer);
                    updateCalculations();
                }
                if(backupData.Reply != 'Pending') {
                    if(backupData.Source == 'You') {
                        openResponse(channel, backupData.Reply);
                    } else {
                        roundData[+backupData.Land_Owner].currentOffer = +backupData.Offer
                        prepareResponse(channel, backupData.Reply);
                    }
                }
            } else {
                console.log('Row Reload');
                reloadRow(backupData.Number, backupData.Source, backupData.Offer, backupData.Reply, backupData.Land_Owner);
            }
        }

        function getProvisions() {
            return {{ Constants.land_owner_provision }} * (3-(totalOffersPrimed+roundData.offersCurrentlyPending+roundData.acceptedOffers));
        }

        function prepareOffer(channel, offerAmount) {
            console.log('Preparing Offer');
            id = roundData[channel];
            if(totalPendingOffersAmount > roundData.budget-getProvisions()) {
                resetScreen(channel);
                $('#offerDetails'+id).removeAttr('hidden');
                $('#offerDetails'+id).html({{ Constants.insufficient_balance_message|json }});
                return false;
            } else {
                roundData.offerInTransit = offerAmount;
                roundData.offersMade++;
                roundData.offersCurrentlyPending++;
                roundData[id].currentOffer = offerAmount;
                roundData[id].offerPrimed = 0;
                roundData[id].offers++;

                postRow(1, channel, offerAmount, myChannel);

                $('#offerDetails'+id).removeAttr('hidden');
                $('#offerDetails'+id).html('Pending');
                $('#sendOfferTo'+id).attr('hidden', true);
                $('#inputOffer'+id).attr('disabled', true);
                return true;
            }
        }

        function openOffer(channel, offerAmount) {
            console.log('Opening Offer');
            id = roundData[channel];
            roundData[id].pendingOffer = offerAmount;
            roundData[id].currentOffer = offerAmount;
            roundData[id].offers++;
            roundData.offersMade++;
            roundData.offersCurrentlyPending++;
            postRow(2, channel, offerAmount, channel);

            $('#currentOffer'+id).html(offerAmount);
            $('#acceptButton'+id).removeAttr('hidden');
            $('#rejectButton'+id).removeAttr('hidden');
            $('#sendOfferTo'+id).attr('disabled', true);
            $('#inputOffer'+id).attr('disabled', true);

            if(totalPendingOffersAmount+offerAmount > roundData.budget-getProvisions())
                $('#acceptButton'+id).attr('disabled', true);
        }

        function prepareResponse(channel, response) {
            console.log('Preparing Response');
            id = roundData[channel];
            updateRow(2, channel, response);
            roundData.acknowledgment = response;
            roundData.offerInTransit = roundData[id].currentOffer;
            roundData.offersCurrentlyPending--;
            roundData[id].pendingOffer = 0;
            roundData[id].offerPrimed = 0;
            $('#inputOffer'+id).val('');
            $('#currentOffer'+id).html('None');
            $('#inputOffer'+id).removeAttr('disabled');
            $('#sendOfferTo'+id).removeAttr('disabled');
            $('#acceptButton'+id).attr('hidden', true);
            $('#rejectButton'+id).attr('hidden', true);
            $('#acceptButton'+id).removeAttr('disabled');

            if(response == {{ Constants.accept_offer|json }}) {
                acceptOffer(channel);
            }
        }

        function openResponse(channel, response) {
            console.log('Opening Response');
            id = roundData[channel];
            updateRow(1, channel, response);
            roundData.offersCurrentlyPending--;
            roundData[id].pendingOffer = 0;
            roundData[id].offerPrimed = 0;
            $('#inputOffer'+id).val('');
            if(response == {{ Constants.reject_offer|json }}) {
                rejectOffer();
            } else if(response == {{ Constants.accept_offer|json }}) {
                acceptOffer(channel);
            }
        }

        function acceptOffer(channel) {
            id = roundData[channel];
            $('#acknowledgmentPanel'+id).attr('hidden', true);
            $('#acceptMessage'+id).html("Accepted Offer: " + roundData[id].currentOffer);
            $('#acceptMessage'+id).removeAttr('hidden');
            $('#offerPanel'+id).attr('hidden', true);
            roundData.acceptedOffersAmount += roundData[id].currentOffer;
            roundData.acceptedOffers++
            updateFinancials();
            if(roundData.acceptedOffers == 3) {
                disableTermination();
            }
        }

        function rejectOffer() {
            $('#sendOfferTo'+id).removeAttr('hidden');
            $('#inputOffer'+id).removeAttr('disabled');
            $('#offerDetails'+id).html({{ Constants.reject_offer|json }});
            $('#offerDetails'+id).removeAttr('hidden');
        }

        function resetScreen(channel) {
            id = roundData[channel];
            $('#offerDetails'+id).attr('hidden', true);
            $('#sendOfferTo'+id).removeAttr('hidden');
            $('#inputOffer'+id).removeAttr('disabled');
        }

        function clearData() {
            for(var i = 1; i < 4; i++) {
                while(document.getElementById('offersTable'+i).rows.length > 1) {
                  document.getElementById('offersTable'+i).deleteRow(1);
                }
            }
        }

        function loadSession() {
            $("#chatContainer1").replaceWith(
                sessionPanel(
                    1,
                    {{ land_owner_id_1 }},
                    {{ player.role|json }},
                    {{ tenant_messenger_1|json }},
                    {{ Constants.acknowledgment_signal|json }},
                    {{ Constants.offer_signal|json }},
                    {{ Constants.accept_offer|json }},
                    {{ Constants.reject_offer|json }},
                    $('#chatContainer1').html()
                )
            );
            $("#chatContainer2").replaceWith(
                sessionPanel(
                    2,
                    {{ land_owner_id_2 }},
                    {{ player.role|json }},
                    {{ tenant_messenger_2|json }},
                    {{ Constants.acknowledgment_signal|json }},
                    {{ Constants.offer_signal|json }},
                    {{ Constants.accept_offer|json }},
                    {{ Constants.reject_offer|json }},
                    $('#chatContainer2').html()
                )
            );
            $("#chatContainer3").replaceWith(
                sessionPanel(
                    3,
                    {{ land_owner_id_3 }},
                    {{ player.role|json }},
                    {{ tenant_messenger_3|json }},
                    {{ Constants.acknowledgment_signal|json }},
                    {{ Constants.offer_signal|json }},
                    {{ Constants.accept_offer|json }},
                    {{ Constants.reject_offer|json }},
                    $('#chatContainer3').html()
                )
            );

            for(var i = 1; i < 4; i++) {
                roundData[i] = {
                    pendingOffer: 0,
                    offers: 0,
                    offerPrimed: 0,
                    currentOffer: null
                }
            };

            roundData[{{ tenant_messenger_1|json }}] = 1;
            roundData[{{ tenant_messenger_2|json }}] = 2;
            roundData[{{ tenant_messenger_3|json }}] = 3;

            roundData[1111] = {{ tenant_messenger_1|json }};
            roundData[2222] = {{ tenant_messenger_2|json }};
            roundData[3333] = {{ tenant_messenger_3|json }};

            updateCalculations();
        }

        function terminateNegotiations() {
            $('#tenantScreen').html('<h3>{{ Constants.end_negotiations_message_HTML }}</h3>');
            disableTermination();
        }

        function screenUpdate() {
            updateCalculations();
        }

        function styleScreens() {
            for(var i = 1; i < 4; i++) {
                if(i != 3)
                    $('#infoBox'+i).addClass('smallMargin');
                $('#infoBox'+i).addClass('textAlign');
                $('#offerPanel'+i).addClass('textAlign');
                $('#inputOffer'+i).addClass('textAlign width');
                $('#acknowledgmentPanel'+i).addClass('topVerticalAlign');
            }
            $('.otree-chat__input').attr('size', '30%');
        }
</script>
{% endblock %}

{% block styles  %}
<style type="text/css">
    .infoBox {
        border-radius: 15px;
        border-style: solid;
        padding: 20px;
        width: 33%;
        float: left;
    }
    .financialCalculator {
        border-radius: 15px;
        border-style: solid;
        text-align: center;
        padding: 10px;
        margin-bottom: 4px;
    }
    .fixedAckPanelSize {
        height: 125px;
    }
    .fixedAcceptMessageSize {
        height: 125px;
    }
</style>
{% endblock %}