@page
@model DashboardBottomModel
@{
  Layout = null;
}

@section Styles {
  <link href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/nvd3/nv.d3.min.css" rel="stylesheet" type="text/css" />
  <link href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/tablesaw/css/tablesaw.css" rel="stylesheet" type="text/css" />
}

<div class="row">
  <div class="col-md-4 px-1">
    <div class="card-box px-2" style="height:305px;">
      <div class="cdev" data-percent="100" data-duration="@Html.Raw(@Model.PTMagicConfiguration.GeneralSettings.Monitor.RefreshSeconds * 1000)" data-color="#aaa,#414d59"></div>
      @if (!Model.TrendChartDataJSON.Equals("")) {
        <div class="trend-chart">
          <svg style="height: 300px;width: 100%;"></svg>
        </div>
      } else {
        <p>Unable to load graph, no market trend data found.</p>
      }
    </div>
  </div>
  <div class="col-md-3 px-1">
    <div class="card-box px-3" style="height:305px;">
      <div class="cdev" data-percent="100" data-duration="@Html.Raw(@Model.PTMagicConfiguration.GeneralSettings.Monitor.RefreshSeconds * 1000)" data-color="#aaa,#414d59"></div>
      @{
      string totalCurrentValueString = Model.totalCurrentValue.ToString("#,#0.00000000", new System.Globalization.CultureInfo("en-US"));
      if (Model.totalCurrentValue > 100) {
        totalCurrentValueString = Math.Round(Model.totalCurrentValue, 2).ToString("#,#0.00", new System.Globalization.CultureInfo("en-US"));
        }
      }   
      <div id="AssetDistribution" class="container">        
        <div class="row px1">
          <div class="col-3 px-1 text-center"><small>Start:&nbsp;<text class="text-autocolor">@Model.PTMagicConfiguration.GeneralSettings.Application.StartBalance @Model.Summary.MainMarket</text></small></div>
          <div class="col-6 px-1 text-center"><small>TCV:&nbsp;<text class="text-autocolor">@totalCurrentValueString @Model.Summary.MainMarket</text></small></div>
          <div class="col-3 px-1 text-center"><small>Gain:&nbsp;<text class="text-autocolor">@Math.Round(((Model.totalCurrentValue - Model.PTMagicConfiguration.GeneralSettings.Application.StartBalance) / Model.PTMagicConfiguration.GeneralSettings.Application.StartBalance) * 100, 2)%</text></small></div>
        </div>
        <div class="row px1">
          <svg style="height:260px;width:100%"></svg>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-5 px-1">
    <div class="cdev" data-percent="100" data-duration="@Html.Raw(@Model.PTMagicConfiguration.GeneralSettings.Monitor.RefreshSeconds * 1000)" data-color="#aaa,#414d59"></div>
    <div class="card-box px-2" style="height:305px;">
      @if (!Model.ProfitChartDataJSON.Equals("")) {
        <div class="profit-chart">
          <svg style="height:300px;width:100%"></svg>
        </div>
      } else {
        <p>Unable to load graph, no sales data found.</p>
      }
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6 px-1">
    <div class="card-box px-2">
      <div class="cdev" data-percent="100" data-duration="@Html.Raw(@Model.PTMagicConfiguration.GeneralSettings.Monitor.RefreshSeconds * 1000)" data-color="#aaa,#414d59"></div>
      <br>
      <h4 class="m-t-0 m-b-20 header-title"><b>Market Trends at @Model.PTMagicConfiguration.GeneralSettings.Application.Exchange</b>
      <small class="pull-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)MarketAnalyzer">more</a></small></h4>
      <table class="table table-sm">
        <thead>
          <tr>
            <th>Name</th>
            <th class="text-right">Markets</th>
            <th class="text-right">Timeframe</th>
            <th class="text-right">Change</th>
          </tr>
        </thead>
        <tbody>
          @foreach (var marketTrend in Model.MarketTrends.OrderBy(mt => mt.TrendMinutes)) {
            if (Model.Summary.MarketTrendChanges.ContainsKey(marketTrend.Name)) {
              double trendChange = Model.Summary.MarketTrendChanges[marketTrend.Name].OrderByDescending(mtc => mtc.TrendDateTime).First().TrendChange;
              string trendChangeOutput = trendChange.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US"));

              int marketCount = marketTrend.MaxMarkets;
              string marketCountString = marketCount.ToString();

              if (marketCount == 0) {
                marketCountString = "All";
              } else if (marketCount > Model.Summary.MarketSummary.Keys.Count && marketTrend.Platform.Equals("Exchange", StringComparison.InvariantCultureIgnoreCase)) {
                marketCountString = Model.Summary.MarketSummary.Keys.Count.ToString();
              }
              <tr>
                <td>@Core.Helper.SystemHelper.SplitCamelCase(marketTrend.Name)</td>
                <td class="text-right">@marketCountString</td>
                <td class="text-right">@Core.Helper.SystemHelper.GetProperDurationTime(marketTrend.TrendMinutes * 60, false)</td>
                <td class="text-right text-autocolor">@trendChangeOutput%</td>
              </tr>
            }
          }
        </tbody>
      </table>
    </div>
  </div>
  
  <div class="col-md-6 px-1">
    <div class="card-box px-2">
      <div class="cdev" data-percent="100" data-duration="@Html.Raw(@Model.PTMagicConfiguration.GeneralSettings.Monitor.RefreshSeconds * 1000)" data-color="#aaa,#414d59"></div>
      <br>
      <h4 class="m-t-0 m-b-20 header-title"><b>Sales Overview</b><small class="pull-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)SalesAnalyzer">more</a></small></h4>
     @{
        double totalProfit = Model.PTData.SellLog.Sum(s => s.Profit);
        double totalProfitFiat = Math.Round(totalProfit * Model.Summary.MainMarketPrice, 2);
        double percentGain = Math.Round(totalProfit / Model.PTMagicConfiguration.GeneralSettings.Application.StartBalance * 100, 2);
        string percentGainText = percentGain.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US")) + "%";
        if (Model.PTData.TransactionData.Transactions.Count > 0) 
        {
          percentGainText = "<i class=\"fa fa-info-circle text-muted\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"You have added at least one manual transaction, so the total gain percentage cannot be calculated.\"></i>";
        }

        double todaysStartBalance = Model.PTData.GetSnapshotBalance(Model.DateTimeNow.DateTime);
        double todaysProfit = Model.PTData.SellLogToday.Sum(s => s.Profit);
        double todaysProfitFiat = Math.Round(todaysProfit * Model.Summary.MainMarketPrice, 2);
        double todaysPercentGain = Math.Round(todaysProfit / todaysStartBalance * 100, 2);

        double yesterdaysStartBalance = Model.PTData.GetSnapshotBalance(Model.DateTimeNow.DateTime.AddDays(-1));
        double yesterdaysProfit = Model.PTData.SellLogYesterday.Sum(s => s.Profit);
        double yesterdaysProfitFiat = Math.Round(yesterdaysProfit * Model.Summary.MainMarketPrice, 2);
        double yesterdaysPercentGain = Math.Round(yesterdaysProfit / yesterdaysStartBalance * 100, 2);

        double last7DaysStartBalance = Model.PTData.GetSnapshotBalance(Model.DateTimeNow.DateTime.AddDays(-7));
        double last7DaysProfit = Model.PTData.SellLogLast7Days.Sum(s => s.Profit);
        double last7DaysProfitFiat = Math.Round(last7DaysProfit * Model.Summary.MainMarketPrice, 2);
        double last7DaysPercentGain = Math.Round(last7DaysProfit / last7DaysStartBalance * 100, 2);

        double last30DaysStartBalance = Model.PTData.GetSnapshotBalance(Model.DateTimeNow.DateTime.AddDays(-30));
        double last30DaysProfit = Model.PTData.SellLogLast30Days.Sum(s => s.Profit);
        double last30DaysProfitFiat = Math.Round(last30DaysProfit * Model.Summary.MainMarketPrice, 2);
        double last30DaysPercentGain = Math.Round(last30DaysProfit / last30DaysStartBalance * 100, 2);
      }
      <table class="table table-sm">
        <thead>
          <tr>
            <th></th>
            <th class="text-right">Sales</th>
            <th class="text-right">Profit @Model.Summary.MainMarket</th>
            <th class="text-right">Profit @Model.Summary.MainFiatCurrency</th>
            <th class="text-right">% Gain</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Today</th>
            <td class="text-right">@Model.PTData.SellLogToday.Count</td>
            <td class="text-right text-autocolor">@todaysProfit.ToString("#,#0.00000000", new System.Globalization.CultureInfo("en-US"))</td>
            <td class="text-right text-autocolor">@Html.Raw(Model.MainFiatCurrencySymbol + todaysProfitFiat.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US")))</td>
            <td class="text-right text-autocolor">@todaysPercentGain.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US"))%</td>
          </tr>
          <tr>
            <th>Yesterday</th>
            <td class="text-right">@Model.PTData.SellLogYesterday.Count</td>
            <td class="text-right text-autocolor">@yesterdaysProfit.ToString("#,#0.00000000", new System.Globalization.CultureInfo("en-US"))</td>
            <td class="text-right text-autocolor">@Html.Raw(Model.MainFiatCurrencySymbol + yesterdaysProfitFiat.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US")))</td>
            <td class="text-right text-autocolor">@yesterdaysPercentGain.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US"))%</td>
          </tr>
          <tr>
            <th>Last 7 Days</th>
            <td class="text-right">@Model.PTData.SellLogLast7Days.Count</td>
            <td class="text-right text-autocolor">@last7DaysProfit.ToString("#,#0.00000000", new System.Globalization.CultureInfo("en-US"))</td>
            <td class="text-right text-autocolor">@Html.Raw(Model.MainFiatCurrencySymbol + last7DaysProfitFiat.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US")))</td>
            <td class="text-right text-autocolor">@last7DaysPercentGain.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US"))%</td>
          </tr>
          <tr>
            <th>Last 30 Days</th>
            <td class="text-right">@Model.PTData.SellLogLast30Days.Count</td>
            <td class="text-right text-autocolor">@last30DaysProfit.ToString("#,#0.00000000", new System.Globalization.CultureInfo("en-US"))</td>
            <td class="text-right text-autocolor">@Html.Raw(Model.MainFiatCurrencySymbol + last30DaysProfitFiat.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US")))</td>
            <td class="text-right text-autocolor">@last30DaysPercentGain.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US"))%</td>
          </tr>
          <tr>
            <th>Total</th>
            <td class="text-right">@Model.PTData.SellLog.Count</td>
            <td class="text-right text-autocolor">@totalProfit.ToString("#,#0.00000000", new System.Globalization.CultureInfo("en-US"))</td>
            <td class="text-right text-autocolor">@Html.Raw(Model.MainFiatCurrencySymbol + totalProfitFiat.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US")))</td>
            <td class="text-right text-autocolor">@Html.Raw(percentGainText)</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/d3/d3.min.js"></script>
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/nvd3/nv.d3.min.js"></script>
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/tablesaw/js/tablesaw.js"></script>
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/tablesaw/js/tablesaw-init.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
      $(".cdev").circlos();
      $('[data-toggle="tooltip"]').tooltip();
      $('.text-autocolor').autocolor(false);

      @if (!Model.AssetDistributionData.Equals("")) {
      <text>
        nv.addGraph(function() {
          var chart = nv.models.pieChart()
            .x(function(d) { return d.label })
            .y(function(d) { return d.value })
            .showLabels(true)     //Display pie labels
            .labelThreshold(.1)   //Configure the minimum slice size for labels to show up
            .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
            .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
            .donutRatio(0.3)     //Configure how big you want the donut hole size to be.
            ;
        d3.select("#AssetDistribution svg")
          .datum(@Html.Raw(Model.AssetDistributionData))
          .transition().duration(350)
          .call(chart);
        return chart;
      });
      </text>
      }
    });

  (function ($) {
    'use strict';
    $('[role="tooltip"]').remove();
    $('[data-toggle="tooltip"]').tooltip();
    $('.text-autocolor').autocolor(false);

    @if (!Model.Summary.CurrentGlobalSetting.SettingName.Equals(Model.LastGlobalSetting)) {
      <text>
        $.Notification.notify('success', 'top left', '@Core.Helper.SystemHelper.SplitCamelCase(Model.Summary.CurrentGlobalSetting.SettingName) now active!', 'PTMagic switched Profit Trailer settings to "@Core.Helper.SystemHelper.SplitCamelCase(Model.Summary.CurrentGlobalSetting.SettingName)".');
      </text>
    }
    @if (!Model.TrendChartDataJSON.Equals("")) {
      <text>
        nv.addGraph(function () {
          var lineChart = nv.models.lineChart();
          var height = 300;
          var chartData = @Html.Raw(Model.TrendChartDataJSON);
        lineChart.useInteractiveGuideline(true);
        lineChart.xAxis.tickFormat(function (d) { return d3.time.format('%H:%M')(new Date(d)); });
        lineChart.yAxis.axisLabel('Trend %').tickFormat(d3.format(',.2f'));
        d3.select('.trend-chart svg').attr('perserveAspectRatio', 'xMinYMid').datum(chartData).transition().duration(500).call(lineChart);
        //nv.utils.windowResize(lineChart.update); v1.3.0 => Removed this line to prevent memory leak
        return lineChart;
      });
      </text>
    }
    @if (!Model.ProfitChartDataJSON.Equals("")) {
      <text>
        nv.addGraph(function () {
          var lineChart = nv.models.lineChart();
          var height = 300;
          var chartData = @Html.Raw(Model.ProfitChartDataJSON);
        lineChart.useInteractiveGuideline(true);
        lineChart.xAxis.tickFormat(function (d) { return d3.time.format('%Y/%m/%d')(new Date(d)); });
        lineChart.yAxis.axisLabel('Daily Profit').tickFormat(d3.format(',.2f'));
        d3.select('.profit-chart svg').attr('perserveAspectRatio', 'xMinYMid').datum(chartData).transition().duration(500).call(lineChart);
        //nv.utils.windowResize(lineChart.update); v1.3.0 => Removed this line to prevent memory leak
        return lineChart;
      });
      </text>
    }
    })(jQuery);
</script>