<?php
session_start();
include 'forms/db_connect.php'; 
$current_page = basename($_SERVER['PHP_SELF']);

if (!isset($_SESSION['id_user'])) {
    header('Location: forms/login.php');
    exit;
}

$full_name = $_SESSION['full_name'] ?? 'Invité';
$result = $conn->query("SELECT COUNT(*) AS total FROM employes");

if (!$result) {
    die("Erreur SQL : " . $conn->error); 
}

$employeesCount = $result->fetch_assoc()['total'] ?? 0;

$result = $conn->query("SELECT COUNT(*) AS total FROM citizens");

if (!$result) {
    die("Erreur SQL sur citizens: " . $conn->error);
}

$citizensCount = $result->fetch_assoc()['total'] ?? 0;

$result = $conn->query("SELECT COUNT(*) AS total FROM departments");

if (!$result) {
    die("Erreur SQL sur citizens: " . $conn->error);
}

$departmentsCount = $result->fetch_assoc()['total'] ?? 0;

$result = $conn->query("SELECT COUNT(*) AS total FROM incident");

if (!$result) {
    die("Erreur SQL sur citizens: " . $conn->error);
}

$incidentsCount = $result->fetch_assoc()['total'] ?? 0;


$typesOfIncidentsCount = 2;

$companiesResult = $conn->query("SELECT DISTINCT company FROM departments WHERE company IS NOT NULL AND company != '' ORDER BY company ASC");
$companiesList = [];
while ($row = $companiesResult->fetch_assoc()) $companiesList[] = $row['company'];

$selectedYear = isset($_GET['year']) ? (int)$_GET['year'] : date('Y');
$selectedMonth = isset($_GET['month']) ? (int)$_GET['month'] : 0;    

$labels = [];
$totals = [];
$limit = $selectedMonth ? 20 : 200;

$sql = "
    SELECT c.full_name, COUNT(i.id_incident) AS total_incidents
    FROM citizens c
    LEFT JOIN incident i 
      ON c.id_citizen = i.ditNavn
     AND YEAR(i.dato) = ?
";

$params = [$selectedYear];
$types = "i";

if ($selectedMonth) {
    $sql .= " AND MONTH(i.dato) = ? ";
    $params[] = $selectedMonth;
    $types .= "i";
}

$sql .= "
    GROUP BY c.id_citizen
    HAVING total_incidents > 0
    ORDER BY total_incidents DESC
    LIMIT $limit
";
$stmt = $conn->prepare($sql);
if (!$stmt) die("Erreur SQL: " . $conn->error);


if (count($params) > 0) $stmt->bind_param($types, ...$params);

$stmt->execute();
$result = $stmt->get_result();

if ($result && $result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $labels[] = $row['full_name'];
        $totals[] = (int)$row['total_incidents'];
    }
} else {
    $labels = ["Aucun citoyen"];
    $totals = [0];
}

$labelsJSON = json_encode($labels);
$totalsJSON = json_encode($totals);

$stmt->close();

$selectedYearEmp = isset($_GET['year']) ? (int)$_GET['year'] : date('Y');
$selectedMonthEmp = isset($_GET['month']) ? (int)$_GET['month'] : 0;

$labelsEmp = [];
$totalsEmp = [];
$limitEmp = $selectedMonthEmp ? 20 : 200;

$sqlEmp = "
    SELECT e.full_name, COUNT(i.id_incident) AS total_incidents
    FROM employes e
    LEFT JOIN incident i 
      ON e.id_employe = i.overfaldsNavn
     AND YEAR(i.dato) = ?
";

$paramsEmp = [$selectedYearEmp];
$typesEmp = "i";

if ($selectedMonthEmp) {
    $sqlEmp .= " AND MONTH(i.dato) = ? ";
    $paramsEmp[] = $selectedMonthEmp;
    $typesEmp .= "i";
}

$sqlEmp .= " GROUP BY e.id_employe HAVING total_incidents > 0 ORDER BY total_incidents DESC LIMIT $limitEmp";

$stmtEmp = $conn->prepare($sqlEmp);
if (!$stmtEmp) die("Erreur SQL: " . $conn->error);
$stmtEmp->bind_param($typesEmp, ...$paramsEmp);
$stmtEmp->execute();
$resultEmp = $stmtEmp->get_result();

while ($row = $resultEmp->fetch_assoc()) {
    $labelsEmp[] = $row['full_name'];
    $totalsEmp[] = (int)$row['total_incidents'];
}

$labelsEmpJSON = json_encode($labelsEmp);
$totalsEmpJSON = json_encode($totalsEmp);

$stmtEmp->close();
if (isset($_GET['action']) && $_GET['action'] === 'get_emp_citizen_stats') {
    header('Content-Type: application/json; charset=utf-8');

    $year    = isset($_GET['year'])    ? (int)$_GET['year']    : date('Y');
    $month   = isset($_GET['month'])   ? (int)$_GET['month']   : 0;
    $company = isset($_GET['company']) ? trim($_GET['company']) : '';

    $sql = "
        SELECT e.full_name AS employee_name, c.full_name AS citizen_name, COUNT(i.id_incident) AS total
        FROM incident i
        LEFT JOIN employes e ON i.overfaldsNavn = e.id_employe
        LEFT JOIN citizens c ON i.ditNavn = c.id_citizen
        WHERE YEAR(i.dato) = ?
    ";
    $params = [$year];
    $types = "i";

    if ($month)   { $sql .= " AND MONTH(i.dato) = ?"; $params[] = $month;   $types .= "i"; }
    if ($company) { $sql .= " AND c.company = ?";      $params[] = $company; $types .= "s"; }

    $sql .= " GROUP BY e.id_employe, c.id_citizen ORDER BY e.full_name, c.full_name";

    $stmt = $conn->prepare($sql);
    if (!$stmt) {
        echo json_encode(['error' => 'Erreur SQL: ' . $conn->error]);
        exit;
    }

    $stmt->bind_param($types, ...$params);
    $stmt->execute();
    $result = $stmt->get_result();

    $employees = [];
    $citizensSet = [];

    while ($row = $result->fetch_assoc()) {
        $emp = $row['employee_name'] ?? 'Ukendt medarbejder';
        $cit = $row['citizen_name'] ?? 'Ukendt borger';
        $total = (int)$row['total'];

        if (!isset($employees[$emp])) $employees[$emp] = [];
        $employees[$emp][$cit] = $total;
        if ($cit) $citizensSet[$cit] = true;
    }

    $labelsEmployees = array_keys($employees);
    $citizens = array_keys($citizensSet);

    $datasets = [];
    foreach ($citizens as $citizen) {
        $data = [];
        foreach ($labelsEmployees as $emp) {
            $data[] = $employees[$emp][$citizen] ?? 0;
        }
        $datasets[] = [
            'label' => $citizen,
            'data' => $data,
            'backgroundColor' => sprintf('rgba(%d,%d,%d,0.6)', rand(50,200), rand(50,200), rand(50,200)),
            'borderColor' => '#e731c0ff',
            'borderWidth' => 1
        ];
    }

    echo json_encode([
        'labels' => $labelsEmployees,
        'datasets' => $datasets
    ], JSON_UNESCAPED_UNICODE);

    exit;
}   
if (isset($_GET['action']) && $_GET['action'] === 'get_department_stats') {
    header('Content-Type: application/json; charset=utf-8');
    $year    = isset($_GET['year'])    ? (int)$_GET['year']    : date('Y');
    $month   = isset($_GET['month'])   ? (int)$_GET['month']   : 0;
    $company = isset($_GET['company']) ? trim($_GET['company']) : '';

    $sql = "SELECT d.name, COUNT(i.id_incident) AS total
            FROM departments d
            INNER JOIN citizens c ON d.id_department = c.department
            INNER JOIN incident i ON i.ditNavn = c.id_citizen
            WHERE YEAR(i.dato) = ?";
    $params = [$year]; $types = "i";
    if ($month)   { $sql .= " AND MONTH(i.dato) = ?"; $params[] = $month;   $types .= "i"; }
    if ($company) { $sql .= " AND d.company = ?";      $params[] = $company; $types .= "s"; }
    $sql .= " GROUP BY d.id_department ORDER BY total DESC";

    $stmt = $conn->prepare($sql);
    if ($stmt) {
        $stmt->bind_param($types, ...$params);
        $stmt->execute();
        $res = $stmt->get_result();
        $labels = []; $totals = [];
        while ($row = $res->fetch_assoc()) { $labels[] = $row['name']; $totals[] = (int)$row['total']; }
        echo json_encode(['labels' => $labels, 'totals' => $totals]);
    } else { echo json_encode(['error' => $conn->error]); }
    exit;
}

