<div class="background"></div>

<div class="page-breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="fa fa-home"></i>
            <a href="#" style="color: #797979">主頁</a>
        </li>

        <li class='active' style='color:#ef4130'>時間表</li>
    </ul>
</div>

<div class="page-header position-relative">
    <div class="header-title">
        <h1>
            時段詳情
        </h1>
    </div>
    <!--Header Buttons-->
    <div class="header-buttons">
        <a class="sidebar-toggler" href="#">
            <i class="glyphicon glyphicon-resize-horizontal"></i>
        </a>
        <a class="refresh" id="refresh-toggler" href="#">
            <i class="glyphicon glyphicon-refresh"></i>
        </a>
        <a class="fullscreen" id="fullscreen-toggler" href="#">
            <i class="glyphicon glyphicon-fullscreen"></i>
        </a>
    </div>
</div>

<div class="content_no_padding">
    <div class="row no_margin">
        <a href="/backend/event/attendance?id=<?= $id ?>"><button class="col-1 btn btn-default">點名</button></a>
        <a href="/backend/event/makeup?id=<?= $id ?>"><button class="col-1 btn btn-default">調堂</button></a>
        <a href="/backend/event/add_new_student?id=<?= $id ?>"><button class="col-1 btn btn-default">加入學生</button></a>
        <a href="/backend/event/edit?id=<?= $id ?>"><button class="col-1 btn btn-default">編輯</button></a>
        <a href=""><button class="col-1 btn btn-default">刪除</button></a>
    </div>

    <div class="color_header_green">
        <span class="header_words"><?= $event_information['display_name'] ?></span>
        <!--<span class="header_words"><?= $course_title ?></span>-->
    </div>
    <form id="new_event_form" method="post" action="/backend/event/add_student_to_event">

        <table class="partial_form_table">
            <tr>
                <td class="partial_form_label">
                    <label>開班編號</label>
                </td>
                <td colspan="3">
                    <input type="text" class="form-control" id="Event_code" readonly name="event_code" placeholder="請填寫開班編號" value="<?= $event_information['display_name'] ?>">
                </td>
            </tr>
            <tr>
                <td class="partial_form_label">
                    <label>課程名稱</label>
                </td>
                <td colspan="3">
                    <input type="hidden" readonly name="course_name" value="<?= $course_information['id'] ?>">
                    <input type="text" class="form-control" id="new_course_name" readonly name="text_course_name" placeholder="請填寫課程名稱" value="<?= $course_information['name'] ?>">
                    <!--  <select id="select-course_name" name="course_name">
                    <option value="" selected>請選擇課程</option>
                    <?php
                    //   for ($i = 0; $i < sizeof($course_data); $i++) {
                    //          echo '<option value="' . $course_data[$i]['id'] . '">' . $course_data[$i]['name'] . '</option>';
                    //      }
                    ?>

                </select> -->
                </td>
            </tr>
            <tr>

                <td class="partial_form_label">
                    <label>課程模式</label>
                </td>
                <td>
                    <input type="text" class="form-control" id="course_mode" readonly name="course_mode" placeholder="請選擇課程模式" value="<?= $course_information['course_category_id'] == 1 ? "恆常課程" : "暑期課程" ?>">
                </td>


                <td class="partial_form_label">
                    <label>課程分鐘</label>
                </td>
                <td>
                    <input type='text' class="form-control" id="course_duration" readonly name="course_duration" placeholder="請輸入課程分鐘" value="<?= $course_information['duration'] ?>">
                </td>


            </tr>
            <tr>
                <td class="partial_form_label">
                    <label>開始日期</label>
                </td>
                <td>
                    <input type="date" class="form-control" id="start_date" readonly name="start_date" readonly placeholder="請選擇開始日期" value="<?php echo date("Y-m-d", $event_information['date_from']) ?>">
                </td>
                <td class="partial_form_label">
                    <label>結束日期</label>
                </td>
                <td>
                    <input type="date" class="form-control" id="end_date" readonly name="end_date" readonly placeholder="請選擇結束日期" value="<?php echo date("Y-m-d", $event_information['date_to']) ?>">
                </td>
            </tr>
            <tr>
                <td></td>

            </tr>
            <tr>
                <td class="partial_form_label" 　style="vertical-align:top;">
                    <label>課程日</label>
                </td>
                <td colspan="3">
                    <table style="width: 100%;">
                        <tr>
                            <thead>
                                <th style="background-color: rgb(121, 201, 66);color:white;text-align:center;">日</th>
                                <th style="background-color: rgb(121, 201, 66);color:white;text-align:center;">一</th>
                                <th style="background-color: rgb(121, 201, 66);color:white;text-align:center;">二</th>
                                <th style="background-color: rgb(121, 201, 66);color:white;text-align:center;">三</th>
                                <th style="background-color: rgb(121, 201, 66);color:white;text-align:center;">四</th>
                                <th style="background-color: rgb(121, 201, 66);color:white;text-align:center;">五</th>
                                <th style="background-color: rgb(121, 201, 66);color:white;text-align:center;">六</th>
                            </thead>
                        </tr>
                        <tr>
                            <?php
                            $checker = [false, false, false, false, false, false, false];
                            $html = [null, null, null, null, null, null, null];
                            for ($x = 0; $x < sizeof($event_information["weekdays"]) - 1; $x++) {
                                $html[$event_information["weekdays"][$x]] =  '<td><input type="time" readonly placeholder="時間" min="09:00" max="20:00" autocomplete="off" name="time[' . $event_information["weekdays"][$x] . ']" value="' . $timeslot_information['starttime'] . '" style="background-color: rgb(255, 255, 255);padding:6px 0;width:100%;text-align:center;" />';
                                $checker[$event_information["weekdays"][$x]] = true;
                            }
                            for ($i = 0; $i < 7; $i++) {
                                if ($html[$i] == null) {
                                    $html[$i] = '<td><input type="time" placeholder="時間" readonly min="09:00" max="20:00" autocomplete="off" name="time[' . $i . ']" style="background-color: rgb(255, 255, 255);padding:6px 0;width:100%;text-align:center;" />';
                                }
                            }
                            for ($i = 0; $i < 7; $i++) {
                                echo $html[$i];
                            }
                            ?>
                        </tr>
                    </table>
                </td>
            </tr>


            <tr>
                <td></td>
                <td>
                    <button class="btn btn-default list_time_button" style="background-color:rgba(121,201,66)!important;">列出所有時段</button>
                </td>
            </tr>
            <tr style="max-height:300px;overflow-y:auto">
                <td></td>
                <td>
                    <div style="max-height:300px;overflow-y:auto;">
                        <table class="table" id="listing_data_table" style="display:none;">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>日期</th>
                                    <th>開始時間</th>
                                    <th>結束時間</th>
                                    <th>假期</th>
                                </tr>
                            </thead>
                            <tbody id="listing_date">
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="partial_form_label" 　style="vertical-align:top;">
                    <label>學生</label>
                </td>
                <td>
                <input type="hidden" name="student_no" id="selected_student_id">
                <input type="text" id="display_student" class="form-control" readonly placeholder="請選擇學生">
                </td>
                <td colspan="2"><button class="btn btn-default btn_search_student" style="background-color: rgba(121,201,66)!important;">搜尋學生</button></td>
            </tr>
            <tr>
                <td class="partial_form_label">
                    <label>授課地點</label>
                </td>
                <td colspan="3">
                    <input type="text" class="form-control" id="location" readonly name="location" placeholder="請填寫授課地點" value="<?= $event_information['location'] ?>">
                </td>
            </tr>
            <tr>
                <td class="partial_form_label">
                    <label>授課導師</label>
                </td>
                <td>
                    <input type="text" class="form-control" id="staff" readonly name="staff" placeholder="請填寫授課導師" value="<?= $event_information['staff'] ?>">
                </td>
                <td class="partial_form_label">
                    <label>授課助教</label>
                </td>
                <td>
                    <input type="text" class="form-control" id="assist" readonly name="assist" placeholder="請填寫授課助教" value="<?= !empty($event_information['assist']) ? $event_information['assist'] : "" ?>">
                </td>
            </tr>
            <tr>
                <td class="partial_form_label">
                    <label>備註</label>
                </td>
                <td colspan="3">
                    <textarea style="resize:none;" class="form-control" id="remark" readonly name="remark" placeholder="請填寫備註"><?= !empty($event_information['remark']) ? $event_information['remark'] : "" ?></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="hidden" name="event_id" value="<?= $event_information['id'] ?>">
                    <?php
                    $disabled = "";
                    if (sizeof($event_enrollment_information) != 0) {
                        $disabled = "disabled";
                    }

                    ?>
                    <button type="submit" class="btn btn-default btn_submit" style="background-color:rgba(121,201,66)!important;">確認</button>
                </td>
                <td colspan="3" style="padding-right:100px;">
                    <button class="btn btn-default" style="background-color:rgba(121,201,66)!important;">重設</button>
                </td>
                <td></td>
            </tr>
    </form>
    </table>

