<?php

declare(strict_types=1);

$pageTitle = $title ?? 'Dashboard';
$currentPath = parse_url(
    $_SERVER['REQUEST_URI'] ?? '',
    PHP_URL_PATH
);

function navActive(
    string $currentPath,
    string $path
): string {
    return str_contains(
        $currentPath,
        $path
    ) ? 'active' : '';
}

?>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1">

    <title>
        <?= htmlspecialchars(
            $pageTitle,
            ENT_QUOTES,
            'UTF-8'
        ) ?>
    </title>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
        rel="stylesheet">

    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <style>

        body {
            background: #f5f6f8;
        }

        .sidebar {
            width: 260px;
            min-height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background: #212529;
            z-index: 1000;
        }

        .sidebar-brand {
            min-height: 72px;
            display: flex;
            align-items: center;
            padding: 16px 20px;
            color: #ffffff;
            border-bottom:
                1px solid rgba(255,255,255,.1);
        }

        .sidebar .nav-link {
            color: rgba(255,255,255,.75);
            padding: 12px 20px;
            margin: 3px 10px;
            border-radius: 6px;
        }

        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            color: #ffffff;
            background: rgba(255,255,255,.12);
        }

        .sidebar .nav-link i {
            width: 24px;
        }

        .main-wrapper {
            margin-left: 260px;
            min-height: 100vh;
        }

        .topbar {
            height: 72px;
            background: #ffffff;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px;
        }

        .main-content {
            padding: 30px;
        }

        .stat-card {
            border: 0;
            border-radius: 10px;
        }

        @media (max-width: 991px) {

            .sidebar {
                display: none;
            }

            .main-wrapper {
                margin-left: 0;
            }
        }

    </style>

</head>

<body>

<aside class="sidebar">

    <div class="sidebar-brand">

        <div>

            <strong>
                NPS Database Administration
            </strong>

            <div class="small text-secondary">
                Enterprise Platform
            </div>

        </div>

    </div>

    <nav class="nav flex-column mt-3">

        <a
            class="nav-link <?= navActive(
                $currentPath,
                '/dashboard'
            ) ?>"
            href="/public/dashboard">

            <i class="bi bi-speedometer2"></i>

            Dashboard

        </a>

        <a
            class="nav-link <?= navActive(
                $currentPath,
                '/users'
            ) ?>"
            href="/public/users">

            <i class="bi bi-people"></i>

            Users

        </a>

        <a
            class="nav-link <?= navActive(
                $currentPath,
                '/roles'
            ) ?>"
            href="/public/roles">

            <i class="bi bi-person-badge"></i>

            Roles

        </a>

        <a
            class="nav-link <?= navActive(
                $currentPath,
                '/permissions'
            ) ?>"
            href="/public/permissions">

            <i class="bi bi-shield-lock"></i>

            Permissions

        </a>
    <a
        href="/public/organizations"
        class="nav-link">

        <i class="bi bi-building me-2"></i>

        Organizations

    </a>
        <a
        href="/public/branches"
        class="nav-link">

        <i class="bi bi-diagram-3 me-2"></i>

        Branches

    </a>
        <a
        href="/public/departments"
        class="nav-link">

        <i class="bi bi-diagram-2 me-2"></i>

        Departments
<a
        href="/public/positions"
        class="nav-link">

        <i class="bi bi-person-workspace me-2"></i>

        Positions

    </a>
       <a
        href="/public/ranks"
        class="nav-link">

        <i class="bi bi-chevron-double-up me-2"></i>

        Ranks

    </a>
        <a
        href="/public/states"
        class="nav-link">

        <i class="bi bi-geo-alt me-2"></i>

        States & Areas

    </a>
        <a
        href="/public/counties"
        class="nav-link">

        <i class="bi bi-map me-2"></i>

        Counties

    </a>
     <a
        href="/public/payams"
        class="nav-link">

        <i class="bi bi-geo me-2"></i>

        Payams

    </a>
    <a
        href="/public/employees"
        class="nav-link">

        <i class="bi bi-people me-2"></i>

        NPS Employees

    </a>
        <a
        href="/public/dynamic-forms"
        class="nav-link">

        <i class="bi bi-people me-2"></i>

        Create Dynamic Form

    </a>
    </a>
        <hr class="border-secondary mx-3">

        <a
            class="nav-link"
            href="/public/logout">

            <i class="bi bi-box-arrow-right"></i>

            Logout

        </a>

    </nav>

</aside>


<div class="main-wrapper">

    <header class="topbar">

        <div>

            <h5 class="mb-0">

                <?= htmlspecialchars(
                    $pageTitle,
                    ENT_QUOTES,
                    'UTF-8'
                ) ?>

            </h5>

        </div>

        <div class="dropdown">

            <button
                class="btn btn-light dropdown-toggle"
                data-bs-toggle="dropdown">

                <i class="bi bi-person-circle me-1"></i>

                <?= htmlspecialchars(
                    $_SESSION['full_name']
                        ?? $_SESSION['username']
                        ?? 'User',
                    ENT_QUOTES,
                    'UTF-8'
                ) ?>

            </button>

            <ul class="dropdown-menu dropdown-menu-end">

                <li>

                    <span class="dropdown-item-text small text-muted">

                        <?= htmlspecialchars(
                            $_SESSION['username'] ?? '',
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>

                    </span>

                </li>

                <li>
                    <hr class="dropdown-divider">
                </li>

                <li>

                    <a
                        class="dropdown-item"
                        href="/public/logout">

                        Logout

                    </a>

                </li>

            </ul>

        </div>

    </header>


    <main class="main-content">

        <?= $content ?? '' ?>

    </main>

</div>


<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js">
</script>

</body>

</html>