@Scripts.Render("~/bundles/Leaflet")
@Scripts.Render("~/bundles/User/easy-pie-chart")
@Scripts.Render("~/bundles/charts")
@Scripts.Render("~/bundles/RinexDataAvailability")
@Styles.Render("~/Content/Leaflet/all")
@Styles.Render("~/Content/Areas/RinexDataAvailability")
@using Leica.Spider.BusinessCenter.Frontend.Models
@using Leica.Spider.BusinessCenter.Frontend.Utils
@using Leica.Spider.BusinessCenter.WCFInterfaces
@model RinexDataAvailabilityViewModel
@{
    var notHidden = Model.ChartAccess != RinexDataAvailabilityChartsAccess.Hidden;
    var renderChart = Model.ChartAccess == RinexDataAvailabilityChartsAccess.AvailabilityIndicator;
}

<div class="rinexCharts">
    @if (Session.CanSeeRinexQuota(Application) && Model.ShowRinexQuotaIndicatorIfLimited)
    {
        <div class="dataConsumptionChart">
            <div class="piechartConsumptiondiv nodata">
                <div class="easy-pie-chart customConsumptionGreen easyPieChart "
                     data-percent="0"
                     data-pie-size="70">
                    <span class="percent percent-sign customConsumptionGreen font-xs bold"></span>
                </div>
                <div class="piechartConsumptionspan">
                    <div>
                        <b>@Lang.Html("IDS_RINEX_CONSUMPTION_QUOTA_AVAILABILITY_TITLE")</b>
                    </div>
                    <div>
                        @Lang.Html("IDS_DISTRIBUTIONCHANNELS_TEXT_TOTAL") <span class="totalEpochs"></span> @Lang.Html("IDS_PACKAGES_VIEW_DF_UNIT_EPOCHS_LABEL")
                    </div>
                    <div>@Lang.Html("IDS_PACKAGES_VIEW_DF_REMAINING_LABEL"): <span class="remainingEpochs"></span> @Lang.Html("IDS_PACKAGES_VIEW_DF_UNIT_EPOCHS_LABEL")</div>
                </div>
            </div>
        </div>
    }

    @if (notHidden)
    {
        <div class="dataAvailabilityChart @(renderChart ? "" : "pieChartButton")">
            @if (renderChart)
            {
                <div class="piechartdiv nodata">
                    <div class="easy-pie-chart txt-color-blue easyPieChart"
                         data-percent="0"
                         data-pie-size="70">
                        <span class="percent percent-sign txt-color-blue font-xs bold"></span>
                    </div>
                    <div class="piechartspan">
                        <div>
                            <b>@Lang.Html("IDS_RINEX_REQUEST_DATA_AVAILABILITY_LABEL")</b>
                        </div>
                        <div>
                            @Lang.Html("IDS_RINEX_REQUEST_DATA_AVAILABILITY_PERIOD_LABEL") <span class="totaldays"></span> @Lang.Html("IDS_RINEX_DATA_AVAILABILITY_DAYS_LABEL")
                        </div>
                    </div>
                </div>
            }
            else //button only
            {
                <button class="btn btn-default easyPieChart"
                        id="btnDataAvailability">
                    @Lang.Html("IDS_RINEX_DATA_AVAILABILITY_LABEL")
                </button>
            }
        </div>
    }
</div>

