@php use Modules\Core\Helpers\Helper; @endphp
@extends('front::layouts.master')

@section('title','E-TECH || Blog Detail page')

@section('content')
    <!-- Breadcrumbs -->
    <div class="breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bread-inner">
                       <ul class="bread-list">
                            <li><a href="{{route('front.index')}}">Home<i class="ti-arrow-right"></i></a></li>
                            <li><a href="{{route('front.blog')}}">Blog<i class="ti-arrow-right"></i></a></li>
                            <li class="active"><a href="javascript:void(0);">{{ Str::limit($post->title, 30) }}</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Breadcrumbs -->

    <!-- Start Blog Single -->
    <section class="blog-single section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-12">
                    <div class="blog-single-main">
                        <div class="row">
                            <div class="col-12">
                                <div class="image">
                                    <img src="{{$post->imageUrl}}" alt="{{$post->title}}">
                                </div>
                                <div class="blog-detail">
                                    <h2 class="blog-title">{{$post->title}}</h2>
                                    <div class="blog-meta">
    <span class="author">
        <span class="author-info">
            <i class="fa fa-user"></i>By {{ $post->author->name }}
        </span>
        <span class="date-info">
            <i class="fa fa-calendar"></i>{{ $post->created_at->format('M d, Y') }}
        </span>
        <span class="comment-info">
            <i class="fa fa-comments"></i>Comment (<span id="comment-count-header">{{ $post->allComments->count() }}</span>)
        </span>
    </span>
