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

{% block styles %}
<style>
  .decision-wrap { max-width: 980px; margin: 0 auto; font-size: 18px; line-height: 1.6; }
  .title { text-align:center; margin: 16px 0 6px; font-weight: 700; font-size: 24px; }
  .charts-row { display: flex; justify-content: center; margin-top: 20px; }
  .chart-box { width: 360px; text-align:center; }
  .chart-caption { margin-top: 8px; font-weight:600; }
  .options { display: flex; justify-content: center; gap: 40px; margin-top: 28px; }
  .options label { font-size: 20px; font-weight: 600; }
  .btn-row { text-align:center; margin-top: 26px; }
</style>
{% endblock %}

{% block title %}Part 4{% endblock %}

{% block content %}
<div class="decision-wrap">
  <div class="title">Task 1: Choosing between two boxes with purple and yellow balls</div>
  <p style="text-align:center;">{{ round_text|safe }}</p>

  <div class="charts-row">
    <div class="chart-box">
      <div id="unknown_pie"></div>
      <div class="chart-caption">Choice U<br>(15: ?%, 0: ?%)</div>
    </div>
    <div class="chart-box">
      <div id="known_pie"></div>
      <div class="chart-caption">Choice K<br>(15: {{ win_percent }}%, 0: {{ lose_percent }}%)</div>
    </div>
  </div>


  <form method="post">
    <div class="options">
      <label><input type="radio" name="choice" value="U" required> Choice U</label>
      <label><input type="radio" name="choice" value="I"> Indifferent</label>
      <label><input type="radio" name="choice" value="K"> Choice K</label>
    </div>
    <div class="btn-row"><button type="submit" class="btn btn-primary">Next</button></div>
  </form>
</div>
{% endblock %}


{% comment %}
{% block scripts %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
(function(){
  const purple = {{ known_purple_percent }};
  const yellow = {{ known_non_purple_percent }};
  const PIE_SIZE = 260;

  // Known 餅圖
  Highcharts.chart('known_pie',{
    chart:{type:'pie'},
    title:{text:''},
    credits:{enabled:false},
    tooltip:{enabled:false},
    accessibility:{ enabled:false },          // 关掉无障碍，避免默认文字
    plotOptions:{
      pie:{
        dataLabels:{ enabled:false },         // 不显示图上标签
        showInLegend:false,
        size: PIE_SIZE,
        borderWidth:0
      }
    },
    series:[{ data:[
      {name:'Purple', y:purple, color:'purple'},
      {name:'Yellow', y:yellow, color:'yellow'}
    ]}]
  });

  // Unknown 餅圖
  Highcharts.chart('unknown_pie',{
    chart:{type:'pie'},
    title:{text:''},
    credits:{enabled:false},
    tooltip:{enabled:false},
    accessibility:{ enabled:false },          // 关掉无障碍，避免默认文字
    plotOptions:{
      pie:{
        dataLabels:{ enabled:false },         // 不显示图上标签
        showInLegend:false,
        size: PIE_SIZE,
        borderWidth:0
      }
    },
    series:[{ data:[{y:100,color:'lightgray'}] }]
  });
})();
</script>
{% endblock %}
{% endcomment %}

{% block scripts %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
(function(){
  const purple = {{ known_purple_percent }};
  const yellow = {{ known_non_purple_percent }};
  const PIE_SIZE = 260;

  // 只显示紫色标签
   const purpleOnlyLabel = {
    enabled: true,
    distance: 18,
    softConnector: true,
    allowOverlap: true,
    crop: false,
    useHTML: true,
    style: { fontWeight: '600', color: '#000', textOutline: 'none' },
    formatter: function () {
      return (this.point && this.point.name === 'Purple') ? 'Purple' : null;
    }
  };

  // Known：两色
  Highcharts.chart('known_pie', {
  chart: {
    type: 'pie',
    spacingRight: 60,        // ← 给右侧多留一点空白，防止剪裁
    animation: false,              // 关掉图表层面的入场动画
    events: {
      load: function () { this.reflow(); }
    }
  },
  title: { text: '' },
  credits: { enabled: false },
  tooltip: { enabled: false },
  accessibility: { enabled: false },
  plotOptions: {
    series: {
      animation: false,            // 关掉序列入场动画
      enableMouseTracking: false,  // 彻底关闭鼠标交互（可选）
      states: {
        hover: { enabled: false }, // 关闭悬停动画/高亮
        inactive: { opacity: 1 }   // 悬停时不让其它扇区变暗
      }
    },
    pie: {
      size: 260,
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        distance: 18,
        softConnector: true,
        allowOverlap: true,   // ← 允许重叠
        crop: false,          // ← 不要裁切
        useHTML: true,
        connectorPadding: 8,  // ← 连线与文字间距，避免顶边
        style: {
          fontWeight: '600',
          color: '#000',
          textOutline: 'none',
          whiteSpace: 'nowrap' // ← 防止换行导致被截
        },
        formatter: function () {
          return (this.point && this.point.name === 'Purple') ? 'Purple' : null;
        }
      }
    }
  },
  series: [{
    data: [
      { name: 'Purple', y: {{ known_purple_percent }}, color: 'purple' },
      {                y: {{ known_non_purple_percent }}, color: 'yellow' }
    ]
  }]
});


  // Unknown：整块灰（无标签）
  Highcharts.chart('unknown_pie', {
    chart: { type:'pie' },
    title: { text:'' },
    credits: { enabled:false },
    tooltip: { enabled:false },
    accessibility: { enabled:false },
    plotOptions: {
      series: {
      animation:false,
      enableMouseTracking:false,
      states:{ hover:{ enabled:false }, inactive:{ opacity:1 } }
        },
      pie: {
        size: PIE_SIZE,
        dataLabels: { enabled:false },
        showInLegend: false,
        borderWidth: 0
      }
    },
    series: [{ data: [{ y:100, color:'lightgray' }] }]
  });

  // 双保险：强制必选
  for (const r of document.querySelectorAll('input[type=radio]')) r.required = true;
})();
</script>
{% endblock %}