<%@ page import="java.sql.*" %>
<%@include file="adminHeader.jsp" %>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="css/alerts.css"> 
  <title>Admin Dashboard</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <!-- Chart.js for graphs -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
.search-container {
    margin: 0px 0px 0px 460px
}

input[type=text] {
    padding: 12px 15px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
    border-radius: 30px 0px 0px 30px;
    background-color: lavender;
}

.search-container .searchbutton {
    float: none;
    padding: 12px 15px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    border-radius: 0px 30px 30px 0px;
    cursor: pointer;
}

.search-container .searchbutton:hover {
    background-color: lavender;
}

@media screen and (max-width: 600px) {
    .search-container {
        float: none;
    }
    input[type=text], .search-container .searchbutton {
        display: block;
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 14px;
    }
    input[type=text] {
        border: 1px solid #ccc;
        background-color: lavender;
    }

}
        </style>
</head>
<body>
    <div id="main">
            
            <div class="search-container">
                <form action="searchHome.jsp" method="post">
                    <input type="text" placeholder="Search here...." name="search"  required>
                    <button type="submit" class="searchbutton"><i class="fa fa-search"></i></button>                    
                </form>            
            </div>
        </div>
    
    
<%
    int rowCount = 0; // Declaring rowCount outside try block

    try {
        Class.forName("com.mysql.jdbc.Driver");
        Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/CLINIHR", "root", "Clinica123");
        Statement st = con.createStatement();
        ResultSet rs = st.executeQuery("SELECT COUNT(*) AS row_count FROM users");
        while (rs.next()) {
            rowCount = rs.getInt("row_count");
        }
    } catch (Exception e) {
        out.println(e);
    }
%>

<div class="container-fluid">
    <main role="main" class="col-md-12 ml-sm-auto col-lg-12 px-4">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">Dashboard</h1>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Total Employees</h5>
                        <p class="card-text"><%= rowCount %></p> <!-- Output rowCount using JSP expression -->
                    </div>
                </div>
            </div>
                    
                    <%
    int row = 0; // Declaring rowCount outside try block

    try {
        Class.forName("com.mysql.jdbc.Driver");
        Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/CLINIHR", "root", "Clinica123");
        Statement st = con.createStatement();
        ResultSet rs = st.executeQuery("SELECT COUNT(*) AS row_count FROM leave_app");
        while (rs.next()) {
            row = rs.getInt("row_count");
        }
    } catch (Exception e) {
        out.println(e);
    }
%>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Leave Applications</h5>
                        <p class="card-text"><%= row %></p>
                    </div>
                </div>
            </div>
                     <%
    int rowLM = 0; // Declaring rowCount outside try block

    try {
        Class.forName("com.mysql.jdbc.Driver");
        Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/CLINIHR", "root", "Clinica123");
        Statement st = con.createStatement();
        ResultSet rs = st.executeQuery("SELECT COUNT(*) AS row_count FROM users where role='Line Manager'");
        while (rs.next()) {
            rowLM = rs.getInt("row_count");
        }
    } catch (Exception e) {
        out.println(e);
    }
%>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Line Managers</h5>
                        <p class="card-text"><%= rowLM %></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mt-4">
                <canvas id="attritionChart"></canvas>
            </div>
            <div class="col-md-6 mt-4">
                <canvas id="ageGraph"></canvas>
            </div>
        </div>
    </main>
</div>


<script>
    // Dummy data for analytics
    var attritionData = {
      labels: ["January", "February", "March", "April", "May", "June"],
      datasets: [{
        label: "Attrition Rate",
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgba(255, 99, 132, 1)",
        borderWidth: 1,
        data: [5, 7, 3, 8, 6, 4],
      }]
    };

    var ageData = {
      labels: ["18-25", "26-35", "36-45", "46-55", "56+"],
      datasets: [{
        label: "Age Distribution",
        backgroundColor: "rgba(54, 162, 235, 0.2)",
        borderColor: "rgba(54, 162, 235, 1)",
        borderWidth: 1,
        data: [20, 35, 25, 15, 5],
      }]
    };

    // Render charts
    var attritionCtx = document.getElementById('attritionChart').getContext('2d');
    var ageCtx = document.getElementById('ageGraph').getContext('2d');

    var attritionChart = new Chart(attritionCtx, {
      type: 'line',
      data: attritionData,
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

    var ageChart = new Chart(ageCtx, {
      type: 'bar',
      data: ageData,
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
</script>

</body>
</html>
