{{ extends 'global/Page.html' }}
{{ block title }}運用成績{{ endblock }}

{{ block content }}

<div class="alert alert-primary" role="alert">
<table class="table table-borderless" style="table-layout:fixed;">
  <tbody>
    <tr>
      <td><font size="5">正味運用益 = 合計実現損益 + 評価損益額 − 借金 × 5%</font></td>
    </tr> 
    <tr>
      <td><font size="5">　　　　　 = <span id="id_netGain"></span></font></td>
    </tr>
    <tr>
      <td><font size="5">日時(B)で本ゲームを完了した人の中での順位：<span id="id_rank"></span><span id="id_completed"></span></font></td>
    </tr>
    <tr>
      <td><font size="5">日時(B)の暫定1位との差額：<span id="id_gap"></span></font></td>
    </tr>
  </tbody>
</table>
</div>

<div class="space"></div>
<div class="info">
<table class="table table-borderless" style="table-layout:fixed;">
  <tbody>
    <tr>
      <td><font size="5" id="id_contract"></font></td>
    </tr>
  </tbody>
</table>

<table class="table table-borderless" style="table-layout:fixed;">
  <tbody>
    <tr>
      <td width="30%"><font size="5">資金：</font><font size="5" id="id_money"></font></td>
      <td width="30%"><font size="5">借金：</font><font size="5" id="id_debt"></font></td>
      <td width="40%"><font size="5">合計実現損益：</font><font size="5" id="id_totalRealize"></font></td>
    </tr>
  </tbody>
</table>

<table class="table table-hover" style="table-layout:fixed;">
  <thead>
    <tr align="center">
      <th scope="col"><font size="4">ポジション</font></th>
      <th scope="col"><font size="4">建玉数量</font></th>
      <th scope="col"><font size="4">平均建値</font></th>
      <th scope="col"><font size="4">建玉金額合計</font></th>
      <th scope="col"><font size="4">時価評価額</font></th>
      <th scope="col"><font size="4">評価損益額</font></th>
      <th scope="col"><font size="4">評価損益率</font></th>
    </tr>
  </thead>
  <tbody>
    <tr id="opening" align="center">
      <td><font size="4" id="id_position"></font></td>
      <td><font size="4" id="id_open"></font></td>
      <td><font size="4" id="id_aveQuote"></font></td>
      <td><font size="4" id="id_amount"></font></td>
      <td><font size="4" id="id_value"></font></td>
      <td><font size="4" id="id_gain"></font></td>
      <td><font size="4" id="id_rate"></font></td>
    </tr>
  </tbody>
</table>

<table class="table table-hover" style="table-layout:fixed;">
  <thead>
    <tr align="center">
      <th scope="col"><font size="4">反対取引</font></th>
      <th scope="col"><font size="4">実現損益</font></th>
      <th scope="col"><font size="4">返済数量</font></th>
      <th scope="col"><font size="4">決済額</font></th>
      <th scope="col"><font size="4">返金額</font></th>
    </tr>
  </thead>
  <tbody>
    <tr id="closing" align="center">
      <td><font size="4" id="id_reverse"></font></td>
      <td><font size="4" id="id_realize"></font></td>
      <td><font size="4" id="id_close"></font></td>
      <td><font size="4" id="id_settle"></font></td>
      <td><font size="4" id="id_refund"></font></td>
    </tr>
  </tbody>
</table>
</div>

<div style="line-height: 200%">
<font size="4">
<div class="explanation" id="experiment"></div>
</font>
</div>

<script>
let current = js_vars.current
const endowment = js_vars.endowment       

let prePosition = js_vars.prePosition
let preAction = js_vars.preAction
let volume = js_vars.volume

let money = js_vars.money
let debt = js_vars.debt

let position = js_vars.position
let open = js_vars.open
let aveQuote = js_vars.aveQuote
let amount = js_vars.amount
let value = js_vars.value
let gain = js_vars.gain
let rate = js_vars.rate

let reverse = js_vars.reverse
let realize = js_vars.realize
let close = js_vars.close
let settle = js_vars.settle
let refund = js_vars.refund

let totalRealize = js_vars.totalRealize
let netGain = js_vars.netGain
let rank = js_vars.rank
let completed = js_vars.completed
let gap = js_vars.gap

let experiment = document.getElementById("experiment")

let id_contract = document.getElementById("id_contract")

let id_money = document.getElementById("id_money")
let id_debt = document.getElementById("id_debt")

let id_position = document.getElementById("id_position")
let id_open = document.getElementById("id_open")
let id_aveQuote = document.getElementById("id_aveQuote")
let id_amount = document.getElementById("id_amount")
let id_value = document.getElementById("id_value") 
let id_gain = document.getElementById("id_gain")
let id_rate = document.getElementById("id_rate")

