@extends('layouts.app')
@section('title', 'Revenue 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-dark">Revenue</a>
    <a href="{{ route('reports.clients') }}" class="btn btn-sm btn-outline-secondary">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 p-4 mb-3">
    <h6 class="fw-700 mb-1" style="color:#1e293b;">Monthly Revenue — Last 12 Months</h6>
    <small class="text-muted d-block mb-3">Paid invoices only</small>
    <canvas id="revenueChart" height="80"></canvas>
</div>

<div class="card table-card">
    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Month</th>
                    <th class="text-end">Revenue (₦)</th>
                </tr>
            </thead>
            <tbody>
                @foreach(array_reverse($monthly) as $row)
                <tr>
                    <td>{{ $row['month'] }}</td>
                    <td class="text-end fw-600">₦{{ number_format($row['revenue'], 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr style="background:#f8fafc;">
                    <td class="fw-700">Total</td>
                    <td class="text-end fw-700" style="color:#00a651;">
                        ₦{{ number_format(array_sum(array_column($monthly, 'revenue')), 2) }}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'bar',
    data: {
        labels: @json(array_column($monthly, 'month')),
        datasets: [{
            label: 'Revenue (₦)',
            data:  @json(array_column($monthly, 'revenue')),
            backgroundColor: 'rgba(0,166,81,0.3)',
            borderColor: '#00a651',
            borderWidth: 2,
            borderRadius: 5,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false },
            tooltip: { callbacks: { label: ctx => '₦' + ctx.parsed.y.toLocaleString() } }
        },
        scales: {
            y: { beginAtZero: true, ticks: { callback: v => '₦' + (v/1000).toFixed(0) + 'k' } },
            x: { grid: { display: false } }
        }
    }
});
</script>
@endpush