</div>
</div>


<div id="search_student_form" class="wide_partial_form">
    <div class="red_tag">搜尋學員</div>
    <div class="row">
        <div class="col-md-6">
            <table class="partial_form_table">
                <form>
                    <tr>
                        <td class="partial_form_label">
                            <label>通用搜尋</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" id="general_search" name="general_search" placeholder="請填寫">
                        </td>
                    </tr>
                    <tr>
                        <td class="partial_form_label">
                            <label>中文姓名</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" id="chi_name" name="chi_name" placeholder="請填寫">
                        </td>
                    </tr>
                    <tr>
                        <td class="partial_form_label">
                            <label>電話號碼</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" id="phone" name="content1_phone" placeholder="請填寫">
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="button" id="btnSearchStudent" class="btn btn-default">搜尋</button></td>
                    </tr>
                </form>
            </table>
        </div>
        <div class="col-md-6">
            <table class="partial_form_table">
                <form>
                    <tr>
                        <td class="partial_form_label">
                            <label>學員編號</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" id="code" name="code" placeholder="請填寫">
                        </td>
                    </tr>
                    <tr>
                        <td class="partial_form_label">
                            <label>英文姓名</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" id="eng_name" name="eng_name" placeholder="請填寫">
                        </td>
                    </tr>
                    <tr>
                        <td class="partial_form_label">
                            <label>參考編號</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" id="ref_no" name="ref_no" placeholder="請填寫">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3"> <button type="button" id="btn_create_student" class="btn btn-default">創建學員</button></td>
                        <td></td>
                    </tr>
                </form>
            </table>
        </div>
    </div>

    <div style="width:100%;text-align:center;">學員資料</div>
    <div class="content_no_margin_no_inherit">
        <div id="#studentTable-scroller" style="height:400px;overflow-y:auto">
            <table id="studentTable" class="table table-bordered simple_table">
                <thead>
                    <th style="text-align:center"></th>
                    <th>學員編號</th>
                    <th>中文姓名</th>
                    <th>英文姓名</th>
                    <th>電話號碼</th>
                </thead>
                <tbody>
                    <tr>
                        <!--  <td id="temp_result" colspan="5" style="text-align:center;">未有任何搜尋結果</td>-->
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <div class="col-md-6" style="text-align:right;">
                <button id="btn_select_confirm" class="individual_button">確定</button>
            </div>
            <div class="col-md-6" style="text-align:left">
                <button id="btn_close" class="individual_button">關閉</button>
            </div>
        </div>
    </div>

