@php
    $isPayroll = request()->routeIs('payroll.*');
    $runActive = request()->routeIs('payroll.v2.index', 'payroll.v2.cycles.run*');
    $settingsActive = request()->routeIs('payroll.settings*');
    $auditActive = request()->routeIs('payroll.v2.audit*');
@endphp
@if($isPayroll)
<div class="border-b border-slate-200 bg-white">
    <div class="px-4">
        {{-- Main payroll tabs (like reference: Run Payroll, Setup Payroll, Declaration, Advanced Settings, Audit History, Statutory) --}}
        <nav class="flex flex-wrap items-center gap-1 pt-2" aria-label="Payroll">
            <a href="{{ route('payroll.v2.index') }}" class="rounded-t-lg px-4 py-2.5 text-sm font-medium transition {{ $runActive ? 'bg-primary text-white font-semibold' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900' }}">Run Payroll</a>
            <a href="{{ route('payroll.settings') }}" class="rounded-t-lg px-4 py-2.5 text-sm font-medium transition {{ request()->routeIs('payroll.settings*') ? 'bg-primary text-white font-semibold' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900' }}">Setup Payroll</a>
            <a href="{{ route('payroll.index', ['tab' => 'declaration']) }}" class="rounded-t-lg px-4 py-2.5 text-sm font-medium transition {{ request()->routeIs('payroll.index') && request('tab') === 'declaration' ? 'bg-primary text-white font-semibold' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900' }}">Declaration</a>
 <a href="{{ route('payroll.settings') }}" class="rounded-t-lg px-4 py-2.5 text-sm font-medium transition {{ $settingsActive && !$runActive ? 'bg-primary text-white font-semibold' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900' }}">Advanced Settings</a>
            <a href="{{ route('payroll.v2.audit') }}" class="rounded-t-lg px-4 py-2.5 text-sm font-medium transition {{ $auditActive ? 'bg-primary text-white font-semibold' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900' }}">Audit History</a>
            <a href="{{ route('payroll.settings') }}" class="rounded-t-lg px-4 py-2.5 text-sm font-medium transition text-slate-600 hover:bg-slate-100 hover:text-slate-900">Statutory</a>
        </nav>
    </div>
    {{-- Advanced Settings sub-nav (shown when on payroll area) --}}
    <div class="border-t border-slate-100 bg-slate-50/50 px-4">
        <div class="flex flex-wrap items-center gap-1 py-2 text-sm">
            <span class="mr-2 text-slate-500">Advanced:</span>
            <a href="{{ route('payroll.settings') }}" class="rounded px-3 py-1.5 font-medium transition {{ $settingsActive ? 'bg-primary text-white font-semibold' : 'text-slate-600 hover:bg-slate-200' }}">Payroll Settings</a>
            <a href="{{ route('payroll.settings') }}#pf-esi" class="rounded px-3 py-1.5 text-slate-600 hover:bg-slate-200">PF &amp; ESI Settings</a>
            <a href="{{ route('payroll.settings') }}#pt" class="rounded px-3 py-1.5 text-slate-600 hover:bg-slate-200">PT Settings</a>
            <a href="{{ route('payroll.index', ['tab' => 'advanced', 'sub' => 'declaration_settings']) }}" class="rounded px-3 py-1.5 font-medium {{ request('sub') === 'declaration_settings' ? 'bg-primary text-white' : 'text-slate-600 hover:bg-slate-200' }}">Declaration Settings</a>
            <span class="rounded px-3 py-1.5 text-slate-400" title="Coming soon">Component</span>
            <span class="rounded px-3 py-1.5 text-slate-400" title="Coming soon">Payout Settings</span>
            <span class="rounded px-3 py-1.5 text-slate-400" title="Coming soon">Payslip Settings</span>
            <span class="rounded px-3 py-1.5 text-slate-400" title="Coming soon">Bank Integration</span>
            <a href="{{ route('payroll.legacy.index') }}" class="ml-auto rounded px-3 py-1.5 text-slate-500 hover:bg-slate-200 hover:text-slate-700" title="Previous payroll (month list + generate)">Previous version</a>
        </div>
    </div>
</div>
@endif