@php
    $tabMeta = [
        'catalogue' => ['label' => __('Reports'), 'icon' => 'presentation-chart-line'],
    ];
    if ($canSchedule) {
        $tabMeta['schedules'] = ['label' => __('Scheduled delivery'), 'icon' => 'clock'];
    }
    $tones = [
        'business-development' => 'bg-indigo-50 text-indigo-600',
        'sales' => 'bg-emerald-50 text-emerald-600',
        'portfolios' => 'bg-sky-50 text-sky-600',
        'marketing' => 'bg-fuchsia-50 text-fuchsia-600',
        'partnerships' => 'bg-violet-50 text-violet-600',
        'relationships' => 'bg-cyan-50 text-cyan-600',
        'activity' => 'bg-amber-50 text-amber-600',
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Report Centre')" />

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                @foreach ($tabMeta as $key => $meta)
                    <button type="button" wire:click="switchTab('{{ $key }}')"
                        class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                        <x-icon :name="$meta['icon']" class="h-4 w-4" />
                        {{ $meta['label'] }}
                    </button>
                @endforeach
            </div>

            @if ($tab === 'catalogue')
                <div class="relative w-full max-w-xs">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input type="text" wire:model.live.debounce.300ms="search" placeholder="{{ __('Find a report...') }}"
                        class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                </div>
            @endif
        </div>

        @if ($tab === 'schedules')
            <livewire:crm.reports.schedules />
        @else
            @forelse ($groups as $key => $group)
                <section wire:key="group-{{ $key }}" class="space-y-3">
                    <div class="flex items-center gap-2">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg {{ $tones[$key] ?? 'bg-slate-100 text-slate-600' }}">
                            <x-icon :name="$group['icon']" class="h-4 w-4" />
                        </span>
                        <h2 class="text-sm font-bold text-slate-900">{{ __($group['label']) }}</h2>
                        <span class="text-xs text-slate-400">{{ trans_choice(':count report|:count reports', count($group['reports'])) }}</span>
                    </div>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($group['reports'] as $report)
                            <a href="{{ route('crm.reports.show', $report->key) }}" wire:navigate wire:key="report-{{ $report->key }}" class="group block">
                                <x-card class="flex h-full flex-col p-5 ring-slate-200/70 transition group-hover:-translate-y-0.5 group-hover:shadow-lg group-hover:shadow-slate-300/40">
                                    <div class="flex items-start gap-3">
                                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $tones[$key] ?? 'bg-slate-100 text-slate-600' }}">
                                            <x-icon :name="$report->icon" class="h-5 w-5" />
                                        </span>
                                        <div class="min-w-0">
                                            <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600">{{ __($report->title) }}</h3>
                                            <p class="mt-1 text-xs leading-relaxed text-slate-500">{{ __($report->description) }}</p>
                                        </div>
                                    </div>
                                    <div class="mt-auto flex flex-wrap gap-1.5 pt-4">
                                        <x-badge color="slate">{{ $report->usesPeriod ? __('For a period') : __('As it stands now') }}</x-badge>
                                        @if ($report->money)
                                            <x-badge color="emerald">{{ __('Money in base currency') }}</x-badge>
                                        @endif
                                    </div>
                                </x-card>
                            </a>
                        @endforeach
                    </div>
                </section>
            @empty
                <x-card class="p-8">
                    <x-empty-state icon="magnifying-glass" :title="__('No report matches')" :message="__('Try another word, or clear the search to see all :n reports.', ['n' => $total])" class="border-0" />
                </x-card>
            @endforelse
        @endif
    </div>
</div>