<%@ control language="VB" autoeventwireup="false" inherits="RCC_System_AccessControl_CC_IPRuleDetails, MachSol.MachPanel.Web" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="EM" %>


<div class="card">
    <div class="header">
        <h3>
            <asp:Literal ID="lbl_title" runat="server" Text='<%$ Resources:Content,RuleDetail %>' EnableViewState="false"></asp:Literal>
        </h3>
    </div>
    <div class="body">

        <div class="row">
            <div class="col-sm-3 col-xs-12 row-label">
                *<asp:Label ID="lbl_RuleName" runat="server" Text='<%$Resources:Content,DGN1110008%>' EnableViewState="false"></asp:Label>:
            </div>
            <div class="col-sm-4 col-xs-12">
                <div class="form-group">
                    <div class="form-line">
                        <asp:TextBox ID="TxBx_RuleName" runat="server" Width="85%" MaxLength="250"></asp:TextBox>
                    </div>
                </div>
                <asp:RequiredFieldValidator ID="RFV_RuleName" runat="server" Display="None" SetFocusOnError="true" ControlToValidate="TxBx_RuleName" ValidationGroup="rule"></asp:RequiredFieldValidator>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3 col-xs-12 row-label">
                <asp:Label ID="Label2" runat="server" Text='<%$Resources:Content,GN0000597%>' EnableViewState="false"></asp:Label>:
            </div>
            <div class="col-sm-4 col-xs-12">
                <div class="form-group">
                    <asp:TextBox ID="TxBx_RuleDescription" runat="server" Rows="4" Columns="5" TextMode="MultiLine"></asp:TextBox>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3 col-xs-12 row-label">
                <asp:Label ID="Lbl_IPAddresses" runat="server" Text='<%$Resources:Content,StrIPAddressesCSV%>' EnableViewState="false"></asp:Label>:
            </div>
            <div class="col-sm-4 col-xs-12">
                <div class="form-group">
                    <asp:TextBox ID="TxBx_IPAddresses" runat="server" Rows="4" Columns="5" TextMode="MultiLine"></asp:TextBox>
                </div>
                <div class="clearfix"></div>
                <div>
                    <asp:Literal ID="Ltrl_IPCSVNote" runat="server" Text="<%$ Resources:Content,RuleIPFormatNote %>"></asp:Literal>:
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3 col-xs-12 row-label">
                <asp:Label ID="Lbl_AppliesTo" runat="server" Text='<%$Resources:Content,AppliesTo%>' EnableViewState="false"></asp:Label>:
            </div>
            <div class="col-sm-4  col-xs-12">
                <asp:DropDownList ID="Ddl_IsStaffOnly" runat="server">
                    <asp:ListItem Text="<%$ Resources:Content,StrStaffOnly %>" Value="1" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="<%$ Resources:Content,StrStaffAndCustomers %>" Value="0"></asp:ListItem>
                </asp:DropDownList>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3 col-xs-12 row-label">
                <label>
                    <asp:Literal ID="Literal7" runat="server" Text="<%$ Resources:Content,GN0000860%>" />:
                </label>
            </div>
            <div class="col-sm-4 col-xs-12">
                <div class="form-group">
                    <asp:CheckBox ID="CB_IsDisabled" runat="server" Text=" " />
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3 col-xs-12 row-label">
                <label>
                    <asp:Literal ID="Literal4" runat="server" Text="<%$ Resources:Content,StrIsTimebound%>" />:
                </label>
            </div>
            <div class="col-sm-4 col-xs-12">
                <div class="form-group">
                    <asp:CheckBox ID="CB_IsTimeBound" runat="server" Text=" " onClick="showHideTimeboundDetail(this,event)" />
                </div>
            </div>
        </div>
        <div id="div-timebound-detail" class="hide">
            <div class="row">
                <div class="col-sm-3 col-xs-12 row-label m-t-5">
                    <asp:Literal ID="Literal134" runat="server" Text="<%$ Resources:Content,Lync179%>"
                        EnableViewState="false">
                    </asp:Literal>:
                </div>
                <div class="col-sm-4 col-xs-12">
                    <div class="form-group">
                        <asp:DropDownList ID="DDL_TimeZone" runat="server">
                        </asp:DropDownList>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 col-xs-12 row-label m-t-5">
                    <label>
                        <asp:Literal ID="Literal55" runat="server" Text="<%$ Resources:Content,GN0000372%>" />:
                    </label>
                </div>
                <div class="col-sm-9 col-xs-12">
                    <div class="form-group">
                        <span class="pull-left m-l-5 m-t-10 m-r-10">
                            <asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:Content,strDate %>"></asp:Literal>:

                        </span>
                        <asp:TextBox ID="TxBx_FromDate" runat="server" onkeydown='event.preventDefault();' Style="width: 95px" CssClass="date-picker-input pull-left">
                        </asp:TextBox>
                        <EM:CalendarExtender ID="CE_FromDate" runat="server" TargetControlID="TxBx_FromDate"
                            CssClass="date__calendar" OnClientDateSelectionChanged="checkDate">
                        </EM:CalendarExtender>
                        &nbsp;
                        <span class="pull-left m-l-5 m-t-10 m-r-10">
                            <asp:Literal ID="Label3" runat="server" Text="<%$ Resources:Content,GN0001133 %>"></asp:Literal>:

                        </span>
                        <asp:TextBox ID="TxBx_FromHour" runat="server" Style='width: 35px;' CssClass="date-picker-input pull-left" onChange="checkHour(this,event)" onKeyUp="handleHourUpDownKeys(this,event)">
                        </asp:TextBox>

                        <span class="numeric-updown-icon-wrapper">

                            <a id="from_hour_up" runat="server">
                                <i class="glyphicon glyphicon-triangle-top"></i>
                            </a>
                            <span class="clearfix"></span>
                            <a id="from_hour_down" runat="server">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                            </a>
                        </span>
                        <EM:NumericUpDownExtender ID="NUD_FromHour" runat="server" TargetControlID="TxBx_FromHour"
                            Step="1" Width="75" TargetButtonUpID="from_hour_up" TargetButtonDownID="from_hour_down">
                        </EM:NumericUpDownExtender>
                        &nbsp;
                        <span class="pull-left m-l-5 m-t-10 m-r-10">
                            <asp:Literal ID="Label1" runat="server" Text="<%$ Resources:Content,GN0001132 %>"></asp:Literal>:
                        </span>
                        <asp:TextBox ID="TxBx_FromMin" runat="server" Text="00" onChange="checkMin(this,event)" onKeyUp="handleMinUpDownKeys(this,event)" Style='width: 35px;' CssClass="date-picker-input pull-left">
                        </asp:TextBox>
                        <span class="numeric-updown-icon-wrapper m-t--5">

                            <a id="from_min_up" runat="server">
                                <i class="glyphicon glyphicon-triangle-top"></i>
                            </a>
                            <span class="clearfix"></span>
                            <a id="from_min_down" runat="server">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                            </a>
                        </span>
                        <EM:NumericUpDownExtender ID="NUD_FromMin" runat="server" TargetControlID="TxBx_FromMin"
                            Step="15" Width="75" TargetButtonUpID="from_min_up" TargetButtonDownID="from_min_down">
                        </EM:NumericUpDownExtender>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-3 col-xs-12 row-label m-t-5">
                    <label>
                        <asp:Literal ID="Literal2" runat="server" Text="<%$ Resources:Content,strTo%>" />:
                    </label>
                </div>
                <div class="col-sm-9 col-xs-12">
                    <div class="form-group">
                        <span class="pull-left m-l-5 m-t-10 m-r-10">
                            <asp:Literal ID="Literal3" runat="server" Text="<%$ Resources:Content,strDate %>"></asp:Literal>:

                        </span>
                        <asp:TextBox ID="TxBx_toDate" onkeydown='event.preventDefault();' runat="server" Style="width: 95px" CssClass="date-picker-input pull-left">
                        </asp:TextBox>
                        <EM:CalendarExtender ID="CE_toDate" runat="server" TargetControlID="TxBx_toDate"
                            CssClass="date__calendar" OnClientDateSelectionChanged="checkDate">
                        </EM:CalendarExtender>
                        &nbsp;
                        <span class="pull-left m-l-5 m-t-10 m-r-10">
                            <asp:Literal ID="Literal5" runat="server" Text="<%$ Resources:Content,GN0001133 %>"></asp:Literal>:

                        </span>
                        <asp:TextBox ID="TxBx_toHour" runat="server" Style='width: 35px;' CssClass="date-picker-input pull-left" onChange="checkHour(this,event)" onKeyUp="handleHourUpDownKeys(this,event)">
                        </asp:TextBox>

                        <span class="numeric-updown-icon-wrapper">

                            <a id="to_hour_up" runat="server">
                                <i class="glyphicon glyphicon-triangle-top"></i>
                            </a>
                            <span class="clearfix"></span>
                            <a id="to_hour_down" runat="server">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                            </a>
                        </span>
                        <EM:NumericUpDownExtender ID="NUD_toHour" runat="server" TargetControlID="TxBx_toHour"
                            Step="1" Width="75" TargetButtonUpID="to_hour_up" TargetButtonDownID="to_hour_down">
                        </EM:NumericUpDownExtender>
                        &nbsp;
                        <span class="pull-left m-l-5 m-t-10 m-r-10">
                            <asp:Literal ID="Literal6" runat="server" Text="<%$ Resources:Content,GN0001132 %>"></asp:Literal>:
                        </span>
                        <asp:TextBox ID="TxBx_toMin" runat="server" Text="00" onChange="checkMin(this,event)" onKeyUp="handleMinUpDownKeys(this,event)" Style='width: 35px;' CssClass="date-picker-input pull-left">
                        </asp:TextBox>
                        <span class="numeric-updown-icon-wrapper m-t--5">

                            <a id="to_min_up" runat="server">
                                <i class="glyphicon glyphicon-triangle-top"></i>
                            </a>
                            <span class="clearfix"></span>
                            <a id="to_min_down" runat="server">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                            </a>
                        </span>
                        <EM:NumericUpDownExtender ID="NUD_toMin" runat="server" TargetControlID="TxBx_toMin"
                            Step="15" Width="75" TargetButtonUpID="to_min_up" TargetButtonDownID="to_min_down">
                        </EM:NumericUpDownExtender>
                    </div>
                </div>
            </div>
        </div>
        <div class="row  clearfix">
            <div class="col-sm-3 col-xs-12">
            </div>
            <div class="col-sm-9 col-xs-12">
                <asp:Button ID="Btn_Save" runat="server" Text="<%$Resources:Content,GN0000281%>" class="btn btn-primary waves-effect btnAction" CausesValidation="true" ValidationGroup="rule" />&nbsp;
                <asp:Button ID="Btn_Cancel" runat="server" Text="<%$Resources:Content,GN0000572 %>" class="btn btn-primary waves-effect" CausesValidation="false" />
            </div>
        </div>
    </div>
