@php
    $mainPage = $mainPage ?? '';
    $page = $page ?? '';
    $regReqCnt = $regReqCnt ?? 0;
    $pendingCustCnt = $pendingCustCnt ?? 0;
    $admin = auth('admin')->user();
    $adminInitial = strtoupper(substr($admin->Name ?? 'A', 0, 1));
@endphp

<div class="page-loader">
    <div class="bg-primary"></div>
</div>

<aside id="layout-sidenav" class="layout-sidenav sidenav sidenav-vertical nb-sidenav sidenav-light">
    <div class="nb-brand-box">
        <a href="{{ route('admin.dashboard') }}" class="nb-brand-link">
            <img src="{{ asset('logo.jpeg') }}" alt="{{ config('app.name', 'Nutriobits') }}" class="nb-brand-logo-img">
            <span class="nb-brand-name">
                <span class="nb-brand-dark">Nutrio</span><span class="nb-brand-accent">bits</span>
            </span>
        </a>
    </div>

    <nav class="nb-nav" aria-label="Admin">
        <ul class="sidenav-inner nb-nav-list">
            <li class="sidenav-item {{ $page === 'Dashboard' ? 'active' : '' }}">
                <a href="{{ route('admin.dashboard') }}" class="sidenav-link">
                    <span class="nb-icon-wrap"><i class="sidenav-icon fas fa-chart-line"></i></span>
                    <div>Dashboard</div>
                </a>
            </li>

            <li class="nb-section-label">Setup</li>

            <li class="sidenav-item {{ $mainPage === 'Masters' ? 'open active' : '' }}">
                <a href="javascript:void(0);" class="sidenav-link sidenav-toggle">
                    <span class="nb-icon-wrap"><i class="sidenav-icon fas fa-cogs"></i></span>
                    <div>Masters</div>
                </a>
                <ul class="sidenav-menu">
                    <li class="sidenav-item {{ $page === 'Location' ? 'open active' : '' }}">
                        <a href="javascript:void(0);" class="sidenav-link sidenav-toggle">
                            <div>Locations</div>
                        </a>
                        <ul class="sidenav-menu">
                            <li class="sidenav-item"><a href="{{ route('admin.masters.countries.index') }}" class="sidenav-link"><div>Country</div></a></li>
                            <li class="sidenav-item"><a href="{{ route('admin.masters.states.index') }}" class="sidenav-link"><div>State</div></a></li>
                            <li class="sidenav-item"><a href="{{ route('admin.masters.cities.index') }}" class="sidenav-link"><div>City / District</div></a></li>
                            <li class="sidenav-item"><a href="{{ route('admin.masters.zones.index') }}" class="sidenav-link"><div>Zone</div></a></li>
                            <li class="sidenav-item"><a href="{{ route('admin.masters.wards.index') }}" class="sidenav-link"><div>Ward No</div></a></li>
                            <li class="sidenav-item"><a href="{{ route('admin.masters.areas.index') }}" class="sidenav-link"><div>Area</div></a></li>
                        </ul>
                    </li>
                    <li class="sidenav-item {{ $page === 'Packages' ? 'active' : '' }}">
                        <a href="{{ route('admin.masters.packages.index') }}" class="sidenav-link">
                            <div>Packages</div>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="nb-section-label">People</li>

            <li class="sidenav-item {{ $mainPage === 'RegistrationRequest' ? 'active' : '' }}">
                <a href="{{ route('admin.registration-requests.index') }}" class="sidenav-link">
                    <span class="nb-icon-wrap"><i class="sidenav-icon fas fa-clipboard-list"></i></span>
                    <div>Registration Request</div>
                    @if ($regReqCnt > 0)
                        <div class="nb-badge">{{ $regReqCnt }}</div>
                    @endif
                </a>
            </li>

            <li class="sidenav-item {{ $mainPage === 'Customers' ? 'open active' : '' }}">
                <a href="javascript:void(0);" class="sidenav-link sidenav-toggle">
                    <span class="nb-icon-wrap"><i class="sidenav-icon fas fa-users"></i></span>
                    <div>Customers</div>
                </a>
                <ul class="sidenav-menu">
                    <li class="sidenav-item"><a href="{{ route('admin.customers.create') }}" class="sidenav-link"><div>Add Customer</div></a></li>
                    <li class="sidenav-item {{ $page === 'Pending-Customers' ? 'active' : '' }}">
                        <a href="{{ route('admin.customers.pending') }}" class="sidenav-link">
                            <div>Pending Customers</div>
                            @if ($pendingCustCnt > 0)
                                <div class="nb-badge nb-badge-warn">{{ $pendingCustCnt }}</div>
                            @endif
                        </a>
                    </li>
                    <li class="sidenav-item"><a href="{{ route('admin.customers.index') }}" class="sidenav-link"><div>View Customers</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.customers.expiring') }}" class="sidenav-link"><div>Expiring in 2 Days</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.customers.expired') }}" class="sidenav-link"><div>Package Expired</div></a></li>
                </ul>
            </li>

            <li class="sidenav-item {{ $mainPage === 'Executives' ? 'open active' : '' }}">
                <a href="javascript:void(0);" class="sidenav-link sidenav-toggle">
                    <span class="nb-icon-wrap"><i class="sidenav-icon fas fa-user-tie"></i></span>
                    <div>Executives</div>
                </a>
                <ul class="sidenav-menu">
                    <li class="sidenav-item"><a href="{{ route('admin.executives.create') }}" class="sidenav-link"><div>Add Executive</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.executives.index') }}" class="sidenav-link"><div>View Executives</div></a></li>
                </ul>
            </li>

            <li class="nb-section-label">Operations</li>

            <li class="sidenav-item {{ $mainPage === 'Orders' ? 'open active' : '' }}">
                <a href="javascript:void(0);" class="sidenav-link sidenav-toggle">
                    <span class="nb-icon-wrap"><i class="sidenav-icon fas fa-shopping-basket"></i></span>
                    <div>Today Orders</div>
                </a>
                <ul class="sidenav-menu">
                    <li class="sidenav-item"><a href="{{ route('admin.orders.tomorrow') }}" class="sidenav-link"><div>Tomorrow Orders</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.orders.pending') }}" class="sidenav-link"><div>Pending Orders</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.orders.delivered') }}" class="sidenav-link"><div>Delivered Orders</div></a></li>
                </ul>
            </li>

            <li class="sidenav-item {{ $mainPage === 'Delivery Status' ? 'active' : '' }}">
                <a href="{{ route('admin.delivery-status.index') }}" class="sidenav-link">
                    <span class="nb-icon-wrap"><i class="sidenav-icon fas fa-truck"></i></span>
                    <div>Delivery Status</div>
                </a>
            </li>

            <li class="sidenav-item {{ $mainPage === 'Reports' ? 'open active' : '' }}">
                <a href="javascript:void(0);" class="sidenav-link sidenav-toggle">
                    <span class="nb-icon-wrap"><i class="sidenav-icon fas fa-chart-pie"></i></span>
                    <div>Reports</div>
                </a>
                <ul class="sidenav-menu">
                    <li class="sidenav-item"><a href="{{ route('admin.reports.all-orders') }}" class="sidenav-link"><div>All Orders</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.reports.delivered') }}" class="sidenav-link"><div>Delivered Orders</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.reports.pending') }}" class="sidenav-link"><div>Pending Orders</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.reports.recent-activity') }}" class="sidenav-link"><div>Recent Activity</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.reports.delivery-growth') }}" class="sidenav-link"><div>Delivery Growth</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.reports.earning-growth') }}" class="sidenav-link"><div>Earning Growth</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.reports.active-customers') }}" class="sidenav-link"><div>Active Customers</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.reports.expired-packages') }}" class="sidenav-link"><div>Expired Packages</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.reports.unpaid-customers') }}" class="sidenav-link"><div>Unpaid Customers</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.reports.attendance') }}" class="sidenav-link"><div>Attendance</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.reports.payment-ledger') }}" class="sidenav-link"><div>Payment Ledger</div></a></li>
                </ul>
            </li>

            <li class="nb-section-label">Finance</li>

            <li class="sidenav-item {{ $mainPage === 'Payments' ? 'open active' : '' }}">
                <a href="javascript:void(0);" class="sidenav-link sidenav-toggle">
                    <span class="nb-icon-wrap"><i class="sidenav-icon fas fa-credit-card"></i></span>
                    <div>Customer Payments</div>
                </a>
                <ul class="sidenav-menu">
                    <li class="sidenav-item"><a href="{{ route('admin.payments.create') }}" class="sidenav-link"><div>Receive Amount</div></a></li>
                    <li class="sidenav-item"><a href="{{ route('admin.payments.index') }}" class="sidenav-link"><div>View Receive Amount</div></a></li>
                </ul>
            </li>
        </ul>
    </nav>

    <div class="nb-sidenav-foot">
        <div class="nb-user-box dropup dropdown">
            <a href="#" class="nb-user-trigger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <span class="nb-avatar">{{ $adminInitial }}</span>
                <span class="nb-user-info">
                    <strong>{{ $admin->Name ?? 'Admin' }}</strong>
                    <span>{{ $admin->Username ?? 'administrator' }}</span>
                </span>
                <i class="fas fa-chevron-down nb-user-chevron"></i>
            </a>
            <div class="dropdown-menu nb-user-dropdown">
                <form method="POST" action="{{ route('admin.logout') }}">
                    @csrf
                    <button type="submit" class="dropdown-item nb-logout-item">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>Logout</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</aside>

