<div class="container my-5">
    <h1>🧪 Test Footer Implementation</h1>
    <p>Trang này test việc render footer từ backend API trong layout chính</p>

    <div class="alert alert-info">
        <h5>📊 Kiểm tra các yếu tố:</h5>
        <ul class="mb-0">
            <li>✅ Footer được load từ <code>GET /api/footer</code></li>
            <li>✅ Render đúng các section: About, Columns, Contact, Social</li>
            <li>✅ Tôn trọng thứ tự (order) của columns và social links</li>
            <li>✅ XSS protection với escapeHtml()</li>
            <li>✅ Fallback footer nếu API lỗi</li>
        </ul>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>🔗 API Test</h5>
                </div>
                <div class="card-body">
                    <button class="btn btn-primary" onclick="testFooterAPI()">Test API</button>
                    <div id="apiResult" class="mt-3"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>📱 Footer Status</h5>
                </div>
                <div class="card-body">
                    <div id="footerStatus">
                        <p>Footer sẽ được load tự động khi trang tải xong.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    async function testFooterAPI() {
        const resultDiv = document.getElementById("apiResult");
        resultDiv.innerHTML = "<p>⏳ Đang test API...</p>";

        try {
            const response = await fetch("/api/footer");
            const data = await response.json();

            let html = '<div class="alert alert-success">';
            html += "<h6>✅ API Response thành công:</h6>";
            html += `<p><strong>About:</strong> ${data.about?.title || "N/A"}</p>`;
            html += `<p><strong>Columns:</strong> ${data.columns?.length || 0} cột</p>`;
            html += `<p><strong>Social:</strong> ${data.social?.links?.length || 0} links</p>`;
            html += `<p><strong>Contact:</strong> ${data.contact?.email || "N/A"}</p>`;
            html += "</div>";

            resultDiv.innerHTML = html;
        } catch (error) {
            resultDiv.innerHTML = `<div class="alert alert-danger">❌ Lỗi: ${error.message}</div>`;
        }
    }

    // Monitor footer loading
    document.addEventListener("DOMContentLoaded", function () {
        const statusDiv = document.getElementById("footerStatus");

        // Check if footer elements exist
        const footerContent = document.getElementById("footerContent");
        const footerCopyright = document.getElementById("footerCopyright");

        if (footerContent && footerCopyright) {
            statusDiv.innerHTML = `
            <div class="alert alert-success">
                ✅ Footer elements found<br>
                ✅ Dynamic loading script active<br>
                ✅ Footer sẽ được render từ API
            </div>
        `;

            // Monitor footer content changes
            const observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.target.id === "footerContent" && mutation.target.innerHTML.includes("About")) {
                        statusDiv.innerHTML +=
                            '<div class="alert alert-info mt-2">🎉 Footer đã được render thành công!</div>';
                    }
                });
            });

            observer.observe(footerContent, { childList: true, subtree: true });
        } else {
            statusDiv.innerHTML = '<div class="alert alert-warning">⚠️ Footer elements không tìm thấy</div>';
        }
    });
</script>
