{{ block title }}
    Euro Bonds Game
{{ endblock }}

{{ block content }}

    <div id="time_alert" class="alert alert-danger" role="alert" style="display: none;">
        PLEASE MAKE A DECISION NOW! IF NOT THE COMPUTER WILL TAKE A DECISION FOR YOU AND YOU WILL NOT BE ABLE TO CONTINUE THE GAME!
    </div>

    <br>

    <h2>Period {{ period }} / {{ periods }} -- Round {{ round }} / {{ rounds }}</h2>

    <br>

    <div class="row">
        <div class="feedback_column">
            <p>
                <b>Amount you can invest:</b> {{ player_income }} EC<br>
                {{ if period > 1 }}
                <b>Government debt from previous period:</b> {{ government_last_debt }} EC<br>
                <b>Government income in this period:</b> {{ government_income }} EC<br>
                {{ endif }}
                <b>Total debt to be financed:</b> {{ government_debt }} EC<br>
                <i>You are player: {{ pid }} Please fill in the quantities that you want to buy in the table below.</i>
            </p>
        </div>
        {{ if player_dropped == 0 }}
            <div class="button_column">
                <button type="button" id="show_modal" class="otree-btn-next btn btn-primary">Submit Input</button>
            </div>
        {{ endif }}
    </div>
    
    <br>
    
    {{ if player_dropped == 0 }}

        <div class="row">
            <div class="column">
                <table id="choices" class="styled-table">
                    <thead>
                        <tr>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="price01">{{ C.PURCHASE_PRICE_BOND.0 }}</td>
                            <td id="quant01"><input type="number" id="id_raw01" placeholder="0"></td>
                            <td id="value01">0</td>
                        </tr>
                        <tr>
                            <td id="price02">{{ C.PURCHASE_PRICE_BOND.1 }}</td>
                            <td id="quant02"><input type="number" id="id_raw02" placeholder="0"></td>
                            <td id="value02">0</td>
                        </tr>
                        <tr>
                            <td id="price03">{{ C.PURCHASE_PRICE_BOND.2 }}</td>
                            <td id="quant03"><input type="number" id="id_raw03" placeholder="0"></td>
                            <td id="value03">0</td>
                        </tr>
                        <tr>
                            <td id="price04">{{ C.PURCHASE_PRICE_BOND.3 }}</td>
                            <td id="quant04"><input type="number" id="id_raw04" placeholder="0"></td>
                            <td id="value04">0</td>
                        </tr>
                        <tr>
                            <td id="price05">{{ C.PURCHASE_PRICE_BOND.4 }}</td>
                            <td id="quant05"><input type="number" id="id_raw05" placeholder="0"></td>
                            <td id="value05">0</td>
                        </tr>
                        <tr>
                            <td id="price06">{{ C.PURCHASE_PRICE_BOND.5 }}</td>
                            <td id="quant06"><input type="number" id="id_raw06" placeholder="0"></td>
                            <td id="value06">0</td>
                        </tr>
                        <tr>
                            <td id="price07">{{ C.PURCHASE_PRICE_BOND.6 }}</td>
                            <td id="quant07"><input type="number" id="id_raw07" placeholder="0"></td>
                            <td id="value07">0</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td id="quant_sum">0</td>
                            <td id="value_sum">0.00</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="column">
                <div>
                    <center>Evolution of state debt</center>
                    <canvas id="myChart" height="450" width="450"></canvas>
                </div>
            </div>
        </div>
        
    {{ else }}
        <div id="message" class="alert alert-danger" role="alert">
            You were not able to input an answer on one of the previous periods. The computer will answer for you.
        </div>
        <br>
    {{ endif }}
    
    <div id="max_bonds_message" class="alert alert-primary" role="alert" style="display: none;">
        You can not bid more than your income of {{ player_income }} ECs. Excess bonds will be updated to the maximum amount available.
    </div>
    
    <div style="display: none;">
        {{ formfields }}
    </div>

    <div id="confirmation_modal" class="modal">

        <div class="modal-content">
            <h5 class="card-title">
                You have used <span id="value_rem">0</span> / {{ player_income }} ECs. Do you want to submit this distribution?
            </h5>
            <div class="row modal-button-div">
                <button class="otree-btn-next btn btn-primary modal-button">Submit Input</button>
                <button type="button" id="close_modal" class="otree-btn-next btn btn-primary modal-button">Change Input</button>
            </div>
        </div>

    </div>

{{ endblock }}

{{ block styles }}
    <style>
        .otree-title, .col-form-label {
            display: none; 
        }
    </style>
    <style>
        .styled-table {
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 0.9em;
            font-family: sans-serif;
            min-width: 400px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        }

        .styled-table thead tr {
            background-color: #009879;
            color: #ffffff;
            text-align: left;
        }

        .styled-table th,
        .styled-table td, tr {
            padding: 12px 13px;
            min-width: 80px;
        }

        .styled-table tbody tr {
            border-bottom: 1px solid #dddddd;
        }

        .styled-table tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        .styled-table tbody tr:last-of-type {
            border-bottom: 2px solid #009879;
        }

        .styled-button {
            color: #fff;
            background-color: #0d6efd;
            border-color: #0d6efd;
            display: inline-block;
            font-weight: 400;
            line-height: 1.5;
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            border-radius: .25rem;
        }

        .row {
            display: flex;
        }

        .column {
            flex: 50%;
        }
        .feedback_column {
            flex: 80%;
        }
        .button_column {
            flex: 20%;
        }
    </style>
    <style>
        /* Modal */
        .modal {
            display: hidden; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 40%; /* Could be more or less, depending on screen size */
        }
        .modal-button {
            width: 20%;
        }
        .modal-button-div {
            display: flex;
            justify-content: center;
        }
        .modal-button + .modal-button {
            margin-left: 10px;
        }
    </style>
{{ endblock }}