</div>

<script>
    $(".list_time_button").on('click', function() {
        $("#listing_date").empty();
        var form_data = $("#new_event_form").serializeArray();

        $.ajax({
            url: "/api/event/listing_month_dates",
            method: "POST",
            data: form_data,
            dataType: "json",
            success: function(response) {
                if (response != null) {
                    $('#listing_data_table').show();

                    // $("#listing_date").append("<table>");
                    //$("#listing_date").append("<tbody>");
                    response['data']['items'].forEach(element => print_list_of_date(element));
                    //  $("#listing_date").append("</tbody>");
                    //  $("#listing_date").append("</table>");

                }
            }
        })
        return false;
    });

    function print_list_of_date(params) {
        var selectable = "checked";
        if (params.holiday_skip == null) {
            params.holiday_skip = "否";
        } else {
            params.holiday_skip = "是";
            selectable = "disabled";
        }

        $("#listing_date").append("<tr>");
        $("#listing_date").append("<td>" + '<input type="checkbox" checked  value="' + params.startdate + '|' + params.starttime + '" name="selected_timeslot[]"' + selectable + '>' + "</td>");
        $("#listing_date").append("<td>" + params.startdate + "</td>");
        $("#listing_date").append("<td>" + params.starttime + "</td>");
        $("#listing_date").append("<td>" + params.endtime + "</td>");
        $("#listing_date").append("<td>" + params.holiday_skip + "</td>");
        $("#listing_date").append("</tr>");





    }
</script>

<script>
    $('.btn_search_student').on("click", function() {
        $('.background').show();
        $('#search_student_form').show();
        return false;
    })

    $('.background').on("click", function() {
        $(".background").hide();
        $("#search_student_form").hide();
    })

    $('.btn_submit').on('click',function(){
        if($("#selected_student_id").val() == null){
            alert("請選擇學生");
            return false;
        }
    })
</script>

