@extends('layouts.app')

@section('title', 'Register Analytics')

@section('content')
    <div class="flex flex-col gap-6">
        <div class="flex flex-wrap items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">Register Analytics</h1>
                <p class="text-xs text-muted-foreground">Attendance rates, risk flags and per-class compliance over a period.</p>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('register.analytics.csv', ['from' => $from, 'to' => $to, 'class' => $class]) }}" class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Export CSV</a>
                <a href="{{ route('register.analytics.print', ['from' => $from, 'to' => $to, 'class' => $class]) }}"
                   onclick="window.open(this.href,'print','width=1100,height=800');return false;"
                   class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Print / PDF</a>
                <a href="{{ route('register.sheet', ['class' => $class ?: null]) }}" class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Mark Register</a>
            </div>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <form method="get" action="{{ route('register.analytics') }}" class="flex flex-wrap items-end gap-3 p-3">
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Class</label>
                    <select name="class" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <option value="">All classes</option>
                        @foreach (\App\Models\Student::FORMS as $f)
                            <option value="{{ $f }}" @selected($class === $f)>{{ $f }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">From</label>
                    <input type="date" name="from" value="{{ $from }}" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">To</label>
                    <input type="date" name="to" value="{{ $to }}" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </div>
                <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Generate</button>
            </form>
        </div>

        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-xl border border-border bg-card p-4">
                <p class="text-xs uppercase tracking-wide text-muted-foreground">Overall Rate</p>
                <p class="mt-1 text-2xl font-semibold {{ $overallRate < $threshold ? 'text-destructive' : 'text-emerald-600' }}">{{ number_format($overallRate, 1) }}%</p>
                <p class="text-xs text-muted-foreground">{{ $overallPresent }} / {{ $overallTotal }} marked days</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-4">
                <p class="text-xs uppercase tracking-wide text-muted-foreground">At Risk (&lt; {{ rtrim(rtrim(number_format($threshold, 1), '0'), '.') }}%)</p>
                <p class="mt-1 text-2xl font-semibold text-destructive">{{ count($atRisk) }}</p>
                <p class="text-xs text-muted-foreground">students below threshold</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-4">
                <p class="text-xs uppercase tracking-wide text-muted-foreground">Present Today</p>
                <p class="mt-1 text-2xl font-semibold text-emerald-600">{{ $today['present'] }}</p>
                <p class="text-xs text-muted-foreground">{{ $today['absent'] }} absent · {{ $today['late'] }} late</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-4">
                <p class="text-xs uppercase tracking-wide text-muted-foreground">Unmarked Today</p>
                <p class="mt-1 text-2xl font-semibold {{ $today['unmarked'] > 0 ? 'text-amber-600' : 'text-emerald-600' }}">{{ $today['unmarked'] }}</p>
                <p class="text-xs text-muted-foreground">class registers pending</p>
            </div>
        </div>

        <div class="grid gap-4 lg:grid-cols-2">
            <div class="rounded-xl border border-border bg-card p-4">
                <h2 class="mb-3 text-sm font-semibold">Rate by Class</h2>
                <div class="flex flex-col gap-3">
                    @forelse ($classBreakdown as $name => $b)
                        <div>
                            <div class="flex items-center justify-between text-xs">
                                <span class="font-medium">{{ $name }}</span>
                                <span class="tabular-nums {{ $b['rate'] < $threshold ? 'text-destructive' : 'text-muted-foreground' }}">{{ number_format($b['rate'], 1) }}%</span>
                            </div>
                            <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-muted">
                                <div class="h-full rounded-full {{ $b['rate'] < $threshold ? 'bg-destructive' : 'bg-emerald-500' }}" style="width: {{ max(2, min(100, $b['rate'])) }}%"></div>
                            </div>
                        </div>
                    @empty
                        <p class="text-sm text-muted-foreground">No data in this period.</p>
                    @endforelse
                </div>
            </div>

            <div class="rounded-xl border border-border bg-card">
                <div class="flex items-center justify-between border-b border-border px-4 py-3">
                    <h2 class="text-sm font-semibold">Risk Flags</h2>
                    <span class="rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive">{{ count($atRisk) }}</span>
                </div>
                <div class="max-h-80 overflow-y-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                                <th class="px-4 py-2 font-medium">Student</th>
                                <th class="px-4 py-2 font-medium">Class</th>
                                <th class="px-4 py-2 text-right font-medium">Rate</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($atRisk as $r)
                                <tr class="border-b last:border-0">
                                    <td class="px-4 py-2">
                                        <span class="font-medium">{{ $r['student']->full_name }}</span>
                                        <span class="block font-mono text-[11px] text-muted-foreground">{{ $r['student']->admission_no }}</span>
                                    </td>
                                    <td class="px-4 py-2 text-xs">{{ $r['student']->class_name }} {{ $r['student']->stream }}</td>
                                    <td class="px-4 py-2 text-right tabular-nums text-destructive">{{ number_format($r['rate'], 1) }}%</td>
                                </tr>
                            @empty
                                <tr><td colspan="3" class="px-4 py-8 text-center text-sm text-muted-foreground">No students below the threshold. 🎉</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="overflow-x-auto rounded-xl border border-border bg-card">
            <table class="w-full min-w-[720px] text-sm">
                <thead>
                    <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                        <th class="px-3 py-2 font-medium">Adm No</th>
                        <th class="px-3 py-2 font-medium">Student</th>
                        <th class="px-3 py-2 font-medium">Class</th>
                        <th class="px-3 py-2 text-center font-medium">Present</th>
                        <th class="px-3 py-2 text-center font-medium">Late</th>
                        <th class="px-3 py-2 text-center font-medium">Absent</th>
                        <th class="px-3 py-2 text-center font-medium">Excused</th>
                        <th class="px-3 py-2 text-center font-medium">Marked</th>
                        <th class="px-3 py-2 text-right font-medium">Rate</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rows as $r)
                        <tr class="border-b last:border-0 {{ $r['at_risk'] ? 'bg-destructive/5' : '' }}">
                            <td class="px-3 py-2 font-mono text-xs">{{ $r['student']->admission_no }}</td>
                            <td class="px-3 py-2 font-medium">{{ $r['student']->full_name }}</td>
                            <td class="px-3 py-2 text-xs">{{ $r['student']->class_name }} {{ $r['student']->stream }}</td>
                            <td class="px-3 py-2 text-center tabular-nums">{{ $r['present'] }}</td>
                            <td class="px-3 py-2 text-center tabular-nums">{{ $r['late'] }}</td>
                            <td class="px-3 py-2 text-center tabular-nums">{{ $r['absent'] }}</td>
                            <td class="px-3 py-2 text-center tabular-nums">{{ $r['excused'] }}</td>
                            <td class="px-3 py-2 text-center tabular-nums">{{ $r['total'] }}</td>
                            <td class="px-3 py-2 text-right tabular-nums {{ $r['at_risk'] ? 'font-semibold text-destructive' : '' }}">{{ number_format($r['rate'], 1) }}%</td>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="px-3 py-10 text-center text-sm text-muted-foreground">No students to display.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection