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

<script type="text/javascript" src="/JS/google/charts/loader.min.js"></script>

<script type="text/javascript">

    google.charts.load('current', { packages: ['corechart', 'bar'] });
    function drawChart() {

        //Subs by status chart
        var dataArr = Array.from(JSON.parse($get('<%= HF_PieChartData.ClientID %>').value.replace(/&quot;/g, '\"')));

        dataArr.unshift(['Graph', '', { type: 'string', role: 'tooltip' }]);

        var subsData = google.visualization.arrayToDataTable(dataArr);
        var subsByStatuschart = new google.visualization.PieChart($("div[id$='subs_status_chart']").get(0));

        subsByStatuschart.draw(subsData, { title: '', height: '400', legend: { position: 'right' }, pieSliceText: 'value' });

        //Bar Chart Options
        var options = {
            title: '',
            isStacked: true,
            bar: { groupWidth: '45%' },
            chartArea: { 'width': '90%', 'height': '60%' },
            legend: { position: 'top' },
            hAxis: { textStyle: { fontSize: 11 } },
            vAxis: { textStyle: { fontSize: 11 } },
        };

        //Bar Chart By Category
        dataArr = Array.from(JSON.parse($get('<%= HF_BarChartByType.ClientID %>').value.replace(/&quot;/g, '\"')));
        subsData = google.visualization.arrayToDataTable(dataArr);
        // Instantiate and draw the chart.
        var chart = new google.visualization.ColumnChart($("div[id$='subs_type_chart']").get(0));
        chart.draw(subsData, options);

        //Bar Chart By Category
        dataArr = Array.from(JSON.parse($get('<%= HF_BarChartByCategory.ClientID %>').value.replace(/&quot;/g, '\"')));
        subsData = google.visualization.arrayToDataTable(dataArr);
        // Instantiate and draw the chart.
        var chart = new google.visualization.ColumnChart($("div[id$='subs_category_chart']").get(0));
        chart.draw(subsData, options);


        //Bar Chart By renewal
        dataArr = Array.from(JSON.parse($get('<%= HF_BarChartByRenewal.ClientID %>').value.replace(/&quot;/g, '\"')));
        subsData = google.visualization.arrayToDataTable(dataArr);
        // Instantiate and draw the chart.
        var chart = new google.visualization.ColumnChart($("div[id$='subs_renewal_chart']").get(0));
        chart.draw(subsData, options);

        //Bar Chart By product level (addon-base)
        dataArr = Array.from(JSON.parse($get('<%= HF_BarChartByLevel.ClientID %>').value.replace(/&quot;/g, '\"')));
        subsData = google.visualization.arrayToDataTable(dataArr);
        // Instantiate and draw the chart.
        var chart = new google.visualization.ColumnChart($("div[id$='subs_level_chart']").get(0));
        chart.draw(subsData, options);

    }
    google.charts.setOnLoadCallback(drawChart);
    $(window).resize(function () {
        setTimeout(function () { drawChart(); }, 100);
    });
</script>
<style type="text/css">
    .chart {
        min-height: 400px;
    }
    .summary-panel {
        min-height:210px;
    }
</style>

<asp:HiddenField ID="HF_PieChartData" runat="server" />

<asp:HiddenField ID="HF_BarChartByCategory" runat="server" />
<asp:HiddenField ID="HF_BarChartByRenewal" runat="server" />
<asp:HiddenField ID="HF_BarChartByType" runat="server" />
<asp:HiddenField ID="HF_BarChartByLevel" runat="server" />

