@extends('layouts.admin')

@section('page_kicker', 'Secure chat')
@section('page_title', 'Patient messages')

@section('content')
    <div class="grid gap-6 lg:grid-cols-3">
        <div class="admin-content-card lg:col-span-2">
            <h3 class="admin-card-title">History</h3>
            <p class="admin-card-desc">Text messages with assigned patients</p>
            <div class="mt-5 max-h-[480px] space-y-3 overflow-y-auto pr-1">
                @forelse($messages as $msg)
                    <div class="rounded-2xl px-4 py-3 text-sm shadow-sm {{ $msg->sender_id === auth()->id() ? 'ml-6 bg-gradient-to-br from-teal-50 to-emerald-50 text-right ring-1 ring-teal-100' : 'mr-6 bg-slate-50 ring-1 ring-slate-100' }}">
                        <p class="text-[10px] font-bold uppercase tracking-wide text-slate-500">{{ $msg->sender->name ?? 'User' }} → {{ $msg->receiver->name ?? 'User' }}</p>
                        <p class="mt-2 whitespace-pre-wrap text-slate-800">{{ $msg->message }}</p>
                        <p class="mt-2 text-[10px] text-slate-400">{{ $msg->created_at->format('M j, g:i A') }}</p>
                    </div>
                @empty
                    <p class="text-sm text-slate-500">No messages yet.</p>
                @endforelse
            </div>
            <div class="mt-6">{{ $messages->links() }}</div>
        </div>
        <div class="admin-content-card">
            <h3 class="admin-card-title">Send message</h3>
            <p class="mt-2 text-xs leading-relaxed text-slate-500">Voice and files require extra columns on <code class="rounded bg-slate-100 px-1 text-[10px]">chat_messages</code>.</p>
            <form method="POST" action="{{ route('aim4wellness.chat.send') }}" class="mt-5 space-y-4">
                @csrf
                <div>
                    <label class="admin-form-label" for="receiver_id">Patient</label>
                    <select id="receiver_id" name="receiver_id" required class="admin-input">
                        <option value="">Select patient</option>
                        @foreach($patientOptions as $p)
                            <option value="{{ $p->id }}">{{ $p->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="admin-form-label" for="message">Message</label>
                    <textarea id="message" name="message" required rows="4" class="admin-input"></textarea>
                </div>
                <button type="submit" class="admin-btn-dark w-full">Send</button>
            </form>
        </div>
    </div>
@endsection