</div>
                                    <div class="content">
                                        <p>{!! ($post->description) !!}</p>
                                    </div>
                                </div>
                                <div class="share-social">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="content-tags">
                                                <h4>Tags:</h4>
                                                <ul class="tag-inner" id="jsbb">
                                                    @foreach($post->tags as $tag)
                                                        <li><a href="{{ route('front.blog-by-tag', $tag->slug) }}">{{ $tag->title }}</a></li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            @auth
                                <div class="col-12 mt-4">
                                    <div class="reply">
                                        <div class="reply-head comment-form" id="commentFormContainer">
                                            <h2 class="reply-title">Leave a Comment</h2>
                                            <!-- Comment Form - Removed Name and Email fields -->
                                            <form class="form comment_form" id="commentForm" method="POST">
                                                @csrf
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="form-group comment_form_body">
                                                            <label>Your Message<span>*</span></label>
                                                            <textarea name="comment" id="comment" rows="5" class="form-control" 
                                                                      placeholder="Write your comment here..." required></textarea>
                                                            <input type="hidden" name="post_id" value="{{ $post->id }}"/>
                                                            <input type="hidden" name="parent_id" id="parent_id" value=""/>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group button">
                                                            <button type="submit" class="btn btn-primary" id="submitCommentBtn">
                                                                <span class="comment_btn comment">Post Comment</span>
                                                                <span class="comment_btn reply" style="display: none;">Post Reply</span>
                                                            </button>
                                                            <span class="loading-spinner" style="display: none; margin-left: 10px;">
                                                                <i class="fa fa-spinner fa-spin"></i> Posting...
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                            <!-- End Comment Form -->
                                        </div>
                                    </div>
                                </div>
                            @else
                                <p class="text-center p-5">
                                    You need to <a href="{{route('login')}}" style="color:rgb(54, 54, 204)">Login</a> to comment.
                                </p>
                            @endauth
                            
                            <div class="col-12">
                                <div class="comments">
                                    <h3 class="comment-title">Comments (<span id="comment-count">{{$post->allComments->count()}}</span>)</h3>
                                    <!-- Comments Container -->
                                    <div id="comments-container">
                                    @php
                                        // Get only active top-level comments
                                        $activeComments = $post->comments->where('status', 'active');
                                    @endphp

                                    @include('front::pages.comment', ['comments' => $activeComments, 'depth' => 3])
                                </div>
                                    <!-- End Comments Container -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-12">
                    <div class="main-sidebar">
                        <!-- Single Widget -->
                        <div class="single-widget search">
                            <form class="form" method="GET" action="{{route('front.blog-search')}}">
                                <input type="text" placeholder="Search Here..." name="search">
                                <button class="button" type="submit"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                        <!--/ End Single Widget -->
                        
                        <!-- Single Widget -->
                        <div class="single-widget side-tags">
                            <h3 class="title">Category</h3>
                            <ul class="tag">
                                @php
                                    $categories = Helper::postCategoryList();
                                    $category = $categories->where('id', $post->cat_id)->first();
                                @endphp
                                
                                @if($category)
                                    <li>
                                        <a href="{{ route('front.blog-by-category', $category->slug) }}">
                                            {{ $category->name }}
                                        </a>
                                    </li>
                                @else
                                    <li>
                                        <a href="#">
                                            Uncategorized
                                        </a>
                                    </li>
                                @endif
                            </ul>
                        </div>
                        <!--/ End Single Widget -->
                        
                        <!-- Single Widget -->
                        <div class="single-widget recent-post">
                            <h3 class="title">Recent post</h3>
                            @foreach($recantPosts as $recentPost)
                                <!-- Single Post -->
                                <div class="single-post">
                                    <div class="image">
                                        <img src="{{$recentPost->imageUrl}}" alt="{{$recentPost->title}}">
                                    </div>
                                    <div class="content">
                                        <h5><a href="{{ route('front.blog-detail', $recentPost->slug) }}">{{$recentPost->title}}</a></h5>
                                        <ul class="comment">
                                            <li><i class="fa fa-calendar" aria-hidden="true"></i>{{$recentPost->created_at->format('d M, y')}}</li>
                                            <li><i class="fa fa-user" aria-hidden="true"></i>{{ $recentPost->author->name ?? 'Anonymous' }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- End Single Post -->
                            @endforeach
                        </div>
                        <!--/ End Single Widget -->
                        
                        <!-- Single Widget -->
                        <div class="single-widget side-tags">
                            <h3 class="title">Tags</h3>
                            <ul class="tag">
                                @if(isset($post) && $post->tags->count())
                                    @foreach($post->tags as $tag)
                                        <li><a href="{{ route('front.blog-by-tag', $tag->slug) }}">{{ $tag->title }}</a></li>
                                    @endforeach
                                @else
                                    @foreach(Helper::postTagList() as $tag)
                                        <li><a href="{{ route('front.blog-by-tag', $tag->slug) }}">{{ $tag->title }}</a></li>
                                    @endforeach
                                @endif
                            </ul>
                        </div>
                        <!--/ End Single Widget -->
                        
                        <!-- Single Widget -->
                        <div class="single-widget newsletter">
                            <h3 class="title">Newslatter</h3>
                            <div class="letter-inner">
                                <h4>Subscribe & get news <br> latest updates.</h4>
                                <form action="{{route('subscribe')}}" method="POST">
                                    @csrf
                                    <div class="form-inner">
                                        <input type="email" name="email" placeholder="Enter your email">
                                        <button type="submit" class="btn mt-2">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!--/ End Single Widget -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/ End Blog Single -->
@endsection

@push('styles')
    <script type='text/javascript'
            src='https://platform-api.sharethis.com/js/sharethis.js#property=5f2e5abf393162001291e431&product=inline-share-buttons'
            async='async'></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <style>
        .loading-spinner {
            display: inline-block;
            color: #007bff;
        }
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .replies-container {
            margin-left: 40px;
        }
        .toast-success {
            background-color: #28a745 !important;
        }
        .toast-error {
            background-color: #dc3545 !important;
        }
        .comment-list .appended {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        .form-control {
            display: block;
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
        .btn-primary {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        .btn-primary:hover {
            background-color: #0069d9;
        }
        
        .blog-single .single-comment .content h4 {
            margin-left: 40px !important;
        }
        
        .delete-comment-btn {
            background: none;
            border: none;
            color: #dc3545;
            cursor: pointer;
            padding: 0;
            font-size: 12px;
            margin-left: 10px;
        }
        .delete-comment-btn:hover {
            text-decoration: underline;
        }
        
        .comment-action {
            margin-top: 10px;
        }
        .comment-action .reply,
        .comment-action .delete-comment-btn {
            margin-right: 15px;
        } 
       a.btn.btn-sm.btn-reply.cancel {
                display: none !important;
            }
    </style>
@endpush

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
    $(document).ready(function () {
    "use strict";

    // Initialize toastr
    toastr.options = {
        "closeButton": true,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "timeOut": "3000",
        "extendedTimeOut": "1000"
    };

    // Handle reply button click
    $(document).on('click', '.btn-reply.reply', function (e) {
        e.preventDefault();
        
        var parent_id = $(this).data('id');
        var commentAuthor = $(this).closest('.single-comment').find('h4').text().trim();
        
        // Hide all reply buttons (no cancel anymore)
        $('.btn-reply.reply').show();
        
        // Hide current reply button
        $(this).hide();
        
        // Set parent_id
        $('#parent_id').val(parent_id);
        
        // Update UI for reply mode
        $('.comment_btn.comment').hide();
        $('.comment_btn.reply').show();
        $('.reply-title').text('Reply to ' + commentAuthor);
        $('#comment').attr('placeholder', 'Write a reply to ' + commentAuthor + '...');
        
        // Move form after the comment being replied to
        var html = $('#commentForm');
        $('#commentFormContainer').hide();
        $(this).parents('.comment-list').after('<div class="reply-form-container"></div>');
        $('.reply-form-container').html(html.clone(true, true));
        html.detach();
        
        // Scroll to form
        $('html, body').animate({
            scrollTop: $('.reply-form-container').offset().top - 100
        }, 500);
    });

    // ❌ CANCEL BUTTON LOGIC REMOVED COMPLETELY

    // Handle comment submission
    $(document).on('submit', '#commentForm', function (e) {
        e.preventDefault();

        var form = $(this);
        var formData = new FormData(this);
        var submitBtn = form.find('#submitCommentBtn');
        var spinner = form.find('.loading-spinner');
        var commentText = form.find('#comment').val().trim();

        if (commentText === '') {
            toastr.error('Please enter your comment.');
            return false;
        }

        submitBtn.prop('disabled', true);
        spinner.show();

        var postSlug = '{{ $post->slug }}';
        var url = '{{ route("post-comment.store", ":slug") }}'.replace(':slug', postSlug);

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                if (response.success) {
                    form.find('#comment').val('');
                    
                    $('#comment-count').text(response.comment_count);
                    $('#comment-count-header').text(response.comment_count);
                    
                    toastr.success(response.message);
                    
                    var parentId = form.find('#parent_id').val();
                    
                    if (parentId) {
                        var parentComment = $('.btn-reply.reply[data-id="' + parentId + '"]').closest('.display-comment');
                        
                        if (parentComment.find('.replies-container').length) {
                            parentComment.find('.replies-container').append(response.html);
                        } else {
                            parentComment.append('<div class="replies-container" style="margin-left:40px;">' + response.html + '</div>');
                        }
                    } else {
                        $('#comments-container').prepend(response.html);
                    }
                    
                    // Reset form
                    if ($('.reply-form-container').length) {
                        $('#commentFormContainer').show();
                        $('#commentFormContainer').append(form);
                        $('.reply-form-container').remove();
                    }
                    
                    form.find('#parent_id').val('');
                    $('.reply-title').text('Leave a Comment');
                    $('#comment').attr('placeholder', 'Write your comment here...');
                    $('.comment_btn.reply').hide();
                    $('.comment_btn.comment').show();
                    
                    // Show all reply buttons again
                    $('.btn-reply.reply').show();
                } else {
                    toastr.error(response.message || 'Error posting comment.');
                }
            },
            error: function (xhr) {
                let errorMessage = 'Error posting comment. Please try again.';
                
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    } else if (xhr.responseJSON.errors) {
                        errorMessage = Object.values(xhr.responseJSON.errors).join('\n');
                    }
                }
                
                toastr.error(errorMessage);
                console.error('Comment error:', {
                    status: xhr.status,
                    response: xhr.responseJSON
                });
            },
            complete: function () {
                submitBtn.prop('disabled', false);
                spinner.hide();
            }
        });
    });

    // Handle delete comment (unchanged)
    $(document).on('click', '.delete-comment-btn', function (e) {
        e.preventDefault();
        
        var commentId = $(this).data('id');
        var commentElement = $(this).closest('.single-comment');
        var deleteBtn = $(this);
        
        if (confirm('Are you sure you want to delete this comment?')) {
            deleteBtn.prop('disabled', true);
            deleteBtn.html('<i class="fa fa-spinner fa-spin"></i> Deleting...');
            
            var url = '{{ route("comment.delete", ":id") }}'.replace(':id', commentId);
            
            $.ajax({
                url: url,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        commentElement.remove();
                        
                        $('#comment-count').text(response.comment_count);
                        $('#comment-count-header').text(response.comment_count);
                        
                        toastr.success(response.message);
                    } else {
                        toastr.error(response.message || 'Error deleting comment.');
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'Error deleting comment. Please try again.';
                    
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    
                    toastr.error(errorMessage);
                    console.error('Delete comment error:', {
                        status: xhr.status,
                        response: xhr.responseJSON
                    });
                },
                complete: function() {
                    deleteBtn.prop('disabled', false);
                    deleteBtn.html('<i class="fa fa-trash"></i> Delete');
                }
            });
        }
    });
});
    </script>
@endpush