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

{% block scripts %}
    <script type="text/javascript">
        window.onload = function () 
        {
            document.getElementById('arrive_time').value = (new Date()).toISOString()
            document.getElementById('mode').value = {{ mode | json }}
            document.getElementById('rebate').value = {{ rebate | json }}
            document.getElementById('charity').value = {{ charity | json }}
            calc_money_kept()
        }

        calc_money_kept = function() {
            let donated = 0
            if (document.getElementById('donated_yes').checked == true)
                donated = document.getElementById('donated').value
            document.getElementById('donated_submit').value = donated
            console.log(donated)
	        let recorded_exit_fee = {{ exit_fee | json }}.toFixed(2)
            if (recorded_exit_fee == 0)
                document.getElementById('exit_choice_hidden').checked = true
            else if (recorded_exit_fee != 0 && document.getElementById('exit_yes').checked == false) {
                recorded_exit_fee = 0
            }
            document.getElementById('exit_amount').value = recorded_exit_fee
            let rebate_rate = {{ rebate | json }}
	        let mode = {{ mode | json }}
	        let rebate = {{ rebate | json }} / 100 * donated
	    	rebate_shown=rebate.toFixed(2)
            document.getElementById('disp_rebate').innerHTML = '$' + rebate.toFixed(2)
            total_cash_left = {{ total_cash_available }} - donated + rebate - recorded_exit_fee
            document.getElementById('total_cash_left').innerHTML = '$' + total_cash_left.toFixed(2)
            document.getElementById('kept').value = {{ total_cash_available }} - donated - recorded_exit_fee
            if (donated > 0) {
                document.getElementById('message').style.visibility = 'visible'
		        let basemsg = `"We want to thank <font color=#4b82c1>@[Your Name]</font> for donating <b>\$${donated}</b> to ${ {{ charity | json }} }`
			let basemsg2=`"We want to thank you for donating <b>\$${donated}</b> to ${ {{ charity | json }} }`
			<!-- let basemsg1=`, with the LEEPS Lab offering you a \$${rebate} rebate!` -->
		        let basemsg1=`. <font color=#4b82c1>@[Your Name]</font> received a <b>${ rebate_rate }%</b> (<b>\$${rebate_shown}</b>) 
					rebate from the LEEPS Lab!"`
			let basemsg4=`. You received a <b>${ rebate_rate }%</b> (<b>\$${rebate_shown}</b>)
                                        rebate from the LEEPS Lab!"`
                if (mode == 'Public' && rebate_rate != 0 & recorded_exit_fee == 0)
                    msg = 'We will tag you in the following post on LEEPS FB page (<b>visible to everyone</b>):\n' +
			        basemsg + basemsg1
                else if (mode == 'Public' && (rebate_rate == 0 || recorded_exit_fee != 0))
		            msg = 'We will tag you in the following post on LEEPS FB page (<b>visible to everyone</b>):\n'+
			        basemsg +'!"'
		        else if (mode == 'Private' && rebate_rate != 0)
		            msg = 'The following message will be displayed on your computer screen (<b>only visible to you</b>):\n' 
			        + basemsg2 + basemsg4
		        else 
		            msg = 'The following message will be displayed on your computer screen (<b>only visible to you</b>):\n' 
			        + basemsg2 + '!"'
                document.getElementById('message').innerHTML = msg
            }
            else
                document.getElementById('message').style.visibility = 'hidden'
	        if ( mode == 'Public' && recorded_exit_fee == 0)
		        instruction = 'Your decision with rebate info will be posted on <b>LEEPS FB page</b>.'
	        else if ( mode == 'Public' && recorded_exit_fee != 0)
			instruction = 'Your decision without rebate info will be posted on <b>LEEPS FB page</b>.'
		else if (mode == 'Private')
		        instruction='Your decision with rebate will be shown on <b>your own screen</b>.'
	        document.getElementById('instruction').innerHTML=instruction
        }

        visible_number_input = function(v) {
            document.getElementById('donated').style.visibility = v
            document.getElementById('message').style.visibility = v
            if (v == 'hidden') {
                document.getElementById('donated_submit').value = 0 
                document.getElementById('exit_choice_hidden').checked = true
                if ({{ exit_fee | json }} > 0) {
                    document.getElementById('exit_no').checked = false
                    document.getElementById('exit_no').disabled = true
                    document.getElementById('exit_yes').checked = false
                    document.getElementById('exit_yes').disabled = true
                }
            }
            else {
                document.getElementById('donated_submit').value = null
                document.getElementById('donated').value = null 
                if ({{ exit_fee | json }} > 0) {
                    document.getElementById('exit_yes').disabled = false
                    document.getElementById('exit_no').disabled = false
                }
            }
            calc_money_kept()
        }
    </script>
{% endblock %}

