@extends('layouts.app')
@section('title','Invoices')
@section('content')
<div class="d-flex flex-wrap justify-content-between gap-2 mb-3"><h1 class="h4 mb-0">Invoices &amp; payments</h1><a href="{{ route('invoices.create') }}" class="btn btn-primary">New invoice</a></div>
<form class="row g-2 mb-3">
  <div class="col-md-6"><input name="q" value="{{ $q }}" class="form-control" placeholder="Search invoice no, customer or phone"></div>
  <div class="col-md-4"><select name="status" class="form-select"><option value="">All</option>@foreach(['unpaid'=>'Unpaid','partial'=>'Part paid','paid'=>'Paid'] as $k=>$l)<option value="{{ $k }}" @selected(request('status')===$k)>{{ $l }}</option>@endforeach</select></div>
  <div class="col-md-2"><button class="btn btn-outline-primary w-100">Filter</button></div>
</form>
<div class="panel table-responsive"><table class="table table-hover align-middle mb-0">
  <thead><tr><th>Invoice</th><th>Date</th><th>Customer</th><th class="text-end">Total</th><th class="text-end">Paid</th><th class="text-end">Balance</th><th>Status</th></tr></thead>
  <tbody>@forelse($invoices as $i)
    <tr><td><a class="fw-semibold" href="{{ route('invoices.show', $i) }}">{{ $i->invoice_no }}</a></td><td>{{ $i->issue_date->format('M j, Y') }}</td><td>{{ $i->customer->name }}</td>
    <td class="text-end">@money($i->total)</td><td class="text-end">@money($i->paid)</td><td class="text-end">@money($i->balance())</td>
    <td><span class="badge text-bg-{{ $i->statusColor() }}">{{ ucfirst($i->status) }}</span></td></tr>
  @empty<tr><td colspan="7" class="p-4 text-muted">No invoices found.</td></tr>@endforelse</tbody></table></div>
<div class="mt-3">{{ $invoices->links() }}</div>
@endsection