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

{{ block title }}

{{ 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: 170%;
        }

        .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 align = "center">
    <video id="myVideo" width="853.3" height="480" controls>
        <source src="{{ static '0beh.mp4' }}" type="video/mp4">
      このブラウザでは動画が再生できません。手を挙げてスタッフにお知らせください。
    </video><br><br><br>
</div>

<div class="blockA" style="display: none;">
        <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" align="left"><span class="slider-value" id="item{{ item_number }}_self">VALUE N/A</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" align="left"><span class="slider-value" id="item{{ item_number }}_other">VALUE N/A</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>
</div>

{{ if is_defined('view.is_debug') and view.is_debug }}     
    <div align="center">
    <br><br>
    <button id="cheatButton" onclick="cheatButtonClick(event)">Cheat</button>　　　
    <button id="cheatNextButton" class="btn btn-primary">CheatNext</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']);
}

var video = document.getElementById("myVideo");

// 動画の再生が終了した時にblockAを表示
video.addEventListener('ended', function() {
    document.querySelector(".blockA").style.display = "block";
});

// ページの読み込みが完了した時点でもう一度確認する
document.addEventListener('DOMContentLoaded', function() {
    checkVideoEnded();
});

function cheatButtonClick(event) {
    // ボタンのデフォルトの動作を防止する（ページが再読み込みされないようにする）
    event.preventDefault();

    // blockA を表示する
    document.querySelector(".blockA").style.display = "block";
}

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

    </script>
{{ endblock }}