{% 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="quiz-completed-container">
    <h2>Category {{ category_name }} of Part 1 has been completed.</h2>
    <p>The button below will lead you to the Category Selection Screen again.</p>
    <button type="button" onclick="window.location.href='{% url 'select_category' %}'" class="btn btn-primary">Choose Another Category</button>
    <p>Or you can print your results from this category.</p>
	<button class="active-button" id="generate-pdf">Save Results</button>
    <!-- Add Progress Bar -->
    <h3>Overall Progress</h3>
    <div class="progress-bar">
        <div class="progress"></div>
        <div class="progress-label">{{ progress_percentage }}% answered</div>
    </div>
</div>

<!-- Include the jQuery and JavaScript code for the progress bar -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // Calculate and display the rounded progress percentage
    var progressPercentage = parseFloat('{{ progress_percentage }}');
    $('.progress-label').text(Math.round(progressPercentage) + '% answered');
    
    // Update the progress bar's width based on the progress percentage
    $('.progress').css('width', progressPercentage + '%');

    $('#generate-pdf').click(function() {
        generatePDF();
    });

    function generatePDF() {
        const currentTime = new Date().toLocaleString(); // Get current time
        const categoryName = '{{ category_name }}'; // Use the category name from the context

        // Define the document definition for pdfmake
        const docDefinition = {
            content: [
                { text: 'Category 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: `Category: ${categoryName}`, 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 = [];
        let lastTextNode = ''; // To keep track of the last processed text

        // Process all child nodes to manage text and links
        htmlDoc.body.childNodes.forEach((node) => {
            if (node.nodeType === Node.TEXT_NODE) {
                const trimmedText = node.textContent.trim();
                if (trimmedText) {
                    // Add a space if there was previous 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');

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

                formattedText.push({
                    text: linkText,
                    link: href,
                    decoration: 'underline',
                    color: 'darkgoldenrod',  // Color of hyperlinks
                });
                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>
  footer {
    background-color: #F68E55;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 14px;
    z-index: 1;
  }

  .progress-bar {
    width: 50%; /* Adjust the width as needed */
    background-color: #f2f2f2;
    border-radius: 5px;
    margin-bottom: 20px;
    height: 20px; /* Adjust the height as needed */
    position: relative;
  }

  .progress {
    width: {{ progress_percentage }}%;
    background-color: #4caf50;
    height: 100%;
    border-radius: 5px;
    text-align: center;
    line-height: 20px; /* Should match the height of the progress bar */
    position: absolute;
    top: 0;
    left: 0;
  }

  .progress-label {
    color: black; /* Change the font color to black */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }  
</style>
{% endblock %}