@extends('layouts.app')

@section('title', 'Run Payroll - ' . $cycle->year . '-' . str_pad($cycle->month, 2, '0', STR_PAD_LEFT))
@section('heading', 'Run Payroll')

@section('content')
<div class="max-w-7xl space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900">{{ date('F', mktime(0, 0, 0, $cycle->month, 1)) }} {{ $cycle->year }}</h1>
            <p class="mt-1 text-sm text-slate-500">Status: <span class="font-medium">{{ $cycle->status }}</span>@if($cycle->isLocked()) (Locked)@endif</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('payroll.v2.index') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back to grid</a>
            @if($cycle->canEdit())
                <form action="{{ route('payroll.v2.cycles.run.store', $cycle) }}" method="POST" class="inline" onsubmit="return confirm('Recalculate payroll for this cycle?');">
                    @csrf
                    <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90">Run / Re-run Payroll</button>
                </form>
                @if($cycle->status !== 'completed' && $cycle->status !== 'locked')
                    <form action="{{ route('payroll.v2.cycles.complete', $cycle) }}" method="POST" class="inline" onsubmit="return confirm('Mark this cycle as completed?');">
                        @csrf
                        <button type="submit" class="rounded-lg bg-slate-700 px-4 py-2 text-sm font-medium text-white hover:bg-slate-600">Mark Completed</button>
                    </form>
                @endif
                @if($cycle->status === 'completed' && !$cycle->isLocked())
                    <form action="{{ route('payroll.v2.cycles.lock', $cycle) }}" method="POST" class="inline" onsubmit="return confirm('Lock this payroll cycle? No further edits will be allowed.');">
                        @csrf
                        <button type="submit" class="rounded-lg bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-700">Lock</button>
                    </form>
                @endif
            @else
                @if($cycle->isLocked())
                    <form action="{{ route('payroll.v2.cycles.unlock', $cycle) }}" method="POST" class="inline" onsubmit="return confirm('Unlock this cycle? Use with caution.');">
                        @csrf
                        <button type="submit" class="rounded-lg border border-amber-500 bg-white px-4 py-2 text-sm font-medium text-amber-700 hover:bg-amber-50">Unlock</button>
                    </form>
                @endif
            @endif
        </div>
    </div>

    @php
        $totalGross = $cycle->employeePayrolls->sum('gross_monthly');
        $totalNet = $cycle->employeePayrolls->sum('net_monthly');
        $totalDeductions = $totalGross - $totalNet;
    @endphp
    <div class="grid gap-4 sm:grid-cols-3">
        <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
            <p class="text-xs font-medium uppercase text-slate-500">Employees</p>
            <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $cycle->employeePayrolls->count() }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
            <p class="text-xs font-medium uppercase text-slate-500">Total Gross</p>
            <p class="mt-1 text-2xl font-semibold text-slate-900">{{ number_format($totalGross, 2) }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
            <p class="text-xs font-medium uppercase text-slate-500">Total Net</p>
            <p class="mt-1 text-2xl font-semibold text-slate-900">{{ number_format($totalNet, 2) }}</p>
        </div>
    </div>

    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">ID</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Name</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Department</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Earnings</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Deductions</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Net</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 bg-white">
                    @forelse($cycle->employeePayrolls as $ep)
                        @php
                            $earningsSum = $ep->components->where('category', 'earning')->sum('amount');
                            $deductionsSum = abs($ep->components->where('category', 'deduction')->sum('amount'));
                            $empId = $ep->user?->employee_number ?? 'EMP' . str_pad((string)$ep->user_id, 3, '0', STR_PAD_LEFT);
                        @endphp
                        <tr class="hover:bg-slate-50/50">
                            <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $empId }}</td>
                            <td class="whitespace-nowrap px-4 py-3">
                                @if($ep->user)<x-user-avatar :user="$ep->user" size="sm" class="shrink-0" />@endif
                                <span class="font-medium text-slate-900">{{ $ep->user?->name ?? '—' }}</span>
                            </td>
                            <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $ep->user?->department?->name ?? '—' }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-600">{{ number_format($earningsSum, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-600">{{ number_format($deductionsSum, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm font-medium text-slate-900">{{ number_format($ep->net_monthly ?? 0, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-sm">
                                <a href="{{ route('payroll.v2.employees.show', [$cycle, $ep]) }}" class="text-primary hover:underline">Detail</a>
                                <span class="text-slate-300">|</span>
                                <a href="{{ route('payroll.v2.payslips.show', [$cycle, $ep]) }}" class="text-primary hover:underline">Payslip</a>
                                <a href="{{ route('payroll.v2.payslips.download', [$cycle, $ep]) }}" class="ml-1 text-slate-500 hover:underline" target="_blank">PDF</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-12 text-center text-sm text-slate-500">
                                No payroll data. Click &quot;Run / Re-run Payroll&quot; to calculate.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection