<?php
// Central menu definition (extend as needed, add dropdown/mega flags, etc.)
$menuItems = [
    ['id' => 'home',     'label' => 'Home',     'icon' => 'fa-house',        'href' => '#'],
    [
        'id' => 'daily', 
        'label' => 'Daily', 
        'icon' => 'fa-chart-bar', 
        'href' => '#', 
        'onclick' => "dbLoadFile('#divContent','getData.php?r=perfDaily');return false;" ],
    ['id' => 'week',     'label' => 'Week',     'icon' => 'fa-receipt',      'href' => '#',
        'onclick' => "dbLoadFile('#divContent','getData.php?r=perfWeekly');return false;" ],
    ['id' => 'month',    'label' => 'Month',    'icon' => 'fa-users',        'href' => '#',
        'onclick' => "dbLoadFile('#divContent','getData.php?r=perfMonthly');return false;" ],
    ['id' => 'year',     'label' => 'Year',     'icon' => 'fa-gear',         'href' => '#',
        'onclick' => "dbLoadFile('#divContent','getData.php?r=perfYearly');return false;" ]
    // Add many more items here; these will appear in the top navbar and in the offcanvas
];

$topFive = array_slice($menuItems, 0, 5);
$allItems = $menuItems;
?>
<!-- ====== TOP NAVBAR ====== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="table.php?o=fidCurDate">
      <i class="fas fa-chart-line me-2"></i>Fidelity Info
    </a>

    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navbarMain"
            aria-controls="navbarMain" aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarMain">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">

        <!-- Admin -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#"
             id="adminDropdown" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-user-cog me-1"></i>Admin
          </a>
          <ul class="dropdown-menu" aria-labelledby="adminDropdown">
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=dup');">Dups of Duplicate Dates</a></li>
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=DupCnt');">Count of Duplicate Dates</a></li>
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=Duplicates');">Duplicates</a></li>
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=maxMin');">Max/Min Fields</a></li>
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=yrMaxMin');">Max/Min By Year</a></li>
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=yrMaxMinDiff');">Max/Min Diff by Year</a></li>
          </ul>
        </li>

        <!-- Test -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#"
             id="testDropdown" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-wrench me-1"></i>Test
          </a>
          <ul class="dropdown-menu" aria-labelledby="testDropdown">
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=misDay');">Missing Days-misDay</a></li>
          </ul>
        </li>

        <!-- Perf -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#"
             id="perfDropdown" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-tachometer-alt me-1"></i>Perf
          </a>
          <ul class="dropdown-menu" aria-labelledby="perfDropdown">
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=perfYearly');">PerfYr</a></li>
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=perfWeekly');">PerfWk</a></li>
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=perfMonthly');">PerfMonthly</a></li>
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=perfDaily');">PerfDaily</a></li>
          </ul>
        </li>

        <!-- Mega Menu (wide dropdown) -->
        <li class="nav-item dropdown position-static">
          <a class="nav-link dropdown-toggle" href="#"
             id="megaMenu" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            Mega Menu
          </a>
          <div class="dropdown-menu w-100 mt-0 border-0 shadow p-4"
               aria-labelledby="megaMenu">
            <div class="container">
              <div class="row g-4">
                <div class="col-lg-3 col-6">
                  <h6 class="text-uppercase">Database Validation</h6>
                  <ul class="list-unstyled">
                    <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=misDay');">Missing Days-misDay</a></li>
                    <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=btnValidDb');">ValueCheck</a></li>
                    <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=def');">Default</a></li>
                  </ul>
                </div>
                <div class="col-lg-3 col-6">
                  <h6 class="text-uppercase">Category 2</h6>
                  <ul class="list-unstyled">
                    <li><a class="dropdown-item" href="#">Item 4</a></li>
                    <li><a class="dropdown-item" href="#">Item 5</a></li>
                    <li><a class="dropdown-item" href="#">Item 6</a></li>
                  </ul>
                </div>
                <div class="col-lg-3 col-6">
                  <h6 class="text-uppercase">Category 3</h6>
                  <ul class="list-unstyled">
                    <li><a class="dropdown-item" href="#">Item 7</a></li>
                    <li><a class="dropdown-item" href="#">Item 8</a></li>
                    <li><a class="dropdown-item" href="#">Item 9</a></li>
                  </ul>
                </div>
                <div class="col-lg-3 col-6">
                  <h6 class="text-uppercase">Category 4</h6>
                  <ul class="list-unstyled">
                    <li><a class="dropdown-item" href="#">Item 10</a></li>
                    <li><a class="dropdown-item" href="#">Item 11</a></li>
                    <li><a class="dropdown-item" href="#">Item 12</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </li>

        <!-- Reports -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#"
             id="reportsDropdown" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-file-alt me-1"></i>Reports
          </a>
          <ul class="dropdown-menu" aria-labelledby="reportsDropdown">
            <!-- keep your existing report links here (unchanged hrefs) -->
            <li><a class="dropdown-item" href="javascript:dbLoadFile('#divContent','getData.php?r=btnMinMaxFidTot');">MinMax fidTot</a></li>
            <!-- ... all other report items ... -->
          </ul>
        </li>

        <!-- Settings / Refresh -->
        <li class="nav-item">
          <a class="nav-link" href="https://fid.intellihometech.com/settings.php">
            <i class="fas fa-sliders-h me-1"></i>Settings
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://fid.intellihometech.com/settings/index.html">
            <i class="fas fa-wrench me-1"></i>Set1
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://fid.intellihometech.com/table.php?o=fidId&sp=default">
            <i class="fas fa-sync-alt me-1"></i>Refresh
          </a>
        </li>

        <!-- OrderBy -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#"
             id="orderDropdown" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-sort me-1"></i>Orderby
          </a>
          <ul class="dropdown-menu" aria-labelledby="orderDropdown">
            <li>
              <div class="form-check ms-3">
                <input class="form-check-input" type="radio" value="ASC"
                       name="orderDirection" id="ascRadio">
                <label class="form-check-label" for="ascRadio">ASC</label>
              </div>
            </li>
            <li>
              <div class="form-check ms-3">
                <input class="form-check-input" type="radio" value="DESC"
                       name="orderDirection" id="descRadio" checked>
                <label class="form-check-label" for="descRadio">DESC</label>
              </div>
            </li>
          </ul>
        </li>

        <!-- SortBy -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#"
             id="sortDropdown" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-sort-alpha-down me-1"></i>SortBy
          </a>
          <ul class="dropdown-menu" aria-labelledby="sortDropdown">
            <li><a class="dropdown-item" href="table.php?o=fidId">fidId</a></li>
            <li><a class="dropdown-item" href="table.php?o=fidTot">fidTot</a></li>
            <li><a class="dropdown-item" href="table.php?o=fidPer">fidPer</a></li>
            <li><a class="dropdown-item" href="table.php?o=fidIndiv">fidIndiv</a></li>
            <li><a class="dropdown-item" href="table.php?o=fidProMan">fidProMan</a></li>
            <li><a class="dropdown-item" href="table.php?o=fidSep">fidSep</a></li>
            <li><a class="dropdown-item" href="table.php?o=fidCurDate">fidCurDate</a></li>
          </ul>
        </li>

        <!-- Help -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#"
             id="helpDropdown" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-question-circle me-1"></i>Help
          </a>
          <ul class="dropdown-menu" aria-labelledby="helpDropdown">
            <li><a class="dropdown-item" href="https://fid.intelliHomeTech.com/fidHelp.php">Main Help</a></li>
            <li><a class="dropdown-item" href="https://fid.intelliHomeTech.com/helpUpdate.php">Update Help</a></li>
            <li><a class="dropdown-item" href="help.html">Help Info</a></li>
            <li><a class="dropdown-item" href="https://fid.intelliHomeTech.com/help/index.html">New Help</a></li>
          </ul>
        </li>
      </ul>

      <!-- Right side (optional future items) -->
    </div>
  </div>
