@php
    $snapshots = is_array($tabData) ? ($tabData['snapshots'] ?? collect()) : $tabData;
    $compensationItems = is_array($tabData) ? ($tabData['compensationItems'] ?? collect()) : collect();
    $allowanceTypes = is_array($tabData) ? ($tabData['allowanceTypes'] ?? []) : [];
    $deductionTypes = is_array($tabData) ? ($tabData['deductionTypes'] ?? []) : [];
@endphp

@can('employees.salary.view')
    <dl class="row mb-4">
        <dt class="col-sm-3">{{ __('employees.fields.salary') }}</dt>
        <dd class="col-sm-9">{{ $employee->salary }}</dd>
        <dt class="col-sm-3">{{ __('employees.fields.salary_structure') }}</dt>
        <dd class="col-sm-9">{{ $employee->salaryStructure?->name ?? '—' }}</dd>
        <dt class="col-sm-3">{{ __('employees.fields.payment_method') }}</dt>
        <dd class="col-sm-9">
            @if ($employee->payment_method)
                {{ __('employees.payment_methods.'.$employee->payment_method) }}
            @else
                —
            @endif
            ({{ $employee->currency ?? '—' }})
        </dd>
    </dl>
@endcan

@can('compensation.manage')
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <h3 class="h6 mb-3">{{ __('compensation.items') }}</h3>
            <form method="POST" action="{{ route('hr.allowances.employees.attach', $employee) }}" class="row g-2 align-items-end mb-4">
                @csrf
                <div class="col-md-3">
                    <x-ui.form.select
                        name="type_id"
                        :label="__('compensation.allowances')"
                        :options="$allowanceTypes"
                        required
                    />
                </div>
                <div class="col-md-2">
                    <x-ui.form.input name="amount" type="number" step="0.01" min="0" :label="__('compensation.fields.default_amount')" />
                </div>
                <div class="col-md-2">
                    <x-ui.form.input name="percentage" type="number" step="0.01" min="0" max="100" :label="__('compensation.percentage')" />
                </div>
                <div class="col-md-2">
                    <x-ui.form.input name="effective_from" type="date" :label="__('common.from')" :value="now()->toDateString()" required />
                </div>
                <div class="col-md-2">
                    <x-ui.form.input name="effective_to" type="date" :label="__('common.to')" />
                </div>
                <div class="col-md-1">
                    <x-ui.buttons.primary type="submit" size="sm">{{ __('common.save') }}</x-ui.buttons.primary>
                </div>
            </form>

            <form method="POST" action="{{ route('hr.deductions.employees.attach', $employee) }}" class="row g-2 align-items-end">
                @csrf
                <div class="col-md-3">
                    <x-ui.form.select
                        name="type_id"
                        :label="__('compensation.deductions')"
                        :options="$deductionTypes"
                        required
                    />
                </div>
                <div class="col-md-2">
                    <x-ui.form.input name="amount" type="number" step="0.01" min="0" :label="__('compensation.fields.default_amount')" />
                </div>
                <div class="col-md-2">
                    <x-ui.form.input name="percentage" type="number" step="0.01" min="0" max="100" :label="__('compensation.percentage')" />
                </div>
                <div class="col-md-2">
                    <x-ui.form.input name="effective_from" type="date" :label="__('common.from')" :value="now()->toDateString()" required />
                </div>
                <div class="col-md-2">
                    <x-ui.form.input name="effective_to" type="date" :label="__('common.to')" />
                </div>
                <div class="col-md-1">
                    <x-ui.buttons.primary type="submit" size="sm">{{ __('common.save') }}</x-ui.buttons.primary>
                </div>
            </form>
        </div>
    </div>
@endcan

@if ($compensationItems->isNotEmpty())
    <div class="mb-4">
        <x-ui.table.table :columns="[
            ['label' => __('common.status')],
            ['label' => __('compensation.fields.name')],
            ['label' => __('compensation.fields.default_amount')],
            ['label' => __('common.from')],
            ['label' => __('common.to')],
            ['label' => __('common.actions'), 'align' => 'end'],
        ]">
            @foreach ($compensationItems as $item)
                @php
                    $typeLabel = ($item->item_type === 'allowance' ? $allowanceTypes : $deductionTypes)[$item->type_id]
                        ?? '#'.$item->type_id;
                @endphp
                <x-ui.table.row>
                    <td>{{ $item->item_type === 'allowance' ? __('compensation.allowances') : __('compensation.deductions') }}</td>
                    <td>{{ $typeLabel }} @if(!$item->is_active)<span class="text-muted">({{ __('common.inactive') }})</span>@endif</td>
                    <td>{{ $item->amount ?? (($item->percentage !== null ? $item->percentage.'%' : '—')) }}</td>
                    <td>{{ $item->effective_from?->format('Y-m-d') }}</td>
                    <td>{{ $item->effective_to?->format('Y-m-d') ?: '—' }}</td>
                    <td class="text-end">
                        @can('compensation.manage')
                            @if ($item->is_active)
                                <form method="POST" action="{{ route('hr.'.($item->item_type === 'allowance' ? 'allowances' : 'deductions').'.employees.detach', [$employee, $item->id]) }}" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <x-ui.buttons.secondary type="submit" size="sm">{{ __('common.inactive') }}</x-ui.buttons.secondary>
                                </form>
                            @endif
                        @endcan
                    </td>
                </x-ui.table.row>
            @endforeach
        </x-ui.table.table>
    </div>
@endif

@if ($snapshots === null || (is_countable($snapshots) && count($snapshots) === 0))
    <x-ui.operational.empty-state :title="__('employees.empty_tab.payroll')" />
@else
    <x-ui.table.table :columns="[
        ['label' => __('employees.payroll.period')],
        ['label' => __('employees.payroll.base_salary')],
        ['label' => __('employees.payroll.gross')],
        ['label' => __('employees.payroll.generated_at')],
    ]">
        @foreach ($snapshots as $snapshot)
            <x-ui.table.row>
                <td>{{ $snapshot->period?->name ?? '—' }}</td>
                <td>{{ $snapshot->base_salary }}</td>
                <td>{{ $snapshot->gross_amount }}</td>
                <td>{{ $snapshot->generated_at?->format('Y-m-d H:i') ?: '—' }}</td>
            </x-ui.table.row>
        @endforeach
    </x-ui.table.table>
@endif
