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

{% block content %}
    <div id="landOwnerScreen" style="text-align: center;">
        <div id="chatContainer">
            {% chat nickname=player.role channel=my_messenger %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="/static/otree/js/jquery.countdown.min.js"></script>
    <script>
        function styleScreens() {
            $('#inputOffer').addClass('textAlign width');
            $('#offerPanel').addClass('textAlign inline verticalWithPadding');
            $('#offerAcceptedDiv').addClass('inline verticalWithPadding');
            $('.fixedAckPanelSize').addClass('inline verticalWithPadding');
            $('#pastOffers').addClass('inline verticalWithPadding');
            $('.otree-chat__input').attr('size', '30%');
        }

        function postRow(key, offerAmount, offerMadeBy) {
            offerSource = offerMadeBy == {{ player.get_channel|json }} ? {{ Constants.offer_made_by_self|json }} : {{ Constants.tenant_role|json }};
            var newRow = `<tr id='${roundData.offersMade}'><td>${roundData.offersMade}</td><td>${offerSource}</td><td>${offerAmount}</td><td id='on${key}'>Pending</td></tr>`;
            $('#offersTable').append(newRow);
        }

        function updateRow(key, response) {
            $('#on'+key)
                .html(response)
                .attr('id', 'off');
        }

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

        function reloadBackup(backupData) {
            if(defaultReload()) {
                console.log('Default Reload');
                return null;
            }
            if(backupData.hasOwnProperty('Last')) {
                var channel = null;
                roundData.offersMade = +backupData.Number-1;
                if(backupData.Source == 'You') {
                    $('#inputOffer').val(+backupData.Offer);
                    prepareOffer(channel, +backupData.Offer);
                } else {
                    openOffer(channel, +backupData.Offer);
                }
                if(backupData.Reply != 'Pending') {
                    if(backupData.Source == 'You') {
                        openResponse(channel, backupData.Reply);
                    } else {
                        roundData.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 loadSession() {
            $('#chatContainer').replaceWith(
                sessionPanel(
                    '',
                    '',
                    {{ player.role|json }},
                    {{ Constants.tenant_channel|json }},
                    {{ Constants.acknowledgment_signal|json }},
                    {{ Constants.offer_signal|json }},
                    {{ Constants.accept_offer|json }},
                    {{ Constants.reject_offer|json }},
                    $('#chatContainer').html()
                )
            )
            roundData.pendingOffer = 0;
            roundData.offers = 0;
            roundData.currentOffer = null;
        }

        function prepareOffer(channel, offerAmount) {
            console.log('Preparing Offer');
            roundData.offersMade++;
            roundData.offersPendingResponse++;
            roundData.offerInTransit = offerAmount;
            roundData.currentOffer = offerAmount;
            postRow(1, offerAmount, {{ player.get_channel|json }});
            $('#offerDetails').removeAttr('hidden');
            $('#offerDetails').html('Pending');
            $('#sendOfferTo').attr('hidden', true);
            $('#inputOffer').attr('disabled', true);
            return true;
        }

        function openOffer(channel, offerAmount) {
            console.log('Opening Offer');
            roundData.currentOffer = offerAmount;
            roundData.offersMade++;
            $('#currentOffer').html(offerAmount);
            $('#acceptButton').removeAttr('hidden');
            $('#rejectButton').removeAttr('hidden');
            $('#sendOfferTo').attr('disabled', true);
            $('#inputOffer').attr('disabled', true);
            postRow(2, offerAmount, channel);
        }

        function prepareResponse(channel, response) {
            console.log('Preparing Response');
            updateRow(2, response);
            $('#currentOffer').html('None');
            $('#sendOfferTo').removeAttr('disabled');
            $('#inputOffer').removeAttr('disabled');
            roundData.offersPendingResponse--;
            roundData.acknowledgment = response;
            roundData.offerInTransit = roundData.currentOffer;
            $('#acceptButton').attr('hidden', true);
            $('#rejectButton').attr('hidden', true);
            if(response == {{ Constants.accept_offer|json }}) {
                acceptOffer();
            }
        }

        function openResponse(channel, response) {
            console.log('Opening Response');
            updateRow(1, response);
            if(response == {{ Constants.reject_offer|json }}) {
                rejectOffer();
            } else if(response == {{ Constants.accept_offer|json }}) {
                acceptOffer();
            }
        }

        function acceptOffer() {
            disableTermination();
            $('#acknowledgmentPanel').attr('hidden', true);
            $('#offerPanel').attr('hidden', true);
            $('#offerAcceptedInfo').html("Accepted Offer: " + roundData.currentOffer);
            $('#offerAcceptedDiv').removeAttr('hidden');
            $('#acceptMessage').removeAttr('hidden');
        }

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

        function resetScreen(channel = null) {
            $('#sendOfferTo').removeAttr('hidden');
            $('#inputOffer').removeAttr('disabled');
            $('#offerDetails').attr('hidden', true);
        }

        function terminateNegotiations() {
            $('#landOwnerScreen').html('<h3>{{ Constants.end_negotiations_message_HTML }}</h3>');
            disableTermination();
        }
        function updateBudget(newBudget) {
            roundData.budget = newBudget;
        }

        function clearData() {
            while(document.getElementById('offersTable').rows.length > 1) {
              document.getElementById('offersTable').deleteRow(1);
            }
        }

        function screenUpdate(){}
        function updateCalculations(potentialOffer = null, landOwner = null){}
    </script>
{% endblock %}

{% block styles  %}
<style type="text/css">
    .fixedAckPanelSize {}
    .fixedAcceptMessageSize {}
</style>
{% endblock %}