<?php
/**
 * Shared chrome for finance/ pages — head, sidebar, topbar, footer.
 * Assumes config.php is already loaded and requireModule('finance_suite') passed.
 */

if (!function_exists('finance_page_header')) {

    function finance_page_header(string $title, string $active = ''): void
    {
        $base = defined('BASE_URL') ? rtrim(BASE_URL, '/') : '';
        $tabs = [
            'index'     => ['finance/index.php',    'fa-gauge-high',      'Overview'],
            'requests'  => ['finance/requests.php', 'fa-file-invoice',    'Requests'],
            'approvals' => ['finance/approvals.php','fa-clipboard-check', 'Approvals'],
            'events'    => ['finance/events.php',   'fa-bus',             'Events'],
            'settings'  => ['finance/settings.php', 'fa-sliders',         'Workflow'],
        ];
        ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($title) ?> — EduTrack</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .fin-tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.25rem; }
        .fin-tabs a { padding:.5rem .95rem; border-radius:10px; font-size:.85rem; font-weight:600;
                      color:#475569; background:#f1f5f9; text-decoration:none; transition:.15s; }
        .fin-tabs a:hover { background:#e2e8f0; }
        .fin-tabs a.active { background:#16a34a; color:#fff; }
        .fin-card { border:1px solid #e5e7eb; border-radius:14px; background:#fff; }
        .fin-stat { border:1px solid #e5e7eb; border-radius:14px; padding:1.1rem 1.25rem; background:#fff; height:100%; }
        .fin-stat .lbl { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; }
        .fin-stat .val { font-size:1.5rem; font-weight:700; color:#0f172a; }
        .status-pill { font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:20px; }
        .st-pending  { background:#fef9c3; color:#854d0e; }
        .st-approved { background:#dcfce7; color:#166534; }
        .st-rejected { background:#fee2e2; color:#991b1b; }
        .st-disbursed{ background:#dbeafe; color:#1e40af; }
        .st-planning { background:#f1f5f9; color:#475569; }
        .st-active   { background:#dcfce7; color:#166534; }
        .st-closed   { background:#e2e8f0; color:#334155; }
    </style>
</head>
<body>
<div class="wrapper">
    <nav id="sidebar" class="sidebar">
        <?= buildSidebar('finance/' . $active . '.php') ?>
    </nav>
    <div class="main-content">
        <header class="header">
            <button class="btn-toggle" id="sidebarToggle"><i class="fas fa-bars"></i></button>
            <div class="header-right">
                <span class="text-muted"><i class="fas fa-user-circle me-2"></i><?= htmlspecialchars((string)($_SESSION['full_name'] ?? '')) ?></span>
            </div>
        </header>
        <main class="content">
            <div class="content-header">
                <div class="d-flex align-items-center gap-3">
                    <div style="background:linear-gradient(135deg,#16a34a,#15803d);border-radius:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;">
                        <i class="fas fa-sack-dollar text-white"></i>
                    </div>
                    <div>
                        <h2 class="mb-0"><?= htmlspecialchars($title) ?></h2>
                        <p class="text-muted mb-0 small">Finance &amp; Procurement Suite</p>
                    </div>
                </div>
            </div>
            <div class="fin-tabs">
                <?php foreach ($tabs as $key => [$path, $icon, $lbl]): ?>
                    <a href="<?= $base ?>/<?= $path ?>" class="<?= $key === $active ? 'active' : '' ?>">
                        <i class="fas <?= $icon ?> me-1"></i><?= $lbl ?>
                    </a>
                <?php endforeach; ?>
            </div>
        <?php
    }

    function finance_page_footer(): void
    {
        ?>
        </main>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>
        <?php
    }
}
