<?php
/**
 * ============================================================================
 *includes/bottom-nav.php (Mobile Bottom Navigation)
 * ============================================================================
 */
?>
<!-- Mobile Bottom Navigation -->
<nav class="navbar fixed-bottom bg-white border-top d-lg-none" style="z-index: 1030;">
    <div class="container-fluid">
        <div class="row w-100 text-center g-0">
            <div class="col">
                <a href="<?php echo APP_URL; ?>/dashboard/" class="nav-link py-2">
                    <i class="bi bi-house-door fs-5"></i>
                    <div style="font-size: 0.7rem;">Home</div>
                </a>
            </div>
            <div class="col">
                <a href="<?php echo APP_URL; ?>/prices/" class="nav-link py-2">
                    <i class="bi bi-graph-up fs-5"></i>
                    <div style="font-size: 0.7rem;">Prices</div>
                </a>
            </div>
            <div class="col">
                <a href="<?php echo APP_URL; ?>/marketplace/" class="nav-link py-2">
                    <i class="bi bi-shop fs-5"></i>
                    <div style="font-size: 0.7rem;">Market</div>
                </a>
            </div>
            <div class="col">
                <a href="<?php echo APP_URL; ?>/chat/" class="nav-link py-2 position-relative">
                    <i class="bi bi-chat-dots fs-5"></i>
                    <span class="position-absolute top-0 start-50 translate-middle badge rounded-pill bg-danger" style="font-size: 0.6rem;" id="mobileUnreadCount"></span>
                    <div style="font-size: 0.7rem;">Chat</div>
                </a>
            </div>
            <div class="col">
                <a href="<?php echo APP_URL; ?>/profile/" class="nav-link py-2">
                    <i class="bi bi-person fs-5"></i>
                    <div style="font-size: 0.7rem;">Profile</div>
                </a>
            </div>
        </div>
    </div>
</nav>

<!-- padding to prevent bottom nav overlap on mobile -->
<div class="d-lg-none" style="height: 70px;"></div>