@include('header')
      <div class="main-panel">
        <div class="content-wrapper">


          <ul class="nav nav-tabs border-top" id="setting-panel" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="todo-tab" data-toggle="tab" href="#todo-section" role="tab" aria-controls="todo-section" aria-expanded="true">Dashboard Activity Report</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="chats-tab" data-toggle="tab" href="#chats-section" role="tab" aria-controls="chats-section">Data Activity Report</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="todo-tab-2" data-toggle="tab" href="#todo-section-2" role="tab" aria-controls="todo-section-2">User Activity Report</a>
            </li>
          </ul>

          <div class="tab-content" id="setting-content">
            <div class="tab-pane fade show active scroll-wrapper" id="todo-section" role="tabpanel" aria-labelledby="todo-section">

              <!--div class="row">

                <div class="col-md-12 grid-margin stretch-card">
                  <div class="card">
                    <div class="card-body">
                    <div class="d-flex justify-content-between">
                      <p class="card-title">% of users who have subscribed to the platform this month</p>
                    </div>
                    <p align="center"><button class="btn btn-primary btn-sm" id="downloadChart">Export Chart</button></p>
                      <canvas id="pieChart"></canvas>

                    </div>
                  </div>
                </div>

              </div-->
            </div>
            <!-- To do section tab ends -->
            <div class="tab-pane fade" id="chats-section" role="tabpanel" aria-labelledby="chats-section">
                <h4>User Data</h4>              
              <div class="row">



                <div class="col-md-6 grid-margin stretch-card">
                  <div class="card">
                    <div class="card-body">
                    <div class="d-flex justify-content-between">
                      <p class="card-title">Total Number of Filters by User Preference (by Industry Type)</p>
                    </div>
                      <!--div id="sales-legend" class="chartjs-legend mt-4 mb-2"></div-->
                      <canvas id="IndustryChart"></canvas>
                    </div>
                  </div>
                </div>         


                <div class="col-md-6 grid-margin stretch-card">
                  <div class="card">
                    <div class="card-body">

                    <p class="card-title">Number of data viewed within a specific period.</p>
                    <div class="d-flex flex-wrap mb-5">
                      </div>
                        <!--div id="north-america-legend"></div-->
                        <canvas id="dataviewChart"></canvas>
                                    
                    </div>
                  </div>
                </div>   
              </div>            
            </div>

            
            <!-- chat tab ends -->

            <div class="tab-pane fade" id="todo-section-2" role="tabpanel" aria-labelledby="todo-section-2">
            <div class="row">



<div class="col-md-6 grid-margin stretch-card">
  <div class="card">
    <div class="card-body">
    <div class="d-flex justify-content-between">
      <p class="card-title">Number of Subscribed Users </p>
    </div>
      <div id="sales-legend" class="chartjs-legend mt-4 mb-2"></div>
      <canvas id="subscribedLineChart"></canvas>
    </div>
  </div>
</div>

<div class="col-md-6 grid-margin stretch-card">
  <div class="card">
    <div class="card-body">
      <p class="card-title">Number of Registered Users</p>
      <div class="d-flex flex-wrap mb-5">
      </div>
      <canvas id="registeredLineChart"></canvas>
    </div>
  </div>
</div>              


<div class="col-md-12 grid-margin stretch-card" >
  <div class="card">
    <div class="card-body">

    <p class="card-title">User Preferences Since Platform Deployment</p>
    <div class="d-flex flex-wrap mb-5">
      </div>
        <!--div id="preferenceLegend"></div-->
        <canvas id="preferenceChart" style="height:150px"></canvas>
    </div>
  </div>
</div>   
</div>   </div>  
            <!-- To do section tab ends -->

            </div>
          </div>
        </div>
