@extends('layouts.app')
@section('title','Payroll')
@section('content')
<x-ui.page-toolbar title="Payroll" description="Employee compensation, approval-controlled payroll periods, account-backed salary payments and payslips." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Payroll']]">
    <x-slot:actions>
        @if(auth()->user()->can('payroll.compensation.manage'))<a class="mf-btn" href="{{ route('payroll.compensations') }}">Compensation Setup</a>@endif
        @if(auth()->user()->can('payroll.periods.create'))<a class="mf-btn mf-btn-primary" href="{{ route('payroll.create') }}">New Payroll Period</a>@endif
    </x-slot:actions>
</x-ui.page-toolbar>

<div class="grid gap-3 md:grid-cols-3 mb-4">
    <div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Draft net payroll</div><div class="mt-1 text-xl font-semibold">{{ number_format((float)$summary['draft'],2) }}</div></div>
    <div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Approved awaiting payment</div><div class="mt-1 text-xl font-semibold">{{ number_format((float)$summary['approved'],2) }}</div></div>
    <div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Paid payroll</div><div class="mt-1 text-xl font-semibold">{{ number_format((float)$summary['paid'],2) }}</div></div>
</div>

<form method="GET" class="mf-card mf-card-body mb-4">
    <div class="grid gap-2 md:grid-cols-4">
        <input class="mf-input" name="search" value="{{ request('search') }}" placeholder="Period number or name">
        <select class="mf-select" name="branch_id"><option value="">All branches</option>@foreach($branches as $branch)<option value="{{ $branch->id }}" @selected((string)request('branch_id')===(string)$branch->id)>{{ $branch->name }}</option>@endforeach</select>
        <select class="mf-select" name="status"><option value="">All statuses</option>@foreach(['draft'=>'Draft','approved'=>'Approved','rejected'=>'Rejected','paid'=>'Paid'] as $value=>$label)<option value="{{ $value }}" @selected(request('status')===$value)>{{ $label }}</option>@endforeach</select>
        <button class="mf-btn mf-btn-primary">Apply filters</button>
    </div>
</form>

<div class="mf-card">
    <div class="mf-table-frame border-0"><table class="mf-table" data-standard-table>
        <thead><tr><th>Period</th><th>Branch</th><th>Dates</th><th>Employees</th><th>Gross</th><th>Deductions</th><th>Net</th><th>Status</th><th></th></tr></thead>
        <tbody>
        @forelse($periods as $period)
            <tr>
                <td><div class="font-medium">{{ $period->period_number }}</div><div class="text-xs text-muted-foreground">{{ $period->name }}</div></td>
                <td>{{ $period->branch->name }}</td>
                <td>{{ $period->start_date->format('d M Y') }} – {{ $period->end_date->format('d M Y') }}<div class="text-xs text-muted-foreground">Pay {{ $period->pay_date->format('d M Y') }}</div></td>
                <td>{{ $period->entries_count }}</td>
                <td>{{ number_format((float)$period->total_gross,2) }}</td>
                <td>{{ number_format((float)$period->total_deductions,2) }}</td>
                <td class="font-semibold">{{ number_format((float)$period->total_net,2) }}</td>
                <td><span class="mf-badge {{ $period->status==='paid'?'mf-badge-success':($period->status==='rejected'?'mf-badge-danger':($period->status==='approved'?'mf-badge-warning':'')) }}">{{ ucfirst($period->status) }}</span></td>
                <td class="text-right"><a class="mf-btn" href="{{ route('payroll.show',$period) }}">Open</a></td>
            </tr>
        @empty<tr><td colspan="9" class="text-center text-muted-foreground">No payroll periods match the selected filters.</td></tr>@endforelse
        </tbody>
    </table></div>
</div>
<div class="mt-4">{{ $periods->links() }}</div>
@endsection
