{% 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>
/* ========== GLOBAL LAYOUT & TYPOGRAPHY ========== */
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;}

/* ========== CARD CONTAINER ========== */
.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;
}

/* ========== ZONES ========== */
.zone{
    position:relative;margin-bottom:14px;background:#f1f1f1;padding:12px;
    border-radius:6px;border:1px solid #ddd;
}
.zone-title{
    position:absolute;top:-10px;left:50%;transform:translateX(-50%);
    background:#fff;padding:3px 10px;font-size:.9rem;font-weight:700;
    border:1px solid #ddd;border-radius:20px;
}

/* ========== GRID ========== */
.map{
    display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(2,1fr);
    gap:5px;margin-top:10px;
}

/* ========== CELLS ========== */
.place{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    height:48px;border-radius:4px;font-size:.85rem;font-weight:500;
    position:relative;cursor:pointer;
    /* Hidden state */
    background:#b0b0b0;border:1px solid #999;
    transition:background .15s,border-color .15s;
}
.place:hover{ background:#9a9a9a; }

/* The "?" shown before reveal */
.place .hidden-marker{
    font-size:1.2rem;font-weight:700;color:#fff;pointer-events:none;
}

/* Content hidden until revealed */
.place .payoff-val,
.place .tag{
    display:none;pointer-events:none;
}
.place .payoff-val{ font-size:1.0rem;color:#333; }
.place .tag       { font-size:.8rem;font-weight:400;color:#333; }

/* Revealed state */
.place.revealed{
    background:#e1e1e1;border:1px solid #ccc;cursor:default;
}
.place.revealed:hover{ background:#e1e1e1; }
.place.revealed .hidden-marker{ display:none; }
.place.revealed .payoff-val,
.place.revealed .tag{ display:block; }

/* Plain green cell — always visible, no click */
.green-cell{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    height:48px;border-radius:4px;font-size:.85rem;font-weight:500;
    background:#28a745;border:2px solid #1e7e34;cursor:default;
}

/* purple CONTINUE */
.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';
    }

    // Reveal on click + log to server
    let clickOrder = 0;
    document.querySelectorAll('.place').forEach(cell => {
        cell.addEventListener('click', function() {
            if (!this.classList.contains('revealed')) {
                this.classList.add('revealed');
                clickOrder++;
                liveSend({
                    tag:       this.dataset.tag,
                    zone:      this.dataset.zone,
                    payoff:    this.querySelector('.payoff-val') ? this.querySelector('.payoff-val').textContent.trim() : '',
                    timestamp: new Date().toISOString(),
                    order:     clickOrder
                });
            }
        });
    });

    // Restore typed initials if form had a validation error
    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.-->
<!--    Below you can see two grids - one for each orchard type. Each cell in a grid represents a farmer who planted that orchard.-->
<!--    Click any cell to reveal the profit (in pence) that farmer made.-->
<!--    Type the two-letter initials of the farmer you wish to imitate in the box below and press Continue.-->
<!--    <p>Historically, the profit from Mango orchards is about 19 with certainty. For Avocado orchards,-->
<!--    95% of farmers earned around 14, while the remaining 5% earned 114.</p>-->
<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. Note that the government encourages Avocado farming by reimbursing equipment
costs to one randomly selected Avocado farmer each year, resulting in a significantly higher return
on their £1 investment for that year.</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% were
the lucky recipients of the government reimbursement that year and earned between 113 and 115 pence per £1 invested.</p>

<p>Below you can see two grids — one for each orchard type. Each cell in a grid represents a farmer
who planted that orchard. Click any cell to reveal the yield (in pence) that farmer earned per £1
invested. Type the <strong>two-letter initials</strong> of the farmer you wish to imitate in the
box below 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">

    <!-- Initials input box -->
    <div style="margin:12px 0;">
        <label><strong>Farmer initials:&nbsp;</strong></label>
        <input type="text" id="typed_tag" maxlength="2"
               style="width:60px;text-transform:uppercase;font-size:1rem;padding:4px 6px;border:1px solid #ccc;border-radius:4px;"
               oninput="typedChanged(this.value)">
        <span style="font-size:.85rem;color:#777;">(two capital letters)</span>
    </div>

    <!-- ZONES (randomized order) -->
    {% if zone_order == 'AB' %}
        <div class="zone">
          <div class="zone-title">Mango</div>
          <div class="map">
            {% for index, pay, tag in values_with_indices_a %}
              <div class="place" data-tag="{{ tag }}" data-zone="A">
                <span class="hidden-marker"></span>
                <div class="payoff-val">{{ pay }}</div>
                <div class="tag">{{ tag }}</div>
              </div>
            {% endfor %}
          </div>
        </div>

        <div class="zone">
          <div class="zone-title">Avocado</div>
          <div class="map">
            {% for index, pay, tag in values_with_indices_b %}
              <div class="place" data-tag="{{ tag }}" data-zone="B">
                <span class="hidden-marker"></span>
                <div class="payoff-val">{{ pay }}</div>
                <div class="tag">{{ tag }}</div>
              </div>
            {% endfor %}
          </div>
        </div>
    {% else %}
        <div class="zone">
          <div class="zone-title">Avocado</div>
          <div class="map">
            {% for index, pay, tag in values_with_indices_b %}
              <div class="place" data-tag="{{ tag }}" data-zone="B">
                <span class="hidden-marker"></span>
                <div class="payoff-val">{{ pay }}</div>
                <div class="tag">{{ tag }}</div>
              </div>
            {% endfor %}
          </div>
        </div>

        <div class="zone">
          <div class="zone-title">Mango</div>
          <div class="map">
            {% for index, pay, tag in values_with_indices_a %}
              <div class="place" data-tag="{{ tag }}" data-zone="A">
                <span class="hidden-marker"></span>
                <div class="payoff-val">{{ pay }}</div>
                <div class="tag">{{ tag }}</div>
              </div>
            {% endfor %}
          </div>
        </div>
    {% endif %}

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

<script>
const TAG2ZONE = {
    'KF':'A','DL':'A','TJ':'A','QS':'A','BP':'A','ZM':'A',
    'HR':'A','VC':'A','NW':'A','GL':'A','EX':'A','UY':'A',
    'JB':'A','SO':'A','PK':'A','RA':'A','LM':'A','FD':'A',
    'QT':'A','CX':'A',
    'HV':'B','AB':'B','PO':'B','MI':'B','RU':'B','CY':'B',
    'TZ':'B','EG':'B','KB':'B','DS':'B','LN':'B','WI':'B',
    'QF':'B','SM':'B','JO':'B','VB':'B','CP':'B','UA':'B',
    'NK':'B','GD':'B'
};

function typedChanged(v) {
    v = (v || '').toUpperCase();
    document.getElementById('typed_tag').value = v;
    if (v.length === 2 && TAG2ZONE[v]) {
        document.getElementById('chosen_initials').value = v;
        document.getElementById('choice_val').value = TAG2ZONE[v];
    } else {
        document.getElementById('chosen_initials').value = '';
        document.getElementById('choice_val').value = '';
    }
}
</script>
{% endblock %}