{% extends "base.html" %}
{% 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">
    <h1>End of Part 1</h1>
    <p>You have completed all categories in Part 1</p>
    <p>You can now begin Part 2 or take a break. While you could go back to previous questions in Part 1 this will no longer be possible in Part 2, so after this screen, there is no turning back until completion.</p>
    <a href="{% url 'wave_2' %}" class="btn btn-primary">Start Part 2</a>
	<a href="{% url 'select_category' %}" class="btn btn-primary">Take a Break</a>
	<button class="active-button" id="generate-pdf">Save Part 1 Results</button>
</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: {{ progress_percentage|floatformat:2 }}% of total 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(`${categoryName}_results.pdf`);
    }

    // Function to extract and format hyperlinks in the question text with the correct color
    function extractAndFormatHyperlinks(text, originalColor) {
        const parser = new DOMParser();
        const htmlDoc = parser.parseFromString(decodeHTMLEntities(text), 'text/html');
        const links = htmlDoc.querySelectorAll('a');

        let formattedText = [];

        links.forEach(link => {
            const linkText = link.textContent || link.innerText || '';  // Extract the hyperlink text
            const href = link.getAttribute('href');  // Extract the URL

            // Append the link as a clickable hyperlink
            formattedText.push({
                text: linkText,
                link: href,
                decoration: 'underline',
                color: 'darkgoldenrod',  // Color of hyperlinks
            });
        });

        // If there is non-link text, handle it (not part of <a> tags)
        htmlDoc.body.childNodes.forEach((node) => {
            if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
                formattedText.unshift({
                    text: node.textContent,
                    color: originalColor // Apply the original color (based on user answer)
                });
            }
        });

        return formattedText;
    }

    // Function to decode HTML entities
    function decodeHTMLEntities(text) {
        const textarea = document.createElement('textarea');
        textarea.innerHTML = text;
        return textarea.value;
    }
});
</script>
{% endblock %}