@extends('layouts.student')
@section('title', 'Attendance')
@section('content')
    <x-page-head title="Attendance" subtitle="Your attendance record" />
    <form method="GET" style="margin-bottom:16px;">
        <select class="input" name="term_id" onchange="this.form.submit()" style="max-width:240px;">
            @foreach ($terms as $term)
                <option value="{{ $term->id }}" @selected($termId == $term->id)>{{ $term->name }}</option>
            @endforeach
        </select>
    </form>
    @if ($summary)
        <div class="stat-grid">
            <x-stat-card label="Present" :value="$summary->present_count ?? 0" color="green" />
            <x-stat-card label="Absent" :value="$summary->absent_count ?? 0" color="violet" />
            <x-stat-card label="Late" :value="$summary->late_count ?? 0" color="amber" />
            <x-stat-card label="Excused" :value="$summary->excused_count ?? 0" />
            <x-stat-card label="Sick" :value="$summary->sick_count ?? 0" />
            <x-stat-card label="Percentage" :value="$percentage !== null ? $percentage.'%' : '—'" color="teal" />
        </div>
    @endif
    <x-panel>
        @if ($records->isEmpty())
            <x-empty-state title="No attendance records" />
        @else
            <div class="table-wrap"><table><thead><tr><th>Date</th><th>Class</th><th>Status</th><th>Remarks</th></tr></thead><tbody>
                @foreach ($records as $record)
                    <tr>
                        <td>{{ $record->attendance?->date?->format('M j, Y') }}</td>
                        <td>{{ $record->attendance?->schoolClass?->name }}</td>
                        <td><x-badge :status="$record->status" /></td>
                        <td>{{ $record->remarks ?? '—' }}</td>
                    </tr>
                @endforeach
            </tbody></table></div>
            {{ $records->links() }}
        @endif
    </x-panel>
@endsection