@extends('layouts.admin', [
    'title' => 'Revenue Report',
    'pageTitle' => 'Revenue Report',
    'active' => 'reports',
])

@section('content')
    <div class="space-y-5">
        <div class="flex min-w-0 flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
            <p class="text-sm font-medium leading-6 text-booklio-muted">Track revenue trends, invoice collection, and payment method performance.</p>
            @include('admin.reports.partials.nav', ['activeTab' => 'revenue'])
        </div>

        @include('admin.reports.partials.filters')

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
            <x-ui.card title="Revenue Chart">
                <div class="mt-4 flex h-72 items-end gap-3 rounded-xl border border-booklio-border bg-white p-5">
                    @forelse ($revenueBars as $bar)
                        <div class="flex flex-1 flex-col items-center justify-end gap-2">
                            <div class="w-full rounded-t-lg bg-booklio-primary" style="height: {{ $bar['height'] }}px"></div>
                            <span class="max-w-12 truncate text-[10px] font-bold text-booklio-muted">{{ $bar['label'] }}</span>
                        </div>
                    @empty
                        <div class="flex h-full w-full items-center justify-center text-sm font-bold text-booklio-muted">No revenue in this range.</div>
                    @endforelse
                </div>
            </x-ui.card>

            <div class="space-y-5">
                <x-ui.card title="Paid vs Unpaid Invoices">
                    <div class="space-y-4">
                        @foreach ($paidVsUnpaid as $item)
                            <div>
                                <div class="flex justify-between text-sm font-bold"><span class="text-booklio-muted">{{ $item['label'] }}</span><span>{{ $item['value'] }}</span></div>
                                <div class="mt-2 h-2 rounded-full bg-slate-100"><div class="h-2 rounded-full {{ $item['class'] }}" style="width: {{ $item['percent'] }}%"></div></div>
                            </div>
                        @endforeach
                    </div>
                </x-ui.card>
                <x-ui.card title="Payment Method Breakdown">
                    <div class="space-y-3">
                        @forelse ($paymentMethods as $method)
                            <div class="flex items-center justify-between gap-3 rounded-lg bg-slate-50 p-3">
                                <span class="text-sm font-bold">{{ $method['label'] }}</span>
                                <span class="text-sm font-extrabold text-booklio-primary">{{ $method['amount'] }}</span>
                                <span class="text-xs font-bold text-booklio-muted">{{ $method['percent'] }}</span>
                            </div>
                        @empty
                            <p class="text-sm font-semibold text-booklio-muted">No paid payments yet.</p>
                        @endforelse
                    </div>
                </x-ui.card>
            </div>
        </section>

        <x-ui.card title="Revenue Table" padding="p-0">
            <x-ui.table :headers="['Date', 'Invoices', 'Paid', 'Unpaid', 'Total']">
                @forelse ($rows as $row)
                    <tr class="hover:bg-slate-50/80">
                        <td class="text-sm font-extrabold">{{ $row['date'] }}</td>
                        <td class="text-sm font-semibold">{{ $row['bookings'] }}</td>
                        <td class="text-sm font-extrabold text-emerald-600">{{ $row['paid'] }}</td>
                        <td class="text-sm font-extrabold text-amber-600">{{ $row['unpaid'] }}</td>
                        <td class="text-sm font-extrabold text-booklio-primary">{{ $row['total'] }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-center text-booklio-muted">No revenue rows found.</td></tr>
                @endforelse
            </x-ui.table>
        </x-ui.card>
    </div>
@endsection