<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>
    <div class="content_no_margin">
        <table class="partial_form_table">
            <thead></thead>
            <form method="post" action="/backend/event/makeup_create">
                <tbody>
                    <tr>
                        <td class="partial_form_label">課程日期</td>
                        <td colspan="2"><input type='text' class="form-control" readonly value="<?php echo date('Y-m-d', $timeslot_information['startdate']) ?>"></td>
                        <td class="partial_form_label">課程時間</td>
                        <td colspan="2"><input type="text" class="form-control" readonly value="<?= $timeslot_information['starttime'] . " - " . $timeslot_information['endtime'] ?>"></td>
                    </tr>
                    <tr>
                        <td class="partial_form_label">課程名稱</td>
                        <td colspan="2"><input type='text' class="form-control" readonly value="<?= $course_information['name'] ?>"></td>
                        <td class="partial_form_label">授課導師</td>
                        <?php
                        $staff = $event_information['staff'];
                        if (!empty($event_information['assist'])) {
                            $staff .= ", " . $event_information['assist'];
                        }
                        ?>
                        <td colspan="2"><input type="text" class="form-control" readonly value="<?= $staff ?>"></td>
                    </tr>
                    <tr>
                        <td class="partial_form_label">授課地點</td>
                        <td colspan="2"><input type="text" class="form-control" readonly value="<?= $event_information['location'] ?>"></td>
                        <!-- <td class="partial_form_label">搜尋學生</td> -->
                        <td></td>
                        <!-- <td colspan="2"><button class="btn search_button" style="background-color:rgba(121,201,66)!important;">搜尋學生</button></td> -->
                        <td colspna="2"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <?php if (sizeof($enrollment_item) == 0) { ?>
                            <td colspan="5" style="background-color:rgba(0,255,0,0.2);text-align:center;height:50px;font-size:1.2em">未有任何報名記錄</td>
                        <?php } else { ?>
                            <td colspan="5">
                                <table class="table form_table student_table">
                                    <thead>
                                        <tr>
                                            <th width="10%"></th>
                                            <th width="30%">學生</th>
                                            <th width="30%">調堂記錄</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                        foreach ($enrollment_item as $student) {
                                        ?>
                                            <tr>
                                                <?php $disabled = "";
                                                 if($student['next_txn_id'] != null){$disabled = "disabled";} ?>
                                                <td><input type="checkbox" class="checkbox-check" name="event_enrollment_item_id" <?=$disabled?> value="<?= $student['enrollment_item_id'] ?>" data-student_id="<?= $student['student_id'] ?>"></td>
                                                <td><?= $student['chi_name'] ?></td>
                                                <td><?php if ($student['next_txn_id'] != null) {
                                                        $d = $this->Event_enrollment_item_model->detail_in_nextTimeslot($student['next_txn_id']);
                                                        echo "己調至" . date('d-m-Y', $d['startdate']) . "的課堂";
                                                    } ?></td>

                                            </tr>
                                        <?php } ?>
                                    </tbody>
                                </table>
                            </td>
                        <?php } ?>
                    </tr>
                    <tr>
                        <td>上堂日期</td>
                        <td colspan="2"><input id="selected_date" class="form-control" type="date"></td>
                        <td colspan="3">
                            <input type="checkbox">顯示當天所有課程時段
                        </td>
                    </tr>
                    <tr>
                        <td>課程及時段</td>
                        <td colspan="5"><select class="select" disabled name="event_timeslot_id" id="select_date">
                                <option value="0">請選擇學生及上課時段</option>

                            </select></td>
                    </tr>
                    <tr>
                        <input type="hidden" name="id" value="<?= $timeslot_information['id'] ?>">
                        <td colspan='2' style="padding-left:100px"><button class="btn" type="submit" id="submit_button" disabled style="background-color:rgba(121,201,66)!important;">確認調堂</td>

                        <td colspan='3' style="padding-right:100px"><button class="btn" style="background-color:rgba(121,201,66)!important;">重設</td>
            </form>

            </tr>
            </tbody>
        </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>
    $('.search_button').on("click", function() {
        $('.background').show();
        $('#search_student_form').show();
    });

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

<script>
    var event_id = <?php echo $event_information['id'] ?>;
    var timeslot_id = <?php echo $timeslot_information['id'] ?>;


    var date;



    var checkboxs = [];
    var ids = [];
    var studentids = [];

    function eventTimeslotHandler() {

        checkboxs = $(".checkbox-check:checked");
        date = $('#selected_date').val();

        if ($('#selected_date').val() == "" || $("#selected_date").val() == '-1') {
            console.log("Please select a valid date");
            return false;
        }

        if (checkboxs.length == 0) {
            console.log("Please pick a student first");
            return false;
        }

        if (checkboxs.length > 0) {
            checkboxs.each(function() {
                const id = $(this).val();
                const student_id = $(this).data("student_id");
                console.log("id = " + id);
                console.log('student_id = ' + student_id);
                ids.push(id);
                studentids.push(student_id);
            })

        }

        $.ajax({

            type: "GET",

            url: '/backend/event_makeup_next_timeslot/index',

            data: {
                event_id: event_id,
                timeslot_id: timeslot_id,
                enrollment_item_ids: ids,
                student_ids: studentids,
                course_unlock: $('input[name="course_unlock"]:checked').length > 0 ? 'true' : 'false',
                date: date
            },
            dataType: 'JSON',
            success: function(res) {
                console.log(res);

                if (res['data']['next_timeslots'].length == 0) {
                    console.log("This place is worth nothing");
                    $('#select_date option').remove();
                    $('#select_date').append(new Option("該日並沒有相同的課程", "0"));
                }

                if (res['data']['next_timeslots'].length != 0) {
                    var timeslot = res['data']['next_timeslots'];
                    var json_keys = Object.keys(timeslot);
                    $('#select_date option').remove();
                    $("#select_date").removeAttr("disabled");
                    $('#submit_button').removeAttr("disabled");
                    json_keys.forEach(element =>
                        //console.log(timeslot[element]["timeslot"])

                        $("#select_date").append(new Option(timeslot[element]["timeslot"], element)));




                }



            }


        })






    }


    $('#selected_date').on('input', function() {
        eventTimeslotHandler();
    });


    $('.checkbox-check').on('change', function() {
        eventTimeslotHandler();
    })

    $("#submit_button").on('click', function() {
        const checkedBoxes = $(".checkbox-check:checked");

        if (checkedBoxes.length > 0) {

            checkedBoxes.each(function() {

                const id = $(this).val();

                const inputNamePrefix = "ids[" + id + "]";

                $("<input />").attr("type", "hidden").attr("name", inputNamePrefix).appendTo("form");

            });
        }
    })
</script>