@extends('web_site.layouts.master')

@section('content')
    <main class="main">
        @include('web_site.partials.alerts')
        <section class="py-100">
            <div class="container">
                <div class="site-heading">
                    <span class="site-title-tagline">{{ trans('clinic.chat.title') }}</span>
                    <h1 class="site-title">{{ $doctor->name }}</h1>
                </div>

                <div id="chat-thread" class="border rounded p-3 mb-3" style="max-width: 720px; height: 420px; overflow-y: auto;">
                    @forelse ($messages as $message)
                        <div class="mb-2 d-flex {{ $message->sender_type === 'patient' ? 'justify-content-end' : 'justify-content-start' }}">
                            <div class="p-2 rounded {{ $message->sender_type === 'patient' ? 'bg-primary text-white' : 'bg-light' }}" style="max-width: 75%;">
                                @if ($message->body)
                                    <div>{{ $message->body }}</div>
                                @endif
                                @if ($message->attachment_path)
                                    <div class="mt-1">
                                        @if ($message->attachment_type === 'image')
                                            <img src="{{ asset($message->attachment_path) }}" style="max-width: 200px;" alt="">
                                        @else
                                            <a href="{{ asset($message->attachment_path) }}" target="_blank" class="{{ $message->sender_type === 'patient' ? 'text-white' : '' }}">{{ trans('clinic.chat.attachment') }}</a>
                                        @endif
                                    </div>
                                @endif
                                <div class="fs-8 {{ $message->sender_type === 'patient' ? 'text-white-50' : 'text-muted' }}">{{ $message->created_at->format('Y-m-d H:i') }}</div>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted">{{ trans('clinic.chat.no_messages') }}</p>
                    @endforelse
                </div>

                <form action="{{ route('clinic.chat.store', $doctor) }}" method="POST" enctype="multipart/form-data" class="p-3 border rounded" style="max-width: 720px;">
                    @csrf
                    <div class="mb-2">
                        <textarea name="body" rows="2" class="form-control" placeholder="{{ trans('clinic.chat.write_message') }}"></textarea>
                    </div>
                    <div class="d-flex gap-2 align-items-center">
                        <input type="file" name="attachment" class="form-control" style="max-width: 260px;">
                        <button type="submit" class="theme-btn">{{ trans('clinic.chat.send') }}</button>
                    </div>
                </form>
            </div>
        </section>
    </main>
@endsection

@section('js')
    @include('partials.chat-broadcast')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var thread = document.getElementById('chat-thread');
            thread.scrollTop = thread.scrollHeight;

            initClinicChat('chat.doctor.{{ $doctor->id }}.patient.{{ auth('web')->id() }}', function (data) {
                if (data.sender_type === 'patient') {
                    return;
                }

                var wrapper = document.createElement('div');
                wrapper.className = 'mb-2 d-flex justify-content-start';

                var bubble = document.createElement('div');
                bubble.className = 'p-2 rounded bg-light';
                bubble.style.maxWidth = '75%';

                if (data.body) {
                    var text = document.createElement('div');
                    text.textContent = data.body;
                    bubble.appendChild(text);
                }

                if (data.attachment_path) {
                    var attWrap = document.createElement('div');
                    attWrap.className = 'mt-1';
                    if (data.attachment_type === 'image') {
                        var img = document.createElement('img');
                        img.src = data.attachment_path;
                        img.style.maxWidth = '200px';
                        attWrap.appendChild(img);
                    } else {
                        var link = document.createElement('a');
                        link.href = data.attachment_path;
                        link.target = '_blank';
                        link.textContent = @json(trans('clinic.chat.attachment'));
                        attWrap.appendChild(link);
                    }
                    bubble.appendChild(attWrap);
                }

                wrapper.appendChild(bubble);
                thread.appendChild(wrapper);
                thread.scrollTop = thread.scrollHeight;
            });
        });
    </script>
@endsection