85 lines
4.3 KiB
PHP
85 lines
4.3 KiB
PHP
<div class="_comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-{{ $comment->id }}">
|
|
<img src="{{ $comment->user->avatar_url }}" class="_comment-avatar" style="width: 36px; height: 36px; flex-shrink: 0;"
|
|
alt="{{ $comment->user->name }}">
|
|
<div style="flex: 1;">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
|
|
<span style="font-weight: 600; font-size: 14px;">{{ $comment->user->name }}</span>
|
|
<span
|
|
style="color: var(--text-secondary, #6b7280); font-size: 12px;">{{ $comment->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
|
|
{{-- ✅ Comment Body - Prefixed class --}}
|
|
<div class="_comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;"
|
|
data-_comment-enhanced="0">
|
|
{{ $comment->body }}
|
|
</div>
|
|
|
|
{{-- ✅ Edit Form (only for comment owner) --}}
|
|
@auth
|
|
@if (Auth::id() === $comment->user_id)
|
|
<div id="commentEditWrap{{ $comment->id }}" class="_comment-edit-wrap" style="display:none;">
|
|
<textarea id="commentEditInput{{ $comment->id }}" class="_comment-edit-textarea" rows="3">{{ $comment->body }}</textarea>
|
|
<div style="display:flex; gap:8px; justify-content:flex-end; margin-top:8px;">
|
|
<button type="button" class="_comment-btn _comment-btn-primary"
|
|
onclick="_comment.saveEditComment({{ $comment->id }})">
|
|
<i class="bi bi-chat-dots"></i>
|
|
<span>Send</span>
|
|
</button>
|
|
<button type="button" class="_comment-btn _comment-btn-secondary"
|
|
onclick="_comment.cancelEditComment({{ $comment->id }})">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endauth
|
|
|
|
{{-- ✅ Action Buttons --}}
|
|
<div style="display: flex; gap: 12px; margin-top: 8px;">
|
|
@auth
|
|
<button onclick="_comment.toggleReplyForm({{ $comment->id }})" class="_comment-btn _comment-btn-link">
|
|
Reply
|
|
</button>
|
|
@if (Auth::id() === $comment->user_id)
|
|
<button onclick="_comment.startEditComment({{ $comment->id }})"
|
|
class="_comment-btn _comment-btn-link">
|
|
Edit
|
|
</button>
|
|
<button onclick="window._commentDelete({{ $comment->id }})" class="_comment-btn _comment-btn-link">
|
|
Delete
|
|
</button>
|
|
@endif
|
|
@endauth
|
|
</div>
|
|
|
|
{{-- ✅ Reply Form --}}
|
|
<div id="replyForm{{ $comment->id }}" class="_comment-reply-form" style="display: none; margin-top: 12px;">
|
|
<textarea id="replyBody{{ $comment->id }}" class="_comment-reply-textarea" placeholder="Write a reply..."
|
|
rows="2" style="margin-bottom: 8px;"></textarea>
|
|
<div style="display: flex; gap: 8px; justify-content: flex-end;">
|
|
<button type="button" class="_comment-btn _comment-btn-primary"
|
|
onclick="_comment.submitReply({{ $video->id ?? $comment->video_id }}, {{ $comment->id }})">
|
|
<i class="bi bi-chat-dots"></i>
|
|
<span>Send</span>
|
|
</button>
|
|
<button type="button" class="_comment-btn _comment-btn-secondary"
|
|
onclick="_comment.toggleReplyForm({{ $comment->id }})">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ✅ Nested Replies --}}
|
|
@if ($comment->replies && $comment->replies->count() > 0)
|
|
<div class="_comment-reply-wrapper"
|
|
style="margin-left: 24px; margin-top: 12px; border-left: 2px solid var(--border-color, #e5e7eb); padding-left: 12px;">
|
|
@foreach ($comment->replies as $reply)
|
|
@include('videos.partials.comment', ['comment' => $reply, 'video' => $video ?? null])
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ✅ NO <script> TAGS - All JavaScript is in video-comments.blade.php --}}
|