@extends('layouts.app')
@section('title', 'Bill '.($bill->bill_no ?: '#'.$bill->id))

@section('content')
@php
    $paid = $bill->paid();
    $due = $bill->due();
    $pct = (float) $bill->amount > 0 ? min(100, round($paid / (float) $bill->amount * 100)) : 0;
@endphp
<x-page-header :title="'Bill '.($bill->bill_no ?: '#'.$bill->id)" :subtitle="$bill->vendor->name">
    @if ($due > 0.004)
        @can('payments.create')
        <a href="{{ route('payments.create', ['direction' => 'paid', 'vendor_bill_id' => $bill->id]) }}" class="btn btn-danger"><i class="bi bi-cash-coin" aria-hidden="true"></i> Pay this bill</a>
        @endcan
    @endif
    @can('vendor_bills.edit')
    <a href="{{ route('vendor-bills.edit', $bill) }}" class="btn btn-ghost"><i class="bi bi-pencil" aria-hidden="true"></i> Edit</a>
    @endcan
    @can('vendor_bills.delete')
    <x-delete-button :action="route('vendor-bills.destroy', $bill)" label="" title="Delete this bill?" confirm="Bills with payments can't be deleted." />
    @endcan
</x-page-header>

<div class="row g-3">
    <div class="col-lg-5">
        <div class="card mb-3">
            <div class="card-header"><span class="card-title">Amount</span><x-pay-status :total="$bill->amount" :paid="$paid" :bar="false" /></div>
            <div class="card-body">
                <div class="stat-value mb-3">{{ money($bill->amount) }}</div>
                <div class="mini-progress {{ $pct >= 100 ? '' : ($pct > 0 ? 'is-partial' : 'is-unpaid') }} mb-3" style="height:8px" role="progressbar" aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ $pct }}% paid"><span style="width: {{ $pct }}%"></span></div>
                <div class="d-flex justify-content-between mb-1"><span class="text-muted">Paid</span><strong class="text-success">{{ money($paid) }}</strong></div>
                <div class="d-flex justify-content-between"><span class="text-muted">Balance</span><strong class="{{ $due > 0.004 ? 'text-danger' : '' }}">{{ money($due) }}</strong></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header"><span class="card-title">Details</span></div>
            <div class="card-body">
                <dl class="dl-grid">
                    <dt>Vendor</dt><dd><a href="{{ route('vendors.show', $bill->vendor) }}">{{ $bill->vendor->name }}</a></dd>
                    <dt>Bill date</dt><dd>{{ $bill->bill_date->format('d M Y') }}</dd>
                    <dt>Due date</dt><dd class="{{ $bill->isOverdue() ? 'text-danger fw-semibold' : '' }}">{{ $bill->due_date?->format('d M Y') ?? '—' }}@if ($bill->isOverdue()) (overdue)@endif</dd>
                    <dt>Order</dt><dd>@if ($bill->order)<a href="{{ route('orders.show', $bill->order) }}">{{ $bill->order->order_no }}</a> · {{ $bill->order->client->name }}@else — @endif</dd>
                    <dt>Description</dt><dd>{{ $bill->description ?: '—' }}</dd>
                    @if ($bill->notes)<dt>Notes</dt><dd>{!! nl2br(e($bill->notes)) !!}</dd>@endif
                </dl>
            </div>
        </div>
    </div>
    @can('payments.view')
    <div class="col-lg-7">
        <div class="card h-100">
            <div class="card-header"><span class="card-title">Payments against this bill</span></div>
            <div class="table-wrap"><table class="table table-modern table-cards table-sm align-middle mb-0">
                <thead><tr><th>Date</th><th>Method</th><th>Reference</th><th class="num">Amount</th></tr></thead>
                <tbody>
                @forelse ($bill->payments as $p)
                    <tr>
                        <td class="cell-title" data-label="Date"><a href="{{ route('payments.edit', $p) }}" class="cell-main text-decoration-none">{{ $p->paid_on->format('d M Y') }}</a></td>
                        <td data-label="Method">{{ \App\Models\Payment::METHODS[$p->method] ?? $p->method }}</td>
                        <td data-label="Reference">{{ $p->reference ?: '—' }}</td>
                        <td class="num fw-semibold money-out" data-label="Amount">−{{ money($p->amount) }}</td>
                    </tr>
                @empty
                    <tr class="empty-row"><td colspan="4"><x-empty icon="cash-coin" title="Not paid yet" text="Payments made against this bill will appear here." /></td></tr>
                @endforelse
                </tbody>
            </table></div>
        </div>
    </div>
    @endcan
</div>
@endsection