@push('css')
@endpush
@push('js')
    <script>
        // language-tags
        const lang_answer = "@lang('labels.answer')";
        const lang_yes_mark_it = "@lang('labels.yes_mark_it')";
        const lang_yes_clear_it = "@lang('labels.yes_clear_it')";
        const lang_approve_comment = "@lang('labels.approve_comment')";
        const lang_yes_approve = "@lang('labels.yes_approve')";
        const lang_yes_unapprove = "@lang('labels.yes_unapprove')";
        const lang_unapprove = "@lang('labels.unapprove')";
        const lang_approve = "@lang('labels.approve')";
        const lang_unpin = "@lang('labels.unpin')";
        const lang_pin = "@lang('labels.pin')";
        const lang_mark_answer = "@lang('labels.mark_answer')";
        const lang_form_cleared_successfully = "@lang('messages.form_cleared_successfully')";
        const lang_confirm_clear_form = "@lang('messages.confirm_clear_form')";
        const lang_all_text_will_be_cleared = "@lang('messages.all_text_will_be_cleared')";
        const lang_confirm_mark_as_answer = "@lang('messages.confirm_mark_as_answer')";
        const lang_this_cannot_be_undone = "@lang('messages.this_cannot_be_undone')";
        const lang_comment_will_be_visible = "@lang('messages.comment_will_be_visible')";
        const lang_confirm_unapprove = "@lang('messages.confirm_unapprove')";
        const lang_comment_will_be_hidden = "@lang('messages.comment_will_be_hidden')";
        const lang_confirm_restore = "@lang('messages.confirm_restore')";
        const lang_comment_will_be_restored = "@lang('messages.comment_will_be_restored')";
        const lang_mark_answer_title = "@lang('messages.mark_answer_title')";
        const lang_confirm_mark_answer = "@lang('messages.confirm_mark_answer')";
        // 


        const loadCommentsUrl = "{{ $loadCommentsUrl }}";
    </script>
    <script src="{{ asset('assets/custom/js/common/comments.js') }}?{{ time() }}"></script>
    <script src="{{ asset('assets/custom/js/common/comment-vote.js') }}?{{ time() }}"></script>
@endpush

<div class="card section-card mt-4">
    <div class="card shadow-sm">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-comments me-2"></i>
                {{ __('labels.comments') }} 
                (<span id="comments-count">{{ $commentsCount ?? 0 }}</span>)
            </h5>
        </div>
        <div class="card-body">
            @if(empty($comments->count()))
                <div class="text-center py-4">
                    <i class="fas fa-comment-slash fa-3x text-muted mb-3"></i>
                    <h5>{{ __('labels.no_comments_yet') }}</h5>
                    <p class="text-muted">{{ __('labels.be_first_to_comment') }}</p>
                </div>
            @endif
            
            <div id="commentsSection">
                @include('components.comments.comments-content', [
                    'comments' => $comments,
                    'commentableId' => $commentableId,
                    'commentableType' => $commentableType
                ])
            </div>
            
            <!-- Enhanced Comment Form Section -->
            <div 
                @class([
                    "comment-form-section mt-4",
                    'is-locked' => (isset($isDisabled) && $isDisabled),
                ])
            >
                <div class="comment-form-header">
                    <div class="comment-form-user-info">
                        <div class="comment-form-avatar">
                            {{ strtoupper(substr(auth()->user()->name, 0, 2)) }}
                        </div>
                        <div>
                            <h6>{{ auth()->user()->name }}</h6>
                            <small>{{ __('labels.posting_as') }}</small>
                        </div>
                    </div>
                    {{-- <div class="form-text">
                        <i class="fas fa-info-circle me-1"></i>
                        {{ __('labels.comment_form_guidance') }}
                    </div> --}}
                </div>
                
                <form id="createCommentForm" class="add-comment-form-inner" method="POST" 
                      action="{{ route('comments.store') }}"
                      onsubmit="submitCommentForm(event)">
                    @csrf
                    <input type="hidden" name="commentable_id" value="{{ $commentableId }}">
                    <input type="hidden" name="commentable_type" value="{{ $commentableType }}">
                    
                    <div class="char-count mb-3">
                        <label for="content" class="form-label fw-semibold">
                            <i class="fas fa-edit me-2"></i>{{ __('labels.your_comment') }}
                        </label>
                        <textarea class="form-control" id="content" name="content" rows="4" 
                                  oninput="charCounter(event)"
                                  @if(isset($isDisabled) && $isDisabled)
                                      disabled
                                  @endif
                                  placeholder="{{ __('labels.write_comment_placeholder') }}" 
                                  maxlength="2000" required>{{ old('comment') }}</textarea>
                        <div class="character-count mt-2">
                            <span id="charCount" class="char-counter">{{ old('comment') ? strlen(old('comment')) : 0 }}</span>/2000 {{ __('labels.characters') }}
                        </div>
                        @error('comment')
                            <div class="text-danger small mt-1">
                                <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- Form Tips Section -->
                    {{-- <div class="form-tips">
                        <h6><i class="fas fa-lightbulb me-2"></i>{{ __('labels.comment_tips') }}</h6>
                        <ul>
                            <li>{{ __('labels.tip_be_respectful') }}</li>
                            <li>{{ __('labels.tip_stay_on_topic') }}</li>
                            <li>{{ __('labels.tip_use_appropriate_language') }}</li>
                            <li>{{ __('labels.tip_no_spam') }}</li>
                        </ul>
                    </div> --}}

                    <div class="comment-form-actions">
                        <button type="button" class="btn btn-secondary" onclick="clearCommentForm()">
                            <i class="fas fa-eraser me-1"></i>{{ __('labels.clear') }}
                        </button>

                        @if(isset($isDisabled) && $isDisabled)
                            <button class="btn btn-secondary btn-sm" disabled>
                                <i class="fas fa-reply me-1"></i>{{ __('labels.post_comment') }}
                                    <small class="ms-1">({{ $disabledMessage ?? 'Locked' }})</small>
                            </button>
                        @else
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-2"></i>{{ __('labels.post_comment') }}
                            </button>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>