<?php
require '../config/auth.php';
require '../config/db.php';

/* ================= BACKEND (UNCHANGED) ================= */

// Total Managers
$total_managers = $pdo->query("SELECT COUNT(*) FROM managers")->fetchColumn();

// Total Employees
$total_employees = 0;
$employee_tables = ['sales_employees','design_employees','development_employees','marketing_employees'];
foreach($employee_tables as $table){
    $total_employees += $pdo->query("SELECT COUNT(*) FROM $table")->fetchColumn();
}

// Pending Leaves
$total_pending_leaves = $pdo->query("SELECT COUNT(*) FROM employee_leave_requests WHERE status='ManagerApproved'")->fetchColumn();
$total_pending_leaves_design = $pdo->query("SELECT COUNT(*) FROM design_employee_leave_requests WHERE status='ManagerApproved'")->fetchColumn();
$total_pending_leaves_development = $pdo->query("SELECT COUNT(*) FROM development_employee_leave_requests WHERE status='ManagerApproved'")->fetchColumn();

// Manager Leaves
$departments = ['sales','design','development','marketing'];
$total_pending = 0;
foreach($departments as $d){
    $total_pending += $pdo->query("SELECT COUNT(*) FROM {$d}_manager_leaves WHERE status='Pending'")->fetchColumn();
}

// Attendance
$pending_att_req  = $pdo->query("SELECT COUNT(*) FROM attendance_requests WHERE status='Pending'")->fetchColumn();
$pending_att_req2 = $pdo->query("SELECT COUNT(*) FROM design_attendance_requests WHERE status='Pending'")->fetchColumn();
$pending_att_req3 = $pdo->query("SELECT COUNT(*) FROM development_attendance_requests WHERE status='Pending'")->fetchColumn();
$requests = $pdo->query("SELECT COUNT(*) FROM manager_attendance_requests WHERE status='Pending'")->fetchColumn();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HR Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --bg:#05070f;
  --glass:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.18);
  --blue:grey;
  --purple:white;
  --cyan:#22d3ee;
  --gold:#facc15;
  --text:#e5e7eb;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* AURORA */
.aurora-bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, #4f9cff44, transparent 40%),
    radial-gradient(circle at 80% 30%, #8b5cf644, transparent 40%),
    radial-gradient(circle at 50% 80%, #22d3ee33, transparent 40%);
  animation: aurora 18s infinite alternate;
  z-index:-1;
}

@keyframes aurora{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(30deg)}
}

/* LAYOUT */
.app-shell{
 
  grid-template-columns:290px 1fr;
  display:flex;
  min-height:100vh;


}

/* SIDEBAR */
/* FIXED SIDEBAR */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  width:260px;
  height:100vh;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
  border-right:1px solid var(--border);
  padding:20px 16px;
  overflow-y:auto;
  z-index:100;
}


.logo{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:800;
  font-size:18px;
  margin-bottom:30px;
}

.menu a{
  display:flex;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  color:#cbd5f5;
  margin-bottom:6px;
  transition:.35s;
}

.menu a:hover,
.menu a.active{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  transform:translateX(6px);
}

/* MAIN */
.main-content{
    margin-left:260px;
     /* SAME AS SIDEBAR WIDTH */
  padding:24px;
}

/* TOPBAR */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}

.glass{
  background:var(--glass);
  border:1px solid var(--border);
  backdrop-filter:blur(18px);
  border-radius:18px;
  padding:16px 20px;
}
.glass-panel{
background:var(--glass);
  border:1px solid var(--border);
  backdrop-filter:blur(18px);
  border-radius:18px;
  padding:16px 20px;
}
.glass-dept{
background:var(--glass);
  border:1px solid var(--border);
  backdrop-filter:blur(18px);
  border-radius:18px;
  padding:16px 20px;
}
/* KPI GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-bottom:30px;
}

/* KPI */
.kpi{
  padding:24px;
  text-align:center;
}

.kpi i{
  font-size:28px;
  color:var(--cyan);
}

.stat-value{
  font-size:36px;
  font-weight:800;
  margin:8px 0;
}

/* EFFECTS */
.lift{
  transition:.45s;
}
.lift:hover{
  transform:translateY(-8px);
  box-shadow:0 0 40px #4f9cff44;
}

/* BUTTON */
.btn-glow{
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  text-decoration:none;
}

