@extends('layouts.app')
@section('title',$period->period_number)
@section('content')
<x-ui.page-toolbar :title="$period->period_number" :description="$period->name.' · '.$period->branch->name" :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Payroll','url'=>route('payroll.index')],['label'=>$period->period_number]]">
    <x-slot:actions><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></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">Gross payroll</div><div class="mt-1 text-xl font-semibold">{{ number_format((float)$period->total_gross,2) }}</div></div>
    <div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Total deductions</div><div class="mt-1 text-xl font-semibold">{{ number_format((float)$period->total_deductions,2) }}</div></div>
    <div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Net payroll</div><div class="mt-1 text-xl font-semibold">{{ number_format((float)$period->total_net,2) }}</div></div>
</div>

<div class="mf-card mf-card-body mb-4">
    <div class="grid gap-2 text-sm md:grid-cols-4">
        <div><span class="text-muted-foreground">Period</span><div class="font-medium">{{ $period->start_date->format('d M Y') }} – {{ $period->end_date->format('d M Y') }}</div></div>
        <div><span class="text-muted-foreground">Scheduled pay date</span><div class="font-medium">{{ $period->pay_date->format('d M Y') }}</div></div>
        <div><span class="text-muted-foreground">Created by</span><div class="font-medium">{{ $period->creator?->name ?? '—' }}</div></div>
        <div><span class="text-muted-foreground">Approved by</span><div class="font-medium">{{ $period->approver?->name ?? '—' }}</div></div>
        @if($period->status==='paid')<div><span class="text-muted-foreground">Paid from</span><div class="font-medium">{{ $period->paidFromAccount?->name ?? '—' }}</div></div><div><span class="text-muted-foreground">Paid by</span><div class="font-medium">{{ $period->payer?->name ?? '—' }}</div></div><div><span class="text-muted-foreground">Paid at</span><div class="font-medium">{{ $period->paid_at?->format('d M Y H:i') }}</div></div>@endif
    </div>
    @if($period->decision_comments)<div class="mt-3 border-t pt-3 text-sm"><span class="text-muted-foreground">Decision comments:</span> {{ $period->decision_comments }}</div>@endif
</div>

@if($period->status==='draft' && auth()->user()->can('payroll.approve'))
<div class="grid gap-3 md:grid-cols-2 mb-4">
    <form method="POST" action="{{ route('payroll.decision',$period) }}" class="mf-card mf-card-body">@csrf<input type="hidden" name="decision" value="approve"><label class="text-sm">Approval comments<textarea class="mf-input mt-1" name="comments" rows="2" placeholder="Optional approval note"></textarea></label><div class="mt-2 text-right"><button class="mf-btn mf-btn-primary">Approve Payroll</button></div></form>
    <form method="POST" action="{{ route('payroll.decision',$period) }}" class="mf-card mf-card-body">@csrf<input type="hidden" name="decision" value="reject"><label class="text-sm">Rejection reason<textarea class="mf-input mt-1" name="comments" rows="2" required></textarea></label><div class="mt-2 text-right"><button class="mf-btn">Reject Payroll</button></div></form>
</div>
@endif

@if($period->status==='approved' && auth()->user()->can('payroll.pay'))
<form method="POST" action="{{ route('payroll.pay',$period) }}" class="mf-card mf-card-body mb-4" data-ui="form-shell">
    @csrf
    <div class="grid gap-3 md:grid-cols-[1fr_auto] md:items-end">
        <label class="text-sm">Pay full net payroll from<select class="mf-select mt-1" name="financial_account_id" required><option value="">Select branch account</option>@foreach($accounts as $account)<option value="{{ $account->id }}">{{ $account->name }} — Balance {{ number_format((float)$account->current_balance,2) }}</option>@endforeach</select></label>
        <button class="mf-btn mf-btn-primary">Pay {{ number_format((float)$period->total_net,2) }}</button>
    </div>
    <div class="mt-2 text-xs text-muted-foreground">Payment is atomic: the full approved payroll is paid or nothing is posted. Each employee receives a permanent account transaction, payroll ledger entry and payslip.</div>
</form>
@endif

<div class="mf-card">
    <div class="mf-table-frame border-0"><table class="mf-table" data-standard-table>
        <thead><tr><th>Employee</th><th>Basic</th><th>Gross</th><th>Deductions</th><th>Net</th><th>Status</th><th>Details / Payslip</th></tr></thead>
        <tbody>
        @foreach($period->entries as $entry)
            <tr>
                <td><div class="font-medium">{{ $entry->employee_name_snapshot }}</div><div class="text-xs text-muted-foreground">{{ $entry->employee_number_snapshot ?: '—' }} · {{ $entry->position_snapshot ?: 'No position' }}</div></td>
                <td>{{ number_format((float)$entry->basic_salary,2) }}</td>
                <td>{{ number_format((float)$entry->gross,2) }}</td>
                <td>{{ number_format((float)$entry->total_deductions,2) }}</td>
                <td class="font-semibold">{{ number_format((float)$entry->net,2) }}</td>
                <td><span class="mf-badge {{ $entry->status==='paid'?'mf-badge-success':'' }}">{{ ucfirst($entry->status) }}</span></td>
                <td class="min-w-[260px]">
                    @if($period->status==='draft' && auth()->user()->can('payroll.periods.create'))
                    <details><summary class="mf-btn cursor-pointer">Edit components</summary>
                        <form method="POST" action="{{ route('payroll.entries.update',[$period,$entry]) }}" class="mt-3" data-ui="form-shell">@csrf @method('PUT')
                            <div class="grid gap-2 md:grid-cols-2">
                                @foreach(['basic_salary'=>'Basic salary','allowances'=>'Allowances','bonus'=>'Bonus','commission'=>'Commission','overtime'=>'Overtime','deductions'=>'Deductions','advances'=>'Advances','other_deductions'=>'Other deductions'] as $field=>$label)
                                    <label class="text-xs">{{ $label }}<input class="mf-input mt-1" type="number" step="0.01" min="0" name="{{ $field }}" value="{{ $entry->{$field} }}" required></label>
                                @endforeach
                            </div>
                            <div class="mt-2 text-right"><button class="mf-btn mf-btn-primary">Update</button></div>
                        </form>
                    </details>
                    @elseif($entry->status==='paid')
                        <div class="flex gap-2"><a class="mf-btn" href="{{ route('payroll.payslip',[$period,$entry]) }}">Print</a><a class="mf-btn" href="{{ route('payroll.payslip.pdf',[$period,$entry]) }}">PDF</a></div>
                    @else
                        <details><summary class="mf-btn cursor-pointer">View components</summary><div class="mt-2 text-xs leading-6">Allowances {{ number_format((float)$entry->allowances,2) }} · Bonus {{ number_format((float)$entry->bonus,2) }} · Commission {{ number_format((float)$entry->commission,2) }} · Overtime {{ number_format((float)$entry->overtime,2) }} · Deductions {{ number_format((float)$entry->deductions,2) }} · Advances {{ number_format((float)$entry->advances,2) }} · Other deductions {{ number_format((float)$entry->other_deductions,2) }}</div></details>
                    @endif
                </td>
            </tr>
        @endforeach
        </tbody>
    </table></div>
</div>
@endsection
