@extends('layouts.app')
@section('title', 'View Bills')
@section('content')
<div class="flex items-center gap-3 mb-6">
    {{-- Search row: patient search dominates and stretches; date picker
         at fixed comfortable width so it doesn't look orphaned (Issue #15
         — earlier the date column was the only sized element making the
         whole row feel unbalanced). --}}
    <form method="GET" class="flex gap-2 flex-1 min-w-0 items-center">
        <input type="text" name="search" value="{{ request('search') }}"
               placeholder="Search invoice number, patient name, MRN, or phone..."
               class="form-input flex-1 min-w-0">
        <input type="date" name="date" value="{{ request('date') }}"
               class="form-input flex-shrink-0 w-36">
        <button class="btn-primary flex-shrink-0">Filter</button>
        @if(request()->hasAny(['search','date']))
            <a href="{{ route('billing.index') }}" class="btn-secondary flex-shrink-0">Clear</a>
        @endif
    </form>
    <div class="stat-card flex-shrink-0"><p class="text-xs text-gray-500">Today's Collections</p><p class="text-lg font-bold text-green-600">KES {{ number_format($todayTotal) }}</p></div>
</div>
<div class="bg-white rounded-xl border shadow-sm overflow-hidden">
    <table class="w-full"><thead class="bg-gray-50"><tr><th class="table-header">Invoice #</th><th class="table-header">Patient</th><th class="table-header">Date</th><th class="table-header">Mode</th><th class="table-header">Total</th><th class="table-header">Paid</th><th class="table-header">Balance</th><th class="table-header">Status</th></tr></thead>
    <tbody>@forelse($invoices as $inv)
        <tr class="border-b border-gray-50 hover:bg-gray-50" @if($inv->visit_id) data-row-href="{{ route('billing.invoice', $inv->visit_id) }}" @endif><td class="table-cell font-mono text-xs">{{ $inv->invoice_number }}</td><td class="table-cell font-medium">{{ $inv->patient->full_name ?? '' }}</td><td class="table-cell">{{ $inv->created_at->format('d M') }}</td><td class="table-cell capitalize">{{ $inv->payment_mode }}</td><td class="table-cell font-semibold">{{ number_format($inv->total_amount) }}</td><td class="table-cell text-green-600">{{ number_format($inv->amount_paid) }}</td><td class="table-cell text-red-600">{{ number_format($inv->balance) }}</td><td class="table-cell"><span class="badge {{ $inv->status==='paid'?'badge-success':($inv->status==='partial'?'badge-warning':'badge-danger') }}">{{ ucfirst($inv->status) }}</span></td></tr>
    @empty<tr><td colspan="8" class="table-cell text-center text-gray-400 py-8">No invoices.</td></tr>@endforelse</tbody></table>
    <div class="px-4 py-3 border-t">{{ $invoices->withQueryString()->links() }}</div>
</div>
@endsection