@extends('layouts.app')
@section('title', 'Top Clients Report')
@section('page-title', 'Reports')

@section('content')

<div class="d-flex flex-wrap gap-2 mb-4">
    <a href="{{ route('reports.revenue') }}" class="btn btn-sm btn-outline-secondary">Revenue</a>
    <a href="{{ route('reports.clients') }}" class="btn btn-sm btn-dark">Top Clients</a>
    <a href="{{ route('reports.tax') }}"     class="btn btn-sm btn-outline-secondary">VAT Report</a>
    <a href="{{ route('reports.export', ['type'=>'invoices']) }}" class="btn btn-sm btn-outline-success ms-auto">
        <i class="bi bi-download me-1"></i>Export CSV
    </a>
</div>

<div class="card table-card">
    <div class="p-3 border-bottom">
        <h6 class="fw-700 mb-0" style="color:#1e293b;">Top 10 Clients by Revenue</h6>
    </div>

    @if($clients->isEmpty())
        <div class="empty-state">
            <div class="empty-icon"><i class="bi bi-people"></i></div>
            <h5>No data yet</h5>
            <p>Create and get paid on invoices to see your top clients.</p>
        </div>
    @else
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Client</th>
                        <th class="text-end">Total Paid</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($clients as $i => $client)
                    <tr>
                        <td class="text-muted">{{ $i + 1 }}</td>
                        <td>
                            <a href="{{ route('clients.show', $client) }}" class="text-decoration-none fw-500" style="color:#1e293b;">
                                {{ $client->display_name }}
                            </a>
                        </td>
                        <td class="text-end fw-600 text-success">
                            ₦{{ number_format($client->invoices_sum_total ?? 0, 2) }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection