<%@ control language="VB" autoeventwireup="false" inherits="PCC_VPS_CC_ServerVolumeSize, MachSol.MachPanel.Web" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="EM" %>
<%@ Register Assembly="MachSol.MachPanel.Utility" Namespace="MachSol.MachPanel.Utility"
    TagPrefix="EM" %>
<%@ Register Src="~/Template/GVPager.ascx" TagName="Pager" TagPrefix="EM" %>

<script type="text/javascript">
    function GetServerVolumeUsageHistory(event, severGroupIdAndServerIdAndDriveLetter) {
        var params = "{'severGroupIdAndServerIdAndDriveLetter': '" + severGroupIdAndServerIdAndDriveLetter + "'}";
        $.ajax({
            type: "POST",
            url: "VMHome.aspx/GetAsyncServerVolumeUsageData",
            async: true,
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.d.indexOf('Error') < 0) {
                    var receivedArray = msg.d.split("|");
                    var legendXLabelText = receivedArray[0];
                    var headerLabelText = receivedArray[1];
                    var graphColor = receivedArray[2];
                    var graphData = receivedArray[3];

                    $find('<%= MPE_ServerVolumeUsageHistory.ClientID%>').show();
                    SetLabelText(legendXLabelText + "|" + headerLabelText);
                    LoadServerVolumeUsageGraph(graphData, graphColor);
                }
                else {
                    alert(msg.d);
                }
            },
            error: function (errorMessage) {
                alert(errorMessage);
            }
        });
    }

    function SetLabelText(response) {
        var receivedArray = response.split("|");
        var legendXLabelText = receivedArray[0];
        var headerLabelText = receivedArray[1];
        $("#Lbl_GraphXaxis").text(legendXLabelText);
        $("#Lbl_UsagePopupHeader").text(headerLabelText);

    }
    function LoadServerVolumeUsageGraph(dataParam, color) {
        $("#graph").empty();
        var body_color = getCookie('body_color');
        var lblColor = 'black'
        if (body_color == 'night-mode') {
            lblColor = 'white';
        }
        var line = Morris.Area({
            element: 'graph',
            data: $.parseJSON(dataParam),
            xkey: 'x',
            ykeys: ['y'],
            labels: ['<%=Resources.Content.VolumeUsageGB%>'],
            fillOpacity: 0.3,
            hideHover: 'auto',
            behaveLikeLine: true,
            resize: true,
            pointFillColors: ['#ffffff'],
            pointStrokeColors: ['black'],
            lineColors: ['green', 'red'],
            lineWidth: '1px',
            parseTime: false,
            backgroundColor: '#FFFFFF',
            labelColor: lblColor,

            hoverCallback: function (index, options, content, row) {
                return "<div class='morris-hover-row-label'>" + row.w + "</div><div class='morris-hover-point' style='color: b'>" +
                "<%=Resources.Content.VolumeUsageGB%>: " + row.y + "</div>";
            }

        });
        var parentDivWidth = $("#graph").parent("div").width();
        $("#graph").css("min-width", parentDivWidth);
        $("#graph > svg:nth-child(1)").css("min-width", parentDivWidth);
        line.redraw();
    }
