<%@ page language="C#" autoeventwireup="true" inherits="weixin_CreateBooking, App_Web_createbooking.aspx.ccd28591" enableEventValidation="false" %>
<%@ Register Src="~/weixin/MyHeader.ascx" TagPrefix="uc2" TagName="MyHeader" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>网上预约系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="/control/plugin/bootstrap3/css/bootstrap.min.css" rel="stylesheet" />
    <script src="/control/js/jquery.js"></script>
    <script src="/control/plugin/bootstrap3/js/bootstrap.min.js"></script>
    <link href="/weixin/css/user.css" rel="stylesheet" />
    <script src="js/datetime/js/mobiscroll.custom-2.6.2.min.js"></script>
    <link href="js/datetime/css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" />
    <script src="/control/js/String.js"></script>

    <link href="/control/plugin/fullcalendar/fullcalendar.css" rel="stylesheet" />
    <script src="/control/plugin/fullcalendar/lib/moment.min.js"></script>
    <script src='/control/plugin/fullcalendar/fullcalendar.js'></script>
    <script src="/control/plugin/fullcalendar/locale/zh-cn.js"></script>
    <link href="/control/css/msgbox.css" rel="stylesheet" />
    <script src="/control/js/msgbox.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
      <script src="/js/html5shiv.min.js"></script>
      <script src="/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <uc2:MyHeader runat="server" ID="MyHeader1" />
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                      
                        <form  id="from1" runat="server">
                            <!-- Add.aspx -->

                            <div class="form-group">
                                <label class=" control-label">
                                    预约设备<span class='rd'>*</span>：
                                </label>

                                <div style="font-size:20px; font-weight:bold" >
                                    <asp:Label ID="txtEName" runat="server" ></asp:Label>
                                </div>
                                <span class="help-block" style="font-size:20px;">
                                    <asp:Label ID="txtinfo" runat="server" ></asp:Label>
                                </span>
                            </div>
                            <div class="form-group">
                                <label class=" control-label">
                                    设备管理员<span class='rd'>*</span>：
                                </label>

                                <div style="font-size:20px; font-weight:bold" >
                                    <asp:Label ID="txtadmin" runat="server" ></asp:Label>
                                </div>
                            </div>
                            <div class="form-group">   
                                <div id="calendar" style="width:600px"></div>
                            </div>
                            <script type="text/javascript">
                                $(function () {
                                    var events = {
                                        url: '/sadmin/EquipmentUse/EquipmentUse.ashx',
                                        type: 'POST',
                                        data: {
                                            eid: "<%=Request["be"]%>"
                                        }
                                    }
                                    $('#calendar').fullCalendar({
                                        events: events,
                                        defaultView: "month",
                                        header: {
                                            left: 'prev,next today',
                                            center: 'title',
                                            right: 'month,listMonth,agendaWeek,listWeek,agendaDay,listDay'
                                        },
                                        views:
                                        {
                                            listMonth: { buttonText: '〓' },
                                            listWeek: { buttonText: '〓' },
                                            listDay: { buttonText: '〓' }
                                        }
                                        //,eventClick: function (calEvent, jsEvent, view) {
                                        //    //alert('预约用户: ' + calEvent.title
                                        //    //    + "起始日期：" +
                                        //    //    calEvent.start.Year + "截止日期："
                                        //    //    + calEvent.end);
                                        //}
                                    });
                                });
                            </script>
                            <div class="form-group" >
                                <label class=" control-label">
                                    分配方式<span class='rd'>*</span>：</label>
                                <div>
                                    <asp:DropDownList ID="txtb_stype" runat="server" CssClass="form-control"  >
                                        <asp:ListItem value="0">指定时间</asp:ListItem>
                                        <asp:ListItem value="1">指定时间，如果发生重叠可联系用户商讨分配时间</asp:ListItem>
                                        <asp:ListItem value="2">由管理员分配</asp:ListItem>
                                    </asp:DropDownList>
                                    <p class="help-block">预约审核通过后管理员将通过“分配方式”分配时间</p>
                                    <script type="text/javascript">
                                        $(function () {

                                            $("#txtb_btime").attr("readonly", "readonly");
                                            $("#txtb_stype").change(function(){
                                                var pz = $(this).val();
                                                if (pz=="2") {
                                                    $("#fiexdTime").hide();
                                                    $("#txtb_btime").removeAttr("readonly");
                                                } else {
                                                    $("#fiexdTime").show();
                                                    $("#txtb_btime").attr("readonly", "readonly");
                                                }
                                            });
                                        
                                            var opt = {
                                                preset: 'datetime',
                                                stepMinute: 1,
                                 
                                                theme: "default",
                                                mode: "scroller",
                                                dateFormat:"yyyy-mm-dd",
                                                display: "modal",
                                                lang: "zh"
                                            }

                                            $("#st0").scroller(opt);
                                            $("#ed0").scroller(opt);
                                        
                                        });
                                    </script>
                                </div>
                                <div>
                                    <asp:RequiredFieldValidator ID="rfvb_stype" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="请填写时间分配方式" ControlToValidate="txtb_stype"></asp:RequiredFieldValidator>
                                    <asp:RegularExpressionValidator ID="revb_stype" ForeColor="Red" runat="server" Display="Dynamic" ErrorMessage="必须为数字" ControlToValidate="txtb_stype" ValidationExpression="^[0-9]\d*$"></asp:RegularExpressionValidator>
                                </div>
                            </div>
                            <div class="form-group" id="fiexdTime">
                                <label class=" control-label">
                                    指定时间<span class='rd'>*</span>：</label>
                                    <div class="col-sm-12" style="padding-right:0px;padding-left:0px;">
                                        <input name="bu" value="0"  type="hidden" />
                                        <div class="col-sm-5" style="padding-right:5px;padding-left:0px;">
                                            <input id="st0" required="required" name="st0" class="form-control"  onblur="btime()" />
                                        </div>
                                        <div class="col-sm-5" style="padding-right:0px;padding-left:5px;">
                                            <input id="ed0" required="required" name="ed0" class="form-control"  onblur="btime()" />
                                        </div>
                                    </div>   
                                    <div id="sltimes" class="clearfix"></div>
                                    <button type="button" style="margin-top:8px;" class="btn btn-default btn-min " onclick="addBU()"><i class="glyphicon glyphicon-plus"></i> 新增分配时间项</button>                          
                            </div> 
                           <script>
                               var buindex = 1;
                               function addBU() {
                                          
                                   var sb = new StringBuilder();
                                   sb.append(' <div class="col-sm-12" id="bu'+buindex+'" style="margin-top:8px;padding-right:0px;padding-left:0px;">');
                                   sb.append(' <input name="bu" value="' + buindex + '"  type="hidden" /><div class="col-sm-5" style="padding-right:5px;padding-left:0px;">');
                                   sb.append(' <input id="st'+buindex+'" required="required" name="st'+buindex+'" class="form-control"  onblur="btime()" />');
                                   sb.append(' </div><div class="col-sm-5" style="padding-right:0px;padding-left:5px;">');
                                   sb.append(' <input id="ed'+buindex+'" required="required" name="ed'+buindex+'" class="form-control"  onblur="btime()" />');
                                   sb.append(' </div><div class="col-sm-1"><button type="button" onclick="dbu('+buindex+')" class="btn btn-default">');
                                   sb.append(' <i class="glyphicon glyphicon-remove"></i></button></div></div>')
                                   $("#sltimes").prepend(sb.tostring());                                   
                                   var opt = {
                                       preset: 'datetime',
                                       stepMinute: 1,

                                       theme: "default",
                                       mode: "scroller",
                                       dateFormat: "yyyy-mm-dd",
                                       display: "modal",
                                       lang: "zh"
                                   }
                                   $("#st" + buindex).scroller(opt);
                                   $("#ed" + buindex).scroller(opt);
                                   buindex++;
                               }

                               function dbu(index) {
                                   $("#bu" + index).remove();
                                   btime();
                               }
                           </script>
                            <div class="form-group">
                                <label class=" control-label">
                                    课题名称<span class='rd'>*</span>：</label>
                                <asp:DropDownList ID="ddl_pid" runat="server" onchange="showpContent()" CssClass="form-control"></asp:DropDownList>
                                <asp:RequiredFieldValidator ID="rfvpid" runat="server" ForeColor="Red" Display="Dynamic" 
                                    ErrorMessage="请选择课题名称" ControlToValidate="ddl_pid"></asp:RequiredFieldValidator>
                            </div>
                             <div class="form-group">
                                <label class=" control-label">
                                    实验内容<span class='rd'>*</span>：</label>
                                <span id="pcontent" class="help-block"></span>
                            </div>
                            <div class="form-group" >
                                <label class=" control-label">
                                    预约时长(分钟)<span class='rd'>*</span>：</label>
                                <asp:TextBox ID="txtb_btime" runat="server" CssClass="form-control" MaxLength="4" ></asp:TextBox>
                                <p> 预约多少时长，有助于管理员分配您所需要时间</p>
                                <div>
                                    <asp:RequiredFieldValidator ID="rfvb_btime" runat="server" Display="Dynamic" ForeColor="Red"  ErrorMessage="请填写预约时长(分钟)" ControlToValidate="txtb_btime"></asp:RequiredFieldValidator>
				                    <asp:RegularExpressionValidator ID="revb_btime" ForeColor="Red" Display="Dynamic" runat="server" ErrorMessage="必须为数字" ControlToValidate="txtb_btime" ValidationExpression="^[0-9]\d*$"></asp:RegularExpressionValidator>
                                </div>

                                <script type="text/javascript">
                                    function btime() {

                                        var timelist = $("#fiexdTime .col-sm-12");
                                        var time = 0;
                                        for (var i = 0; i < timelist.length; i++) {
                                            var start = $(timelist[i]).find("input").eq(1).val();
                                            var end = $(timelist[i]).find("input").eq(2).val();
                                            if (start != "" && end != "") {
                                                var cha = new Date(end).getTime() - new Date(start).getTime()  //时间差的毫秒数
                                                time += Math.floor(cha / (60 * 1000));
                                            }
                                        }
                                        $("#txtb_btime").val(time);
                                    }
                                </script>

                            </div>

                           <div class="form-group" >
                                <label class=" control-label">
                                    预约说明<span class='rd'>*</span> 255/<span id="cs"></span>：</label>
                                <div >
                                    <asp:TextBox ID="txtb_note" runat="server"  Rows="5" TextMode="MultiLine" onkeydown="return zfs(this)"  CssClass="form-control" ></asp:TextBox>
                                    <p class="help-block">填写相预约说明，例如：如果时间段重叠希望分配的日期或是否允许拆分为多个时间段</p>
                                    <script type="text/javascript" >
                                        $(function () {
                                            $("#cs").text($("#txtb_note").val().length);
                                        });
                                        function zfs(obj) {
                                            var length = $(obj).val().length;
                                            $("#cs").text(length);
                                            return true;
                                        }
                                    </script>

                                </div>
                            
                            </div>
                            <div class="form-group">
                                <asp:Button ID="btnSubmit" runat="server" Text="提交预约申请" 
                                        OnClientClick="return befSubmit()" 
                                        CssClass="btn btn-default btn-lg btn-block btn-primary" 
                                        OnClick="btnSubmit_Click" />
                                <script type="text/javascript">
                                    function showpContent()
                                    {
                                        var pid = $("#ddl_pid").val();

                                        if(pid!="")
                                        {
                                            $.ajax({
                                                data: { "pid": pid },
                                                type:"POST",
                                                dataType: "json",
                                                success:function(result)
                                                {
                                                    $("#pcontent").html(result.data);
                                                }
                                            });
                                        }
                                    }



                                    function isOverlap() {

                                        var bulist = $("#fiexdTime .col-sm-12");

                                        var dates = new StringBuilder();
                                        var size = bulist.length;

                                        for (var i = 0; i < size ; i++) {
                                            var start = $(bulist[i]).find("input").eq(0).val();
                                            var end = $(bulist[i]).find("input").eq(1).val();
                                            if (start == "" || end == "") {
                                                alert("请正确填写分配时间！");
                                                return false;
                                            }
                                            dates.append(start + "|" + end);
                                            if (i != size - 1) {
                                                dates.append(',');
                                            }
                                        }

                                        ZENG.msgbox.show('判断中...', 6);
                                        var eid = "<%=Request["be"]%>";
                                        $.ajax({
                                            type: "POST",
                                            url: "/sadmin/Booking/isOverlap.ashx",
                                            dataType: "json",
                                            async: false,
                                            data: { "eid": eid, "dates": dates.tostring() },
                                            success: function (result) {
                                                ZENG.msgbox._hide();
                                                if (result.state == 1) {
                                                   return true;
                                                } else {
                                                    alert(result.data);
                                                    return false;
                                                }
                                            }
                                        });

                                    }

                                    function befSubmit() {
                                        if (Page_ClientValidate())
                                        {
                                            return isOverlap();
                                        }
                                        return false;
                                    }
                                </script>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
