@extends('layouts.parent')
@section('title', 'Messages')
@section('content')
    <x-page-head title="Messages" subtitle="Communications from the school">
        <x-slot:actions><a href="{{ route('parent.messages.create') }}" class="btn btn-primary">Contact School</a></x-slot:actions>
    </x-page-head>
    <x-panel>
        @if ($messages->isEmpty())
            <x-empty-state title="No messages" message="Messages from the school will appear here." />
        @else
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Subject</th><th>From</th><th>Date</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                        @foreach ($messages as $recipient)
                            <tr>
                                <td>{{ $recipient->message?->subject ?? 'No subject' }}</td>
                                <td>{{ $recipient->message?->sender?->name ?? 'School' }}</td>
                                <td>{{ optional($recipient->message?->sent_at)->format('d M Y H:i') ?? '—' }}</td>
                                <td>
                                    @if ($recipient->read_at)
                                        <x-badge variant="gray">Read</x-badge>
                                    @else
                                        <x-badge variant="amber">Unread</x-badge>
                                    @endif
                                </td>
                                <td class="text-right">
                                    <a href="{{ route('parent.messages.show', $recipient) }}" class="btn btn-ghost btn-sm">View</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div style="margin-top:16px;">{{ $messages->links() }}</div>
        @endif
    </x-panel>
@endsection