</div>


<style type="text/css">
    .display-inline-float-left,
    .numeric-updown-icon-wrapper {
        display: inline-block;
        float: left;
    }

    .numeric-updown-icon-wrapper {
        margin-right: 5px;
        margin-left: 2px;
    }

    input[type='text'].date-picker-input {
        border-bottom: solid 1px;
    }
</style>

<script lang="javascript" type="text/javascript">
    $(function () {
        var cbIsTimebound = $get('<%= CB_IsTimeBound.ClientID%>');
        if (cbIsTimebound && cbIsTimebound.checked)
            $('#div-timebound-detail').removeClass('hide');
    });

    function showHideTimeboundDetail(source, e) {
        //alert('called');
        if (source.checked)
            $('#div-timebound-detail').removeClass('hide');
        else
            $('#div-timebound-detail').addClass('hide');
    }

    function checkMin(source, e) {
        if (source.value < 0)
            source.value = '00';
        else if (source.value >= 60)
            source.value = 59
        else if (source.value % 15 != 0 && source.value != 59)
            source.value = parseInt(source.value) + 1;
    }

    function checkHour(source, e) {
        if (source.value > 23)
            source.value = '23';
        else if (source.value < 0)
            source.value = 0;
    }

    function checkDate(sender, args) {
        if (sender._selectedDate < new Date()) {
            sender._selectedDate = new Date();
            // set the date back to the current date
            sender._element.value = sender._selectedDate.format(sender._format);
        }
        setTimeout(function () { sender.hide(); }, 1000);
    }

    function handleUpDownKeys(source, e, StepSize) {
        if (e.keyCode == 38)
            if (source.value + StepSize < 9)
                source.value = '0' + (+source.value + StepSize);
            else
                source.value = +source.value + StepSize;
        else if (e.keyCode == 40)
            if (source.value - StepSize < 11)
                source.value = '0' + (+source.value - StepSize);
            else
                source.value = +source.value - StepSize;
    }

    function handleHourUpDownKeys(source, e) {
        handleUpDownKeys(source, e, 1);
        checkHour(source, e);

    }

    function handleMinUpDownKeys(source, e) {
        handleUpDownKeys(source, e, 15);
        checkMin(source, e);

    }

</script>
