@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row">
        <!-- Sidebar - Position based on LTR/RTL -->
        <div class="col-lg-4 col-md-4 col-sm-4 {{ app()->getLocale() === 'ar' ? 'order-lg-2 order-md-2 order-sm-2' : 'order-lg-1 order-md-1 order-sm-1' }}">
            @include('frontend.blog.partials.sidebar')
        </div>

        <!-- Main Content -->
        <div class="col-lg-8 col-md-7 col-sm-7 {{ app()->getLocale() === 'ar' ? 'order-lg-1 order-md-1 order-sm-1 text-right' : 'order-lg-2 order-md-2 order-sm-2 text-left' }}">
            <!-- Breadcrumb -->
            <nav aria-label="breadcrumb" class="mb-4">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home', ['locale' => app()->getLocale()]) }}">{{ __('navigation.home') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('blog', ['locale' => app()->getLocale()]) }}">{{ __('navigation.blog') }}</a></li>
                    <li class="breadcrumb-item active">{{ $blog->title }}</li>
                </ol>
            </nav>

            <!-- Article Header -->
            <article class="blog-article">
                <header class="article-header mb-4">
                    <div class="d-flex align-items-center mb-3 {{ app()->getLocale() === 'ar' ? 'flex-row-reverse justify-content-end' : '' }}">
                        <span class="badge {{ app()->getLocale() === 'ar' ? 'ms-2' : 'me-2' }}"
                              style="background-color: {{ $blog->category->color ?? '#007bff' }}; color: white;">
                            {{ $blog->category->name }}
                        </span>
                        <small class="text-muted">
                            <i class="fas fa-calendar {{ app()->getLocale() === 'ar' ? 'ms-1' : 'me-1' }}"></i>
                            {{ $blog->published_at->format('F j, Y') }}
                        </small>
                        @if($blog->read_time)
                        <small class="text-muted {{ app()->getLocale() === 'ar' ? 'me-3' : 'ms-3' }}">
                            <i class="fas fa-clock {{ app()->getLocale() === 'ar' ? 'ms-1' : 'me-1' }}"></i>
                            {{ $blog->read_time }} min read
                        </small>
                        @endif
                    </div>

                    <h1 class="display-6 fw-bold text-dark mb-3">
                        {{ $blog->title }}
                    </h1>

                    <div class="d-flex align-items-center mb-4 {{ app()->getLocale() === 'ar' ? 'flex-row-reverse text-right' : 'text-left' }}">
                        <img src="{{ optional($blog->author)->avatar ?? '/assets/images/avatars/default.jpg' }}"
                             class="rounded-circle {{ app()->getLocale() === 'ar' ? 'ms-3' : 'me-3' }}"
                             width="48"
                             height="48"
                             alt="{{ optional($blog->author)->full_name ?? 'Unknown' }}">
                        <div>
                            <h6 class="fw-bold mb-0">{{ optional($blog->author)->full_name ?? 'Unknown' }}</h6>
                            <small class="text-muted">{{ optional($blog->author)->position ?? '' }}</small>
                        </div>
                    </div>
                </header>

                <!-- Featured Image -->
                @if($blog->featured_image)
                <div class="article-image mb-5">
                    <img src="{{ $blog->featured_image }}"
                         class="img-fluid rounded shadow"
                         alt="{{ $blog->title }}">
                    @if($blog->caption)
                    <figcaption class="text-center text-muted mt-2">
                        {{ $blog->caption }}
                    </figcaption>
                    @endif
                </div>
                @endif

                <!-- Article Content -->
                <div class="article-content {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                    {!! $blog->content !!}
                </div>

                <!-- Gallery Images -->
                @if($blog->gallery_images)
                <div class="article-gallery mt-5 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                    <h4 class="h5 fw-bold mb-3 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.gallery') }}</h4>
                    <div class="row g-3">
                        @foreach($blog->gallery_images as $image)
                        <div class="col-md-4">
                            <a href="{{ $image }}" data-lightbox="gallery">
                                <img src="{{ $image }}" class="img-fluid rounded" alt="Gallery Image">
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Tags -->
                @if($blog->tags)
                <div class="article-tags mt-4 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                    <h6 class="fw-bold mb-2 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.tags') }}:</h6>
                    <div class="d-flex flex-wrap gap-2 {{ app()->getLocale() === 'ar' ? 'justify-content-end' : '' }}">
                        @foreach(explode(',', $blog->tags) as $tag)
                        <a href="{{ route('blog', ['locale' => app()->getLocale(), 'search' => trim($tag)]) }}"
                           class="badge bg-light text-dark text-decoration-none">
                            #{{ trim($tag) }}
                        </a>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Social Sharing -->
                <div class="social-sharing mt-5 pt-4 border-top {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                    <h6 class="fw-bold mb-3 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.share_this_post') }}:</h6>
                    <div class="d-flex gap-2 {{ app()->getLocale() === 'ar' ? 'justify-content-end' : '' }}">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                           class="btn btn-outline-primary btn-sm" target="_blank">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($blog->title) }}"
                           class="btn btn-outline-info btn-sm" target="_blank">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(url()->current()) }}&title={{ urlencode($blog->title) }}"
                           class="btn btn-outline-primary btn-sm" target="_blank">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="mailto:?subject={{ $blog->title }}&body={{ urlencode(url()->current()) }}"
                           class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-envelope"></i>
                        </a>
                    </div>
                </div>

                <!-- Article Navigation -->
                <div class="article-navigation d-flex justify-content-between mt-5 pt-4 border-top {{ app()->getLocale() === 'ar' ? 'flex-row-reverse' : '' }}">
                    @if($prevBlog)
                        <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => $prevBlog->slug]) }}"
                           class="btn btn-outline-primary">
                            <i class="fas fa-arrow-left me-2"></i>
                            {{ __('navigation.previous_post') }}
                        </a>
                    @else
                        <span></span>
                    @endif

                    @if($nextBlog)
                        <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => $nextBlog->slug]) }}"
                           class="btn btn-outline-primary">
                            {{ __('navigation.next_post') }}
                            <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    @endif
                </div>
            </article>

                <!-- Comments Section -->
                @if($blog->allow_comments)
                <section class="comments-section mt-5 pt-5 border-top {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                    <h3 class="h4 fw-bold mb-4 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.comments') }}</h3>

                    <!-- Comments will be loaded here -->
                    <div id="comments-container">
                        <!-- Comments will be dynamically loaded -->
                    </div>

                    <!-- Comment Form -->
                    <div class="comment-form mt-4">
                        <h5 class="fw-bold mb-3 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.leave_a_comment') }}</h5>
                        <form id="comment-form">
                            @csrf
                            <input type="hidden" name="blog_id" value="{{ $blog->id }}">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <input type="text" name="author_name" class="form-control {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}" placeholder="{{ __('navigation.your_name') }}" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input type="email" name="author_email" class="form-control {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}" placeholder="{{ __('navigation.your_email') }}" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <textarea name="content" class="form-control {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}" rows="4" placeholder="{{ __('navigation.your_comment') }}" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">{{ __('navigation.submit_comment') }}</button>
                        </form>
                    </div>
                </section>
                @endif

                <!-- JavaScript for Comments -->
                @if($blog->allow_comments)
                <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const commentForm = document.getElementById('comment-form');
                    const commentsContainer = document.getElementById('comments-container');
                    const locale = '{{ app()->getLocale() }}';
                    const blogId = '{{ $blog->id }}';

                    // Load comments
                    loadComments();

                    // Handle comment form submission
                    commentForm.addEventListener('submit', function(e) {
                        e.preventDefault();

                        const formData = new FormData(this);
                        formData.append('_token', '{{ csrf_token() }}');

                        fetch(`/${locale}/blog/${blogId}/comments`, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'Accept': 'application/json'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                alert(data.message || '{{ __("Comment submitted successfully!") }}');
                                commentForm.reset();
                                loadComments();
                            } else {
                                let errorMessage = '{{ __("Error submitting comment.") }}';
                                if (data.errors) {
                                    const errors = Object.values(data.errors).flat();
                                    errorMessage = errors.join('\n');
                                } else if (data.message) {
                                    errorMessage = data.message;
                                }
                                alert(errorMessage);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('{{ __("Error submitting comment.") }}');
                        });
                    });

                    function loadComments() {
                        fetch(`/${locale}/blog/${blogId}/comments`, {
                            headers: {
                                'Accept': 'application/json'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                renderComments(data.comments);
                            }
                        })
                        .catch(error => {
                            console.error('Error loading comments:', error);
                        });
                    }

                    function renderComments(comments) {
                        if (comments.length === 0) {
                            commentsContainer.innerHTML = '<p class="text-muted">{{ __("navigation.no_comments_yet") }}</p>';
                            return;
                        }

                        commentsContainer.innerHTML = comments.map(comment => renderComment(comment)).join('');
                    }

                    function renderComment(comment) {
                        const isRTL = locale === 'ar';
                        const textAlign = isRTL ? 'text-right' : 'text-left';
                        const flexDirection = isRTL ? 'flex-row-reverse' : '';

                        return `
                            <div class="comment-item card border-0 shadow-sm mb-3 ${textAlign}">
                                <div class="card-body p-3">
                                    <div class="d-flex align-items-start ${flexDirection}">
                                        <img src="${comment.user?.avatar || '/assets/images/avatars/default.jpg'}"
                                             class="rounded-circle ${isRTL ? 'ms-3' : 'me-3'}"
                                             width="40" height="40" alt="Avatar">
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-start ${flexDirection}">
                                                <div>
                                                    <h6 class="fw-bold mb-1">${comment.author_display_name}</h6>
                                                    <small class="text-muted">${new Date(comment.created_at).toLocaleDateString()}</small>
                                                </div>
                                                <div class="d-flex gap-2">
                                                    <button class="btn btn-sm btn-outline-primary like-btn"
                                                            data-comment-id="${comment.id}">
                                                        <i class="fas fa-thumbs-up"></i>
                                                        <span class="likes-count">${comment.likes_count || 0}</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <p class="mb-2 mt-2">${comment.content}</p>
                                            ${comment.replies && comment.replies.length > 0 ?
                                                `<div class="replies mt-3">
                                                    ${comment.replies.map(reply => renderReply(reply)).join('')}
                                                </div>` : ''
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                    }

                    function renderReply(reply) {
                        const isRTL = locale === 'ar';
                        const textAlign = isRTL ? 'text-right' : 'text-left';
                        const flexDirection = isRTL ? 'flex-row-reverse' : '';

                        return `
                            <div class="reply-item ms-5 mt-2 ${textAlign}">
                                <div class="d-flex align-items-start ${flexDirection}">
                                    <img src="${reply.user?.avatar || '/assets/images/avatars/default.jpg'}"
                                         class="rounded-circle ${isRTL ? 'ms-2' : 'me-2'}"
                                         width="30" height="30" alt="Avatar">
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-start ${flexDirection}">
                                            <div>
                                                <h6 class="fw-bold mb-1 small">${reply.author_display_name}</h6>
                                                <small class="text-muted">${new Date(reply.created_at).toLocaleDateString()}</small>
                                            </div>
                                            <button class="btn btn-sm btn-outline-primary like-btn"
                                                    data-comment-id="${reply.id}">
                                                <i class="fas fa-thumbs-up"></i>
                                                <span class="likes-count">${reply.likes_count || 0}</span>
                                            </button>
                                        </div>
                                        <p class="mb-1 small">${reply.content}</p>
                                    </div>
                                </div>
                            </div>
                        `;
                    }

                    // Handle like buttons
                    commentsContainer.addEventListener('click', function(e) {
                        if (e.target.closest('.like-btn')) {
                            e.preventDefault();
                            const button = e.target.closest('.like-btn');
                            const commentId = button.dataset.commentId;

                            fetch(`/${locale}/comments/${commentId}/like`, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Content-Type': 'application/json',
                                    'Accept': 'application/json'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    button.querySelector('.likes-count').textContent = data.likes_count;
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                            });
                        }
                    });
                });
                </script>
                @endif

            <!-- Related Blog Posts -->
            @if($relatedBlogs->count() > 0)
            <section class="related-posts mt-5 pt-5 border-top {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                <h3 class="h4 fw-bold mb-4 {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">{{ __('navigation.related_posts') }}</h3>
                <div class="row g-4">
                    @foreach($relatedBlogs as $related)
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm h-100">
                            <img src="{{ $related->featured_image ?: '/assets/images/blog/default.jpg' }}"
                                 class="card-img-top"
                                 alt="{{ $related->title }}"
                                 style="height: 200px; object-fit: cover;">
                            <div class="card-body {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                <span class="badge mb-2"
                                      style="background-color: {{ $related->category->color ?? '#007bff' }}; color: white;">
                                    {{ $related->category->name }}
                                </span>
                                <h5 class="card-title fw-bold {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                    <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => $related->slug]) }}"
                                       class="text-dark text-decoration-none">
                                        {{ Str::limit($related->title, 60) }}
                                    </a>
                                </h5>
                                <p class="card-text text-muted small {{ app()->getLocale() === 'ar' ? 'text-right' : 'text-left' }}">
                                    {{ Str::limit($related->summary, 100) }}
                                </p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        {{ $related->published_at->diffForHumans() }}
                                    </small>
                                    <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => $related->slug]) }}"
                                       class="btn btn-primary btn-sm">
                                        {{ __('navigation.read') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </section>
            @endif
        </div>
    </div>
</div>
@endsection