@include('dashboard/header')

            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="content">

                    <!-- Start Content-->
                    <div class="container-fluid">
                        
                    <p align="right"></p><button onclick="window.print();" class="btn btn-success btn-md">Export to PDF</button></p>

                        <div class="row">
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">

                                    <h4 class="header-title mt-0 mb-3">Completion Rate</h4>
    
                                    <div class="chartjs-chart">
                                        <canvas id="pieChart" height="300"></canvas>
                                    </div>
    
                                </div>
                            </div>
                           
                        </div><!-- end col-->

                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">

                                    <h4 class="header-title mt-0 mb-3">Priority</h4>
    
                                    <div class="chartjs-chart">
                                        <canvas id="projectsLineChart" height="300"></canvas>
                                    </div>
    
                                </div>
                            </div>
                           
                        </div><!-- end col-->

                    </div> <!-- end row -->



                        
                    </div> <!-- container-fluid -->

                </div> <!-- content -->

                <!-- Footer Start -->
                <footer class="footer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6">
                                <script>document.write(new Date().getFullYear())</script> &copy; Tritek Consulting Ltd. 
                            </div>
                            <div class="col-md-6">
                                <div class="text-md-end footer-links d-none d-sm-block">
                                    <a href="javascript:void(0);">About Us</a>
                                    <a href="javascript:void(0);">Help</a>
                                    <a href="javascript:void(0);">Contact Us</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>
                <!-- end Footer -->

            </div>

            <!-- ============================================================== -->
            <!-- End Page content -->
            <!-- ============================================================== -->


        </div>
        <!-- END wrapper -->

        <!-- Right Sidebar -->
        <div class="right-bar">

            <div data-simplebar class="h-100">

                <div class="rightbar-title">
                    <a href="javascript:void(0);" class="right-bar-toggle float-end">
                        <i class="mdi mdi-close"></i>
                    </a>
                    <h4 class="font-16 m-0 text-white">Theme Customizer</h4>
                </div>
        
                <!-- Tab panes -->
                <div class="tab-content pt-0">  

                    <div class="tab-pane active" id="settings-tab" role="tabpanel">

                        <div class="p-3">
                            <div class="alert alert-warning" role="alert">
                                <strong>Customize </strong> the overall color scheme, Layout, etc.
                            </div>

                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Color Scheme</h6>
                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="layout-color" value="light"
                                    id="light-mode-check" checked />
                                <label class="form-check-label" for="light-mode-check">Light Mode</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="layout-color" value="dark"
                                    id="dark-mode-check" />
                                <label class="form-check-label" for="dark-mode-check">Dark Mode</label>
                            </div>

                            <!-- Width -->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Width</h6>
                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="layout-size" value="fluid" id="fluid" checked />
                                <label class="form-check-label" for="fluid-check">Fluid</label>
                            </div>
                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="layout-size" value="boxed" id="boxed" />
                                <label class="form-check-label" for="boxed-check">Boxed</label>
                            </div>

                            <!-- Menu positions -->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Menus (Leftsidebar and Topbar) Positon</h6>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-position" value="fixed" id="fixed-check"
                                    checked />
                                <label class="form-check-label" for="fixed-check">Fixed</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-position" value="scrollable"
                                    id="scrollable-check" />
                                <label class="form-check-label" for="scrollable-check">Scrollable</label>
                            </div>

                            <!-- Left Sidebar-->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Color</h6>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-color" value="light" id="light" />
                                <label class="form-check-label" for="light-check">Light</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-color" value="dark" id="dark" checked/>
                                <label class="form-check-label" for="dark-check">Dark</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-color" value="brand" id="brand" />
                                <label class="form-check-label" for="brand-check">Brand</label>
                            </div>

                            <div class="form-check form-switch mb-3">
                                <input type="checkbox" class="form-check-input" name="leftbar-color" value="gradient" id="gradient" />
                                <label class="form-check-label" for="gradient-check">Gradient</label>
                            </div>

                            <!-- size -->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Size</h6>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-size" value="default"
                                    id="default-size-check" checked />
                                <label class="form-check-label" for="default-size-check">Default</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-size" value="condensed"
                                    id="condensed-check" />
                                <label class="form-check-label" for="condensed-check">Condensed <small>(Extra Small size)</small></label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-size" value="compact"
                                    id="compact-check" />
                                <label class="form-check-label" for="compact-check">Compact <small>(Small size)</small></label>
                            </div>

                            <!-- User info -->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Sidebar User Info</h6>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="sidebar-user" value="true" id="sidebaruser-check" />
                                <label class="form-check-label" for="sidebaruser-check">Enable</label>
                            </div>


                            <!-- Topbar -->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Topbar</h6>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="topbar-color" value="dark" id="darktopbar-check"
                                    checked />
                                <label class="form-check-label" for="darktopbar-check">Dark</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="topbar-color" value="light" id="lighttopbar-check" />
                                <label class="form-check-label" for="lighttopbar-check">Light</label>
                            </div>

                            <div class="d-grid mt-4">
                                <button class="btn btn-primary" id="resetBtn">Reset to Default</button>
                                <a href="https://1.envato.market/admintoadmin" class="btn btn-danger mt-3" target="_blank"><i class="mdi mdi-basket me-1"></i> Purchase Now</a>
                            </div>

                        </div>

                    </div>
                </div>

            </div> <!-- end slimscroll-menu-->
        </div>
        <!-- /Right-bar -->

        <!-- Right bar overlay-->
        <div class="rightbar-overlay"></div>

        <!-- Vendor -->
        <script src="{{ asset('dashboard/libs/jquery/jquery.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/simplebar/simplebar.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/node-waves/waves.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/waypoints/lib/jquery.waypoints.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/jquery.counterup/jquery.counterup.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/feather-icons/feather.min.js') }}"></script>

        <!-- third party js -->
        <script src="{{ asset('dashboard/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-buttons/js/buttons.flash.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-keytable/js/dataTables.keyTable.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-select/js/dataTables.select.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/pdfmake/build/pdfmake.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/pdfmake/build/vfs_fonts.js') }}"></script>
        <!-- third party js ends -->

        <!-- Datatables init -->
        <script src="{{ asset('dashboard/js/pages/datatables.init.js') }}"></script>