let id_reverse = document.getElementById("id_reverse")
let id_realize = document.getElementById("id_realize")
let id_close = document.getElementById("id_close")
let id_settle = document.getElementById("id_settle")
let id_refund = document.getElementById("id_refund")

let id_totalRealize = document.getElementById("id_totalRealize")
let id_netGain = document.getElementById("id_netGain")
let id_rank = document.getElementById("id_rank")
let id_completed = document.getElementById("id_completed")
let id_gap = document.getElementById("id_gap")

let opening = document.getElementById("opening")
if( open == 0) {
    opening.style.visibility = "hidden"
}
    
let closing = document.getElementById("closing")
if( close == 0) {
    closing.style.visibility = "hidden"
}
    
const formatter = new Intl.NumberFormat("ja-JP")

const average = new Intl.NumberFormat("ja-JP", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})

const evaluation = new Intl.NumberFormat("ja-JP", {
  signDisplay: "exceptZero",
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
})

const fraction = new Intl.NumberFormat("ja", {
  signDisplay: "exceptZero",
  style: "percent",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})

const yen = new Intl.NumberFormat("ja", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
})

id_rank.style.color = "darkviolet"
id_rank.innerText = formatter.format(rank) + "位"
id_completed.innerText = "（" + formatter.format(completed) + "人中）"
id_gap.innerText = yen.format(gap) + "円"

experiment.innerText = "以上で、株取引ゲームは終了です。次のページに、ゲームに関する簡単なアンケートがありますので、回答をお願いいたします。"

if(js_vars.borrowed) {
    window.onload = function() {
        alert("資金不足に陥ったため、"+yen.format(endowment)+"円借り入れました。")
    }
}

if(preAction == 1) {
    id_contract.style.color = "fuchsia"
    if(prePosition == -1) {
        id_contract.innerText = yen.format(current) + "円で" + formatter.format(volume) + "株を買い埋めました。"  
    } else {
        id_contract.innerText = yen.format(current) + "円で" + formatter.format(volume) + "株を買い建てました。"
    }    
} else if(preAction == -1) {
    id_contract.style.color = "blue"
    if(prePosition == 1) {
        id_contract.innerText = yen.format(current) + "円で" + formatter.format(volume) + "株を売り埋めました。"  
    } else {
        id_contract.innerText = yen.format(current) + "円で" + formatter.format(volume) + "株を売り建てました。"
    } 
} else {
    id_contract.innerText = "取引を行いませんでした。"
}

id_money.innerText = yen.format(money) + "円"
id_debt.innerText = yen.format(debt) + "円"

assignPos(id_position, position)
id_open.innerText = formatter.format(open) + "株"
id_aveQuote.innerText = average.format(aveQuote) + "円"
id_amount.innerText = yen.format(amount) + "円"
id_value.innerText = yen.format(value) + "円"
changeCol(id_gain, gain)
id_gain.innerText = evaluation.format(gain) + "円"
changeCol(id_rate, rate)
id_rate.innerText = fraction.format(rate)

assignRev(id_reverse, reverse)
changeCol(id_realize, realize)
id_realize.innerText = evaluation.format(realize) + "円"        
id_close.innerText = formatter.format(close) + "株"    
id_settle.innerText = yen.format(settle) + "円"
id_refund.innerText = yen.format(refund) + "円"

changeCol(id_totalRealize, totalRealize)
id_totalRealize.innerText = evaluation.format(totalRealize) + "円"

changeCol(id_netGain, netGain)
id_netGain.innerText = evaluation.format(netGain) + "円"
      
function assignPos(x, y){
    if(y > 0) {
        x.style.color = "fuchsia"
        x.innerText = "買建"
    } else {
        x.style.color = "blue"
        x.innerText = "売建"
    }
}
    
function assignRev(x, y){
    if(y > 0) {
        x.style.color = "fuchsia"
        x.innerText = "買埋"
    } else {
        x.style.color = "blue"
        x.innerText = "売埋"
    }
}    
    
function changeCol(x, y){
    if(y > 0) {
        x.style.color = "red"
    } else if (y < 0) {
        x.style.color = "green"
    } else {
        x.style.color = "black"
    }
}
</script>

<style>
.info {
    background-color:#FFFFEE;
    border:1px solid #ccc;
    padding: 10px;  
}
    
.space {
    padding: 5px;
}    
    
.explanation {
  padding-top: 40px;
  padding-bottom: 20px;
  line-height: 200%;
}
</style>

{{ next_button }}

{{ endblock }}