{{ extends 'global/Page.html' }}
{{ block title }}<span id="id_round"></span>日目（残りあと<span id="id_remain"></span>日）{{ endblock }}

{{ block content }}

<div class="move"></div>
<div class="chart">
<h2 id="id_heading"></h2>        
    
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 480px; padding-right: 11px"></div>

<script>
Highcharts.chart("container", {
    chart: {
        backgroundColor: '#FFEEFF',
    },
    
    title: {
        text: "ケイコウホールディングス"
    },

    yAxis: {
        opposite: true,
        title: {
            text: "価格(円)",
            style: {
                fontSize: "20px"
            }
        },
        labels: {
            style: {
                fontSize: "18px"
            }
        },
    },

    xAxis: {
        categories: ["20", "19", "18", "17", "16", "15", "14", "13", "12", "11", "10", "9", "8", "7", "6", "5", "4", "3", "2", "1"],
        title: {
            text: "日前",
            style: {
                fontSize: "20px"
            }
        },
        labels: {
            style: {
                fontSize: "18px"
            }
        }
    },

    plotOptions: {
        series: {
            name: "価格",
            zoneAxis: "x",
            zones: [{
                    value: 18.00001,
                    color: "#7cb5ec"
                    }, {
                    color: "#f7a35c"
            }],   
            dataLabels: {
                enabled: true,
                style: {
                    fontSize: "16px"
                }
            }
        }
    },

    legend: {
        enabled: false
    },

    series: [{data: js_vars.prices}]
});
</script>
</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 class="space"></div>

<div class="select">
<div class="mb-3 _formfield">
  <label class="col-form-label-lg" for="id_action"><label for="action">1. 行動を選択してください。</label></label>
   <div class="controls">
    <div class="form-check">
      <input class="form-check-input" type="radio" id="action-0" name="action" required value="1" style="transform:scale(1.1);">
      <label for="action-0" class="form-check-label" style="transform:scale(1.25);">&nbsp;買い</label>
    </div><div class="space"></div>
    <div class="form-check">
      <input class="form-check-input" type="radio" id="action-1" name="action" required value="-1" style="transform:scale(1.1);">
      <label for="action-1" class="form-check-label" style="transform:scale(1.25);">&nbsp;売り</label>
    </div><div class="space"></div>
    <div class="form-check">
      <input class="form-check-input" type="radio" id="action-2" name="action" required value="0" style="transform:scale(1.1);">
      <label for="action-2" class="form-check-label" style="transform:scale(1.25);">&nbsp;待機</label>
    </div> 
  </div>
</div>

<div class="mb-3 _formfield">
  <label class="col-form-label-lg" for="id_quantity"><label for="quantity">2. 数量を指定してください。</label></label>
    <div class="controls">
    <select class="form-select form-select-lg mb-3" name="quantity" id="quant">
      <option selected>--------</option>
    </select>
    </div>
</div>
    
{{ next_button }}    
</div>

<script>
let round = js_vars.round
let remain = js_vars.remain  
    
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 id_round = document.getElementById("id_round")
let id_remain = document.getElementById("id_remain")
let id_heading = document.getElementById("id_heading")

let id_title = document.getElementById("_otree-title")
id_title.style.visibility = "hidden"
    
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 buy = document.getElementById("action-0")
let sell = document.getElementById("action-1")
let hold = document.getElementById("action-2")
let quant = document.getElementById("quant")

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,
})

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

if(js_vars.round > 1) {
    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 = "取引を行いませんでした。"
    }
} else {
    id_contract.innerText = "　"
}
    
id_round.innerText = formatter.format(round)
id_remain.innerText = formatter.format(remain)
    
id_heading.innerText = formatter.format(round) + "日目（残りあと" + formatter.format(remain) + "日）"
    
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) + "円" 
    
quant.disabled = true

if ( money / current < 200) {
    if (position == 1) {
        buy.disabled = true
    } else if (position == -1) {
        sell.disabled = true
    } 
}
    
buy.addEventListener("change", function() {
    removeChildren(quant)
    if (position == -1) {       
        for (let i = 100; i <= open; i+=100) {
            let option = document.createElement("option")
            option.setAttribute("value", i)
            option.innerHTML = formatter.format(i) + "株"
            quant.appendChild( option )
        }
    } else {
        for (let i = 100; i < money / current - 99.99999; i+=100) {
            let option = document.createElement("option")
            option.setAttribute("value", i)
            option.innerHTML = formatter.format(i) + "株"
            quant.appendChild( option )
        }
    }
    quant.disabled = false
})
    
sell.addEventListener("change", function() {
    removeChildren(quant)
    if (position == 1) {       
        for (let i = 100; i <= open; i+=100) {
            let option = document.createElement("option")
            option.setAttribute("value", i)
            option.innerHTML = formatter.format(i) + "株"
            quant.appendChild( option )
        }
    } else {
        for (let i = 100; i < money / current - 99.99999; i+=100) {
            let option = document.createElement("option")
            option.setAttribute("value", i)
            option.innerHTML = formatter.format(i) + "株"
            quant.appendChild( option )
        }       
    }
    quant.disabled = false
})
    
hold.addEventListener("change", function() {
    removeChildren(quant)
    let option = document.createElement("option")
    option.setAttribute("value", 0)
    option.innerHTML = 0 + "株"
    quant.appendChild( option )
    quant.disabled = false
})
    
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"
    }
}
    
function removeChildren(x)
{
	if (x.hasChildNodes()) {
		while (x.childNodes.length > 0) {
			x.removeChild(x.firstChild)
		}
	}
}
</script>

<style>
.move {
    margin: -68px;
}

.chart {
    background-color:#FFEEFF;
    border:1px solid #ccc;
    padding: 10px;
}
    
.info {
    background-color:#FFFFEE;
    border:1px solid #ccc;
    padding: 10px;  
}
    
.select {
    background-color:#EEFFFF;
    border:1px solid #ccc;
    padding: 10px;  
}
    
.space {
    padding: 5px;
}

.form-check input{
	position:relative;
	top:1.5px;
}
</style>

{{ endblock }}