@extends('liveez.room.main')




@section('content')




<div style="width: 7%; position: fixed; top: 5%; left: 2%; z-index: 3;" id="demo_box">
    <br>
    <span class="pop_ctrl"><img src="img/joinEZ_LOGO.svg" style="opacity: 0.5;"></span>

    <div><span style="color: black;">教室人數：</span><span id="people_count" style="color: blue;"></span></div>

    <ul id="demo_ul">

        {{-- 教師功能區 --}}
        @if (@session("uid") >0)
        <li class="demo_li">
            <a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="教課模式">
                <img class="tip-content" id="course_start_img" style="" src="svg/teach_mode_off.svg"
                    data-toggle="tooltip" data-placement="right" title="教課模式">
            </a>
        </li>

        <li class="demo_li">
            <a href="javascript:void(0)" onclick="opne_seat_area()">
                <img class="tip-content" src="img/seat.png" data-toggle="tooltip" id="opne_seat_area"
                    data-placement="bottom" width="50" height="50" title="打開座位表">
            </a>
        </li>
        <li class="demo_li">
            <a href="javascript:void(0)" onclick="opne_question()">
                <img class="tip-content" src="img/question.png" data-toggle="tooltip" id="opne_question"
                    data-placement="bottom" width="50" height="50" title="發起問題">
            </a>
        </li>

        <li class="demo_li">
            <a href="javascript:void(0)">
                <img class="tip-content" src="svg/desktop_share_off.svg" data-toggle="tooltip" id="share_desktop"
                    data-placement="bottom" title="桌面分享">
            </a>
        </li>


        
        

        @endif

        <li class="demo_li">
            <img class="tip-content" id="camera_img" src="svg/camera_on.svg" data-toggle="tooltip"
                data-placement="right" title="攝影機畫面開關">
        </li>
        {{-- 教師功能區 --}}

        {{-- 學生端 --}}
        <li class="demo_li">
            <img class="tip-content" id="microphone_img" src="svg/microphone_on.svg" data-toggle="tooltip"
                data-placement="auto" title="麥克風聲音開關">
        </li>
        {{-- <li class="demo_li"> --}}
        <a href="javascript:void(0)">
            <img class="tip-content" id="raise_hand_img" src="svg/raise_hand_off.svg" style="display: none;"
                data-toggle="tooltip" data-placement="auto" title="舉手發言" width="50" height="50">
        </a>
        {{-- </li> --}}
        {{-- 學生端 --}}

        {{-- 系統功能區 --}}

        <li class="demo_li">
            <img class="tip-content" src="svg/fullscreen_off.svg" data-toggle="tooltip" data-placement="right"
                id="fullscreen_img" title="全螢幕控制">
        </li>
        <li class="demo_li">
            <a href="#" data-toggle="modal" data-target="#myModal"><img class="tip-content" src="svg/setting_on.svg"
                    data-toggle="tooltip" data-placement="bottom" title="設備切換"></a>
        </li>
        {{-- 系統功能區 --}}

        <li class="demo_li">
            <a id="user_list_action" href="#" data-pushbar-target="right"><img class="tip-content"
                    src="svg/people_connect.svg" data-toggle="tooltip" data-placement="bottom" title="連線人員"></a>
        </li>


        {{-- <li class="demo_li">
            <a id="translate_action" href="#" data-pushbar-target="bottom"><img class="tip-content"
                    src="svg/recognition_off.svg" data-toggle="tooltip" data-placement="bottom" title="辨識翻譯訊息">
        </li> --}}



        {{-- @if (@!$token=='') --}}
        {{-- @if (@session("uid") >0) --}}
        {{-- <li class="demo_li">
            <a href="#" data-toggle="modal" data-target="#record_mode"><img class="tip-content" id="record_status_img"
                    src="svg/recording_on.svg" data-toggle="tooltip" data-placement="bottom" title="錄影功能"></a>
        </li> --}}
        {{-- <li class="demo_li">
            <a href="#" data-toggle="modal" data-target="#share_room_page"><img class="tip-content"
                    src="svg/share_link_on.svg" data-toggle="tooltip" id="share_room" data-placement="bottom"
                    title="分享會議"></a>
        </li> --}}
        {{-- @endif --}}


        @if (@session("uid") >0)

        <li class="demo_li">
            <a href="javascript: location.href='../room_close?uniqid={{ @$uniqid }}'"><img class="tip-content"
                    src="svg/exit_on.svg" data-toggle="tooltip" data-placement="bottom" title="離開教室"></a>
        </li>
        @else
        <li class="demo_li">
            <a href="javascript: location.href='../school_room'"><img class="tip-content" src="svg/exit_on.svg"
                    data-toggle="tooltip" data-placement="bottom" title="離開教室"></a>
        </li>
        @endif

    </ul>
