@extends('layouts.admin')

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

@section('content')

    @if ($intake)
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white px-5 py-4">
            <div>
                <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Current intake</p>
                <p class="mt-1 text-base font-semibold text-slate-900">{{ $intake->name }}</p>
            </div>
            <div class="flex items-center gap-3">
                <x-status-badge :status="$intake->status" />
                @if ($intake->application_close_at)
                    <span class="text-sm text-slate-500">Closes {{ $intake->deadlineLabel() }}</span>
                @endif
            </div>
        </div>
    @endif

    {{-- Metrics --}}
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ([
            ['Applications', $metrics['total'], 'All applications this intake', 'brand'],
            ['Submitted', $metrics['submitted'], 'Awaiting first review', 'sky'],
            ['Under review', $metrics['under_review'], 'With the admissions team', 'amber'],
            ['Admitted', $metrics['admitted'], 'Offers issued', 'emerald'],
        ] as [$label, $value, $hint, $tone])
            <x-card>
                <p class="text-xs font-medium uppercase tracking-wider text-slate-500">{{ $label }}</p>
                <p class="mt-2 font-display text-4xl text-slate-900">{{ number_format($value) }}</p>
                <p class="mt-1 text-xs text-slate-500">{{ $hint }}</p>
            </x-card>
        @endforeach
    </div>

    <div class="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ([
            ['Drafts', number_format($metrics['draft']), 'Not yet submitted'],
            ['Action required', number_format($metrics['needs_information']), 'Waiting on applicants'],
            ['Pending payments', number_format($payments['pending']), 'Not yet settled'],
            ['Revenue', money($payments['revenue']), 'Fees received this intake'],
        ] as [$label, $value, $hint])
            <x-card>
                <p class="text-xs font-medium uppercase tracking-wider text-slate-500">{{ $label }}</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">{{ $value }}</p>
                <p class="mt-1 text-xs text-slate-500">{{ $hint }}</p>
            </x-card>
        @endforeach
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-3">

        {{-- Submissions over time --}}
        <x-card class="lg:col-span-2">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-900">Submissions, last 14 days</h2>

            @php $peak = max(1, collect($daily)->max('total')); @endphp

            <div class="mt-6 flex h-44 items-end gap-1.5" role="img"
                 aria-label="Bar chart of applications submitted each day over the last fourteen days">
                @foreach ($daily as $day)
                    <div class="group flex flex-1 flex-col items-center justify-end gap-2">
                        <span class="text-[10px] font-medium text-slate-400 opacity-0 transition group-hover:opacity-100">
                            {{ $day['total'] }}
                        </span>
                        <div class="w-full rounded-t bg-brand-700 transition hover:bg-brand-800"
                             style="height: {{ max(2, round($day['total'] / $peak * 100)) }}%"></div>
                        <span class="text-[9px] text-slate-400">{{ Str::before($day['label'], ' ') }}</span>
                    </div>
                @endforeach
            </div>
        </x-card>

        {{-- Demand by programme --}}
        <x-card>
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-900">Top programmes</h2>

            @if ($byProgramme->isEmpty())
                <p class="mt-4 text-sm text-slate-500">No submitted applications yet.</p>
            @else
                @php $max = max(1, $byProgramme->max('total')); @endphp
                <ul class="mt-5 space-y-3">
                    @foreach ($byProgramme as $row)
                        <li>
                            <div class="flex items-baseline justify-between gap-3 text-xs">
                                <span class="min-w-0 truncate text-slate-700">{{ $row->programme }}</span>
                                <span class="shrink-0 font-semibold tabular-nums text-slate-900">{{ $row->total }}</span>
                            </div>
                            <div class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full bg-gold-400" style="width: {{ round($row->total / $max * 100) }}%"></div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
        </x-card>
    </div>

    {{-- Recent applications --}}
    <x-card class="mt-6" :padding="false">
        <div class="flex items-center justify-between gap-4 border-b border-slate-200 px-6 py-4">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-900">Recent submissions</h2>
            @permission('applications.view')
                <a href="{{ route('admin.applications.index') }}" class="text-sm font-medium text-brand-700 hover:underline">
                    View all
                </a>
            @endpermission
        </div>

        @if ($recent->isEmpty())
            <div class="px-6 py-10">
                <x-empty-state title="No applications submitted yet"
                               description="Submitted applications will appear here as they arrive." :icon="false" />
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="border-b border-slate-200 bg-slate-50 text-left text-xs uppercase tracking-wider text-slate-500">
                        <tr>
                            <th scope="col" class="px-6 py-3 font-medium">Application</th>
                            <th scope="col" class="px-6 py-3 font-medium">Applicant</th>
                            <th scope="col" class="px-6 py-3 font-medium">Programme</th>
                            <th scope="col" class="px-6 py-3 font-medium">Status</th>
                            <th scope="col" class="px-6 py-3 font-medium">Submitted</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach ($recent as $application)
                            <tr class="transition hover:bg-slate-50">
                                <td class="px-6 py-3">
                                    <a href="{{ route('admin.applications.show', $application) }}"
                                       class="font-mono text-xs font-medium text-brand-700 hover:underline">
                                        {{ $application->application_number }}
                                    </a>
                                </td>
                                <td class="px-6 py-3 text-slate-800">{{ $application->applicant?->fullName() }}</td>
                                <td class="px-6 py-3 text-slate-600">{{ $application->programme()?->name ?? '—' }}</td>
                                <td class="px-6 py-3"><x-status-badge :status="$application->status" /></td>
                                <td class="px-6 py-3 text-xs text-slate-500">
                                    {{ $application->submitted_at?->format('j M Y') }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </x-card>

@endsection
