@extends('layouts.app')
@section('title', 'Take Attendance')
@section('page-title', 'Take Attendance')
@section('sidebar-nav')
<div class="nav-item"><a href="{{ route('admin.dashboard') }}"><i class="bi bi-grid"></i> Dashboard</a></div>
<div class="nav-item"><a href="{{ route('admin.attendance.index') }}"><i class="bi bi-calendar-check"></i> Attendance</a></div>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>{{ $stream->schoolClass->name }} {{ $stream->name }}</h1>
        <p>{{ \Carbon\Carbon::parse($date)->format('l, d F Y') }}</p>
    </div>
    <a href="{{ route('admin.attendance.index') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back</a>
</div>

<div class="card">
    <div class="card-header">
        <h5>Mark Attendance ({{ $students->count() }} students)</h5>
        <div style="display:flex;gap:8px;">
            <button onclick="markAll('present')" class="btn btn-sm btn-secondary" style="color:var(--success);">All Present</button>
            <button onclick="markAll('absent')" class="btn btn-sm btn-secondary" style="color:var(--danger);">All Absent</button>
        </div>
    </div>
    <div class="card-body" style="padding:0;">
        <form method="POST" action="{{ route('admin.attendance.save', $stream) }}">
            @csrf
            <input type="hidden" name="date" value="{{ $date }}">
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr><th>#</th><th>Student</th><th>Present</th><th>Absent</th><th>Late</th><th>Excused</th></tr>
                    </thead>
                    <tbody>
                        @foreach($students as $i => $student)
                        @php $existing = $student->attendances->first()?->status ?? 'present'; @endphp
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>
                                <div style="font-weight:500;">{{ $student->user->name }}</div>
                                <div style="font-size:12px;color:var(--gray);">{{ $student->admission_no }}</div>
                            </td>
                            @foreach(['present','absent','late','excused'] as $status)
                            <td style="text-align:center;">
                                <input type="radio" name="attendance[{{ $student->id }}]" value="{{ $status }}"
                                    {{ $existing === $status ? 'checked' : '' }}
                                    style="width:18px;height:18px;accent-color:var(--primary);">
                            </td>
                            @endforeach
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div style="padding:16px;border-top:1px solid var(--border);">
                <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Save Attendance</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function markAll(status) {
    document.querySelectorAll(`input[type=radio][value="${status}"]`).forEach(r => r.checked = true);
}
</script>
@endpush
@endsection
