@extends('layouts.frontend.master')
@section('title')
    {{ $blog->name }}
@endsection

@section('meta_tags')
    <meta name="keywords" content="">
    <meta name="description" content="{{ Str::limit(strip_tags($blog->description), 150) }}">

    <!-- Open Graph Tags -->
    <meta property="og:title" content="{{ $blog->name }}" />
    <meta property="og:description" content="{{ Str::limit(strip_tags($blog->description), 150) }}" />
    <meta property="og:image" content="{{ $blog->thumbnail_image_url ?? asset('defaults/noimage/no_img.jpg') }}" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="article" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $blog->name }}">
    <meta name="twitter:description" content="{{ Str::limit(strip_tags($blog->description), 150) }}">
    <meta name="twitter:image" content="{{ $blog->thumbnail_image_url ?? asset('defaults/noimage/no_img.jpg') }}">
@endsection

@push('css')
{{--    <link rel="stylesheet" href="{{ asset('frontend/css/home.css') }}">--}}
    <style>
        .blog-details-page {
            background: #fff;
        }

        .blog-title {
            font-weight: 700;
            font-size: 2rem;
            color: #212529;
            margin-bottom: 30px;
        }

        .blog-user {
            align-items: center;
        }

        .blog-user img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .blog-user h6 {
            margin: 0;
        }

        .blog-date {
            color: #757575;
            font-size: 14px;
            font-weight: 600;
        }

        .blog-date i {
            border-radius: 50%;
            height: 35px;
            width: 35px;
            line-height: 33px;
            border: 1px solid #ddd;
            text-align: center;
            font-size: 16px;
            color: #444;
        }

        .blog-content p {
            color: #444;
            line-height: 1.7;
        }

        .comment-box {
        }

        .comment-input {
            background: #f1f3f5;
            border: none;
            padding: 12px 15px;
            border-radius: 8px;
            width: 100%;
        }

        .comment-item {
            border-bottom: 1px solid #e9ecef;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }

        .comment-item:last-child {
            border-bottom: none;
        }

        .comment-author {
            font-weight: 600;
            color: #1c1c1c;
        }

        .comment-text {
            color: #555;
            margin-top: 5px;
        }

        .comment-footer {
            font-size: 14px;
            color: #6c757d;
            margin-top: 10px;
        }

        .comment-footer a {
            text-decoration: none;
            color: #0d6efd;
            cursor: pointer;
        }

        .comment-footer a:hover {
            text-decoration: underline;
        }

        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }

        .small-thumb {
            width: 100px;
            height: 100px;
            object-fit: cover;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .small-thumb:hover {
            transform: scale(1.05);
        }

        #modalMainImage {
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }

        .nested-comments {
            padding-left: 20px;
            border-left: 2px solid #e9ecef;
        }

        .nested-comments .comment-item {
            padding-left: 15px;
        }

        .comment-input-box i {
            height: 40px;
            width: 40px;
            line-height: 38px;
            border-radius: 50%;
            transition: .4s;
            color: #444;
            font-size: 20px;
        }

        .comment-input-box i:hover {
            background: #ddd;
        }

        .comment-input-box .form-control,
        .comment-input-box button {
            background: #F1F3F5 !important;
            border: none;
            box-shadow: none;
        }

        .comment-input-box .form-control:focus,
        .comment-input-box button:focus {
            background: #F1F3F5;
            border: none;
            box-shadow: none;
            outline: none;
        }

        .reply-input-box {
            display: none;
            margin-top: 10px;
        }

        .reply-input-box.show {
            display: flex;
        }

        .blog-attachments .attachment-item {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .blog-attachments .attachment-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .blog-attachments .attachment-name {
            font-size: 14px;
            color: #333;
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
@endpush

@section('content')
    <section class="blog-details-page py-5">
        <div class="container">
            <!-- Blog Top Content -->
            <h1 class="blog-title">{{ $blog->name }}</h1>
            <div class="row mb-4">
                <div class="col-6">
                    <div class="d-flex align-items-center">
                        <div class="d-flex blog-user me-3">
                            <img src="{{ $blog->createdBy ? $blog->createdBy->profile_pic_url : asset('defaults/avatar/avatar.png') }}"
                                 alt="Author Image" class="rounded-circle" style="width: 40px; height: 40px;">
                            <h6>{{ $blog->createdBy ? $blog->createdBy->name : 'Unknown Author' }}</h6>
                        </div>
                        <div>
                            <div class="blog-date text-end">
                                <i class="fa fa-calendar"></i> {{ \Carbon\Carbon::parse($blog->created_at)->format('M d, Y') }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 align-self-center text-end">
                    <div class="d-flex justify-content-end align-items-center text-muted">
                        <div class="">
                            <span class="countComment">{{ $blog->comments ? count($blog->comments) : 0 }}</span> Comments
                        </div>
                        <div class="me-2 ms-2">|</div>
                        <div>
                            @php
                                $currentUrl = urlencode(request()->fullUrl());
                                $currentTitle = urlencode($blog->name ?? config('app.name'));
                            @endphp

                            <ul class="header-social-network d-inline-block list-inline mb-0">
                                <li class="list-inline-item text-muted"><span>Share this:</span></li>

                                {{-- Facebook --}}
                                <li class="list-inline-item">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ $currentUrl }}"
                                       target="_blank" title="Share on Facebook">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                </li>

                                {{-- X (Twitter) --}}
                                <li class="list-inline-item">
                                    <a href="https://x.com/intent/tweet?url={{ $currentUrl }}&text={{ $currentTitle }}"
                                       target="_blank" title="Share on X (Twitter)">
                                        <i class="fab fa-x-twitter"></i>
                                    </a>
                                </li>

                                {{-- LinkedIn --}}
                                <li class="list-inline-item">
                                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $currentUrl }}"
                                       target="_blank" title="Share on LinkedIn">
                                        <i class="fab fa-linkedin-in"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Blog Content -->
            <div class="blog-content">
                <p>{!! $blog->description !!}</p>
            </div>

            <!-- Blog Attachments -->
            @if($blog->attachments && $blog->attachments->isNotEmpty())
                <div class="blog-attachments mt-4 mb-4">
                    <h5 class="mb-3">Blog Attachments</h5>
                    <div class="d-flex flex-wrap gap-3">
                        @foreach($blog->attachments as $attachment)
                            <div class="attachment-item d-flex align-items-center border rounded p-3 bg-light" style="min-width: 200px;">
                                <div class="d-flex align-items-center flex-grow-1">
                                    <i class="{{ $attachment->getFileIcon() }} mr-2" style="font-size: 24px;"></i>
                                    <div>
                                        <div class="attachment-name font-weight-bold">{{ $attachment->original_name }}</div>
                                        <small class="text-muted">({{ $attachment->formatted_file_size }})</small>
                                    </div>
                                </div>
                                <div class="ml-3">
                                    <a href="{{ $attachment->file_url }}" target="_blank" class="btn btn-sm btn-primary">
                                        <i class="fas fa-download"></i> Download
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Comments Section -->
            <div class="comment-box mt-5">
                <h5 class="mb-4"><span class="countComment">{{ $blog->comments ? count($blog->comments) : 0 }}</span> Comments</h5>

                <!-- Comment Input -->
                <div class="d-flex align-items-start mb-4">
                    <img src="{{ auth()->user() ? auth()->user()->profile_pic_url : asset('defaults/avatar/avatar.png') }}"
                         class="comment-avatar me-2" alt="User Avatar"
                         style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;">

                    <div class="input-group comment-input-box">
                        <textarea class="form-control comment-input" rows="2" placeholder="What are your thoughts?"
                                  style="resize: none;"></textarea>
                        <button class="btn comment-submit" type="button">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </div>
                </div>

                <!-- Comments List -->
                <div id="commentsContainer">
                    @if($blog->comments && $blog->comments->isNotEmpty())
                        @foreach($blog->comments as $comment)
                            <div class="comment-item" data-comment-id="{{ $comment->id }}">
                                <div class="d-flex">
                                    <img src="{{ $comment->user ? $comment->user->profile_pic_url : asset('defaults/avatar/avatar.png') }}"
                                         class="comment-avatar" alt="Avatar" style="object-fit: cover;">
                                    <div>
                                        <div class="comment-author">{{ $comment->user ? $comment->user->name : 'Anonymous' }}</div>
                                        <div class="comment-text">{{ $comment->comment }}</div>
                                        <div class="comment-footer">
                                            @php
                                                $replyCount = $comment->replies ? count($comment->replies) : 0;
                                            @endphp
                                            {{ $replyCount }} {{ \Illuminate\Support\Str::plural('Reply', $replyCount) }}
                                            · <a href="#" class="reply-toggle">Reply</a>
                                        </div>
                                        <!-- Nested Replies Section -->
                                        @if($comment->replies && $comment->replies->isNotEmpty())
                                            <div class="nested-comments ml-5 mt-3">
                                                @foreach($comment->replies as $nestedComment)
                                                    <div class="comment-item d-flex"
                                                         data-comment-id="{{ $nestedComment->id }}">
                                                        <img src="{{ $nestedComment->user ? $nestedComment->user->profile_pic_url : asset('defaults/avatar/avatar.png') }}"
                                                             class="comment-avatar" alt="Avatar" style="object-fit: cover;">
                                                        <div>
                                                            <div class="comment-author">{{ $nestedComment->user ? $nestedComment->user->name : 'Anonymous' }}</div>
                                                            <div class="comment-text">{{ $nestedComment->comment }}</div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <!-- Reply Input Box -->
                                <div class="reply-input-box">
                                    <div class="input-group comment-input-box">
                                        <textarea class="form-control reply-input" rows="2"
                                                  placeholder="Write your reply..."
                                                  style="resize: none; margin-left: 52px"></textarea>
                                        <button class="btn reply-submit" type="button">
                                            <i class="fa fa-paper-plane"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p>No comments yet. Be the first to comment!</p>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
    <script>
        let blogId = {{ $blog->id ?? null }};

        $(document).ready(function () {
            fetchComments();
            commentCount();

            // Submit comment
            $('.comment-submit').on('click', function () {
                let commentInput = $(this).closest('.comment-input-box').find('.comment-input');
                let commentText = commentInput.val().trim();

                if (!commentText) {
                    toastr.error('Please enter your comment before submitting.');
                    return;
                }

                $.ajax({
                    url: '{{ route("blogs.comment.store") }}',
                    method: 'POST',
                    data: {
                        blog_id: blogId,
                        comment: commentText,
                        _token: '{{ csrf_token() }}'
                    },
                    beforeSend: function () {
                        $("#loader-container").hide();
                    },
                    success: function (response) {
                        if (response.success) {
                            commentInput.val('');
                            fetchComments();
                            commentCount();
                            toastr.success('Your comment has been posted successfully.');
                        } else {
                            toastr.error(response.message || 'Sorry, we couldn’t save your comment. Please try again.');
                        }
                    },
                    error: function (xhr) {
                        toastr.error(xhr.responseJSON?.message || 'A system error occurred. Please try again later.');
                    }
                });
            });

            $(document).on('click', '.reply-toggle', function (e) {
                e.preventDefault();
                let commentItem = $(this).closest('.comment-item');
                let replyBox = commentItem.find('.reply-input-box').first();
                replyBox.toggleClass('show');
                if (replyBox.hasClass('show')) {
                    replyBox.find('.reply-input').focus();
                }
            });

            // Submit reply
            $(document).on('click', '.reply-submit', function () {
                let replyInput = $(this).closest('.comment-input-box').find('.reply-input');
                let commentItem = $(this).closest('.comment-item');
                let parentId = commentItem.data('comment-id');
                let replyText = replyInput.val().trim();

                if (!replyText) {
                    toastr.error('Reply cannot be empty. Please type a message.');
                    return;
                }

                $.ajax({
                    url: '{{ route("blogs.comment.store") }}',
                    method: 'POST',
                    data: {
                        blog_id: blogId,
                        comment: replyText,
                        parent_id: parentId,
                        _token: '{{ csrf_token() }}'
                    },
                    beforeSend: function () {
                        $("#loader-container").hide();
                    },
                    success: function (response) {
                        if (response.success) {
                            replyInput.val('');
                            commentItem.find('.reply-input-box').removeClass('show');
                            fetchComments();
                            commentCount();
                            toastr.success('Your reply has been added.');
                        } else {
                            toastr.error(response.message || 'Unable to save your reply at the moment.');
                        }
                    },
                    error: function (xhr) {
                        toastr.error(xhr.responseJSON?.message || 'A system error occurred. Please try again later.');
                    }
                });
            });
        });

        function fetchComments() {
            $.ajax({
                url: `/blogs/comments/${blogId}`,
                beforeSend: function () {
                    $("#loader-container").hide();
                },
                success: function (response) {
                    $('#commentsContainer').html(response);
                    commentCount();
                },
                error: function () {
                    $('#commentsContainer').html('<p>No comments yet. Be the first to comment!</p>');
                    toastr.error('Failed to load comments. Please try again later.');
                }
            });
        }

        function commentCount() {
            $.ajax({
                url: `/blogs/comment-count/${blogId}`,
                beforeSend: function () {
                    $("#loader-container").hide();
                },
                success: function (response) {
                    $('.countComment').html(response);
                },
                error: function () {
                    $('.countComment').html(0);
                    toastr.error('Could not update comment count.');
                }
            });
        }
    </script>
@endpush