<!-- Include Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Include Chart.js Data Labels Plugin -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<!-- Init js -->
<script src="{{ asset('dashboard/js/pages/chartjs.init.js') }}"></script>

        <!-- App js -->
        <script src="{{ asset('dashboard/js/app.min.js') }}"></script>
        <script type="text/javascript">
           const dropdown = document.getElementById("statuss");
            dropdown.addEventListener("change", function() {  
            document.getElementById("form01s").submit();
            });
            /* function formSubmit() {
                var thisForm = document.getElementById("form01");
                if (thisForm) {
                    thisForm.submit(); 
                } */
        </script>

    </body>
    <script type="text/javascript">  
(function($) {
  'use strict';
  $(function() {
    @php
      use Carbon\Carbon;
    @endphp



// Code for Subscription Pie Chart
var projectsPieData = {
  datasets: [{
    data: [
      @php
          $totalTasks = DB::table('tasks')->count();
          
          $totalCompleted = DB::table('tasks')->where('status', 2)->count();
          $totalInProgress = DB::table('tasks')->where('status', '<', 2)->count();

          $percentageClosed = round(($totalCompleted/$totalTasks) * 100, 1);
          $percentageInProgress = round(($totalInProgress/$totalTasks) * 100, 1);                                

      @endphp

      {{ $percentageClosed }},
      {{ $percentageInProgress }}
    ],
    backgroundColor: [
      '#FF0000', // Completed (red)
      '#00FF00'  // In Progress (green)
    ],
    borderColor: [
      'rgba(255,99,132,1)',  // Completed (red)
      '#00FF00'  // In Progress (green)
    ],
    borderWidth: 1
  }],
  
  // Labels for the segments
  labels: [
    'Completed',
    'Yet to be Completed',
  ]
};

var projectsPieOptions = {
  responsive: true,
  animation: {
    animateScale: true,
    animateRotate: true
  },
  plugins: {
    // Adding the datalabels plugin to show percentage on the pie chart
    datalabels: {
      display: true,  // Display the labels
      color: '#ffffff',  // Text color (white)
      font: {
        weight: 'bold',  // Font weight
        size: 14         // Font size
      },
      formatter: (value, context) => {
        const total = context.dataset.data.reduce((sum, currentValue) => sum + currentValue, 0);
        const percentage = ((value / total) * 100).toFixed(1);  // Calculate percentage
        return `${percentage}%`;  // Format percentage label
      }
    }
  }
};

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


var myChart = new Chart(document.getElementById("projectsLineChart"), {
    type: 'bar',
    data: {
        labels: [
            'High',
            'Medium',
            'Low'
        ],
        datasets: [
            {
                fill: false,
                label: "",
                backgroundColor: [
                    "#FF0000",
                    "#FFBF00",
                    "#00FF00",
                ],
                data: [
                    @php
                        $highPriority = DB::table('tasks')->where('priority', 2)->count();
                        $mediumPriority = DB::table('tasks')->where('priority', 1)->count();
                        $lowPriority = DB::table('tasks')->where('priority', 0)->count();
                        $todo = DB::table('tasks')->where('status', 0)->count();
                        $inprogress = DB::table('tasks')->where('status', 1)->count();
                        $completed = DB::table('tasks')->where('status', 2)->count();
                    @endphp

                    {{ $highPriority }},
                    {{ $mediumPriority }},
                    {{ $lowPriority }}
                ]
            },
            {
                fill: false,
                label: "",
                backgroundColor: [
                    "#FF0000",
                    "#FFBF00",
                    "#00FF00",
                ],
                data: [
                    // Add data here if needed
                ]
            }
        ]
    },
    options: {
        legend: { display: false },
        title: {
            display: true,
            text: "Project in their Current Phase"
        },
        scales: {
            y: {
                beginAtZero: true // Ensures the y-axis starts from 0
            }
        }
    }
});

myChart.render();

  });
})(jQuery);

  </script>  


<!-- Mirrored from coderthemes.com/adminto/layouts/tables-datatables.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 18 Jan 2024 08:46:35 GMT -->
</html>