$selectedYear = date('Y');
if (isset($_GET['type']) && !empty($_GET['type'])) {
    header('Content-Type: application/json');

    $type = $_GET['type'];

    if (!$conn) {
        echo json_encode(['error' => 'Erreur de connexion à la base']);
        exit;
    }


    $company = isset($_GET['company']) ? trim($_GET['company']) : '';
    $sqlFys  = "SELECT c.full_name AS borger, COUNT(*) AS antal
                FROM incident i
                JOIN citizens c ON i.ditNavn = c.id_citizen
                WHERE CONCAT(';', REPLACE(i.fysiskVold, ' ', ''), ';') LIKE CONCAT('%;', REPLACE(?, ' ', ''), ';%')";
    $pFys = [$type]; $tFys = "s";
    if ($company) { $sqlFys .= " AND c.company = ?"; $pFys[] = $company; $tFys .= "s"; }
    $sqlFys .= " GROUP BY c.full_name ORDER BY antal DESC";

    $stmt = $conn->prepare($sqlFys);
    if ($stmt) {
        $stmt->bind_param($tFys, ...$pFys);
        $stmt->execute();
        $result = $stmt->get_result();
        $labels = []; $values = [];
        while ($row = $result->fetch_assoc()) { $labels[] = $row['borger']; $values[] = $row['antal']; }
        echo json_encode(['labels' => $labels, 'values' => $values]);
        $stmt->close();
    } else { echo json_encode(['error' => 'Erreur préparation requête SQL']); }
    exit;
}

if (isset($_GET['typeVold']) && !empty($_GET['typeVold'])) {
    header('Content-Type: application/json');
    $typeVold = $_GET['typeVold'];
    $company  = isset($_GET['company']) ? trim($_GET['company']) : '';
    if (!$conn) { echo json_encode(['error' => 'Erreur de connexion à la base']); exit; }

    $sqlPsy = "SELECT c.full_name AS borger, COUNT(*) AS antal
               FROM incident i
               JOIN citizens c ON i.ditNavn = c.id_citizen
               WHERE CONCAT(';', REPLACE(i.psykiskVold, ' ', ''), ';') LIKE CONCAT('%;', REPLACE(?, ' ', ''), ';%')";
    $pPsy = [$typeVold]; $tPsy = "s";
    if ($company) { $sqlPsy .= " AND c.company = ?"; $pPsy[] = $company; $tPsy .= "s"; }
    $sqlPsy .= " GROUP BY c.full_name ORDER BY antal DESC";

    $stmt = $conn->prepare($sqlPsy);
    if ($stmt) {
        $stmt->bind_param($tPsy, ...$pPsy);
        $stmt->execute();
        $result = $stmt->get_result();
        $labels = []; $values = [];
        while ($row = $result->fetch_assoc()) { $labels[] = $row['borger']; $values[] = $row['antal']; }
        echo json_encode(['labels' => $labels, 'values' => $values]);
        $stmt->close();
    } else { echo json_encode(['error' => 'Erreur préparation requête SQL']); }
    exit;
}
if (isset($_GET['action']) && $_GET['action'] === 'get_dept_citizen_stats') {
    header('Content-Type: application/json; charset=utf-8');
    $year    = isset($_GET['year'])    ? (int)$_GET['year']    : date('Y');
    $month   = isset($_GET['month'])   ? (int)$_GET['month']   : 0;
    $company = isset($_GET['company']) ? trim($_GET['company']) : '';

    $sql = "
        SELECT d.name AS dept_name, c.full_name AS citizen_name, COUNT(i.id_incident) AS total
        FROM incident i
        INNER JOIN citizens c    ON i.ditNavn      = c.id_citizen
        INNER JOIN departments d ON c.department   = d.id_department
        WHERE YEAR(i.dato) = ?
    ";
    $params = [$year]; $types = "i";
    if ($month)   { $sql .= " AND MONTH(i.dato) = ?"; $params[] = $month;   $types .= "i"; }
    if ($company) { $sql .= " AND d.company = ?";      $params[] = $company; $types .= "s"; }
    $sql .= " GROUP BY d.id_department, c.id_citizen ORDER BY d.name, c.full_name";

    $stmt = $conn->prepare($sql);
    if (!$stmt) { echo json_encode(['error' => $conn->error]); exit; }
    $stmt->bind_param($types, ...$params);
    $stmt->execute();
    $res = $stmt->get_result();

    $depts = []; $citizensSet = [];
    while ($row = $res->fetch_assoc()) {
        $d = $row['dept_name'];
        $c = $row['citizen_name'] ?? 'Ukendt borger';
        if (!isset($depts[$d])) $depts[$d] = [];
        $depts[$d][$c] = (int)$row['total'];
        $citizensSet[$c] = true;
    }
    $deptLabels = array_keys($depts);
    $citizens   = array_keys($citizensSet);
    $datasets = [];
    foreach ($citizens as $citizen) {
        $data = [];
        foreach ($deptLabels as $d) $data[] = $depts[$d][$citizen] ?? 0;
        $datasets[] = ['label' => $citizen, 'data' => $data];
    }
    echo json_encode(['labels' => $deptLabels, 'datasets' => $datasets], JSON_UNESCAPED_UNICODE);
    exit;
}

if (isset($_GET['action']) && $_GET['action'] === 'get_dept_employee_stats') {
    header('Content-Type: application/json; charset=utf-8');
    $year    = isset($_GET['year'])    ? (int)$_GET['year']    : date('Y');
    $month   = isset($_GET['month'])   ? (int)$_GET['month']   : 0;
    $company = isset($_GET['company']) ? trim($_GET['company']) : '';

    $sql = "
        SELECT d.name AS dept_name, e.full_name AS emp_name, COUNT(i.id_incident) AS total
        FROM incident i
        INNER JOIN employes    e ON i.overfaldsNavn = e.id_employe
        INNER JOIN citizens    c ON i.ditNavn       = c.id_citizen
        INNER JOIN departments d ON c.department    = d.id_department
        WHERE YEAR(i.dato) = ?
    ";
    $params = [$year]; $types = "i";
    if ($month)   { $sql .= " AND MONTH(i.dato) = ?"; $params[] = $month;   $types .= "i"; }
    if ($company) { $sql .= " AND d.company = ?";      $params[] = $company; $types .= "s"; }
    $sql .= " GROUP BY d.id_department, e.id_employe ORDER BY d.name, e.full_name";

    $stmt = $conn->prepare($sql);
    if (!$stmt) { echo json_encode(['error' => $conn->error]); exit; }
    $stmt->bind_param($types, ...$params);
    $stmt->execute();
    $res = $stmt->get_result();

    $depts = []; $empsSet = [];
    while ($row = $res->fetch_assoc()) {
        $d = $row['dept_name'];
        $e = $row['emp_name'] ?? 'Ukendt medarbejder';
        if (!isset($depts[$d])) $depts[$d] = [];
        $depts[$d][$e] = (int)$row['total'];
        $empsSet[$e] = true;
    }
    $deptLabels = array_keys($depts);
    $emps       = array_keys($empsSet);
    $datasets = [];
    foreach ($emps as $emp) {
        $data = [];
        foreach ($deptLabels as $d) $data[] = $depts[$d][$emp] ?? 0;
        $datasets[] = ['label' => $emp, 'data' => $data];
    }
    echo json_encode(['labels' => $deptLabels, 'datasets' => $datasets], JSON_UNESCAPED_UNICODE);
    exit;
}

if (isset($_GET['action']) && $_GET['action'] === 'get_employee_stats') {
    $year    = isset($_GET['year'])    ? (int)$_GET['year']    : date('Y');
    $month   = isset($_GET['month'])   ? (int)$_GET['month']   : 0;
    $company = isset($_GET['company']) ? trim($_GET['company']) : '';

    $sql = "
        SELECT e.full_name, COUNT(i.id_incident) AS total_incidents
        FROM employes e
        LEFT JOIN incident i
          ON e.id_employe = i.overfaldsNavn
         AND YEAR(i.dato) = ?
    ";

    $params = [$year]; $types = "i";
    if ($month)   { $sql .= " AND MONTH(i.dato) = ? "; $params[] = $month;   $types .= "i"; }
    if ($company) { $sql .= " WHERE e.company = ? ";    $params[] = $company; $types .= "s"; }

    $sql .= " GROUP BY e.id_employe HAVING total_incidents > 0 ORDER BY total_incidents DESC LIMIT 200";

    $stmt = $conn->prepare($sql);
    if (!$stmt) {
        echo json_encode(['error' => $conn->error]);
        exit;
    }
    $stmt->bind_param($types, ...$params);
    $stmt->execute();
    $res = $stmt->get_result();

    $labels = [];
    $values = [];
    while ($row = $res->fetch_assoc()) {
        $labels[] = $row['full_name'];
        $values[] = (int)$row['total_incidents'];
    }

    echo json_encode(['labels' => $labels, 'values' => $values]);
    exit;
}
if (isset($_GET['action']) && $_GET['action'] === 'get_citizen_stats') {
    $year    = isset($_GET['year'])    ? (int)$_GET['year']    : date('Y');
    $month   = isset($_GET['month'])   ? (int)$_GET['month']   : 0;
    $company = isset($_GET['company']) ? trim($_GET['company']) : '';

    $sql = "
        SELECT c.full_name, COUNT(i.id_incident) AS total_incidents
        FROM citizens c
        LEFT JOIN incident i
          ON c.id_citizen = i.ditNavn
         AND YEAR(i.dato) = ?
    ";

    $params = [$year]; $types = "i";
    if ($month)   { $sql .= " AND MONTH(i.dato) = ? "; $params[] = $month;   $types .= "i"; }
    if ($company) { $sql .= " WHERE c.company = ? ";    $params[] = $company; $types .= "s"; }

    $sql .= "
        GROUP BY c.id_citizen
        HAVING total_incidents > 0
        ORDER BY total_incidents DESC
        LIMIT 200
    ";

    $stmt = $conn->prepare($sql);
    if (!$stmt) {
        echo json_encode(['error' => $conn->error]);
        exit;
    }

    $stmt->bind_param($types, ...$params);
    $stmt->execute();
    $result = $stmt->get_result();

    $labels = [];
    $values = [];

    while ($row = $result->fetch_assoc()) {
        $labels[] = $row['full_name'];
        $values[] = (int)$row['total_incidents'];
    }

    echo json_encode(['labels' => $labels, 'values' => $values]);
    exit;
}