<style>
:root {
    --nb-teal: #0d7377;
    --nb-teal-dark: #095456;
    --nb-teal-light: #e6f4f1;
    --nb-teal-muted: #5a8a8c;
    --nb-text: #334155;
    --nb-text-muted: #64748b;
    --nb-border: #e2e8f0;
    --nb-bg: #ffffff;
}

.nb-sidenav.layout-sidenav,
#layout-sidenav.nb-sidenav {
    width: 270px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border-right: none;
    box-shadow: none;
    overflow: hidden;
    font-family: 'Sora', ui-sans-serif, sans-serif;
}

/* ── Brand box ── */
.nb-brand-box {
    margin: 1rem 0.85rem 0.5rem;
    padding: 0.85rem;
    border: 1px solid #e8edf2;
    border-radius: 12px;
    background: #fff;
}

.nb-brand-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
}

.nb-brand-logo-img {
    width: 100%;
    max-width: 40px;
    height: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    border-radius: 8px;
}

.nb-brand-name {
    font-family: 'Sora', ui-sans-serif, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-align: left;
}

.nb-brand-dark { color: #1e293b; }
.nb-brand-accent { color: var(--nb-teal); }

/* ── Navigation ── */
.nb-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0.75rem 1rem;
}

.nb-nav::-webkit-scrollbar { width: 4px; }
.nb-nav::-webkit-scrollbar-thumb {
    background: rgba(13, 115, 119, 0.25);
    border-radius: 999px;
}

