<%@ page language="C#" autoeventwireup="true" inherits="user_CreateBooking, App_Web_createbooking.aspx.6cc23264" enableEventValidation="false" %>

<%@ Register Src="~/user/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" />
    <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="/user/css/user.css" rel="stylesheet" />
    <script src="/control/plugin/My97DatePicker/WdatePicker.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>
    
    <!--[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">
                <h3 class="page-header">新增预约<small> 新增预约申请，申请将被提交审核，审核通过后分配时间</small></h3>
            </div>
        </div>

        <div class="row">

            <div class="col-lg-4">
                <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>

                            </div>

                            <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");
                                                }
                                            });
                                        });
                                    </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="row">
                                    <div class="col-sm-6">
                                        <asp:TextBox ID="txtb_start" runat="server" CssClass="form-control" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd HH:mm'})" onblur="btime()"></asp:TextBox>
                                    </div>
                                    <div class="col-sm-6">
                                        <asp:TextBox ID="txtb_end" runat="server" CssClass="form-control" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd HH:mm'})" onblur="btime()"></asp:TextBox>
                                    </div>
                                </div>
                            </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 start = new Date($("#txtb_start").val());
                                        var end = new Date($("#txtb_end").val());
                                        if (!isNaN(start) && !isNaN(end)) {
                                            var cha = end.getTime() - start.getTime()  //时间差的毫秒数

                                            var minutes = Math.floor(cha / (60 * 1000))

                                            $("#txtb_btime").val(minutes);
                                        }
                                    }
                                </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="3" 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 befSubmit() {
                                        if (Page_ClientValidate()) {
                                            var type = $("#txtb_stype").val();
                                            if (type != 2) {
                                                var start = $.trim($("#txtb_start").val());
                                                var end = $.trim($("#txtb_end").val());

                                                if (start == "" || end == "") {
                                                    alert("请填写指定时间段");
                                                    return false;
                                                }
                                            }
                                        }
                                        return true;
                                    }
                                </script>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
            <div class="col-lg-8">

                <div class="panel panel-default">
                    <div class="panel-body">
                        <script type="text/javascript">
                            $(function () {
                                $('#calendar').fullCalendar({
                                    events: {
                                        url: 'UseAjax.ashx',
                                        type: 'POST',
                                        data: {
                                            eid: '<%=Request["be"] %>',
                                            tv: true
                                        }
                                    },
                                    defaultView: "agendaWeek",
                                    header: {
                                        left: 'prev,next today',
                                        center: 'title',
                                        right: 'month,agendaWeek,agendaDay'
                                    }
                                });
                            });

                            //$(function () {
                            //    $("#ddlb_eid").change(function () {
                            //        events.data.eid = $(this).val();
                            //        $('#calendar').fullCalendar('refetchEvents');
                            //    });
                            //})

                        </script>
                        <div class="form-group">
                            <div id="calendar"></div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</body>
</html>
