@include('header')
      <!-- partial -->
      <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">Monitor Clicks</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">Monitor Registered Users</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="chats-tab-2" data-toggle="tab" href="#chats-section-2" role="tab" aria-controls="chats-section-2">Monitor User Prefrences</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="chats-tab-3" data-toggle="tab" href="#chats-section-3" role="tab" aria-controls="chats-section-3">Monitor Subscriptions</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-lg-10 grid-margin stretch-card">
                  <div class="card">
                    <div class="card-body">
                      <h4 class="card-title">Number of Clicks</h4>
                      <canvas id="clicksChart"></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">
              <div class="row">
                  <div class="col-lg-10 grid-margin stretch-card">
                    <div class="card">
                      <div class="card-body">
                        <h4 class="card-title">Number of Registered Users</h4>
                        <canvas id="registeredLineChart"></canvas>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            
            <!-- chat tab ends -->

            <div class="tab-pane fade" id="chats-section-2" role="tabpanel" aria-labelledby="chats-section-2">
              <div class="row">
                  <div class="col-lg-12 grid-margin stretch-card">
                    <div class="card">
                      <div class="card-body">
                        <h4 class="card-title">User Preferences (By Trends)</h4>
                        <canvas id="trendsChart"></canvas>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-12 grid-margin stretch-card">
                    <div class="card">
                      <div class="card-body">
                        <h4 class="card-title">User Preferences (By Category/Industry)</h4>
                        <canvas id="industryChart"></canvas>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            <!-- chat tab ends -->

            <div class="tab-pane fade" id="chats-section-3" role="tabpanel" aria-labelledby="chats-section-3">
              <div class="row">
                <div class="col-lg-10 grid-margin stretch-card">
                  <div class="card">
                    <div class="card-body">
                      <h4 class="card-title">Subcriptions</h4>
                      <canvas id="subscribedLineChart"></canvas>
                    </div>
                  </div>
                </div>

              </div>
            </div>
            <!-- To do section tab ends -->

            </div>
          </div>
        </div>
</div>
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->
        <footer class="footer">
          <div 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/dashboard.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("Remote Learning",
                    "Immersive Learning Technology",
                    "AI and Automation",
                    "Data Analytics",
                    "Nano Learning",
                    "Mobile Banking",
                    "Banking in the Cloud",
                    "Artificial Intelligence",
                    "Machine Learning",
                    "Blockchain",
                    "Digital-Only Banks",
                    "Bitcoin",
                    "Ethereum",
                    "XRP",
                    "Tether",
                    "USDT", 
                    "Binance Coin",
                    "Electric Vehicles",
                    "Online Car Buying",
                    "Connected Vehicles",
                    "Self-Driving Technology",
                    "Automotive Cybersecurity",
                    "Use of Blockchain in Vehicles",
                    "Vegan-Friendly Cars",
                    "Insurance Premium and Risk Detection",
                    "Shared Mobility",
                    "Arificial Intelligence",
                    "Cloud Gaming and Streaming",
                    "Virtual Reality",
                    "The Metaverse",
                    "NFTs and Blockchain",
                    "Esports",
                    "Digital Distribution",
                    "Mobile Gaming",
                    "Meditation and Mindfulness Technology",
                    "Workplace Wellness Technology",
                    "AI Personal Trainers",
                    "Better and Smarter Wearables",
                    "Better and Smarter Home Fitness Technology",
                    "Online Fitness",
                    "Outdoor Fitness",
                    );

      $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_clicks')->select(DB::raw("(COUNT(*)) as count"),DB::raw("MONTHNAME(created_at) as monthname"))
              ->whereYear('created_at', date('Y'))
              ->groupBy('monthname')
              ->get();      


              @endphp


 


  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("clicksChart"), {
                type: 'line',
                data: {
                    labels:    [
                      @foreach($all3 as $label)        
                        "{{ $label->monthname }}",
                      @endforeach   
                      ],
                    datasets: [
                        {
                            fill: false,
                            label: "Platform Clicks 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: "Platform Clicks Per Month"
                    }
                }
            });

            myChart4.render();

            var myChart5 =   new Chart(document.getElementById("trendsChart"), {
                type: 'bar',
                data: {
                labels: [
                  @foreach($trends as $trend)
                    "{{ $trend }}(%)",
                  @endforeach          
                ],
                    datasets: [
                        {
                            label: "",
                            backgroundColor: ["#3e95cd",
                                              "#8e5ea2", 
                                              "#3cba9f", 
                                              "#e8c3b9", 
                                              "#c45850",
                                              "#CD5C5C", 
                                              "#40E0D0","#3e95ce",
                                              "#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($trends as $trend)
        @php
          $perc = DB::table('linkage_trend_activities')->where('trend', '=', $trend)->count();
        @endphp
        {{ $perc }},
      @endforeach
                                              ]
                        }
                    ]
                },
                options: {
                    legend: { display: false },
                    title: {
                        display: true,
                        text: ""
                    }
                }
            });

            myChart5.render();

  });
})(jQuery);

  </script>
</body>

</html>