</nav>

<!-- Bottom navbar: top 5 items + More, only on small screens -->
BOTTOMMMMMMM
<nav class="navbar navbar-light bg-white fixed-bottom shadow border-top d-flex d-md-none bottom-nav">
    <div class="container-fluid p-0">
        <ul class="navbar-nav w-100 justify-content-between text-center">
            <?php foreach ($topFive as $item): ?>
yyy
<li class="nav-item flex-fill">
   <a href="<?= htmlspecialchars($item['href']) ?>"
   <?php if (isset($item['onclick'])): ?>
   onclick="<?= htmlspecialchars($item['onclick']) ?>"
   <?php endif; ?> >
    <span class="d-inline-flex align-items-center gap-1">
      <i class="fa-solid fa-chart-bar"></i>
        <span><?= htmlspecialchars($item['label']) ?></span>
    </span>
  </a>
</li>
            <?php endforeach; ?>

            <!-- More: opens offcanvas with full nav -->
            <li class="nav-item flex-fill">
                <button class="nav-link py-1 border-0 bg-transparent w-100"
                        type="button"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasFullNav"
                        aria-controls="offcanvasFullNav">
                    <i class="fa-solid fa-ellipsis-h fs-4 mb-1"></i>
                    <small>More</small>
                </button>
            </li>
        </ul>
    </div>
