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

{% block title %}Qmds{% endblock title %}

{% block content %}
<br><br>
<section class="page-section" id="services">
    <div class="container">
        <h2>Current Account Data</h2>

        Companies: <a href="{% url 'qmds:qmds' %}{{ cid_prev }}">&lt;</a> {{ cid }} <a href="{% url 'qmds:qmds' %}{{ cid_next }}">&gt;</a><br>
        
        <div class="container">
            <div class="row justify-content-md-left">
                <div class="col col-md-2">
                    <p class="text-right">
                        user:
                        {% if company.company_name %}
                        <br />
                        company_name:<br />
                        address: <br />
                        city:<br />
                        post code:<br />
                        country: <br />
                        company type: 
                        {% endif %}
                    </p>
                </div>
                <div class="col col-md-6">
                    <p class="text-left">
                        {{user.email}}
                        {% if company.company_name %}
                        <br />
                        {{company.company_name}}<br />
                        {{company.address}}<br />
                        {{company.city}}<br />
                        {{company.plz}}<br />
                        {{company.get_country_display}}<br />
                        {{company.get_company_type_display}}
                        {% endif %}
                    </p>
                </div>
                <div class="col col-md-4">
                    {% if request.user.is_superuser %}

                    <form action="{% url 'qmds:document_upload' %}{{ cid }}/" method="post" class="form" enctype="multipart/form-data">
                        {% csrf_token %}
                        {% bootstrap_form document_upload_form %}
                        {% buttons %}
                        <button type="submit" class="btn  btn-sm  btn-primary">Upload</button>
                        {% endbuttons %}
                    </form>
                    <br>
                    <a class="btn btn-sm btn-warning" href="{% url 'qmds:test_convert' %}{{ cid }}/">Convert All</a><br><br>
                    {% endif %}
                    {% if company.logo %}
                    <img src="/media/{{company.logo}}" alt="{{company.company_name}} logo" class="img-thumbnail float-right" />
                    {% endif %}
                </div>
            </div>
        </div>
        
        <table class="table">
            <tbody>
                {% for employee in employees %}
                <tr>
                    <td>{{ employee.first_name }}</td><td>{{ employee.last_name }}</td><td>{{ employee.get_department_display }}</td><td>{{ employee.get_position_display }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        {% for document_list in documents %}
        <br>
        <h4>Documents</h4>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Document</th>
                    <th scope="col">Original</th>
                    <th scope="col">Change</th>
                    <th scope="col">Update</th>
                    <th scope="col">Convert</th>
                    <th scope="col">Remove</th>
                    <th scope="col">Done</th>
                </tr>
            </thead>
            <tbody>
            {% for pk, file_name, updated, file_link, converted_doc_link, updated_conv, is_fixed in document_list %}
            <tr>
                <th scope="row">{{ forloop.counter }}</th>
                <td>
                    {{ file_name }}<br><div style="font-size:9px;">{{updated}}</div>
                </td> 
                <td>
                    <a class="btn btn-sm btn-info" href="{{ file_link }}">Original</a>
                </td> 
                <td>
                    <a class="btn btn-sm btn-success" href="{% url 'qmds:document_change' %}{{ cid }}/{{ pk }}/">Change</a>
                </td> 
                <td>
                    <form action="{% url 'qmds:document_upload' %}{{ cid }}/{{ pk }}/" method="post" class="form" enctype="multipart/form-data">
                        {% csrf_token %}
                        <label class="btn btn-sm btn-warning" for="file-{{pk}}">
                            <input id="file-{{pk}}" type="file" name="file" style="display:none" 
                            onchange="form.submit()" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                            Update
                        </label>
                    </form>
                </td> 
                <td>
                    <a class="btn btn-sm btn-primary" href="{% url 'qmds:test_convert' %}{{ cid }}/{{ pk }}/">Convert</a>
                </td> 
                <td>
                    {% if not is_fixed %}
                    <a class="btn btn-sm btn-danger" href="{% url 'qmds:document_delete' %}{{ cid }}/{{ pk }}/">X</a>
                    {% endif %}
                </td> 
                <td>
                    {% if converted_doc_link %}
                    <a class="btn btn-sm btn-warning" href="{{ converted_doc_link }}">[.docx]</a><br><div style="font-size:9px;">{{updated_conv}}</div>
                    {% endif %}
                </td> 
            </tr>
            {% endfor %}
            </tbody>
        </table>
        {% endfor %}
        
        <!-- <a target="_blank" class="btn btn-sm btn-warning" href="{% url 'web:checkout' %}/{{ company.pk }}">€ {{ price }} Buy Now</a> -->
        <!-- <a class="btn btn-sm btn-warning" href="{% url 'qmds:qmds' %}">Update</a> -->

        <br><br>
        <h6>{{ status }}</h6>

    </div>
</section>

<!-- <script>
    $(document).on('change', ':file', function() {
  var input = $(this);
  var numFiles = input.get(0).files ? input.get(0).files.length : 1;
  var label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
  input.trigger('fileselect', [numFiles, label]);
});

$(document).ready(function() {
  $(':file').on('fileselect', function(event, numFiles, label) {
    console.log(numFiles);
    console.log(label);
  });
});
</script> -->
{% endblock content %}