</div>
</div>


<div id="menu_show_event_area"
    style="position: fixed;z-index: 2;bottom: 0;width: 100%;height: 9%;background-color:rgba(0, 0, 0, 0);"></div>

<div class="wrapper">

    <video style="position: fixed;right: 0;bottom: 0;top: 0;min-width:100%; min-height: 100%;" class="box1"
        id="index-video" preload="none" playsinline autoplay muted></video>
</div>
{{-- 
<div id="side_menu">

    <input type="checkbox" checked data-toggle="toggle" data-onstyle="primary" data-offstyle="secondary" data-on="mic開"
        data-off="mic關" id="toggle-mic">


</div> --}}
<!-- side_menu-->
{{-- 座位表 --}}
<div class="seat_area">
    @for ($i = 1; $i <= 40; $i++) <span class="seat_box_unused" id="seat_{{$i}}" data-toggle="tooltip"
        data-placement="bottom" title="">
        {{$i}}</span>
        @if ($i==20)
        <div class="clearfix"></div>
        @endif
        @endfor
</div>
{{-- 座位表 --}}

{{-- 問題區 for 教師 --}}
<div class="question_area">
    <select name="" id="set_ans">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
        <option value="5">E</option>
    </select>
    <button class="btn btn-primary" type="botton" id="sq_btn" onclick="start_question('{{@$uniqid}}')">開始作答</button>
    <button class="btn btn-danger" type="botton" id="eq_btn" onclick="end_question('{{@$uniqid}}')">結束作答</button>
    <div id="question_info"></div>
</div>
{{-- 問題區 for 教師 --}}


{{-- 問題區 for 學生 --}}

<div id="question_area_student" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content" style="color: black;">
            <div class="modal-header">
                <h4 class="modal-title">學生作答</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body">
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                    <label class="btn btn-primary  btn-ans">
                        <input type="radio" name="post_ans" autocomplete="off" value="1">A
                    </label>
                    <label class="btn btn-info  btn-ans">
                        <input type="radio" name="post_ans" autocomplete="off" value="2">B
                    </label>
                    <label class="btn btn-warning btn-ans">
                        <input type="radio" name="post_ans" autocomplete="off" value="3">C
                    </label>
                    <label class="btn btn-success btn-ans">
                        <input type="radio" name="post_ans" autocomplete="off" value="4">D
                    </label>
                    <label class="btn btn-dark btn-ans">
                        <input type="radio" name="post_ans" autocomplete="off" value="5">E
                    </label>
                </div>

                <div class="clearfix"></div>
                <br>
                <button class="btn btn-secondary" type="botton" onclick="post_question('{{@$uniqid}}')">送出答案</button>
                <div id="post_question_info"></div>
            </div>
        </div>
    </div>
</div>

{{-- 問題區 for 學生 --}}

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"
    id="confirm-modal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="color: black;">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <h4 class="modal-title pull-left">確認答案</h4>

                <div id="confirm_ans"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="modal-btn-y">確定</button>
                <button type="button" class="btn btn-light" id="modal-btn-n">再看看</button>
            </div>
        </div>
    </div>
</div>

<div class="box2">


</div>




