<?php
require_once __DIR__ . '/../config.php';
if (session_status() === PHP_SESSION_NONE) session_start();
if (!isset($_SESSION['emp_id'])) redirect(SITE_URL . '/employee/login.php');

$db = getDB();
$emp_id = $_SESSION['emp_id'];
$dept = $_SESSION['emp_department'] ?? 'Office';
$role = $_SESSION['emp_role'] ?? 'employee';

// Fetch full employee details
$emp = $db->prepare("SELECT * FROM employees WHERE id=?");
$emp->execute([$emp_id]);
$emp = $emp->fetch();

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['logout'])) {
    // Record Checkout Time
    $date = date('Y-m-d');
    $time = date('Y-m-d H:i:s');
    $db->exec("UPDATE emp_attendance SET check_out='{$time}' WHERE employee_id={$emp_id} AND date='{$date}'");
    
    unset($_SESSION['emp_id'], $_SESSION['emp_name'], $_SESSION['emp_role'], $_SESSION['emp_department'], $_SESSION['emp_code']);
    redirect(SITE_URL . '/employee/login.php');
}

$current_page = basename($_SERVER['PHP_SELF'], '.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><?= h($page_title ?? 'Employee Portal') ?> | Balimeen</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
/* Base UI */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #334155; display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: 260px; background: #0a1f4e; color: #fff; display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-brand { padding: 20px; display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.25); }
.sidebar-brand img { width: 40px; height: 40px; border-radius: 8px; background: #fff; object-fit: contain; }
.sidebar-brand h2 { font-family: 'Outfit', sans-serif; font-size: 1.2rem; color: #fff; margin: 0; }
.sidebar-brand span { font-size: .70rem; color: #94a3b8; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

.nav-links { padding: 20px 0; flex: 1; overflow-y: auto; }
.nav-section { padding: 10px 20px 5px; font-size: .75rem; text-transform: uppercase; color: #64748b; font-weight: 700; letter-spacing: 1px; }
.nav-item { padding: 10px 20px; display: flex; align-items: center; gap: 12px; color: #cbd5e1; text-decoration: none; font-size: .95rem; font-weight: 500; transition: all 0.2s; border-left: 3px solid transparent; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item.active { background: rgba(37,87,214,0.15); color: #60a5fa; border-left-color: #3b82f6; }
.nav-item i { width: 20px; text-align: center; font-size: 1.1rem; }

.sidebar-footer { padding: 20px; background: rgba(0,0,0,0.25); font-size: .85rem; color: #94a3b8; display: flex; align-items: center; gap: 12px; }
.sidebar-avatar { width: 40px; height: 40px; border-radius: 50%; background: #2557d6; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Main Content */
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.top-header { height: 70px; background: #fff; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e8f0; }
.top-header h1 { font-family: 'Outfit', sans-serif; font-size: 1.4rem; color: #0f172a; margin: 0; }
.btn-logout { background: #fef2f2; color: #ef4444; border: 1px solid #fca5a5; padding: 6px 14px; border-radius: 6px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-logout:hover { background: #fee2e2; }

/* Content Area */
.content-area { padding: 30px; overflow-y: auto; flex: 1; }
.card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 24px; border: 1px solid #e2e8f0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
</style>
</head>
<body>

<aside class="sidebar">
  <div class="sidebar-brand">
    <img src="<?= SITE_URL ?>/assets/images/logo.jpg" alt="Balimeen">
    <div>
      <h2>Balimeen</h2>
      <span>Enterprise OS</span>
    </div>
  </div>
  
  <nav class="nav-links">
    <!-- Dashboard Section -->
    <div class="nav-section">Dashboard</div>
    <a href="index.php" class="nav-item <?= $current_page==='index'?'active':'' ?>"><i class="fas fa-home"></i> Overview</a>
    <a href="tasks.php" class="nav-item <?= $current_page==='tasks'?'active':'' ?>"><i class="fas fa-tasks"></i> My Tasks</a>
    <a href="attendance.php" class="nav-item <?= $current_page==='attendance'?'active':'' ?>"><i class="fas fa-clock"></i> Attendance</a>
    <a href="leaves.php" class="nav-item <?= $current_page==='leaves'?'active':'' ?>"><i class="fas fa-calendar-alt"></i> Leave</a>
    <a href="payslips.php" class="nav-item <?= $current_page==='payslips'?'active':'' ?>"><i class="fas fa-file-invoice-dollar"></i> Salary Slip</a>
    <a href="documents.php" class="nav-item <?= $current_page==='documents'?'active':'' ?>"><i class="fas fa-folder-open"></i> Documents</a>
    <a href="training.php" class="nav-item <?= $current_page==='training'?'active':'' ?>"><i class="fas fa-graduation-cap"></i> Training</a>
    <a href="helpdesk.php" class="nav-item <?= $current_page==='helpdesk'?'active':'' ?>"><i class="fas fa-headset"></i> Support Ticket</a>

    <!-- HR Section -->
    <div class="nav-section" style="margin-top:15px;">HR Section</div>
    <a href="employees.php" class="nav-item <?= $current_page==='employees'?'active':'' ?>"><i class="fas fa-users"></i> Employee Master</a>
    <a href="verification.php" class="nav-item <?= $current_page==='verification'?'active':'' ?>"><i class="fas fa-user-check"></i> Verification Queue</a>
    <a href="payroll.php" class="nav-item <?= $current_page==='payroll'?'active':'' ?>"><i class="fas fa-money-check-alt"></i> Payroll</a>
    <a href="reports.php" class="nav-item <?= $current_page==='reports'?'active':'' ?>"><i class="fas fa-chart-bar"></i> Reports</a>
    <a href="recruitment.php" class="nav-item <?= $current_page==='recruitment'?'active':'' ?>"><i class="fas fa-briefcase"></i> Recruitment</a>

    <!-- Admin Section -->
    <div class="nav-section" style="margin-top:15px;">Admin Section</div>
    <a href="branches.php" class="nav-item <?= $current_page==='branches'?'active':'' ?>"><i class="fas fa-building"></i> Branches</a>
    <a href="roles.php" class="nav-item <?= $current_page==='roles'?'active':'' ?>"><i class="fas fa-user-shield"></i> Roles & Permissions</a>
    <a href="audit_logs.php" class="nav-item <?= $current_page==='audit_logs'?'active':'' ?>"><i class="fas fa-history"></i> Audit Logs</a>
    <a href="settings.php" class="nav-item <?= $current_page==='settings'?'active':'' ?>"><i class="fas fa-cog"></i> Settings</a>
  </nav>

  <div class="sidebar-footer">
    <div class="sidebar-avatar"><?= strtoupper(substr($emp['name'],0,1)) ?></div>
    <div>
      <strong style="color:#fff;display:block;"><?= h($emp['name']) ?></strong>
      <span><?= h($_SESSION['emp_code']) ?> | <?= h($dept) ?></span>
    </div>
  </div>
</aside>

<main class="main-content">
  <header class="top-header">
    <div style="display:flex; align-items:center; gap:20px;">
      <h1 style="margin-right:20px;"><?= h($page_title ?? 'Overview') ?></h1>
      <!-- Search -->
      <div style="position:relative;">
        <i class="fas fa-search" style="position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#94a3b8;"></i>
        <input type="text" placeholder="Search employees, docs..." style="padding:8px 12px 8px 35px; border:1px solid #e2e8f0; border-radius:6px; background:#f1f5f9; outline:none; font-size:0.85rem; width:220px;">
      </div>
      <!-- Branch Selector -->
      <select style="padding:8px 12px; border:1px solid #e2e8f0; border-radius:6px; background:#f1f5f9; outline:none; font-size:0.85rem;">
        <option>Mumbai Head Office</option>
        <option>Pune Factory</option>
        <option>Delhi Warehouse</option>
      </select>
    </div>
    
    <div style="display:flex;align-items:center;gap:20px;">
      <!-- Theme Toggle -->
      <button style="background:none; border:none; color:#64748b; font-size:1.1rem; cursor:pointer;" title="Toggle Theme"><i class="fas fa-moon"></i></button>
      
      <!-- Messages -->
      <a href="messages.php" style="position:relative;color:#64748b;font-size:1.1rem;text-decoration:none;">
        <i class="far fa-envelope"></i>
      </a>

      <!-- Notification Bell -->
      <a href="notifications.php" style="position:relative;color:#64748b;font-size:1.1rem;text-decoration:none;">
        <i class="far fa-bell"></i>
        <span style="position:absolute;top:-4px;right:-6px;background:#ef4444;color:#fff;font-size:0.6rem;padding:2px 5px;border-radius:10px;font-weight:bold;">3</span>
      </a>
      
      <!-- Profile Info -->
      <div style="display:flex;align-items:center;gap:12px;border-left:1px solid #e2e8f0;padding-left:20px;">
        <div style="text-align:right;">
          <strong style="display:block;color:#0f172a;font-size:.85rem;line-height:1.2;"><?= h($emp['name']) ?></strong>
          <span style="font-size:.7rem;color:#64748b;"><?= h($_SESSION['emp_code']) ?></span>
        </div>
        <div style="position:relative;">
          <img src="<?= SITE_URL ?>/assets/images/logo.jpg" alt="Profile" style="width:35px;height:35px;border-radius:50%;object-fit:cover;border:1px solid #e2e8f0; cursor:pointer;">
        </div>
      </div>

      <form method="POST" style="margin:0;"><button type="submit" name="logout" class="btn-logout" title="Logout"><i class="fas fa-sign-out-alt"></i></button></form>
    </div>
  </header>
  <div class="content-area">
