@extends('layouts.app')
@section('title', 'Master Timetable')
@section('content')
<div class="card">
    <h2 style="font-size:17px;color:#0b4f2c;margin-bottom:16px;">Master Timetable</h2>

    <form method="GET" style="margin-bottom:16px;">
        <select name="class_arm_id" onchange="this.form.submit()" style="padding:8px;border:1px solid #ddd;border-radius:6px;font-size:13px;">
            <option value="">Select a class arm</option>
            @foreach($classArms as $arm)
                <option value="{{ $arm->id }}" {{ $selectedArmId == $arm->id ? 'selected' : '' }}>{{ $arm->schoolClass->name }} {{ $arm->name }}</option>
            @endforeach
        </select>
    </form>

    @if($selectedArmId)
        <table style="width:100%;border-collapse:collapse;font-size:13px;">
            <thead><tr style="background:#f4f6f5;text-align:left;"><th style="padding:8px;">Day</th><th style="padding:8px;">Time</th><th style="padding:8px;">Subject</th><th style="padding:8px;">Teacher</th></tr></thead>
            <tbody>
                @forelse($slots as $slot)
                    <tr style="border-bottom:1px solid #eee;">
                        <td style="padding:8px;">{{ $slot->day_of_week }}</td>
                        <td style="padding:8px;">{{ \Illuminate\Support\Carbon::parse($slot->start_time)->format('g:ia') }}–{{ \Illuminate\Support\Carbon::parse($slot->end_time)->format('g:ia') }}</td>
                        <td style="padding:8px;font-weight:bold;">{{ $slot->subject->name }}</td>
                        <td style="padding:8px;">{{ $slot->teacher->user->name ?? '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="4" style="padding:20px;text-align:center;color:#999;">No timetable slots for this class arm yet.</td></tr>
                @endforelse
            </tbody>
        </table>
        <button style="margin-top:12px;background:#0b4f2c;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:12.5px;cursor:pointer;">+ Add Slot</button>
    @else
        <p style="color:#999;font-size:13px;text-align:center;padding:30px 0;">Select a class arm to view its timetable.</p>
    @endif
</div>
@endsection