@extends('layouts.admin')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="fw-bold mb-0">Billings & Payments</h3>
        <p class="text-muted mb-0">Track all invoices and payment status.</p>
    </div>
    <a href="/admin/billings/create" class="btn btn-success rounded-pill px-4">
        <i class="bi bi-plus-lg me-2"></i>Create New Bill
    </a>
</div>

<div class="card overflow-hidden">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th class="ps-4">Invoice ID</th>
                    <th>Tenant</th>
                    <th>Unit</th>
                    <th>Period</th>
                    <th>Amount</th>
                    <th>Due Date</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($billings as $billing)
                <tr>
                    <td class="ps-4 fw-mono text-muted">#INV-{{ str_pad($billing->id, 5, '0', STR_PAD_LEFT) }}</td>
                    <td class="fw-semibold">{{ $billing->user->name ?? '—' }}</td>
                    <td class="text-muted small">{{ $billing->unit->name ?? '—' }}</td>
                    <td>{{ $billing->period }}</td>
                    <td class="fw-bold text-primary">Rp {{ number_format($billing->amount) }}</td>
                    <td class="text-muted small">{{ $billing->due_date }}</td>
                    <td>
                        <span class="badge px-3 py-2 {{ $billing->status == 'paid' ? 'bg-success' : 'bg-warning text-dark' }}">
                            {{ ucfirst($billing->status) }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center py-5 text-secondary">
                        <i class="bi bi-receipt" style="font-size:2rem;"></i>
                        <p class="mt-2 mb-0">No billings yet. <a href="/admin/billings/create">Create one now</a>.</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection