{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}
{% load index %}

{% block title %}
	Auction Type: {{treatment}} <br>
	University {{subsession.round_number}}, Department {{i}}
	<p style="color:Red;"> Your Cost: &#36;{{cost}} </p>
{% endblock %}

{% block scripts %}
	<!-- or reference a static file -->
	<script language="javascript" type="text/javascript" src="{% static 'auction_nps/plotly-latest.min.js'%}"></script>
	<style>
	/*div.well {
		display: none;
	}*/
	div.game {
		background-color: white;
		color: black;
		margin: 0px 0px 0px 0;
		padding: 0px;
	}
	.decisions {margin: 0 0px 100px 0;}
	.btn btn-primary btn-large{margin: 50 50px 0 0;}
	</style>
 {% endblock %}

{% block content %}

	{% if i == 0 %}

	{% else %}
		<table id=myTable style="width:40%" align="right" border=2>
		<caption> Bidding information from previous departments</caption>
		  <tr>
			<th>Dept.</th>
			<th>Cost</th>
			<th>Your Bid</th>
			<th>Winning Bid </th>
			<th>Result </th>
			<th>Company Profit</th>
		  </tr>

		{% for j in i_prev %}
		  <tr>
			<th>{{ forloop.counter }}</th>
			<th>{{ player.cost }}</th>
			<th>{{ previous_bids|index:forloop.counter0 }}</th>
			<th>{% if subsession.treatment == 1 %} -- {% else %} {{ previous_winning_bids|index:forloop.counter0 }} {% endif %} </th>
            <th > {{ previous_results|index:forloop.counter0 }}</th>
			<th> <p style="color:Red;">{{ previous_profits|index:forloop.counter0 }}</p></th>
		  </tr>
		{% endfor %}
		</table>

	{% endif %}

<div class="game"  id="tester" style="width:500px;height:350px;"></div>

<input type="hidden" name="bid{{ i }}" value=0>
<font face='arial' size='5'> How much do you want to bid? Input here:  </font><input type="number" name="bid{{ i }}" step="0.1" min="{{cost}}" max="100" value=""> <br>

<script type="text/javascript">
window.onload = function () {
	TESTER = document.getElementById('tester');
			
	var trace_bids = {
		x: {{i_prev}},
		y: {{previous_bids}}, 
		line: {width: 0.5},
		marker: {symbol: "circle", color: "green", size:"10", width:1}, 
		mode: "lines+markers", 
		name: "Your previous bids", 
		type: "scatter"
	};

	var trace_win = {
		x: {{i_prev}},
		y: {{previous_winning_bids}},
		mode: 'markers',
		marker:{symbol: "x", color:"red", size:"10"},
		name: 'Previous winning bids',
		type: 'scatter'
	};
	N = {{Constants.n_periods}}
	c = {{player.cost}}
	var trace_cost = {
		x: Array.from({length: N}, (v, k) => k+1) ,
		y: Array.from({length: N}, (v, k) => c),
		// fill: "tonexty", 
		//    fillcolor: "rgba(68, 68, 68, 0.3)", 
		line: {color: "rgb(31, 119, 180)"}, 
		mode: "lines", 
		name: "Your cost", 
		type: "scatter"
	};

	var data = [trace_bids,trace_win, trace_cost];
	var layout = {
		showlegend: true,
		legend: {y:-0.3,"orientation":"h", font:{size:20}}, 
		xaxis: {title: "Department", range: [1-0.5, N+0.6], showgrid: true, 'tickformat': ',d'},
		yaxis: {title: "Dollars ($)", range: [0, 100], showgrid: true, },
		margin: { t: 10, r:10, pad: 4 },
	};
	Plotly.plot( TESTER, data, layout);
};
</script>

<input class="btn btn-primary btn-large" type="submit" value="Next Department">

{% endblock %}