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

{{ block content }}

	<div class="otree-timer alert alert-warning">
		<p>Temps restant pour compléter cette page :
			<span style="font-weight: bold">
				<span class="otree-timer__time-left">0:00</span>
			</span>
		</p>
	</div>

    <div id="time_alert" class="alert alert-danger" role="alert" style="display: none;">
        Le temps est sur le point de se terminer, veuillez prendre une décision.
    </div>
	
    <div id="time_finished" class="alert alert-danger" role="alert" style="display: none;">
        VEUILLEZ PRENDRE UNE DÉCISION MAINTENANT!
    </div>

    <br>

    {{ if round == 1 }}
    <h2>Période {{ period }} / {{ periods }} -- Phase {{ round }} / {{ rounds }} -- Entraînement </h2>
    {{ endif }}

    {{ if round > 1 }}
    <h2>Période {{ period }} / {{ periods }} -- Phase {{ round }} / {{ rounds }} </h2>
    {{ endif }}

    <br>

    <div class="row">
        <div class="feedback_column">
            <p>
                <b>Montant que vous pouvez investir :</b> {{ player_income }} ECUs<br>
                {{ if period > 1 }}
                <b>Dette de l'Etat de la période précédente :</b> {{ government_last_debt }} ECUs<br>
                <b>Revenus de l'Etat au cours de cette période :</b> {{ government_income }} ECUs<br>
                {{ endif }}
                <b>Dette totale à financer :</b> {{ government_debt }} ECUs<br>
                <i>Veuillez indiquer les quantités que vous souhaitez acheter dans le tableau
                    ci-dessous, ensuite appuyez sur « Submit input » et attendez.
                    Un prix bas implique un intérêt (gain) plus important pour vous ;
                    en revanche les demandes aux prix les plus élevés seront servies en premier.</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>Prix</th>
                            <th>Quantité</th>
                            <th>Valeur</th>
                            <th>Gain</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>
                            <td id="gain01">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>
                            <td id="gain02">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>
                            <td id="gain03">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>
                            <td id="gain04">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>
                            <td id="gain05">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>
                            <td id="gain06">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>
                            <td id="gain07">0</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td id="quant_sum">0</td>
                            <td id="value_sum">0.00</td>
                            <td id="gain_sum">0.00</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="column">
                <div>
                    <center>Evolution de la dette de l'Etat</center>
                    <canvas id="myChart" height="450" width="450"></canvas>
                </div>
            </div>
        </div>
        
    {{ else }}
        <div id="message" class="alert alert-danger" role="alert">
            Vous n'avez pas pu saisir de réponse sur une des périodes précédentes. L'ordinateur répondra à votre place.
        </div>
        <br>
    {{ endif }}
    
    <div id="max_bonds_message" class="alert alert-primary" role="alert" style="display: none;">
        Vous ne pouvez pas enchérir plus que votre revenu de {{ player_income }} ECUs.
    </div>
    
    <div style="display: none;">
        {{ formfields }}
    </div>

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

        <div class="modal-content">
            <h5 class="card-title">
                Vous avez utilisé <span id="value_rem">0</span> / {{ player_income }} ECUs. Voulez-vous soumettre cette distribution?
            </h5>
            <div class="row modal-button-div">
                <button class="otree-btn-next btn btn-primary modal-button">Soumettre</button>
                <button type="button" id="close_modal" class="otree-btn-next btn btn-primary modal-button">Modifier</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));
                $('#gain_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));
                $('#gain_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;
            gain_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];
                gain_sum = gain_sum + inputs[i -1] * (1 - prices[i -1]);
                $('#value0' + i).text((inputs[i -1] * prices[i -1]).toFixed(2));
                $('#gain0' + i).text(( (inputs[i -1] * (1 - prices[i -1]).toFixed(2)).toFixed(2) ));
            }
            $('#quant_sum').text(quant_sum);
            $('#value_sum').text(value_sum.toFixed(2));
            $('#value_rem').text(value_sum.toFixed(2));
            $('#gain_sum').text(gain_sum.toFixed(2));
            $('#gain_rem').text(gain_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: 'Niveau de la dette',
                backgroundColor: 'rgb(0, 152, 152)',
                borderColor: 'rgb(0, 152, 121)',
                data: {{ debt_level }},
            }, {
                label: 'Dette Maximale',
                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: 'Dette de l Etat'
                        }
                    }
                }
            }
        };
    </script>
    <script>
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>
    <script>
		var start = Date.now();
		
		$( document ).ready(function() {
			update_time();
		});
		
		setInterval(function(){
			update_time();
		}, 1000);
		
		function update_time(){
			var time_spent = parseInt((Date.now() - start) / 1000);
			var time_remaining  = {{ timeout_main }} - time_spent;
			var alert_remaining = {{ alert_main }}   - time_spent;
			var secs = time_remaining % 60;
			var mins = Math.floor(time_remaining / 60);
			if(secs < 10){ secs = "0" + secs };
			var timer = mins + ":" + secs;
			
			if(time_remaining >= 0){
				$('.otree-timer__time-left').text(timer);
				if(alert_remaining <= 0){
					$('#time_alert').show();
				}
			} else {
				$('#time_alert').hide();
				$('#time_finished').show();
			}
		}
    </script>
{{ endblock }}