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


<%@ Register Assembly="MachSol.MachPanel.Utility" Namespace="MachSol.MachPanel.Utility" TagPrefix="CC" %>
<CC:UpdatePanelInlineScriptControl ID="UpdatePanelInlineScriptControl1" runat="server">
    <script type="text/javascript">

        $(document).ready(function () {
            setTimeout(function () { GetBandwidthUsageView(); }, 500);
        })
        function SetGraphWidth(graphId) {

            var parentDivWidth = $("#" + graphId).parent("div").width();
            var parentDivHeight = $("#" + graphId).parent("div").height();
            $("#" + graphId).css("min-width", parentDivWidth);

            var lenghtiestLabelWidth = 0;
            $("#" + graphId).find('text').each(function () {
                if ($(this).context) {
                    if ($(this).context.clientWidth > lenghtiestLabelWidth) {
                        lenghtiestLabelWidth = $(this).context.clientWidth;
                    }
                }
            })
            $("#" + graphId).css("min-height", parentDivHeight + (lenghtiestLabelWidth / 9));
            $("#" + graphId + "> svg:nth-child(1)").css("min-width", parentDivWidth).css("min-height", parentDivHeight + (lenghtiestLabelWidth / 9));
        }

        function GetBandwidthUsageView() {

            $("#divGraph").removeClass("hide")

        <%--var params = '{"VPSId":"' + <%= VPSId %> +'"}';--%>
        var params = '{"VPSId":"' + $("#<%= hdfVPSId.ClientID %>").val() + '"'
            + ', "FromDate":"' + $("#<%= TxBx_FromDateGlobal.ClientID %>").val() + '"'
            + ', "ToDate":"' + $("#<%= TxBx_ToDateGlobal.ClientID %>").val()
            + '"}';

        $.ajax({
            type: "POST",
            url: "/RCC/VPS/VPSAccountDetail.aspx/GetVMBandwidthUsage",
            async: false,
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.d && msg.d.indexOf('Error') < 0) {
                    var arrayOfJobjects = jQuery.parseJSON(msg.d);

                    LoadBandwidthUsageBarGraph(arrayOfJobjects[0], "graph_bandwidth_usage", ['#ffa500', '#ff0000', '#0000ff'], '<%= Resources.Content.strTotal %>', '<%= Resources.Content.strInput %>', '<%= Resources.Content.strOutput %>');

                }
                else {
                    if (msg.d && msg.d.toLowerCase().indexOf('no records found') >= 0) {
                        $("#divGraph").addClass("hide")
                    }
                    else if (msg.d) {
                        alert(msg.d);
                    }
                }
            },
            error: function (errorMessage) {
                alert(JSON.stringify(errorMessage));
            }
        });

        }

        function LoadBandwidthUsageBarGraph(dataParam, graphId, barColors, labelA, labelB, labelC) {
            $("#" + graphId).empty();
            var body_color = getCookie('body_color');
            var lblColor = 'black'
            if (body_color == 'night-mode') {
                lblColor = 'white';
            }
            $("#" + graphId).css("height", "480")
            $("#" + graphId).css("min-height", 0);
            $("#" + graphId + "> svg:nth-child(1)").css("min-width", 0).css("min-height", 0);

            Morris.Bar({
                element: graphId,
                data: dataParam,
                resize: true,
                hideHover: true,
                xLabelMargin: 10,
                xLabelAngle: 70,
                fillOpacity: 0.6,
                barColors: barColors,
                xkey: 'y',
                ykeys: ['a', 'b', 'c'],
                labels: [labelA, labelB, labelC]
            });

            SetGraphWidth(graphId);
        }
    </script>
</CC:UpdatePanelInlineScriptControl>

