{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
Decision
{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
}
.form-check-input {
    position: relative;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto
}
.col-form-label {
    font-weight:bold;
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.highcharts-figure, .highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 400px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
.highcharts-title{
    font-weight: bold;
}
</style>
{% endblock %}

{% block content %}
<div class="card info">
    <p>
        In a previous study, participants were given the choice we described to you before: whether to take 5 points from the charities,
        leave the allocation unchanged, or give 5 points to the charity.
    </p>
    <p>
        We have randomly chosen ten individuals who have participated in that study. Below, you see how those ten individuals decided.
    </p>
</div>
<br>
<div style="width: 100%; display: table;">
    <div style="display: table-row">
        <div class="card info" style="width: 60%; display: table-cell;">
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <figure class="highcharts-figure">
                <div id="container"></div>
                    <p class="highcharts-description">
                        <span style="font-size: 15px"> Chart showing distribution of choices among ten randomly selected participants </span>
                    </p>
            </figure>
        </div>
        <div class="card info" style="display: table-cell;vertical-align: top;">
            <p>
                You and the charities have an initial endowment of 10 points each.
            </p>
            <p>
                You are given three choices to re-allocate points between you and the charities:
            </p>
            <strong> 1) Give 5 points from yourself to the charity </strong>
            <ul>
                <li> Outcome: 5 points for yourself and 15 points for the charity. </li>
            </ul>

            <strong> 2) No change; leave allocation as it is </strong>
            <ul>
                <li> Outcome: 10 points for yourself and 10 points for the charity. </li>
            </ul>
            <strong> 3) Take 5 points from the charity for yourself </strong>
            <ul>
                <li> Outcome: 15 points for yourself and 5 for charity </li>
            </ul>
            {% formfield player.charity_decision_full_give %}
        </div>
    </div>
</div>
<div class="card info">
    <p>
        <strong>Final Allocation:</strong> You will have <span id="InputSelf" style="display:inline-block; line-height:35px; float: none; height:45px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#D3D3D3"> &nbsp </span>
        points and the charity will have <span id="InputCharity" style="display:inline-block; line-height:35px; float: none; height:45px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#D3D3D3"> &nbsp </span>
        points.
    </p>
</div>
<br><br>
<div style="display:inline-block; margin:0; float: left;"> </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="GroupChoices_time" id="GroupChoices_time" step="0.000001">
<input type="hidden" name="group_give_count" id="group_give_count" step="1">
<input type="hidden" name="group_statusquo_count" id="group_statusquo_count" step="1">
<input type="hidden" name="group_take_count" id="group_take_count" step="1">

{% endblock %}

{% block scripts %}
<script>
var startTime;
var give_count = {{ give_count }};
var statusquo_count = {{ statusquo_count }};
var take_count = {{ take_count }};

$(document).ready(function() {
    startpage_time = Date.now();
});

function endPage() {
    var endpage_time = Date.now();
    page_time = (endpage_time - startpage_time)/1000;
    document.getElementById('GroupChoices_time').value=page_time;
    document.getElementById('group_give_count').value=give_count;
    document.getElementById('group_statusquo_count').value=statusquo_count;
    document.getElementById('group_take_count').value=take_count;
};
$('#id_charity_decision_full_take_0').change(function () {
    document.getElementById('InputSelf').innerHTML = 15;
    document.getElementById('InputCharity').innerHTML = 5;
        });
$('#id_charity_decision_full_take_1').change(function () {
    document.getElementById('InputSelf').innerHTML = 10;
    document.getElementById('InputCharity').innerHTML = 10;
        });
$('#id_charity_decision_full_take_2').change(function () {
    document.getElementById('InputSelf').innerHTML = 5;
    document.getElementById('InputCharity').innerHTML = 15;
        });
$('#id_charity_decision_full_give_0').change(function () {
    document.getElementById('InputSelf').innerHTML = 15;
    document.getElementById('InputCharity').innerHTML = 5;
        });
$('#id_charity_decision_full_give_1').change(function () {
    document.getElementById('InputSelf').innerHTML = 10;
    document.getElementById('InputCharity').innerHTML = 10;
        });
$('#id_charity_decision_full_give_2').change(function () {
    document.getElementById('InputSelf').innerHTML = 5;
    document.getElementById('InputCharity').innerHTML = 15;
        });

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '<span style="font-size: 20px"> Distribution of Choices </span>',
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        type: 'category',
        labels: { style: {
			                fontSize: '15px',
			                color: '#000000'
		        }
	}
    },
    yAxis: {
        title: {
            text: '<span style="font-size: 15px"> Count </span>'
        },
                labels: { style: {
			                fontSize: '15px',
			                color: '#000000'
		        }
	}

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: false,
                format: '{point.y1:.0f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y1:.0f}%</b> of total<br/>'
    },

    series: [
        {
            name: "Choices",
            colorByPoint: false,
            data: [
                {
                    name: "Give to Charity",
                    drilldown: null,
                    y: give_count,
                    y1: give_count*10
                },
                {
                    name: "No Change",
                    drilldown: null,
                    y: statusquo_count,
                    y1: statusquo_count*10
                },
                {
                    name: "Take from Charity",
                    drilldown: null,
                    y: take_count,
                    y1: take_count*10
                }
            ]
        }
    ],
credits:{
	enabled: false
}

});
</script>
{% endblock %}