@extends('layouts.app')

@section('title', 'Mark Attendance')

@section('content')
<div class="card">
    <h2 style="font-size:17px;color:#0b4f2c;margin-bottom:16px;">Mark Attendance — {{ $classArm->schoolClass->name ?? '' }} {{ $classArm->name ?? '' }}</h2>

    <form id="attendanceForm" data-arm-id="{{ $classArm->id ?? '' }}">
        <input type="date" name="date" value="{{ now()->toDateString() }}" style="padding:8px;border:1px solid #ddd;border-radius:6px;margin-bottom:14px;">

        <table style="width:100%;border-collapse:collapse;font-size:13px;">
            <thead>
                <tr style="background:#f4f6f5;text-align:left;">
                    <th style="padding:8px;">Student</th>
                    <th style="padding:8px;">Present</th>
                    <th style="padding:8px;">Absent</th>
                    <th style="padding:8px;">Late</th>
                    <th style="padding:8px;">Excused</th>
                </tr>
            </thead>
            <tbody>
                @forelse($students ?? [] as $student)
                    <tr style="border-bottom:1px solid #eee;">
                        <td style="padding:8px;font-weight:bold;">{{ $student->full_name }}</td>
                        @foreach(['Present','Absent','Late','Excused'] as $status)
                            <td style="padding:8px;text-align:center;">
                                <input type="radio" name="status_{{ $student->id }}" value="{{ $status }}" {{ $status === 'Present' ? 'checked' : '' }}>
                            </td>
                        @endforeach
                    </tr>
                @empty
                    <tr><td colspan="5" style="padding:20px;text-align:center;color:#999;">No students in this class arm.</td></tr>
                @endforelse
            </tbody>
        </table>

        <button type="submit" style="margin-top:14px;background:#0b4f2c;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:13px;cursor:pointer;">Save Attendance</button>
    </form>
</div>

<script>
// Posts to POST /api/class-arms/{armId}/attendance with { date, records: [{student_id, status}] }
document.getElementById('attendanceForm')?.addEventListener('submit', function (e) {
    e.preventDefault();
    alert('Would submit attendance to /api/class-arms/' + this.dataset.armId + '/attendance');
});
</script>
@endsection