<?php
$profileUrl = '';
if (($_SESSION['usertype'] ?? '') === 'admins') {
    $profileUrl = 'index.php?t=includes/master&p=admin.php&profile=1';
} elseif (($_SESSION['usertype'] ?? '') === 'surveyor' && !empty($_SESSION['userid'])) {
    $profileUrl = 'index.php?t=includes/surveyor&p=surveyor_edit.php&profile=1&id=' . urlencode((string)$_SESSION['userid']);
}
?>
<nav id="mainNav" class="navbar navbar-expand-lg navbar-dark fixed-top">
    <!-- SideNav slide-out button -->
    <div class="float-start">
        <a href="javascript:void(0)" data-mdb-ripple-init data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1"
            class="button-collapse text-light" aria-controls="#sidenav-1" aria-haspopup="true"><i
                class="fad fa-bars fa-2x"></i></a>
    </div>
    <a href="index.php" class="site_title"><span><img src="<?= ROOT_URL ?>/images/logoSm.png"
                class="img-fluid flex-center"></span></a>
    <div class="breadcrumb-container flex-grow-1 ms-2 me-2">
        <nav aria-label="breadcrumb" class="text-light">
            <ol id="navBox" class="breadcrumb text-light mb-0">
                <!-- Breadcrumb items here -->
            </ol>
        </nav>
    </div>
    <?php if ($_REQUEST['p'] == 'formgen.php') { ?>
        <ul class="nav nav-flex-icons ms-auto me-auto" id="statusLights" aria-label="Inspection status">
            <li class="nav-item d-flex align-items-center flex-nowrap gap-2">
                <span class="iLight dot green" aria-label="OK"></span>
                <span class="iLight dot amber" aria-label="Warning"></span>
                <span class="iLight dot red" aria-label="Alert"></span>
            </li>
        </ul>
    <?php } ?>
    <ul id="userNav" class="nav navbar-nav nav-flex-icons ms-auto">
        <!-- Ticket Dropdown Button -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="ticketUpdateDropdown" role="button" data-mdb-dropdown-init
                aria-expanded="false">
                <i class="fad fa-ticket"></i>
                <span class="badge rounded-pill badge-notification bg-info d-none" id="ticketUpdateBadge">
                    <span id="ticketUpdateCount">0</span>
                </span>
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="ticketUpdateDropdown">
                <li class="dropdown-item text-center">No new ticket updates</li>
                <li class="dropdown-item text-center"><a class="text-success"
                        href=" index.php?t=includes/support&p=support_tickets.php">New ticket</a></li>
            </ul>
        </li>
        <?php if ($_SESSION['usertype'] == 'admins' || ($_SESSION['usertype'] == 'surveyor' && ($_SESSION['access'] ?? 0) == 3)) { ?>
            <!-- Notification Dropdown Button -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-mdb-dropdown-init
                    aria-expanded="false">
                    <i class="fad fa-bell"></i>
                    <span class="badge rounded-pill badge-notification bg-danger" id="notificationCount">0</span>
                </a>

                <!-- Dropdown Menu for Notifications -->
                <ul class="dropdown-menu dropdown-menu-end notification-dropdown" aria-labelledby="notificationDropdown"
                    id="notificationDropdownMenu">
                    <!-- Messages will be dynamically loaded here via JavaScript -->
                    <li class="dropdown-item text-center">No notifications</li>
                </ul>
            </li>
        <?php } ?>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-mdb-dropdown-init href="javascript:void(0)"
                id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false">
                <span class="light-text fs-6 hidden-md-down"><?= strtoupper($_SESSION['usertype']) ?></span>
                <i class="fad fa-user mx-2"></i>
                <span class="hidden-md-down"><?= $_SESSION['user'] ?></span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="javascript:;">Help</a>
                <?php if ($profileUrl !== '') { ?>
                <a class="dropdown-item" href="<?= $profileUrl ?>"><i class="fad fa-id-card pull-right"></i> Profile</a>
                <?php } ?>
                <a class="dropdown-item" href="index.php?op=logout"><i class="fad fa-sign-out pull-right"></i> Log
                    Out</a>
            </div>
        </li>
    </ul>
