@extends('layouts.app')
@section('title','Arrears & Collections')
@section('content')
<x-ui.page-toolbar title="Arrears & Collections" description="Overdue active loans grouped by days in arrears, with current unpaid components and collateral." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Arrears & Collections']]" />

<div class="mb-4 grid gap-2 sm:grid-cols-2 lg:grid-cols-5">
@foreach(['1-7'=>'1–7 days','8-30'=>'8–30 days','31-60'=>'31–60 days','61-90'=>'61–90 days','90+'=>'90+ days'] as $key=>$label)
@php($row=$summary->get($key))
<a href="{{ route('arrears.index',['bucket'=>$key]) }}" class="mf-card mf-card-body {{ $bucket===$key ? 'ring-1 ring-primary' : '' }}">
    <div class="text-xs text-muted-foreground">{{ $label }}</div>
    <div class="mt-1 text-lg font-semibold">{{ number_format((int)($row->loans_count ?? 0)) }}</div>
    <div class="text-xs text-muted-foreground">Overdue {{ number_format((float)($row->total_overdue ?? 0),2) }}</div>
</a>
@endforeach
</div>

<form method="GET" class="mf-card mf-card-body mb-4">
    <div class="mf-form-inline">
        <div>
            <input class="mf-input" name="search" value="{{ $search }}" placeholder="Loan number, customer, customer number or phone">
        </div>
        <select class="mf-input" name="bucket" style="width:min(240px,35vw);flex:0 1 240px;">
            <option value="">All arrears buckets</option>
            @foreach(['1-7'=>'1–7 days','8-30'=>'8–30 days','31-60'=>'31–60 days','61-90'=>'61–90 days','90+'=>'90+ days'] as $key=>$label)
            <option value="{{ $key }}" @selected($bucket===$key)>{{ $label }}</option>
            @endforeach
        </select>
        <button class="mf-btn mf-btn-primary">Filter</button>
    </div>
</form>

<div class="mf-card">
<div class="border-b p-4"><h2 class="font-semibold">Overdue loans</h2><p class="mt-1 text-xs text-muted-foreground">Amounts are calculated from unpaid overdue installments, including assessed late-payment penalties.</p></div>
<div class="mf-table-frame border-0"><table class="mf-table" data-standard-table><thead><tr><th>Customer</th><th>Branch</th><th>Loan officer</th><th>Principal</th><th>Interest</th><th>Fees</th><th>Penalties</th><th>Total overdue</th><th>Days</th><th>Collateral</th><th></th></tr></thead><tbody>
@forelse($loans as $loan)
<tr>
<td><div class="font-medium">{{ $loan->customer->full_name }}</div><div class="text-xs text-muted-foreground">{{ $loan->customer->phone }} · {{ $loan->loan_number }}</div></td>
<td>{{ $loan->branch->name }}</td>
<td>{{ $loan->creator?->name ?? '—' }}</td>
<td>{{ number_format((float)$loan->overdue_principal,2) }}</td>
<td>{{ number_format((float)$loan->overdue_interest,2) }}</td>
<td>{{ number_format((float)$loan->overdue_fees,2) }}</td>
<td>{{ number_format((float)$loan->overdue_penalties,2) }}</td>
<td class="font-semibold">{{ number_format((float)$loan->total_overdue,2) }}</td>
<td><span class="mf-badge mf-badge-destructive">{{ $loan->days_overdue }}d</span><div class="text-xs text-muted-foreground">{{ $loan->arrears_bucket }}</div></td>
<td class="max-w-xs">@forelse($loan->collaterals as $item)<span class="mf-badge mf-badge-muted">{{ $item->code }}</span>@empty<span class="text-muted-foreground">—</span>@endforelse</td>
<td class="text-right"><a class="mf-btn" href="{{ route('arrears.show',$loan) }}">Open</a></td>
</tr>
@empty<tr><td colspan="11" class="text-center text-muted-foreground">No overdue loans match these filters.</td></tr>@endforelse
</tbody></table></div></div>
<div class="mt-4">{{ $loans->links() }}</div>
@endsection
