<div class="sidebar border border-dark col-md-3 col-lg-2 p-0" style="background-color: #d3d3d3;">
    <div class="offcanvas-md offcanvas-end bg-dark" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
        <div class="offcanvas-header">
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto" style="height: 100vh; background-color: white;">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('dashboard') ? 'bg-black text-white' : 'text-white' }}" aria-current="page" href="{{ route('dashboard') }}">
                        <svg class="bi text-white">
                            <use xlink:href="#house-fill" />
                        </svg>
                        <span>Dashboard</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('service') ? 'bg-black text-white' : 'text-white' }}" href="{{ route('service.index') }}">
                        <svg class="bi text-white">
                            <use xlink:href="#file-earmark" />
                        </svg>
                        <span>Service</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('history') ? 'bg-black text-white' : 'text-white' }}" href="{{ route('history.index') }}">
                        <svg class="bi text-white">
                            <use xlink:href="#sun-fill" />
                        </svg>
                        <span>History</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('stock') ? 'bg-black text-white' : 'text-white' }}" href="{{ route('stock.index') }}">
                        <svg class="bi text-white">
                            <use xlink:href="#puzzle" />
                        </svg>
                        <span>Stock</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('customer') ? 'bg-black text-white' : 'text-white' }}" href="{{ route('customer.index') }}">
                        <svg class="bi text-white">
                            <use xlink:href="#people" />
                        </svg>
                        <span>Customers</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('pembelian') ? 'bg-black text-white' : 'text-white' }}" href="{{ route('pembelian.index') }}">
                        <svg class="bi text-white">
                            <use xlink:href="#cart" />
                        </svg>
                        <span>Pembelian</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('labarugi') ? 'bg-black text-white' : 'text-white' }}" href="{{ route('laporan.laba-rugi') }}">
                        <svg class="bi text-white">
                            <use xlink:href="#graph-up" />
                        </svg>
                        <span>Laba rugi</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('neracaSaldo') ? 'bg-black text-white' : 'text-white' }}" href="{{ route('laporan.neraca-saldo') }}">
                        <svg class="bi text-white">
                            <use xlink:href="#speedometer2" />
                        </svg>
                        <span>Neraca Saldo</span>
                    </a>
                </li>

                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-white text-uppercase">
                    <span>Employee Section</span>
                </h6>
                <ul class="nav flex-column mb-auto">
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('employee') ? 'bg-black text-white' : 'text-white' }}" href="{{ route('employees.index') }}">
                            <svg class="bi text-white">
                                <use xlink:href="#people" />
                            </svg>
                            <span>Employee</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('absensi') ? 'bg-black text-white' : 'text-white' }}" href="{{ route('absensi.index') }}">
                            <svg class="bi text-white">
                                <use xlink:href="#calendar" />
                        </svg>
                        <span>Absensi</span> </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center gap-2 {{ Request::is('penggajian') ? 'bg-black text-white' : 'text-white' }}" href="{{ route('penggajian.index') }}">
                            <svg class="bi text-white">
                                <use xlink:href="#file-earmark-text" />
                            </svg>
                            <span>Penggajian</span>
                        </a>
                    </li>
                </ul>
                <hr class="my-3 bg-dark">
                <ul class="nav flex-column mb-auto">
                    <li class="nav-item">
                        <form action="/logout" method="post">
                            @csrf
                            <button type="submit" class="nav-link px-3 text-white"><i class="bi bi-box-arrow-right"></i>
                                <span>Logout</span></button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>
