<!DOCTYPE html>
<html lang="zxx">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Dashboard</title>
  <link rel="icon" href="../img2/kp.png" type="image/png" />

  <link rel="stylesheet" href="../css2/bootstrap1.min.css" />

  <link rel="stylesheet" href="../vendors2/themefy_icon/themify-icons.css" />

  <link rel="stylesheet" href="../vendors2/niceselect/css/nice-select.css" />

  <link rel="stylesheet" href="../vendors2/owl_carousel/css/owl.carousel.css" />

  <link rel="stylesheet" href="../vendors2/gijgo/gijgo.min.css" />

  <link rel="stylesheet" href="../vendors2/font_awesome/css/all.min.css" />
  <link rel="stylesheet" href="../vendors2/tagsinput/tagsinput.css" />

  <link rel="stylesheet" href="../vendors2/datepicker/date-picker.css" />

  <link rel="stylesheet" href="../vendors2/scroll/scrollable.css" />

  <link rel="stylesheet" href="../vendors2/datatable/css/jquery.dataTables.min.css" />
  <link rel="stylesheet" href="../vendors2/datatable/css/responsive.dataTables.min.css" />
  <link rel="stylesheet" href="../vendors2/datatable/css/buttons.dataTables.min.css" />

  <link rel="stylesheet" href="../vendors2/text_editor/summernote-bs4.css" />

  <link rel="stylesheet" href="../vendors2/morris/morris.css" />

  <link rel="stylesheet" href="../vendors2/material_icon/material-icons.css" />

  <link rel="stylesheet" href="../css2/metisMenu.css" />

  <link rel="stylesheet" href="../css2/style1.css" />
  <link rel="stylesheet" href="../css2/colors/default.css" id="colorSkinCSS" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>

<body class="crm_body_bg">
  <%- include('./component/header.ejs')%>
    <div class="main_content_iner">

      <div class="row">
        <div class="col-lg-12">
          <div class="single_element">
            <div class="quick_activity">
              <div class="row gy-2">
                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalStudent%></h6>
                        <p>Total Student</p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#0bcb2f"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalStaff%></h6>
                        <p>Total Staff</p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#0bcb2f;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalDepartment%></h6>
                        <p>Total Department</p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#0bcb2f;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalFaculty%></h6>
                        <p>Total Faculty</p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#0bcb2f;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalTopicSubmitted%></h6>
                        <p>Total Topic Summitted</p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:gold;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalTopicApproved %></h6>
                        <p>Total Topic Approved</p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#0bcb2f;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalTopicRejected %></h6>
                        <p>Total Topic Rejected</p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:red;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalTopicPending %> </h6>
                        <p>Total Pending Topic </p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:grey;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalResearchSubmitted %> </h6>
                        <p>Total Research Submitted</p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:gold;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalResearchApproved %></h6>
                        <p>Total Research Approved</p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#0bcb2f;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalResearchRejected %></h6>
                        <p>Total Research Rejected</p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:red;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="single_quick_activity">
                    <div class="count_content d-flex my-2">
                      <div>
                        <h6><%= totalResearchPending %></h6>
                        <p>Total Pending Research </p>
                      </div>
                      <div style="display: inline-block; position: absolute; right: 23%;">
                        <div
                          style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:grey;"
                          class="bg-col mx-3 ">
                          <img src="img/wave.png" class="mt-2" style="justify-content: center;left: 50%;top: 50%;"
                            alt="" height="30px" width="30px">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <input type="hidden"  id="activities" value="<%= activities %>">
                <input type="hidden"  id="topic" value="<%= topics %>">
                <input type="hidden"  id="research" value="<%= research %>">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-fluid p-5 my-4">
        <div class="row justify-content-center">
          <div class="col-lg-12">
            <div class="white_card p-5 card_height_100 mb_30">
              <canvas id="myChart" style="width:100%;max-width:100%"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer class="footer footer-light  footer-static  footer1">
      <p class="clearfix mb-0">
        <span class="float-md-start d-block d-md-inline-block mt-25 text-center">COPYRIGHT &copy;
          <script>document.write(new Date().getFullYear())</script><a class="ms-25" href="">CORASS</a>,
          <span class="d-inline-block">All rights Reserved</span>
        </span>
        <span class="float-md-end d-block text-center">Centralized Online Research Assessment and Submission System<i
            data-feather="file-text"></i></span>
      </p>
    </footer>
    </section>

    <div id="back-top" style="display: none">
      <a title="Go to Top" href="#">
        <i class="ti-angle-up"></i>
      </a>
    </div>

    <script src="../js2/jquery1-3.4.1.min.js"></script>

    <script src="../js2/popper1.min.js"></script>

    <script src="../js2/bootstrap1.min.js"></script>

    <script src="../js2/metisMenu.js"></script>

    <script src="../vendors2/count_up/jquery.waypoints.min.js"></script>

    <script src="../vendors2/chartlist/Chart.min.js"></script>

    <script src="../vendors2/count_up/jquery.counterup.min.js"></script>

    <script src="../vendors2/niceselect/js/jquery.nice-select.min.js"></script>

    <script src="../vendors2/owl_carousel/js/owl.carousel.min.js"></script>

    <script src="../vendors2/datatable/js/jquery.dataTables.min.js"></script>
    <script src="../vendors2/datatable/js/dataTables.responsive.min.js"></script>
    <script src="../vendors2/datatable/js/dataTables.buttons.min.js"></script>
    <script src="../vendors2/datatable/js/buttons.flash.min.js"></script>
    <script src="../vendors2/datatable/js/jszip.min.js"></script>
    <script src="../vendors2/datatable/js/pdfmake.min.js"></script>
    <script src="../vendors2/datatable/js/vfs_fonts.js"></script>
    <script src="../vendors2/datatable/js/buttons.html5.min.js"></script>
    <script src="../vendors2/datatable/js/buttons.print.min.js"></script>
    <script src="../js2/chart.min.js"></script>

    <script src="../vendors2/progressbar/jquery.barfiller.js"></script>

    <script src="../vendors2/tagsinput/tagsinput.js"></script>

    <script src="../vendors2/text_editor/summernote-bs4.js"></script>
    <script src="../vendors2/am_chart/amcharts.js"></script>

    <script src="../vendors2/scroll/perfect-scrollbar.min.js"></script>
    <script src="../vendors2/scroll/scrollable-custom.js"></script>
    <script src="../vendors2/chart_am/core.js"></script>
    <script src="../vendors2/chart_am/charts.js"></script>
    <script src="../vendors2/chart_am/animated.js"></script>
    <script src="../vendors2/chart_am/kelly.js"></script>
    <script src="../vendors2/chart_am/chart-custom.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script src="../js2/custom.js"></script>
    <script>
      const xValues = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
      new Chart("myChart", {
        type: "line",
        data: {
          labels: xValues,
          datasets: [{
            label: 'Research',
            data: (document.getElementById("research").value).split(","),
            borderColor: "red",
            fill: false
          }, {
            label: 'Topic',
            data: (document.getElementById("topic").value).split(","),
            borderColor: "green",
            fill: false
          }, {
            label: 'Login Activities',
            data: (document.getElementById("activities").value).split(","),
            borderColor: "blue",
            fill: false
          }]
        },
        options: {
          legend: { display: true }
        }
      });
    </script>
</body>

</html>