<div id="dataCompleteness"
     class="modal fade"
     role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button"
                        class="btn btn-default pull-right"
                        aria-hidden="true"
                        data-dismiss="modal">
                    <i class="fa fa-close"></i>
                </button>
                <button type="button"
                        class="btn btn-primary pull-right backButton">
                    <i class="fa fa-arrow-circle-left"></i>
                </button>
                <div class="header">
                    <h4 class="modal-title">@Lang.Html("IDS_RINEX_DATA_AVAILABILITY_MODAL_HEADER")</h4>
                    <span class="allSitesThirtyDaysTitle">@Lang.Html("IDS_RINEX_DATA_AVAILABILITY_MODAL_HEADER_DESCRIPTION")</span>
                    <span class="allSitesOneDayTitle">@Lang.Html("IDS_RINEX_DATA_AVAILABILITY_ALL_SITES_ONE_DAY_MODAL_HEADER_DESCRIPTION")</span>
                    <span class="singleSiteSelectedPeriodTitle">@Lang.Html("IDS_RINEX_DATA_AVAILABILITY_SITE_TIMEPERIOD_MODAL_HEADER_DESCRIPTION")</span>
                    <span class="singleSiteOneDayTitle">@Lang.Html("IDS_RINEX_DATA_AVAILABILITY_SITE_SELECTED_DAY_MODAL_HEADER_DESCRIPTION")</span>
                    <span class="allDaysSingleSiteTitle">@Lang.Html("IDS_RINEX_DATA_AVAILABILITY_SINGLE_SITE_ALL_DAYS_MODAL_HEADER_DESCRIPTION")</span>
                </div>
            </div>
            <div class="modal-body">
                <div class="alert alert-info fade in noDataMessage">
                    <i class="fa-fw fa fa-info"></i>
                    @Lang.Html("IDS_RINEX_DATA_AVAILABILITY_MODAL_NO_DATA_LABEL")
                </div>
                <div id="siteDateMatrix"
                     class="panel panel-default">
                </div>
                <div id="allSitesOneDayChart"
                     class="panel panel-default">
                    <div class="canvasWrap">
                        <canvas id="allSitesOneDayCanvasChart"></canvas>
                    </div>
                </div>
                <div id="singleSiteSelectedPeriodChart"
                     class="panel panel-default">
                    <div class="canvasWrap">
                        <div class="chartTitle"></div>
                        <canvas id="singleSiteSelectedPeriodCanvasChart"
                                height="100">
                        </canvas>
                    </div>
                </div>
                <div id="singleSiteSingleDayChart"
                     class="panel panel-default">
                    <div class="canvasWrap">
                        <div class="chartTitle"></div>
                        <canvas id="singleSiteSingleDayCanvasChart"
                                height="100">
                        </canvas>
                    </div>
                </div>
                <div id="allDaysOneSiteChart"
                     class="panel panel-default">
                    <div class="canvasWrap">
                        <div class="chartTitle"></div>
                        <canvas id="allDaysOneSiteCanvasChart"
                                height="100">
                        </canvas>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="legendContent">
                    <div class="cellRed legendContentCell"></div><span> 0 - 30 %</span>
                    <div class="cellYellow legendContentCell"></div><span> > 30 - 80 %</span>
                    <div class="cellGreen legendContentCell"></div><span> > 80 - 100 %</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/x-handlebars-template"
        id="siteDateMatrixTemplate">
    <div class="siteMatrixWrap clusterize-scroll">
        <table class="siteDateMatrix">
            @* header row *@
            <thead>
                <tr>
                    <th class="emptyCell"></th>
                    {{#each days}}
                    <th scope="col" class="{{getRinexAvailabilityColumnClass this}}" data-date="{{date}}">{{{formatDay date}}}</th>
                    {{/each}}
                </tr>
            </thead>
            <tbody class="clusterize-content">
                @*cells rows *@
                {{#each sites}}
                <tr>
                    <th scope="row"
                        data-siteid="{{siteId}}"
                        class="{{getRinexAvailabilityRowClass this}}">
                        {{siteCode}}
                    </th>

                    {{#each days}}
                    <td class="{{getRinexAvailabilityCellClass this}}"
                        data-toggle="tooltip"
                        data-html="true"
                        data-selectedDate="{{day.date}}"
                        title="{{getRinexAvailabilityCellTooltip this ..}}"
                        data-siteid="{{../siteId}}"></td>
                    {{/each}}

                </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</script>

<script type="text/x-handlebars-template"
        id="singleSiteChartTitleTemplate">
    <div class="timePeriod">{{selectionPeriod}}</div>
    <div class="siteDetails">
        <span class="siteName"><i class="icon icon2-SiteCode"></i> {{site.siteCode}}</span>
        <span class="siteData">
            <span class="markerName">
                <i class="icon icon2-MarkerName"></i> {{site.markerName}}
            </span>
            <span class="satelliteSystems">
                <i class="icon cp-satellite"></i>
                <span class="satelliteSystemList">{{formatSatelliteSystem site.satelliteSystem}}</span>
            </span>
            <span class="receiverType">
                <i class="icon cp-cs-camera"></i>{{site.receiverType}}
            </span>
            <span class="antennaType">
                <i class="icon cp-gs-rover"></i>{{site.antennaType}}
            </span>
        </span>
    </div>
</script>

<script type="text/javascript">
    var Localisation_Rinex_Data_Availability_Date_Tooltip = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_DATE_TOOLTIP");
    var Localisation_Rinex_Data_Availability_Site_Tooltip = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_SITE_TOOLTIP");
    var Localisation_Rinex_Data_Availability_Completeness_Tooltip = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_COMPLETENESS_TOOLTIP");
    var Localisation_Rinex_Data_Avalibility_All_Sites_One_Day_Chart_Title = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_COMPLETENESS_ALL_SITES_ONE_DAY_CHART_TITLE");
    var Localisation_Rinex_Data_Availability_LocalTime_Label = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_LOCALTIME_LABEL");
    var Localisation_Rinex_Data_Availability_GPSTime_Label = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_GPSTIME_LABEL");
    var Localisation_Rinex_Data_Availability_File_Label = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_FILE_LABEL");
    var Localisation_Rinex_Data_Availability_Completeness_Label = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_COMPLETENESS_LABEL");
    var Localisation_Rinex_Data_Availability_Unknown_Site_Label = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_COMPLETENESS_UNKNOWN_SITE_LABEL");
    var Localisation_Rinex_Data_Avalibility_All_Days_One_Site_Chart_Title = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_COMPLETENESS_ALL_DAYS_ONE_SITE_CHART_TITLE");
    var Localisation_Loading_Availability_Message = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_MODAL_LOADING_MESSAGE");
    var Localisation_Rinex_Data_Avalibility_Scale_Title = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_GPS_DAYS_LABEL");
    var Localisation_Rinex_Data_Avalibility_Local_Browser_Scale_Title = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_LOCAL_BROWSER_TIME_LABEL");
    var Localisation_Rinex_Data_Availability_Day_Of_Year = @Lang.JsString("IDS_RINEX_DATA_AVAILABILITY_DAY_OF_YEAR_LABEL");
</script>