.nb-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nb-section-label {
    margin: 1rem 0.5rem 0.35rem;
    padding: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b0bec5;
    list-style: none;
}

#layout-sidenav.nb-sidenav .sidenav-item {
    margin: 0.1rem 0;
    border-radius: 10px;
}

#layout-sidenav.nb-sidenav .sidenav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    color: var(--nb-text-muted) !important;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

#layout-sidenav.nb-sidenav .sidenav-link > div:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
}

/* Icon wrapper */
.nb-icon-wrap {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}

#layout-sidenav.nb-sidenav .sidenav-icon {
    font-size: 0.9rem;
    color: var(--nb-teal-muted);
    opacity: 1;
    width: auto;
    text-align: center;
    transition: color 0.18s ease;
}

#layout-sidenav.nb-sidenav .sidenav-link:hover {
    background: #f8fafc !important;
    color: var(--nb-text) !important;
    transform: none;
    box-shadow: none;
}

#layout-sidenav.nb-sidenav .sidenav-link:hover .sidenav-icon {
    color: var(--nb-teal);
}

/* Active state */
#layout-sidenav.nb-sidenav .sidenav-item.active > .sidenav-link,
#layout-sidenav.nb-sidenav .sidenav-item.open.active > .sidenav-link {
    background: var(--nb-teal-light) !important;
    color: var(--nb-teal) !important;
    font-weight: 700;
    box-shadow: none;
}

