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

{% block title %}Client - QMD Documentation{% 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-10">
                <h2>Client - Documentation - {{active_company.company_name}}</h2>
            </div>
            <div class="col-md-2 align-items-end">
            </div>
        </div>
        
        {% 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}}{%if conv_doc_pk %} - <small>{{converted_path_date}}</small>{%endif%}
                </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>
                {%else%}
                <div class="col-md-2"></div>
                {%endif%}
                <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>
                    {%endif%}
                </div>
            </div>
            {%endfor%}
        </div>
        <br>
        {%endif%}
        {%endfor%}        

        {%if all_sections_accepted %}
        <div class="row p-2">
            <div class="col-md-7 text-middle">
                <input type="checkbox" id="documents_verified" onclick="documents_verified()">
                I verified all section related information and want to start the document creation process.
            </div>
            <div class="col-md-2">
                <a class="btn btn-success disabled" href="{% url 'web:client_convert_document' %}{{ cid }}/" id="convert_all_button">Convert All</a>
            </div>
            <div class="col-md-1">
                {% if user.is_superuser %}
                <a class="btn btn-success disabled" href="{% url 'web:client_convert_document' %}{{ cid }}/missing/" id="convert_missing_button">Missing</a>
                {%endif%}
            </div>
            <div class="col-md-2">
                <a class="btn btn-success disabled" href="{% url 'web:download_company_zip_all' %}{{ cid }}/" id="download_all_button">Download All</a>
            </div>
        </div>
        {%endif%}
    </div>
</section>
<script>
function documents_verified() {
    var checkBox = document.getElementById("documents_verified");
    var button = document.getElementById("convert_all_button");
    var button2 = document.getElementById("download_all_button");
    var button3 = document.getElementById("convert_missing_button");
    if(checkBox.checked == true) {
        button.classList.remove('disabled');
        button2.classList.remove('disabled');
        button3.classList.remove('disabled');
    } else {
        button.classList.add('disabled');
        button2.classList.add('disabled');
        button3.classList.add('disabled');
    }
}
</script>
{% endblock content %}