{{ extends "global/Page.html" }}

{{ block title }}
<div align="center">
    <h4>実験説明書を参照しながら回答してください</h4>
</div>
{{ endblock }}

{{ block styles }}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.5.3/css/bootstrap-slider.min.css" rel=stylesheet>


<style>
    .slider-value {
        font-weight: bold;
        color: #337ab7;
        font-size: 160%;
    }

    .slider-horizontal-col {
        padding: -10px 25px;
    }

    .slider.slider-horizontal {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .slider-selection {
        box-shadow: none;
        background-image: none;
    }

    .slider-handle {
        cursor: move;
    }

    .slider-selection.tick-slider-selection {
        background-image: none;
    }

    .slider-tick {
        cursor: pointer;
        background-image: -webkit-linear-gradient(top, #89cdef 0%, #fff 100%);
        background-image: -o-linear-gradient(top, #89cdef 0%, #fff 100%);
        background-image: linear-gradient(to bottom, #89cdef 0%, #fff 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0);
        opacity: 1;
    }

    .slider.slider-disabled .slider-tick,
    .slider.slider-disabled .slider-handle {
        cursor: not-allowed;
    }

    .slider-tick.in-selection {
        background-image: -webkit-linear-gradient(top, #89cdef 0%, #fff 100%);
        background-image: -o-linear-gradient(top, #89cdef 0%, #fff 100%);
        background-image: linear-gradient(to bottom, #89cdef 0%, #fff 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0);
        opacity: 1;
    }

    .slider-reference {
        position: relative;
        font-weight: 200;
    }

    .value-start {
        position: absolute;
        top: 0px;
        left: 0px;

    }

    .value-end {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .col-sm-1 {
        margin-top: -8px;
        /* 適切な値に調整 */
    }

    /* ######## トグル ######### */
    .switch__label {
        width: 50px;
        position: relative;
        display: inline-block;
    }

    .switch__content {
        display: block;
        cursor: pointer;
        position: relative;
        border-radius: 30px;
        height: 31px;
        overflow: hidden;
    }

    .switch__content:before {
        content: "";
        display: block;
        position: absolute;
        width: calc(100% - 3px);
        height: calc(100% - 3px);
        top: 0;
        left: 0;
        border: 1.5px solid #E5E5EA;
        border-radius: 30px;
        background-color: #fff;
    }

    .switch__content:after {
        content: "";
        display: block;
        position: absolute;
        background-color: transparent;
        width: 0;
        height: 0;
        top: 50%;
        left: 50%;
        border-radius: 30px;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }

    .switch__input {
        display: none;
    }

    .switch__circle {
        display: block;
        top: 2px;
        left: 2px;
        position: absolute;
        -webkit-box-shadow: 0 2px 6px #999;
        box-shadow: 0 2px 6px #999;
        width: 27px;
        height: 27px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        background-color: #fff;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }

    .switch__input:checked~.switch__circle {
        left: 21px;
    }

    .switch__input:checked~.switch__content:after {
        background-color: #1791d3;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
{{ endblock }}









{{ block content }}


<div class="alert alert-danger" id="confirmation_error" hidden="True">「確定」されていないスライダーがあります。
    全てのスライダーを確定すると、画面下に「次へ」が表示されます。</div>

<div>
    {{ for item_number in slider_items }}
    <div class="row">
        <div class="col-sm-12">
            <div>
                <div class="container_wh">
                    <div align="left"><strong>{{ forloop.counter }}</strong><br><br></div>
                    <div class="row">
                        <div class="col-sm-2" align="right">あなた →</div>
                        <div class="col-sm-1" style="text-align: left; padding-left: 0; white-space: nowrap;">
                            <span class="slider-value" id="item{{ item_number }}_self">VALUE N/A</span><span
                                class="slider-value">0<span style="font-size:50%;"> 円</span></span>
                        </div>
                        <div class="col-sm-7">
                            <div class="slider-reference">
                                <div class="value-start" id="item{{ item_number }}_self_start">VALUE N/A</div>
                                <div class="value-end" id="item{{ item_number }}_self_end">VALUE N/A</div>
                            </div>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2" align="center"></div>
                        <div class="col-sm-1" align="center"></div>
                        <div class="col-sm-7 slider-horizontal-col">
                            <input name="slider{{ item_number }}" id="item{{ item_number }}" type="text"
                                data-slider-min="0" data-slider-max="100" data-slider-step="0.1"
                                data-slider-value="50" />
                        </div>
                        <div class="col-sm-2" style="text-align: center;">
                            <!-- <button type="button" class="btn btn-primary" id="item{{ item_number }}_confirm" value="False">確定</button>　 -->
                            　<label class="switch__label">
                                <input type="checkbox" class="switch__input" id="item{{ item_number }}_confirm"
                                    value="False" />
                                <span class="switch__content"></span>
                                <span class="switch__circle"></span>
                            </label><br>
                            <span style="font-size: 70%; color: #827e7e;">　選択 ↔︎ 確定</span>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2" align="right">相手 →</div>
                        <div class="col-sm-1" style="text-align: left; padding-left: 0; white-space: nowrap;">
                            <span class="slider-value" id="item{{ item_number }}_other">VALUE N/A</span><span
                                class="slider-value">0<span style="font-size:50%;"> 円</span></span>
                        </div>
                        <div class="col-sm-7">
                            <div class="slider-reference">
                                <div class="value-start" id="item{{ item_number }}_other_start">VALUE N/A</div>
                                <div class="value-end" id="item{{ item_number }}_other_end">VALUE N/A</div>
                            </div>
                        </div>
                        <div class="col-sm-2"></div>
                    </div><br>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
    {{ endfor }}
</div>

<div align="center">
    <button id="buttonA">次へ</button>
    <div class="popup-container">
        <button type="button" id="buttonB">次へ</button>
        <div class="popup">
            　全スライダーを「確定」すると「次へ」が表示
        </div>
    </div>
</div><button id="hidden_submit_button" type="submit" hidden="true"></button>

{{ if is_defined('view.is_debug') and view.is_debug }}
<div align="center">
    <br><br><br>
    <button id="cheatNextButton" class="btn btn-primary">Cheat</button>
</div>
{{ endif}}

{{ endblock }}








{{ block scripts }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.5.3/bootstrap-slider.min.js"></script>

<script src="{{ static 'svo/js/general.js' }}"></script>


<script src="{{ static 'svo/js/slider.js' }}"></script>
<script src="{{ static 'svo/js/slider_primary_continuous.js' }}"></script>


<script>

    $(document).ready(function () {
        // チェックボックスの状態が変更されたときのイベントハンドラー
        $(".switch__input").change(function () {
            // チェックボックスの状態に応じてスライダーを有効または無効にする
            var sliderId = $(this).attr("id").replace("_confirm", "");
            if ($(this).is(":checked")) {
                $("#" + sliderId).slider("disable");
                $(this).val("True");
            } else {
                $("#" + sliderId).slider("enable");
            }
            // 全てのチェックボックスがONになっているかどうかをチェックし、ボタンを切り替える
            toggleSubmitButton();
        });

        // スライダーの初期状態に応じてボタンを切り替える
        toggleSubmitButton();
    });

    // 全てのチェックボックスがONになっているかどうかを検証し、ボタンを切り替える関数
    function toggleSubmitButton() {
        var allChecked = true;
        $(".switch__input").each(function () {
            if (!$(this).is(":checked")) {
                allChecked = false;
                return false; // チェックボックスが1つでもOFFの場合、処理を中断する
            }
        });
        // 全てのチェックボックスがONの場合、buttonAを表示し、そうでない場合はbuttonBを表示する
        if (allChecked) {
            $("#buttonA").show();
            $("#buttonB").hide();
        } else {
            $("#buttonA").hide();
            $("#buttonB").show();
        }
    }

    /* On submit, check if all choices are confirmed. If not: display error and do not submit */
    $("#continue_button").click(function () {
        if (check_all_confirmed(1, 6)) {
            $("#hidden_submit_button").click();
        } else {
            $("#confirmation_error").show();
            window.scrollTo(0, 0);
        }
    });

    /* Execute on script load */

    // Update all start and end values
    for (i = 1; i <= 6; i++) {
        update_by_id('item' + i + '_self_start', allocation_bounds['item' + i]['self_left']);
        update_by_id('item' + i + '_self_end', allocation_bounds['item' + i]['self_right']);
        update_by_id('item' + i + '_other_start', allocation_bounds['item' + i]['other_left']);
        update_by_id('item' + i + '_other_end', allocation_bounds['item' + i]['other_right']);
    }


    // スライダーの両端のメモリの値を10倍
    $(document).ready(function () {
        $(".value-start, .value-end").each(function () {
            var currentValue = $(this).text();
            if (currentValue !== "VALUE N/A") {
                // 数値に変換して0を追加し、新しい値に設定
                var newValue = currentValue + '0';
                // 更新された値を要素に設定
                $(this).text(newValue);
            }
        });
    });

    function cheatNextPage() {
        oTree.next();
    }

</script>
{{ endblock }}