</nav>

<!-- Offcanvas with full navigation (bottom slide-up) -->
<div class="offcanvas offcanvas-bottom h-75" tabindex="-1" id="offcanvasFullNav"
     aria-labelledby="offcanvasFullNavLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasFullNavLabel">All navigation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">

        <!-- Option A: simple list of all items -->
        <div class="list-group">
        </div>

        <!-- Option B: if you already have complex megamenu markup,
             you can include it instead, e.g.:

        <?php // include __DIR__ . '/megaMenuContent.php'; ?>

        -->
    </div>
</div>

<nav class="navbar navbar-light bg-white fixed-bottom shadow border-top d-md-none bottom-nav">
  <div class="container-fluid p-0">
    <ul class="navbar-nav flex-row w-100 justify-content-around align-items-center m-0">
      <li class="nav-item flex-fill text-center">
        <a class="nav-link d-flex justify-content-center align-items-center gap-1 py-1"
           href="https://fid.intellihometech.com/table.php#">
          <i class="fa-solid fa-house"></i>
          <span>Home</span>
        </a>
      </li>

      <li class="nav-item flex-fill text-center">
        <a class="nav-link d-flex justify-content-center align-items-center gap-1 py-1"
           href="https://fid.intellihometech.com/table.php#"
           onclick="dbLoadFile('#divContent','getData.php?r=perfDaily');return false;">
          <i class="fa-solid fa-chart-bar"></i>
          <span>Daily</span>
        </a>
      </li>

      <li class="nav-item flex-fill text-center">
        <a class="nav-link d-flex justify-content-center align-items-center gap-1 py-1"
           href="https://fid.intellihometech.com/table.php#"
           onclick="dbLoadFile('#divContent','getData.php?r=perfWeekly');return false;">
          <i class="fa-solid fa-receipt"></i>
          <span>Week</span>
        </a>
      </li>

      <li class="nav-item flex-fill text-center">
        <a class="nav-link d-flex justify-content-center align-items-center gap-1 py-1"
           href="https://fid.intellihometech.com/table.php#"
           onclick="dbLoadFile('#divContent','getData.php?r=perfMonthly');return false;">
          <i class="fa-solid fa-users"></i>
          <span>Month</span>
        </a>
      </li>

      <li class="nav-item flex-fill text-center">
        <a class="nav-link d-flex justify-content-center align-items-center gap-1 py-1"
           href="https://fid.intellihometech.com/table.php#"
           onclick="dbLoadFile('#divContent','getData.php?r=perfYearly');return false;">
          <i class="fa-solid fa-gear"></i>
          <span>Year</span>
        </a>
      </li>

      <li class="nav-item flex-fill text-center">
        <button class="nav-link d-flex justify-content-center align-items-center gap-1 py-1 border-0 bg-transparent w-100"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasFullNav"
                aria-controls="offcanvasFullNav">
          <i class="fa-solid fa-ellipsis-h"></i>
          <span>More</span>
        </button>
      </li>
    </ul>
  </div>
</nav>

