@extends('layouts.team')
@section('title', 'Payslips')
@section('content')
<div class="row between" style="gap:16px;align-items:flex-end"><div class="stack" style="gap:6px"><span class="eyebrow">Pay and tax</span><h1 class="d2">Payslips</h1></div>@if($slip)<button type="button" class="btn btn-sm btn-ghost no-print" onclick="window.print()">Download PDF</button>@endif</div>
@if($slips->isEmpty())
    <section class="panel"><x-empty>Your payslips appear here after each month’s salary is paid.</x-empty></section>
@else
<div style="display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:start" class="ps-grid">
    <section class="panel no-print">
        @foreach($slips->groupBy(fn ($s) => substr($s->run->month, 0, 4)) as $year => $list)
            <div class="panel-h"><h2 class="ht">{{ $year }}</h2></div>
            <div class="list">@foreach($list as $s)<a href="{{ route('team.payslips.show', $s) }}" class="li" style="text-decoration:none;{{ $s->id === $slip->id ? 'background:var(--surface);box-shadow:inset 3px 0 0 var(--ink)' : '' }}"><span class="stack" style="flex:1;gap:2px"><span class="b">{{ \Carbon\Carbon::createFromFormat('Y-m', $s->run->month)->format('F') }}</span><span class="xs muted">Paid {{ $s->run->paid_at?->format('j M') }}</span></span><span class="b tnum">{{ inr($s->net) }}</span></a>@endforeach</div>
        @endforeach
    </section>
    <div style="min-width:0">@include('partials.payslip')</div>
</div>
<style>@media (max-width:900px){.ps-grid{grid-template-columns:1fr!important}}</style>
@endif
<p class="small muted no-print">Questions about your pay? Contact HR. Tax declarations and Form 16 are shared by HR each year.</p>
@endsection