{{-- 連線列表 --}}
<aside id="user_list_content" class="user_connect_page"
    style="background: rgba(1, 51, 11, 0.6);transition:transform 0.5s ease;">

    <div class="title" style="background: rgba(0%,10%,20%,0.6);"></span> <span style="color: white;">教室人員</span>


    </div>
    <div id="app" class="col-lg-12">

        <div class="card" v-for="(item,key) in datas" :key="item.id">
            <div class="card-header">
                <a data-toggle="collapse" :href="'#showvideo'+key">
                    <div style="margin-top: -10%">
                        <span style="font-size: 15px;color:black;">
                            {{-- <input type="checkbox" data-toggle="toggle" data-size="xs"
                                data-on="<i class='fa fa-microphone'></i>"
                                data-off="<i class='fa fa-microphone-slash'></i>"> --}}
                            <img src="img/connect_people_new.png">@{{item.name}}</span>
                        {{-- <span> --}}
                        <canvas :ref="item.id + '_microphone_meter'" width="100%" height="25px"
                            style="position: fixed"></canvas>
                        {{-- </span> --}}

                    </div>

                    <span :ref="item.id + '_network_traffic_content'"
                        style="position: absolute;bottom: 7%;font-size: 12px;color:blue;background-color: #fff"></span>
                </a>
            </div>
            <div :id="'showvideo'+key" class="card-collapse collapse">

                <video :ref="item.id + '_video_content'" :src-object.prop.camel="item.src" :muted="item.isStreamMuted"
                    @click="change_main_view(key)" width="100%" preload="none" playsinline autoplay></video>

            </div>
        </div>
        </div>

</aside>



<aside id="user_list_content" data-pushbar-id="bottom" class="pushbar from_bottom"
    style="background: rgba(7, 64, 205, 0.6);overflow-y: hidden">

    <div class="title " style="position:sticky;top: 0;background: rgba(0%,10%,20%,0.8);z-index: 10;">
        <span data-pushbar-close class="close push_right"></span>

        <div class="form-inline" role="form">
            <div class="form-group">

                            </div>
            <div class="form-group">
                <a href="#" data-toggle="modal" data-target="#speech_control">
                    <img class="tip-content" src="img/translate_summary.png" width="60" height="60"
                        data-toggle="tooltip" data-placement="bottom" title="即時翻譯">
                </a>
            </div>


            <div class="form-group hidden" id="speech_box">
                <label for="">翻譯模式：</label>
                <span id="show_speech_mod">中文＞泰文</span>
            </div>
            <div class="form-group">
                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                    <input id="chat_message_input" type="text" placeholder="在此輸入留言" name="message" class="form-control"
                        size="50vh">
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <button id="chat_message_button" class="btn btn-success ">傳送</button>
                </div>
            </div>
        </div>






        <div id="speech_translate_content"
            style=" width: 50%;line-height: 20vh;font-size: 18px;overflow-y: auto; float: left;border:2px blue solid;">

            <div style="height: 16px;">原文: </div>
            <div>dsddsds</div>
            <!--                    <details>-->
            <!--                        <summary>A說：１２３４５123123123</summary>-->
            <!--                        <p>A say: one two three four five</p>-->
            <!--                    </details>-->
            <!--                    <details>-->
            <!--                        <summary>B說：你好嗎？</summary>-->
            <!--                        <p>B say: How are you?</p>-->
            <!--                    </details>-->
        </div>
        <div style="width: 48%;line-height: 20vh;float: left;border:2px green solid;">

            <div>譯文: </div>
            <div>fdsfdsvrwfew</div>


        </div>


    </div>
</aside>


<aside data-pushbar-id="left" class="pushbar from_left" style="background: rgba(0%,10%,20%,0.6);">
    <div class="title"><span data-pushbar-close class="close push_right"></span> 邀請列表</div>
    <!-- 搜尋 -->
    <div class="input-group md-form form-sm form-1 pl-0">
        <div class="input-group-prepend">
            <span class="input-group-text cyan lighten-2" id="basic-text1"><i class="fas fa-search text-white"
                    aria-hidden="true"></i></span>
        </div>
        <input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search">
    </div>
    <div style="height:300px;overflow:auto;">
        <div style="width:20px;height:20px; border-radius:999em;background-color:green;">
            <span style="margin-left: 120%">kkbb</span>
        </div><br>

    </div>
    <hr>
    <!-- 搜尋end -->
    <!-- 最愛 -->
    <img src="style/img/tag.png" style="max-height: 40px">我的好友列表

    <div style="height:300px;overflow:auto;">
        <div style="width:20px;height:20px; border-radius:999em;background-color:green;">
            <span style="margin-left: 120%">kkbb</span>
        </div><br>
        <div style="width:20px;height:20px; border-radius:999em;background-color:green;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:green;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:green;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:green;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:green;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:#AE0000;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:#AE0000;"><span
                style="margin-left: 120%">kkbb</span></div><br>
    </div>



    <!-- 最愛end -->
