{% extends admin|yesno:"hrapps/admin/base.html,hrapps/main/base.html" %}

{% load evelinks %}
{% load hrtags %}

{% block hrapps_content %}
    <div class="row">
        <h3>View Application</h3>
    </div>
    <div class="row mb-3">
        <div class="col-md-3">
            <div class="card card-primary mb-3">
                <div class="card-header">
                    <div class="card-title">
                        Application Details
                        <div class="float-end">
                            <span class="badge bg-{{ application.status_color_class }}">{{ application.status_label }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <img
                            src="{{ application.user.profile.main_character.character_id|character_portrait_url:128 }}"
                            style="border-radius: 0.375rem"
                        >
                        <br>
                        {{ application.user.profile.main_character.character_name }}
                    </div>
                    <hr>
                    <dl>
                        <dt>Corporation</dt>
                        <dd>{{ application.form.corporation.corporation_name }}</dd>
                        <dt>Application Date</dt>
                        <dd>{{ application.created }}</dd>
                        <dt>Recruiter</dt>
                        <dd>
                            {% if application.recruiter %}
                                {{ application.recruiter.profile.main_character.character_name }}
                            {% else %}
                                Unclaimed
                            {% endif %}
                            {% if admin and perms.hrapps.claim_recruiter %}
                                <a href="{% if application.status == "withdrawn" %}{% else %}{% url "hradmin:claim_recruiter" application.id %}{% endif %}" class="btn btn-xs btn-warning float-end {% if application.status == "withdrawn" %}disabled{% endif %}">Claim</a>
                            {% endif %}
                        </dd>
                        <dt>Reviewer</dt>
                        <dd>
                            {% if application.reviewer %}
                                {{ application.reviewer.profile.main_character.character_name }}
                            {% else %}
                                Unclaimed
                            {% endif %}
                            {% if admin and perms.hrapps.claim_reviewer %}
                                <a href="{% if application.status == "withdrawn" %}disabled{% else %}{% url "hradmin:claim_reviewer" application.id %}{% endif %}" class="btn btn-xs btn-warning float-end {% if application.status == "withdrawn" %}disabled{% endif %}">Claim</a>
                            {% endif %}
                        </dd>
                    </dl>
                    <hr>
                    <div class="d-flex justify-content-center flex-wrap">
                        {% if request.user == application.user and not admin and not application.status in final_states %}
                            <button class="btn btn-xs btn-danger m-1" data-bs-toggle="modal" data-bs-target="#withdraw-modal">Withdraw Application</button>
                        {% endif %}
                        {% if admin and perms.hrapps.modify_status and not application.status in final_states %}
                            <button class="btn btn-xs btn-warning m-1" data-bs-toggle="modal" data-bs-target="#review-modal" {% if application.status == "withdrawn" %}disabled{% endif %}>Mark Under Review</button>
                            <button class="btn btn-xs btn-success m-1" data-bs-toggle="modal" data-bs-target="#approve-modal" {% if application.status == "withdrawn" %}disabled{% endif %}>Approve</button>
                            <button class="btn btn-xs btn-danger m-1" data-bs-toggle="modal" data-bs-target="#reject-modal" {% if application.status == "withdrawn" %}disabled{% endif %}>Reject</button>
                        {% endif %}
                        {% if admin and perms.hrapps.manage_hrapps %}
                            {# Default state is pending. Manage perms are required to return an in progress application to default state. #}
                            <button class="btn btn-xs btn-primary m-1" data-bs-toggle="modal" data-bs-target="#pend-modal" {% if application.status == "withdrawn" %}disabled{% endif %}>Mark Pending</button>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="card card-primary mb-3">
                <div class="card-header">
                    <div class="card-title">Characters</div>
                </div>
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <th>Character</th>
                            {% if corptools is not None %}
                                <th>CT</th>
                            {% endif %}
                            {% if memberaudit is not None%}
                                <th>MA</th>
                            {% endif %}
                        </thead>
                        <tbody>
                            {% for character in characters %}
                            <tr>
                                <td>
                                    <img
                                        src="{{ character.character_id|character_portrait_url }}"
                                        style="border-radius: 0.375rem"
                                    > {{ character.character_name }}
                                </td>
                                {% if corptools is not None %}
                                    <td>
                                    {% if character.character_name in corptools %}
                                        <a href="{% url "corptools:reactmain" character.character_id %}" type="button" class="btn btn-success"><span class="fa fa-check-circle"></span></a>
                                    {% else %}
                                        <button class="btn btn-danger"><span class="fa fa-times-circle"></span></button>
                                    {% endif %}
                                    </td>
                                {% endif %}
                                {% if memberaudit is not None %}
                                    <td>
                                    {% if character.character_name in memberaudit %}
                                        <a href="{% url "memberaudit:character_viewer" memberaudit|get_item:character.character_name %}" type="button" class="btn btn-success"><span class="fa fa-check-circle"></span></a>
                                    {% else %}
                                        <button class="btn btn-danger"><span class="fa fa-times-circle"></span></button>
                                    {% endif %}
                                    </td>
                                {% endif %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="card card-primary mb-3">
                <div class="card-header">
                    <div class="card-title">Responses</div>
                </div>
                <div class="card-body">
                    {% for response in responses %}
                        <div class="card mb-2 bg-secondary">
                            <div class="card-header">
                                <h5 class="card-title" style="display: inline-block;">{{ response.question }}</h5>
                                {% if response.allowUpdates and request.user == application.user and not admin and not application.is_closed %}
                                    <div class="float-end">
                                    {% if response.allowMultiple and response.attachmentLimit == 0 %}
                                        {% include "hrapps/main/partials/view/upload_button.html" with question_id=forloop.counter multiple=response.allowMultiple attachLimit=response.attachmentLimit %}
                                    {% elif response.allowMultiple and attachments|filter_by_question_id:forloop.counter|length < response.attachmentLimit %}
                                        {% include "hrapps/main/partials/view/upload_button.html" with question_id=forloop.counter multiple=response.allowMultiple attachLimit=response.attachmentLimit %}
                                    {% elif not response.allowMultiple and attachments|filter_by_question_id:forloop.counter|length == 0 %}
                                        {% include "hrapps/main/partials/view/upload_button.html" with question_id=forloop.counter multiple=response.allowMultiple attachLimit=response.attachmentLimit %}
                                    {% endif %}
                                    </div>
                                {% endif %}
                                {% if response.has_attachments and admin and perms.hrapps.modify_status %}
                                    <div class="float-end">
                                        <form method="post" action="{% url "hradmin:view_response" application.id %}">
                                            {% csrf_token %}
                                            <input type="hidden" name="question" value="{{ response.question }}">
                                            {% if response.allowUpdates %}
                                                <button class="btn btn-xs btn-danger" type="submit">Disable Updates</button>
                                            {% else %}
                                                <button class="btn btn-xs btn-success" type="submit">Enable Updates</button>
                                            {% endif %}
                                        </form>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="card-body">
                                {% if response.answer_is_list %}
                                    <ul>
                                    {% for answer in response.answer %}
                                        <li>{{ answer }}</li>
                                    {% endfor %}
                                    </ul>
                                {% elif response.has_attachments %}
                                    <div class="image-preview">
                                    {% for attachment in attachments|filter_by_question_id:forloop.counter %}
                                        <div class="card img-fluid" style="margin-right: 10px;">
                                            <a href="{{ attachment.file.url }}" data-toggle="lightbox">
                                                <img src="{{ attachment.file.url }}" class="card-img-full" style="height: 128px; width: auto;">
                                            </a>
                                        </div>
                                    {% endfor %}
                                    </div>
                                {% else %}
                                    <p class="card-text">{{ response.answer|linebreaksbr|urlize }}</p>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            {% if perms.hrapps.view_comment or perms.hrapps.create_comment %}
            <div class="card card-primary mb-3">
                {% include "hrapps/shared/partials/view/comment_card.html" %}
            </div>
            {% endif %}
        </div>
    </div>

    {% if not admin %}
        {% include "hrapps/main/partials/view/withdraw_confirm_modal.html" %}
        {% include "hrapps/main/partials/view/upload_offcanvas.html" %}
    {% elif admin %}
        {% include "hrapps/admin/partials/view/approve_confirm_modal.html" %}
        {% include "hrapps/admin/partials/view/pend_confirm_modal.html" %}
        {% include "hrapps/admin/partials/view/reject_confirm_modal.html" %}
        {% include "hrapps/admin/partials/view/review_confirm_modal.html" %}
    {% endif %}
{% endblock %}

{% block extra_javascript %}
    {% include "hrapps/bundles/lightbox-js.html" %}
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () => {
           const timeElements = document.querySelectorAll(".local-time");
           timeElements.forEach(el => {
               const date = new Date(el.dataset.utctime)

               el.textContent = new Intl.DateTimeFormat(navigator.language, {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric',
                    hour: 'numeric',
                    minute: '2-digit',
                }).format(date);
           });


           const replyInfoElements = document.querySelectorAll(".item-left");
           const widthMax = Math.max(...Array.from(replyInfoElements, el => Math.ceil(el.getBoundingClientRect().width)));

           replyInfoElements.forEach(el => {
                el.style.width = widthMax+"px";
           });
        });

        {% if not admin %}
            const uploadOffcanvas = document.getElementById('uploadOffcanvasBottom');

            uploadOffcanvas.addEventListener('show.bs.offcanvas', (event) => {
               const buttonData = event.relatedTarget.dataset;

               if (document.getElementById("uploadLimitNote")) {
                   document.getElementById("uploadLimitNote").remove();
               }

               const questionID = buttonData.question;
               const multiple = buttonData.multiple;
               const attachLimit = parseInt(buttonData.limit);

               if (multiple && attachLimit !== 0) {
                   const uploadForm = document.getElementById("uploadForm");
                   const small = document.createElement("small");
                   const em = document.createElement("em");
                   em.textContent = `Limit ${attachLimit} total file${attachLimit > 1 ? "s" : ""}`;
                   small.appendChild(em);
                   uploadForm.before(small);
                   small.classList.add("text-muted");
                   small.classList.add("float-end");
                   small.id = "uploadLimitNote";
               }

               const input = document.getElementById("fileInput");
               input.multiple = multiple;

               const uploadForm = document.getElementById("uploadForm");
               const hiddenInput = document.createElement("input");
               hiddenInput.type = "hidden";
               hiddenInput.name = "question_id";
               hiddenInput.value = questionID;
               uploadForm.appendChild(hiddenInput);
            });

            uploadOffcanvas.addEventListener('hide.bs.offcanvas', (event) => {
                const uploadForm = document.getElementById("uploadForm");
                const fileinput = document.getElementById("fileInput");
                uploadForm.reset();
                fileinput.dispatchEvent(new Event("change"));
            })

            function previewFile(element) {
                console.log("Previewing file...");
                console.log(element);
                const previewContainer = document.getElementById("image_preview");
                previewContainer.innerHTML = "";

                const files = Array.from(element.files);

                files.forEach(file => {
                    const fileUrl = URL.createObjectURL(file);

                    const imgCard = document.createElement("div");
                    imgCard.classList.add("card", "img-fluid");
                    imgCard.style.marginRight = "10px";

                    const img = document.createElement("img");
                    img.classList.add("card-img-full");
                    img.src = fileUrl;
                    img.alt = file.name;
                    img.dataset.toggle = "lightbox";
                    img.dataset.type = "image";
                    img.dataset.src = fileUrl;
                    img.style.height = "128px";
                    img.style.width = "auto";

                    img.addEventListener("click", (e) => {
                        e.preventDefault();
                        const lightbox = new Lightbox(img);
                        lightbox.show();
                    });

                    imgCard.appendChild(img);

                    previewContainer.appendChild(imgCard);
                })
                if (previewContainer.parentElement.querySelector("#preview_note") === null && element.files.length !== 0) {
                    const selectNote = element.multiple ? "a different set of files" : "a different file";
                    const noteElement = document.createElement("p");
                    noteElement.id = "preview_note";
                    noteElement.classList.add("text-muted");
                    const emElement = document.createElement("em");
                    const smallElement = document.createElement("small");
                    smallElement.innerHTML = "Click on an image to view it in full size.\n" +
                        "To change files, click on \"Choose Files\" again and select " + selectNote + ".";
                    noteElement.appendChild(emElement);
                    emElement.appendChild(smallElement);
                    previewContainer.parentElement.appendChild(noteElement);
                }
                else if (element.files.length === 0) {
                    previewContainer.parentElement.querySelector("#preview_note").remove();
                }

            }
        {% endif %}
        {% if admin %}

        {% endif %}
    </script>
{% endblock %}