@extends('layouts.app')
@section('title', 'Receivables')

@section('content')
<x-page-header title="Receivables" subtitle="Clients who owe you money">
    @can('data.export')
    <a href="{{ request()->fullUrlWithQuery(['export' => 'csv']) }}" class="btn btn-ghost d-print-none"><i class="bi bi-download" aria-hidden="true"></i> Export</a>
    @endcan
    <button class="btn btn-ghost d-print-none" type="button" onclick="window.print()"><i class="bi bi-printer" aria-hidden="true"></i> Print</button>
</x-page-header>

<div class="card card-body py-3 mb-3 hero-card">
    <div class="d-flex align-items-center gap-3"><span class="icon-chip" style="background:rgba(255,255,255,.18);color:#fff"><i class="bi bi-people"></i></span>
        <div><div class="stat-label">Total to receive</div><div class="stat-value">{{ money($total) }}</div></div>
        <div class="ms-auto small" style="color:rgba(255,255,255,.8)">{{ $clients->count() }} {{ \Illuminate\Support\Str::plural('client', $clients->count()) }}</div></div>
</div>

@if ($clients->isNotEmpty())
<div class="row g-3 mb-3">
    <div class="col-lg-6"><div class="card h-100"><div class="card-header"><span class="card-title">Biggest balances</span></div><div class="card-body"><div class="chart-box h-sm"><canvas data-chart='@json($chart, JSON_HEX_APOS | JSON_HEX_AMP)' role="img" aria-label="Bar chart of the clients who owe the most"></canvas></div></div></div></div>
    <div class="col-lg-6"><div class="card h-100"><div class="card-header"><span class="card-title">Ageing</span><span class="card-sub">Payments applied to oldest orders first</span></div><div class="card-body"><div class="chart-box h-sm"><canvas data-chart='@json($ageChart, JSON_HEX_APOS | JSON_HEX_AMP)' role="img" aria-label="Bar chart of unpaid amounts by age"></canvas></div></div></div></div>
</div>
@endif

<div class="card">
    <div class="table-wrap">
        <table class="table table-modern table-cards align-middle">
            <thead><tr><th>Client</th><th>Phone</th><th class="num">Billed</th><th class="num">Received</th><th class="num">Balance due</th><th class="d-print-none"><span class="visually-hidden">Actions</span></th></tr></thead>
            <tbody>
            @forelse ($clients as $c)
                <tr>
                    <td class="cell-title" data-label="Client"><div class="d-flex align-items-center gap-3"><x-avatar :name="$c->name" :size="32" /><a href="{{ route('clients.show', $c) }}" class="cell-main text-decoration-none">{{ $c->name }}</a></div></td>
                    <td data-label="Phone">{{ $c->phone ?: '—' }}</td>
                    <td class="num" data-label="Billed">{{ money($c->billed()) }}</td>
                    <td class="num" data-label="Received">{{ money($c->received()) }}</td>
                    <td class="num fw-semibold text-danger" data-label="Balance due">{{ money($c->balance()) }}@if ($c->credit_limit > 0 && $c->balance() > $c->credit_limit)<span class="cell-sub">over credit limit</span>@endif</td>
                    <td class="actions-col d-print-none"><a href="{{ route('payments.create', ['direction' => 'received', 'client_id' => $c->id]) }}" class="btn btn-sm btn-soft-primary">Receive</a></td>
                </tr>
            @empty
                <tr class="empty-row"><td colspan="6"><x-empty icon="emoji-smile" title="Nobody owes you anything" text="Every client is paid up." /></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection