@extends('layouts.app')

@section('title', 'Results')

@section('content')
<div class="card">
    <h2 style="font-size:17px;color:#0b4f2c;margin-bottom:16px;">Result Entry & Broadsheet</h2>

    <form method="GET" style="display:flex;gap:10px;margin-bottom:18px;">
        <select name="class_arm_id" style="padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;">
            <option value="">Select Class Arm</option>
            @foreach($classArms as $arm)
                <option value="{{ $arm->id }}" {{ $selectedClassArmId == $arm->id ? 'selected' : '' }}>
                    {{ $arm->schoolClass->name }} {{ $arm->name }}
                </option>
            @endforeach
        </select>
        <select name="term_id" style="padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;">
            <option value="">Select Term</option>
            @foreach($terms as $term)
                <option value="{{ $term->id }}" {{ $selectedTermId == $term->id ? 'selected' : '' }}>{{ $term->name }}</option>
            @endforeach
        </select>
        <button type="submit" style="background:#0b4f2c;color:#fff;border:none;padding:8px 18px;border-radius:6px;font-size:13px;cursor:pointer;">Load</button>
    </form>

    @if($selectedClassArmId && $selectedTermId)
        <p style="font-size:12.5px;color:#666;margin-bottom:12px;">
            Score entry table for this class/term would render here, pulling from
            <code>GET /api/class-arms/{{ $selectedClassArmId }}/terms/{{ $selectedTermId }}/broadsheet</code>
            and posting each cell to <code>POST /api/results</code>.
        </p>
        <p style="font-size:12.5px;color:#666;">
            Once all scores are submitted: <code>POST /api/class-arms/{{ $selectedClassArmId }}/subjects/{subjectId}/terms/{{ $selectedTermId }}/rank</code>
            computes subject positions, then Principal/VP approval via <code>POST /api/results/{score}/approve</code>
            unlocks report card generation.
        </p>
    @else
        <p style="font-size:13px;color:#999;text-align:center;padding:30px 0;">Select a class arm and term to begin.</p>
    @endif
</div>
@endsection