@extends('layouts.app')

@section('title', 'Payroll')
@section('heading', 'Payroll')

@section('content')
@include('settings.partials.back-to-home')
@php
    $user = auth()->user();
    $canManagePayroll = (bool) ($canManagePayroll ?? $user?->canManagePayroll() ?? false);
    $isAdmin = $canManagePayroll;
    $tab = (string) ($tab ?? ($canManagePayroll ? 'run' : 'summary'));
    $sub = (string) ($sub ?? request('sub', 'payroll_settings'));
    $showAdvanced = (bool) ($showAdvanced ?? in_array($tab, ['setup', 'advanced', 'statutory'], true));
    $settingsParentTab = in_array($tab, ['setup', 'advanced', 'statutory'], true) ? $tab : 'setup';
@endphp

<div class="space-y-4">
    {{-- Payroll header + tabs (matches screenshot) --}}
    <div class="rounded-xl border border-slate-200 bg-white shadow-sm">
        <div class="flex flex-wrap items-start justify-between gap-3 px-4 py-4">
            <div>
                <h1 class="text-xl font-semibold text-slate-900">Payroll</h1>
                <p class="mt-0.5 text-sm text-slate-500">
                    @if($isAdmin)
                        Run payroll, configure statutory settings, and view your own pay summary.
                    @else
                        View your pay details.
                    @endif
                </p>
            </div>
        </div>

        <div class="border-t border-b border-slate-200 px-4">
            <nav class="top-submenu" aria-label="Payroll tabs">
                @if($isAdmin)
                    <a href="{{ route('payroll.index', ['tab' => 'run']) }}" class="{{ $tab === 'run' ? 'top-submenu-tab is-active' : 'top-submenu-tab' }}">
                        <i class="bi bi-play-circle mr-1"></i>
                        Run Payroll
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => 'setup', 'sub' => 'payroll_settings']) }}" class="{{ $tab === 'setup' ? 'top-submenu-tab is-active' : 'top-submenu-tab' }}">
                        <i class="bi bi-gear mr-1"></i>
                        Setup Payroll
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => 'declaration']) }}" class="{{ $tab === 'declaration' ? 'top-submenu-tab is-active' : 'top-submenu-tab' }}">
                        <i class="bi bi-file-earmark-text mr-1"></i>
                        Declaration
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => 'advanced', 'sub' => $sub]) }}" class="{{ $tab === 'advanced' ? 'top-submenu-tab is-active' : 'top-submenu-tab' }}">
                        <i class="bi bi-sliders mr-1"></i>
                        Advanced Settings
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => 'audit']) }}" class="{{ $tab === 'audit' ? 'top-submenu-tab is-active' : 'top-submenu-tab' }}">
                        <i class="bi bi-clock-history mr-1"></i>
                        Audit History
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => 'statutory', 'sub' => 'pf_esi']) }}" class="{{ $tab === 'statutory' ? 'top-submenu-tab is-active' : 'top-submenu-tab' }}">
                        <i class="bi bi-shield-check mr-1"></i>
                        Statutory
                    </a>
                    <div class="ml-auto flex flex-wrap items-center gap-2 border-l border-slate-200 pl-2">
                        <a href="{{ route('payroll.index', ['tab' => 'summary']) }}" class="{{ $tab === 'summary' ? 'top-submenu-tab is-active' : 'top-submenu-tab' }}">
                            <i class="bi bi-bar-chart mr-1"></i>
                            Summary
                        </a>
                        <a href="{{ route('payroll.index', ['tab' => 'my']) }}" class="{{ $tab === 'my' ? 'top-submenu-tab is-active' : 'top-submenu-tab' }}">
                            <i class="bi bi-wallet2 mr-1"></i>
                            My Pay
                        </a>
                    </div>
                @else
                    <a href="{{ route('payroll.index', ['tab' => 'summary']) }}" class="{{ $tab === 'summary' ? 'top-submenu-tab is-active' : 'top-submenu-tab' }}">
                        <i class="bi bi-bar-chart mr-1"></i>
                        Summary
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => 'my']) }}" class="{{ $tab === 'my' ? 'top-submenu-tab is-active' : 'top-submenu-tab' }}">
                        <i class="bi bi-wallet2 mr-1"></i>
                        My Pay
                    </a>
                @endif
            </nav>
        </div>

        @if($isAdmin && $showAdvanced)
            <div class="border-t border-slate-200 px-4 py-3">
                <nav class="top-submenu top-submenu--boxed text-sm" aria-label="Payroll settings tabs">
                    <a href="{{ route('payroll.index', ['tab' => $settingsParentTab, 'sub' => 'payroll_settings']) }}" class="top-submenu-tab top-submenu-tab--boxed {{ $sub === 'payroll_settings' ? 'is-active' : '' }}">
                        <i class="bi bi-gear-wide-connected mr-1"></i>
                        Payroll Settings
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => $settingsParentTab, 'sub' => 'pf_esi']) }}" class="top-submenu-tab top-submenu-tab--boxed {{ $sub === 'pf_esi' ? 'is-active' : '' }}">
                        <i class="bi bi-piggy-bank mr-1"></i>
                        PF &amp; ESI Settings
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => $settingsParentTab, 'sub' => 'pt']) }}" class="top-submenu-tab top-submenu-tab--boxed {{ $sub === 'pt' ? 'is-active' : '' }}">
                        <i class="bi bi-receipt mr-1"></i>
                        PT Settings
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => $settingsParentTab, 'sub' => 'declaration_settings']) }}" class="top-submenu-tab top-submenu-tab--boxed {{ $sub === 'declaration_settings' ? 'is-active' : '' }}">
                        <i class="bi bi-journal-check mr-1"></i>
                        Declaration Settings
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => $settingsParentTab, 'sub' => 'component']) }}" class="top-submenu-tab top-submenu-tab--boxed {{ $sub === 'component' ? 'is-active' : '' }}">
                        <i class="bi bi-puzzle mr-1"></i>
                        Component
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => $settingsParentTab, 'sub' => 'payout']) }}" class="top-submenu-tab top-submenu-tab--boxed {{ $sub === 'payout' ? 'is-active' : '' }}">
                        <i class="bi bi-cash-coin mr-1"></i>
                        Payout Settings
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => $settingsParentTab, 'sub' => 'payslip']) }}" class="top-submenu-tab top-submenu-tab--boxed {{ $sub === 'payslip' ? 'is-active' : '' }}">
                        <i class="bi bi-file-earmark-ruled mr-1"></i>
                        Payslip Settings
                    </a>
                    <a href="{{ route('payroll.index', ['tab' => $settingsParentTab, 'sub' => 'bank']) }}" class="top-submenu-tab top-submenu-tab--boxed {{ $sub === 'bank' ? 'is-active' : '' }}">
                        <i class="bi bi-bank mr-1"></i>
                        Bank Integration
                    </a>
                </nav>
            </div>
        @endif
    </div>

    @yield('payroll_content')
</div>
@endsection