{% extends 'shop/base.html' %}
{% block title %}FAQs - Nana Tradings{% endblock %}

{% block content %}
<div class="container mt-5">
  {% include "shop/faq_filters.html" %}

  <h2 class="text-center fw-bold text-success">Frequently Asked Questions</h2>
  <hr class="mb-4">

  <div class="row mb-4">
    <div class="col-md-9 mb-2">
      <input type="text" id="faq-search" class="form-control search-input" placeholder="Search FAQs...">
    </div>
    <div class="col-md-3 text-end">
      <a href="{% url 'submit_question' %}" class="btn btn-success w-100">
        <i class="fas fa-question-circle me-1"></i> Ask a Question
      </a>
    </div>
  </div>

  <div id="faq-results">
    {% for faq in faqs %}
    <div class="faq-item p-4 border rounded-4 shadow-sm mb-4">
      <div class="d-flex align-items-center mb-2">
        {% if faq.user and faq.user.profile.image %}
        <img src="{{ faq.user.profile.image.url }}" class="rounded-circle me-3" width="40" height="40" alt="User">
        {% else %}
        <i class="fas fa-user-circle profile-icon-lg me-3"></i>
        {% endif %}
        <div>
          <p class="fw-bold text-success m-0">{{ faq.user.username }}</p>
          <small class="text"><i class="far fa-calendar-alt"></i> {{ faq.created_at|date:"F d, Y" }}</small>
        </div>
      </div>

      <p class="fw-semibold fs-5">Q: {{ faq.question }}</p>

      <div class="d-flex align-items-center gap-3 mb-3">
        <button class="btn btn-outline-success btn-sm like-btn" data-faq-id="{{ faq.id }}">
          <i class="fas fa-thumbs-up"></i> <span id="faq-likes-{{ faq.id }}">{{ faq.total_likes }}</span>
        </button>
        <button class="btn btn-outline-danger btn-sm dislike-btn" data-faq-id="{{ faq.id }}">
          <i class="fas fa-thumbs-down"></i> <span id="faq-dislikes-{{ faq.id }}">{{ faq.total_dislikes }}</span>
        </button>
      </div>

      {% for answer in faq.answers.all %}
      <div class="p-3 mb-3 border rounded-3 shadow-sm {% if forloop.counter > 1 %}d-none extra-answer{% endif %}">
        <div class="d-flex align-items-center">
          {% if answer.user.profile.image %}
          <img src="{{ answer.user.profile.image.url }}" class="rounded-circle me-3" width="40" height="40" alt="User">
          {% else %}
          <i class="fas fa-user-circle profile-icon-sm me-2"></i>
          {% endif %}
          <div>
            <p class="fw-bold text-success m-0">{{ answer.user.username }}</p>
            <small class="text"><i class="far fa-clock"></i> {{ answer.created_at|date:"F d, Y" }}</small>
          </div>
        </div>
        <div class="ps-3 mt-2 border-start border-3 border-success">
          <p>{{ answer.answer }}</p>
        </div>

        <div class="d-flex align-items-center gap-3 mt-2">
          <button class="btn btn-outline-primary btn-sm like-btn-answer" data-answer-id="{{ answer.id }}">
            <i class="fas fa-thumbs-up"></i> <span id="answer-likes-{{ answer.id }}">{{ answer.total_likes }}</span>
          </button>
          <button class="btn btn-outline-danger btn-sm dislike-btn-answer" data-answer-id="{{ answer.id }}">
            <i class="fas fa-thumbs-down"></i> <span id="answer-dislikes-{{ answer.id }}">{{ answer.total_dislikes }}</span>
          </button>
          <button class="btn btn-outline-success btn-sm" data-bs-toggle="modal" data-bs-target="#replyModal{{ answer.id }}">
            <i class="fas fa-comment-dots"></i> Reply
          </button>
        </div>

        {% if answer.comments.all %}
        <div class="mt-3 ms-4">
          {% for comment in answer.comments.all %}
          <div class="border-start border-2 border-success ps-3 py-2 mb-2">
            <p class="m-0 small fw-bold text-success">{{ comment.user.username }}:</p>
            <p class="m-0 small">{{ comment.comment }}</p>
            <p class="m-0 text small"><i class="far fa-clock"></i> {{ comment.created_at|date:"M d, Y H:i" }}</p>
          </div>
          {% endfor %}
        </div>
        {% endif %}

        <div class="modal fade" id="replyModal{{ answer.id }}" tabindex="-1" aria-labelledby="replyModalLabel{{ answer.id }}" aria-hidden="true">
          <div class="modal-dialog">
            <form method="POST" action="{% url 'add_answer_comment' answer.id %}">
              {% csrf_token %}
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Reply to Answer</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <textarea name="comment" class="form-control" rows="4" placeholder="Write your reply here..." required></textarea>
                </div>
                <div class="modal-footer">
                  <button type="submit" class="btn btn-success">Submit Reply</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      {% endfor %}

      {% if faq.answers.count > 1 %}
      <div class="text-center">
        <button class="btn btn-outline-success btn-sm show-more-btn" data-faq-id="{{ faq.id }}">
          Show More Answers <i class="fas fa-chevron-down"></i>
        </button>
      </div>
      {% endif %}

      <div class="text-end mt-3">
        {% if user.is_authenticated %}
        <a href="{% url 'submit_answer' faq.id %}" class="btn btn-success btn-sm">
          <i class="fas fa-reply"></i> Answer
        </a>
        {% else %}
        <a href="{% url 'login' %}" class="btn btn-outline-warning btn-sm">
          <i class="fas fa-sign-in-alt"></i> Log in to Answer
        </a>
        {% endif %}
      </div>
    </div>
    {% empty %}
    <p class="text-center text-muted">No FAQs available.</p>
    {% endfor %}
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    let searchInput = document.getElementById("faq-search");
    let resultsDiv = document.getElementById("faq-results");
    let originalFaqs = resultsDiv.innerHTML; // Store the original FAQ content

    if (searchInput) {
        searchInput.addEventListener("keyup", function () {
            let query = searchInput.value.trim();

            if (query === "") {
                resultsDiv.innerHTML = originalFaqs;
                attachLikeDislikeListeners();
                attachShowMoreListeners();
                return;
            }

            fetch("/faq/?q=" + query, {
                headers: { "X-Requested-With": "XMLHttpRequest" }
            })
            .then(response => response.json())
            .then(data => {
                resultsDiv.innerHTML = "";

                if (data.faqs.length === 0) {
                    resultsDiv.innerHTML = "<p class='text-center text-muted'>No results found.</p>";
                } else {
                    data.faqs.forEach(faq => {
                        let faqHTML = `
                            <div class="faq-item p-4 border rounded-4 shadow-lg mb-4">
                                <p class="faq-question fw-bold fs-5">Q: ${faq.question}</p>

                                <!-- ✅ Like & Dislike Buttons for FAQ -->
                                <div class="d-flex align-items-center gap-3">
                                    <button class="like-btn btn btn-outline-success btn-sm fw-bold" data-faq-id="${faq.id}">
                                        <i class="fas fa-thumbs-up"></i> <span id="faq-likes-${faq.id}">${faq.total_likes}</span>
                                    </button>
                                    <button class="dislike-btn btn btn-outline-danger btn-sm fw-bold" data-faq-id="${faq.id}">
                                        <i class="fas fa-thumbs-down"></i> <span id="faq-dislikes-${faq.id}">${faq.total_dislikes}</span>
                                    </button>
                                </div>

                                <div class="answers-container">`;

                        // ✅ Show first answer, hide others
                        if (faq.answers.length > 0) {
                            faq.answers.forEach((ans, index) => {
                                faqHTML += `
                                    <div class="answer-box p-3 mt-2 border rounded-3 shadow-sm ${index > 0 ? 'd-none extra-answer' : ''}">
                                        <p class="fw-bold text-success m-0">${ans.user}</p>
                                        <p class="mt-2">${ans.answer}</p>
                                        <small class="text">${ans.date}</small>

                                        <!-- ✅ Like & Dislike Buttons for Answer -->
                                        <div class="d-flex align-items-center gap-3 mt-2">
                                            <button class="like-btn-answer btn btn-outline-primary btn-sm fw-bold" data-answer-id="${ans.id}">
                                                <i class="fas fa-thumbs-up"></i> <span id="answer-likes-${ans.id}">${ans.total_likes}</span>
                                            </button>
                                            <button class="dislike-btn-answer btn btn-outline-danger btn-sm fw-bold" data-answer-id="${ans.id}">
                                                <i class="fas fa-thumbs-down"></i> <span id="answer-dislikes-${ans.id}">${ans.total_dislikes}</span>
                                            </button>
                                        </div>
                                    </div>
                                `;
                            });
                        } else {
                            faqHTML += `<p class='text'>No answers yet.</p>`;
                        }

                        faqHTML += `</div>`;

                        // ✅ Show More Button if multiple answers exist
                        if (faq.answers.length > 1) {
                            faqHTML += `
                                <div class="text-center mt-2">
                                    <button class="btn btn-outline-success btn-sm fw-bold show-more-btn" data-faq-id="${faq.id}">
                                        Show More Answers <i class="fas fa-chevron-down"></i>
                                    </button>
                                </div>
                            `;
                        }

                        // ✅ **Added Reply Button**
                        faqHTML += `
                            <div class="mt-3">
                                <a href="/submit-answer/${faq.id}/" class="btn btn-success btn-sm fw-bold shadow-sm">
                                    <i class="fas fa-reply"></i> Answer
                                </a>
                            </div>
                        `;

                        faqHTML += `</div>`;
                        resultsDiv.innerHTML += faqHTML;
                    });
                }
                attachLikeDislikeListeners(); // Reattach event listeners
                attachShowMoreListeners(); // Reattach event listeners for Show More button
            });
        });
    }

    // ✅ Function to Attach Like & Dislike Event Listeners Again
    function attachLikeDislikeListeners() {
        document.querySelectorAll(".like-btn, .dislike-btn").forEach(button => {
            button.addEventListener("click", function () {
                let faqId = this.getAttribute("data-faq-id");
                let action = this.classList.contains("like-btn") ? "like" : "dislike";
                let url = action === "like" ? `/like-faq/${faqId}/` : `/dislike-faq/${faqId}/`;

                fetch(url, {
                    method: "POST",
                    headers: {
                        "X-CSRFToken": getCSRFToken(),
                        "X-Requested-With": "XMLHttpRequest"
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.total_likes !== undefined && data.total_dislikes !== undefined) {
                        document.getElementById(`faq-likes-${faqId}`).innerText = data.total_likes;
                        document.getElementById(`faq-dislikes-${faqId}`).innerText = data.total_dislikes;
                    }
                });
            });
        });

        document.querySelectorAll(".like-btn-answer, .dislike-btn-answer").forEach(button => {
            button.addEventListener("click", function () {
                let answerId = this.getAttribute("data-answer-id");
                let action = this.classList.contains("like-btn-answer") ? "like" : "dislike";
                let url = action === "like" ? `/like-answer/${answerId}/` : `/dislike-answer/${answerId}/`;

                fetch(url, {
                    method: "POST",
                    headers: {
                        "X-CSRFToken": getCSRFToken(),
                        "X-Requested-With": "XMLHttpRequest"
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.total_likes !== undefined && data.total_dislikes !== undefined) {
                        document.getElementById(`answer-likes-${answerId}`).innerText = data.total_likes;
                        document.getElementById(`answer-dislikes-${answerId}`).innerText = data.total_dislikes;
                    }
                });
            });
        });
    }

    // ✅ Function to Attach Show More Button Event Listeners
    function attachShowMoreListeners() {
        document.querySelectorAll(".show-more-btn").forEach(button => {
            button.addEventListener("click", function () {
                let faqId = this.getAttribute("data-faq-id");
                let answers = this.closest(".faq-item").querySelectorAll(".extra-answer");

                answers.forEach(answer => {
                    answer.classList.toggle("d-none");
                });

                // ✅ Toggle Button Text
                if (this.innerHTML.includes("Show More")) {
                    this.innerHTML = "Show Less Answers <i class='fas fa-chevron-up'></i>";
                } else {
                    this.innerHTML = "Show More Answers <i class='fas fa-chevron-down'></i>";
                }
            });
        });
    }

    function getCSRFToken() {
        let csrfToken = document.querySelector("[name=csrfmiddlewaretoken]");
        return csrfToken ? csrfToken.value : "";
    }

    // Attach Event Listeners when page loads
    attachLikeDislikeListeners();
    attachShowMoreListeners();
});

</script>

<!-- ✅ Search Styles (Light & Dark Mode Support) -->
<style>
/* ✅ Search Container */
.search-container {
    display: flex;
    gap: 10px;
}

/* ✅ Search Input Field */
.search-input {
    border: 2px solid #148818;
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    color: black;
}

.search-input::placeholder {
    color: #666;
}

.dark-mode .search-input {
    background: #333;
    color: white;
    border-color: #00e676;
}

.dark-mode .search-input::placeholder {
    color: #bbb;
}

/* ✅ Search Button */
.search-btn {
    background: #148818;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
}

.search-btn:hover {
    background: #0f6f12;
    transform: scale(1.05);
}

.dark-mode .search-btn {
    background: #00e676;
    color: black;
}

.dark-mode .search-btn:hover {
    background: #00c853;
}

/* ✅ Responsive Design */
@media (max-width: 991px) {
    .search-container {
        flex-direction: column;
        gap: 12px;
    }

    .search-input, .search-btn {
        width: 100%;
    }
}
</style>
{% endblock %}