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

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



<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>按日期预订 -  预订会议</title>

    <script src="/control/js/jquery-3.1.1.min.js"></script>
    <link href="/control/plugin/bootstrap3/css/bootstrap.min.css" rel="stylesheet" />
    <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-select-1.12.2/js/bootstrap-select.js"></script>
    <link href="/control/plugin/bootstrap-select-1.12.2/dist/css/bootstrap-select.css" rel="stylesheet" />
    <script src="/control/plugin/bootstrap-select-1.12.2/js/i18n/defaults-zh_CN.js"></script>

    <link href="/control/plugin/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />
    <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>

    <style type="text/css">
        table.meeting-rooms-table td.dselected {
            background-color: green;
        }
        .tp{
            background-color: #2fa4e7;
        }
        .label {
            margin-top: 3px;
        }

        td {
            cursor: pointer;
        }

        #usertype {
            visibility: hidden !important;
        }

        .currentDate {
            border: none;
            background-color: transparent;
            font-size: 18px;
            color: crimson;
            width: 140px !important;
        }
    </style>
</head>
<body>
    <uc1:MyHeader runat="server" ID="MyHeader" />

    <!-- HTML to write -->

    <div class=" container-fluid ">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="BookingTimeSelect.aspx">按时间预订会议室</a></li>
            <li role="presentation"><a href="BookingRoomSelect.aspx">按会议室预订时间</a></li>
        </ul>
        <div class=" panel">
            <div class="panel-body">
                <form id="bt" class="form-inline" method="get" action="BookingTimeSelect.aspx">
                    <div class="well-sm">

                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <button onclick="showDay(-1)" class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-left"></i></button>
                                </span>
                                <input type="text" id="txtdate" name="bdate" value="<%=bdate.ToString("yyyy/MM/dd") %>" class="form-control currentDate" placeholder="预约时间" readonly="readonly" />
                                <span class="input-group-btn">
                                    <button onclick="showDay(1)" class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-right"></i></button>
                                </span>

                                <script type="text/javascript">

                                    $(function () {
                                        $("#txtMin").val('<%=Request["minNumber"] %>');
                                        $("#txtMax").val('<%=Request["maxNumber"] %>');

                                        var values = "<%=Request["usertype"] %>";
                                      
                                        var os = $("#usertype").children();
                               
                                        for (var i = 0; i < os.length ; i++) {
                                            var option = os.eq(i).get(0);
                                            option.selected = (',' + values + ',').indexOf(',' + option.value + ',') > -1;
                                        }
                                        
                                    });
                                    function showDay(i) {

                                        var dStart = new Date($("#txtdate").val());
                                        dStart.setDate(dStart.getDate() + i);
                                      
                                        var cd = dStart.getFullYear() + "/" + (dStart.getMonth() + 1) + "/" + dStart.getDate();
                                        $("#txtdate").val(cd);

                                        $("#bt").submit();
                                    }
                                    function sm(key) {
                                        location.href = "/user/Meeting/MeetingDetails.aspx?id="+key;
                                    }
                                </script>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtstart">容纳人数:</label>

                            <select id="txtMin" name="minNumber" class="form-control">
                                <option value="">全部</option>
                                <option value="10">10</option>
                                <option value="15">15</option>
                                <option value="20">20</option>
                                <option value="30">40</option>
                                <option value="50">50</option>
                                <option value="60">60</option>
                                <option value="70">70</option>
                                <option value="80">80</option>
                                <option value="90">90</option>
                                <option value="100">100</option>
                                 <option value="500">500</option>
                                 <option value="1000">1000</option>
                            </select>
                            至
                           <select id="txtMax" name="maxNumber" class="form-control">
                               <option value="">全部</option>
                               <option value="10">10</option>
                               <option value="15">15</option>
                               <option value="20">20</option>
                               <option value="30">40</option>
                               <option value="50">50</option>
                               <option value="60">60</option>
                               <option value="70">70</option>
                               <option value="80">80</option>
                               <option value="90">90</option>
                               <option value="100">100</option>
                               <option value="1000">1000</option>
                           </select>
                        </div>

                        <div class="form-group">
                            <label>设备类型：</label>
                            <select id="usertype" name="usertype" multiple class="selectpicker" style=" display:none ">
                                <%=bindEquipment() %>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-success ">按条件查询</button>
                    </div>
                </form>

                <div class="table-responsive" >
                    <asp:Literal ID="litRoomContent" runat="server"></asp:Literal>
                </div>

            </div>
        </div>
    </div>
    <uc1:MyFooter runat="server" ID="MyFooter" />

    <script type="text/javascript">
        $(function () {
            $('#meetingRoomsTable .meeting-cell').tooltip({
                container: "body"
            });
   
            $('.mavailab').click(function () {
                // 弹框选择会议类型
                location.href = "Booking.aspx?start=" + $(this).data('time') + "&room=" + $(this).parent().data('room-name');
            }).hover(function () {
                $(this).addClass("danger");
            }, function () {
                $(this).removeClass("danger");
            });
            
            $("#txtdate").datepicker({
                language: "zh-CN",
                autoclose: true,
                format: "yyyy-mm-dd",
                todayBtn: "linked",
                todayHighlight: true
            });

            // 时间选择
            var table = $("#meetingRoomsTable");

            var isMouseDown = false;
            var startRowIndex = null;
            var startCellIndex = null;
            var startCellTime = null;
            var endCellTime = null;
            var cellRoomId = null;
            var cellRoomName = null;

            function selectTo(cell) {

                var row = cell.parent();
                var cellIndex = cell.index();
                var rowIndex = row.index();

                var rowStart, rowEnd, cellStart, cellEnd;

                rowStart = startRowIndex;
                rowEnd = rowIndex;

                if (cellIndex < startCellIndex) {
                    cellStart = cellIndex;
                    cellEnd = startCellIndex;
                } else {
                    cellStart = startCellIndex;
                    cellEnd = cellIndex;
                }

                endCellTime = cell.data('time');
                cellRoomId = cell.parent().data('room-id');
                cellRoomName = cell.parent().data('room-name');

                var rowCells = table.find("tr").eq(rowStart).find("td");
                for (var j = cellStart; j <= cellEnd; j++) {
                    rowCells.eq(j).addClass("dselected");
                }
            }

            table.find("td.meeting-cell").mousedown(function (e) {
                isMouseDown = true;
                var cell = $(this);

                table.find(".dselected").removeClass("dselected"); // deselect everything

                if (e.shiftKey) {
                    selectTo(cell);
                } else {
                    cell.addClass("dselected");
                    startCellIndex = cell.index();
                    startRowIndex = cell.parent().index();
                    startCellTime = cell.data('time');
                }

                return false; // prevent text selection
            }).mouseover(function () {
                if (!isMouseDown) return;
                selectTo($(this));
            }).bind("selectstart", function () {
                return false;
            });

            $(document).mouseup(function () {

                if (isMouseDown) {
                    // 检查选择的时间段
                    var date = $("#txtdate").val();
                    var dStart = new Date(date + ' ' + startCellTime + ':00');

                    var dEnd = new Date(date + ' ' + endCellTime + ':00');
                    var duration = (dEnd.getTime() - dStart.getTime()) / 60000 + 30;
                    if (duration > 720) {
                        duration = 60;
                    }

                    if (startCellTime == undefined) {
                        isMouseDown = false;
                        return;
                    }
                    if (cellRoomName == undefined) {
                        isMouseDown = false;
                        return;
                    }

                    var dts = dStart.getFullYear() + "-" + (dStart.getMonth() + 1) + "-" + dStart.getDate() + " " + dStart.getHours() + ":" + dStart.getMinutes();
                    location.href = "Booking.aspx?start=" + dts + "&room=" + cellRoomName + "&duration=" + duration;
                }
                isMouseDown = false;
            });
        });

    </script>


</body>
</html>
