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

@section('content')
<x-page-header title="Payables" subtitle="What you owe vendors">
    @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="row g-3 mb-3">
    <div class="col-lg-5">
        <div class="card card-body py-3 hero-card h-100">
            <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-truck"></i></span>
                <div><div class="stat-label">Total to pay</div><div class="stat-value">{{ money($total) }}</div></div></div>
            <div class="small mt-3" style="color:rgba(255,255,255,.8)">{{ $vendors->count() }} {{ \Illuminate\Support\Str::plural('vendor', $vendors->count()) }} · {{ $unpaidBills->count() }} unpaid {{ \Illuminate\Support\Str::plural('bill', $unpaidBills->count()) }} · {{ $unpaidBills->filter(fn ($b) => $b->isOverdue())->count() }} overdue</div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="card h-100"><div class="card-header"><span class="card-title">Biggest balances</span></div>
            <div class="card-body">
                @if ($vendors->isNotEmpty())<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 vendors you owe the most"></canvas></div>
                @else<x-empty icon="emoji-smile" title="You don't owe any vendor" />@endif
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header"><span class="card-title">By vendor</span></div>
    <div class="table-wrap">
        <table class="table table-modern table-cards align-middle">
            <thead><tr><th>Vendor</th><th>Category</th><th>Phone</th><th class="num">Billed</th><th class="num">Paid</th><th class="num">We owe</th><th class="d-print-none"><span class="visually-hidden">Actions</span></th></tr></thead>
            <tbody>
            @forelse ($vendors as $v)
                <tr>
                    <td class="cell-title" data-label="Vendor"><div class="d-flex align-items-center gap-3"><x-avatar :name="$v->name" :size="32" /><a href="{{ route('vendors.show', $v) }}" class="cell-main text-decoration-none">{{ $v->name }}</a></div></td>
                    <td data-label="Category">{{ $v->category ?: '—' }}</td>
                    <td data-label="Phone">{{ $v->phone ?: '—' }}</td>
                    <td class="num" data-label="Billed">{{ money($v->billed()) }}</td>
                    <td class="num" data-label="Paid">{{ money($v->paid()) }}</td>
                    <td class="num fw-semibold text-danger" data-label="We owe">{{ money($v->balance()) }}</td>
                    <td class="actions-col d-print-none"><a href="{{ route('payments.create', ['direction' => 'paid', 'vendor_id' => $v->id]) }}" class="btn btn-sm btn-soft-primary">Pay</a></td>
                </tr>
            @empty
                <tr class="empty-row"><td colspan="7"><x-empty icon="emoji-smile" title="You don't owe any vendor" /></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="card">
    <div class="card-header"><span class="card-title">Unpaid bills</span></div>
    <div class="table-wrap">
        <table class="table table-modern table-cards align-middle">
            <thead><tr><th>Bill</th><th>Vendor</th><th>Bill date</th><th>Due date</th><th class="num">Amount</th><th class="num">Balance</th></tr></thead>
            <tbody>
            @forelse ($unpaidBills as $b)
                <tr>
                    <td class="cell-title" data-label="Bill"><a href="{{ route('vendor-bills.show', $b) }}" class="cell-main text-decoration-none">{{ $b->bill_no ?: '#'.$b->id }}</a></td>
                    <td data-label="Vendor">{{ $b->vendor->name }}</td>
                    <td data-label="Bill date">{{ $b->bill_date->format('d M Y') }}</td>
                    <td data-label="Due date" class="{{ $b->isOverdue() ? 'text-danger fw-semibold' : '' }}">{{ $b->due_date?->format('d M Y') ?? '—' }}@if ($b->isOverdue()) <span class="badge-soft badge-soft-danger no-dot ms-1">Overdue</span>@endif</td>
                    <td class="num" data-label="Amount">{{ money($b->amount) }}</td>
                    <td class="num fw-semibold" data-label="Balance">{{ money($b->due()) }}</td>
                </tr>
            @empty
                <tr class="empty-row"><td colspan="6"><x-empty icon="check2-circle" title="No unpaid bills" /></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer">Payments made "on account" (not tied to a bill) reduce the vendor balance above but not an individual bill, so the two lists can differ.</div>
</div>
@endsection