<script>
    $(window).resize(function () {
        relayout();
    });
    $(document).ready(function () {
        setTimeout(function () {
            $("#tabs-report").tabs({
                activate: function (event, ui) {
                    var targetViewerElement = $(ui.newPanel).find(".wj-viewer").get(0);
                    var targetViewer = wijmo.Control.getControl(targetViewerElement);

                    var id = ui.newPanel.get(0).getAttribute("id");
                    if (id == "tabs-1") {
                        targetViewer.filePath = 'Content/Reports/RegionWiseSalesData.flxr';
                        targetViewer.reportName = 'RegionalSales Report';
                    } else if (id == "tabs-2") {
                        targetViewer.filePath = 'Content/Reports/CurrentOpportunitiesData.flxr';
                        targetViewer.reportName = 'OpportunityItem Report';
                    } else {
                        targetViewer.filePath = 'Content/Reports/ProfitAndSales.flxr';
                        targetViewer.reportName = 'ProfitAndSale Report';
                    }
                    targetViewer.refresh();
                }
            });


            relayout();
        }, 0);

        relayout();
    });

    function relayout() {
        var tabs = $('#tabs-report'),
            container = tabs.parent(),
            containerRect = container[0].getBoundingClientRect(),
            containerWidth = containerRect.width;

        containerWidth = containerWidth * 0.98;
        tabs.outerWidth(containerWidth);
        $(".ui-tabs-panel").outerWidth(containerWidth);

        $("#tabs-report .wj-viewer").outerWidth(containerWidth - 10);
        var targetViewer = wijmo.Control.getControl($("#tabs-report .wj-viewer").get(0));
        targetViewer.refresh();
    }
</script>
<div class="flex vertical" style="width:100%;height:100%;overflow:hidden;">
    <div>
        <h3>@DashboardDemo.Resource.ReportsPage_Title</h3>
    </div>
    <div class="auto" style="overflow:auto">
        <div id="tabs-report">
            <ul>
                <li><a href="#tabs-1">@DashboardDemo.Resource.RegionSales_Header</a></li>
                <li><a href="#tabs-2">@DashboardDemo.Resource.Opportunities_Header</a></li>
                <li><a href="#tabs-3">@DashboardDemo.Resource.ProfitAndSales_Header</a></li>
            </ul>
            <div id="tabs-1">
                <c1-report-viewer file-path="Content/Reports/RegionWiseSalesData.flxr"
                                  report-name="RegionalSales Report">
                </c1-report-viewer>
            </div>
            <div id="tabs-2">
                <c1-report-viewer>
                </c1-report-viewer>
            </div>
            <div id="tabs-3">
                <c1-report-viewer>
                </c1-report-viewer>
            </div>
        </div>
    </div>
</div>
