<%@ page language="C#" autoeventwireup="true" inherits="user_Booking_Booking, ALL" enableEventValidation="false" %>

<%@ Register Src="~/user/MyHeader.ascx" TagPrefix="uc1" TagName="MyHeader" %>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>预订会议</title>
    <link href="/control/plugin/bootstrap3/css/bootstrap.min.css" rel="stylesheet" />
    <script src="/control/js/jquery.js"></script>
    <link href="/user/css/style.css?v=2" rel="stylesheet" />
    <script src="/control/plugin/bootstrap3/js/bootstrap.min.js"></script>

    <script src="/control/plugin/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="/control/plugin/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js"></script>
    <link href="/control/plugin/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />
    <script src="/control/plugin/autocomplete/jquery.autocomplete.js"></script>

    <style type="text/css">

        .emp{
             margin-left:5px;
             font-size:18px;
             padding:5px;
             border:1px solid #c3c3c3;
             display:inline-block;
        }
        
    </style>
</head>
<body>
    <uc1:MyHeader runat="server" ID="MyHeader" />
    <div class="container-fluid">
        <div class="col-md-8">
            <div class="panel">
                <div class="panel-body">
                    <h3 class="page-header">预订会议室<small> 填写会议基本信息预订会议室</small></h3>
                    <form class="form-horizontal" id="from1" runat="server">
                        <!-- Add.aspx -->

                        <div class="form-group">
                            <label class="col-sm-2 control-label">会议名称<span class='rd'>*</span>：</label>
                            <div class="col-sm-9">
                                <asp:TextBox ID="txtm_MeetingName" runat="server" MaxLength="50" CssClass="form-control"></asp:TextBox>
                                <p class="help-block">
                                      <asp:RequiredFieldValidator ID="rfvm_MeetingName" runat="server" ForeColor="Red" ErrorMessage="请填写会议名称" Display="Dynamic" ControlToValidate="txtm_MeetingName"></asp:RequiredFieldValidator>
                                </p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">会议室<span class='rd'>*</span>：</label>
                            <div class="col-sm-9">
                                <asp:Label ID="litRoomName" runat="server" Font-Size="21px"></asp:Label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                开始日期<span class='rd'>*</span> ：
                            </label>
                            <div class="col-sm-9">
                                <asp:TextBox ID="txtStartDate" runat="server" CssClass="form-control"></asp:TextBox>
                                <script type="text/javascript" >
                                    $(function () {
                                        $("#txtStartDate").datepicker({
                                            language: "zh-CN",
                                            format: "yyyy-mm-dd",
                                            todayBtn: "linked",
                                            todayHighlight: true,
                                            autoclose: true  
                                        });
                                        $("#txtRptEndDate").datepicker({
                                            language: "zh-CN",
                                            format: "yyyy-mm-dd",
                                            autoclose:true,
                                            todayBtn: "linked",
                                            todayHighlight: true
                                        });
                                        $("#txtRptEndMonth").datepicker({
                                            language: "zh-CN",
                                            format: "yyyy-mm",
                                            startView: 1,
                                            minViewMode: 1,
                                            maxViewMode: 1,
                                            autoclose:true,
                                            todayBtn: "linked",
                                            todayHighlight: true
                                        });
                            
                                    });
                                </script>
                                <p class="help-block">
                                    <asp:RequiredFieldValidator ID="rfvtxtStartDate" runat="server" ErrorMessage="请填写起始日期" 
                                        ForeColor="Red" Display="Dynamic" ControlToValidate="txtStartDate">
                                    </asp:RequiredFieldValidator>
                                </p>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                开始时间<span class='rd'>*</span> ：
                            </label>
                            <div class="col-sm-3">
                                <asp:DropDownList runat="server" id="ddlStartTime" CssClass="form-control">
        
                                </asp:DropDownList>
                                <p class="help-block">
                                    <asp:RequiredFieldValidator ID="rfvm_startDate" runat="server" ErrorMessage="请填写起始时间" ForeColor="Red" Display="Dynamic" ControlToValidate="ddlStartTime"></asp:RequiredFieldValidator>
                                </p>
                            </div>
                            <label class="col-sm-2 control-label">时长<span class='rd'>*</span> ：</label>
                            <div class="col-sm-4"> 
                                <asp:DropDownList ID="ddlDuration" runat="server" CssClass="form-control">
                                </asp:DropDownList>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="col-sm-2 control-label">重复类型<span class='rd'>*</span>：</label>
                            <label class="checkbox-inline">
                                <asp:RadioButton ID="rbNotRpt" runat="server" GroupName="cf" Checked="true" />
                                无重复
                            </label>
                            <label class="checkbox-inline">
                                <asp:RadioButton ID="rbWeekRpt" runat="server" GroupName="cf" />
                                每周
                            </label> 

                             <label class="checkbox-inline">
                                <asp:RadioButton ID="rbMonthRpt" runat="server" GroupName="cf" />
                                每月
                            </label>
                        </div>

                        <script type="text/javascript">

                            $(function () {
                                var wrp = $("#rbWeekRpt").change(function () {
                                    weekRpt();
                                }).get(0).checked;

                                $("#rbNotRpt").change(function () {
                                    NotRpt();
                                })

                                var mrpt = $("#rbMonthRpt").change(function () {
                                    MonthRpt();
                                }).get(0).checked;
                     
                                if (wrp) {
                                    weekRpt();
                                }
                        
                                if (mrpt) {
                                    MonthRpt();
                                }
                            });
                            function weekRpt() {
                                $("#cfz").show();
                                $("#cfend").show();
                                $("#cfendMonth").hide();
                            }
                            function NotRpt() {
                                $("#cfz").hide();
                                $("#cfend").hide();
                                $("#cfendMonth").hide();
                            }
                            function MonthRpt() {
                                $("#cfz").hide();
                                $("#cfend").hide();
                                $("#cfendMonth").show();
                            }
                        </script>

                        <div class="form-group" id="cfz" style="display:none">
                            <div class="col-sm-9 col-sm-offset-2">
                                <label class="checkbox-inline">
                                    <asp:CheckBox ID="rb_w1" runat="server" GroupName="w" />
                                    周一
                                </label>
                                <label class="checkbox-inline">
                                    <asp:CheckBox ID="rb_w2" runat="server" GroupName="w" />
                                    周二
                                </label>
                                <label class="checkbox-inline">
                                    <asp:CheckBox ID="rb_w3" runat="server" GroupName="w" />
                                    周三
                                </label>
                                <label class="checkbox-inline">
                                    <asp:CheckBox ID="rb_w4" runat="server" GroupName="w" />
                                    周四
                                </label>
                                <label class="checkbox-inline">
                                    <asp:CheckBox ID="rb_w5" runat="server" GroupName="w" />
                                    周五
                                </label>
                                <label class="checkbox-inline">
                                    <asp:CheckBox ID="rb_w6" runat="server" GroupName="w" />
                                    周六
                                </label>
                                <label class="checkbox-inline">
                                    <asp:CheckBox ID="rb_w0" runat="server" GroupName="w" />
                                    周日
                                </label>
                            </div>
                        </div>
 
                        <div class="form-group" id="cfend" style="display:none">
                            <label class="col-sm-2 control-label">重复结束于<span class='rd'>*</span>：</label>
                            <div class="col-sm-9">
                                <asp:TextBox ID="txtRptEndDate" runat="server" MaxLength="255" Rows="4" CssClass="form-control" ></asp:TextBox>
                                <p class=" help-block"> <span id="rfvm_EndDate" style="color: red; display:none;">请填写会议名称</span></p>
                            </div>
                        </div>
                    
                        <div class="form-group" id="cfendMonth" style="display:none">
                            <label class="col-sm-2 control-label">重复结束于<span class='rd'>*</span>：</label>
                            <div class="col-sm-9">
                                <asp:TextBox ID="txtRptEndMonth" runat="server" MaxLength="255" Rows="4" CssClass="form-control" ></asp:TextBox>
                                <p class=" help-block">请选择截至月份(最后一次开会月份) 
                                    <span id="rfvm_EndMonth" style="color: red; display:none;">请选择截至月份</span>
                                </p>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="col-sm-2 control-label">参与人员<span class='rd'>*</span>：</label>
                              <div class="col-sm-2">

                                  <asp:DropDownList ID="ddlSearchType" runat="server" CssClass="form-control">
                                      <asp:ListItem Value="e">用户</asp:ListItem>
                                      <asp:ListItem Value="m">会议</asp:ListItem>
                                      <asp:ListItem Value="d">机构</asp:ListItem>
                                  </asp:DropDownList>
                                  </div>

                            <div class="col-sm-7">
                                <asp:TextBox ID="txtEmployeeSearch" runat="server" MaxLength="255" Rows="4" CssClass="form-control" ></asp:TextBox>
                                <p class=" help-block">支持拼音首字母缩写，选择(人员,会议,机构)可限定搜索范围</p>
                            </div>
                        </div> 

                        <div class="form-group">
                          <div class="col-sm-9 col-sm-offset-2 "  id="emplist">
                              <asp:Literal ID="litCurrentUser" runat="server"></asp:Literal>
                           </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">外部人员<span class='rd'>*</span>：</label>
                            <div class="col-sm-9">
                                <asp:TextBox ID="txtExternalPerson" runat="server" MaxLength="255" Rows="4" CssClass="form-control" ></asp:TextBox>
                                <p class=" help-block">支持拼音首字母缩写快速查询</p>
                            </div>
                        </div> 

                        <div class="form-group">
                          <div class="col-sm-9 col-sm-offset-2 "  id="eplist">
              
                           </div>
                        </div>
                        

                        <div class="form-group">
                            <label class="col-sm-2 control-label">会议简要说明<span class='rd'>*</span>：</label>
                            <div class="col-sm-9">
                                <asp:TextBox ID="txtm_note" runat="server" MaxLength="255" Rows="4" TextMode="MultiLine" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-9 ">
                                <asp:Button ID="btnSubmit" runat="server" Text="创建会议" OnClientClick="return befSubmit()" CssClass="btn btn-primary btn-lg " OnClick="btnSubmit_Click" />
                                <script type="text/javascript">

                                    function befSubmit() {
                                        if (Page_ClientValidate())
                                        {
                                            var WeekRpt = $("#rbWeekRpt").get(0).checked;
                                            if (WeekRpt) {
                                                var rpted = $.trim($("#txtRptEndDate").val());
                                                if (rpted=="") {
                                                    $("#rfvm_EndDate").show();
                                                    return false;
                                                }
                                            } else {
                                                var monthRpt = $("#rbMonthRpt").get(0).checked;
                                                if (monthRpt) {
                                                    var rptedm = $.trim($("#txtRptEndMonth").val());
                                                    if (rptedm == "") {
                                                        $("#rfvm_EndMonth").show();
                                                        return false;
                                                    }
                                                }
                                            }
                                       
                                        } else {
                                            return false;
                                        }
                                        return true;
                                    }

                                </script>
                                <a id="btnBack" class="btn btn-default btn-lg" href="javascript:history.back(-1)" >返回</a>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel">
                <div class=" panel-heading">
                    <h4><asp:Literal ID="litRoomNameTitle" runat="server"></asp:Literal>- 使用注意事项 </h4>
                </div>
                <div class="panel-body">
                    <asp:Literal ID="LitNote" runat="server"></asp:Literal>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    会议操作
                </div>
                <div class="list-group">
                    <a href="javascript:history.back(-1)" class="list-group-item ">返回上一页</a>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        $(function () {
            EmployeeAutoComplete();
            ExternalPersonAutoComplete();
        });

        function rb(obj) {
            $(obj).parent().remove();
        }
 
        function ExternalPersonAutoComplete() {
            $('#txtExternalPerson').autocomplete({
                multiple: true,
                serviceUrl: 'ExternalPerson.ashx',
                formatResult: function (suggestion, currentValue) {
                    var value = suggestion.value + "/" + suggestion.company;
                    var pattern = '(' + $.Autocomplete.utils.escapeRegExChars(currentValue) + ')';
                    return value.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
                },
                lookupFilter: function (suggestion, originalQuery, queryLowerCase) {
                    var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
                    return re.test(suggestion.value);
                },
                onSelect: function (suggestion)
                {
                    if ($("#" + suggestion.data).size() == 0) {
                        addExternalPerson(suggestion.data, suggestion.value, suggestion.company);
                    }
                    $("#txtExternalPerson").val("");

                }
            });
        }


        function EmployeeAutoComplete() {
            $('#txtEmployeeSearch').autocomplete({
                multiple: true,
                params: { t: function() { return $('#ddlSearchType').val(); } },
                serviceUrl: 'EmployeeSearch.ashx',
                formatResult: function (suggestion, currentValue) {
                    var value =  suggestion.value ;
                    var pattern = '(' + $.Autocomplete.utils.escapeRegExChars(currentValue) + ')';
                    return value.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
                },
                lookupFilter: function (suggestion, originalQuery, queryLowerCase) {
                    var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
                    return re.test(suggestion.value);
                },
                onSelect: function (suggestion) {

                    if (suggestion.t=="e") {
                        if ($("#" + suggestion.data).size() == 0) {
                            addEmp(suggestion.data, suggestion.value);
                        }
                    } else if (suggestion.t == "m") {

                        $.get("EmployeeSearch.ashx", { mid: suggestion.data }, function (data) {
                            for (var i = 0; i < data.length; i++) {
                                var item = data[i];
                                if ($("#" + item.id).size() == 0) {
                                    addEmp(item.id, item.name);
                                }
                            }

                        }, "json");

                    } else if (suggestion.t == "d") {
                        $.get("EmployeeSearch.ashx", { did: suggestion.data }, function (data) {
                            for (var i = 0; i < data.length; i++) {
                                var item = data[i];
                                if ($("#" + item.id).size() == 0) {
                                    addEmp(item.id, item.name);
                                }
                            }

                        }, "json");
                    }
                 
                    $("#txtEmployeeSearch").val("");
                }
            });
        }

        function addEmp(value, name)
        {
            $("#emplist").append("<span class='emp' id='" + value + "'><input name='emp' value='" + value + "' type='hidden' />" + name + "  <button class='btn btn-xs btn-link' onclick='rb(this)' type='button'> X </button></span>");
        }
        function addExternalPerson(value, name,company)
        {
            $("#eplist").append("<span class='emp' id='" + value + "' title='" + company + "'><input name='ep' value='" + value + "' type='hidden' />" + name + "  <button class='btn btn-xs btn-link' onclick='rb(this)' type='button'> X </button></span>");
        }
    </script>
</body>
</html>
