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

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

<table class="table">
    <tr>
        <td>Items in your possession</td>
        <th id="num_items"></th>
    </tr>
    <tr>
        <td>Your current offer as a buyer</td>
        <th id="current_offer_buyer"></th>
        <td>Your current offer as a seller</td>
        <th id="current_offer_seller"></th>
    </tr>
    <tr>
        <td>Profits as a buyer</td>
        <th id="payoff_buyer"></th>
        <td>Profits as a seller</td>
        <th id="payoff_seller"></th>
    </tr>
</table>

<!-- Buyer Section -->
<input type="number" id="my_offer_buyer">
<button type="button" onclick="sendOffer('buyer')" id="btn-offer-buyer">Make offer as a buyer</button>

<!-- Seller Section -->
<input type="number" id="my_offer_seller">
<button type="button" onclick="sendOffer('seller')" id="btn-offer-seller">Make offer as a seller</button>

<br><br>
<div class="container">
    <div class="row">
        <div class="col-sm">
            <h4>Bids</h4>
            <table id="bids_table"></table>
        </div>
        <div class="col-sm">
            <h4>Asks</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 btnOfferBuyer = document.getElementById('btn-offer-buyer');
    let btnOfferSeller = document.getElementById('btn-offer-seller');
    let my_offer_buyer = document.getElementById('my_offer_buyer');
    let my_offer_seller = document.getElementById('my_offer_seller');

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

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

    function liveRecv(data) {
       console.log('liveRecv function called with data:', data);
        // javascript destructuring assignment
        let {bids_buyer, asks_seller, highcharts_series, num_items,
            current_offer_buyer, current_offer_seller, transactions_buyer, transactions_seller, news} = data;

        if (news) {
            let {buyer, seller, price} = news;
            if (buyer === my_id) {
                showNews(`You bought from player ${seller} for ${cu(price)}`);
            } else if (seller === my_id) {
                showNews(`You sold to player ${buyer} for ${cu(price)}`);
            }
        }

        document.getElementById('num_items').innerText = num_items;

        document.getElementById('current_offer_buyer').innerText = cu(current_offer_buyer);
        document.getElementById('current_offer_seller').innerText = cu(current_offer_seller);

        document.getElementById('payoff_buyer').innerText = cu(transactions_buyer);
        document.getElementById('payoff_seller').innerText = cu(transactions_seller);

        if (num_items === 0) {
            btnOfferSeller.disabled = true;
        }

        bids_table.innerHTML = bids_buyer.map(e => `<tr><td>${cu(e)}</td></tr>`).join('');
        asks_table.innerHTML = asks_seller.map(e => `<tr><td>${cu(e)}</td></tr>`).join('');
        redrawChart(highcharts_series);
    }

    function sendOffer(role) {
        console.log('sendOffer function called with role:', role);
        let offerType = (role === 'buyer') ? 'offer_buyer' : 'offer_seller';
        let offerValue = (role === 'buyer') ? document.getElementById('current_offer_buyer').innerText : document.getElementById('current_offer_seller').innerText;
        liveSend({[offerType]: offerValue});
    }

    my_offer_buyer.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendOffer('buyer');
        }
    });

    my_offer_seller.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendOffer('seller');
        }
    });

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

{{ endblock }}