{% extends "base.html" %}
{% load bootstrap4 %}
{% load widget_tweaks %}

{% block title %}Client - Questionnaire{% endblock title %}

{% block content %}
<br><br>
<section class="page-section" id="services">
    <div class="container">
        {% include "client_navbar.html" %}
        <div class="row">
            <div class="col-md-12">
            <h3>Questionnaire{%if all_sections_accepted%} &#x2713;{%endif%} - {{active_company.company_name}}</h3>
                {%if not all_sections_accepted%}
                <br>
                <small>Complete/Accept following forms.</small>
                {%endif%}
            </div>
        </div>

        {%if tab_list %}
        <br>
        <ul class="nav nav-tabs" id="clientTab" role="tablist">
            {% for title, tab_state, tab_form, tab_forms_names in tab_list %}
            <li class="nav-item" role="presentation">
                {% if tab_state.value == 2 %} <!-- 1 is accpted, 2 is active, 3 is disabled  -->
                <button class="nav-link active" id="{{title|cut:' '}}-tab" data-bs-toggle="tab" data-bs-target="#{{title|cut:' '}}" 
                type="button" role="tab" aria-controls="{{title|cut:' '}}" aria-selected="true">{{title}}</button>
                {%else%}
                <button class="nav-link {% if tab_state.value == 3 %}disabled{%endif%}" id="{{title|cut:' '}}-tab" data-bs-toggle="tab" data-bs-target="#{{title|cut:' '}}" type="button" 
                role="tab" aria-controls="{{title|cut:' '}}" aria-selected="false">{{title}}{%if  tab_state.value == 1%} &#x2713;{%endif%}</button>
                {%endif%}
            </li>
            {%endfor%}
        </ul>
        <div class="tab-content" id="clientTabContent">
            {% for title, tab_state, tab_form, tab_forms_names in tab_list %}
                {% if tab_state.value == 2 %} <!-- 1 is accpted, 2 is active, 3 is disabled  -->
                <div class="tab-pane fade show active" id="{{title|cut:' '}}" role="tabpanel" aria-labelledby="{{title|cut:' '}}-tab">
                {%else%}
                <div class="tab-pane fade" id="{{title|cut:' '}}" role="tabpanel" aria-labelledby="{{title|cut:' '}}-tab">
                {%endif%}
                    <form method="post" action="{% url 'web:client_save_tags' %}{{ cid }}/" id="{{title|cut:' '}}-form" class="form" enctype="multipart/form-data">
                        {% csrf_token %}
                        {{ tab_form.management_form }}
                        {% for tag_details, tag_form in tab_forms_names %}
                        <div class="row p-2 border bg-light">
                            {% if not user.view_as_user %}
                            <div class="col-md-4 align-middle">
                                {{tag_details.name}}
                                {% render_field tag_form.company  hidden=True %}
                                {% if tag_form.company.errors %}
                                    {% for error in tag_form.company.errors %}
                                        {{ error|escape }}
                                    {% endfor %}
                                {% endif %}
                                {% render_field tag_form.tag  hidden=True %}
                                {% if tag_form.tag.errors %}
                                    {% for error in tag_form.tag.errors %}
                                        {{ error|escape }}
                                    {% endfor %}
                                {% endif %}
                                {% render_field tag_form.default_value hidden=True %}
                                {% if tag_form.default_value.errors %}
                                    {% for error in tag_form.default_value.errors %}
                                        {{ error|escape }}
                                    {% endfor %}
                                {% endif %}
                            </div>
                            <div class="col-md-8 align-middle">
                                {{tag_details.instruction}}
                                <br>
                                {% render_field tag_form.value  class="form-control"  %}
                                {% if tag_form.value.errors %}
                                    {% for error in tag_form.value.errors %}
                                        {{ error|escape }}
                                    {% endfor %}
                                {% endif %}
                            </div>
                            {%else%}
                            <div class="col-md-12 align-middle">
                                {% render_field tag_form.company  hidden=True %}
                                {% if tag_form.company.errors %}
                                    {% for error in tag_form.company.errors %}
                                        {{ error|escape }}
                                    {% endfor %}
                                {% endif %}
                                {% render_field tag_form.tag  hidden=True %}
                                {% if tag_form.tag.errors %}
                                    {% for error in tag_form.tag.errors %}
                                        {{ error|escape }}
                                    {% endfor %}
                                {% endif %}
                                {% render_field tag_form.default_value hidden=True %}
                                {% if tag_form.default_value.errors %}
                                    {% for error in tag_form.default_value.errors %}
                                        {{ error|escape }}
                                    {% endfor %}
                                {% endif %}
                                {{tag_details.instruction}}
                                <br>
                                {% render_field tag_form.value  class="form-control"  %}
                                {% if tag_form.value.errors %}
                                    {% for error in tag_form.value.errors %}
                                        {{ error|escape }}
                                    {% endfor %}
                                {% endif %}
                            </div>
                            {%endif%}
                        </div>
                        {% endfor %}
                        <br>
                        {% if 'Roles' in title or 'General' in title%}
                        <input type="checkbox" id="documents_verified_{{title}}" onclick="documents_are_verified()"> I have verified and confirm the entered data.
                        {%endif%}
                        {% buttons %}
                        <button type="submit" id="create_{{title}}" class="btn btn-primary{% if 'Roles' in title or 'General' in title%} disabled{%endif%}">Save{%if not all_sections_accepted%} & Next{%endif%}</button>
                        {% endbuttons %}
                    </form>            
                </div>
            {%endfor%}
        </div>
        {% endif %}
        
        {%if all_sections_accepted%}
        <br><br>
        <h3>Verifying Files</h3>
        <br>
            {% for title, docs in documents_per_section %}
            {%if docs %}
            <div class="row p-2 border">
                <h4>{{title}}</h4>
                {% for doc_id, doc_pos, doc_url, doc_name, updated_at, conv_doc_pk, converted_path_date, converting, missing in docs %}
                <div class="row p-2">
                    <div class="col-md-1">
                        {{forloop.counter}}
                    </div>
                    <div class="col-md-7">
                        {{doc_name}}
                    </div>
                    {% if user.is_superuser and not user.view_as_user %}
                    <div class="col-md-1">
                        <a class="btn btn-sm btn-outline-success" href="{% url 'web:client_convert_document' %}{{ cid }}/{{doc_id}}/">Convert</a>
                    </div>
                    <div class="col-md-1" id="converting-{{cid}}-{{doc_id}}">
                        {%if converting %}
                        {{converting}}&percnt;
                        {%endif%}
                    </div>
                    <div class="col-md-2">
                        {%if conv_doc_pk %}
                        <a href="{% url 'web:client_download_converted_document' %}{{ cid }}/{{conv_doc_pk}}/">
                            <button type="button" class="btn btn-sm btn-outline-success" data-toggle="tooltip" data-placement="top" title="missing tags: [{{missing}}]">Download</button>
                        </a><br>
                        <small>{{converted_path_date}}</small>
                        {%endif%}
                    </div>
                    {%else%}
                    <div class="col-md-4"></div>
                    {%endif%}
                </div>
                {%endfor%}
            </div>
            <br>
            {%endif%}
            {%endfor%}
        {%endif%}
    </div>
    <a style="visibility: hidden;" id="progress_link" href="{% url 'web:client_convert_document_progress' %}"></a>
