@extends('layouts.app')
@section('title', 'Grading System')
@section('content')
<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <h2 style="font-size:17px;color:#0b4f2c;">Grade Configuration & Boundaries</h2>
        <button style="background:#0b4f2c;color:#fff;border:none;padding:8px 14px;border-radius:6px;font-size:12.5px;cursor:pointer;">+ New Grading System</button>
    </div>

    @forelse($gradingSystems as $system)
        <div style="border:1px solid #eee;border-radius:8px;padding:14px;margin-bottom:14px;">
            <strong style="color:#0b4f2c;">{{ $system->name }}</strong>
            @if($system->is_default)<span style="background:#e5f5ea;color:#0b4f2c;padding:2px 8px;border-radius:10px;font-size:11px;margin-left:8px;">Default</span>@endif

            <table style="width:100%;border-collapse:collapse;font-size:12.5px;margin-top:10px;">
                <thead><tr style="background:#f4f6f5;text-align:left;"><th style="padding:5px;">Grade</th><th style="padding:5px;">Min</th><th style="padding:5px;">Max</th><th style="padding:5px;">Remark</th></tr></thead>
                <tbody>
                    @foreach($system->gradeBands as $band)
                        <tr style="border-bottom:1px solid #eee;">
                            <td style="padding:5px;font-weight:bold;">{{ $band->label }}</td>
                            <td style="padding:5px;">{{ $band->min_score }}</td>
                            <td style="padding:5px;">{{ $band->max_score }}</td>
                            <td style="padding:5px;">{{ $band->remark }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <button style="margin-top:8px;background:#f4f6f5;border:none;padding:6px 12px;border-radius:6px;font-size:11.5px;cursor:pointer;">Edit Boundaries</button>
        </div>
    @empty
        <p style="color:#999;font-size:13px;text-align:center;padding:20px 0;">No grading systems configured yet.</p>
    @endforelse
</div>
@endsection