{% extends "base.html" %}
{% load static %}
{% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<div class="completed-all-categories-container">
<div class="wave2-quiz-container">
    <h1>End of Part 1</h1>
    <h2>You've completed all categories from Part 1.</h2>
    <p>Now there are more detailed questions to come, to each of your answers. Feel free to take a break or continue with Part 2.</p>
    <div class="button-container">
        <a href="{% url 'bringiton' %}" class="button active-button">Continue</a>
        <a href="{% url 'select_game_mode' %}" class="button active-button">Take a Break</a>
		<button class="active-button" style="font-weight: bold;" id="generate-pdf">Save Part 1 Results</button>
    </div>
</div>
<script>
$(document).ready(function() {
    $('#generate-pdf').click(function() {
        generatePDF();
    });

    function generatePDF() {
        const currentTime = new Date().toLocaleString(); // Get current time

        // Define the document definition for pdfmake
        const docDefinition = {
            content: [
                { text: 'Part 1 Completion Log', style: 'header' },
                { text: 'Version September 2024', style: 'subheader' },
                { text: `Generated on: ${currentTime}`, style: 'date' },
				{ text: `Completed: 100% of Part 1`, style: 'subheader' },
                { text: 'Answered Questions:', style: 'subheader' },
                {
                    ul: [
                        {% for question in questions %}
                        {
                            text: extractAndFormatHyperlinks('{{ question.wave1questions }}', {% if question.user_answer == 1 %}'#00CED1'{% else %}'grey'{% endif %}),
                        },
                        {% endfor %}
                    ]
                },
                { text: 'Legend:', style: 'subheader' },
                {
                    ul: [
                        {
                            text: 'Blue: Affirmatively answered.',
                            color: '#00CED1'
                        },
                        {
                            text: 'Grey: Non-affirmatively answered.',
                            color: 'grey'
                        }
                    ]
                }
            ],
            styles: {
                header: { fontSize: 18, bold: true, margin: [0, 20, 0, 10] },
                subheader: { fontSize: 15, bold: true, margin: [0, 10, 0, 5] },
                date: { fontSize: 12, italics: true, margin: [0, 10, 0, 10] }
            }
        };

        // Generate PDF using pdfMake
        pdfMake.createPdf(docDefinition).download(`Part1_results.pdf`);
    }

function extractAndFormatHyperlinks(text, originalColor) {
    const parser = new DOMParser();
    const htmlDoc = parser.parseFromString(decodeHTMLEntities(text), 'text/html');
    const links = htmlDoc.querySelectorAll('a');

    let formattedText = [];
    let lastTextNode = ''; // To hold text from the last node processed

    // Process each child node
    htmlDoc.body.childNodes.forEach((node) => {
        if (node.nodeType === Node.TEXT_NODE) {
            const trimmedText = node.textContent.trim();
            if (trimmedText) {
                // If there's any previous text, add space before adding new text
                if (lastTextNode) {
                    formattedText.push({ text: ' ', color: originalColor });
                }
                formattedText.push({ text: trimmedText, color: originalColor });
                lastTextNode = trimmedText; // Update lastTextNode
            }
        } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'A') {
            const linkText = node.textContent || '';
            const href = node.getAttribute('href');

            // If there's text before the link, add space
            if (lastTextNode) {
                formattedText.push({ text: ' ', color: originalColor });
            }

            formattedText.push({
                text: linkText,
                link: href,
                decoration: 'underline',
                color: 'darkgoldenrod',
            });
            lastTextNode = linkText; // Update lastTextNode
        }
    });

    return formattedText;
}

    // Function to decode HTML entities
    function decodeHTMLEntities(text) {
        const textarea = document.createElement('textarea');
        textarea.innerHTML = text;
        return textarea.value;
    }
});
</script>
<style>
    .wave2-quiz-container {
        text-align: center;
        margin: 20px;
    }

    .button-container {
        display: flex;
        justify-content: center;
        gap: 20px; /* Spacing between buttons */
        margin-top: 20px;
    }

    .button {
        display: inline-block;
        padding: 10px 20px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s, color 0.3s, transform 0.2s;
    }

    .active-button {
        background-color: #007bff; /* Adjust to match your theme */
        color: #fff; /* Text color */
        border: none;
    }

    .active-button:hover {
        background-color: #F68E55; 
        color: #fff; /* Text color remains the same on hover */
        transform: scale(1.05); /* Slightly enlarge the button on hover */
    }

    .active-button:focus {
        outline: none; /* Remove default focus outline */
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); 
    }

    footer {
        position: absolute;
        bottom: 0; /* Ensure footer sticks to bottom */
        width: 100%; /* Full width */
    }
</style>
{% endblock %}