</section>

<script>
function documents_are_verified() {
    var checkBoxR = document.getElementById("documents_verified_Roles");
    var checkBoxG = document.getElementById("documents_verified_General");
    var buttonRoles = document.getElementById("create_Roles");
    var buttonGeneral = document.getElementById("create_General");
    if(checkBoxR.checked == true) {
        buttonRoles.classList.remove('disabled');
    } else {
        buttonRoles.classList.add('disabled');
    }
    if(checkBoxG.checked == true) {
        buttonGeneral.classList.remove('disabled');
    } else {
        buttonGeneral.classList.add('disabled');
    }
}

document.addEventListener("DOMContentLoaded", function (event) {
    var scrollpos_tags = sessionStorage.getItem('scrollpos_tags');
    if (scrollpos_tags) {
        window.scrollTo(0, scrollpos_tags);
        sessionStorage.removeItem('scrollpos_tags');
    }
});

window.addEventListener("beforeunload", function (e) {
    sessionStorage.setItem('scrollpos_tags', window.scrollY);
});

var timer;
// var csrf_token = document.getElementById('csrf_token'); 
const progressUrl = document.getElementById('progress_link').href
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
var conversionDocuments = document.querySelectorAll('[id^="converting-"]');
var retryCounter = 3;
startProgressUpdateTimer();

function startProgressUpdateTimer() {
    timer = setInterval(function() {
        if(conversionDocuments.length>0) {
            var cid = conversionDocuments[0].id.split("-")[1];
            console.log(cid);
            updateConversionProgress(progressUrl, cid); 
        }
        if(Array.from(conversionDocuments).every(d => d.firstChild.nodeValue == '' || d.firstChild.nodeValue == undefined || d.firstChild.nodeValue.search('100'))) {
            if (retryCounter-- == 0) {
                // stopProgressUpdateTimer();
            }            
        } else {
            retryCounter = 3;
        }
    }, 5000);
}
    
function stopProgressUpdateTimer() {
    clearInterval(timer);
}

function assignReceivedProgressValues(json_dict) {
    conversionDocuments.forEach(d=>{
        var dSplit = d.id.split("-");
        var cid = dSplit[1];
        var doc_id = dSplit[2];
        if(json_dict.doc_id) {
            d.firstChild.nodeValue = json_dict.doc_id.value;
        }
    });
}

function updateConversionProgress(url, cid) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url + cid + "/", true);
    xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
    xhr.setRequestHeader("Content-Type", "json");   
    xhr.send();
      
    xhr.onreadystatechange = function() {
        console.log(this.responseText);
        if(this.responseText.length > 0) {
            console.log(this.responseText)
            assignReceivedProgressValues(JSON.parse(this.responseText));
            // obj.firstChild.nodeValue = JSON.parse(this.responseText).progress;
        }
    }
}
</script>
{% endblock content %}