</div></div>  </div>  
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->
        <footer class="footer">
          <div align="left" class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block"><p align="center" class="mb-0">Copyright &copy; Tritek Consulting Ltd 2022 </p>  </span>
          </div>
        </footer>
        <!-- partial -->
      </div>
      <!-- main-panel ends -->
    </div>   
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="{{ asset('vendors/js/vendor.bundle.base.js') }}"></script>
  <!-- endinject -->
  <!-- Plugin js for this page -->
  <script src="{{ asset('vendors/typeahead.js/typeahead.bundle.min.js') }}"></script>
  <script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
  <!-- End plugin js for this page -->
  <!-- inject:js -->
  <script src="{{ asset('js/off-canvas.js') }}"></script>
  <script src="{{ asset('js/hoverable-collapse.js') }}"></script>
  <script src="{{ asset('js/template.js') }}"></script>
  <script src="{{ asset('js/settings.js') }}"></script>
  <script src="{{ asset('js/todolist.js') }}"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="{{ asset('js/file-upload.js') }}"></script>
  <script src="{{ asset('js/typeahead.js') }}"></script>
  <script src="{{ asset('js/select2.js') }}"></script>
  <!-- End custom js for this page-->

  <!-- Plugin js for this page -->
  <script src="{{ asset('vendors/chart.js/Chart.min.js') }}"></script>
  <!-- Custom js for this page>
  <script src="{{ asset('js/chart.js') }}"></script-->
  <!-- Custom js for this page-->
  <script src="{{ asset('js/dashboards.js') }}"></script>
  <script src="{{ asset('js/Chart.roundedBarCharts.js') }}"></script>
  <!-- End custom js for this page-->

  <!-- End custom js for this page-->
  <script type="text/javascript">  