.btn-glow.danger{
  background:linear-gradient(135deg,#ef4444,#dc2626);
}

/* ANIMATION */
.fade-in{
  animation:fade .8s ease both;
}
@keyframes fade{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1}
}
/* WALL BACKGROUND FULL SCREEN */
.wall-bg {
  position: fixed;
  inset: 0;
  z-index: -1; /* behind everything */
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-auto-rows: 40px;
  gap: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #005cccff, #cb4000ff); /* base gradient */
}

/* DYNAMIC BLOCKS */
.wall-bg span {
  border: 1px solid rgba(255, 255, 255, 0.3); /* subtle white border */
  background: linear-gradient(45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05));
  display: block;
  opacity: 0.8;
  animation: floatWall 8s ease-in-out infinite alternate,
             colorShift 12s linear infinite;
}

/* FLOAT ANIMATION */
@keyframes floatWall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(1px, -2px) rotate(1deg); }
  50%  { transform: translate(-1px, 1px) rotate(-1deg); }
  75%  { transform: translate(2px, -1px) rotate(0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* GRADIENT COLOR SHIFT */
@keyframes colorShift {
  0%   { background: linear-gradient(45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05)); }
  25%  { background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(77,171,247,0.1)); }
  50%  { background: linear-gradient(45deg, rgba(255,146,43,0.1), rgba(0,0,0,0.05)); }
  75%  { background: linear-gradient(45deg, rgba(77,171,247,0.1), rgba(255,255,255,0.1)); }
  100% { background: linear-gradient(45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05)); }
}
.btn-primary,
.glass-btn{
  background: linear-gradient(135deg, #02b6fdff, #0080ffff);
  border: none;
  color: #fff;
  
  padding: 8px 18px;
  font-weight: 600;
  letter-spacing: .3px;
  box-shadow: 0 8px 25px rgba(79,156,255,.35);
  transition: all .35s ease;
}

.btn-primary:hover,
.glass-btn:hover{
  background: linear-gradient(135deg, #0080ffff, #02b6fdff);
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(139,92,246,.55);
  color: #fff;
}
.btn-danger,
.btn-glow.danger{
  background: linear-gradient(135deg, #ff7b00ff, #ff3700ff);
  border: none;
  color: #fff;
  
  padding: 8px 18px;
  font-weight: 600;
  box-shadow: 0 8px 25px rgba(239,68,68,.35);
  transition: all .35s ease;
}

.btn-danger:hover,
.btn-glow.danger:hover{
  background: linear-gradient(135deg, #ff3700ff , #ff7b00ff);
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(239,68,68,.6);
  color: #fff;
}
.icon-gradient{
  background: linear-gradient(135deg, #ff3700ff, #ff7b00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.icon-gradient2{
  background: linear-gradient(135deg, #0080ffff, #02b6fdff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}



</style>
</head>

<body>
   
<div class="wall-bg"></div>

<!-- APP WRAPPER -->
<div class="app-shell">

  <!-- SIDEBAR -->
  <aside class="sidebar">
    <div class="logo">
      <i class="fa-solid fa-building-user"></i>
      <span>Jillion</span>
    </div>

    <nav class="menu">
      <a class="active"><i class="fa fa-grid"></i> Dashboard</a>
      <a><i class="fa fa-user-tie"></i> Managers</a>
      <a><i class="fa fa-users"></i> Employees</a>
      <a><i class="fa fa-calendar-check"></i> Attendance</a>
      <a><i class="fa fa-plane"></i> Leaves</a>
      <a><i class="fa fa-sliders"></i> Controls</a>
    </nav>
  </aside>

  <!-- MAIN -->
  <main class="main-content">

    <!-- TOP NAV -->
    <header class="topbar glass">
      <h2>HR Command Center</h2>

      <div class="top-actions">
        <span class="user-pill">
          <i class="fa fa-user-shield"></i>
          <?= htmlspecialchars($_SESSION['hr_name']) ?>
        </span>
        <a href="../auth/logout.php" class="btn-glow danger">Logout</a>
      </div>
    </header>

    <!-- DASHBOARD GRID -->
    <section class="grid glass fade-in">

      <!-- KPI CARD -->
      <div class="kpi glass lift">
        <i class="fa fa-user-tie icon-gradient"></i>
        <div class="stat-value"><?= $total_managers ?></div>
        <small>Total Managers</small>
      </div>

      <div class="kpi glass lift">
        <i class="fa fa-users icon-gradient2"></i>
        <div class="stat-value"><?= $total_employees ?></div>
        <small>Total Employees</small>
      </div>

    </section>

    <!-- YOUR EXISTING PANELS -->
    <!-- JUST ADD CLASS="glass panel lift" -->
    <!-- NO PHP CHANGE -->

<!-- DEPARTMENT ATTENDANCE -->
<div class="panel glass-panel p-4 mb-4 fade-up">

  <div class="section-title mb-3">
    <i class="fa-solid fa-user-tie icon-gradient"></i>
    Managers Attendance
  </div>

  <div class="row g-3">
    <div class="col-md-4">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-user-tie icon-gradient"></i>
        <h6 class="mt-2">Managers</h6>

        <a href="manager_attendance_requests.php"
           class="btn btn-danger btn-sm mt-2 glass-btn">
          Review Attendance
        </a>
      </div>
    </div>
  </div>

  <hr class="glass-divider my-4">

  <div class="section-title mb-3">
    <i class="fa-solid fa-calendar-check icon-gradient2"></i>
    Department Attendance
  </div>

  <div class="row g-3">

    <!-- SALES -->
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-chart-line icon-gradient2"></i>
        <h6 class="mt-2">Sales</h6>
        <a href="sales_attendance.php"
           class="btn btn-primary btn-sm mt-2 glass-btn">
          View Attendance
        </a>
      </div>
    </div>

    <!-- DESIGN -->
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-pen-ruler icon-gradient2"></i>
        <h6 class="mt-2">Design</h6>
        <a href="design_attendance_requests.php"
           class="btn btn-primary btn-sm mt-2 glass-btn">
          View Attendance
        </a>
      </div>
    </div>

    <!-- DEVELOPMENT -->
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-code icon-gradient2"></i>
        <h6 class="mt-2">Development</h6>
        <a href="development_attendance_requests.php"
           class="btn btn-primary btn-sm mt-2 glass-btn">
          View Attendance
        </a>
      </div>
    </div>

    <!-- MARKETING -->
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-bullhorn icon-gradient2"></i>
        <h6 class="mt-2">Marketing</h6>
        <a href="development_attendance_requests.php"
           class="btn btn-primary btn-sm mt-2 glass-btn">
          View Attendance
        </a>
      </div>
    </div>

  </div>
</div>


<!-- DEPARTMENT LEAVES -->
 

    <div class="panel glass-panel p-4 mb-4 fade-up">
    <div class="section-title mb-3">
    <i class="fa-solid fa-user-tie icon-gradient"></i>
    Managers Leave Approvals
  </div>
   <div class="row g-3">

    <!-- MANAGERS -->
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-user-tie icon-gradient"></i>
        <h6 class="mt-2">Managers</h6>
        <p class=" small">Pending approvals</p>
        <span class="badge bg-danger"><?= $total_pending ?></span><br>
        <a href="hr_manager_leaves.php" class="btn btn-danger btn-sm mt-2">
          Review
        </a>
      </div>
    </div>
</div>
<hr>
  <div class="section-title">
   <i class="fa-solid fa-calendar-check icon-gradient2"></i>
    Department Leave Approvals
  </div>

  <div class="row g-3">


    <!-- SALES -->
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-chart-line icon-gradient2"></i>
        <h6 class="mt-2">Sales</h6>
        <p class=" small">Manager approved</p>
        <span class="badge bg-danger"><?= $total_pending_leaves ?></span><br>
        <a href="leave_approvals.php" class="btn btn-primary btn-sm mt-2">
          Review
        </a>
      </div>
    </div>

    <!-- DESIGN -->
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-pen-ruler icon-gradient2"></i>
        <h6 class="mt-2">Design</h6>
        <p class=" small">Manager approved</p>
        <span class="badge bg-danger"><?= $total_pending_leaves_design ?></span><br>
        <a href="design_leave_approvals.php" class="btn btn-primary btn-sm mt-2">
          Review
        </a>
      </div>
    </div>

    <!-- DEVELOPMENT -->
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-code icon-gradient2"></i>
        <h6 class="mt-2">Development</h6>
        <p class=" small">Manager approved</p>
        <span class="badge bg-danger"><?= $total_pending_leaves_development ?></span><br>
        <a href="development_leave_approvals.php" class="btn btn-primary btn-sm mt-2">
          Review
        </a>
      </div>
    </div>

    <!-- MARKETING -->
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-bullhorn icon-gradient2"></i>
        <h6 class="mt-2">Marketing</h6>
        <p class=" small">Manager approved</p>
        <span class="badge bg-danger"><?= $total_pending_leaves_development ?></span><br>
        <a href="development_leave_approvals.php" class="btn btn-primary btn-sm mt-2">
          Review
        </a>
      </div>
    </div>

  </div>
</div>

<!-- ATTENDANCE REQUESTS -->
<div class="panel glass-panel p-4 mb-4">
    <div class="section-title">
    <i class="fa-solid fa-user-tie icon-gradient"></i>
    Attendance Requests
  </div>

  <div class="row g-3">
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-user-tie icon-gradient"></i>
        <h6 class="mt-2">Managers</h6>
        <span class="badge bg-danger"><?= $requests ?></span><br>
        <a href="manager_attendance_requests.php" class="btn btn-danger btn-sm mt-2">Review</a>
      </div>
    </div>
    <hr>
  <div class="section-title">
    <i class="fa-solid fa-calendar-check icon-gradient2"></i>
    Attendance Requests
  </div>

  

    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-chart-line icon-gradient2"></i>
        <h6 class="mt-2">Sales</h6>
        <span class="badge bg-danger"><?= $pending_att_req ?></span><br>
        <a href="attendance_requests.php" class="btn btn-primary btn-sm mt-2">Review</a>
      </div>
    </div>

    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-pen-ruler icon-gradient2"></i>
        <h6 class="mt-2">Design</h6>
        <span class="badge bg-danger"><?= $pending_att_req2 ?></span><br>
        <a href="design_attendance_requests.php" class="btn btn-primary btn-sm mt-2">Review</a>
      </div>
    </div>

    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-code icon-gradient2"></i>
        <h6 class="mt-2">Development</h6>
        <span class="badge bg-danger"><?= $pending_att_req3 ?></span><br>
        <a href="development_attendance_requests.php" class="btn btn-primary btn-sm mt-2">Review</a>
      </div>
    </div>

    <!-- MARKETING -->
    <div class="col-md-3">
      <div class="dept-card glass-dept text-center">
        <i class="fa-solid fa-bullhorn icon-gradient2"></i>
        <h6 class="mt-2">Marketing</h6>
        <span class="badge bg-danger"><?= $pending_att_req3 ?></span><br>
        <a href="development_attendance_requests.php" class="btn btn-primary btn-sm mt-2">Review</a>
      </div>
    </div>
  </div>
</div>

<!-- HR CONTROLS -->
<div class="panel glass-panel p-4">
  <div class="section-title">
    <i class="fa-solid fa-sliders text-warning"></i>
    HR Controls
  </div>
<br>
  <div class="row g-3">
    

    <div class="col-md-4">
      <div class="dept-card glass-dept">
        <h6>Employee Entry Time</h6>
        <p class=" small">Shift & timings</p>
        <a href="set_emp_entry_time.php" class="btn btn-primary btn-sm">Configure</a>
      </div>
    </div>

    <div class="col-md-4">
      <div class="dept-card glass-dept">
        <h6>Holidays</h6>
        <p class=" small">Company calendar</p>
        <a href="mark_holidays.php" class="btn btn-primary btn-sm">Manage</a>
      </div>
    </div>
  </div>
</div>

</div>

  </main>
</div>

<script src="assets/js/vip-ui.js"></script>
</body>

<script>
// COUNT UP
document.querySelectorAll('.stat-value').forEach(el=>{
  let t=+el.innerText,c=0;
  el.innerText=0;
  let i=setInterval(()=>{
    c+=Math.ceil(t/40);
    if(c>=t){el.innerText=t;clearInterval(i)}
    else el.innerText=c;
  },25);
});
</script>

<script>
// DYNAMICALLY CREATE BLOCKS
// DYNAMICALLY CREATE BLOCKS
const wall = document.querySelector('.wall-bg');
const cols = 20;
const rows = Math.ceil(window.innerHeight / 40);
const totalBlocks = cols * rows;

for (let i = 0; i < totalBlocks; i++) {
  const block = document.createElement('span');
  // random animation duration for natural movement
  block.style.animationDuration = (6 + Math.random() * 6) + 's, ' + (10 + Math.random() * 8) + 's';
  wall.appendChild(block);
}
// smooth entrance
document.querySelectorAll('.lift').forEach((el,i)=>{
  el.style.animationDelay = (i*80)+'ms';
});

// keep your existing count-up JS UNCHANGED

</script>

</body>
</html>
