{% 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;}
.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;}
.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;
    background:#b0b0b0;border:1px solid #999;
    transition:background .15s,border-color .15s;
}
.place:hover{ background:#9a9a9a; }
.place .hidden-marker{ font-size:1.2rem;font-weight:700;color:#fff;pointer-events:none; }
.place .payoff-val{ display:none;font-size:1.0rem;color:#333;pointer-events:none; }

/* 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{ display:block; }

.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;}
.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 input 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 Mango or Avocado in the box below to select the orchard you want to plant 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. 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 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">

    <!-- Zone choice input box -->
    <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>

    {% 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>
            {% 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>
            {% 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>
            {% 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>
            {% endfor %}
          </div>
        </div>
    {% endif %}

    <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 %}