@extends('layouts.user', ['heading' => 'Internal Messages', 'subheading' => 'Chat and support communication'])

@section('content')
    <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
        <div class="user-card p-4">
            <div class="mb-2 text-sm font-semibold">Send Message</div>
            <form method="POST" action="{{ route('user.messages.store') }}" class="space-y-2">
                @csrf
                <select name="receiver_id" class="w-full rounded border border-[var(--user-border)] p-2 text-sm" required>
                    <option value="">Select Admin/Franchise</option>
                    @foreach($admins as $admin)
                        <option value="{{ $admin->id }}">{{ $admin->member_code }} - {{ $admin->name }}</option>
                    @endforeach
                </select>
                <input name="subject" placeholder="Subject" class="w-full rounded border border-[var(--user-border)] p-2 text-sm">
                <textarea name="message" rows="5" placeholder="Message" class="w-full rounded border border-[var(--user-border)] p-2 text-sm" required></textarea>
                <button class="rounded bg-[var(--user-primary)] px-4 py-2 text-sm font-semibold text-white">Send</button>
            </form>
        </div>

        <div class="user-card p-4 xl:col-span-2">
            <div class="mb-2 text-sm font-semibold">Inbox</div>
            <div class="space-y-3">
                @forelse($messages as $message)
                    <div class="rounded border border-[var(--user-border)] p-3 {{ $message->read_at ? 'bg-white' : 'bg-sky-50/60' }}">
                        <div class="flex items-center justify-between gap-2">
                            <div class="text-sm font-semibold">{{ $message->subject ?: strtoupper($message->channel) }}</div>
                            <div class="text-xs text-[var(--user-muted)]">{{ optional($message->created_at)->format('d M Y H:i') }}</div>
                        </div>
                        <div class="text-xs text-[var(--user-muted)]">
                            Sender: {{ $message->sender_id ?: 'System' }} | Receiver: {{ $message->receiver_id ?: 'Broadcast' }}
                        </div>
                        <div class="mt-1 text-sm">{{ $message->message }}</div>
                    </div>
                @empty
                    <div class="text-sm text-[var(--user-muted)]">No messages found.</div>
                @endforelse
            </div>
            <div class="mt-4">{{ $messages->links() }}</div>
        </div>
    </div>
@endsection