@php
    $mySub = (string) ($mySub ?? request('my_sub', 'salary'));
    if (! in_array($mySub, ['salary', 'payslips', 'income-tax'], true)) {
        $mySub = 'salary';
    }
@endphp

<div class="space-y-5">
    <div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
        <div class="border-b border-slate-100 bg-gradient-to-r from-violet-50/40 via-white to-teal-50/30 px-5 py-5">
            <div class="flex items-start gap-3">
                <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-violet-100 text-violet-700">
                    <i class="bi bi-wallet2 text-lg"></i>
                </span>
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Self service</p>
                    <h2 class="mt-0.5 text-lg font-semibold text-slate-900">My Pay</h2>
                    <p class="mt-1 text-sm text-slate-500">View your salary, payslips, and income tax declaration.</p>
                </div>
            </div>
        </div>

        <div class="border-b border-slate-100 px-4 pt-2">
            <nav class="top-submenu top-submenu--boxed text-sm" aria-label="My pay tabs">
                <a href="{{ route('payroll.index', ['tab' => 'my', 'my_sub' => 'salary']) }}"
                   class="top-submenu-tab top-submenu-tab--boxed {{ $mySub === 'salary' ? 'is-active' : '' }}">
                    <i class="bi bi-cash-stack mr-1"></i> My Salary
                </a>
                <a href="{{ route('payroll.index', ['tab' => 'my', 'my_sub' => 'payslips']) }}"
                   class="top-submenu-tab top-submenu-tab--boxed {{ $mySub === 'payslips' ? 'is-active' : '' }}">
                    <i class="bi bi-file-earmark-text mr-1"></i> Pay slips
                </a>
                <a href="{{ route('payroll.index', ['tab' => 'my', 'my_sub' => 'income-tax']) }}"
                   class="top-submenu-tab top-submenu-tab--boxed {{ $mySub === 'income-tax' ? 'is-active' : '' }}">
                    <i class="bi bi-percent mr-1"></i> Income Tax
                </a>
            </nav>
        </div>

        <div class="p-5">
            @if($mySub === 'salary')
                @include('payroll.tabs.my.salary')
            @elseif($mySub === 'payslips')
                @include('payroll.tabs.my.payslips')
            @else
                @include('payroll.tabs.my.income-tax')
            @endif
        </div>
    </div>
</div>