(function($) {
  'use strict';
  $(function() {
    @php
      use Carbon\Carbon;
    @endphp

    @php
      $trends = array("IT",
                    "Technology",
                );

      $industries = array("edu",
                          "bf",
                          "crypto",
                          "game",
                          "fit",
                          "aut"
                    );


                    $all = DB::table('users')->select(DB::raw("(COUNT(*)) as count"),DB::raw("MONTHNAME(created) as monthname"))
              ->whereYear('created', date('Y'))
              ->groupBy('monthname')
              ->get();

              $all2 = DB::table('subscription')->select(DB::raw("(COUNT(*)) as count"),DB::raw("MONTHNAME(created) as monthname"))
              ->whereYear('created', date('Y'))
              ->groupBy('monthname')
              ->get();      

              $all3 = DB::table('linkage_trend_activities')->select(DB::raw("(COUNT(*)) as count"),DB::raw("MONTHNAME(created_at) as monthname"))
              ->whereYear('created_at', date('Y'))
              ->groupBy('monthname')
              ->get();      


              @endphp


      if ($("#preferenceChart").length) {
      var areaData = {
        labels: [
          @php

            //          var_dump($all); exit;
              $total = DB::table('linkage_trend_activities')->count();

              $it = DB::table('linkage_trend_activities')->where('cat_type', '=', 'IT')->count();
              $itPercentage = round(($it/$total) * 100, 1);

              $tech = $total - $it;
              $techPercentage = round(($tech/$total) * 100, 1);
            @endphp

          
    @foreach($trends as $trend)        
          "{{ $trend }}",
    @endforeach        
        ],
        datasets: [{
            data: [

             {{ $itPercentage }} ,
             {{ $techPercentage }}    

            ],
            backgroundColor: ["#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D1","#3e95ce",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D2","#3e95cf",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D3","#3e95ca",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D4","#3e95cb",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D5","#3e95cc",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D6","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0"],
            borderColor: "rgba(0,0,0,0)"
          }
        ]
      };


      var areaOptions = {
        responsive: true,
        maintainAspectRatio: true,
        segmentShowStroke: false,
        cutoutPercentage: 78,
        elements: {
          arc: {
              borderWidth: 4
          }
        },      
        legend: {
          display: true
        },
        tooltips: {
          enabled: true
        },

      }
      var northAmericaChartPlugins = {
        beforeDraw: function(chart) {
          var width = chart.chart.width,
              height = chart.chart.height,
              ctx = chart.chart.ctx;
      
          ctx.restore();
          var fontSize = 3.125;
          ctx.font = "500 " + fontSize + "em sans-serif";
          ctx.textBaseline = "middle";
          ctx.fillStyle = "#13381B";
      
          var text = "%",
              textX = Math.round((width - ctx.measureText(text).width) / 2),
              textY = height / 2;
      
          ctx.fillText(text, textX, textY);
          ctx.save();
        }
      }
      var northAmericaChartCanvas = $("#preferenceChart").get(0).getContext("2d");
      var northAmericaChart = new Chart(northAmericaChartCanvas, {
        type: 'pie',
        data: areaData,
        options: areaOptions,
        plugins: northAmericaChartPlugins
      });
//      document.getElementById('preferenceLegend').innerHTML = northAmericaChart.generateLegend();
    }



/* Code for Subscription Bar Chart */
    var subscriptionPieData = {
    datasets: [{
      data: [
                            @php
                                $totalSubscription = DB::table('subscription')->count();
                                
                                $subscribedThisMonth = DB::table('subscription')->whereBetween('created', [Carbon::now()->startOfMonth(), Carbon::now()->endOfMonth()])
                                                    ->count();

                                $subscribedOtherMonths = $totalSubscription - $subscribedThisMonth;

                                $percentageSubscribedThisMonth = round(($subscribedThisMonth/$totalSubscription) * 100, 1);
                                $percentageSubscribedOtherMonths = round(($subscribedOtherMonths/$totalSubscription) * 100, 1);
                                

                            @endphp
        {{ $percentageSubscribedOtherMonths }},
        {{ $percentageSubscribedThisMonth }}

      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.5)',
        'rgba(54, 162, 235, 0.5)',
        'rgba(255, 206, 86, 0.5)',
        'rgba(75, 192, 192, 0.5)',
        'rgba(153, 102, 255, 0.5)',
        'rgba(255, 159, 64, 0.5)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
      'Not Subscribed this Month (%)',
      'Subscribed this Month (%)',
    ]
  };
  var subscriptionPieOptions = {
    responsive: true,
    animation: {
      animateScale: true,
      animateRotate: true
    }
  };          

  if ($("#pieChart").length) {
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
    var pieChart = new Chart(pieChartCanvas, {
      type: 'pie',
      data: subscriptionPieData,
      options: subscriptionPieOptions
    });

    var image = pieChart.toBase64Image();
            //  console.log(image);

              document.getElementById('downloadChart').onclick = function() {
                // Trigger the download
                var a = document.createElement('a');
                a.href = pieChart.toBase64Image();
                a.download = 'Pie Chart.png';
                a.click();
              }
  } 


  var myChart = new Chart(document.getElementById("registeredLineChart"), {
                type: 'line',
                data: {
                    labels:    [
                      @foreach($all as $label)        
                        "{{ $label->monthname }}",
                      @endforeach   
                      ],
                    datasets: [
                        {
                            fill: false,
                            label: "Registered Users Per Month",
                            backgroundColor: ["#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95ee",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0"],
                            data: [                      
                              @foreach($all as $data)        
                                {{ $data->count }},
                              @endforeach  
                              ]
                        }
                    ]
                },
                options: {
                    legend: { display: false },
                    title: {
                        display: true,
                        text: "Registered User Per Month"
                    }
                }
            });

            myChart.render();

            var myChart2 = new Chart(document.getElementById("subscribedLineChart"), {
                type: 'line',
                data: {
                    labels:    [
                      @foreach($all2 as $label)        
                        "{{ $label->monthname }}",
                      @endforeach   
                      ],
                    datasets: [
                        {
                            fill: false,
                            label: "Subscribed Users Per Month",
                            backgroundColor: ["#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95ee",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0"],
                            data: [                      
                              @foreach($all2 as $data)        
                                {{ $data->count }},
                              @endforeach  
                              ]
                        }
                    ]
                },
                options: {
                    legend: { display: false },
                    title: {
                        display: true,
                        text: "Subscribed Users Per Month"
                    }
                }
            });

            myChart2.render();


            var myChart3 = new Chart(document.getElementById("IndustryChart"), {
                type: 'bar',
                data: {
                labels: ["Education", "Banking and Finance", "Cryptocurrency", "Automotive", "Gaming", "Fitness"],
        
                    datasets: [
                        {
                            label: "",
                            backgroundColor: ["#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95ce",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D1","#3e95cf",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D2","#3e95cc",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D3","#3e95ca",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D4","#3e95cb",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D5","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D6","#3e95ce",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0"],
                                              data: [
              @foreach($industries as $industry)
        @php
          $perc = DB::table('linkage_trend_activities')->where('category', '=', $industry)->count();
        @endphp
        {{ $perc }},
      @endforeach
                                              ]
                        }
                    ]
                },
                options: {
                    legend: { display: false },
                    title: {
                        display: true,
                        text: ""
                    }
                }
            });

            myChart3.render();

            var myChart4 = new Chart(document.getElementById("dataviewChart"), {
                type: 'line',
                data: {
                    labels:    [
                      @foreach($all3 as $label)        
                        "{{ $label->monthname }}",
                      @endforeach   
                      ],
                    datasets: [
                        {
                            fill: false,
                            label: "Data Viewed By Users Per Month",
                            backgroundColor: ["#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95ee",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0"],
                            data: [                      
                              @foreach($all3 as $data)        
                                {{ $data->count }},
                              @endforeach  
                              ]
                        }
                    ]
                },
                options: {
                    legend: { display: false },
                    title: {
                        display: true,
                        text: "Data Viewed By Users Per Month"
                    }
                }
            });

            myChart4.render();

  });
})(jQuery);

  </script>


</body>

</html>