@extends('layouts.epelcon')
@section('title', 'Payroll Report')

@section('content')
    <div class="mb-5 flex items-center justify-between print:hidden">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Payroll report</h1>
            <p class="text-sm text-slate-500">6-month payroll cost trend, plus a departmental breakdown.</p>
        </div>
        <button onclick="window.print()" class="rounded-xl bg-slate-900 px-5 py-2.5 text-sm font-bold text-white hover:bg-slate-800">🖨 Print</button>
    </div>

    <div class="grid gap-5 lg:grid-cols-2">
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-3 font-bold text-slate-900">Monthly payroll cost</h2>
            <table class="w-full text-sm">
                <thead><tr class="border-b border-slate-100 text-left text-xs font-bold uppercase text-slate-400"><th class="py-2">Month</th><th class="py-2 text-right">Gross</th><th class="py-2 text-right">Loans</th><th class="py-2 text-right">Net paid</th></tr></thead>
                <tbody class="divide-y divide-slate-100">
                @foreach ($monthly as $row)
                    <tr>
                        <td class="py-2.5 font-bold text-slate-800">{{ $row['label'] }}</td>
                        <td class="py-2.5 text-right">@money($row['gross'])</td>
                        <td class="py-2.5 text-right {{ $row['loan_deductions'] > 0 ? 'text-amber-600' : 'text-slate-400' }}">@money($row['loan_deductions'])</td>
                        <td class="py-2.5 text-right font-bold text-emerald-600">@money($row['net'])</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-3 font-bold text-slate-900">Payroll cost by department</h2>
            <table class="w-full text-sm">
                <thead><tr class="border-b border-slate-100 text-left text-xs font-bold uppercase text-slate-400"><th class="py-2">Department</th><th class="py-2 text-right">Headcount</th><th class="py-2 text-right">Monthly cost</th></tr></thead>
                <tbody class="divide-y divide-slate-100">
                @foreach ($byDepartment as $row)
                    <tr>
                        <td class="py-2.5 font-bold text-slate-800">{{ $row['name'] }}</td>
                        <td class="py-2.5 text-right text-slate-600">{{ $row['headcount'] }}</td>
                        <td class="py-2.5 text-right font-bold text-slate-900">@money($row['monthly_cost'])</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection
