{{--
    Danh sách trao đổi (timeline) ở trang chi tiết khách hàng.
    Giữ các hook JS: .crm-comment (khối tin), .comment (vùng nội dung được thay bằng form khi sửa),
    .btn-edit-comment / .btn-delete-comment (data-id), .mobileLightBox (xem ảnh).
--}}
@if(count($docs))
    <ul class="crm-comment-list">
        @foreach($docs as $k => $item)
            @php
                $author = isset($item->call)
                    ? (isset($item->call->user) ? $item->call->user->full_name : 'Hệ thống')
                    : (isset($item->user) ? $item->user->full_name : 'Hệ thống');
                // Chữ cái đầu của từ cuối trong tên (vd "Telesale Yến Nhi" -> "N"); mb_ để không vỡ ký tự tiếng Việt
                $words = preg_split('/\s+/u', trim($author));
                $initial = mb_strtoupper(mb_substr(end($words) ?: 'N', 0, 1));
            @endphp
            <li class="crm-comment {{ isset($item->call) ? 'crm-comment--call' : '' }}">
                <span class="crm-comment__avatar">
                    @if(isset($item->call))
                        <i class="fas fa-phone"></i>
                    @else
                        {{ $initial }}
                    @endif
                </span>
                <div class="crm-comment__body">
                    <div class="crm-comment__head">
                        <span class="crm-comment__author">{{ $author }}</span>
                        <span class="crm-comment__time"><i class="far fa-clock"></i> {{ $item->created_at }}</span>
                        @if(isset($item->status))
                            <span class="crm-comment__tag" @if(@$item->status->color) style="--tag-color: {{ $item->status->color }}" @endif>
                                <i class="fas fa-tag"></i> {{ @$item->status->name }}
                            </span>
                        @endif
                        @if (Auth::user()->id == $item->user_id && !in_array('comment.edit',setting('permissions')??[]))
                            <div class="tools-msg edit_area crm-comment__tools">
                                <a data-original-title="Sửa" rel="tooltip" title="Sửa">
                                    <i class="fas fa-pen btn-edit-comment" data-id="{{$item->id}}"></i>
                                </a>
                                <a data-original-title="Xóa" rel="tooltip" title="Xoá" class="crm-comment__delete">
                                    <i class="fas fa-trash-alt btn-delete-comment" data-id="{{$item->id}}"></i>
                                </a>
                            </div>
                        @endif
                    </div>
                    <div class="comment crm-comment__text">
                        @if(isset($item->call))
                            <span class="crm-comment__call-label">File ghi âm</span>
                            <audio controls class="crm-comment__audio">
                                <source src="{{@$item->call->recording_url}}" type="audio/wav">
                            </audio>
                        @else
                            {!! $item->messages !!}
                        @endif
                    </div>
                    @if (isset($item->image))
                        <a href="{{ $item->image }}" class="mobileLightBox crm-comment__image">
                            <img src="{{ $item->image }}" alt="Ảnh đính kèm"/>
                        </a>
                    @endif
                </div>
            </li>
        @endforeach
    </ul>
    <div class="crm-comment-pager">
        {{ $docs->links() }}
    </div>
@else
    <div class="crm-comment-empty">
        <i class="far fa-comment-dots"></i>
        <span>Chưa có trao đổi nào với khách hàng này</span>
    </div>
@endif