</script>
<asp:Panel ID="Pnl_Listing_Server_Volumes" runat="server">

    <asp:Panel ID="Pnl_Btn_ApplyFilter" runat="server" CssClass="row" DefaultButton="Btn_ApplyFilter_ServerVolumes">
        <div class="panel-group search-panel" id="AS_ServerVolumes" role="tablist" aria-multiselectable="true">
            <div class="col-xs-12" role="tab" id="SH_ServerVolumes">
                <div class="card">
                    <div class="header" role="button" data-toggle="collapse" data-parent="#AS_ServerVolumes" href="#<%= CSB_ServerVolumes.ClientID%>" aria-expanded="true" aria-controls="SH_ServerVolumes">
                        <h3>
                            <%= Resources.Content.GN0000395%>
                        </h3>
                    </div>
                    <div id="CSB_ServerVolumes" runat="server" class="body panel-collapse collapse" role="tabpanel" aria-labelledby="SH_ServerVolumes" aria-expanded="false">
                        <div class="row">
                            <ajax:UpdatePanel ID="UP_ServerGroups" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
                                <ContentTemplate>
                                    <div class="col-md-3 col-sm-6 col-xs-12">
                                        <div class="form-group form-float">
                                            <asp:DropDownList ID="DDL_ServerGroups" runat="server" AutoPostBack="true">
                                            </asp:DropDownList>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-sm-6 col-xs-12">
                                        <div class="form-group form-float">
                                            <asp:DropDownList ID="DDL_Server" runat="server">
                                            </asp:DropDownList>
                                        </div>
                                    </div>

                                </ContentTemplate>
                            </ajax:UpdatePanel>
                            <div class="col-md-3 col-sm-6 col-xs-12">
                                <div class="form-group form-float">
                                    <asp:ValidationSummary ID="VS_SearchServerVolumes" runat="server" ShowMessageBox="true"
                                        ShowSummary="false" ValidationGroup="SearchServerVolumes" />
                                    <asp:Button ID="Btn_ApplyFilter_ServerVolumes" ValidationGroup="SearchServerVolumes" class="btn btn-primary waves-effect" runat="server" Text="<%$ Resources:Content,GN0000391%>" />
                                    <asp:Button ID="Btn_ClearFilter_ServerVolumes" Visible="false" class="btn btn-primary waves-effect" runat="server" Text="<%$ Resources:Content,String289 %>" />

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </asp:Panel>
    <div class="row">
        <div class="col-xs-12">
           <%-- <div class="double-scroll-wrapper1">
                <div>
                </div>
            </div>--%>
        <%--    <div class="double-scroll-wrapper2">--%>
                <EM:MPGridView ID="GV_VolumeListing" CssClass="table table-bordered table-striped table-hover"
                    EmptyDataText='<%$ Resources:Content, GN00001375 %>' runat="server" AutoGenerateColumns="False" AllowSorting="true" AllowPaging="false">
                    <Columns>
                        <asp:TemplateField HeaderStyle-CssClass="col-xs-3" SortExpression="ServerGroupName"
                            HeaderText='<%$ Resources:Content, strServerGroup %>'>
                            <ItemTemplate>
                                <asp:Label ID="Lbl_ServerGroupName" runat="server" Text="" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderStyle-CssClass="col-xs-3" SortExpression="ReferenceID"
                            HeaderText='<%$ Resources:Content, ServerName %>'>
                            <ItemTemplate>
                                <asp:Label ID="Lbl_ServerName" runat="server" Text="" />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="<%$ Resources:Content,DriveLetter%>" SortExpression="DriveLetter"
                            HeaderStyle-CssClass="col-xs-1">
                            <ItemTemplate>
                                <asp:Label ID="Lbl_DriveLetter" runat="server" Text="" />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText='<%$ Resources:Content, VolumeSizeGB %>' SortExpression="Size"
                            HeaderStyle-CssClass="col-xs-1">
                            <ItemTemplate>
                                <asp:Label ID="Lbl_VolumeSize" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText='<%$ Resources:Content, FreeSpaceGB %>' SortExpression="SizeRemaining"
                            HeaderStyle-CssClass="col-xs-1">
                            <ItemTemplate>
                                <asp:Label ID="Lbl_FreeSpace" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText='<%$ Resources:Content, GN0000779 %>' SortExpression="TimeUpdated"
                            HeaderStyle-CssClass="col-xs-2">
                            <ItemTemplate>
                                <asp:Label ID="Lbl_Time" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText='<%$ Resources:Content, History %>' HeaderStyle-CssClass="col-xs-1">
                            <ItemTemplate>
                                <button id="Btn_ViewHistory"
                                    class="btn btn-primary"
                                    onclick="GetServerVolumeUsageHistory($(this),'<%# DataBinder.Eval(Container.DataItem, "ServerGroupId") & "|" & _
                DataBinder.Eval(Container.DataItem, "ServerId").ToString() & "|" & DataBinder.Eval(Container.DataItem, "DriveLetter")& "|" & DataBinder.Eval(Container.DataItem, "IP") %>' );return false;">
                                    <%= Resources.Content.View%></button>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <PagerTemplate>
                        <EM:Pager ID="Pager" runat="server" />
                    </PagerTemplate>
                </EM:MPGridView>
           <%-- </div>--%>
        </div>
    </div>
</asp:Panel>

<!-- Mailbox Usage History -->
<asp:Button ID="Button2" runat="server" CssClass="btn-dummy" />
<asp:Button ID="Button1" runat="server" CssClass="btn-dummy" />
<EM:ModalPopupExtender runat="server" ID="MPE_ServerVolumeUsageHistory" BackgroundCssClass="modalBackground"
    DropShadow="false" PopupControlID="Pnl_ServerVolumeUsageHistory" TargetControlID="Button1"
    OkControlID="Button2">
</EM:ModalPopupExtender>

<asp:Panel ID="Pnl_ServerVolumeUsageHistory" runat="server" CssClass="width-modal-popup-auto" Style="display: none">
    <div class="col-xs-12">
        <div class="card">
            <div class="header container-fluid">
                <h3 class="pull-left">
                    <label id="Lbl_UsagePopupHeader"></label>
                </h3>
                <span>
                    <button type="button" class="close" onclick="$find('<%=MPE_ServerVolumeUsageHistory.ClientID%>').hide();">&times;</button>
                </span>
            </div>
            <div class="body">
                <div class="row">
                    <%--<div class="col-xs-2" style="margin-top: 12%; width: 12%;">
                        <label class="verticalLabel"><%= Resources.Content.SizeinGB%></label>
                    </div>--%>
                    <div class="col-xs-12">
                        <div id="graph"></div>
                    </div>
                </div>
                <%--<div class="row">
                    <div class="col-xs-12">
                        <label style="margin-left: 43%;">
                            <label id="Lbl_GraphXaxis"></label>
                        </label>
                    </div>
                </div>--%>
                <%--<div class="row">
                    <div class="col-xs-12">
                        <asp:Button ID="Btn_Close" CausesValidation="false" runat="server" Text='<%$ Resources:Content,GN000150 %>'
                            CssClass="btn btn-primary waves-effect" />
                    </div>
                </div>--%>
            </div>
        </div>
    </div>
</asp:Panel>
