@php
    $menuArr = [];
    $menuArr['首頁']['href'] = '/index';
    $menuArr['首頁']['icon'] = '<svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>';
    // $menuArr['商品類型列表']['href'] = '/productMethod/index';
    // $menuArr['商品類型列表']['icon'] = '<svg class="bi me-2" width="16" height="16"><use xlink:href="#productMethod"/></svg>';
    // $menuArr['商品列表']['href'] = '/products/index';
    // $menuArr['商品列表']['icon'] = '<svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>';

    $currentUrl = explode('/',$_SERVER['REQUEST_URI'])[1];
    $active = "";
    foreach ($menuArr as $key => $value) {
        if($currentUrl == 'index' and $value['href'] == '/index'){
            $menuArr[$key]['active'] = "active";
        }
        elseif(stripos($value['href'],$currentUrl) and $currentUrl != 'index'){
            $menuArr[$key]['active'] = "active";
        }
        else{
            $menuArr[$key]['active'] = "";
        }
    }

@endphp

<nav class="navbar navbar-expand-lg " style="padding: 20px;border-bottom:1px solid rgb(222,222,222)">
    <a class="navbar-brand" href="#" style="font-weight: 600;font-size:24px;letter-spacing: 4px;margin-left:10px">咕咕雞</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            {{-- @foreach ($menuArr as $name => $val)
            <li class="nav-item">
                <a href="{{ $val['href'] }}" class="nav-link {{ $val['active'] }}" aria-current="page">
                {{ $name }}
                </a>
            </li>
            @endforeach
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                  帳務
                </a>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="{{ route('accountIndex') }}">原物料登記</a>
                  <a class="dropdown-item" href="{{ route('rsIndex') }}">餐廳訂貨</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li> --}}
            <li class="nav-item">
                <div class="dropdown bd-mode-toggle">
                    <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (light)">
                    <svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#sun-fill"></use></svg>
                    <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text" style="">
                    <li>
                        <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light" aria-pressed="true">
                        <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#sun-fill"></use></svg>
                        Light
                        <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                        <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
                        Dark
                        <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="false">
                        <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#circle-half"></use></svg>
                        Auto
                        <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
                        </button>
                    </li>
                    </ul>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('logout') }}">登出</a>
            </li>
        </ul>

    </div>
  </nav>