{{ block scripts }}
    <script>
        // Catch any input
        $('[id^="id_raw"]').on("input", function() {
            id    = event.srcElement.id;
            code  = parseInt(id.substr(-2));
            quant = $(this).val();
            edit_invest(code, quant);
        });

        // Process any input change
        function edit_invest(input, quant){
            // Assure quant has value
            if(!quant) quant = 0;
        
            // Get all inputs
            inputs = [
                parseInt($('#id_input01').val()), 
                parseInt($('#id_input02').val()), 
                parseInt($('#id_input03').val()), 
                parseInt($('#id_input04').val()), 
                parseInt($('#id_input05').val()), 
                parseInt($('#id_input06').val()), 
                parseInt($('#id_input07').val())];
            
            // Get investment before and after the change
            pre_invest  = calc_invest(inputs);
            inputs[input -1] = quant;
            post_invest = calc_invest(inputs);
            
            // Update quantity if possible
            if(post_invest <= {{ player_income }}){
                // Update quantity
                edit_single_invest(input, quant);
                // Update value_sum fields
                $('#value_sum').text(post_invest.toFixed(2));
            }else{
                // Maximize input update
                quant_bonds = maximize_single_invest(input, pre_invest);
                // Update investment maximized
                inputs[input -1] = quant_bonds;
                post_invest = calc_invest(inputs);
                // Update value_sum fields
                $('#value_sum').text(post_invest.toFixed(2));
                // Show info message
                //$('#message').show();
                $('#max_bonds_message').show();
            }
            update_total_fields(inputs);
        }
        
        // Calculate total invistment given a prices array
        function calc_invest(inputs){
            prices = {{ C.PURCHASE_PRICE_BOND }};
            invest = 0;
            for(let i = 0; i < inputs.length; i++){
                invest = invest + inputs[i] * prices[i];
            }
            return(invest);
        }
        
        // Edit real input when raw input is valid
        function edit_single_invest(input, quant){
            if(!quant){
                quant = 0;
            }
            if(input >= 10){
                $('#id_input'  + input).val(quant);
            }else{
                $('#id_input0' + input).val(quant);
            }
        }
        
        // Maximize the raw input if it is superior than player income
        function maximize_single_invest(input, pre_invest){
            prices = {{ C.PURCHASE_PRICE_BOND }};
            quant_value = {{ player_income }} - pre_invest;
            quant_bonds = Math.floor(quant_value / prices[input -1]);
            maxed_value = quant_bonds * prices[input -1];
            
            if(input >= 10){
                final_quant = parseInt($('#id_input'  + input).val()) + quant_bonds;
                $('#id_raw'    + input).val(final_quant);
                $('#id_input'  + input).val(final_quant);
            }else{
                final_quant = parseInt($('#id_input0' + input).val()) + quant_bonds;
                $('#id_raw0'   + input).val(final_quant);
                $('#id_input0' + input).val(final_quant);
            }
            
            return(final_quant);
        }
        
        // 
        function update_total_fields(inputs){
            prices = {{ C.PURCHASE_PRICE_BOND }};
            quant_sum = 0;
            value_sum = 0;
            for(let i = 1; i <= inputs.length; i++){
                quant_sum = quant_sum + inputs[i -1] * 1;
                value_sum = value_sum + inputs[i -1] * prices[i -1];
                $('#value0' + i).text((inputs[i -1] * prices[i -1]).toFixed(2));
            }
            $('#quant_sum').text(quant_sum);
            $('#value_sum').text(value_sum.toFixed(2));
            $('#value_rem').text(value_sum.toFixed(2));
        }
        
        // Get the modal
        var modal = document.getElementById("confirmation_modal");
        
        // Show the modal
        $('#show_modal').click(function() {
            modal.style.display = "block";
        });

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
        $('#close_modal').click(function() {
            modal.style.display = "none";
        });
        
        // Prevent submit with intro
        $(document).ready(function() {
            $(window).keydown(function(event){
                if(event.keyCode == 13) {
                    event.preventDefault();
                    return false;
                }
            });
        });
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const data = {
            labels: {{ labels }},
            datasets: [{
                label: 'Debt level',
                backgroundColor: 'rgb(0, 152, 152)',
                borderColor: 'rgb(0, 152, 121)',
                data: {{ debt_level }},
            }, {
                label: 'Max debt',
                backgroundColor: 'rgb(255, 0, 0)',
                borderColor: 'rgb(255, 0, 0)',
                data: {{ max_debt }},
            }]
        };

        const config = {
            type: 'line',
            data: data,
            options: {
                scales: {
                    y: {
                        title: {
                            display: true,
                            text: 'Public debt'
                        }
                    }
                }
            }
        };
    </script>
    <script>
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                if ({{ player_dropped }} == 0 ){
                    if (event.offset.totalSeconds <= {{ alert_main }}) {
                        $('#time_alert').show();
                    }
                }
            });
        });
    </script>
{{ endblock }}