@extends('layouts.school')
@section('title', 'Compose Message')
@section('header', 'Compose Message')
@section('content')
    <form method="POST" action="{{ route('school.communications.store-message', request()->route('schoolId')) }}">
        @csrf
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="block text-sm font-medium text-gray-700">To *</label><select name="receiver_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"><option value="">Select recipient...</option>@foreach($users as $u)<option value="{{ $u->id }}" {{ old('receiver_id') == $u->id ? 'selected' : '' }}>{{ $u->name }} ({{ $u->email }})</option>@endforeach</select></div>
                <div><label class="block text-sm font-medium text-gray-700">Subject *</label><input type="text" name="subject" value="{{ old('subject') }}" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
            </div>
            <div class="mt-4"><label class="block text-sm font-medium text-gray-700">Message *</label><textarea name="body" rows="8" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('body') }}</textarea></div>
        </div>
        <div class="flex gap-3">
            <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Send Message</button>
            <a href="{{ route('school.communications.inbox', request()->route('schoolId')) }}" class="rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</a>
        </div>
    </form>
@endsection