</aside>




<div id="share_room_page" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content " style="color: black;">
            <div class="modal-header">
                <h4 class="modal-title">分享會議空間</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body">
                分享網址: <div id="url" style="width: 80%;">
                    https://www.liveez.cc/joinRoom.php?openExternalBrowser=1&uuid=1234</div>
                <br><button class="btn btn-primary" data-clipboard-target="#code" id="copy_url_button">複製</button>
            </div>

        </div>

    </div>
</div>


<div id="record_mode" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title h4" id="myLargeModalLabel">選擇錄影模式</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align: center;">
                <button class="btn btn-primary" id="people_stream_record_button">人像</button>
            </div>
        </div>
    </div>
</div>



<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content" style="color: black;">
            <div class="modal-header">
                <h4 class="modal-title">設備清單</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body">
                攝影機: <select id="camera"></select><br><br>麥克風: <select id="audio"></select><br><br>喇　叭: <select
                    id="speaker_hardware"></select>
                            </div>

        </div>

    </div>
</div>
<div id="return_window" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content" style="color: black;">
            <div class="modal-header">
                <h4 class="modal-title">提示訊息</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body" id="return_information">
            </div>

        </div>

    </div>
</div>


<div id="speech_control" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content" style="color: black;">
            <div class="modal-header">
                <h4 class="modal-title">語音辨識</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body">

                <p style="text-align:center;"><button class="btn btn-warning" onclick="">開始辨識</button></p><br>

                <td style="width:10%">
                    <p style="text-align:center;">辨識語系選擇</p>
                    <select class="toolbar_button form-control" onchange="change_speech_source(this.value)">
                        <option value="en-US,en">English</option>
                        <option value="cmn-Hant-TW,zh-TW" selected>中文</option>
                        <option value="th-TH,th">ภาษาไทย</option>
                        <option value="ja,ja">日本語</option>
                        <option value="vi,vi">Tiếng Việt</option>
                        <option value="id,id">Basa Sunda</option>
                        <option value="my,my">Basa Jawa</option>
                    </select>　
                </td>
                <td>&emsp;&emsp;</td>

                <td style="width:10%">
                    <p style="text-align:center;">翻譯語系選擇</p>
                    <select class="toolbar_button form-control" @change="change_translate_text($event,key)">
                        <option value="en">English</option>
                        <option value="zh-TW">中文</option>
                        <option value="th">ภาษาไทย</option>
                        <option value="ja">日本語</option>
                        <option value="vi">Tiếng Việt</option>
                        <option value="id">Basa Sunda</option>
                        <option value="my">Basa Jawa</option>
                    </select>　
                </td>
                <td>&emsp;&emsp;</td>
            </div>

        </div>

    </div>
</div>

<script>
@if (!session("uid"))
// setTimeout(, 6000);
// document.getElementById('microphone_img').click();
@endif

    $('#demo_box').popmenu({
//   'controller': true,       //false會一直卡住
  'width': '50%',         //總寬度
//   'background': '#34495e',  //背景色
//   'focusColor': '#1abc9c',  //hover顏色
//   'borderRadius': '10px',   //邊角弧度
  'top': '0',              //彈出位移距離
  'left': '-50',              //彈出位移距離
  'iconSize': '80px'       //icon長寬
});

// $('#side_menu').BootSideMenu({
//             side: "left",
//             width: "5%",
//             pushBody: false,
//             remember: false,
//             icons: {
//                 left: 'fa fa-angle-double-right',
//                 right: 'fa fa-angle-double-left',
//                 down: 'fa fa-angle-double-down'
//             },
//         });


// $('#seat_menu').BootSideMenu({
//             side: "right",
//             width: "20%",
//             pushBody: false,
//             remember: false,
//             icons: {
//                 left: 'fa fa-angle-double-right',
//                 right: 'fa fa-angle-double-left',
//                 down: 'fa fa-angle-double-down'
//             },
//         });
</script>
@endsection