<?php
/**
 * layout_header.php
 * Include this once you're done with all permission checks / POST
 * handling / redirects for the page, right before you start echoing
 * page content. It prints HTML, so nothing that calls header() can
 * come after it.
 *
 * Expects: session already started, $conn (mysqli) connected via
 * config.php, and includes/auth_init.php already required (this file
 * requires it too via require_once, so it's safe either way).
 */

require_once __DIR__ . '/auth_init.php';

$pageTitle = $pageTitle ?? 'Payroll';
$pageSubtitle = $pageSubtitle ?? 'Payroll Module';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= h($pageTitle); ?> - HR Engine</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200..1000&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { theme: { extend: { fontFamily: { sans: ['Mulish', 'sans-serif'] } } } }
    </script>
    <link rel="stylesheet" href="../components/sidebar.css">
    <style>#sidebar { flex-shrink: 0; }</style>
</head>
<body class="bg-slate-50 min-h-screen text-slate-800 antialiased font-sans">
<div class="flex">
    <?php include __DIR__ . '/../../components/sidebar.php'; ?>
    <div id="sidebar-overlay" class="fixed inset-0 bg-slate-950/40 hidden z-40 transition-opacity duration-300 md:hidden" onclick="toggleSidebar()"></div>

    <div id="main-content" class="flex-1 min-w-0 md:pl-60 transition-all duration-300 min-h-screen flex flex-col">
    <div id="zoom-wrapper" class="flex-1 min-w-0 flex flex-col" style="zoom: 90%;">
        <header class="sticky top-0 bg-white/80 backdrop-blur-md border-b border-slate-200/60 h-14 flex items-center justify-between px-4 sm:px-6 z-30 shadow-xs">
            <div class="flex items-center gap-3">
                <button onclick="toggleSidebar()" class="p-1.5 rounded-lg text-slate-500 hover:bg-slate-100 transition active:scale-95 flex items-center justify-center">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
                <div>
                    <h1 class="text-sm font-black tracking-tight text-slate-900"><?= h($pageTitle); ?></h1>
                    <p class="text-[10px] text-slate-400 font-medium"><?= h($pageSubtitle); ?></p>
                </div>
            </div>
            <div class="flex items-center gap-4">
                <div class="hidden sm:flex flex-col text-right">
                    <span class="text-[11px] font-extrabold text-slate-900 leading-tight"><?= h($username); ?></span>
                    <span class="text-[9px] text-slate-400 uppercase font-black tracking-wider leading-none mt-0.5"><?= h($role ?: 'Staff'); ?></span>
                </div>
                <div class="w-7 h-7 bg-slate-100 border border-slate-200 rounded-lg flex items-center justify-center font-black text-xs text-slate-600 select-none uppercase">
                    <?= strtoupper(substr($username, 0, 1)); ?>
                </div>
            </div>
        </header>
        <main class="flex-1 min-w-0 p-4 sm:p-6 max-w-7xl w-full mx-auto space-y-4">
        <?php if (!empty($_SESSION['flash_success'])): ?>
            <div class="bg-emerald-50 border border-emerald-200 text-emerald-800 p-3.5 rounded-xl text-xs font-semibold shadow-xs flex items-center gap-2.5">
                <span>🎉</span>
                <span><?= h($_SESSION['flash_success']); unset($_SESSION['flash_success']); ?></span>
            </div>
        <?php endif; ?>
        <?php if (!empty($_SESSION['flash_error'])): ?>
            <div class="bg-rose-50 border border-rose-200 text-rose-800 p-3.5 rounded-xl text-xs font-semibold shadow-xs flex items-center gap-2.5">
                <span>⚠️</span>
                <span><?= h($_SESSION['flash_error']); unset($_SESSION['flash_error']); ?></span>
            </div>
        <?php endif; ?>