@using Leica.Spider.BusinessCenter.Frontend.Utils
@using Leica.Spider.BusinessCenter.Frontend.Models
@model Leica.Spider.BusinessCenter.Frontend.Areas.User.Models.UsageReportViewModel
@{
    ViewBag.Title = Lang.Raw("IDS_USAGE_REPORTS_HEADER");
    var isConsumer = Session.UserPrivileges == Leica.Spider.BusinessCenter.WCFInterfaces.UserPrivileges.EnterpriseConsumer;
}

@section styles {
    @Styles.Render("~/Areas/User/Content/UsageReports")
    @Styles.Render("~/Content/Leaflet/all")
    @Styles.Render("~/Content/ConnectionReports/PlotRoverConnections")
}

@section scripts {
    @Scripts.Render("~/bundles/jQueryDataTable")
    <partial name="_DateRangePickerPartial" />
    @Scripts.Render("~/bundles/UsageReports")
    <leaflet-scripts />
    @Scripts.Render("~/bundles/ConnectionReports/PlotRoverConnections")
}

    <div>
        <div class="wrapper-content">
        @if (Model.Subscriptions.Any())
        {
            @if (isConsumer)
            {
                <div class="subscriptionData"
             id="@Model.Subscriptions[0].SubscriptionId"
             data-articleno="@Model.Subscriptions[0].ArticleNumber"
             data-company="@Model.Subscriptions[0].Company"
             data-username="@Model.Subscriptions[0].UserName">
                </div>
            }
            else
            {
                <div class="subscriptions row">
                    @foreach (var subscription in Model.Subscriptions)
                    {
                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                            <div class="panel panel-default subscriptionCard">
                                <div class="panel-body status">
                                    <div class="who">
                                        <div class="subscriptionDetails">
                                            <div class="articleImage">
                                                <img src='@Url.Action("GetArticlePicture", "UsageReports", new
                                                      {
                                                          articleId = subscription.ArticleId
                                                      })'
                                         alt="Sample Image"
                                         class="img-responsive"
                                         onerror="$(this).hide();"/>
                                            </div>
                                            <div class="details">
                                                <div class="SubscriptionId">
                                                    <span class="name">
                                                        <b>@subscription.SubscriptionId</b>
                                                    </span>
                                                </div>
                                                <div class="articleNumber"> @(subscription.ArticleNumber == null ? "" : subscription.ArticleNumber + ",") @subscription.PackageName</div>
                                            </div>
                                        </div>
                                        <div class="subscriptionData"
                                 id="@subscription.SubscriptionId"
                                 data-articleno="@subscription.ArticleNumber"
                                 data-company="@subscription.Company"
                                 data-username="@subscription.UserName">
                                        </div>
                                    </div>
                                    <div class="text hidden-xs">
                                        <partial name="_SubscriptionProgessBarsPartial" model="subscription" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            }
            <div id="pageHeader">
                <div class="actions row">
                    <div class="timeSelection col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="inputTimePeriod">
                            <div class="selectionPeriod hidden-xs">
                                <label>@Lang.Html("IDS_REPORTING_PRE_DEFINED_RANGE_LABEL")</label>
                                <div id="reportrange"
                                     style="cursor: pointer;">
                                    <i class="fa fa-calendar btn btn-primary"></i>
                                    <div></div>
                                </div>
                                <div class="selectionStartDate">
                                    <input type="hidden"
                                           id="startDate"
                                           name="startDate" />
                                </div>
                                <div class="selectionEndDate">
                                    <input type="hidden"
                                           id="endDate"
                                           name="endDate" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="dataResults">
                <div class="connection row">
                    <div id="listResults" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="busyMessage"></div>
                        <div id="listViewer"></div>
                        <script type="text/x-handlebars-template" id="listTemplate">
                            {{#if this}}
                            <div class="titleBar">
                                <h2>@Lang.Html("IDS_REPORTING_CONNECTION_DETAILS_HEADING")</h2>
                            </div>
                            <p class="selection">@Lang.Html("IDS_REPORTING_VIEW_TOTAL_USAGE_OF_USERS", $"<b>{User.Identity.Name}</b>")
                                <span data-toggle="tooltip" data-placement="top" title="{{dateTimeToOffset startDate}}">
                                {{dateTimeToLocaleDateOnlyNoUtc startDate}}
                                </span>-<span data-toggle="tooltip" data-placement="top" title="{{dateTimeToOffset endDate}}">
                                {{dateTimeToLocaleDateOnlyNoUtc endDate}}
                                </span>
                            </p>
                            <div class="row">
                                <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6">@Lang.Html("IDS_REPORTING_VIEW_TOTAL_NUMBER_OF_CONNECTIONS")</div>
                                <div class="col-lg-8 col-md-9 col-sm-9 col-xs-6">{{count}}</div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6">@Lang.Html("IDS_REPORTING_VIEW_TOTAL_CONNECTION_TIME")</div>
                                <div class="col-lg-8 col-md-9 col-sm-9 col-xs-6">{{duration}}</div>
                            </div>
                            <h1>{{durationTxt}}</h1>
                            {{else}}
                            <div class="alert alert-danger">
                                <i class="fa-fw fa fa-warning"></i>
                            @Lang.Html("IDS_USER_REPORTING_GENERATION_FAILED_ERROR")
                            </div>
                            {{/if}}
                        </script>
                        <div class="message">
                            <h6>@Lang.Html("IDS_TABLE_MESSAGES_NODATAAVAILABLE")</h6>
                        </div>

                        <script>
                            Handlebars.registerHelper('generateDetailedConnectionLogUrl',
                                function(connectionId) {
                                    return new Handlebars.SafeString(window.rootDir + 'UsageReports/View/' + connectionId);
                                });
                        </script>
                        <datatable id="connectionsTable"
                               mode="@DataTableMode.None"
                               search="@Lang.Attr("IDS_REPORTING_SEARCH")"
                               default-sort-index="1"
                               default-sort-order="desc"
                               id-Field="ConnectionId"
                               source-mode="@DataTableSourceMode.Javascript">

                            <datatable-button id="exportXls"
                                icon="icon-file-excel"
                                tooltip="@Lang.Attr("IDS_REPORTS_XLS_EXPORT")" />

                            <datatable-column field="Start"
                                          searchable="true"
                                          sortable="true"
                                          header="@Lang.Attr("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_STARTDATE")">
                                <span data-toggle="tooltip" data-placement="top" title="{{dateTimeToOffset Start}}">{{dateTimeToLocaleDateTime Start}}</span>
                            </datatable-column>

                            <datatable-column field="Duration"
                                          searchable="true"
                                          sortable="true"
                                          header="@Lang.Attr("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_DURATION")">
                                <div>{{Duration}}</div>
                            </datatable-column>

                            <datatable-column field="SubscriptionId"
                                          sortable="true"
                                          searchable="true"
                                          header="@Lang.Attr("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_SUBSCRIPTION")">
                                <span class="entityName">{{SubscriptionId}}</span>
                            </datatable-column>

                            <datatable-column field="CredentialName"
                                          searchable="true"
                                          sortable="true">
                                <datatable-header>
                                    @Lang.Html(isConsumer ? "IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_CONSUMER" : "IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_USER_NAME")
                                </datatable-header>
                                <datatable-cell>
                                    {{CredentialName}}
                                </datatable-cell>
                            </datatable-column>

                            <datatable-column field="DetailedConnectionLog">
                                {{#if HasDetailedConnectionLog}}
                                <a href="{{generateDetailedConnectionLogUrl ConnectionId}}"
                               target="_blank"
                               class="icon icon-square-up-right"
                               data-toggle="tooltip"
                               data-placement="left"
                               title="@Lang.Attr("IDS_CONNECTIONS_VIEW_GRID_SHOW_CONNECTION_LOG_TOOLTIP")"></a>
                                {{else}}
                                <span class="text-center icon icon-blocked"
                                  data-toggle="tooltip"
                                  data-placement="left"
                                  title="@Lang.Attr("IDS_CONNECTIONS_VIEW_GRID_CONNECTION_LOG_NOT_AVAILABLE_TOOLTIP")"></span>
                                {{/if}}
                            </datatable-column>

                            <datatable-column field="PlotConnectionsLink">
                                {{#if HasDetailedConnectionLog}}
                                <a data-toggle="tooltip"
                               class="icon icon-map plotRoverConnections"
                               href="javascript:void(0)"
                               title="@Lang.Attr("IDS_CONNECTION_REPORT_PLOT_ROVER_CONNECTIONS_TOOLTIP")"
                               data-placement="left"></a>
                                {{/if}}
                            </datatable-column>
                        </datatable>
                    </div>
                </div>
            </div>
        }
        else
        {
            <div id="instructionText">
                <label>@Lang.Html("IDS_CONNECTIONS_VIEW_NO_SUBSCRIPTIONS")</label>
            </div>
        }
    </div>
</div>
<partial name="_PlotRoverConnections" />
<partial name="~/Views/Shared/_XlsExportPartial.cshtml" />
<script type="text/javascript">
    ExcelConfig.targetSelector = '#exportXls';
    ExcelConfig.urlBegin = '@Url.Action("ConnectionsStreamBegin")';
    ExcelConfig.urlFeed = '@Url.Action("ConnectionsStreamGetChunk")';
    ExcelConfig.urlCancel = '@Url.Action("ConnectionsStreamCancel")';
    var mapOriginDefault = {
        'lat': @Model.MapOriginLat.ToString(System.Globalization.CultureInfo.InvariantCulture),
        'lon': @Model.MapOriginLong.ToString(System.Globalization.CultureInfo.InvariantCulture),
        'zoom': @Model.MapOriginZoom.ToString(System.Globalization.CultureInfo.InvariantCulture),
        'lastUpdate': @Model.MapZoomLastUpdate
                };
    var userRole = '@Model.UserRole';
    var consumerName = '@(Context.Request.Query["selectedConsumer"])';
    var reportingConfig = {
        mode: '@Model.ReportMode.ToString()',
        userId: @(Model.UserId.HasValue ? Model.UserId.ToString() : "null")
    };
    var today = '@Html.GetNowAsJsDateString()';
    var Localisation_No = @Lang.JsString("IDS_INDIVIDUALUSERS_VIEW_COLUMN_HEADER_NAME_SNO");
    var Localisation_Subscription_Id = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_SUBSCRIPTION");
    var Localisation_UserName = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_USER_NAME");
    var Localisation_Start = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_STARTDATE");
    var Localisation_EndDate = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_ENDDATE");
    var Localisation_Duration = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_DURATION");
    var Localisation_Lat = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_LAT");
    var Localisation_Lon = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_LON");
    var Localisation_Height = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_HEIGHT");
    var Localisation_RoverType = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_COLUMN_HEADER_ROVERTYPE");
    var Localisation_Company = @Lang.JsString("IDS_USERS_VIEW_USER_GRID_COLUMN_HEADER_COMPANY");
    var Localisation_Unit_Hours = @Lang.JsString("IDS_SUBSCRIPTIONS_UNIT_HOURS");
    var Localisation_Unit_Minutes = @Lang.JsString("IDS_SUBSCRIPTIONS_UNIT_MINUTES");
    var Localisation_Dialog_Header = @Lang.JsString("IDS_MESSAGE_WINDOW_TITLE");
    var Localisation_Show_Log_Tooltip = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_SHOW_CONNECTION_LOG_TOOLTIP");
    var Localisation_No_Log_Tooltip = @Lang.JsString("IDS_CONNECTIONS_VIEW_GRID_CONNECTION_LOG_NOT_AVAILABLE_TOOLTIP");
    var Localisation_TableEntries_Info = @Lang.JsString("IDS_DATATABLE_TABLE_ENTRIES_INFO", "_START_", "_END_", "_TOTAL_");
</script>