?>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Händelserapportering </title>
    <meta
      content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
      name="viewport"
    />

    <script src="assets/js/plugin/webfont/webfont.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
      WebFont.load({
        google: { families: ["Public Sans:300,400,500,600,700"] },
        custom: {
          families: [
            "Font Awesome 5 Solid",
            "Font Awesome 5 Regular",
            "Font Awesome 5 Brands",
            "simple-line-icons",
          ],
          urls: ["assets/css/fonts.min.css"],
        },
        active: function () {
          sessionStorage.fonts = true;
        },
      });
    </script>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/plugins.min.css" />
    <link rel="stylesheet" href="assets/css/kaiadmin.min.css" />

<script src="assets/js/core/jquery-3.7.1.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>

<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>

<script src="assets/js/kaiadmin.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <style>
.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-category {
  font-size: 0.9rem;
  color: #555;
}
.card-title {
  font-size: 1.4rem;
  color: #111;
}
@media(max-width:768px) {
  .card-title { font-size: 1.2rem; }
  .card-category { font-size: 0.8rem; }
  .icon-circle { width:50px; height:50px; }
}
</style>
    <style>
      #dashboardContent {
    width: 100%;
    min-height: 100vh; 
    overflow-y: auto; 
}

    </style>

<style>

@media (max-width: 768px) {
  .navbar-nav.topbar-nav {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .nav-item.topbar-user {
    display: flex !important;
  }

  .nav-item.topbar-user .avatar-sm {
    width: 32px !important;
    height: 32px !important;
  }

  .nav-item.topbar-user .profile-pic {
    padding: 5px 8px;
  }
  .nav-item.topbar-user .fas.fa-sign-out-alt {
    font-size: 18px;
    color: black;
  }

  .nav-item.topbar-user a:active {
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
  }
}

@media (min-width: 769px) {
  .profile-username {
    margin-left: 8px;
  }
}
</style>
    <link rel="stylesheet" href="assets/css/demo.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="sidebar" data-background-color="dark">
        <div class="sidebar-logo">
          <div class="logo-header" data-background-color="white">
            <a href="index.html" class="logo">
               Händelserapportering
              
            </a>
            <div class="nav-toggle">
              <button class="btn btn-toggle toggle-sidebar">
                <i class="gg-menu-right"></i>
              </button>
              <button class="btn btn-toggle sidenav-toggler">
                <i class="gg-menu-left"></i>
              </button>
            </div>
            <button class="topbar-toggler more">
              <i class="gg-more-vertical-alt"></i>
            </button>
          </div>
        </div>
        <div class="sidebar-wrapper scrollbar scrollbar-inner">
          <div class="sidebar-content">
            <ul class="nav nav-secondary">
              <li class="nav-item active">
                <a
                  data-bs-toggle="collapse"
                  href="#dashboard"
                  class="collapsed"
                  aria-expanded="false"
                >
                  <i class="fas fa-home"></i>
                  <p>Betjeningspanel</p>
                
                </a>
            
              </li>
              <li class="nav-item">
  <a href="#" id="loadDepartments">
    <i class="fas fa-building"></i>
    <p>Afdelinger</p>
  </a>
</li>


              <li class="nav-item">
  <a href="#" id="loadEmployees">
    <i class="fas fa-user-tie"></i>
    <p>Medarbejdere</p>
  </a>
</li>


              <li class="nav-item">
  <a href="#" id="loadCitizens">
    <i class="fas fa-users"></i>
    <p>Borgere</p>
  </a>
</li>

              <li class="nav-item">
  <a href="#" id="loadIncidents">
    <i class="fas fa-exclamation-triangle"></i>
    <p>Hændelser</p>
  </a>
</li>
<li class="nav-item">
  <a href="#" id="loadHistoryEmploye">
    <i class="fa-solid fa-user-clock"></i>
    <p>Medarbejderhistorik</p>
  </a>
</li>

<li class="nav-item">
  <a href="#" id="loadHistoryCitizen">
    <i class="fa-solid fa-users-gear"></i>
    <p>Borgerhistorik</p>
  </a>
</li>
<li class="nav-item">
  <a href="#" id="loadCitizenIncidents">
    <i class="fa-solid fa-file-circle-exclamation"></i>
    <p>Borgere pr. hændelse</p>
  </a>
</li>
<li class="nav-item">
  <a href="#" id="loadEmployeeIncidents">
    <i class="fa-solid fa-file-shield"></i>
    <p>Medarbejdere pr. hændelse</p>
  </a>
</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="main-panel">
        <div class="main-header">
          <div class="main-header-logo">
            <div class="logo-header" data-background-color="white">
              <a href="index.html" class="logo">
                 Händelserapportering
               
              </a>
              <div class="nav-toggle">
                <button class="btn btn-toggle toggle-sidebar">
                  <i class="gg-menu-right"></i>
                </button>
                <button class="btn btn-toggle sidenav-toggler">
                  <i class="gg-menu-left"></i>
                </button>
              </div>
              <button class="topbar-toggler more">
                <i class="gg-more-vertical-alt"></i>
              </button>
            </div>
          </div>
          <nav class="navbar navbar-header navbar-header-transparent navbar-expand-lg border-bottom">
  <div class="container-fluid">
    <nav class="navbar navbar-header-left navbar-expand-lg navbar-form nav-search p-0 d-none d-lg-flex">
    </nav>

    <ul class="navbar-nav topbar-nav ms-md-auto align-items-center">
<li class="nav-item topbar-user dropdown hidden-caret">
  <a class="dropdown-toggle profile-pic" 
     data-bs-toggle="dropdown" 
     href="#" 
     aria-expanded="false"
     data-bs-placement="bottom"
     data-bs-toggle="tooltip"
     data-bs-title="Hej, <?php echo htmlspecialchars($full_name); ?>"
     title="Hej, <?php echo htmlspecialchars($full_name); ?>">
    
    <div class="avatar-sm" style="width:30px; height:30px;">
      <img src="assets/img/humain.png" 
           alt="User" 
           class="avatar-img rounded-circle" 
           style="width:100%; height:100%; object-fit:cover;" />
    </div>
    <span class="profile-username d-none d-md-inline">
      <span class="op-7">Hej,</span>
      <span class="fw-bold"><?php echo htmlspecialchars($full_name); ?></span>
    </span>

    <span class="tooltip-indicator d-md-none"></span>
  </a>
</li>

<style>

@media (max-width: 768px) {

  .nav-item.topbar-user .avatar-sm {
    position: relative;
    transition: transform 0.3s ease;
  }

  .nav-item.topbar-user .profile-pic:hover .avatar-sm,
  .nav-item.topbar-user .profile-pic:active .avatar-sm {
    transform: scale(1.1);
  }

  .tooltip {
    font-size: 13px !important;
  }

  .tooltip-inner {
    background-color: rgba(0, 0, 0, 0.9) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }

  .tooltip-arrow {
    display: none; 
  }

  .tooltip-indicator {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #4CAF50;
    border-radius: 50%;
    bottom: 0;
    right: 0;
    border: 2px solid white;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }


  .nav-item.topbar-user .profile-pic:active {
    background: rgba(0,0,0,0.05);
    border-radius: 12px;
  }
}


@media (min-width: 769px) {
  .tooltip-indicator {
    display: none !important;
  }
}
</style>

<style>
.custom-mobile-tooltip {
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.custom-mobile-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0, 0, 0, 0.9);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.custom-mobile-tooltip {
  animation: fadeInUp 0.3s ease;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {

  const isMobile = window.innerWidth < 769;
  
  if (isMobile) {

    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl, {
        trigger: 'hover focus', 
        placement: 'bottom',
        offset: [0, 10]
      });
    });

    
    const avatarLink = document.querySelector('.nav-item.topbar-user .profile-pic');
    let customTooltip = null;

    avatarLink?.addEventListener('click', function(e) {
      
      if (window.innerWidth < 769) {
        e.preventDefault();
        
        
        if (customTooltip && customTooltip.parentNode) {
          customTooltip.remove();
          customTooltip = null;
        } else {
          showCustomTooltip(this);
        }
      }
    });

    function showCustomTooltip(element) {
      const userName = "<?php echo htmlspecialchars($full_name); ?>";
      
      
      customTooltip = document.createElement('div');
      customTooltip.className = 'custom-mobile-tooltip';
      customTooltip.innerHTML = `<strong>Hej, ${userName}</strong>`;
      
      
      document.body.appendChild(customTooltip);
      
      const rect = element.getBoundingClientRect();
      customTooltip.style.position = 'fixed';
      customTooltip.style.top = (rect.bottom + 10) + 'px';
      customTooltip.style.left = (rect.left + rect.width / 2) + 'px';
      customTooltip.style.transform = 'translateX(-50%)';
      customTooltip.style.zIndex = '9999';
      
     
      setTimeout(() => {
        if (customTooltip && customTooltip.parentNode) {
          customTooltip.style.opacity = '0';
          setTimeout(() => customTooltip.remove(), 300);
        }
      }, 3000);
    }

    
    document.addEventListener('click', function(e) {
      if (customTooltip && !e.target.closest('.nav-item.topbar-user')) {
        customTooltip.remove();
        customTooltip = null;
      }
    });
  }
});
</script>


      <li class="nav-item topbar-user">
        <a href="forms/logout.php" class="profile-pic d-flex align-items-center" title="Log ud">
          
          <span class="fw-bold d-none d-md-inline">Log ud</span>
        
          <i class="fas fa-sign-out-alt ms-1"></i>
        </a>
      </li>

    </ul>
  </div>