<script>
    $("#btnSearchStudent").on('click', function() {
        $('#studentTable tbody').empty();
        $('#studentTable-scroller').css('overflow-y', 'auto');
        searchStudent();
    });

    function getRemoteData2(remote_url, data, callback, callbackFail) {
        $.ajax({
            //async: false,
            //timeout: 30000, //最長等候回應時間
            type: "GET", //提交類型
            url: remote_url, //提交地址
            data: data, //提交內容
            dataType: 'json', //返回數據類型
            success: function(data) { //請求完成並成功
                if (data.success) {
                    callback(data.data);
                } else {
                    callbackFail();
                }
            },
            error: function(data) { //請求返回錯誤信息
                callbackFail();
            },
            beforeSend: function(XHR) { //请求開始前执行
            },
            complete: function(XHR, status) { //请求完成后最终执行
            }
        });
    }


    function searchStudent() {
        if ($('INPUT[name="general_search"]').val() +
            $('INPUT[name="code"]').val() +
            $('INPUT[name="chi_name"]').val() +
            $('INPUT[name="eng_name"]').val() +
            $('INPUT[name="content1_phone"]').val() +
            $('INPUT[name="ref_no"]').val() == "") {
            alert("未有輸入搜索資料");
            searchNoResults();
            return;
        }

        getRemoteData2(
            "/api/student/search_student", {
                'general_search': $('INPUT[name="general_search"]').val(),
                'student_no': $('INPUT[name="code"]').val(),
                'chi_name': $('INPUT[name="chi_name"]').val(),
                'eng_name': $('INPUT[name="eng_name"]').val(),
                'content1_phone': $('INPUT[name="content1_phone"]').val(),
                'ref_no': $('INPUT[name="ref_no"]').val(),
            },
            searchStudentSuccess,
            getRemoteDataFail2
        );
    }

    function searchStudentSuccess(data) {
        var row;
        if ((data.error == 1) || (data.result.length == 0)) {
            alert("找不到紀錄 !!");
            searchNoResults();
        } else {
            $('#studentTable-scroller').css('overflow-y', 'scroll');
            data.result.forEach(function(record) {
                row = '<tr>';
                row += '<td><input type="hidden" id="grade" value="' + record.grade + '"><input type="hidden" name="search_student_name" value="'+record.chi_name+'"> <input type="hidden" name="search_student_id" value="' + record.id + '"><input class="radio-fix" type="radio" name="student_code" value="' + record.student_no + '" style="top: 0;" /></td>';
                row += '<td><span>' + (record.student_no ? record.student_no : '') + '</span></td>';
                row += '<td><span>' + (record.chi_name ? record.chi_name : '') + '</span></td>';
                row += '<td><span>' + (record.eng_name ? record.eng_name : '') + '</span></td>';
                //row += '<td><span>' + (record.grade ? record.grade : '') + '</span></td>';
                row += '<td><span>' + (record.content1_phone ? record.content1_phone : '') + '</span></td>';
                row += '</tr>';
                //            alert (JSON.stringify(record));
                $('#studentTable tbody').append(row);
            });
        }
    }

    function getRemoteDataFail2() {
        alert("發生錯誤");
        searchNoResults();
    }

    $('#btn_select_confirm').click(function() {

        const el = $('#search_student_form input[name="student_code"]:checked');

        $('#btnAddStudent').remove();
        $('#modal').modal('hide');
        //console.log("This is the value of el:" + el.prev().val());
        if (el.length > 0) {
            $('#student-id-container span').text();
            // $('#selected-month-container').empty().append('<label class="mas-text"><span class="text block">-- 請選擇月份 --</span></label>');
            var student_id = el.prev().val();
            var student_name = el.prev().prev().val();
            console.log('studentId:' + student_id);
            console.log('student_name' + student_name);
            selectedStudentCode = student_id;
            $('#display_student').val(student_name);
            $('#selected_student_id').val(student_id);
            $('#search_student_form').hide();
            $(".background").hide();
        }
    });


    function getRemoteDataFail() {
        alert("發生錯誤");
        searchNoResults();
    }



    function getRemoteData(remote_url, data, callback, callbackFail) {
        $.ajax({
            //async: false,
            //timeout: 30000, //最長等候回應時間
            type: "GET", //提交類型
            url: remote_url, //提交地址
            data: data, //提交內容
            dataType: 'json', //返回數據類型
            success: function(data) { //請求完成並成功
                if (data.success) {
                    callback(data.data);
                } else {
                    callbackFail();
                }
            },
            error: function(data) { //請求返回錯誤信息
                callbackFail();
            },
            beforeSend: function(XHR) { //请求開始前执行
            },
            complete: function(XHR, status) { //请求完成后最终执行
            }
        });
    }

    function searchNoResults() {
        $('#studentTable-scroller').css('overflow-y', 'auto');
        $('#studentTable tbody').empty().append('<tr><td colspan="5" style="text-align:center">沒有任何搜尋結果</td></tr>');
    }
</script>