<%- include('../partials/header') %>

<div class="blog-post-page container py-4">
    <div class="row g-4">
        <div class="col-lg-8">
            <article class="blog-post-container">
                <div class="post-header">
                    <% if (post.category_name) { %>
                        <a href="/blog/category/<%= post.category_slug %>" class="post-category" data-i18n="blog.category.<%= post.category_slug %>"><%= post.category_name %></a>
                    <% } %>
                    <h1 class="post-title" data-i18n="post.blog.<%= post.id %>"></h1>
                    <div class="post-meta">
                        <span><i class="fas fa-calendar-alt"></i> <%= new Date(post.published_at).toLocaleDateString('fa-IR') %></span>
                        <span><i class="fas fa-user"></i> <%= post.author %></span>
                        <span><i class="fas fa-eye"></i> <%= post.views %> <span data-i18n="blog.views">بازدید</span></span>
                        <span><i class="fas fa-clock"></i> <%= post.reading_time || 3 %> <span data-i18n="blog.minute">دقیقه</span> <span data-i18n="blog.reading.time">مطالعه</span></span>
                    </div>
                </div>

                <% if (post.imageUrl) { %>
                    <div class="post-featured-image">
                        <img src="<%= post.imageUrl %>" alt="" data-i18n-alt="post.blog.<%= post.id %>">
                    </div>
                <% } %>

                <div class="post-content" data-i18n-desc="post.blog.<%= post.id %>"></div>

                <% if (tags && tags.length > 0) { %>
                <div class="post-tags">
                    <span data-i18n="blog.tags">برچسب‌ها:</span>
                    <% tags.forEach(tag => { %>
                        <a href="/blog/tag/<%= tag.slug %>" class="post-tag"><%= tag.name %></a>
                    <% }) %>
                </div>
                <% } %>
            </article>

            <% if (related && related.length > 0) { %>
            <div class="related-posts">
                <h3 data-i18n="blog.related.posts"></h3>
                <div class="row g-3">
                    <% related.forEach(rel => { %>
                        <div class="col-md-4">
                            <div class="related-card">
                                <% if (rel.imageUrl) { %>
                                    <img src="<%= rel.imageUrl %>" class="related-card-img" alt="" data-i18n-alt="post.blog.<%= rel.id %>">
                                <% } %>
                                <div class="related-card-content">
                                    <h4 class="related-card-title">
                                        <a href="/blog/<%= rel.slug %>" data-i18n="post.blog.<%= rel.id %>"></a>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    <% }) %>
                </div>
            </div>
            <% } %>

            <!-- بخش نظرات -->
            <div class="comments-section mt-5">
                <h3 class="comments-title" data-i18n="blog.comments"></h3>
                
                <% if (comments && comments.length > 0) { %>
                    <div class="comments-list">
                        <% comments.forEach(comment => { %>
                            <div class="comment-item p-3 mb-3 text-bg-dark rounded">
                                <div class="comment-header d-flex justify-content-between mb-2">
                                    <strong class="comment-name"><%= comment.name %></strong>
                                    <small class="comment-date text-muted"><%= new Date(comment.created_at).toLocaleDateString('fa-IR') %></small>
                                </div>
                                <div class="comment-content">
                                    <p><%= comment.content %></p>
                                </div>
                            </div>
                        <% }) %>
                    </div>
                <% } else { %>
                    <p class="text-muted" data-i18n="blog.no.comments"></p>
                <% } %>
                
                <form class="comment-form mt-4" id="commentForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <input type="text" id="commentName" class="form-control bg-dark text-white" placeholder="" data-i18n-placeholder="blog.comment.name">
                        </div>
                        <div class="col-md-6">
                            <input type="email" id="commentEmail" class="form-control bg-dark text-white" placeholder="" data-i18n-placeholder="blog.comment.email">
                        </div>
                        <div class="col-12">
                            <textarea id="commentContent" class="form-control bg-dark text-white" rows="4" placeholder="" data-i18n-placeholder="blog.comment.content"></textarea>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary" data-i18n="blog.comment.submit"></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="blog-sidebar">
                <div class="sidebar-widget">
                    <h3 class="widget-title" data-i18n="blog.categories"></h3>
                    <ul>
                        <% categories.forEach(cat => { %>
                            <li><a href="/blog/category/<%= cat.slug %>" data-i18n="blog.category.<%= cat.slug %>"><%= cat.name %></a></li>
                        <% }) %>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .comments-list .p-3{
        padding: 1rem !important;
    }
</style>
<script>
document.getElementById('commentForm')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const name = document.getElementById('commentName')?.value;
    const email = document.getElementById('commentEmail')?.value;
    const content = document.getElementById('commentContent')?.value;
    
    if (!name || !email || !content) {
        alert('لطفا همه فیلدها را پر کنید');
        return;
    }
    
    try {
        const response = await fetch(`/blog/<%= post.slug %>/comment`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name, email, content })
        });
        const data = await response.json();
        alert(data.message);
        if (data.success) {
            document.getElementById('commentForm').reset();
            setTimeout(() => {
                location.reload();
            }, 1500);
        }
    } catch (error) {
        alert('خطا در ارسال نظر');
    }
});
</script>

<%- include('../partials/footer') %>