@extends('layouts.teacher-portal')
@section('title', 'Submitted Marks')
@section('header', 'Submitted Marks')

@section('content')
    <form method="GET" class="mb-5 flex flex-wrap items-end gap-3">
        <div>
            <label class="block text-xs font-semibold uppercase tracking-wide text-slate-400">Term</label>
            <select name="term_id" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                @foreach ($terms as $option)
                    <option value="{{ $option->id }}" {{ $termId == $option->id ? 'selected' : '' }}>{{ $option->name }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Refresh</button>
    </form>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-900/5">
        <table class="min-w-full divide-y divide-slate-100">
            <thead class="bg-slate-50">
                <tr>
                    <th class="px-6 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-400">Subject</th>
                    <th class="px-6 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-400">Class</th>
                    <th class="px-6 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-slate-400">Entries</th>
                    <th class="px-6 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-slate-400">Students Scored</th>
                    <th class="px-6 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-slate-400">Progress</th>
                    <th class="px-6 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-slate-400">Average</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse ($summary as $row)
                    <tr class="hover:bg-slate-50">
                        <td class="px-6 py-4 text-sm font-semibold text-slate-800">{{ $row->subject->name }}</td>
                        <td class="px-6 py-4 text-sm text-slate-500">{{ $row->subject->classroom?->name }}</td>
                        <td class="px-6 py-4 text-center text-sm text-slate-600">{{ $row->entries }}</td>
                        <td class="px-6 py-4 text-center text-sm font-medium {{ $row->students_entered >= $row->total_students ? 'text-green-600' : 'text-amber-500' }}">{{ $row->students_entered }} / {{ $row->total_students }}</td>
                        <td class="px-6 py-4">
                            <div class="mx-auto h-1.5 w-28 overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full bg-primary-500" style="width: {{ $row->total_students > 0 ? (int) round($row->students_entered / $row->total_students * 100) : 0 }}%"></div>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-center text-sm font-bold text-slate-700">{{ $row->average !== null ? number_format($row->average, 1) : '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-6 py-12 text-center text-sm text-slate-400">No marks submitted for the selected term.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection