@extends('layouts.app')

@section('content')
<section class="bg-white">
    <div class="mx-auto max-w-4xl px-4 py-10 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold">Secure Academic Support Messages</h1>
        <p class="mt-3 text-slate-600">Conversation history, file sharing, and read/unread status are stored inside your account.</p>
        <div class="mt-6 grid gap-3 rounded-lg border border-slate-200 bg-slate-50 p-5">
            @forelse ($conversation->messages as $message)
                <div class="rounded-lg bg-white p-4">
                    <p class="text-sm leading-6 text-slate-700">{{ $message->body }}</p>
                    <p class="mt-2 text-xs text-slate-500">{{ $message->created_at->format('M j, Y g:i A') }}</p>
                </div>
            @empty
                <p class="text-sm text-slate-600">No messages yet. Send your first academic support question.</p>
            @endforelse
        </div>
        <form action="{{ route('messages.store') }}" method="post" enctype="multipart/form-data" class="mt-6 grid gap-4 rounded-lg border border-slate-200 p-5">
            @csrf
            <label class="grid gap-1 text-sm font-medium">Message
                <textarea name="body" rows="5" required class="rounded-lg border border-slate-300 px-3 py-2"></textarea>
            </label>
            <label class="grid gap-1 text-sm font-medium">Attachment
                <input name="attachment" type="file" class="rounded-lg border border-slate-300 px-3 py-2">
            </label>
            <button class="inline-flex items-center justify-center gap-2 rounded-lg bg-slate-950 px-4 py-3 text-sm font-semibold text-white"><i data-lucide="send" class="h-4 w-4"></i> Send Message</button>
        </form>
    </div>
</section>
@endsection