@extends('web_site.account.layout')

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

@section('account_content')
    <div class="account-card">
        <div class="account-card__head">
            <h2 class="account-card__title">{{ trans('site.account.menu.messages') }}</h2>
            @if ($conversations->isNotEmpty())
                <input type="search" class="form-control style2 chat-search" placeholder="{{ trans('site.chat.search') }}" aria-label="{{ trans('site.chat.search') }}" data-chat-search>
            @endif
        </div>

        @forelse ($conversations as $conversation)
            @php
                $doctor = $conversation['doctor'];
                $last = $conversation['last_message'];
                $preview = $last->body ?: trans('clinic.chat.attachment');
            @endphp
            <a href="{{ route('clinic.chat.index', $doctor) }}" class="conversation-row {{ $conversation['unread_count'] ? 'is-unread' : '' }}" data-chat-name="{{ mb_strtolower($doctor->name.' '.$doctor->specialty?->name) }}">
                <img src="{{ $doctor->photo_path ? asset($doctor->photo_path) : asset('assets_web/img/team/img1.webp') }}" alt="{{ $doctor->name }}" loading="lazy">
                <span class="conversation-row__body">
                    <span class="conversation-row__top">
                        <strong>{{ $doctor->name }}</strong>
                        <small>{{ $last->created_at?->diffForHumans() }}</small>
                    </span>
                    <span class="conversation-row__preview">
                        @if ($last->sender_type === 'patient')<span class="text-muted">{{ trans('site.chat.you') }}:</span>@endif
                        {{ \Illuminate\Support\Str::limit($preview, 90) }}
                    </span>
                </span>
                @if ($conversation['unread_count'])
                    <span class="account-badge">{{ $conversation['unread_count'] }}</span>
                @endif
            </a>
        @empty
            <div class="account-empty">
                <i class="far fa-comments"></i>
                <p>{{ trans('site.chat.empty') }}</p>
                <a href="{{ route('clinic.search') }}" class="vs-btn style2">{{ trans('site.chat.find_doctor') }} <i class="far fa-user-md"></i></a>
            </div>
        @endforelse

        <p class="account-empty py-3 mb-0" data-chat-no-match hidden>{{ trans('site.chat.no_match') }}</p>
    </div>
@endsection

@section('js')
    <script>
        // Filter conversations by doctor name or specialty.
        (function () {
            var search = document.querySelector('[data-chat-search]');
            if (!search) {
                return;
            }
            var rows = document.querySelectorAll('[data-chat-name]');
            var noMatch = document.querySelector('[data-chat-no-match]');
            search.addEventListener('input', function () {
                var term = search.value.trim().toLowerCase();
                var shown = 0;
                rows.forEach(function (row) {
                    var match = row.getAttribute('data-chat-name').indexOf(term) !== -1;
                    row.hidden = !match;
                    shown += match ? 1 : 0;
                });
                noMatch.hidden = shown > 0;
            });
        })();
    </script>
@endsection