<?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="/slip"><i class="fa fa-chevron-left" style="margin-right: 8px;"></i>返回</a></li>
</ul>

<?php echo form_open('slip/add', array("class" => "form-horizontal form-container")); ?>

<div class="form-group">
    <label for='title' class="col-sm-4 control-label">標題*</label>
    <div class="col-sm-8">
        <input type='text' id='title' name='title'>
    </div>
</div>
<div class="form-group">
    <label for='content' class="col-sm-4 control-label">內容*</label>
    <div class="col-sm-8">
        <textarea id='content' name='content' rows='5' cols='70'></textarea>
    </div>
</div>
<div class="form-group">
    <label for='remark' class="col-sm-4 control-label">備註*</label>
    <div class="col-sm-8">
        <textarea id='remark' name='remark' rows='5' cols='70' style="width: 100%"></textarea>
    </div>
</div>
<div class="form-group">
    <label for="issuedt" class="col-sm-4 control-label">發佈日期*</label>
    <div class='col-sm-8'>
        <div class='input-group date' id='datetimepicker1'>
            <input id="issuedt" name="issuedt" type='text' class="form-control" value="<?php echo $start_datetime; ?>" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div class="form-group">
    <label for="duedt" class="col-sm-4 control-label">到期日</label>
    <div class="col-sm-8">
        <div class='input-group date' id='datetimepicker1'>
            <input id="duedt" type='text' class="form-control" value="<?php echo $end_datetime; ?>" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<input type="hidden" name="push" id="push" value="1" />
<!-- <div class="form-group">
    <label for='push' class="col-sm-4 control-label">推播</label>
    <div class="col-sm-8">
        <input type='checkbox' name="push" id="push" value="0" />
    </div>
</div> -->
<div class="form-group">
    <label for='option_attend' class="col-sm-4 control-label">出席 / 不出席</label>
    <div class="col-sm-8">
        <input type='checkbox' name="option_attend" id="option_attend" value="0" />
    </div>
</div>
<div class="form-group">
    <label for='option_opt' class="col-sm-4 control-label">是 / 否</label>
    <div class="col-sm-8">
        <input type='checkbox' name="option_opt" id="option_opt" value="0" />
    </div>
</div>
<div class="form-group">
    <label for='option_agree' class="col-sm-4 control-label">同意 / 不同意</label>
    <div class="col-sm-8">
        <input type='checkbox' name="option_agree" id="option_agree" value="0" />
    </div>
</div>
<div class="form-group">
    <label for='send_all' class="col-sm-4 control-label">發送給所有學生</label>
    <div class="col-sm-8">
        <input type='checkbox' name="send_all" id="send_all" value="0" />
    </div>
</div>
<?php echo $search_student; ?>
<ul style="list-style: none;">
    <li><i>* 勾選「發送給所有學生」時，會覆蓋「選擇學生」的選項。</i></li>
    <li><i>* 若要重覆執行推播，必須重新創建。</i></li>
</ul>
<div class="form-group">
    <button type='button' class="submit btn btn-success">提交</button>
    <a href="/slip" class="btn btn-cancel">取消</a>
</div>

<?php echo form_close(); ?>

<script>
    let student_ids = [];
    // Whenever the document is ready
    $(document).ready(function() {
        $('#datetimepicker1, #datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            locale: moment.locale('zh-hk')
        });
    });

    // Form submission
    $('.submit').on('click', function() {
        console.log(student_ids);
        if (validform()) {
            $('.submit').attr('disabled', true);
            $.ajax({
                url: '/slip/save',
                method: 'post',
                data: {
                    'title': $('#title').val().trim(),
                    'content': $('#content').val().trim(),
                    'remark': $('#remark').val().trim(),
                    'issued_date': $('#issuedt').val().split(' ')[0].trim(),
                    'issued_time': $('#issuedt').val().split(' ')[1].trim(),
                    'due': $('#duedt').val().trim(),
                    'push': $('#push').val(),
                    'option_attend': $('#option_attend').val(),
                    'option_opt': $('#option_opt').val(),
                    'option_agree': $('#option_agree').val(),
                    'send_all': $('#send_all').val(),
                    'student_ids': student_ids,
                    'mode': 'c'
                },
                dataType: 'json',
                success: function(response) {
                    if (response !== null) {
                        alert('儲存成功');
                        history.go(-1);
                    }
                }
            });
        }
        return false;
    });

    function validform() {
        var valid = true;
        var msg = '';
        if (student_ids.length === 0 && $('#send_all:checked').length === 0) {
            valid = false;
            msg += "請勾選發送給所有學生 或 選擇學生!\n";
        }
        if ($('#title').val() === '') {
            valid = false;
            msg += "請輸入標題!\n";
        }
        if ($('#content').val() === '') {
            valid = false;
            msg += "請輸入內容!\n";
        }
        if ($('#remark').val() === '') {
            valid = false;
            msg += "請輸入備註!\n";
        }
        if ($('#send_all').val() === '0' && ($('#course_id').val() === '-1' || $('#student_ids').val() === '')) {
            valid = false;
            msg += "請選擇所有學生 或 選擇課生及學生 !\n";
        }
        if (msg !== '')
            alert(msg);
        return valid;
    }
</script>