@php
    $rows = $myPayslipRows ?? collect();
    $years = $myPayslipYears ?? collect();
    $selectedYear = (int) ($myPayslipSelectedYear ?? 0);
    $selected = $myPayslipSelected ?? null;
    $preview = $myPayslipPreview ?? null;
@endphp

<div class="grid grid-cols-1 gap-4 xl:grid-cols-[300px_minmax(0,1fr)]">
    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white">
        <div class="border-b border-slate-200 px-4 py-3">
            <div class="flex items-center justify-between gap-2">
                <h3 class="text-sm font-semibold text-slate-800">Pay Slips</h3>
                <span class="text-xs text-slate-500">{{ $rows->count() }} records</span>
            </div>
            <p class="mt-1 text-xs text-slate-500">Select a month to preview your payslip.</p>
        </div>
        <div class="border-b border-slate-200 p-3">
            <form method="GET" action="{{ route('payroll.index') }}" class="flex items-center gap-2">
                <input type="hidden" name="tab" value="my">
                <input type="hidden" name="my_sub" value="payslips">
                @if($selected)
                    <input type="hidden" name="source" value="{{ $selected['source'] ?? '' }}">
                    <input type="hidden" name="payslip_id" value="{{ (int) ($selected['id'] ?? 0) }}">
                @endif
                <label for="my-payslip-year" class="text-xs font-medium text-slate-600">Year</label>
                <select id="my-payslip-year" name="year" class="h-9 w-full rounded-lg border border-slate-300 px-2 text-sm text-slate-700 js-select2" onchange="this.form.submit()">
                    @forelse($years as $year)
                        <option value="{{ (int) $year }}" @selected((int) $year === $selectedYear)>{{ (int) $year }}</option>
                    @empty
                        <option value="{{ date('Y') }}">{{ date('Y') }}</option>
                    @endforelse
                </select>
            </form>
        </div>
        <div class="max-h-[68vh] overflow-y-auto p-2">
            @forelse($rows as $row)
                @php
                    $isActive = $selected
                        && (int) ($selected['id'] ?? 0) === (int) ($row['id'] ?? 0)
                        && (string) ($selected['source'] ?? '') === (string) ($row['source'] ?? '');
                @endphp
                <a
                    href="{{ route('payroll.index', ['tab' => 'my', 'my_sub' => 'payslips', 'year' => $selectedYear, 'source' => $row['source'] ?? '', 'payslip_id' => (int) ($row['id'] ?? 0)]) }}"
                    class="mb-2 block rounded-lg border px-3 py-2 transition {{ $isActive ? 'border-primary bg-primary/10' : 'border-slate-200 bg-white hover:bg-slate-50' }}"
                >
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <div class="text-sm font-medium text-slate-800">{{ $row['period'] ?? '—' }}</div>
                            <div class="text-xs text-slate-500">{{ strtoupper((string) ($row['source'] ?? '')) }}</div>
                        </div>
                        <div class="text-right">
                            <div class="text-xs text-slate-500">Net</div>
                            <div class="text-sm font-semibold text-slate-900">₹{{ number_format((float) ($row['net'] ?? 0), 2) }}</div>
                        </div>
                    </div>
                </a>
            @empty
                <div class="rounded-lg border border-dashed border-slate-300 px-3 py-8 text-center">
                    <p class="text-sm font-medium text-slate-700">No payslips found</p>
                    <p class="mt-1 text-xs text-slate-500">Payslips for the selected year will appear here.</p>
                </div>
            @endforelse
        </div>
    </div>

    <div>
        @include('payroll.my.partials.payslip-preview', ['preview' => $preview, 'showActions' => true])
    </div>
</div>