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

    </style>

{{ endblock}}

{{ block title }}
    Your Earnings
{{ endblock }}

{{ block content }}

    <p> Final Decision For Payment: Round: {{ exp_round }}, Task: {{ task_number }} </p>
    <p> Decision Was Made By: <span id="whoseChoiceValue"></span></p>
	<p> Your Payment from Task: <span id="paymentValue"></span> </p>
	<p> Your Show-Up Payment: $7 </p>
	<p> Your Additional Payment from Survey: $5 </p>
	<p> Your Total Payment: <span id="totalPaymentValue"></span> </p>

	<div style="text-align: center;">

		<p> Final Graph</p>

		<section class="top-half">

			<section class="round-information-1">
				<p>
					<strong>Round:</strong> {{ exp_round }} &nbsp; | &nbsp;
					<strong>Task:</strong> {{ task_number }} &nbsp; | &nbsp;
					<strong>Your type:</strong> {{ mytype }}
				</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>

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

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

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

			</div>

		</section>

	</div>
    
    <!-- <div>
		<b>
			When you are ready, click “Next” to go to next page.
		</b>
		<br>
		<br>
		<p style="text-align: center;">
			<button class="btn btn-primary btn-large" id="NextButton">
				Next
			</button>
		</p>
	</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 whoseChoiceValueElement = document.getElementById("whoseChoiceValue");
		let paymentValueElement = document.getElementById("paymentValue");
		let totalPaymentValueElement = document.getElementById("totalPaymentValue");
		let sliderElement = document.getElementById('lineSlider');

		console.log(js_vars);

		if ( js_vars.yourChoice === true ) {
			if ( js_vars.app_for_decision == "CwC" ) {
				whoseChoiceValueElement.textContent = "Your Pair";
			} else {
				whoseChoiceValueElement.textContent = "You";
			};
		} else {
			whoseChoiceValueElement.textContent = "Another Player in the Group";
		};

		if ( js_vars.quantity != "Not Submitted" ) {

			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();
        	graph_to_show.moveVerticalLine(parseFloat(js_vars.quantity));
			sliderElement.value = js_vars.quantity;
			sliderElement.disabled = true;

			console.log(js_vars.mytype);
			console.log(graph_to_show.evaluatePlayerFunction(js_vars.mytype));

			paymentValueElement.textContent = "$" + (js_vars.myPayoff).toFixed(2);
			totalPaymentValueElement.textContent = "$" + (js_vars.myPayoff + 12).toFixed(2);

		} else {

			paymentValueElement.textContent = "$" + (js_vars.myPayoff).toFixed(2) + " (Proposal not submitted in time.)";
			totalPaymentValueElement.textContent = "$" + (js_vars.myPayoff + 12).toFixed(2);

			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(true);
			graph_to_show.updateFunctionValues(initialLoad=true);
			sliderElement.disabled = true;

		}

	</script>

{{ endblock }}