{{ block app_styles }}
    
    <style>

        .otree-timer {
            margin-top: 20px;
            display: none;
        }

        .graph {
            width: 60%;
            /*margin: auto;
            background: #f0f0f0;*/
            padding: 10px;
        }
    
        #graph {
            width: 100%;
            height: 600px;
        }
    
        #lineSlider {
            width: 100%;
            margin-top: 0px;
            margin-left: 0px;
            box-sizing: border-box;
        }

        .action-button {
            border: black;           
            padding: 10px 10px 10px 10px;
            text-align: center;         
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-bottom: 1px;
            border-top: 1px;
            border-right: 1px;
            border-left: 1px;
            margin-bottom: 16px;
            width: 200px;
            height: 44px;
        }

    </style>

{{ endblock}}

{{ block content }}

    {{ formfield_errors 'quantity' }}

    <section class="top-half">

        <section class="round-information">
            <p>
                <strong>Round:</strong> {{ exp_round }} &nbsp; | &nbsp;
                <strong>Task:</strong> {{ task_number }} &nbsp; | &nbsp;
                <strong>Your type:</strong> {{ mytype }} &nbsp; | &nbsp;
                <strong>Other's type:</strong> {{ othertype }} &nbsp; | &nbsp;
                <strong>Time remaining:</strong> <span id="time-left"></span>
            </p>
        </section>

        <section class="graph-chat" style="display: flex;">

            <section class="graph" style="width: 60%;">
                <div id="graph_to_show" style="height: 600px;"></div>
                <input type="range" name="quantity_accept" id="lineSlider" min="0" max="10" step="0.1" value="0" class="slider" >
                <label for="lineSlider" class="slider-label" style="width: 100%; margin: 0px; text-align: center">Use Slider to Adjust Quantity</label>
            </section>

            <section style="width: 35%; ">
                <div id="chat_messages" style="
                    border: solid black;
                    min-height: 80%;
                    max-height: 80%;
                    margin-bottom: 2em;
                    overflow-y: auto;
                    word-wrap: break-word;
                    white-space: normal;
                ">
                </div>
                <br>
                <div>
                    <input type="text" id="chat_input">
                    <button type="button" onclick="sendMsg()">Send</button>
                </div>
            </section>

        </section>

    </section>

    <br>

    <section class="bottom-half" style="display: flex;">

        <div class="payoffs-left" style="display: flex; width: 49%;">

            <div class="proposal-container" style="width: 49%;">
                <p>Your Proposal:</p>
                <div class="values" id="functionValues"></div>
            </div>

            <div class="buttons" style="margin-left: 0em; width: 35%;">
                <button class="action-button" type="button" id="submitButton" onclick="submitProposal()">Submit Proposal</button>
                <button class="action-button" type="button" id="cancelButton" onclick="cancelProposal()">Cancel Proposal</button>
                <button class="action-button" type="button" id="acceptButton" onclick="acceptProposal()">Confirm Proposal</button>
            </div>

        </div>

        <input type="hidden" id="quantity" name="quantity" />
        <input type="hidden" id="typeAPayoff" name="typeAPayoff" />
        <input type="hidden" id="typeBPayoff" name="typeBPayoff" />
        <input type="hidden" id="typeCPayoff" name="typeCPayoff" />

    </section>

    <br>

    <div>
        Remember, there are six (6) total players (including you) who may be affected by your choices.
        If this task is the "Task that counts", it will affect the payoff of four active (Type A and B) and two passive (Type C) players.
    </div>

{{ endblock }}

{{ block scripts }}

    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/12.2.1/math.min.js" integrity="sha512-hNhZseI4UffZ3L9lqew2Jqi11l/m7ZSf1snwdIjC9vqi4DCzMf4pip+rlMMD+5LQbzCA15ebOEOGLnMu0vd+eg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{% static 'global/js/Graph_Mouli_V2.js' %}"></script>
    <link rel="stylesheet" href="{% static 'global/empty.css' %}">

    <script type="text/javascript">

        let sliderElement = document.getElementById('lineSlider');
        let graphElement = document.getElementById('graph_to_show');
        let sliderLabelElement = document.querySelector('.slider-label');

        let submitButtonElement = document.getElementById("submitButton");
        let cancelButtonElement = document.getElementById("cancelButton");
        let acceptButtonElement = document.getElementById("acceptButton");

        let customTimerElement = document.getElementById('time-left');

        function disableAllButtons() {
            submitButtonElement.disabled = true;
            cancelButtonElement.disabled = true;
            acceptButtonElement.disabled = true;
        }

        disableAllButtons();

        var currentSliderQuantity = 0;
        var currentypeAPayoff = 0;
        var currentypeBPayoff = 0;
        var currentypeCPayoff = 0;

        var alloted_time_task = js_vars.time_individual_task;

        // Custom Timer
        document.addEventListener("DOMContentLoaded", function (event) {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                customTimerElement.innerText = (event.offset.totalSeconds); //event.offset.totalSeconds
            });
        });

        // Refresh
        document.addEventListener("DOMContentLoaded", function (event) {
            var data = {
                "action_app": "Refresh",
            };
            console.log(data);
            liveSend(data);
        });

        let equationsToPlot = js_vars.equations[js_vars.param_number-1];
        const equationColors = js_vars.colors;

        graph_to_show = new Graph(functionsToPlot=equationsToPlot, colors=equationColors, num=1);
        graph_to_show.plotFunctions();

        sliderElement.addEventListener('input', function() {

            const sliderValue = parseFloat(this.value);             // 1. Read slider's value as a float
            graph_to_show.moveVerticalLine(sliderValue);            // 2. Move the vertical line on the Plotly graph
            submitButtonElement.disabled = false;                   // 3. Enable the "Submit" button
            acceptButtonElement.disabled = true;                    // 4. Disable the "Accept" button
        
        });


        // Function from buttons

        function submitProposal() {

            sliderElement.disabled = true;
            submitButtonElement.disabled = true;
            cancelButtonElement.disabled = false;
            acceptButtonElement.disabled = false;

            currentSliderQuantity = sliderElement.value;
            currentypeAPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["A"],currentSliderQuantity);
            currentypeBPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["B"],currentSliderQuantity);
            currentypeCPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["C"],currentSliderQuantity);

            document.getElementById('quantity').value = currentSliderQuantity;
            document.getElementById('typeAPayoff').value = currentypeAPayoff;
            document.getElementById('typeBPayoff').value = currentypeBPayoff;
            document.getElementById('typeCPayoff').value = currentypeCPayoff;

            // Create a data object to submit the player's decision and payoff info
            var data = {
                'action_app': "My Proposal",                                   // Action Triggering liveSend
                'timeRemaining': customTimerElement.textContent,          // Time display when timeout occurred
                'quantity': sliderElement.value,                     // Player's chosen value from the slider
                'A_payoff': currentypeAPayoff,
                'B_payoff': currentypeBPayoff,
                'C_payoff': currentypeCPayoff
            };

            // Send data to the server
            liveSend(data);

        };

        function cancelProposal() {

            sliderElement.disabled = false;
            submitButtonElement.disabled = true;
            cancelButtonElement.disabled = true;
            acceptButtonElement.disabled = true;

            sliderElement.value = 0;
            graph_to_show.moveVerticalLine(0);
            graph_to_show.updateFunctionValues(initialLoad=true);

            document.getElementById('quantity').value = 0;
            document.getElementById('typeAPayoff').value = 0;
            document.getElementById('typeBPayoff').value = 0;
            document.getElementById('typeCPayoff').value = 0;

            // Create a data object to submit the player's decision and payoff info
            var data = {
                'action_app': "My Cancel",                                   // Action Triggering liveSend
                'timeRemaining': customTimerElement.textContent,
            };

            console.log(data);

            // Send data to the server
            liveSend(data);

        };

        function acceptProposal() {

            disableAllButtons()

            // Create a data object to submit the player's decision and payoff info
            var data = {
                'action_app': "My Confirm",                                   // Action Triggering liveSend
                'timeRemaining': customTimerElement.textContent,          // Time display when timeout occurred
            };

            console.log(data);

            // Send data to the server
            liveSend(data);

        };

        function inputRefresh() {

            sliderElement.disabled = true;
            submitButtonElement.disabled = true;
            cancelButtonElement.disabled = false;
            acceptButtonElement.disabled = false;

            currentSliderQuantity = sliderElement.value;
            currentypeAPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["A"],currentSliderQuantity);
            currentypeBPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["B"],currentSliderQuantity);
            currentypeCPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["C"],currentSliderQuantity);
            
            document.getElementById('quantity').value = currentSliderQuantity;
            document.getElementById('typeAPayoff').value = currentypeAPayoff;
            document.getElementById('typeBPayoff').value = currentypeBPayoff;
            document.getElementById('typeCPayoff').value = currentypeCPayoff;

        };
        // Chat Functions

        let chat_input = document.getElementById('chat_input');

        chat_input.addEventListener("keydown", function (event) {
            if (event.key === "Enter") {
                sendMsg();
            }
        });

        function sendMsg() {

            let text = chat_input.value.trim();

            if (text) {
                console.log({"action_app": "Chat", 'text': text, 'timeRemaining': customTimerElement.textContent,});
                liveSend({"action_app": "Chat", 'text': text, 'timeRemaining': customTimerElement.textContent,});
            };

            chat_input.value = '';
        };

        let chat_messages = document.getElementById('chat_messages');


        // Live Message Receipt

        function liveRecv(messages) {
            
            console.log("Received");
            //console.log(messages);

            for (let msg of messages) {

                console.log(msg);

                if ( msg.action_app == 'Confirm' ) {

                    if (msg.finished) {
                        document.getElementById('form').submit();
                    };

                } else if ( msg.action_app == 'Confirm_Refresh' ) {

                    graph_to_show.moveVerticalLine(msg.slider_value);
                    sliderElement.value = msg.slider_value;
                    inputRefresh();

                    if (msg.confirmed) {
                        disableAllButtons();
                        sliderElement.disabled = true;
                    };

                } else if ( msg.action_app == 'Chat' ) {

                    let msgSpan = document.createElement('span');
                    msgSpan.textContent = msg.text;
                    let sender = msg.me === 1 ? `${msg.nickname} (Me)` : `${msg.nickname}`;
                    let row = `<div><b>${sender}</b>: ${msgSpan.innerHTML}</div>`;
                    chat_messages.insertAdjacentHTML('beforeend', row);

                } else if ( msg.action_app == 'Chat_Refresh' ) {

                    let msgSpan = document.createElement('span');
                    msgSpan.textContent = msg.text;
                    let sender = msg.me === 1 ? `${msg.nickname} (Me)` : `${msg.nickname}`;
                    let row = `<div><b>${sender}</b>: ${msgSpan.innerHTML}</div>`;
                    chat_messages.insertAdjacentHTML('beforeend', row);

                };
            };
        };
    
    </script>

{{ endblock}}