@extends('layouts.app')

@section('title', 'Enter Scores')

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

    <table style="width:100%;border-collapse:collapse;font-size:13px;">
        <thead>
            <tr style="background:#f4f6f5;text-align:left;">
                <th style="padding:8px;">Student</th>
                @foreach($components ?? ['CA1','CA2','CA3','Exam'] as $component)
                    <th style="padding:8px;">{{ $component }}</th>
                @endforeach
                <th style="padding:8px;">Total</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($components ?? ['CA1','CA2','CA3','Exam'] as $component)
                        <td style="padding:8px;">
                            <input type="number" min="0" style="width:60px;padding:5px;border:1px solid #ddd;border-radius:4px;">
                        </td>
                    @endforeach
                    <td style="padding:8px;font-weight:bold;color:#0b4f2c;">—</td>
                </tr>
            @empty
                <tr><td colspan="6" style="padding:20px;text-align:center;color:#999;">No students in this class arm.</td></tr>
            @endforelse
        </tbody>
    </table>

    <p style="font-size:11.5px;color:#999;margin-top:10px;">
        Each row posts to <code>POST /api/results</code> with the student/subject/term and component scores.
    </p>
    <button style="margin-top:8px;background:#0b4f2c;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:13px;cursor:pointer;">Submit Scores for Approval</button>
</div>
@endsection