@extends('layouts.app')

@section('title', 'Rankings')
@section('page-title', 'Rankings')

@section('content')
    @include('partials.flash')

    <div class="mb-4">
        <a href="{{ route('analytics.index') }}" class="text-sm font-medium text-emerald-700">← Voltar aos Indicadores</a>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        @foreach ([
            'users_deals_won' => 'Top corretores — oportunidades ganhas',
            'users_visits_completed' => 'Top corretores — visitas concluídas',
            'channels' => 'Top canais de origem',
        ] as $group => $title)
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">{{ $title }}</h2>
                <ol class="mt-4 space-y-2">
                    @forelse ($rankings[$group] ?? [] as $row)
                        <li class="flex items-center justify-between text-sm">
                            <span>{{ $row['label'] }}</span>
                            <span class="font-semibold text-emerald-700">{{ $row['value'] }}</span>
                        </li>
                    @empty
                        <li class="text-sm text-slate-500">Sem dados no período.</li>
                    @endforelse
                </ol>
            </div>
        @endforeach
    </div>
@endsection
