<div class="educontent mt30 mb80">
  <%= labelled_form_for @course do |f| %>
  <div class="mb10 edu-back-white">
    <p class="padding10-20 bor-bottom-greyE font-18 color-grey-3">新建课堂</p>
    <div class="padding30-20">
      <p class="color-grey-6 font-16 mb15">课程名称</p>
      <div class="clearfix">
        <span class="fl mr30 color-orange pt10">* </span>
        <div class="pr fl with30">
          <input type="text" name="course[course_list]" autocomplete="off" style="width: 100%;" id="new_course_list" class="input-100-45 greyInput" maxlength="100" placeholder="例如：数据结构">
          <ul class="course_list_ul">
          </ul>
        </div>
        <p class="fl font-12 color-grey-9 mt10 ml10">（错误示例：数据结构2017本部；数据结构2017秋季；数据结构2017电子商务1班）</p>
        <span class="color-orange mt10 ml10 fl font-12 none" id="new_course_syllabus_notice"><i class="fa fa-exclamation-circle mr3 font-14"></i>必填项</span>
      </div>
    </div>
    <div class="pl20 pr20 pb30">
      <p class="color-grey-6 font-16 mb15">课堂名称</p>
      <div class="clearfix">
        <span class="fl mr30 color-orange pt10">* </span>
        <div class="fl with30">
          <input type="text" name="course[name]" autocomplete="off" id="new_course_name" class="input-100-45 fl greyInput" maxlength="100" placeholder="例如：数据结构2016秋季班级" onkeyup="regex_course_name('new');">
        </div>
        <p class="fl font-12 color-grey-9 mt10 ml10">（如果本学期包含多个班级，只需创建一个课堂然后在课堂内部建立不同的分班）</p>
        <span class="color-orange mt10 ml10 fl font-12 none" id="new_course_name_notice"><i class="fa fa-exclamation-circle mr3 font-14"></i>必填项</span>
      </div>
    </div>
  </div>
  <div class="mb10 edu-back-white">
      <div class="padding30-20">
        <div class="clearfix mb30">
            <p class="color-grey-6 font-16 mb15">总学时</p>
            <input type="text" name="period" id="new_class_period" class="winput-90-40 greyInput fl ml40" onkeyup="regex_course_class_period('new');" placeholder="例如：30" maxlength="6">
            <span class="color-orange ml10 fl font-12 mt10 none" id="new_course_class_period_notice"><i class="fa fa-exclamation-circle mr5 font-14" ></i>请输入正整数</span>
        </div>
        <div class="clearfix mb30">
          <p class="color-grey-6 font-16 mb15">学分</p>
          <input type="text" id="new_course_credit" name="credit" maxlength="4" onkeyup="regex_course_credit('new');" class="winput-90-40 greyInput fl ml40" onkeyup="regex_course_credit('new');" placeholder="例如：4">
          <span class="color-orange ml10 fl font-12 mt10 none" id="new_course_credit_notice"><i class="fa fa-exclamation-circle mr5 font-14" ></i>请输入正整数或保留一位小数的浮点数</span>
        </div>
        <div class="clearfix">
          <p class="color-grey-6 font-16 mb15">结束时间</p>
          <input type="text" id="new_course_end_date" class="winput-240-40 greyInput fl ml40" name="end_date" placeholder="请选择结束日期">
          <span class="color-orange ml10 fl font-12 mt10 none" id="new_course_end_date_notice"><i class="fa fa-exclamation-circle mr5 font-14" ></i>结束日期必须晚于当前日期</span>
        </div>
      </div>
  </div>
  <div class="mb10 edu-back-white">
    <div class="padding30-20 clearfix">
      <p class="color-grey-6 font-16 mb15">公开设置</p>
      <input id="course_is_public" name="course[is_public]" class="magic-checkbox" type="checkbox" value="1">
      <label for="course_is_public" class="ml40">公开课堂<span class="color-grey-8">（选中后本课堂对所有用户可见，否则仅本课堂成员可见）</span></label>
    </div>
  </div>
  <div class="clearfix mt30">
    <a href="javascript:void(0)" class="defalutSubmitbtn fl mr20" onclick="submit_new_course();">提交</a>
    <%= link_to '取消', courses_path, :class => 'defalutCancelbtn fl' %>
  </div>
  <% end %>
</div>
<script>
    $(function(){
        var course_list_name = "";
        $('#new_course_end_date').datetimepicker({
            allowBlank:true,
            lang:'ch',
            format:'Y-m-d',
            formatDate:'Y-m-d',
            timepicker:false,
            validateOnBlur:false
        });

        $("body").click(function(event){
            $(".course_list_ul").hide();
        });

        $("#new_course_list").on('input', function(e){
            throttle(search_course_list, window, e);
        });
        $("#new_course_list").on('blur', function(e){
            if($("#new_course_name").val() == ""){
                $("#new_course_name").val($("#new_course_list").val());
            } else{
                if($("#new_course_name").val().indexOf(course_list_name) == 0){
                    $("#new_course_name").val($("#new_course_name").val().replace(course_list_name, $("#new_course_list").val()));
                } else{
                    $("#new_course_name").val($("#new_course_list").val() + $("#new_course_name").val());
                }
            }
            regex_course_name('new');
            course_list_name = $("#new_course_list").val();
        });
        $("#new_course_list").on('click', function (e) {
            search_course_ajax($("#new_course_list").val().trim());
            e.stopPropagation();
        });
        $(".course_list_ul").on('click', 'p', function(event) {
            $("#new_course_list").val($(this).html());
            if($("#new_course_name").val() == ""){
                $("#new_course_name").val($("#new_course_list").val());
            } else{
                if($("#new_course_name").val().indexOf(course_list_name) == 0){
                    $("#new_course_name").val($("#new_course_name").val().replace(course_list_name, $("#new_course_list").val()));
                } else{
                    $("#new_course_name").val($("#new_course_list").val() + $("#new_course_name").val());
                }
            }
            regex_course_name('new');
            $(".course_list_ul").hide();
            course_list_name = $(this).html();
            event.stopPropagation();
        });
    });
</script>