<?php ?>

<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />

<h3 class="text-left">創建學生表現評語</h3>

<ul class="table-toolbar" style="text-align: left;">
    <li><a class="toolbar-element btn btn-default btn-create" href="/<?php echo $controller; ?>"><i class="fa fa-chevron-left" style="margin-right: 8px;"></i>返回</a></li>
</ul>

<form class="form-horizontal form-container">
    <div class="form-group">
        <label for='courses' class="col-sm-4 control-label">課程</label>
        <div class="col-sm-8">
            <select id="courses" name="courses" style="width: 100%" select2>
                <option value=''>-- 請選擇課程 --</option>
                <?php foreach ($courses as $k => $v) : ?>
                    <option value=" <?php echo  $v['id'] ?>"><?php echo  $v['name'] ?></option>
                <?php endforeach; ?>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for='students' class="col-sm-4 control-label">學生</label>
        <div class="col-sm-8">
            <select id='students' name='students' style="width: 100%" select2>
                <option value=''>-- 請選擇學生 --</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for='date' class="col-sm-4 control-label">評語時間</label>
        <div class="col-sm-8">
            <div class='input-group date' id='datetimepicker1'>
                <input id="date" name="date" type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>

        </div>
    </div>
    <div class="form-group">
        <label for='language' class="col-sm-4 control-label">選擇語言</label>
        <div class="col-sm-8">
            <select id='language' name='language' style="width: 100%" select2>
                <option value='tc' selected> 繁 </option>
                <option value='en'> EN </option>
            </select>
        </div>
    </div>
    <div class="form-group" class="col-sm-4 control-label">
        <label for='comments' class="col-sm-4 control-label">學生表現評語</label>
        <div class="col-sm-8">
            <select id='comments' name='comments' style='height:400px; width: 100%' select2 multiple="multiple">
                <option value='' disabled>-- 請選擇一至三個 --</option>
            </select>
        </div>
    </div>
    <?php if ($controller == 'comment_gro') : ?>
        <div class="form-group">
            <label for='tailor_comment' class="col-sm-4 control-label">個別評語</label>
            <div class="col-sm-8">
                <textarea id='tailor_comment' name='tailor_comment' rows='5' cols='70'></textarea>
            </div>
        </div>
        <ul style="list-style: none;">
            <li><i>* 當輸入個別評語後，系統會優先顯示個別評語，而不顯示學生表現評語的任何選項。</i></li>
        </ul>
    <?php endif; ?>

    <div class="form-group">
        <button type='button' id='t_submit' class="btn btn-success">儲存</button>
        <a href="/<?php echo $controller; ?>" class="btn btn-cancel">取消</a>
    </div>
</form>

<script>
    let commentOptions = null;

    const updateLanguage = () => {
        const selectedLanguage = $('#language').find('option:selected').val();
        if (commentOptions == null) {
            commentOptions = $('#comments option').clone();
        }
        _commentOptions = commentOptions.clone();
        console.log(_commentOptions);
        _commentOptions = $.grep(_commentOptions, function(element, index) {
            const s = $(element).text();
            if (selectedLanguage == 'tc') {
                if (/[^\u0000-\u00ff]/.test(s)) {
                    return true;
                } else {
                    return false;
                }
            } else {
                if (/[^\u0000-\u00ff]/.test(s)) {
                    return false;
                } else {
                    return true;
                }
            }
        });
        $('#comments option').remove();
        $('#comments').append(_commentOptions);
        $('#comments').select2();
    }

    $(document).ready(function() {
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD'
        });

        $.ajax({
            url: '/comment/listing',
            method: 'get',
            dataType: 'json',
            success: function(response) {
                if (response !== null) {
                    $('#div_comments').show();
                    $.each(response, function(i, v) {
                        $.each(v, function(idx, v1) {
                            $('#comments').append('<option value="' + v1.id + '">' + v1
                                .comment + '</option>');
                        });
                    });

                    updateLanguage();
                    $('#language').change(() => {
                        updateLanguage();
                    });
                }
            }
        });

        $('#courses').on('change', function() {
            var course_id = $(this).val().trim();
            $.ajax({
                url: '/search_student_by_course',
                method: 'get',
                data: {
                    id: course_id
                },
                dataType: 'json',
                success: function(response) {
                    if (response !== null) {
                        $("#students").empty();
                        //                        $('#div_students').show();
                        $.each(response, function(i, v) {
                            $.each(v, function(idx, v1) {
                                //                                   console.log(v1.student_id); 
                                $('#students').append('<option value="' + v1
                                    .id + '">' + v1
                                    .chi_name + '</option>');

                                $('#students').select2();
                            });
                        });
                    }
                }
            });
        });

        $('#t_submit').on('click', e => {
            if (validform()) {
                $('#t_submit').attr('disabled', true);
                $.ajax({
                    url: '/<?php echo $controller; ?>/save',
                    method: 'post',
                    data: {
                        'comments': $('#comments').val(),
                        'student_id': $('#students').val(),
                        'student_chi_name': $('#students option:selected').text(),
                        'course_id': $('#courses').val(),
                        'course_name': $('#courses option:selected').text(),
                        'tailor_comment': $('#tailor_comment').length ? $('#tailor_comment').val() : null,
                        'date': $('#date').val()
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response !== null) {
                            alert('已儲存學生表現評語');
                            window.location.href = '/<?php echo $controller; ?>';
                        }
                    }
                });
            }
            return false;
        });
    });

    function validform() {
        var valid = true;
        var msg = '';
        if ($('#courses').val() === '') {
            msg += '請選擇課程！\n';
            valid = false;
        }
        if ($('#students').val() === '') {
            msg += '請選擇學生！\n';
            valid = false;
        }
        if ($('#date').val() === '') {
            msg += '請選擇評語時間！\n';
            valid = false;
        }
        if ($('#language').val() === '') {
            msg += '請選擇語言！\n';
            valid = false;
        }
        if ($('#comments').val() === null) {
            msg += '至少顯示一項！\n';
            valid = false;
        } else if ($('#comments :selected').length > 3) {
            msg += '只能顯示最多三項！\n';
            $("#comments").val($("#comments option:first").val());
            valid = false;
        }
        if (msg !== '')
            alert(msg);
        return valid;
    }
</script>