</nav>
        </div>

        <div class="container">
  <div class="page-inner" id="dashboardContent">
    <h3 class="fw-bold mb-4">Betjeningspanel</h3>

    <div class="d-flex justify-content-between flex-wrap gap-3">

      <div class="card flex-fill shadow-sm rounded-4" style="min-width: 200px;">
        <div class="card-body d-flex align-items-center p-3">
          <div class="icon-circle me-3" style="background-color:#3498db; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;">
            <i class="fas fa-users text-white fa-sm"></i>
          </div>
          <div>
            <p class="card-category mb-0 fw-semibold small">Medarbejdere</p>
            <h4 class="card-title mb-0"><?php echo $employeesCount; ?></h4>
          </div>
        </div>
      </div>
      <div class="card flex-fill shadow-sm rounded-4" style="min-width: 200px;">
        <div class="card-body d-flex align-items-center p-3">
          <div class="icon-circle me-3" style="background-color:#9b59b6; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;">
            <i class="fas fa-user text-white fa-sm"></i>
          </div>
          <div>
            <p class="card-category mb-0 fw-semibold small">Borgere</p>
            <h4 class="card-title mb-0"><?php echo $citizensCount; ?></h4>
          </div>
        </div>
      </div>

      <div class="card flex-fill shadow-sm rounded-4" style="min-width: 200px;">
        <div class="card-body d-flex align-items-center p-3">
          <div class="icon-circle me-3" style="background-color:#f1c40f; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;">
            <i class="fas fa-building text-white fa-sm"></i>
          </div>
          <div>
            <p class="card-category mb-0 fw-semibold small">Afdelinger</p>
            <h4 class="card-title mb-0"><?php echo $departmentsCount; ?></h4>
          </div>
        </div>
      </div>

      <div class="card flex-fill shadow-sm rounded-4" style="min-width: 200px;">
        <div class="card-body d-flex align-items-center p-3">
          <div class="icon-circle me-3" style="background-color:#e74c3c; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;">
            <i class="fas fa-exclamation-triangle text-white fa-sm"></i>
          </div>
          <div>
            <p class="card-category mb-0 fw-semibold small">Hændelser</p>
            <h4 class="card-title mb-0"><?php echo $incidentsCount; ?></h4>
          </div>
        </div>
      </div>
      <div class="card flex-fill shadow-sm rounded-4" style="min-width: 200px;">
        <div class="card-body d-flex align-items-center p-3">
          <div class="icon-circle me-3" style="background-color:#2ecc71; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;">
            <i class="fas fa-tags text-white fa-sm"></i>
          </div>
          <div>
            <p class="card-category mb-0 fw-semibold small">Typer af hændelser</p>
            <h4 class="card-title mb-0"><?php echo $typesOfIncidentsCount; ?></h4>
          </div>
        </div>
      </div>
    </div>
    <?php if ($current_page === 'index.php'): ?>

