{% extends "core/base/base.html" %}
{% comment %}
SPDX-FileCopyrightText: 2022 Helmholtz-Zentrum Dresden-Rossendorf (HZDR)

SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load static %}
{% block content %}
  <style>
    .tag-container-edit{
      left: 0;
    }

    .tags-div{
      display: grid;
      grid-template-columns: repeat(6, 1fr);
    }
  </style>
  <div class="row">
    <div class="col">
      <h3>Project Properties</h3>
      {% if new %}
        <p>Successfully created a project with the following identifier: {{ project.preferred_identifier }}</p>
      {% endif %}
      <form method="post">
        {% csrf_token %}
        <table class="table">
          {% if project.persistent_id %}
            <tr>
              <th>{{ project.identifier_label }}</th>
              <td>
                <a href="{{ project.identifier_link }}">{{ project.identifier_display }}</a>
              </td>
            </tr>
          {% endif %}
          <tr>
            <th>Digital Object ID</th>
            <td>{{ project.digital_object_id }}</td>
          </tr>
          {% if project.gate_project %}
            <tr>
              <th>GATE-ID</th>
              <td>{{ project.gate_project.gate_id }}</td>
            </tr>
            <tr>
              <th class="align-middle">Proposal Number</th>
              <td>{{ project.gate_project.proposal }}</td>
            </tr>
          {% endif %}
          <tr>
            <th>Landing Page</th>
            <td>
              <a href="{{ request.scheme }}://{{ request.get_host }}{% url 'core:landing_page' project.digital_object_id %}?format=landing_page">
              {{ request.scheme }}://{{ request.get_host }}{% url "core:landing_page" project.digital_object_id %}?format=landing_page</a>
            </td>
          </tr>
          <tr>
            <th class="align-middle">Created</th>
            <td>{{ project.created }}</td>
          </tr>
          <tr>
            <th class="align-middle">Group</th>
            <td>
              <select name="group"
                      class="form-select w-50"
                      {% if update == False %}disabled{% endif %}>
                {% for group in groups %}
                  <option value="{{ group.pk }}"
                          {% if group == project.group %}selected{% endif %}>{{ group }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <th class="align-middle">Title</th>
            <td>
              <input name="label"
                     value="{% if project.label %}{{ project.label }}{% else %}New Project{% endif %}"
                     required="required"
                     class="form-control w-50"
                     {% if update == False %}disabled{% endif %} />
            </td>
          </tr>
          <tr>
            <th class="align-middle">Description</th>
            <td>
              <textarea name="description"
                        class="form-control w-50"
                        rows="5"
                        {% if update == False %}disabled{% endif %}>{{ project.description }}</textarea>
            </td>
          </tr>
          <tr>
            <th class="align-middle">Identifiers</th>
            <td>
              {% for identifier in identifiers %}
                <a href="{{ identifier.url|default:"#" }}">
                  <code>{{ identifier.scheme }}:{{ identifier }}</code>
                </a>
                {% if not forloop.last %}<br>{% endif %}
              {% endfor %}
            </td>
          </tr>
        </table>
        <table>
          <tr>
            {% if update == True %}
              <td class="text-start" style="padding-left: 0.75rem;">
                <input class="btn btn-primary" type="submit" value="Save" />
              </td>
              <td class="text-start w-100" style="padding-left: 0.75rem">
                <a class="btn btn-secondary" href="{% url 'core:project' project.pk %}">Cancel</a>
              </td>
              {% if isOwner %}
                <td style="padding-right: 0.75rem;">
                  <button class="btn btn-danger text-nowrap" disabled>Delete Project</button>
                </td>
              {% endif %}
            {% else %}
              <td class="w-100" style="padding-left: 0.75rem">
                <a class="btn btn-primary"
                   href="{% url 'core:project_update' project.pk %}">Edit</a>
              </td>
              {% if isOwner %}
                <td style="padding-right: 0.75rem;">
                  <button class="btn btn-danger text-nowrap"
                          id="project-delete-button"
                          name="remove"
                          type="button"
                          value="{{ project.pk }}"
                          data-bs-toggle="modal"
                          data-bs-target="#deleteDialogue"
                          data-project-number="{{ project.preferred_identifier }}">Delete Project</button>
                </td>
              {% endif %}
            {% endif %}
          </tr>
        </table>
      </form>
      <br />
      <h4 id="tag-section">Tags</h4>
      <div data-tag-container="{{ project.digital_object_id }}"
           data-project-independent="True"></div>
      <br />
      <h4>Members and Contributors</h4>
      <p>This is a list of the project owner and members, as well as external contributors without a HELIPORT login.</p>
      <table class="table">
        <tr>
          <th style="width: 27%">Name</th>
          <th style="width: 27%">Affiliation</th>
          <th style="width: 27%">Contribution</th>
          <th></th>
        </tr>
        <tr>
          <td class="align-middle">
            {{ project.owner }}
            {% if project.owner.orcid %}
              <a href="{{ project.owner.orcid }}"
                 title="ORCID"
                 target="_blank"
                 class="text-decoration-none">
                <i class="fa-brands fa-orcid"></i>
              </a>
            {% endif %}
            {% if project.owner.email %}
              <a href="mailto:{{ project.owner.email }}"
                 title="Email"
                 class="text-decoration-none">
                <i class="fa-solid fa-envelope"></i>
              </a>
            {% endif %}
          </td>
          <td class="align-middle">{{ project.owner.affiliation }}</td>
          <td class="align-middle"></td>
          <td class="text-end">
            <button class="btn btn-info w-100" disabled>Owner</button>
          </td>
        </tr>
        {% if co_owners %}
          {% for user in co_owners %}
            <tr>
              <td class="align-middle">
                {{ user }}
                {% if user.orcid %}
                  <a href="{{ user.orcid }}" target="_blank" class="text-decoration-none">
                    <i class="fa-brands fa-orcid"></i>
                  </a>
                {% endif %}
                {% if user.email %}
                  <a href="mailto:{{ user.email }}">
                    <i class="fa-solid fa-envelope"></i>
                  </a>
                {% endif %}
              </td>
              <td class="align-middle">{{ user.affiliation }}</td>
              <td class="align-middle"></td>
              <td class="text-end">
                <form action="" method="post">
                  {% csrf_token %}
                  {% if isOwner %}
                    {% if update == True %}
                      <button class="btn btn-danger w-100" disabled>Remove Member</button>
                    {% else %}
                      <button class="btn btn-danger w-100"
                              type="submit"
                              id="{{ user.pk }}"
                              name="user"
                              value="{{ user.pk }}">Remove Member</button>
                    {% endif %}
                  {% else %}
                    <button class="btn btn-info w-100" disabled>Member</button>
                  {% endif %}
                </form>
              </td>
            </tr>
          {% endfor %}
        {% endif %}
        {% if contributions %}
          {% for contribution in contributions %}
            <tr>
              <td class="align-middle">
                {{ contribution.contributor.display_name }}
                {% if contribution.contributor.orcid %}
                  <a href="{{ contribution.contributor.orcid }}"
                     target="_blank"
                     class="text-decoration-none">
                    <i class="fa-brands fa-orcid"></i>
                  </a>
                {% endif %}
                {% if contribution.contributor.email %}
                  <a href="mailto:{{ contribution.contributor.email }}">
                    <i class="fa-solid fa-envelope"></i>
                  </a>
                {% endif %}
              </td>
              <td class="align-middle">{{ contribution.contributor.affiliation }}</td>
              <td class="align-middle">
                {% if update == True and isOwner %}
                  <form action="{% url 'core:project' project.pk %}" method="post">
                    {% csrf_token %}
                    <input type="hidden"
                           id="contribution_modify"
                           name="contribution_modify"
                           value="{{ contribution.pk }}" />
                    <select class="form-select"
                            name="contribution_type_update"
                            id="contribution_type_update"
                            onchange="this.form.submit()">
                      {% for key, value in contribution_types %}
                        <option value="{{ key }}"
                                {% if key == contribution.type %}selected{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                  </form>
                {% else %}
                  {{ contribution.get_type_display }}
                {% endif %}
              </td>
              <td class="text-end">
                <form method="post">
                  {% csrf_token %}
                  {% if isOwner %}
                    {% if update == True %}
                      <button class="btn btn-danger w-100" disabled>Remove Contributor</button>
                    {% else %}
                      <button class="btn btn-danger w-100"
                              type="submit"
                              name="contribution_delete"
                              value="{{ contribution.pk }}">Remove Contributor</button>
                    {% endif %}
                  {% else %}
                    <button class="btn btn-info w-100" disabled>Contributor</button>
                  {% endif %}
                </form>
              </td>
            </tr>
          {% endfor %}
        {% endif %}
      </table>
      {% if isOwner %}
        <h5>Add project members or contributors</h5>
        <p>
          You can add single users with a HELIPORT login as project members or add all
          users of a specific group to the project. It is also possible to record
          contributions from external contributors by providing a name and a
          contribution type according to DataCite as well as optionally an ORCID and
          an affiliation.
        </p>
        <form method="post">
          {% csrf_token %}
          <div class="ui-widget">
            <table class="table">
              <tr>
                <td class="w-50">
                  <label class="form-label" for="tags">Name</label>
                  {% if update == True %}
                    <input class="form-control" disabled />
                  {% else %}
                    <input class="form-control" id="tags" />
                  {% endif %}
                </td>
                <td class="align-bottom">
                  {% if update == True %}
                    <button class="btn btn-primary text-nowrap w-100" disabled>Add Member</button>
                  {% else %}
                    <button class="btn btn-primary text-nowrap w-100"
                            type="submit"
                            id="addition"
                            disabled="disabled"
                            name="add">Add Member</button>
                  {% endif %}
                </td>
                <td class="align-bottom fs-4">or</td>
                <td class="w-50">
                  <label class="form-label" for="group_to_import">Group</label>
                  <select name="group_to_import"
                          class="form-select w-100"
                          id="group_to_import"
                          {% if update %}disabled{% endif %}>
                    {% for group in groups %}
                      <option value="{{ group.pk }}"
                              {% if group == project.group %}selected{% endif %}>{{ group }}</option>
                    {% endfor %}
                  </select>
                </td>
                <td class="align-bottom">
                  <button class="btn btn-primary text-nowrap w-100"
                          type="submit"
                          {% if update %}disabled="disabled"{% endif %}>Add all Members from Group</button>
                </td>
              </tr>
            </table>
          </div>
        </form>
      {% endif %}
      {% if isOwner %}
        <form method="post">
          {% csrf_token %}
          <div class="ui-widget">
            <table class="table">
              <tr>
                <td class="w-25">
                  <label class="form-label" for="contributor_name">Name</label>
                  {% if update == True %}
                    <input class="form-control" disabled />
                  {% else %}
                    <input class="form-control"
                           name="contributor_name"
                           id="contributor_name"
                           required />
                  {% endif %}
                </td>
                <td style="width: 20%">
                  <label class="form-label" for="contributor_orcid">ORCID</label>
                  {% if update == True %}
                    <input class="form-control" disabled />
                  {% else %}
                    <input class="form-control" name="contributor_orcid" id="contributor_orcid" />
                  {% endif %}
                </td>
                <td style="width: 20%">
                  <label class="form-label" for="contributor_affiliation">Affiliation</label>
                  {% if update == True %}
                    <input class="form-control" disabled />
                  {% else %}
                    <input class="form-control"
                           name="contributor_affiliation"
                           id="contributor_affiliation" />
                  {% endif %}
                </td>
                <td style="width: 20%">
                  <label class="form-label" for="contribution_type">Contribution</label>
                  {% if update == True %}
                    <select class="form-select" disabled></select>
                  {% else %}
                    <select class="form-select" name="contribution_type" id="contribution_type">
                      {% for key, value in contribution_types %}
                        <option value="{{ key }}"
                                {% if key == contribution_type_default %}selected{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                  {% endif %}
                </td>
                <td style="width: 10%">
                  <label class="form-label" for="contributor_email">E-Mail</label>
                  {% if update == True %}
                    <input class="form-control" disabled />
                  {% else %}
                    <input class="form-control" name="contributor_email" id="contributor_email" />
                  {% endif %}
                </td>
                <td class="align-bottom" style="width: 15%">
                  {% if update == True %}
                    <button class="btn btn-primary text-nowrap w-100" disabled>Add Contributor</button>
                  {% else %}
                    <button class="btn btn-primary text-nowrap w-100"
                            type="submit"
                            id="add_contributor"
                            disabled>Add Contributor</button>
                  {% endif %}
                </td>
              </tr>
            </table>
          </div>
        </form>
      {% endif %}
    </div>
  </div>
  <div class="modal fade"
       id="deleteDialogue"
       data-bs-backdrop="static"
       data-bs-keyboard="false"
       tabindex="-1"
       aria-labelledby="delete-project-modal"
       aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="delete-project-modal">Deleting project {{ project.preferred_identifier }}</h5>
          <button type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="hidden"
                 aria-hidden="true"
                 id="confirm-check-phrase"
                 value="{{ project.preferred_identifier }}">
          <p>You are about to delete the project "{{ project.label }}". This action can not be undone.</p>
          <div>
            <label class="form-label" for="remove-id">
              To delete the project, enter <code>{{ project.preferred_identifier }}</code> here:
            </label>
            <input id="remove-id"
                   placeholder="Project identifier"
                   class="form-control"
                   aria-describedby="invalid-check-project"
                   required />
            <div id="invalid-check-project" class="invalid-feedback">The identifier was not entered correctly.</div>
          </div>
          <div id="errorMessage" class="alert alert-danger mt-3 d-none">
            <strong>An error occured!</strong>
            <span class="error"></span>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button id="confirm-remove-button" type="button" class="btn btn-danger">Delete</button>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}
{% block script %}
  {% include "core/base/tag_manager.html" %}
  <script>
    $('#confirm-remove-button').click((evt) => {
        if ($('#remove-id').val() !== $('#confirm-check-phrase').val()) {
          $('#remove-id').addClass('is-invalid');

        }
        else {
          if ($('#remove-id').hasClass('is-invalid')) {
            $('#remove-id').removeClass('is-invalid');
          }

          const csrf_token = document.querySelector('meta[name="csrf-token"]').content;
          const projectId = '{{ project.pk }}';

          const formData = {
            csrfmiddlewaretoken: csrf_token,
            remove: projectId
          };

          $.ajax({
            type: "POST",
            url: "",
            data: formData,
            dataType: "json",
            encode: true,
            success: (data, textStatus, request) => {
              if (textStatus === 'success' && data.Location !== undefined) {
                window.location.href = data.Location;
              }
              else if (textStatus !== 'success') {
                $('#errorMessage').removeClass('d-none');
                $('#errorMessage > .error').text('Response state was: ' + textStatus);
              }
              else {
                $('#errorMessage').removeClass('d-none');
                $('#errorMessage > .error').text('The response contents no redirect location, but your project was successfully removed.');
              }
            },
            error: (request, status, error) => {
              $('#errorMessage').removeClass('d-none');
              $('#errorMessage > .error').text('The following error state was responded: ' + status);
            }
          });
        }
    });

    $(function() {
      $( "#tags" ).autocomplete({
          source: function(request, response){
              $.get( "autocomplete-user", {q: request.term}, function( data ) {
                  if(data.length === 1){
                      $("#addition").prop("value", data[0].pk).prop("disabled", false);
                  }
                  else{
                      $("#addition").prop("disabled", true);
                  }
                  let names = [];
                  data.forEach(element => names.push(element.name));
                  response(names);
              });
          },

          close: function(){
              $.get( "autocomplete-user", {q: $("#tags").val() }, function( data ) {
                  if(data.length === 1)
                      $("#addition").prop("value", data[0].pk).prop("disabled", false);
                  else
                      $("#addition").prop("disabled", true);
              });
          },

          autoFocus: true
      })

      .on("keyup", function(){
          if($(this).val() === '') $("#addition").prop("disabled", true);
      });

      $("#contributor_name,#contributor_orcid,#contributor_email,#contributor_affiliation").on("keyup", function() {
          $("#add_contributor").prop("disabled", false);
          $("#contributor_name").each(function() {
              if ($(this).val() === '') {
                  $("#add_contributor").prop("disabled", true);
              }
          });
      });
  });
  </script>
{% endblock script %}