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

{% block head %}
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
html,body{margin:0;padding:0;width:100%;height:100%;font-family:'Open Sans',sans-serif;color:#333;background:#f7f7f7;overflow:hidden;}
strong{font-weight:600;}
.map-container{background:#fff;border-radius:6px;box-shadow:0 0 15px rgba(0,0,0,.1);width:90%;max-width:900px;padding:12px;margin:auto;}
.btn-container{position:fixed;bottom:80px;right:150px;z-index:1000;}
.btn.btn-primary{background:linear-gradient(45deg,#7f00ff,#e100ff);border:none;padding:.5rem 1rem;font-size:.9rem;font-weight:700;color:#fff;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.5);}
.btn.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(0,0,0,.7);}
</style>

<script>
document.addEventListener('DOMContentLoaded',()=>{
    if(document.querySelector('.otree-form-errors, .alert-danger')){
        document.documentElement.style.overflow='auto';
        document.body.style.overflow='auto';
    }

    const hiddenVal = document.getElementById('chosen_initials').value;
    if (hiddenVal) {
        document.getElementById('typed_tag').value = hiddenVal;
        typedChanged(hiddenVal);
    }
});
</script>
{% endblock %}

{% block content %}
<p>You are a farmer deciding which orchard to plant, with the choice affecting your bonus payment for this experiment.
You can choose between a <strong>Mango</strong> orchard and an <strong>Avocado</strong> orchard.
    Your bonus payment will be the yield on a £1 investment in the orchard you choose.</p>

<p>Historically, the return from Mango orchards is between 18 and 20 pence per £1 invested. For Avocado orchards,
    95% of farmers earned between 13 and 15 pence per £1 invested, while the remaining 5% earned between 113 and 115 pence per £1 invested.
    Type Mango or Avocado in the box below to select the orchard you want to plant and press Continue.</p>

<div class="map-container">
<form method="post">
    {{ formfield_errors 'chosen_initials' }}
    <input type="hidden" name="chosen_initials" id="chosen_initials">
    <input type="hidden" name="choice_val"      id="choice_val">

    <div style="margin:12px 0;">
        <label><strong>Your choice:&nbsp;</strong></label>
        <input type="text" id="typed_tag" maxlength="7"
               style="width:110px;font-size:1rem;padding:4px 6px;border:1px solid #ccc;border-radius:4px;"
               oninput="typedChanged(this.value)">
        <span style="font-size:.85rem;color:#777;">(type Mango or Avocado)</span>
    </div>

    <div class="btn-container">
      <button type="submit" class="btn btn-primary">Continue</button>
    </div>
</form>
</div>

<script>
function typedChanged(v) {
    const norm = (v || '').trim().toLowerCase();
    document.getElementById('typed_tag').value = v;
    if (norm === 'mango') {
        document.getElementById('chosen_initials').value = 'MANGO';
        document.getElementById('choice_val').value = 'A';
    } else if (norm === 'avocado') {
        document.getElementById('chosen_initials').value = 'AVOCADO';
        document.getElementById('choice_val').value = 'B';
    } else {
        document.getElementById('chosen_initials').value = '';
        document.getElementById('choice_val').value = '';
    }
}
</script>
{% endblock %}