<style>
.company-filter-bar {
  background: #fff;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #e9ecef;
}
.company-filter-bar-accent {
  width: 6px;
  background-color: #22a5e2;
  flex-shrink: 0;
}
.company-filter-bar-body {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  flex: 1;
  padding: 16px 24px;
}
.company-filter-label {
  color: #6c757d;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.company-filter-icon {
  width: 40px;
  height: 40px;
  background-color: #22a5e2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.company-filter-select {
  min-width: 260px;
  border-radius: 8px !important;
  border: 1px solid #dee2e6 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #344767 !important;
  background-color: #f8f9fa !important;
  padding: 6px 12px !important;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.company-filter-select:focus {
  outline: none !important;
  border-color: #22a5e2 !important;
  box-shadow: 0 0 0 3px rgba(34,165,226,0.15) !important;
  background-color: #fff !important;
}
.company-filter-badge {
  background-color: #e8f6fd;
  color: #22a5e2;
  border: 1px solid #b8e4f7;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.company-filter-title {
  color: #344767;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}
.company-filter-bar.active-filter .company-filter-bar-accent {
  background-color: #1a8fc5;
}
.company-filter-bar.active-filter .company-filter-badge {
  background-color: #22a5e2;
  color: #fff;
  border-color: #22a5e2;
}
</style>

<div class="mt-4">
  <div class="company-filter-bar" id="companyFilterBar">
    <div class="company-filter-bar-accent"></div>
    <div class="company-filter-bar-body">
      <div class="company-filter-icon">
        <i class="fas fa-city" style="color:#fff; font-size:16px;"></i>
      </div>
      <div class="flex-grow-1">
        <div class="company-filter-label">Filter — Virksomhed</div>
        <p class="company-filter-title">
          <i class="fas fa-filter me-2" style="font-size:0.8rem; color:#22a5e2;"></i>
          Filtrér alle grafer efter virksomhed
        </p>
      </div>
      <div>
        <div class="company-filter-label">Vælg virksomhed</div>
        <select id="globalCompanyFilter" class="company-filter-select form-select form-select-sm">
          <option value="">Alle virksomheder</option>
          <?php foreach($companiesList as $co): ?>
            <option value="<?= htmlspecialchars($co) ?>"><?= htmlspecialchars($co) ?></option>
          <?php endforeach; ?>
        </select>
      </div>
      <div class="company-filter-badge" id="companyFilterBadge">
        <i class="fas fa-globe me-1"></i> Alle
      </div>
    </div>
  </div>
</div>

<script>
  function getSelectedCompany() {
    return document.getElementById('globalCompanyFilter')?.value || '';
  }
  document.addEventListener('DOMContentLoaded', () => {
    const sel = document.getElementById('globalCompanyFilter');
    const badge = document.getElementById('companyFilterBadge');
    const bar   = document.getElementById('companyFilterBar');
    sel?.addEventListener('change', () => {
      const v = sel.value;
      badge.innerHTML = v
        ? `<i class="fas fa-building me-1"></i> ${v.split(' ').slice(0,2).join(' ')}`
        : `<i class="fas fa-globe me-1"></i> Alle`;
      bar.classList.toggle('active-filter', !!v);
      reloadAllCharts();
    });
  });
</script>

<div class="row mt-4">
  <div class="col-12">
    <div class="card shadow-sm border-0 rounded-4">
      <div class="card-header text-white py-3 px-4 d-flex justify-content-between align-items-center" style="background-color: #22a5e2ff;">
        <h5 class="card-title mb-0">Antal hændelser pr. borger</h5>
        <form id="filterCitizen" class="d-flex gap-2 align-items-center mb-0" method="GET">
          <div>
            <label for="year_citizen" class="form-label fw-semibold mb-0">År</label>
            <select name="year" id="year_citizen" class="form-select form-select-sm shadow-sm">
              <?php 
              $startYear = 2020;
              $endYear = 2030;
              
              
              for($y = $startYear; $y <= $endYear; $y++): ?>
                <option value="<?= $y ?>" <?= ($selectedYear == $y ? 'selected' : '') ?>><?= $y ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <label for="month_citizen" class="form-label fw-semibold mb-0">Måned</label>
            <select name="month" id="month_citizen" class="form-select form-select-sm shadow-sm">
              <option value="0" <?= ($selectedMonth == 0 ? 'selected' : '') ?>>Alle</option>
              <?php for($m = 1; $m <= 12; $m++): ?>
                <option value="<?= $m ?>" <?= ($selectedMonth == $m ? 'selected' : '') ?>><?= str_pad($m, 2, '0', STR_PAD_LEFT) ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <button type="submit" class="btn btn-light btn-sm mt-4">
              <i class="bi bi-funnel-fill me-1"></i> Filtrér
            </button>
          </div>
        </form>
      </div>
      <div class="card-body p-4">
        <div class="chart-container p-3" style="min-height: 450px; background: #f9f9f9; border-radius: 15px;">
          <canvas id="statisticsChart1"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="row mt-4">
  <div class="col-12">
    <div class="card shadow-sm border-0 rounded-4">
      <div class="card-header text-white py-3 px-4 d-flex justify-content-between align-items-center" style="background-color: #0fa175ff;">
        <h5 class="card-title mb-0">Antal hændelser pr. medarbejder</h5>
        <form id="filterEmployee" class="d-flex gap-2 align-items-center mb-0">
          <div>
            
            <label for="year_emp" class="form-label fw-semibold mb-0">År</label>
            <select id="year_emp" class="form-select form-select-sm shadow-sm">
              <?php 
              $startYear = 2020;
              $endYear = 2030;
              for($y = $startYear; $y <= $endYear; $y++): ?>
                <option value="<?= $y ?>" <?= ($selectedYearEmp == $y ? 'selected' : '') ?>><?= $y ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <label for="month_emp" class="form-label fw-semibold mb-0">Måned</label>
            <select id="month_emp" class="form-select form-select-sm shadow-sm">
              <option value="0" <?= ($selectedMonthEmp == 0 ? 'selected' : '') ?>>Alle</option>
              <?php for($m = 1; $m <= 12; $m++): ?>
                <option value="<?= $m ?>" <?= ($selectedMonthEmp == $m ? 'selected' : '') ?>><?= str_pad($m,2,'0',STR_PAD_LEFT) ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <button type="submit" class="btn btn-light btn-sm mt-4">
              <i class="bi bi-funnel-fill me-1"></i> Filtrér
            </button>
          </div>
        </form>
      </div>

      <div class="card-body p-4">
        <div class="chart-container p-3" style="min-height: 450px; background: #f9f9f9; border-radius: 15px;">
          <canvas id="statisticsChart2"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="row mt-4">
  <div class="col-12">
    <div class="card shadow-sm border-0 rounded-4">
      <div class="card-header text-white py-3 px-4 d-flex justify-content-between align-items-center" style="background-color: #b72ec9ff;">
        <h5 class="card-title mb-0">Hændelser pr. medarbejder og borger</h5>
        <form id="filterEmpCitizen" class="d-flex gap-2 align-items-center mb-0">
          <div>
            <label for="year_emp_citizen" class="form-label fw-semibold mb-0">År</label>
            <select id="year_emp_citizen" class="form-select form-select-sm shadow-sm">
              <?php 
               $startYear = 2020;
              $endYear = 2030;
              for($y = $startYear; $y <= $endYear; $y++): ?>
                <option value="<?= $y ?>"><?= $y ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <label for="month_emp_citizen" class="form-label fw-semibold mb-0">Måned</label>
            <select id="month_emp_citizen" class="form-select form-select-sm shadow-sm">
              <option value="0">Alle</option>
              <?php for($m = 1; $m <= 12; $m++): ?>
                <option value="<?= $m ?>"><?= str_pad($m,2,'0',STR_PAD_LEFT) ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <button type="submit" class="btn btn-light btn-sm mt-4">
              <i class="bi bi-funnel-fill me-1"></i> Filtrér
            </button>
          </div>
        </form>
      </div>

      <div class="card-body p-4">
        <div class="chart-container p-3" style="min-height: 450px; background: #f9f9f9; border-radius: 15px;">
          <canvas id="chartEmpCitizen"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>


 <div class="row mt-4">
  <div class="col-12">
    <div class="card shadow-sm border-0 rounded-4">
      <div class="card-header text-white py-3 px-4 d-flex justify-content-between align-items-center" style="background-color: #FF69B4;">

        <h5 class="card-title mb-0">Hændelser pr. afdeling</h5>
        <form id="filterDepartment" class="d-flex gap-2 align-items-center mb-0">
          <div>
            <label for="year_department" class="form-label fw-semibold mb-0">År</label>
            <select id="year_department" class="form-select form-select-sm shadow-sm">
              <?php 
              $startYear = 2020;
              $endYear = 2030;
              for($y = $startYear; $y <= $endYear; $y++): ?>
                <option value="<?= $y ?>"><?= $y ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <label for="month_department" class="form-label fw-semibold mb-0">Måned</label>
            <select id="month_department" class="form-select form-select-sm shadow-sm">
              <option value="0">Alle</option>
              <?php for($m = 1; $m <= 12; $m++): ?>
                <option value="<?= $m ?>"><?= str_pad($m,2,'0',STR_PAD_LEFT) ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <button type="submit" class="btn btn-light btn-sm mt-4">
              <i class="bi bi-funnel-fill me-1"></i> Filtrér
            </button>
          </div>
        </form>
      </div>

      <div class="card-body p-4">
        <div class="chart-container p-3" style="min-height: 450px; background: #f9f9f9; border-radius: 15px;">
          <canvas id="chartDepartment"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row mt-4">
  <div class="col-12">
    <div class="card shadow-sm border-0 rounded-4">
      <div class="card-header text-white py-3 px-4 d-flex justify-content-between align-items-center" style="background-color: #5b8dd9;">
        <h5 class="card-title mb-0">Hændelser pr. afdeling pr. borger</h5>
        <form id="filterDeptCitizen" class="d-flex gap-2 align-items-center mb-0">
          <div>
            <label for="year_dept_citizen" class="form-label fw-semibold mb-0">År</label>
            <select id="year_dept_citizen" class="form-select form-select-sm shadow-sm">
              <?php for($y = 2020; $y <= 2030; $y++): ?>
                <option value="<?= $y ?>"><?= $y ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <label for="month_dept_citizen" class="form-label fw-semibold mb-0">Måned</label>
            <select id="month_dept_citizen" class="form-select form-select-sm shadow-sm">
              <option value="0">Alle</option>
              <?php for($m = 1; $m <= 12; $m++): ?>
                <option value="<?= $m ?>"><?= str_pad($m,2,'0',STR_PAD_LEFT) ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <button type="submit" class="btn btn-light btn-sm mt-4">
              <i class="bi bi-funnel-fill me-1"></i> Filtrér
            </button>
          </div>
        </form>
      </div>
      <div class="card-body p-4">
        <div class="chart-container p-3" style="min-height: 450px; background: #f9f9f9; border-radius: 15px;">
          <canvas id="chartDeptCitizen"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row mt-4">
  <div class="col-12">
    <div class="card shadow-sm border-0 rounded-4">
      <div class="card-header text-white py-3 px-4 d-flex justify-content-between align-items-center" style="background-color: #e07b39;">
        <h5 class="card-title mb-0">Hændelser pr. afdeling pr. medarbejder</h5>
        <form id="filterDeptEmployee" class="d-flex gap-2 align-items-center mb-0">
          <div>
            <label for="year_dept_emp" class="form-label fw-semibold mb-0">År</label>
            <select id="year_dept_emp" class="form-select form-select-sm shadow-sm">
              <?php for($y = 2020; $y <= 2030; $y++): ?>
                <option value="<?= $y ?>"><?= $y ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <label for="month_dept_emp" class="form-label fw-semibold mb-0">Måned</label>
            <select id="month_dept_emp" class="form-select form-select-sm shadow-sm">
              <option value="0">Alle</option>
              <?php for($m = 1; $m <= 12; $m++): ?>
                <option value="<?= $m ?>"><?= str_pad($m,2,'0',STR_PAD_LEFT) ?></option>
              <?php endfor; ?>
            </select>
          </div>
          <div>
            <button type="submit" class="btn btn-light btn-sm mt-4">
              <i class="bi bi-funnel-fill me-1"></i> Filtrér
            </button>
          </div>
        </form>
      </div>
      <div class="card-body p-4">
        <div class="chart-container p-3" style="min-height: 450px; background: #f9f9f9; border-radius: 15px;">
          <canvas id="chartDeptEmployee"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <div class="row mt-4">
  <div class="col-12">
    <div class="card shadow-sm border-0 rounded-4">
      <div class="card-header text-white py-3 px-4 d-flex justify-content-between align-items-center" style="background-color: #aa9414ff;">
        <h5 class="card-title mb-0">Borger pr. Psykisk Vold</h5>
        <form id="filterPsykisk" class="d-flex gap-2 align-items-center mb-0">
          <div>
            <label for="psyOption" class="form-label fw-semibold mb-0">Psykisk Vold</label>
            <select id="psyOption" class="form-select form-select-sm shadow-sm">
              <?php 
              $psyOptions = ["Råb, skrig","Truende adfærd","Verbale trusler, tilråb, overfusning","Trusler om fysisk vold","Seksuelle krænkelser","Andet"];
              foreach($psyOptions as $option): ?>
                <option value="<?= $option ?>"><?= $option ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div>
            <button type="submit" class="btn btn-light btn-sm mt-4">
              <i class="bi bi-funnel-fill me-1"></i> Filtrér
            </button>
          </div>
        </form>
      </div>
      <div class="card-body p-4">
        <div class="chart-container p-3" style="min-height: 450px; background: #f9f9f9; border-radius: 15px;">
          <canvas id="chartPsykisk"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row mt-4">
  <div class="col-12">
    <div class="card shadow-sm border-0 rounded-4">
      <div class="card-header bg-primary text-white py-3 px-4 d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">Borger pr. Fysisk vold</h5>
        <form id="filterFysisk" class="d-flex gap-2 align-items-center mb-0">
          <div>
            <label for="fysOption" class="form-label fw-semibold mb-0">Fysisk Vold</label>
            <select id="fysOption" class="form-select form-select-sm shadow-sm">
              <?php 
              $fysOptions = ["Slag","Spark","Bid, riv, niv","Krads","Spyttet på","Nikket en skalle","Kast med genstand, inventar, bestik e.lign.","Andet"];
              foreach($fysOptions as $option): ?>
                <option value="<?= $option ?>"><?= $option ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div>
            <button type="submit" class="btn btn-light btn-sm mt-4">
              <i class="bi bi-funnel-fill me-1"></i> Filtrér
            </button>
          </div>
        </form>
      </div>

      <div class="card-body p-4">
        <div class="chart-container p-3" style="min-height: 450px; background: #f9f9f9; border-radius: 15px;">
          <canvas id="chartFysisk"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const fysPalette = [
    '#3498db','#e74c3c','#2ecc71','#f39c12','#9b59b6',
    '#1abc9c','#e67e22','#e91e63','#00bcd4','#8bc34a',
    '#ff5722','#607d8b','#673ab7','#009688','#ff9800',
    '#795548','#03a9f4','#4caf50','#f44336','#9c27b0'
];

function getFysColors(count) {
    const bg = [], border = [];
    for (let i = 0; i < count; i++) {
        const hex = fysPalette[i % fysPalette.length];
        bg.push(hex + 'aa');
        border.push(hex);
    }
    return { bg, border };
}

const ctxFys = document.getElementById('chartFysisk').getContext('2d');
let chartFysisk = new Chart(ctxFys, {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            label: 'Antal hændelser',
            data: [],
            backgroundColor: [],
            borderColor: [],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true } }
    }
});

