{% include 'partial/home/search.html.twig' %}


{# ---------------------- Hero Section ---------------------- #}
<div class="container-fluid pt-5 bg-dark-cyber hero-header-alt mb-5">
    <div class="container pt-5">
        <div class="row g-5 pt-5">
            <div class="text-center">
                <h1 class="display-4 text-white mb-3 animated slideInRight shine-text">
                    {{ blogArticle.title }}
                </h1>
                <p class="text-light small">
                    Publié le <strong>{{ blogArticle.publishedAt|date('d/m/Y') }}</strong>
                   {% if blogArticle.category %}
                        &nbsp;|&nbsp;
                        <a href="{{ path('home.blog_article_by_category.list', { id_category: blogArticle.category.id }) }}"
                        class="badge bg-primary px-3 py-2 text-decoration-none">
                            {{ blogArticle.category.title }}
                        </a>
                    {% endif %}
                </p>
            </div>
        </div>
    </div>
</div>

{# ---------------------- Article Detail ---------------------- #}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">

            {# Featured Image #}
            {% if blogArticle.imagePath %}
                <div class="mb-5 text-center">
                    <img src="{{ vich_uploader_asset(blogArticle, 'imageFile') }}" alt="{{ blogArticle.title }}" class="img-fluid rounded shadow-lg" style="max-height: 500px; object-fit: cover;">
                </div>
            {% endif %}

            {# Short Description #}
            <div class="mb-4 px-2">
                <p class="lead text-muted text-justify border-start border-3 border-danger ps-3">
                    {{ blogArticle.shortDescription }}
                </p>
            </div>

            {# Main Content #}
            <div class="article-content text-dark" style="line-height: 1.8; font-size: 1.05rem;">
                {{ blogArticle.content|raw }}
            </div>

          

        </div>
    </div>
</div>

{% if relatedArticles|length > 0 %}
<div class="container mt-3">
    <h5 class="text-danger fw-bold mb-3 border-start border-3 border-danger ps-2 mb-5">Articles relatifs</h5>

    <div class="d-flex overflow-auto gap-3 pb-2">
        {% for article in relatedArticles %}
            <div class="card flex-shrink-0 border-0 shadow-sm rounded-3" style="width: 300px;">
                {% if article.imagePath %}
                    <img src="{{ vich_uploader_asset(article, 'imageFile') }}"
                         class="card-img-top"
                         style="height: 200px; object-fit: cover;"
                         alt="{{ article.title }}">
                {% endif %}
                <div class="card-body p-3 bg-light d-flex flex-column">
                    <h6 class="card-title text-dark mb-1" style="font-size: 0.95rem;">
                        {{ article.title|length > 45 ? article.title|slice(0, 45) ~ '...' : article.title }}
                    </h6>
                    <p class="text-muted small mb-2" style="font-size: 0.8rem;">
                        {{ article.shortDescription|length > 85 ? article.shortDescription|slice(0, 85) ~ '...' : article.shortDescription }}
                    </p>
                    <a href="{{ path('home.blog_article.show', {slug: article.slug}) }}"
                       class="btn btn-danger btn-sm w-100 mt-auto">Lire plus</a>
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% endif %}





<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">

            <h3 class="text-danger mb-4">Commentaires</h3>

            <div id="comments-container"></div>

            <form id="comment-form" data-id="{{ blogArticle.id }}" class="mt-4">
                <div class="mb-3">
                    <textarea class="form-control border-danger" name="content" rows="3" placeholder="Écrire un commentaire…" required></textarea>
                </div>
                <button type="submit" class="btn btn-danger" id="main-submit-btn">
                    <span class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true"></span>
                    Envoyer
                </button>
            </form>

        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const articleId = {{ blogArticle.id }};
    const container = document.getElementById('comments-container');
    const form = document.getElementById('comment-form');
    const mainSubmitBtn = document.getElementById('main-submit-btn');
    const spinner = mainSubmitBtn.querySelector('.spinner-border');

    function loadComments(){
        fetch(`/blog_articles/${articleId}/comments`)
            .then(res => res.json())
            .then(data => {
                container.innerHTML = '';
                const map = {};
                data.forEach(c => map[c.id] = {...c, children: []});
                const roots = [];
                Object.values(map).forEach(c => {
                    if(c.parentId) map[c.parentId].children.push(c);
                    else roots.push(c);
                });

                function render(comments, depth = 0){
                    if (depth > 2) return;
                    comments.forEach(c => {
                        const wrapper = document.createElement('div');
                        wrapper.className = 'mb-2';
                        wrapper.style.marginLeft = `${depth * 40}px`;

                        wrapper.innerHTML = `
                            <div class="d-flex align-items-start bg-white text-dark p-3 rounded border border-danger">
                                <img src={{asset("assets/img/avatar.png")}} alt="avatar" class="rounded-circle me-3" width="40" height="40">
                                <div class="flex-grow-1">
                                    <strong class="text-danger">Anonyme</strong>
                                    <p class="mb-1">${c.content}</p>
                                    <small class="text-muted">${c.createdAt}</small>
                                    ${depth < 2 ? `<button class="btn btn-sm btn-outline-danger mt-1 reply-btn" data-id="${c.id}">Répondre</button>` : ''}
                                </div>
                            </div>
                        `;

                        const replyForm = document.createElement('form');
                        replyForm.style.display = 'none';
                        replyForm.className = 'mt-2';
                        replyForm.innerHTML = `
                            <div class="mb-2">
                                <textarea class="form-control border-danger" name="content" rows="2" placeholder="Votre réponse…" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-sm btn-danger">
                                <span class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
                                Répondre
                            </button>
                        `;
                        wrapper.appendChild(replyForm);

                        if (depth < 2) {
                            wrapper.querySelector('.reply-btn').addEventListener('click', () => {
                                replyForm.style.display = replyForm.style.display === 'none' ? 'block' : 'none';
                            });

                            replyForm.addEventListener('submit', e => {
                                e.preventDefault();
                                const content = replyForm.querySelector('textarea').value.trim();
                                const btn = replyForm.querySelector('button');
                                const spin = btn.querySelector('.spinner-border');

                                if (!content) return;

                                btn.disabled = true;
                                spin.classList.remove('d-none');

                                submitComment(content, c.id, () => {
                                    btn.disabled = false;
                                    spin.classList.add('d-none');
                                    loadComments();
                                });
                            });
                        }

                        container.appendChild(wrapper);

                        if (c.children.length > 0) render(c.children, depth + 1);
                    });
                }

                render(roots);
            });
    }

    function submitComment(content, parentId = null, cb){
        fetch(`/blog_articles/${articleId}/comment`, {
            method: 'POST',
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({content, parent: parentId})
        })
        .then(res => {
            if(!res.ok) return res.json().then(e => Promise.reject(e.error));
            return res.json();
        })
        .then(_ => cb())
        .catch(err => {
            alert(err);
            cb();
        });
    }

    form.addEventListener('submit', e => {
        e.preventDefault();
        const content = form.querySelector('textarea').value.trim();
        if (!content) return;

        mainSubmitBtn.disabled = true;
        spinner.classList.remove('d-none');

        submitComment(content, null, () => {
            mainSubmitBtn.disabled = false;
            spinner.classList.add('d-none');
            form.querySelector('textarea').value = '';
            loadComments();
        });
    });

    loadComments();
});
</script>

{# ---------------------- Back to Top ---------------------- #}
<a href="#" class="btn btn-lg text-light bg-cyber-red btn-lg-square back-to-top pt-2">
    <i class="bi bi-arrow-up"></i>
</a>