<%@ page title="" language="VB" masterpagefile="~/Template/Master.master" autoeventwireup="false" inherits="PCC_DC_ADHome, MachSol.MachPanel.Web" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="EM" %>
<%@ Register Src="~/Template/GVPager.ascx" TagName="Pager" TagPrefix="EM" %>
<%@ Register Src="CC/Reports.ascx" TagName="Reports" TagPrefix="UC" %>
<%@ Register TagPrefix="cc1" Namespace="System.Web.UI" Assembly="System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %>

<asp:Content ID="Content4" ContentPlaceHolderID="CPH_Content" runat="Server">
    <script type="text/javascript">

        function UserReports(dataParam) {

            //Morris.Bar({
            //    element: 'graph1',
            //    data: [
            //        { y: '2006', a: 90, b: 90 },
            //        { y: '2007', a: 75, b: 65 },
            //        { y: '2008', a: 50, b: 40 },
            //        { y: '2009', a: 75, b: 65 },
            //        { y: '2010', a: 50, b: 40 },
            //        { y: '2011', a: 75, b: 65 },
            //        { y: '2012', a: 100, b: 90 }
            //    ],
            //    xkey: 'y',
            //    ykeys: ['a', 'b'],
            //    labels: ['Series A', 'Series B']
            //    //element: 'graph1',
            //    //data: $.parseJSON(dataParam),
            //    //xkey: 'x',
            //    //ykeys: ['a', 'b'],
            //    //labels: ['Sent', 'Received'],
            //    //fillOpacity: 0.6,
            //    //hideHover: 'auto',
            //    //behaveLikeLine: true,
            //    //resize: true,
            //    //pointFillColors: ['#ffffff'],
            //    //pointStrokeColors: ['black'],
            //    //lineColors: ['#2476ba', '#bbd34e']

            //});

            //Morris.Bar({
            //    element: 'graph1',
            //    data: $.parseJSON(dataParam),
            //    resize: true,
            //    xLabelMargin: 10,
            //    xLabelAngle: 70,
            //    xkey: 'x',
            //    ykeys: ['a']
            //});

            //var $arrColors = ['#34495E', '#26B99A', '#666', '#3498DB'];

            var data = [    // not used, just for testing purpose
                { y: 'Total', a: 70 },
                { y: 'Inactive', a: 30 },
                { y: 'Disabled', a: 20 },
                { y: 'Locked', a: 5 },
                { y: 'Never Logged In', a: 15 },
                { y: 'Expired', a: 10 }
            ],
                config = {
                    data: $.parseJSON(dataParam),
                    xkey: 'y',
                    ykeys: ['a'],
                    labels: ['Users'],
                    fillOpacity: 0.6,
                    hideHover: 'auto',
                    behaveLikeLine: true,
                    resize: true,
                    pointFillColors: ['#ffffff'],
                    pointStrokeColors: ['black'],
                    lineColors: ['gray', 'red'],
                    //barColors: ['#29abe2']
                    barColors: function (row, series, type) {
                        console.log("--> " + row.label, series, type);
                        if (row.label == "Total") return "#29abe2";
                        else if (row.label == "Inactive") return "#34495E";
                        else if (row.label == "Disabled") return "#26B99A";
                        else if (row.label == "Locked") return "#666";
                        else if (row.label == "Never Logged In") return "#ffc142";
                        else if (row.label == "Expired") return "#1ab394";
                    }
                };

            config.element = 'graph1';
            Morris.Bar(config);


            var parentDivWidth = $("#graph1").parent("div").width();
            $("#graph1").css("width", parentDivWidth);
            $("#graph1 > svg:nth-child(1)").css("width", parentDivWidth);
        }

    </script>

    <div class="col-xs-12">
        <div class="card">
            <%--<div class="header">
                <h2>
                    <asp:Literal ID="Ltl_SubsInfo" runat="server" /></h2>
            </div>--%>
            <div class="body">
                <asp:Button ID="Btn_RefreshTab" CssClass="RefreshTab" runat="server" Style="display: none;" />
                <EM:TabContainer ID="TC_AD" runat="server" OnClientActiveTabChanged="loadTabPanel">
                    <EM:TabPanel ID="Tab_Dashboard" runat="server" HeaderText="<%$ Resources:Content,SSM1000019%>">
                        <ContentTemplate>
                            <asp:Button ID="Btn_Tab0" runat="server" Style="display: none;" />
                            <asp:Panel ID="Pnl_TabContent0" runat="server">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="card">
                                            <div class="header">
                                                <h2>
                                                    <asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:Content,UserReports%>" EnableViewState="false" /></h2>
                                            </div>
                                            <div class="body">
                                                <div class="row" id="Div_SelectAD" runat="server">
                                                    <div class="col-xs-12 col-sm-3">
                                                        <asp:Literal ID="Literal2" runat="server" Text="<%$ Resources:Content,strSummaryForPleaseChooseOwner%>" EnableViewState="false" />:
                                                    </div>
                                                    <div class="col-xs-12 col-sm-3">
                                                        <asp:DropDownList ID="DDl_DC" AutoPostBack="true" runat="server"></asp:DropDownList>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xs-12">
                                                        <div id="graph1"></div>
                                                        <pre id="code2" class="prettyprint linenums">                                            
                                       </pre>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </asp:Panel>
                        </ContentTemplate>
                    </EM:TabPanel>
                    <EM:TabPanel ID="Tab_Reports" runat="server" HeaderText="<%$ Resources:Content,FAM00139%>">
                        <ContentTemplate>
                            <asp:Button ID="Btn_Tab1" runat="server" Style="display: none;" />
                            <asp:Panel ID="Pnl_TabContent1" runat="server">

                                <UC:Reports ID="UC_Reports" runat="server" />

                            </asp:Panel>
                        </ContentTemplate>
                    </EM:TabPanel>
                </EM:TabContainer>
            </div>
        </div>
    </div>

</asp:Content>