#layout-sidenav.nb-sidenav .sidenav-item.active > .sidenav-link .nb-icon-wrap,
#layout-sidenav.nb-sidenav .sidenav-item.open.active > .sidenav-link .nb-icon-wrap {
    background: var(--nb-teal);
}

#layout-sidenav.nb-sidenav .sidenav-item.active > .sidenav-link .sidenav-icon,
#layout-sidenav.nb-sidenav .sidenav-item.open.active > .sidenav-link .sidenav-icon {
    color: #fff;
}

/* Toggle chevron */
#layout-sidenav.nb-sidenav .sidenav-toggle::after {
    border-color: var(--nb-text-muted);
    opacity: 0.6;
}

#layout-sidenav.nb-sidenav .sidenav-item.open > .sidenav-toggle::after {
    border-color: var(--nb-teal);
}

#layout-sidenav.nb-sidenav .sidenav-item.active > .sidenav-link.sidenav-toggle::after,
#layout-sidenav.nb-sidenav .sidenav-item.open.active > .sidenav-link.sidenav-toggle::after {
    border-color: var(--nb-teal);
}

/* Submenus */
#layout-sidenav.nb-sidenav .sidenav-menu {
    padding: 0.1rem 0 0.25rem 0.5rem;
    margin: 0;
}

#layout-sidenav.nb-sidenav .sidenav-menu .sidenav-link {
    padding: 0.5rem 0.75rem 0.5rem 2.75rem;
    font-size: 0.82rem;
    color: var(--nb-text-muted) !important;
    border-left: none;
    border-radius: 8px;
}

#layout-sidenav.nb-sidenav .sidenav-menu .sidenav-link:hover {
    background: #f8fafc !important;
    color: var(--nb-teal) !important;
}

#layout-sidenav.nb-sidenav .sidenav-menu .sidenav-item.active > .sidenav-link {
    background: var(--nb-teal-light) !important;
    color: var(--nb-teal) !important;
    font-weight: 600;
    border-left: none;
    box-shadow: none;
}

#layout-sidenav.nb-sidenav .sidenav-menu .sidenav-menu .sidenav-link {
    padding-left: 3.5rem;
}

/* Badges */
.nb-badge {
    margin-left: auto;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nb-badge-warn {
    background: #f59e0b;
}

/* ── User footer ── */
.nb-sidenav-foot {
    padding: 0.75rem;
    border-top: 1px solid var(--nb-border);
    background: #f8fafc;
}

.nb-user-box {
    border: 1px solid #e8edf2;
    border-radius: 12px;
    background: #fff;
    overflow: visible;
}

.nb-user-trigger {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.nb-user-trigger::after {
    display: none;
}

.nb-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--nb-teal);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nb-user-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.nb-user-info strong {
    display: block;
    color: #1e293b;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nb-user-info span {
    display: block;
    color: var(--nb-text-muted);
    font-size: 0.72rem;
    margin-top: 0.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nb-user-chevron {
    font-size: 0.65rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.nb-user-dropdown {
    width: 100%;
    border: 1px solid var(--nb-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    padding: 0.35rem;
    margin-bottom: 0.25rem;
}

.nb-logout-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ef4444 !important;
    padding: 0.55rem 0.75rem;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
}

.nb-logout-item:hover {
    background: #fef2f2;
}

.nb-user-box .dropdown-menu {
    bottom: calc(100% + 0.35rem);
    top: auto;
    left: 0;
    right: 0;
    transform: none !important;
    margin: 0;
}
</style>