{% extends 'base.html' %}
{% set active_page = 'custom' %}


{% block title %}Strategy Page{% endblock%}
{% block content %}
<div class="container-fluid" style="min-height:92%;position:relative;">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">
        上傳檔案
    </button>
    <!-- Modal -->
    <div class="modal fade" id="uploadModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title font-bold" style="color: #000055;">格式規範與上傳檔案</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="fa-ul">
                        <li><span class="fa-li"><i class="fa-solid fa-flag"></i></span>上傳之csv檔需包含header，且第一行為時間資訊。</li>
                        <li><span class="fa-li"><i class="fa-solid fa-flag"></i></span>價格資訊需長度相同，且資產數量大於1檔才會進行回測。</li>
                        <li><span class="fa-li"><i class="fa-solid fa-flag"></i></span>範例如下圖所示。</li>
                    </ul>
                    <img src="{{ url_for('static', filename='img/file.jpg') }}" class="img-fluid mb-3" alt="SINGUP IMAGE">
                    <form method="POST" enctype="multipart/form-data">
                        <div class="card my-3">
                            <div class="p-2 font-bold text-lg">
                                投組最佳化配置
                            </div>
                            <div class="input-group"> 
                                <span class="input-group-text bg-info">輸入數據時長</span>
                                <select name="lookback" class="form-select">
                                    <option value="21">1個月</option>
                                    <option value="63">3個月</option>
                                    <option selected value="126">6個月</option>
                                    <option value="252">12個月</option>
                                </select>
                            </div>
                            <div class="input-group"> 
                                <span class="input-group-text bg-info">再平衡頻率</span>
                                <select name="frequency" class="form-select">
                                    <option value="21">每月</option>
                                    <option value="63">每季</option>
                                    <option selected value="126">每半年</option>
                                    <option value="252">每年</option>
                                </select>
                            </div>
                            <div class="input-group"> 
                                <span class="input-group-text bg-info">最佳化目標函數</span>
                                <select name="role" class="form-select" onchange="changeFunc(value);">
                                    <option selected value="max_sharpe">最大化夏普比率</option>
                                    <option value="max_sortino">最大化索提諾比率</option>
                                    <option value="min_volatility">最小化波動率</option>
                                    <option value="quadratic_utility">最大化效用函數</option>
                                </select>
                            </div>
                            <div class="input-group" style="display: none;" id="gamma"> 
                                <span class="input-group-text bg-info">風險厭惡係數</span>
                                <input type="number" id="gamma" name="gamma" name="targetAnnualVolatility" class="form-control fmt-pct" value="30" autocomplete="off">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>
                        <div class="form-group d-flex">
                            <input type="file" class="form-control-file" id="csv_file" name="csv_file" accept=".csv" max-file="3" required>
                            <button id="uploadCheck" type="submit" class="btn btn-outline-primary ms-auto">確認上傳</button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
                </div>
            </div>
        </div>
    </div>
    
</div>
{% endblock %}
{% block script %}
<script>
    $(document).ready(function(){
        $("#uploadModal").modal('show');
    });
    function changeFunc(value) {
    console.log(value);
    if (value === 'quadratic_utility') {
        $('#gamma').css("display", "flex");
    } else {
        $('#gamma').css("display", "none");
    }
}
</script>
{% endblock script %}