{% block title %}
Decision {{ round_num }} - <b>{{ mode }}</b> with <b>{{ rebate }}%</b> Rebate
{% endblock %}

{% block styles %}
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
    .otree-title {
        color: #4b82c1;
    }
</style>
{% endblock %}

{% block content %}
    {{ form.exit_choice.errors }} 
    {{ form.money_donated.errors }}
    {{ form.exit_amount.errors }}
    {{ form.donated_yes_no.errors }}
    {{ form.exit_choice_available.errors }}
    <div>
        <!-- form fields for all metadata (not directly collected from players) -->
        <input type="hidden" name="time_Decision" id="arrive_time"/>
        <input type="hidden" name="mode" id="mode"/>
        <input type="hidden" name="rebate" id="rebate"/>
        <input type="hidden" name="charity_dec" id="charity"/> 
        <input type="hidden" name="money_donated" id="donated_submit">
        <input type="hidden" name="money_kept" id="kept"/>
    	<input type="hidden" name="exit_amount" id="exit_amount"/>
    	<input type="hidden" name="exit_choice_available" id="exit_choice_available" value="{{ player.exit_choice_available }}"/>
        <input name="exit_choice" id="exit_choice_hidden" type="radio" style="display: none;" value=0>
        
    </div>
    <div>
	{% if exit_fee != 0 %}
	<h5>
	You have the option to <b>NOT</b> announce the rebate you received in the FB post
	</h5>
	{% endif %}
	<h5> 
	 <font color=#4b82c1>You have $10 in your cash account (${{ Constants.participation_fee  }}
                    participation fee + ${{ player.endowment }} from counting task).</font>	
        </h5>
	<table>
            <tr>
                <th>Total Cash Available</th>
                <th>Would you like to donate any to the charity?</th>
		        {% if exit_fee != 0 %}
                <th>Would you like us to not announce the rebate you received in the FB post?</th>
                {% endif %}
                <th>{{ rebate }}% rebate cash back in your account</th>
                <th>Total cash left in your account now (including rebate)</th>
            </tr>
            <tr>
                <td rowspan="3"><b>${{ total_cash_available }}</b> (${{ Constants.participation_fee  }}
                    participation fee + ${{ player.endowment }} from task)</td>
                <td><input type="radio" name="donated_yes_no" id="donated_yes" value="1" 
                        onclick="visible_number_input('visible')"/> 
                    <b>Yes</b>: choose between $1 to $10:
                    <input type="number" id="donated" max=10 min=1
                        style="width: 30px; visibility: hidden" oninput="calc_money_kept()"/>
                    <dr>
		        <p id="instruction"></p>
		        </td>
                {% if exit_fee != 0 %}
		        <td>
		            <input type="radio" name="exit_choice" id="exit_yes" value="1"
                        onclick="calc_money_kept()"/>
                    <b>Yes</b>: we will deduct ${{exit_fee}} from your personal account
		        </td>
                {% endif %}
		        <td rowspan="3" id="disp_rebate"></td>
                <td rowspan="3" id="total_cash_left"></td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="donated_yes_no" id="donated_no" value="0"
                    onclick="visible_number_input('hidden')"/>
                    <b>No:</b> $0. Your decision will <b>NOT</b> be posted.
                </td>
                {% if exit_fee != 0 %}
            	<td><input type="radio" name="exit_choice" id="exit_no" value="0"
                    onclick="calc_money_kept()"/>
                    <b>No</b>
		        </td>
                {% endif %}
	        </tr>
        </table>
    </div>
    <div>
        <p id="message"></p>
    </div>
    <div>
        <button id="submit" class="btn btn-primary btn-large next-button" 
            style="float: right;" onclick="calc_money_kept()">Submit Decision</button>
    </div>

{% endblock %}


{% comment %}

{% endcomment %}