{% extends "base.html" %}
{% load template_filters %}
{% load template_tags %}
{% load i18n %}
{% load compress %}
{% load static %}

{% block head %}
{{ block.super }}
{% compress css %}
    <link type="text/x-scss" href="{% static 'theme.scss' %}" rel="stylesheet" media="print">
{% endcompress %}
<script src="{% static 'js/html-to-rtf-browser.js' %}"></script>
{% endblock %}

{% block title %}{% trans "vypis.templates.vypis_list.index.title" %}{% endblock %}

{% block content %}
{% get_current_language as LANGUAGE_CODE %}
  {% if "en" in LANGUAGE_CODE %}
  <div id="app-lang" lang="english"></div>
  {% else %}
  <div id="app-lang" lang="czech"></div>
  {% endif %}
<div class="row" id="title_row">
    <div class="col-9">
        <h1>{{title}}</h1>
    </div>
    <div class="col-3 d-print-none align-self-center no-export">
        <div class="float-right">
            <button onclick="window.print()" title="{% trans 'vypis.templates.vypis_list.print.tooltip' %}">
                <span class="material-icons">print</span>
            </button>
            <button onclick="createRtf()" title="{% trans 'vypis.templates.vypis_list.download.tooltip' %}">
                <span class="material-icons">download</span>
            </button>
        </div>
    </div>
    <div class="col-9">
        <p>{% trans "vypis.templates.vypis_list.datum_sestaveni" %}: {% get_datetime_now %}</p>
    </div>
</div>
<div class='vypisy-content'>
    <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"
             aria-valuenow="0"
             aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div id="error_div" class="record d-none">
    <div class="main-header">
    </div>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript">
    const updateProgressBar = (progressPercentage = 0) => {
        const progressBar = document.querySelector('.progress-bar');
        if (progressBar) {
            progressBar.style.width = progressPercentage + '%';
            progressBar.setAttribute('aria-valuenow', progressPercentage);
        }
        if (progressPercentage == 100) {
            $('.vypisy-content .progress').css("display", "none");
        }
    };

    $(document).ready(function() {
        currentUrl = window.location.href;
        typ_vazby = currentUrl.split("/").slice(-3)[0];
        identy = currentUrl.split("/").slice(-2)[0];
        identy_list = identy.split(",");
        identy_num = identy_list.length;
        current_done = 0;
        vypis_url = '{% url "vypis:vypis_only" typ_vazby "ident" %}';
        let responses = new Array(identy_list.length);

        for (let i = 0; i < identy_list.length; i++) {
            (function(index) {
                $.ajax({
                    type: "GET",
                    url: vypis_url.replace("ident", identy_list[index]),
                    data: {},
                    success: function(data, status, xhr) {
                        var $container = $(data);
                        $container.find('#title_row').remove();
                        responses[index] = $container;
                        current_done += 1;
                        updateProgressBar(current_done / identy_num * 100);

                        if (current_done === identy_list.length) {
                            for (let j = 0; j < responses.length; j++) {
                                $('.vypisy-content').append(responses[j]);
                                $('.vypisy-content').append("<div class='new-record'></div>");
                            }
                        }
                    },
                    error: function(xhr, status, error) {
                        current_done += 1;
                        updateProgressBar(current_done / identy_num * 100);
                        var $container = $('#error_div').clone();
                        if (xhr.status === 404) {
                            var status_text = '{% trans "vypis.templates.vypis_list.error.404" %}'
                        } 
                        else if (xhr.status === 403) {
                            var status_text = '{% trans "vypis.templates.vypis_list.error.403" %}'
                        }
                        else {
                            var status_text = '{% trans "vypis.templates.vypis_list.error.500" %}'
                        };
                        $container.find('.main-header').text(identy_list[index] + " - " + status_text);
                        $container.removeClass('d-none');
                        responses[index] = $container;
                        if (current_done === identy_list.length) {
                            for (let j = 0; j < responses.length; j++) {
                                $('.vypisy-content').append(responses[j]);
                            }
                        }
                    }
                });
            })(i);
        }
    }
    );

</script>
<script>
    function createRtf() {    
        const htmlContent = document.getElementById('app-wrapper').innerHTML;
        const vypisPrefix = 'AMCR_vypis';
        const currentDateTime = new Date();
        const year = currentDateTime.getFullYear();
        const month = String(currentDateTime.getMonth() + 1).padStart(2, '0'); // Months are 0-based
        const day = String(currentDateTime.getDate()).padStart(2, '0');
        const hours = String(currentDateTime.getHours()).padStart(2, '0');
        const minutes = String(currentDateTime.getMinutes()).padStart(2, '0');
        const seconds = String(currentDateTime.getSeconds()).padStart(2, '0');
        const formattedDate = `${year}${month}${day}_${hours}${minutes}${seconds}`;
        var htmlToRtfLocal = new window.htmlToRtf();
        var rtfContent = htmlToRtfLocal.convertHtmlToRtf(htmlContent);
        var rtfContent = rtfContent.replace(/ \\\'20/g, "\\\'20");
        // console.log(rtfContent); only for debug
        const blob = new Blob([rtfContent], { type: 'application/rtf' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${vypisPrefix}_${formattedDate}.rtf`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        // Use the htmlToRtf function to convert HTML to RTF
        // and create a Blob URL for the RTF file
    }  
</script>
{% endblock %}