@extends('web_site.account.layout')

@section('account_title', trans('site.account.menu.messages'))

@section('account_content')
    <div class="account-card chat-card">
        <div class="chat-card__head">
            <a href="{{ route('clinic.chat.inbox') }}" class="chat-card__back" aria-label="{{ trans('site.account.menu.messages') }}"><i class="far fa-arrow-left"></i></a>
            <img src="{{ $doctor->photo_path ? asset($doctor->photo_path) : asset('assets_web/img/team/img1.webp') }}" alt="{{ $doctor->name }}" loading="lazy">
            <div class="chat-card__who">
                <h2>{{ $doctor->name }}</h2>
                <span>{{ $doctor->specialty?->name }}</span>
            </div>
            <a href="{{ route('clinic.doctors.show', $doctor) }}" class="small text-theme1">{{ trans('site.bookings.doctor_profile') }}</a>
        </div>

        <div id="chat-thread" class="chat-thread" aria-live="polite">
            @php($lastDay = null)
            @forelse ($messages as $message)
                @php($day = $message->created_at->toDateString())
                @if ($day !== $lastDay)
                    <div class="chat-day"><span>{{ $message->created_at->isToday() ? trans('site.booking.today') : $message->created_at->translatedFormat('j F Y') }}</span></div>
                    @php($lastDay = $day)
                @endif
                <div class="chat-bubble {{ $message->sender_type === 'patient' ? 'chat-bubble--mine' : 'chat-bubble--theirs' }}">
                    @if ($message->body)
                        <p>{{ $message->body }}</p>
                    @endif
                    @if ($message->attachment_path)
                        @if ($message->attachment_type === 'image')
                            <a href="{{ asset($message->attachment_path) }}" target="_blank" rel="noopener"><img src="{{ asset($message->attachment_path) }}" alt="{{ trans('clinic.chat.attachment') }}"></a>
                        @else
                            <a href="{{ asset($message->attachment_path) }}" target="_blank" rel="noopener" class="chat-file"><i class="far fa-paperclip"></i> {{ trans('clinic.chat.attachment') }}</a>
                        @endif
                    @endif
                    <time datetime="{{ $message->created_at->toIso8601String() }}">{{ $message->created_at->translatedFormat('h:i A') }}</time>
                </div>
            @empty
                <div class="account-empty" data-chat-empty>
                    <i class="far fa-comment-dots"></i>
                    <p class="mb-0">{{ trans('site.chat.start') }}</p>
                </div>
            @endforelse
        </div>

        <form action="{{ route('clinic.chat.store', $doctor) }}" method="POST" enctype="multipart/form-data" class="chat-composer">
            @csrf
            <label class="chat-composer__attach" title="{{ trans('site.chat.attach') }}">
                <i class="far fa-paperclip"></i>
                <span class="visually-hidden">{{ trans('site.chat.attach') }}</span>
                <input type="file" name="attachment" data-chat-file>
            </label>
            <div class="chat-composer__field">
                <textarea name="body" rows="1" class="form-control" placeholder="{{ trans('clinic.chat.write_message') }}" aria-label="{{ trans('clinic.chat.write_message') }}">{{ old('body') }}</textarea>
                <small class="chat-composer__file" data-chat-file-name hidden></small>
            </div>
            <button type="submit" class="chat-composer__send" aria-label="{{ trans('clinic.chat.send') }}"><i class="fas fa-paper-plane"></i></button>
        </form>
        @error('body')<div class="text-danger small px-3 pb-2">{{ $message }}</div>@enderror
        @error('attachment')<div class="text-danger small px-3 pb-2">{{ $message }}</div>@enderror
    </div>
@endsection

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

            // Show the chosen file's name under the message box.
            var fileInput = document.querySelector('[data-chat-file]');
            var fileName = document.querySelector('[data-chat-file-name]');
            fileInput.addEventListener('change', function () {
                fileName.hidden = !fileInput.files.length;
                fileName.textContent = fileInput.files.length ? fileInput.files[0].name : '';
            });

            // Enter sends, Shift+Enter adds a line.
            var textarea = document.querySelector('.chat-composer textarea');
            textarea.addEventListener('keydown', function (event) {
                if (event.key === 'Enter' && !event.shiftKey) {
                    event.preventDefault();
                    textarea.form.requestSubmit();
                }
            });

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

                var empty = thread.querySelector('[data-chat-empty]');
                if (empty) {
                    empty.remove();
                }

                var bubble = document.createElement('div');
                bubble.className = 'chat-bubble chat-bubble--theirs';

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

                if (data.attachment_path) {
                    var link = document.createElement('a');
                    link.href = data.attachment_path;
                    link.target = '_blank';
                    link.rel = 'noopener';
                    if (data.attachment_type === 'image') {
                        var img = document.createElement('img');
                        img.src = data.attachment_path;
                        img.alt = @json(trans('clinic.chat.attachment'));
                        link.appendChild(img);
                    } else {
                        link.className = 'chat-file';
                        link.textContent = @json(trans('clinic.chat.attachment'));
                    }
                    bubble.appendChild(link);
                }

                var time = document.createElement('time');
                time.textContent = new Date().toLocaleTimeString(document.documentElement.lang, { hour: '2-digit', minute: '2-digit' });
                bubble.appendChild(time);

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