@extends('layouts.app')
@section('title', 'Payroll')
@section('content')
<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <h2 style="font-size:17px;color:#0b4f2c;">Payroll — {{ \Illuminate\Support\Carbon::create($year, $month)->format('F Y') }}</h2>
        <form method="POST" action="{{ url('/api/payroll/generate') }}">
            @csrf
            <input type="hidden" name="month" value="{{ $month }}">
            <input type="hidden" name="year" value="{{ $year }}">
            <button type="submit" style="background:#0b4f2c;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:12.5px;cursor:pointer;">Generate Payslips</button>
        </form>
    </div>

    <table style="width:100%;border-collapse:collapse;font-size:13px;">
        <thead><tr style="background:#f4f6f5;text-align:left;"><th style="padding:8px;">Staff</th><th style="padding:8px;">Gross</th><th style="padding:8px;">Deductions</th><th style="padding:8px;">Net Pay</th><th style="padding:8px;">Status</th></tr></thead>
        <tbody>
            @forelse($payslips as $payslip)
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:8px;font-weight:bold;">{{ $payslip->teacher->user->name ?? '—' }}</td>
                    <td style="padding:8px;">₦{{ number_format($payslip->gross_pay, 2) }}</td>
                    <td style="padding:8px;">₦{{ number_format($payslip->total_deductions, 2) }}</td>
                    <td style="padding:8px;font-weight:bold;color:#0b4f2c;">₦{{ number_format($payslip->net_pay, 2) }}</td>
                    <td style="padding:8px;text-transform:capitalize;">{{ $payslip->status }}</td>
                </tr>
            @empty
                <tr><td colspan="5" style="padding:20px;text-align:center;color:#999;">No payslips generated for this period yet.</td></tr>
            @endforelse
        </tbody>
    </table>
    <p style="font-size:11px;color:#999;margin-top:10px;">Payroll is optional — set each staff member's salary structure from their profile page before generating.</p>
</div>
@endsection