async function loadFysiskData(type) {
    const _co = getSelectedCompany();
    const response = await fetch('index.php?type=' + encodeURIComponent(type) + (_co ? '&company=' + encodeURIComponent(_co) : ''));
    const text = await response.text();
    let data;
    try {
        data = JSON.parse(text);
    } catch (err) {
        console.error('Erreur de parsing JSON:', err);
        alert('Erreur côté serveur. Vérifie la console.');
        return;
    }

    if (data.error) {
        alert('Erreur SQL: ' + data.error);
        return;
    }

    const { bg, border } = getFysColors(data.values.length);
    chartFysisk.data.labels = data.labels;
    chartFysisk.data.datasets[0].data = data.values;
    chartFysisk.data.datasets[0].backgroundColor = bg;
    chartFysisk.data.datasets[0].borderColor = border;
    chartFysisk.update();
}

document.getElementById('filterFysisk').addEventListener('submit', (e) => {
    e.preventDefault();
    const selectedType = document.getElementById('fysOption').value;
    loadFysiskData(selectedType);
});

window.addEventListener('DOMContentLoaded', () => {
    document.getElementById('fysOption').value = 'Slag';
    loadFysiskData('Slag');
});

</script>
<script>
const psyPalette = [
    '#aa9414','#3498db','#e74c3c','#2ecc71','#9b59b6',
    '#1abc9c','#e67e22','#e91e63','#00bcd4','#8bc34a',
    '#ff5722','#607d8b','#673ab7','#009688','#ff9800',
    '#795548','#03a9f4','#4caf50','#f44336','#9c27b0'
];

function getPsyColors(count) {
    const bg = [], border = [];
    for (let i = 0; i < count; i++) {
        const hex = psyPalette[i % psyPalette.length];
        bg.push(hex + 'aa');
        border.push(hex);
    }
    return { bg, border };
}

const ctxPsy = document.getElementById('chartPsykisk').getContext('2d');
let chartPsykisk = new Chart(ctxPsy, {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            label: 'Antal hændelser',
            data: [],
            backgroundColor: [],
            borderColor: [],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true } }
    }
});

async function loadPsykiskData(type) {
    const _co = getSelectedCompany();
    const response = await fetch('index.php?typeVold=' + encodeURIComponent(type) + (_co ? '&company=' + encodeURIComponent(_co) : ''));
    const text = await response.text();
    let data;
    try {
        data = JSON.parse(text);
    } catch (err) {
        console.error('Erreur de parsing JSON:', err);
        alert('Erreur côté serveur. Vérifie la console.');
        return;
    }

    if (data.error) {
        alert('Erreur SQL: ' + data.error);
        return;
    }

    const { bg, border } = getPsyColors(data.values.length);
    chartPsykisk.data.labels = data.labels;
    chartPsykisk.data.datasets[0].data = data.values;
    chartPsykisk.data.datasets[0].backgroundColor = bg;
    chartPsykisk.data.datasets[0].borderColor = border;
    chartPsykisk.update();
}

document.getElementById('filterPsykisk').addEventListener('submit', (e) => {
    e.preventDefault();
    const selectedType = document.getElementById('psyOption').value;
    loadPsykiskData(selectedType);
});
window.addEventListener('DOMContentLoaded', () => {
    document.getElementById('psyOption').value = 'Råb, skrig';
    loadPsykiskData('Råb, skrig');
});

</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
  const ctx = document.getElementById('statisticsChart1').getContext('2d');
  let chartCitizen;
  const citizenPalette = [
    '#3498db','#e74c3c','#2ecc71','#f39c12','#9b59b6',
    '#1abc9c','#e67e22','#e91e63','#00bcd4','#8bc34a',
    '#ff5722','#607d8b','#673ab7','#009688','#ff9800',
    '#795548','#03a9f4','#4caf50','#f44336','#9c27b0'
  ];

  function getColors(count) {
    const bg = [], border = [];
    for (let i = 0; i < count; i++) {
      const hex = citizenPalette[i % citizenPalette.length];
      bg.push(hex + 'aa');
      border.push(hex);
    }
    return { bg, border };
  }

  function renderChart(labels = [], totals = []) {
    if (chartCitizen) chartCitizen.destroy();
    const { bg, border } = getColors(totals.length);

    chartCitizen = new Chart(ctx, {
      type: 'bar',
      data: {
        labels,
        datasets: [{
          label: 'Antal hændelser',
          data: totals,
          backgroundColor: bg,
          borderColor: border,
          borderWidth: 1,
          borderRadius: 6,
          barPercentage: 0.6
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: { display: false },
          tooltip: { enabled: true }
        },
        scales: {
          y: { beginAtZero: true, title: { display: true, text: 'Antal hændelser' } },
          x: { title: { display: true, text: 'Borger' } }
        }
      }
    });
  }

  window.fetchCitizenData = async function fetchCitizenData(year, month) {
    try {
      const _co = getSelectedCompany();
      const resp = await fetch(`?action=get_citizen_stats&year=${year}&month=${month}${_co ? '&company='+encodeURIComponent(_co) : ''}`);
      const data = await resp.json();

      if (data.error) {
        alert('Fejl fra serveren: ' + data.error);
        return;
      }

      renderChart(data.labels, data.values);
    } catch (err) {
      console.error('Erreur lors du chargement des données:', err);
      alert('Erreur lors du chargement des données. Vérifie la console.');
    }
  }

  const yearSelect = document.getElementById('year_citizen');
  const monthSelect = document.getElementById('month_citizen');

  yearSelect.value = '2025';
  await fetchCitizenData(2025, 0);

  document.getElementById('filterCitizen').addEventListener('submit', async (e) => {
    e.preventDefault();
    const year = yearSelect.value || 2025;
    const month = monthSelect.value || 0;
    await fetchCitizenData(year, month);
  });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', async () => {
  const ctxEmp = document.getElementById('statisticsChart2').getContext('2d');
  let chartEmp;

  const empPalette = [
    '#e74c3c','#3498db','#2ecc71','#f39c12','#9b59b6',
    '#1abc9c','#e67e22','#e91e63','#00bcd4','#8bc34a',
    '#ff5722','#607d8b','#673ab7','#009688','#ff9800',
    '#795548','#03a9f4','#4caf50','#f44336','#9c27b0'
  ];

  function getEmpColors(count) {
    const bg = [], border = [];
    for (let i = 0; i < count; i++) {
      const hex = empPalette[i % empPalette.length];
      bg.push(hex + 'aa');
      border.push(hex);
    }
    return { bg, border };
  }

  function renderChart(labels = [], totals = []) {
    if (chartEmp) chartEmp.destroy();
    const { bg, border } = getEmpColors(totals.length);

    chartEmp = new Chart(ctxEmp, {
      type: 'bar',
      data: {
        labels,
        datasets: [{
          label: 'Antal hændelser',
          data: totals,
          backgroundColor: bg,
          borderColor: border,
          borderWidth: 1,
          borderRadius: 6,
          barPercentage: 0.6
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: { display: false },
          tooltip: { enabled: true, titleFont: { weight: 'bold' } }
        },
        scales: {
          y: {
            beginAtZero: true,
            title: { display: true, text: 'Antal hændelser', font: { size: 14, weight: 'bold' } }
          },
          x: { title: { display: true, text: 'Medarbejder', font: { size: 14, weight: 'bold' } } }
        }
      }
    });
  }

  window.fetchEmpData = async function fetchData(year, month) {
    try {
      const _co = getSelectedCompany();
      const response = await fetch(`?action=get_employee_stats&year=${year}&month=${month}${_co ? '&company='+encodeURIComponent(_co) : ''}`);
      const data = await response.json();

      if (data.error) {
        alert('Fejl fra serveren: ' + data.error);
        return;
      }

      renderChart(data.labels, data.values);
    } catch (err) {
      console.error('Erreur lors du chargement des données:', err);
      alert('Erreur lors du chargement des données. Vérifie la console.');
    }
  }
  const yearSelect = document.getElementById('year_emp');
  const monthSelect = document.getElementById('month_emp');
  yearSelect.value = '2025';
  await fetchEmpData(2025, 0);
  document.getElementById('filterEmployee').addEventListener('submit', async (e) => {
    e.preventDefault();
    const year = yearSelect.value || 2025;
    const month = monthSelect.value || 0;
    await fetchEmpData(year, month);
  });
});
</script>

</script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
    const ctx = document.getElementById('chartEmpCitizen').getContext('2d');
    let chart;

    const ecPalette = [
        '#3498db','#e74c3c','#2ecc71','#f39c12','#9b59b6',
        '#1abc9c','#e67e22','#e91e63','#00bcd4','#8bc34a',
        '#ff5722','#607d8b','#673ab7','#009688','#ff9800',
        '#795548','#03a9f4','#4caf50','#f44336','#9c27b0'
    ];

    function updateChart(labels = [], datasets = []) {
        if(chart) chart.destroy();

        datasets = datasets.map((ds, i) => {
            const hex = ecPalette[i % ecPalette.length];
            return {
                ...ds,
                backgroundColor: hex + 'aa',
                borderColor: hex,
                borderWidth: 1
            };
        });

        chart = new Chart(ctx, {
            type: 'bar',
            data: { labels, datasets },
            options: {
                responsive: true,
                plugins: {
                    legend: { position: 'top' },
                    tooltip: { mode: 'index', intersect: false }
                },
                scales: {
                    x: { stacked: true, title: { display: true, text: 'Medarbejder' } },
                    y: { stacked: true, beginAtZero: true, title: { display: true, text: 'Antal hændelser' } }
                }
            }
        });
    }

    window.fetchEmpCitizenData = async function fetchAndUpdate(year, month) {
        try {
            const _co = getSelectedCompany();
            const resp = await fetch(`?action=get_emp_citizen_stats&year=${year}&month=${month}${_co ? '&company='+encodeURIComponent(_co) : ''}`);
            const json = await resp.json();
            if (json.error) {
                alert(json.error);
                return;
            }
            updateChart(json.labels, json.datasets);
        } catch (err) {
            console.error('Erreur de récupération:', err);
            alert('Fejl ved hentning af data');
        }
    }

    
    const yearSelect = document.getElementById('year_emp_citizen');
    const monthSelect = document.getElementById('month_emp_citizen');

    if (yearSelect) {
        yearSelect.value = '2025'; 
    }
    await fetchEmpCitizenData(2025, 0);
    document.getElementById('filterEmpCitizen').addEventListener('submit', async e => {
        e.preventDefault();
        const year = yearSelect.value || 2025;
        const month = monthSelect.value || 0;
        await fetchEmpCitizenData(year, month);
    });
});
</script>


<script>
document.addEventListener('DOMContentLoaded', () => {
  const ctx = document.getElementById('chartDepartment').getContext('2d');
  let chart;

  const deptPalette = [
    '#FF69B4','#3498db','#2ecc71','#f39c12','#9b59b6',
    '#1abc9c','#e67e22','#e91e63','#00bcd4','#8bc34a',
    '#ff5722','#607d8b','#673ab7','#009688','#ff9800',
    '#795548','#03a9f4','#4caf50','#f44336','#9c27b0'
  ];

  function getDeptColors(count) {
    const bg = [], border = [];
    for (let i = 0; i < count; i++) {
      const hex = deptPalette[i % deptPalette.length];
      bg.push(hex + 'aa');
      border.push(hex);
    }
    return { bg, border };
  }

  function updateChart(labels = [], data = []) {
    if (chart) chart.destroy();
    const { bg, border } = getDeptColors(data.length);
    chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels,
        datasets: [{
          label: 'Antal hændelser',
          data,
          backgroundColor: bg,
          borderColor: border,
          borderWidth: 1,
          borderRadius: 6,
          barPercentage: 0.6
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: { display: false },
          tooltip: { enabled: true }
        },
        scales: {
          x: { title: { display: true, text: 'Afdeling' } },
          y: { beginAtZero: true, title: { display: true, text: 'Antal hændelser' } }
        }
      }
    });
  }

  window.fetchDeptData = async function fetchDeptData(year, month) {
    try {
      const _co = getSelectedCompany();
      const resp = await fetch(`?action=get_department_stats&year=${year}&month=${month}${_co ? '&company='+encodeURIComponent(_co) : ''}`);
      const json = await resp.json();
      if (json.error) { alert('Fejl: ' + json.error); return; }
      updateChart(json.labels, json.totals);
    } catch(err) {
      console.error(err);
      alert('Erreur lors du chargement des données');
    }
  }

  fetchDeptData(new Date().getFullYear(), 0);

  document.getElementById('filterDepartment').addEventListener('submit', e => {
    e.preventDefault();
    fetchDeptData(
      document.getElementById('year_department').value,
      document.getElementById('month_department').value
    );
  });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', async () => {
  const ctx = document.getElementById('chartDeptCitizen').getContext('2d');
  let chart;

  const palette = [
    '#5b8dd9','#e74c3c','#2ecc71','#f39c12','#9b59b6',
    '#1abc9c','#e67e22','#e91e63','#00bcd4','#8bc34a',
    '#ff5722','#607d8b','#673ab7','#009688','#ff9800',
    '#795548','#03a9f4','#4caf50','#f44336','#9c27b0'
  ];

  function updateChart(labels = [], datasets = []) {
    if (chart) chart.destroy();
    datasets = datasets.map((ds, i) => ({
      ...ds,
      backgroundColor: palette[i % palette.length] + 'aa',
      borderColor: palette[i % palette.length],
      borderWidth: 1
    }));
    chart = new Chart(ctx, {
      type: 'bar',
      data: { labels, datasets },
      options: {
        responsive: true,
        plugins: {
          legend: { position: 'top' },
          tooltip: { mode: 'index', intersect: false }
        },
        scales: {
          x: { stacked: true, title: { display: true, text: 'Afdeling' } },
          y: { stacked: true, beginAtZero: true, title: { display: true, text: 'Antal hændelser' } }
        }
      }
    });
  }

  window.fetchDeptCitizenData = async function(year, month) {
    try {
      const _co = getSelectedCompany();
      const resp = await fetch(`?action=get_dept_citizen_stats&year=${year}&month=${month}${_co ? '&company='+encodeURIComponent(_co) : ''}`);
      const json = await resp.json();
      if (json.error) { alert(json.error); return; }
      updateChart(json.labels, json.datasets);
    } catch(err) { console.error(err); }
  }

  const yearSel  = document.getElementById('year_dept_citizen');
  const monthSel = document.getElementById('month_dept_citizen');
  yearSel.value  = new Date().getFullYear();
  await fetchDeptCitizenData(yearSel.value, 0);

  document.getElementById('filterDeptCitizen').addEventListener('submit', async e => {
    e.preventDefault();
    await fetchDeptCitizenData(yearSel.value, monthSel.value);
  });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', async () => {
  const ctx = document.getElementById('chartDeptEmployee').getContext('2d');
  let chart;

  const palette = [
    '#e07b39','#3498db','#2ecc71','#9b59b6','#e74c3c',
    '#1abc9c','#f39c12','#e91e63','#00bcd4','#8bc34a',
    '#ff5722','#607d8b','#673ab7','#009688','#ff9800',
    '#795548','#03a9f4','#4caf50','#f44336','#9c27b0'
  ];

  function updateChart(labels = [], datasets = []) {
    if (chart) chart.destroy();
    datasets = datasets.map((ds, i) => ({
      ...ds,
      backgroundColor: palette[i % palette.length] + 'aa',
      borderColor: palette[i % palette.length],
      borderWidth: 1
    }));
    chart = new Chart(ctx, {
      type: 'bar',
      data: { labels, datasets },
      options: {
        responsive: true,
        plugins: {
          legend: { position: 'top' },
          tooltip: { mode: 'index', intersect: false }
        },
        scales: {
          x: { stacked: true, title: { display: true, text: 'Afdeling' } },
          y: { stacked: true, beginAtZero: true, title: { display: true, text: 'Antal hændelser' } }
        }
      }
    });
  }

  window.fetchDeptEmpData = async function(year, month) {
    try {
      const _co = getSelectedCompany();
      const resp = await fetch(`?action=get_dept_employee_stats&year=${year}&month=${month}${_co ? '&company='+encodeURIComponent(_co) : ''}`);
      const json = await resp.json();
      if (json.error) { alert(json.error); return; }
      updateChart(json.labels, json.datasets);
    } catch(err) { console.error(err); }
  };

  const yearSel  = document.getElementById('year_dept_emp');
  const monthSel = document.getElementById('month_dept_emp');
  yearSel.value  = new Date().getFullYear();
  await fetchDeptEmpData(yearSel.value, 0);

  document.getElementById('filterDeptEmployee').addEventListener('submit', async e => {
    e.preventDefault();
    await fetchDeptEmpData(yearSel.value, monthSel.value);
  });
});
</script>
<script>
function reloadAllCharts() {
  const year  = new Date().getFullYear();
  const month = 0;

  const fysSel = document.getElementById('fysOption');
  if (fysSel) loadFysiskData(fysSel.value);

  const psySel = document.getElementById('psyOption');
  if (psySel) loadPsykiskData(psySel.value);

  const yCit = document.getElementById('year_citizen')?.value || year;
  const mCit = document.getElementById('month_citizen')?.value || month;
  if (typeof fetchCitizenData === 'function') fetchCitizenData(yCit, mCit);

  const yEmp = document.getElementById('year_emp')?.value || year;
  const mEmp = document.getElementById('month_emp')?.value || month;
  if (typeof fetchEmpData === 'function') fetchEmpData(yEmp, mEmp);

  const yEC = document.getElementById('year_emp_citizen')?.value || year;
  const mEC = document.getElementById('month_emp_citizen')?.value || month;
  if (typeof fetchEmpCitizenData === 'function') fetchEmpCitizenData(yEC, mEC);

  const yDept = document.getElementById('year_department')?.value || year;
  const mDept = document.getElementById('month_department')?.value || month;
  if (typeof fetchDeptData === 'function') fetchDeptData(yDept, mDept);

  const yDC = document.getElementById('year_dept_citizen')?.value || year;
  const mDC = document.getElementById('month_dept_citizen')?.value || month;
  if (typeof fetchDeptCitizenData === 'function') fetchDeptCitizenData(yDC, mDC);

  const yDE = document.getElementById('year_dept_emp')?.value || year;
  const mDE = document.getElementById('month_dept_emp')?.value || month;
  if (typeof fetchDeptEmpData === 'function') fetchDeptEmpData(yDE, mDE);
}
</script>
<?php endif; ?>

  </div>
  </div>
