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

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

<table class="table">
    <tr>
        <td>Number of Assets</td>
        <th id="num_items"></th>
    </tr>
    <tr>
        <td>Dividends</td>
        <th id="dividends"></th>
    </tr>
    <tr>
        <td>Total ECU</td>
        <th id="cash"></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 'asset_markets_teams_final/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');

    let isBuyer = false;
    let isSeller = false;

    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, asks, highcharts_series, num_items, cash, dividends,
            current_offer, transactions_buyer, transactions_seller, news, total_cash, buy, sell} = 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('dividends').innerText = dividends;

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

        // document.getElementById('current_offer').innerText = cu(current_offer);
        // document.getElementById('current_offer_seller').innerText = cu(current_offer_seller);

        if (num_items === 0) {
            btnOfferSeller.disabled = true;
        }
        console.log("BIDSSSS");
        console.log(bids);
        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(role) {
        console.log('sendOffer function called with role:', role);
        let offerType = (role === 'buyer') ? 'offer_buyer' : 'offer_seller';
        let offerValue = (role === 'buyer') ? my_offer_buyer.value : my_offer_seller.value;
        let buy = (role === 'buyer') ? 1 : 0;
        let sell = (role === 'seller') ? 1 : 0;
        console.log('offer amount: ', my_offer_buyer.value);
        console.log('buy: ', buy);
        console.log('sell: ', sell);
        liveSend({'offer': offerValue, 'buy': buy, 'sell': sell});
    }

    function updatePlayerRole(role) {
        if (role == 'buyer') {
            isBuyer = true;
            console.log(my_offer_buyer.value);

        } else if (role == 'seller') {
            isSeller = true;
            console.log(my_offer_seller.value);

        }

        /*
        let row1 = document.createElement("tr");
        let row2 = document.createElement("tr");
        let c1 = document.createElement("td");
        let c2 = document.createElement("td");
        c1.innerText = my_offer_buyer.value;
        c2.innerText = my_offer_seller.value;
        row1.appendChild(c1);
        row2.appendChild(c2);
        bids_table.appendChild(row1);
        asks_table.appendChild(row2);
        */

        //console.log(data);
    }

    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 }}