@extends('layouts.app')

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

@section('content')
<div class="max-w-7xl space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-slate-900">Payroll</h1>
        <p class="mt-1 text-sm text-slate-500">Select a month to run or view payroll.</p>
    </div>

    <div class="flex items-center gap-2">
        <a href="{{ route('payroll.v2.index', ['year' => $year - 1]) }}" class="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50" aria-label="Previous year">&lsaquo;</a>
        <span class="min-w-[4rem] text-center text-lg font-semibold text-slate-900">{{ $year }}</span>
        <a href="{{ route('payroll.v2.index', ['year' => $year + 1]) }}" class="flex h-9 w-9 items-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50" aria-label="Next year">&rsaquo;</a>
    </div>

    <div class="flex flex-wrap items-center gap-3">
        <div class="flex flex-wrap gap-1.5">
            @foreach(range(1, 12) as $m)
                @php
                    $status = $monthStatuses[$m] ?? 'pending';
                    $dotClass = $status === 'completed' ? 'bg-emerald-500' : ($status === 'current' ? 'bg-orange-500' : ($status === 'future' ? 'bg-slate-300' : 'bg-amber-500'));
                @endphp
                <a href="{{ route('payroll.v2.cycles.run.redirect', ['year' => $year, 'month' => $m]) }}" class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition border border-slate-200 bg-white text-slate-700 hover:bg-slate-50">
                    <span class="h-2 w-2 shrink-0 rounded-full {{ $dotClass }}"></span>
                    {{ date('M', mktime(0, 0, 0, $m, 1)) }}
                </a>
            @endforeach
        </div>
        <div class="flex flex-wrap items-center gap-4 text-xs text-slate-500">
            <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-emerald-500"></span> Completed</span>
            <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-orange-500"></span> Current</span>
            <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-amber-500"></span> Pending</span>
            <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-slate-300"></span> Future</span>
        </div>
    </div>

</div>
@endsection