@php
    use Spatie\Comments\Enums\NotificationSubscriptionType;
    use Illuminate\Support\Facades\Auth;
    use Illuminate\Support\Facades\Gate;
@endphp

<section class="comments {{ $newestFirst ? 'comments-newest-first' : '' }} {{$cssClass}}">
@if($showFormOnly)
    <!-- Include only the form when $showFormOnly is true -->
    @include('vendor.comments-metronic.livewire.partials.newComment')
@else
    <!-- Include the rest of the content when $showFormOnly is false -->
    <header class="comments-header">
        @if($this->comments->total() > 0)
          <span>
            Total Comments ({{ $this->comments->total() }})
          </span>
        @endif

        @if($writable && $showNotificationOptions && Auth::check())
            <div x-data="{ subscriptionsOpen: false}" class="comments-subscription">
                <button @click.prevent="subscriptionsOpen = true" class="comments-subscription-trigger">
                    {{ NotificationSubscriptionType::from($selectedNotificationSubscriptionType)->longDescription() }}
                </button>
                <x-comments::modal
                    bottom
                    compact
                    x-show="subscriptionsOpen"
                    @click.outside="subscriptionsOpen = false"
                >
                    @foreach(NotificationSubscriptionType::cases() as $case)
                        <button class="comments-subscription-item" @click="subscriptionsOpen = false" wire:click="updateSelectedNotificationSubscriptionType('{{ $case->value }}')">
                            {{ $case->description() }}
                        </button>
                    @endforeach
                </x-comments::modal>
            </div>
        @endif

        {{-- delete All Comments --}}
        @if($writable && !empty($this->loadedCommentsPages[array_keys($this->loadedCommentsPages)[0]]))
            <div class="ms-2 position-relative" x-data="{ confirmDelete: false }">
                <button class="comments-button is-danger" @click.prevent="confirmDelete = true">
                    {{ __('Delete All') }}
                </button>
                <x-comments::modal
                    right
                    bottom
                    x-show="confirmDelete"
                    @click.outside="confirmDelete = false"
                    :title="__('Delete All Comments')"
                >
                    <p>{{ __('comments::comments.delete_confirmation_text') }}</p>
                    <x-comments::button danger small wire:click="deleteAllComments">
                        {{ __('comments::comments.delete') }}
                    </x-comments::button>
                </x-comments::modal>
            </div>
        @endif
    </header>

    @if ($newestFirst && !$hideNewCommentForm)
        @include('vendor.comments-metronic.livewire.partials.newComment')
        <div class="separator separator-dashed my-5"></div>
    @endif
    <div id="pipeline_comment"
    class="scroll-y me-n5 pe-5 hover-scroll h-300px"
    data-kt-element="messages"
    data-kt-scroll="true"
    data-kt-scroll-activate="true"
    data-kt-scroll-height="auto"
    data-kt-scroll-offset="0px"
    x-data="{
        isScrollable: false,
        scrollToBottom() {
            // Ensure scroll logic happens after the DOM is fully updated
            setTimeout(() => {
                $el.scrollTop = $el.scrollHeight;
            }, 50); // Add a slight delay
        },
        loadPrevious() {
            if (@entangle('hasMorePrevious')) {
                const prevScrollHeight = $el.scrollHeight; // Save current scroll height before loading
                $wire.loadMore('previous').then(() => {
                    // Calculate new scroll height difference after loading
                    const scrollDiff = $el.scrollHeight - prevScrollHeight;
                    $el.scrollTop += scrollDiff; // Maintain the user's position
                });
            }
        },
        adjustHeight() {
            isScrollable = $el.scrollHeight > $el.clientHeight;
            if (!isScrollable) {
                this.loadPrevious();
            }
            this.scrollToBottom(); // Always scroll to bottom after adjustment
        }
    }"
    x-init="$nextTick(() => adjustHeight())"
    x-on:scroll="if ($el.scrollTop === 0) {
        loadPrevious();
    }"
>
    <!-- Messages will appear here -->


      @if ($currentPage > 1)
      {{-- <div class="text-center" x-intersect:enter="$wire.loadMore('previous')">
        <span class="badge badge-warning me-10 mb-10">Load Previous...
            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
        </span>
      </div> --}}
        {{-- <div class="text-center" x-intersect:enter="$wire.loadMore('previous')">
          <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div class="text-muted">Loading...</div>
        </div> --}}
      @endif

    @if(empty($this->loadedCommentsPages[array_keys($this->loadedCommentsPages)[0]]))
      {{-- <p class="comments-no-comment-yet">{{ $noCommentsText ?? __('comments::comments.no_comments_yet') }}</p> --}}
      <!--begin::Wrapper-->
      <div class="w-100 mt-4">
        <!--begin::Heading-->
        <div class="pb-12 text-center px-4 d-flex justify-content-center">

            <!--begin::Illustration-->
            <div class="text-center px-4">
                <img class="empty-state theme-image w-200px mb-2" src="https://huro.cssninja.io/assets/img/illustrations/projects/board/progress.svg" data-light="https://huro.cssninja.io/assets/img/illustrations/projects/board/progress.svg" data-dark="https://huro.cssninja.io/assets/img/illustrations/projects/board/progress-dark.svg" alt="">
            </div>
            <!--end::Illustration-->

            <!--begin::Description-->
            <div class="fw-semibold text-muted fs-6">
                There are no comments at the moment.
            </div>
            <div class="fw-semibold fs-6">
                Be the first to comment.
            </div>
            <!--end::Description-->
        </div>
        <!--end::Heading-->
      </div>
      <!--end::Wrapper-->
    @else
      @forelse($this->loadedCommentsPages as $commentsPage)
        @foreach($commentsPage as $comment)
          @continue(! Gate::check('see', $comment))
          <livewire:comments-comment
              :key="now()->timestamp.$comment->id"
              :comment="$comment"
              :show-avatar="$showAvatars"
              :newest-first="$newestFirst"
              :writable="$writable"
              :show-replies="$showReplies"
              :show-reactions="$showReactions"
              use-metronic="true"
          />
        @endforeach
      @empty
      @endforelse
    @endif

    @if (!$isLastPage)
      <div class="text-center" x-intersect="$wire.loadMore('next')">
        <span class="badge badge-success me-10 mb-10">Load More...
            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
        </span>
    @endif
    </div>
    {{-- @if ($this->comments->hasPages())
        {{ $this->comments->links() }}
    @endif --}}
    @if (! $newestFirst && !$hideNewCommentForm)
     @include('vendor.comments-metronic.livewire.partials.newComment')
    @endif
@endif
</section>