</nav>


<script>
    <?php
    if ($_SESSION['usertype'] == 'admins') { ?>
        //document.documentElement.style.setProperty('--primary-color', '#4B515D');

    <?php }
    if ($_SESSION['usertype'] == 'contractor') { ?>
        document.documentElement.style.setProperty('--primary-color', '#00695c');

    <?php }
    if ($_SESSION['usertype'] == 'surveyor') { ?>
        document.documentElement.style.setProperty('--primary-color', '#4B515D');

    <?php } ?>
</script>
<style>
    /* Status lights: keep in one line and compact on small screens */
    #statusLights {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #statusLights .iLight {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    #statusLights .nav-item {
        padding: 0;
    }

    @media (max-width: 576px) {
        #statusLights .iLight {
            width: 8px;
            height: 8px;
        }

        #statusLights {
            margin-left: .25rem;
            margin-right: .25rem;
        }
    }

    /* Adjust for sender name */
    .notification-dropdown .dropdown-item strong {
        color: #000;
        /* Make the sender's name bold */
        font-weight: bold;
        margin-bottom: 5px;
    }

    /* Ensure proper wrapping and spacing */
    .notification-dropdown .dropdown-item {
        word-wrap: break-word;
        white-space: normal;
        overflow-wrap: break-word;
        margin-bottom: 10px;
        /* Add space between messages */
    }

    /* Make dropdown wider and allow it to scroll */
    .notification-dropdown {
        width: 650px;
        /* Increase the width of the dropdown */
        max-height: 400px;
        /* Set a max height and enable scrolling */
        overflow-y: auto;
        /* Allow vertical scrolling */
        white-space: normal;
        /* Allow text to wrap */
    }

    /* Ensure text inside the dropdown wraps properly */
    .notification-dropdown .dropdown-item {
        word-wrap: break-word;
        white-space: normal;
        overflow-wrap: break-word;
    }

    /* Adjust the buttons inside the dropdown */
    .notification-dropdown .btn {
        font-size: 12px;
        /* Adjust the size of buttons to fit */
        margin-right: 5px;
    }

    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.2rem 0.5rem;
        /* Reduced padding */
        flex-wrap: nowrap;
        /* Prevent wrapping */
        position: fixed;
    }

    .button-collapse {
        margin: 0;
        /* Remove margin for the hamburger icon */
        padding: 0;
        /* Remove padding for the hamburger icon */
    }

    .site_title {
        display: flex;
        align-items: center;
        margin-left: 0.2rem;
        /* Minimal margin */
    }

    .site_title img {
        max-height: 30px;
        /* Reduced height */
        width: auto;
        /* Ensure the logo maintains its aspect ratio */
        margin-left: 0.2rem;
        /* Reduced margin */
    }

    .breadcrumb-container {
        flex-grow: 1;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    #navBox {
        display: flex;
        align-items: center;
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        /* Ensure the breadcrumb takes the available space */
    }

    #userNav {
        display: flex;
        align-items: center;
    }

    @media (max-width: 1139px) {
        .site_title img {
            max-height: 25px;
            /* Further reduced height for small screens */
            width: auto;
            /* Ensure the logo maintains its aspect ratio */
            margin-left: 0.1rem;
            /* Further reduced margin */
        }

        #navBox {
            font-size: 0.7rem;
        }

        #userNav .text-muted,
        #userNav .hidden-md-down {
            display: none !important;
            /* Hide text on small screens */
        }

        .navbar .button-collapse {
            margin-left: 0;
            /* Remove margin for the hamburger icon */
            padding-left: 0;
            /* Remove padding for the hamburger icon */
        }

        .navbar {
            padding-top: 0.2rem;
            /* Adjust padding to make space for the userNav */
        }
    }

    #notificationDropdownMenu li:not(.bg-danger):hover {
        background-color: #fff !important;
        color: #333 !important;
    }
</style>
