<!-- includes/header.php -->
<?php if (!isset($pageTitle)) {
    $pageTitle = 'Home Store POS';
} ?>
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Thone Store/<?= htmlspecialchars($pageTitle) ?></title>
    <!-- Favicon (optional) -->
    <link rel="icon" href="ThoneThoneStoreLogo.ico" type="image/png">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../assets/css/custom.css" rel="stylesheet">

    <style>
        .navbar-modern {
            background: #ffffff;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
            padding: 12px 0;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.3rem;
            color: #0d6efd !important;
        }

        .nav-link {
            font-weight: 500;
            padding: 10px 14px !important;
            border-radius: 8px;
            transition: 0.2s;
        }

        .nav-link:hover {
            background: #f3f5ff;
            color: #0d6efd !important;
        }

        .nav-link.active {
            background: #0d6efd;
            color: #fff !important;
        }
    </style>
</head>

<body>
    <!-- NOTE: added navbar-light so the toggler icon shows on white background -->
    <nav class="navbar navbar-expand-lg navbar-modern navbar-light mb-4">
        <div class="container">

            <a class="navbar-brand" href="index.php">
                <i class="bi bi-shop"></i> Home Store POS
            </a>

            <!-- improved toggler: aria attributes + data-bs-toggle -->
            <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#mainNav"
                aria-controls="mainNav"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav ms-auto">

                    <li class="nav-item">
                        <a class="nav-link <?= ($pageTitle == 'Sales') ? 'active' : '' ?>" href="sales.php">
                            <i class="bi bi-cash-coin"></i> Sales
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?= ($pageTitle == 'Products') ? 'active' : '' ?>" href="products.php">
                            <i class="bi bi-box-seam"></i> Products
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link <?= ($pageTitle == 'Product Restock') ? 'active' : '' ?>" href="restock.php">
                            <i class="bi bi-box-arrow-in-down"></i> Restock
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link <?= ($pageTitle == 'Reports') ? 'active' : '' ?>" href="reports.php">
                            <i class="bi bi-graph-up-arrow"></i> Reports
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link <?= ($pageTitle == 'Dashboard') ? 'active' : '' ?>" href="index.php">
                            <i class="bi bi-speedometer2"></i> Dashboard
                        </a>
                    </li>

                    <?php if (isset($_SESSION['user_id'])): ?>
                        <a href="./actions/logout.php" class="btn btn-danger btn-sm">Logout</a>
                    <?php endif; ?>

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

    <div class="container">
        <!-- Bootstrap JS (required for collapse, dropdowns, etc.) -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>