@extends('layouts.app')

@section('title', 'Invoices List')
@section('page_title', 'Invoice Management')

@section('content')
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                <i class="bi bi-file-earmark-text"></i>
            </div>
            <h6 class="text-secondary small fw-bold">TOTAL INVOICES</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $invoices->count() }}</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-success bg-opacity-10 text-success">
                <i class="bi bi-check-circle"></i>
            </div>
            <h6 class="text-secondary small fw-bold">FULLY PAID</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $invoices->where('status', 'paid')->count() }}</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                <i class="bi bi-hourglass-split"></i>
            </div>
            <h6 class="text-secondary small fw-bold">PARTIALLY PAID</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $invoices->where('status', 'partial')->count() }}</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-danger bg-opacity-10 text-danger">
                <i class="bi bi-x-circle"></i>
            </div>
            <h6 class="text-secondary small fw-bold">UNPAID / OVERDUE</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $invoices->whereIn('status', ['unpaid', 'overdue'])->count() }}</h3>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm p-4">
    <h5 class="fw-bold mb-4 text-dark">Invoice Ledger</h5>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>Invoice #</th>
                    <th>Customer</th>
                    <th>Date</th>
                    <th>Due Date</th>
                    <th class="text-end">Total Amount</th>
                    <th class="text-end">Amount Paid</th>
                    <th class="text-end">Balance Due</th>
                    <th>Status</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($invoices as $inv)
                    <tr>
                        <td class="fw-bold">{{ $inv->invoice_number }}</td>
                        <td>
                            <div class="fw-semibold text-dark">{{ $inv->client->full_name }}</div>
                            <small class="text-secondary">{{ $inv->client->client_code }}</small>
                        </td>
                        <td>{{ $inv->invoice_date->format('M d, Y') }}</td>
                        <td>{{ $inv->due_date ? $inv->due_date->format('M d, Y') : '-' }}</td>
                        <td class="text-end fw-bold">{{ number_format($inv->total_amount) }} UGX</td>
                        <td class="text-end text-success fw-semibold">{{ number_format($inv->amount_paid) }} UGX</td>
                        <td class="text-end text-{{ $inv->balance_due > 0 ? 'danger' : 'success' }} fw-bold">
                            {{ number_format($inv->balance_due) }} UGX
                        </td>
                        <td>
                            <span class="badge bg-{{ $inv->status_badge }}">{{ ucfirst($inv->status) }}</span>
                        </td>
                        <td class="text-end">
                            <a href="{{ route('invoices.show', $inv->id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye"></i> View
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">No invoices generated yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection