@php
    $p = $snapshot->period;
    $e = $snapshot->employee;
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('me.payslips_title'), 'url' => route('me.payslips.index')],
        ['label' => ($p?->name ?? __('payslips.title')).' #'.$snapshot->id],
    ];
@endphp

<x-ui.layout.page
    :title="__('payslips.title')"
    :subtitle="__('payslips.subtitle')"
    page-icon="fe fe-file-text"
    :breadcrumbs="$breadcrumbs"
>
    <div class="alert alert-secondary border-0 small">
        {{ __('payslips.snapshot_notice') }}
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="small text-muted">{{ __('payslips.sections.employee') }}</div>
            <div><strong>{{ $e?->full_name ?? '—' }}</strong></div>
            <div class="small text-muted"><code>{{ $e?->employee_code ?? '—' }}</code></div>
        </div>
        <div class="col-md-4">
            <div class="small text-muted">{{ __('payslips.sections.period') }}</div>
            <div>{{ $p?->name ?? '—' }}</div>
            <div class="small text-muted">
                {{ $p?->start_date?->format('Y-m-d') }} → {{ $p?->end_date?->format('Y-m-d') }}
            </div>
        </div>
        <div class="col-md-4">
            <div class="small text-muted">{{ __('payslips.fields.generated_at') }}</div>
            <div>{{ $snapshot->generated_at?->format('Y-m-d H:i') ?? '—' }}</div>
            <div class="small text-muted">{{ __('payslips.fields.finalized_at') }}: {{ $p?->finalized_at?->format('Y-m-d H:i') ?? '—' }}</div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h2 class="h6 mb-3">{{ __('payslips.sections.earnings') }}</h2>
                    <div class="d-flex justify-content-between">
                        <div class="text-muted">{{ __('payslips.breakdown.base_salary') }}</div>
                        <div><strong>{{ $breakdown['base_salary'] }}</strong></div>
                    </div>
                    <div class="d-flex justify-content-between mt-2">
                        <div class="text-muted">{{ __('payslips.breakdown.overtime') }}</div>
                        <div>
                            <span class="small text-muted">{{ $breakdown['overtime']['minutes'] }} {{ __('payslips.units.minutes') }}</span>
                            <span class="ms-2">{{ $breakdown['overtime']['amount'] ?? '—' }}</span>
                        </div>
                    </div>
                    <hr class="my-3">
                    <div class="d-flex justify-content-between">
                        <div class="text-muted">{{ __('payslips.breakdown.gross_amount') }}</div>
                        <div><strong>{{ $breakdown['gross_amount'] ?? '—' }}</strong></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h2 class="h6 mb-3">{{ __('payslips.sections.deductions') }}</h2>
                    <div class="d-flex justify-content-between">
                        <div class="text-muted">{{ __('payslips.breakdown.leave_deductions') }}</div>
                        <div>
                            <span class="small text-muted">{{ $breakdown['leave']['days'] }} {{ __('payslips.units.days') }}</span>
                            <span class="ms-2">{{ $breakdown['leave']['amount'] ?? '—' }}</span>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-2">
                        <div class="text-muted">{{ __('payslips.breakdown.adjustments_total') }}</div>
                        <div><strong>{{ $breakdown['adjustments']['total'] }}</strong></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h2 class="h6 mt-4 mb-3">{{ __('payslips.sections.adjustments') }}</h2>
    <x-ui.table.table :columns="[
        ['label' => __('payslips.fields.type')],
        ['label' => __('payslips.fields.amount')],
        ['label' => __('payslips.fields.reason')],
    ]">
        @forelse ($breakdown['adjustments']['items'] as $a)
            <x-ui.table.row>
                <td>{{ __('payroll.adjustment_types.'.$a['type']) }}</td>
                <td>{{ $a['amount'] }}</td>
                <td class="small">{{ $a['reason'] ?? '—' }}</td>
            </x-ui.table.row>
        @empty
            <x-ui.table.row>
                <td colspan="3" class="text-center text-muted py-3">—</td>
            </x-ui.table.row>
        @endforelse
    </x-ui.table.table>
</x-ui.layout.page>

