{{ block title }}
Trade
{{ endblock }}
{{ block content }}

<p id="news" style="color: green"></p>

<table class="table">
    <tr>
        <td>Ihre Marktseite</td>
        <th>
            {{ if player.is_buyer }}Käufer{{ else }}Verkäufer{{ endif }}
        </th>
    </tr>
    <tr>
        <td>
            {{ if player.is_buyer }}
                Ihre maximale Zahlungsbereitschaft (= maximaler Preis, den Sie rational bezahlen wollen)
            {{ else }}
                Ihre Produktionskosten (= minimaler Preis den Sie brauchen)
            {{ endif }}
        </td>
        <th>
            {{ player.break_even_point }}
        </th>
    </tr>
    <tr>
        <td>Anzahl Güter in Ihrem Besitz</td>
        <th id="num_items"></th>
    </tr>
    <tr>
        <td>Ihr aktuelles Angebot</td>
        <th id="current_offer"></th>
    </tr>
    <tr>
        <td>Profit</td>
        <th id="payoff"></th>
    </tr>
</table>


<input type="number" id="my_offer">
<button type="button" onclick="sendOffer()" id="btn-offer">Angebot abgeben</button>
<br><br>
<div class="container">
    <div class="row">
        <div class="col-sm">
            <h4>Käufer: angebotene Preise</h4>
            <table id="bids_table"></table>
        </div>
        <div class="col-sm">
            <h4>Verkäufer: eingeforderte Preise</h4>
            <table id="asks_table"></table>
        </div>
    </div>
</div>

<br><br>
{{ include 'double_auction/chart.html' }}


<script>

    let bids_table = document.getElementById('bids_table');
    let asks_table = document.getElementById('asks_table');
    let my_id = js_vars.id_in_group;
    let news_div = document.getElementById('news');
    let is_buyer = js_vars.is_buyer;
    let btnOffer = document.getElementById('btn-offer');

    function showNews(msg) {
        news_div.innerText = msg;
        setTimeout(function () {
            news_div.innerText = ''
        }, 10000)
    }

    function cu(amount) {
        return `${amount} points`;
    }

    function liveRecv(data) {
        console.log(data)
        // javascript destructuring assignment
        let {bids, asks, highcharts_series, num_items, current_offer, payoff, news} = data;
        if (news) {
            let {buyer, seller, price} = news;
            if (buyer === my_id) {
                showNews(`Sie haben gekauft von Verkäufer ${seller} zum Preis von ${cu(price)}`);
            } else if (seller === my_id) {
                showNews(`Sie haben verkauft an Käufer  ${buyer} zum preis von ${cu(price)}`);
            }
        }
        document.getElementById('num_items').innerText = num_items;
        document.getElementById('current_offer').innerText = cu(current_offer);
        document.getElementById('payoff').innerText = cu(payoff);
        if (!is_buyer && num_items === 0) {
            btnOffer.disabled = true;
        }
        bids_table.innerHTML = bids.map(e => `<tr><td>${cu(e)}</td></tr>`).join('');
        asks_table.innerHTML = asks.map(e => `<tr><td>${cu(e)}</td></tr>`).join('');
        redrawChart(highcharts_series);
    }

    function sendOffer() {
        liveSend({'offer': document.getElementById('my_offer').value})
    }

    window.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });
</script>

{{ endblock }}