@extends('layouts.app')
@section('title', 'Subject Groups')
@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;">Subject Groups (SSS Electives)</h2>
        <button style="background:#0b4f2c;color:#fff;border:none;padding:8px 14px;border-radius:6px;font-size:12.5px;cursor:pointer;">+ Add Group</button>
    </div>
    @forelse($groups as $group)
        <div style="border:1px solid #eee;border-radius:8px;padding:12px;margin-bottom:10px;">
            <strong style="color:#0b4f2c;">{{ $group->name }}</strong>
            <span style="font-size:11.5px;color:#777;"> — {{ $group->department->name ?? 'No department' }}</span>
            <div style="font-size:12.5px;color:#555;margin-top:6px;">{{ $group->subjects->pluck('name')->join(', ') ?: 'No subjects assigned yet' }}</div>
        </div>
    @empty
        <p style="color:#999;font-size:13px;text-align:center;padding:20px 0;">No subject groups set up yet (only needed for SSS electives).</p>
    @endforelse
</div>
@endsection