@extends('dashboard.doctor.layouts.master')

@section('title', $patient->name)

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ $patient->name }}</h1>
        </div>
        <a href="{{ route('doctor.chat.inbox') }}" class="btn btn-sm fw-bold btn-light">{{ trans('doctor.common.back') }}</a>
    </div>
@endsection

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

                <form action="{{ route('doctor.chat.store', $patient) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="fv-row mb-3">
                        <textarea name="body" rows="2" class="form-control" placeholder="{{ trans('doctor.chat.write_message') }}"></textarea>
                    </div>
                    <div class="d-flex align-items-center gap-3">
                        <input type="file" name="attachment" class="form-control" style="max-width: 260px;"/>
                        <button type="submit" class="btn btn-primary">{{ trans('doctor.chat.send') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@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.{{ $patient->id }}', function (data) {
                if (data.sender_type === 'doctor') {
                    return;
                }

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

                var bubble = document.createElement('div');
                bubble.className = 'p-3 rounded-3 bg-light-primary';
                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-2';
                    if (data.attachment_type === 'image') {
                        var img = document.createElement('img');
                        img.src = data.attachment_path;
                        img.className = 'rounded';
                        img.style.maxWidth = '200px';
                        attWrap.appendChild(img);
                    } else {
                        var link = document.createElement('a');
                        link.href = data.attachment_path;
                        link.target = '_blank';
                        link.className = 'text-primary text-decoration-underline';
                        link.textContent = @json(trans('doctor.chat.attachment'));
                        attWrap.appendChild(link);
                    }
                    bubble.appendChild(attWrap);
                }

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