<link rel="stylesheet" type="text/css" href="/static/css/event-manage.css" />
<div id="page-event-manage">
    <?php include(__DIR__ . '/partials/topbar.php'); ?>
    <div class="form-container">
        <form id="form" class="form-horizontal initialized" enctype="multipart/form-data" method="post" action="/event/save">
            <div class="title"><?php echo $title; ?></div>
            <ul class="table-toolbar" style="text-align: left;">
                <li>
                    <a class="toolbar-element btn btn-default btn-create" href="/event?date=<?php echo $date; ?>">
                        <i class="fa fa-reply" style="margin-right: 8px;"></i>返回
                    </a>
                </li>
            </ul>
            <input type="hidden" value="c" name="mode">
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title">
                    <label for="date_from">開始日期 *</label>
                </div>
                <div class="col-sm-9 mas-box">
                    <div class="input-group clickable" datetimepicker format="YYYY-MM-DD">
                        <input class="form-control" type="text" name="date_from" value="<?php echo $date_from; ?>">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="date_to">結束日期 *</label></div>
                <div class="col-sm-9 mas-box">
                    <div class="input-group clickable" datetimepicker format="YYYY-MM-DD">
                        <input class="form-control" type="text" name="date_to" value="<?php echo $date_to; ?>">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="s2id_autogen1">課室 *</label></div>
                <div class="col-sm-9 mas-box">
                    <select id="room_id" name="room_id" style="width: 100%" select2>
                        <option value="-1">-- 請選擇課室 --</option>
                        <?php foreach ($rooms as $k => $v) : ?>
                            <?php //TODO: id => student_id 
                            echo sprintf(
                                '<option value="%s"%s>%s</option>',
                                $v['id'],
                                $v['id'] == $room_id ? ' selected' : '',
                                $v['name']
                            );
                            ?>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="s2id_autogen4">教師(主教)*</label></div>
                <div class="col-sm-9 mas-box">
                    <select id="pic_1" name="pic_1" style="width: 100%" select2>
                        <option value="-1">-- 請選擇教師(主教) --</option>
                        <?php foreach ($teachers as $k => $v) : ?>
                            <?php //TODO: id => student_id 
                            $name = $v['chi_name'] ?? sprintf('%s %s', $v['eng_firstname'], $v['eng_lastname']);
                            echo sprintf(
                                '<option value="%s"%s>%s</option>',
                                $v['id'],
                                $v['id'] == $pic_1 ? ' selected' : '',
                                $name
                            );
                            ?>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="s2id_autogen2">教師(助教)</label></div>
                <div class="col-sm-9 mas-box">
                    <select id="pic_2" name="pic_2" style="width: 100%" select2>
                        <option value="-1">-- 請選擇教師(助教) --</option>
                        <?php foreach ($teachers as $k => $v) : ?>
                            <?php //TODO: id => student_id 
                            $name = $v['chi_name'] ?? sprintf('%s %s', $v['eng_firstname'], $v['eng_lastname']);
                            echo sprintf(
                                '<option value="%s"%s>%s</option>',
                                $v['id'],
                                $v['id'] == $pic_2 ? ' selected' : '',
                                $name
                            );
                            ?>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="remark">備註</label></div>
                <div class="col-sm-9 mas-box"><textarea id="remark" class="form-control mas-textarea" rows="3" name="remark" placeholder="輸入備註" style="background-color: rgb(255, 255, 255);"></textarea></div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="s2id_autogen3">課程 *</label></div>
                <div class="col-sm-9 mas-box">
                    <select id="course_id" name="course_id" style="width: 100%" select2>
                        <option value="-1">-- 請選擇課程 --</option>
                        <?php foreach ($courses as $k => $v) : ?>
                            <?php //TODO: id => student_id 
                            echo sprintf(
                                '<option value="%s"%s>%s</option>',
                                $v['id'],
                                $v['id'] == $course_id ? ' selected' : '',
                                $v['name']
                            );
                            ?>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="weekdays">課程日</label></div>
                <div class="col-sm-9 mas-box">
                    <table class="weekday-list-container">
                        <thead>
                            <tr>
                                <th>日</th>
                                <th>一</th>
                                <th>二</th>
                                <th>三</th>
                                <th>四</th>
                                <th>五</th>
                                <th>六</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <?php foreach ($default_weekdays as $_index => $_weekdays)
                                    if (array_key_exists($_index, $weekdays)) {
                                        echo '<td><input type="text" timepicker name="' . $_weekdays . '" placeholder="時間"
                                        autocomplete="off" style="background-color: rgb(255, 255, 255);" value="' . $weekdays[$_index] . '"/>';
                                    } else {
                                        echo '<td><input type="text" timepicker name="' . $_weekdays . '" placeholder="時間"
                                        autocomplete="off" style="background-color: rgb(255, 255, 255);"/>';
                                    }
                                ?>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="form-footer">
                <a class="btn btn-footer cancel" href="javascript:window.location.reload(true)">重設</a>
                <input type="submit" class="btn btn-footer submit" value="儲存" />
            </div>
        </form>
    </div>
</div>
<script>
    $('.submit').click(() => {
        // Check if input time has been typed into one of weekdays
        let validated = false;
        $('.weekday-list-container input').each((_, element) => {
            if ($(element).val().length > 0) {
                validated = true;
                return true;
            }
        });
        if (!validated) {
            alert('請輸入最少一個課程日。');
            return false;
        }
        if ($('#date_from').val() > $('#date_to').val()) {
            alert('結束日期不能設定在起始日期之前。')
            return false;
        }
        return validated;
    });
</script>