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


{% block title %}
<div class="var_title">入札ステージ
    <span class="var_title" style="font-size:medium;">
    （第{{ subsession.round_number }}回、参加者{{ group.num_of_group }}人）
    </span>
</div>
{% endblock %}

{% block content %}
<br>
<SCRIPT LANGUAGE="JavaScript">
function read_TextArea (form) {
  target = document.getElementById("output");
  target.innerText = form.bid_amount.value;
}

  // Disable "Enter" key to prevent submitting the form accidentally
  $('html').bind('keypress', function(e) {
     if(e.keyCode === 13 || e.key == 'Enter') {
        return false;
     }
  });
</SCRIPT>



<p>・誰も即決価格で落札しなかったので、入札を行います。<BR>
    ・あなたが落札した場合、2番目に高い入札額を支払います。<br><br>
    {% if player.time_discount_rate < 1 %} 
        <p>・<span class="red">あなたの評価値は{{ player.discounted_private_value }}</span>に下がりました。</p>
    {% else %}
        <p>・<span class="red">あなたの評価値は{{ player.discounted_private_value }}</span>のままです。</p>
    {% endif %}
    ・あなたが落札した場合の利益は、以下のとおりです。</p>   
    <table class="table" style="width: 500px">
        <tr><td></td> </tr>
        <tr>
            <td>　評価値（<span class="red">{{ player.discounted_private_value }}</span>） ー 2番目に高い入札額</td>
        </tr>

    </table><br>

<p>
    ・では入札額を決めてください。（残り<span>{{ timer_text }}
      <span class="otree-timer__time-left"></span>
      </span>）
</p>
{{ formfield 'bid_amount' }}

<button class="btn-primary" type = "button" onClick="read_TextArea(this.form)" data-bs-toggle="modal" data-bs-target="#exampleModal">決定</button>
{% comment %} type = "button"を加えると送信ボタンではなくなる{% endcomment %}



<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">確認</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p><span class="red">入札額は<span id="output"></span>円</span>で間違いありませんか？</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary">OK</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">入札をやり直す</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}