{{-- @if (!isAnonymousUser() || hasPermissionInvitedUser('add_comment'))
<div id="wrap_2" class="">
    <nav class="navbar-inverse" id="sidebar-comment-wrapper" role="navigation">
        <div class="famous-design-sidebar">
            <div class="fd-sidebar-topbar d-flex justify-content-between py-2">
                <ul class="nav nav-pills">

                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="pill" href="#comment"><i
                                class="material-icons comment_icon">chat_bubble</i><span
                                class="famous-tab-items">Comment</span></a>
                    </li>

                    @if (getUser() && !isAnonymousUser())
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#share"><i class="material-icons">share</i><span
                                class="famous-tab-items">Share</span></a>
                    </li>
                    @endif
                </ul>
                <div class="" data-toggle="offcanvas02" data-target="#wrap_2">
                    <span class="hide-btn font-medium text-uppercase font-size-13 line-height-21 color-gray">Hide</span>
                </div>
            </div>

            <div id="offcanvas09" class="tab-content famous-tab-items">
                <div class="tab-pane active show" id="comment">
                    <div class="conversation-container-js">
                        @include('inc.skeleton', ['key' => 'chat-items', 'number' => 5])
                    </div>
                    <div class="make-comment-wrap">
                        <ul class="img-preview conversation-preview-js mb-2">
                        </ul>
                        <div class="make-comment makecmnt_replyto user-reply-js" style="display: none;">
                            <span class="reply-user-name-js">Reply to @Unknown</span>
                            <span class="close_icn material-icons remove-reply-js">close</span>
                        </div>
                        <div class="make-comment">
                            <a href="#" class="">
                                <label class="mb-0" for="attach-comment-file"><i class="material-icons fa-rotate-130"
                                        style="color: #7e8082;">attachment</i></label>
                            </a>
                            <form id="conversation-form-js" class="mb-0" enctype="multipart/form-data">
                                <input class="conversation-id-js" type="hidden" name="message_id"
                                    value="{{$message_id ?? ''}}">
                                <input type="hidden" name="message_type" value="{{$message_type ?? ''}}">
                                <input type="file" id="attach-comment-file" class="d-none" name="files_data[]" multiple>
                                <textarea class="mention make-comment_textarea border-0 conversation-textarea-js"
                                    placeholder="Post comment" name="message" required></textarea>
                                <div class="options d-flex flex-column">
                                    <button class="submit_flag conversation-submit-js" type="submit">
                                        <i class="fas fa-paper-plane"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="progress mb-2" style="display: none;">
                            <div class="progress-bar"></div>
                        </div>
                    </div>
                </div>
                @if (getUser() && !isAnonymousUser())
                <div class="tab-pane fade" id="share">
                    @include('customer.projects.components.share-item')
                </div>
                @endif
            </div>
        </div>
    </nav>
</div>
@endif --}}
@if (!isAnonymousUser() || hasPermissionInvitedUser('add_comment'))
<div class="card chat-card mt-0">
    <div class="card_topBar d-flex align-items-center justify-content-between">
        
        <div class="project_filters project-show-header-js">
            @if(isset($show_status_bar))
                @include('inc.skeleton', ['key' => 'status-items', 'number' => 3])
            @endif
        </div>
        
        <div class="secondary d-flex align-items-center gap-2">
            {{-- <a href="#" class="add_task">Download </a> --}}
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="avatar">
                        <i class="fa-solid fa-ellipsis-vertical"></i>
                    </span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" role="tablist">
                    <li><a class="dropdown-item nav-link active" id="comment-tab" data-bs-toggle="tab" data-bs-target="#comment"
                            type="button" role="tab" aria-controls="comment" aria-selected="true">Comment</a></li>
                    <li><a class="dropdown-item nav-link" id="share-tab" data-bs-toggle="tab" data-bs-target="#share"
                            type="button" role="tab" aria-controls="share" aria-selected="true">Share</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tab-content" id="myTabContent2">
        <div class="tab-pane fade show active" id="comment" role="tabpanel" aria-labelledby="comment-tab">
            <div class="card-header mt-4">
                <span class="project-type">{{$project->project_type_name ?? ''}}</span>
                <h4>{{$project->project_title ?? ''}}</h4>
            </div>
            <div class="chat-Inner">
                <div class="chat-input">
                    <div class="make-comment makecmnt_replyto user-reply-js" style="display: none;">
                        <span class="reply-user-name-js">Reply to @Unknown</span>
                        <span class="close_icn material-icons remove-reply-js">close</span>
                    </div>
                    <form id="conversation-form-js" class="chatForm" enctype="multipart/form-data">
                        <input class="conversation-id-js" type="hidden" name="message_id" value="{{$message_id ?? ''}}">
                        <input type="hidden" name="message_type" value="{{$message_type ?? ''}}">
                        <div class="input-group">

                            <button class="btn btn-outline-secondary" type="button"
                                onclick="document.getElementById('attach-comment-file').click();"><i
                                    class="fa-solid fa-paperclip"></i></button>
                            <textarea id="messageInput" class="conversation-textarea-js" placeholder="Type your message here..." rows="1" name="message" required></textarea>
                            <input type="file" class="form-control" id="attach-comment-file" style="display: none;"
                                name="files_data[]" multiple>
                            <button class="btn btn-primary submit-btn conversation-submit-js" type="submit"><i
                                    class="fa-regular fa-paper-plane"></i></button>
                        </div>
                    </form>
                    <div class="progress mb-2" style="display: none;">
                        <div class="progress-bar"></div>
                    </div>
                    <ul class="img-preview conversation-preview-js">
                    </ul>
                </div>
                <div class="chat-messages mt-3 conversation-container-js" id="chatMessages">
                    @include('inc.skeleton', ['key' => 'chat-items', 'number' => 5])
                </div>
            </div>
        </div>
        @if (getUser() && !isAnonymousUser())
        <div class="tab-pane fade" id="share" role="tabpanel" aria-labelledby="share-tab">
            @include('customer.projects.components.share-item')
        </div>
        @endif
    </div>
</div>
@endif