<asp:HiddenField ID="hdfVPSId" runat="server" />
<div class="row">
    <div class="col-xs-12">


        <div class="card" id="div1" runat="server">

            <div class="body">
                <%-- <div class="row">
                    <div class="col-sm-4 col-xs-12 row-label">
                        <label>
                            <asp:Literal ID="Literal26" runat="server" EnableViewState="false" Text='<%$ Resources:Content, strBandWidthFor %>' />:
                        </label>
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        <label>
                            <asp:Label ID="Lbl_VM" runat="server" Text=""></asp:Label></label>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-4 col-xs-12 row-label">
                        <asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:Content, strBandwidthAllowedPerMonth %>"></asp:Literal>:                                                                
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        <asp:Label ID="lblBandwidthAllowedPerMonth" runat="server"> </asp:Label>
                    </div>
                </div>--%>



                <div class="row">
                    <%--<div class="col-sm-3 col-xs-12 row-label">
                        <label>
                            <asp:Literal ID="Literal9" runat="server" Text='<%$ Resources: Content, strDate %>'></asp:Literal>:
                        </label>
                    </div>--%>
                    <div class="col-sm-3 col-xs-12">
                        <label>
                            <asp:Literal ID="Literal11" runat="server" Text="<%$ Resources:Content,GN0000685%>" EnableViewState="false" />:
                        </label>
                        <div class="form-group display-date-input">
                            <div class="form-line">
                                <asp:TextBox ID="TxBx_FromDateGlobal" runat="server"></asp:TextBox>
                            </div>
                        </div>
                        <i runat="server" id="A_FromDate" class="material-icons icon-calendar col-calendar"></i>
                        <EM:CalendarExtender ID="CE_FromDate" runat="server" TargetControlID="TxBx_FromDateGlobal"
                            Format="<%# System.Threading.Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern %>"
                            PopupButtonID="A_FromDate" CssClass="date__calendar">
                        </EM:CalendarExtender>
                    </div>
                    <div class="col-sm-4 col-xs-12">
                        <label>
                            <asp:Literal ID="Literal3" runat="server" Text="<%$ Resources:Content,GN0000690%>" EnableViewState="false" />:
                        </label>
                        <div class="form-group display-date-input">
                            <div class="form-line">
                                <asp:TextBox ID="TxBx_ToDateGlobal" runat="server"></asp:TextBox>
                            </div>
                        </div>
                        <i runat="server" id="A_ToDate" class="material-icons icon-calendar col-calendar"></i>
                        <EM:CalendarExtender ID="CE_ToDate" runat="server" TargetControlID="TxBx_ToDateGlobal"
                            Format="<%# System.Threading.Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern %>"
                            PopupButtonID="A_ToDate" CssClass="date__calendar">
                        </EM:CalendarExtender>
                    </div>
                    <div class="col-sm-3 col-xs-12">
                        <div class="form-group form-float">
                            <asp:Button ID="btn_SearchBandWidth" CssClass="btn btn-primary waves-effect" runat="server" Text='<%$ Resources:Content,GN0000395 %>' />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">
                        <asp:Literal ID="Literal15" runat="server" Text="<%$ Resources:Content, strBandwidthUsed %>"></asp:Literal>:                                                                
                    </div>
                    <div class="col-sm-4 col-xs-12">
                        <asp:Label ID="lblBandwidthofCurrentMonth" runat="server"> </asp:Label>
                    </div>
                    <div class="col-sm-3 col-xs-12">
                        <div class="form-group form-float">
                            <asp:Button ID="btnSync" CssClass="btn btn-primary waves-effect btnAction" runat="server" Text='<%$ Resources:Content,strSync %>' />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card" id="divRecord" runat="server">

            <div class="body">
                <div class="row">

                    <div class="col-xs-12" id="divGraph" runat="server">
                        <div class="row">
                            <div class="col-xs-10">
                                <h4 class="text-center"><%= Resources.Content.strBandwidthUsageGB%></h4>
                            </div>
                            <div class="col-xs-2 text-right">
                                <asp:Label ID="lblTotal" ForeColor="Orange" runat="server" Text='<%$ Resources:Content,strTotal%>'></asp:Label>
                                <br />
                                <asp:Label ID="lblOutput" ForeColor="Red" runat="server" Text='<%$ Resources:Content,strInput%>'></asp:Label>
                                <br />
                                <asp:Label ID="lblInput" ForeColor="Blue" runat="server" Text='<%$ Resources:Content,strOutput%>'></asp:Label>

                            </div>
                        </div>
                        <div class="row">
                            <div id="graph_bandwidth_usage"></div>

                        </div>
                    </div>

                    <div class="col-xs-12 row-label">
                        <EM:MPGridView ID="GV_BandwidthDetail" CssClass="table table-bordered table-striped table-hover" runat="server" AllowPaging="false"
                            AllowSorting="false" EmptyDataText='<%$ Resources:Content, GN00001375 %>' AutoGenerateColumns="false">

                            <Columns>
                                <asp:TemplateField HeaderText='<%$ Resources:Content,VMName%>' HeaderStyle-CssClass="col-xs-3">
                                    <ItemTemplate>
                                        <asp:Literal ID="LB_VMName" runat="server"></asp:Literal>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText='<%$ Resources:Content,strDate%>' HeaderStyle-CssClass="col-xs-2">
                                    <ItemTemplate>
                                        <asp:Literal ID="LB_Date" runat="server"></asp:Literal>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText='<%$ Resources:Content,strInput%>' HeaderStyle-CssClass="col-xs-2">
                                    <ItemTemplate>
                                        <asp:Literal ID="LB_Input" runat="server"></asp:Literal>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText='<%$ Resources:Content,strOutput%>' HeaderStyle-CssClass="col-xs-2">
                                    <ItemTemplate>
                                        <asp:Literal ID="LB_OutPut" runat="server"></asp:Literal>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="<%$ Resources:Content, strTotal %>" HeaderStyle-CssClass="col-xs-3">
                                    <ItemTemplate>
                                        <asp:Literal ID="Lbl_Total" runat="server"></asp:Literal>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <%--<PagerTemplate>
                                <EM:Pager ID="Pager" runat="server" />
                            </PagerTemplate>--%>
                        </EM:MPGridView>

                    </div>
                </div>

            </div>
        </div>
        <div class="card" id="divNoRecord" runat="server" visible="false">
            <div class="body">
                <div class="row">
                    <div class="col-xs-12">

                        <asp:Literal ID="Literal10" runat="server" Text='<%$ Resources:Content, GN00001375 %>'></asp:Literal>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