<div class="col-xs-12">
    <div class="card">
        <div class="header">
            <h3>
                <asp:Literal id="Ltrl_Heading" runat="server" Text ='<%$ Resources:Content,StrCSPSubsSummary %>'></asp:Literal>
            </h3>
        </div>
        <div class="body">
            <div class="row" id="dr_owner" runat="server">
                <div class="row-label col-sm-3 col-xs-12">
                    <asp:Literal ID="Ltrl_ShowSummaryForOwner" runat="server" Text="<%$ Resources:Content,strSummaryForPleaseChooseOwner %>"></asp:Literal>
                </div>
                <div class="col-sm-4 col-xs-12">
                    <div class="form-group">
                        <asp:DropDownList ID="Ddl_StatsOwner" runat="server" AutoPostBack="true"></asp:DropDownList>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-xs-12 chart" id="subs_status_chart" runat="server"></div>
                <div class="col-md-6 col-xs-12 chart" id="subs_type_chart" runat="server"></div>
                <div class="col-md-4 col-xs-12 chart" id="subs_category_chart" runat="server"></div>
                <div class="col-md-4 col-xs-12 chart" id="subs_renewal_chart" runat="server"></div>
                <div class="col-md-4 col-xs-12 chart" id="subs_level_chart" runat="server"></div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

                    <div class="panel panel-primary summary-panel">
                        <div class="panel-heading  ">
                            <h3 class="panel-title">
                                <label class="control-label"><asp:Literal id="Ltrl_StrByStatus" runat="server" Text ='<% $Resources:Content,StrByStatus %>'></asp:Literal></label></h3>
                        </div>
                        <div class="panel-body">
                            <asp:Repeater ID="Rep_SubsByStaus" runat="server">
                                <ItemTemplate>
                                    <div class="col-xs-12">
                                        <span class="pull-left">
                                            <asp:label class="control-label" id="Lbl_SubsTitle" runat="server"></asp:label>
                                        </span>
                                        <span class="pull-right"><b>
                                            <asp:HyperLink ID="HL_Subs" runat="server"></asp:HyperLink></b></span>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

                    <div class="panel panel-primary summary-panel">
                        <div class="panel-heading  ">
                            <h3 class="panel-title">
                                <label class="control-label"><asp:Literal id="Ltrl_StrByType" runat="server" Text ='<% $Resources:Content,StrByType %>'></asp:Literal></label></h3>
                        </div>
                        <div class="panel-body">
                            <asp:Repeater ID="Rep_SubsByType" runat="server">
                                <ItemTemplate>
                                    <div class="col-xs-12">
                                        <span class="pull-left">
                                            <asp:label class="control-label" id="Lbl_SubsTitle" runat="server"></asp:label>
                                        </span>
                                        <span class="pull-right"><b>
                                            <asp:HyperLink ID="HL_Subs" runat="server"></asp:HyperLink></b></span>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

                    <div class="panel panel-primary summary-panel">
                        <div class="panel-heading  ">
                            <h3 class="panel-title">
                                <label class="control-label"><asp:Literal id="Ltrl_StrByCategory" runat="server" Text ='<% $Resources:Content,StrByCategory %>'></asp:Literal></label></h3>
                        </div>
                        <div class="panel-body">
                            <asp:Repeater ID="Rep_SubsByCategory" runat="server">
                                <ItemTemplate>
                                    <div class="col-xs-12">
                                        <span class="pull-left">
                                            <asp:label class="control-label" id="Lbl_SubsTitle" runat="server"></asp:label>
                                        </span>
                                        <span class="pull-right"><b>
                                            <asp:HyperLink ID="HL_Subs" runat="server"></asp:HyperLink></b></span>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

                    <div class="panel panel-primary summary-panel">
                        <div class="panel-heading  ">
                            <h3 class="panel-title">
                                <label class="control-label"><asp:Literal id="Ltrl_StrByRenewal" runat="server" Text ='<% $Resources:Content,StrByRenewal %>'></asp:Literal></label></h3>
                        </div>
                        <div class="panel-body">
                            <asp:Repeater ID="Rep_SubsByRenewal" runat="server">
                                <ItemTemplate>
                                    <div class="col-xs-12">
                                        <span class="pull-left">
                                            <asp:label class="control-label" id="Lbl_SubsTitle" runat="server"></asp:label>
                                        </span>
                                        <span class="pull-right"><b>
                                            <asp:HyperLink ID="HL_Subs" runat="server"></asp:HyperLink></b></span>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                </div>

                
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="panel panel-primary summary-panel">
                        <div class="panel-heading  ">
                            <h3 class="panel-title">
                                <label class="control-label"><asp:Literal id="Literal1" runat="server" Text ='<%$ Resources:Content,StrByLevel %>'></asp:Literal></label></h3>
                        </div>
                        <div class="panel-body">
                            <asp:Repeater ID="Rep_SubsByLevel" runat="server">
                                <ItemTemplate>
                                    <div class="col-xs-12">
                                        <span class="pull-left">
                                            <asp:label class="control-label" id="Lbl_SubsTitle" runat="server"></asp:label>
                                        </span>
                                        <span class="pull-right"><b>
                                            <asp:HyperLink ID="HL_Subs" runat="server"></asp:HyperLink></b></span>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