<footer class="footer bg-light py-3">
  <div class="container d-flex justify-content-center">
    <p class="mb-0 text-center">
      &copy; <?php echo date("Y"); ?>, 
      <strong style="color:blue;">Fonden Svennebjerggaard</strong>. 
      Alle rettigheder forbeholdes. 
      Developed by 
      <strong>
        <a href="https://landynamic.com" target="_blank" style="color:#007bff; text-decoration:none;">
          LAN Dynamic
        </a>
      </strong>.
    </p>
  </div>
</footer>
    <script src="assets/js/core/jquery-3.7.1.min.js"></script>
    <script src="assets/js/core/popper.min.js"></script>
    <script src="assets/js/core/bootstrap.min.js"></script>
    <script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
    <script src="assets/js/plugin/chart.js/chart.min.js"></script>
    <script src="assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>
    <script src="assets/js/plugin/chart-circle/circles.min.js"></script>
    <script src="assets/js/plugin/datatables/datatables.min.js"></script>
    <script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
    <script src="assets/js/plugin/jsvectormap/jsvectormap.min.js"></script>
    <script src="assets/js/plugin/jsvectormap/world.js"></script>
    <script src="assets/js/plugin/sweetalert/sweetalert.min.js"></script>
    <script src="assets/js/setting-demo.js"></script>
    <script src="assets/js/demo.js"></script>
    <script>
      $("#lineChart").sparkline([102, 109, 120, 99, 110, 105, 115], {
        type: "line",
        height: "70",
        width: "100%",
        lineWidth: "2",
        lineColor: "#177dff",
        fillColor: "rgba(23, 125, 255, 0.14)",
      });

      $("#lineChart2").sparkline([99, 125, 122, 105, 110, 124, 115], {
        type: "line",
        height: "70",
        width: "100%",
        lineWidth: "2",
        lineColor: "#f3545d",
        fillColor: "rgba(243, 84, 93, .14)",
      });

      $("#lineChart3").sparkline([105, 103, 123, 100, 95, 105, 115], {
        type: "line",
        height: "70",
        width: "100%",
        lineWidth: "2",
        lineColor: "#ffa534",
        fillColor: "rgba(255, 165, 52, .14)",
      });
    </script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  
  const dashboardBtn = document.querySelector('[href="#dashboard"]'); 
  const incidentsBtn = document.getElementById('loadIncidents'); 
  const citizensBtn = document.getElementById('loadCitizens');
  const employeesBtn = document.getElementById('loadEmployees');
  const departmentsBtn = document.getElementById('loadDepartments');
  const employeHistoryBtn = document.getElementById('loadHistoryEmploye');
  const citizenHistoryBtn = document.getElementById('loadHistoryCitizen');
  const citizenIncidentsBtn  = document.getElementById('loadCitizenIncidents');
  const employeeIncidentsBtn = document.getElementById('loadEmployeeIncidents');
  const container = document.getElementById('dashboardContent');
  const navItems = document.querySelectorAll('.nav-item');

  if (!container) return;


  function setActive(item) {
    navItems.forEach(i => i.classList.remove('active'));
    if (item) item.closest('.nav-item').classList.add('active');
  }

  incidentsBtn?.addEventListener('click', (e) => {
    e.preventDefault();
    setActive(incidentsBtn);
    container.innerHTML = `
      <iframe src="forms/incidents.php" style="width:100%; height:100vh; border:none;"></iframe>
    `;
  });
  citizensBtn?.addEventListener('click', (e) => {
    e.preventDefault();
    setActive(citizensBtn);
    container.innerHTML = `
      <iframe src="forms/citizens.php" style="width:100%; height:100vh; border:none;"></iframe>
    `;
  });
 employeesBtn?.addEventListener('click', (e) => {
  e.preventDefault();
  setActive(employeesBtn);

  container.innerHTML = `
    <iframe src="forms/employees.php" style="width:100%; height:100%; min-height:800px; border:none;" class="full-scroll"></iframe>
  `;
});


  departmentsBtn?.addEventListener('click', (e) => {
    e.preventDefault();
    setActive(departmentsBtn);
    container.innerHTML = `
      <iframe src="forms/departments.php" style="width:100%; height:100vh; border:none;"></iframe>
    `;
  });
   employeHistoryBtn?.addEventListener('click', (e) => {
    e.preventDefault();
    setActive(employeHistoryBtn);
    container.innerHTML = `
      <iframe src="forms/employees_history.php" style="width:100%; height:100vh; border:none;"></iframe>
    `;
  });
  citizenHistoryBtn?.addEventListener('click', (e) => {
    e.preventDefault();
    setActive(citizenHistoryBtn);
    container.innerHTML = `
      <iframe src="forms/citizens_history.php" style="width:100%; height:100vh; border:none;"></iframe>
    `;
  });

  citizenIncidentsBtn?.addEventListener('click', (e) => {
    e.preventDefault();
    setActive(citizenIncidentsBtn);
    container.innerHTML = `
      <iframe src="forms/citizens_incidents.php" style="width:100%; height:100vh; border:none;"></iframe>
    `;
  });

  employeeIncidentsBtn?.addEventListener('click', (e) => {
    e.preventDefault();
    setActive(employeeIncidentsBtn);
    container.innerHTML = `
      <iframe src="forms/employees_incidents.php" style="width:100%; height:100vh; border:none;"></iframe>
    `;
  });

  dashboardBtn?.addEventListener('click', (e) => {
    e.preventDefault();
    setActive(dashboardBtn);
    location.reload(); 
  });
});
</script>
<script>
$(document).ready(function() {
    console.log('✅ jQuery chargé:', typeof $ !== 'undefined');
    console.log('✅ Sidebar:', $('.sidebar').length);
    console.log('✅ Boutons toggle:', $('.toggle-sidebar').length);

    $('.toggle-sidebar').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        console.log('🔄 Toggle sidebar cliqué');
        
        const isMobile = $(window).width() < 992;
        
        if (isMobile) {
            $('body').toggleClass('sidebar-visible');
            console.log('📱 Mobile - Sidebar visible:', $('body').hasClass('sidebar-visible'));
        } else {
            $('body').toggleClass('sidebar-hidden');
            console.log('🖥️ Desktop - Sidebar cachée:', $('body').hasClass('sidebar-hidden'));
        }
    });
    $('.sidenav-toggler').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        console.log('🔄 Sidenav toggler cliqué');
        
        const isMobile = $(window).width() < 992;
        
        if (!isMobile) {
            $('body').toggleClass('sidebar_minimize');
            $('body').removeClass('sidebar-hidden');
            console.log('📏 Sidebar minimisée:', $('body').hasClass('sidebar_minimize'));
        }
    });
    $(document).on('click', function(event) {
        const isMobile = $(window).width() < 992;
        
        if (isMobile && $('body').hasClass('sidebar-visible')) {
            const isClickInSidebar = $(event.target).closest('.sidebar').length > 0;
            const isClickOnToggle = $(event.target).closest('.toggle-sidebar').length > 0;
            
            if (!isClickInSidebar && !isClickOnToggle) {
                $('body').removeClass('sidebar-visible');
                console.log('📱 Sidebar fermée (clic extérieur)');
            }
        }
    });

    let resizeTimer;
    $(window).on('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            const isMobile = $(window).width() < 992;
            
            if (isMobile) {
                $('body').removeClass('sidebar-hidden sidebar_minimize');
            } else {
                $('body').removeClass('sidebar-visible');
            }
        }, 250);
    });

    $('.nav-item a').on('click', function() {
        if ($(window).width() < 992) {
            $('body').removeClass('sidebar-visible');
        }
    });
document.addEventListener("keydown", function(e) {
  if (
    e.key === "F12" || 
    (e.ctrlKey && e.shiftKey && (e.key === "I" || e.key === "i")) || 
    (e.ctrlKey && e.shiftKey && (e.key === "J" || e.key === "j")) || 
    (e.ctrlKey && e.shiftKey && (e.key === "C" || e.key === "c")) || 
    (e.ctrlKey && (e.key === "U" || e.key === "u"))
  ) {
    e.preventDefault();
    return false;
  }
});

document.addEventListener("contextmenu", function(e) {
  e.preventDefault();
  return false;
});

(function() {
  const devtools = /./;
  devtools.toString = function() {
    this.opened = true;
  }
  
  setInterval(function() {
    console.clear();
    console.log(devtools);
    if (devtools.opened) {
      window.location.href = "about:blank"; 
    }
    devtools.opened = false;
  }, 1000);
})();

console.log = function() {};
console.warn = function() {};
console.error = function() {};
console.info = function() {};
});
</script>
  </body>
</html>