<?php
    // Fetch the comments with their replies and associated users
    $comments = $productDetails
        ->comments()
        ->latest()
        ->with(['user', 'replies', 'replies.user']);

    $count = $comments->count();
    $comments = $comments->limit(6)->get();
?>

<div class="comments">
    <!-- Comment Form -->
    <?php if($productDetails->user_id != auth()->id()): ?>
        <div class="comment-form-area">
            <?php if(auth()->guard()->check()): ?>
                <form class="comment-form" id="commentForm" method="POST" action="<?php echo e(route('user.comment.store')); ?>">
                    <?php echo csrf_field(); ?>
                    <input name="product_id" type="hidden" value="<?php echo e($productDetails->id); ?>">
                    <input name="type" type="hidden" value="<?php echo e($type); ?>">

                    <textarea class="form-control form--control review-textarea" name="comment" placeholder="<?php echo app('translator')->get('Enter your Comment'); ?>"
                        rows="8" required></textarea>
                    <button class="btn btn--base mt-3" type="submit"><?php echo app('translator')->get('Submit'); ?></button>
                </form>
            <?php endif; ?>
        </div>
    <?php endif; ?>

    <!-- Comments List -->
    <h6 class="comments__total mt-3" id="commentsTotal">
        <?php echo e($count); ?> <?php echo app('translator')->get('Comments'); ?>
    </h6>

    <ul class="comments-list" id="commentsList">
        <?php $__empty_1 = true; $__currentLoopData = $comments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $comment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <?php echo $__env->make('Template::partials.comment_item', ['comment' => $comment], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="empty-message-box">
                <i class="las la-comments icon"></i>
                <p class="caption"><?php echo app('translator')->get('No comments available yet.'); ?></p>
            </div>
        <?php endif; ?>
    </ul>

    <!-- Load More Button -->
    <?php if($productDetails->comments()->count() > 6): ?>
        <div class="view-more-btn text-center mt-4">
            <button class="btn btn--base loadMoreComments" data-type="<?php echo e($type); ?>">
                <?php echo app('translator')->get('Load More'); ?>
                <i class="fas fa-spinner fa-spin mx-1 loading-spinner d-none"></i>
            </button>
        </div>
    <?php endif; ?>
</div>

<?php $__env->startPush('script'); ?>
    <script>
        (function($) {
            "use strict";

            // Toggle Reply Form
            $(document).on('click', '.reply-btn', function() {
                var commentId = $(this).data('comment-id');
                $('#reply-form-' + commentId).toggle();
            });

            // Load More Comments
            var showComments = 6;
            $('.loadMoreComments').on('click', function(e) {
                e.preventDefault();

                var $button = $(this);
                var $spinner = $button.find('.loading-spinner'); // Select the spinner inside the button

                $button.addClass('btn-disabled').attr("disabled", true);
                $spinner.removeClass('d-none'); // Show spinner

                var type = $button.data('type');
                var skip = showComments;

                $.ajax({
                    type: 'get',
                    url: '<?php echo e(route('fetch.comments', $productDetails->id)); ?>',
                    data: {
                        type: type,
                        skip: skip
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.success) {
                            $('.comments-list').append(response.html);
                            showComments += 6;

                            if (response.last) {
                                $button.hide(); // Hide button when no more comments
                            } else {
                                $button.removeClass('btn-disabled').attr("disabled", false);
                            }

                            notify('success', 'More comments loaded successfully');
                        } else {
                            notify('error', response.error || "<?php echo app('translator')->get('Something went wrong.'); ?>");
                        }
                    },
                    error: function(xhr) {
                        notify('error', xhr.responseJSON.message || "<?php echo app('translator')->get('An error occurred.'); ?>");
                    },
                    complete: function() {
                        $spinner.addClass('d-none'); // Hide spinner after request
                    }
                });
            });

            // Submit Comment Form via AJAX
            $('#commentForm').on('submit', function(e) {
                e.preventDefault();
                let formData = $(this).serialize();

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            // Prepend new comment using rendered partial HTML
                            $('#commentsList').prepend(response.html);

                            // Update comments count
                            $('#commentsTotal').text(`${response.totalComments} <?php echo app('translator')->get('Comments'); ?>`);

                            // Clear the form
                            $('#commentForm')[0].reset();

                            $('#commentsList .empty-message-box').remove();

                            // Notify success
                            notify('success', 'Comment added successfully');
                        } else {
                            notify('error', response.message || "<?php echo app('translator')->get('Something went wrong.'); ?>");
                        }
                    },
                    error: function(xhr) {
                        notify('error', xhr.responseJSON.message || "<?php echo app('translator')->get('An error occurred.'); ?>");
                    }
                });
            });


            // Submit Reply Form via AJAX
            $(document).on('submit', '.reply-form-area form', function(e) {
                e.preventDefault();
                let form = $(this);
                let formData = form.serialize();

                $.ajax({
                    url: form.attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            $('#reply-form-' + response.commentId).hide(); // Hide reply form

                            // Find the last reply for this comment and append after it
                            let lastReply = $('#reply-form-' + response.commentId)
                                .closest('.comments-list-item')
                                .nextUntil(':not(.comment-reply)')
                                .last();

                            if (lastReply.length) {
                                lastReply.after(`
                                    <li class="comments-list-item comment-reply">
                                        <img class="comments-list-item__thumb" src="${response.userImage}" alt="${response.username}">
                                        <div class="comments-list-item__content">
                                            <p class="comments-list-item__name">${response.username}</p>
                                            <span class="comments-list-item__date">${response.date}</span>
                                            <p class="comments-list-item__desc">${response.reply}</p>
                                        </div>
                                    </li>
                                `);
                            } else {
                                // If no replies exist, append directly after the main comment
                                $('#reply-form-' + response.commentId)
                                    .closest('.comments-list-item')
                                    .after(`
                                        <li class="comments-list-item comment-reply">
                                            <img class="comments-list-item__thumb" src="${response.userImage}" alt="${response.username}">
                                            <div class="comments-list-item__content">
                                                <p class="comments-list-item__name">${response.username}</p>
                                                <span class="comments-list-item__date">${response.date}</span>
                                                <p class="comments-list-item__desc">${response.reply}</p>
                                            </div>
                                        </li>
                                    `);
                            }

                            // Clear the reply form
                            form[0].reset();

                            // Notify success
                            notify('success', 'Reply added successfully');
                        } else {
                            notify('error', response.message || "<?php echo app('translator')->get('Something went wrong.'); ?>");
                        }
                    },
                    error: function(xhr) {
                        notify('error', xhr.responseJSON.message || "<?php echo app('translator')->get('An error occurred.'); ?>");
                    }
                });
            });

        })(jQuery);
    </script>
<?php $__env->stopPush(); ?>
<?php /**PATH /home/mojibor/work.mojibor.com/core/resources/views/templates/basic/items/details/comments.blade.php ENDPATH**/ ?>