@extends('layouts.admin')

@section('title', 'Reports')
@section('heading', 'Reports')

@section('content')

    <x-card class="mb-6">
        <form method="GET" action="{{ route('admin.reports.index') }}" class="flex flex-wrap items-end gap-4">
            <div class="min-w-56">
                <x-select name="intake" label="Intake" placeholder="All intakes"
                          :selected="$selectedIntake"
                          :options="$intakes->pluck('name', 'id')->all()" />
            </div>
            <x-button type="submit">Apply</x-button>
            @permission('applications.export')
                <x-button :href="route('admin.applications.export', ['intake' => $selectedIntake])"
                          variant="outline" class="ml-auto">Export applications</x-button>
            @endpermission
        </form>
    </x-card>

    @php
        // One renderer for every breakdown: a labelled, proportional bar list.
        $breakdowns = [
            ['Applications by status', $byStatus, fn ($k) => \App\Enums\ApplicationStatus::tryFrom($k)?->label() ?? ucfirst($k)],
            ['Applications by school', $bySchool, null],
            ['Applications by programme', $byProgramme, null],
            ['Applicants by gender', $byGender, fn ($k) => ucfirst(str_replace('_', ' ', $k))],
            ['Applicants by nationality', $byNationality, null],
            ['Applicants by district', $byDistrict, null],
        ];
    @endphp

    <div class="grid gap-6 lg:grid-cols-2">
        @foreach ($breakdowns as [$title, $data, $formatter])
            <x-card>
                <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-900">{{ $title }}</h2>

                @if ($data->isEmpty())
                    <p class="mt-4 text-sm text-slate-500">No data for this selection.</p>
                @else
                    @php $max = max(1, $data->max()); $total = $data->sum(); @endphp

                    <ul class="mt-5 space-y-3">
                        @foreach ($data as $label => $count)
                            <li>
                                <div class="flex items-baseline justify-between gap-3 text-sm">
                                    <span class="min-w-0 truncate text-slate-700">
                                        {{ $formatter ? $formatter($label) : $label }}
                                    </span>
                                    <span class="shrink-0 tabular-nums text-slate-500">
                                        <strong class="text-slate-900">{{ number_format($count) }}</strong>
                                        <span class="ml-1 text-xs">({{ round($count / max(1, $total) * 100) }}%)</span>
                                    </span>
                                </div>
                                <div class="mt-1.5 h-2 overflow-hidden rounded-full bg-slate-100">
                                    <div class="h-full rounded-full bg-brand-700" style="width: {{ round($count / $max * 100) }}%"></div>
                                </div>
                            </li>
                        @endforeach
                    </ul>

                    <p class="mt-4 border-t border-slate-100 pt-3 text-xs text-slate-500">
                        Total: {{ number_format($total) }}
                    </p>
                @endif
            </x-card>
        @endforeach
    </div>

@endsection
