@extends('layouts.admin', [
    'title' => 'Customer Report',
    'pageTitle' => 'Customer 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">Analyze acquisition, returning customers, top spenders, and appointment history summaries.</p>
            @include('admin.reports.partials.nav', ['activeTab' => 'customers'])
        </div>

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

        <section class="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($kpis as $item)
                <x-ui.card>
                    <p class="text-sm font-semibold text-slate-600">{{ $item['label'] }}</p>
                    <p class="mt-3 text-3xl font-extrabold">{{ $item['value'] }}</p>
                    <p @class(['mt-4 text-xs font-semibold', 'text-emerald-600' => ($item['tone'] ?? null) === 'success', 'text-booklio-muted' => ($item['tone'] ?? null) !== 'success'])>{{ $item['note'] }}</p>
                </x-ui.card>
            @endforeach
        </section>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
            <x-ui.card title="Customer Growth">
                <div class="mt-4 h-72 rounded-xl border border-booklio-border bg-gradient-to-b from-blue-50/60 to-white p-5">
                    <div class="grid h-full grid-cols-8 items-end gap-3">
                        @forelse ($growthBars as $bar)
                            <div class="rounded-t-lg bg-booklio-primary/80" style="height: {{ $bar['height'] }}px"></div>
                        @empty
                            <div class="col-span-8 flex h-full items-center justify-center text-sm font-bold text-booklio-muted">No new customers in this range.</div>
                        @endforelse
                    </div>
                </div>
            </x-ui.card>

            <x-ui.card title="Appointment History Summary">
                <div class="space-y-4">
                    @foreach ($appointmentHistory as $item)
                        <div>
                            <div class="flex justify-between text-sm font-bold"><span class="text-booklio-muted">{{ $item['label'] }}</span><span>{{ $item['percent'] }}%</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>
        </section>

        <x-ui.card title="Top Customers by Spending" padding="p-0">
            <x-ui.table :headers="['Customer', 'Total Spending', 'Appointments', 'Last Visit']">
                @forelse ($customers as $customer)
                    <tr class="hover:bg-slate-50/80">
                        <td class="text-sm font-extrabold">{{ $customer['name'] }}</td>
                        <td class="text-sm font-extrabold text-booklio-primary">{{ $customer['spent'] }}</td>
                        <td class="text-sm font-semibold">{{ $customer['appointments'] }}</td>
                        <td class="text-sm font-semibold">{{ $customer['last'] }}</td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="text-center text-booklio-muted">No customers found.</td></tr>
                @endforelse
            </x-ui.table>
        </x-ui.card>
    </div>
@endsection