{% extends 'ddm_core/base.html' %}
{% load static %}

{% block page_title %}Project Overview{% endblock %}

{% block main_heading %}{{ object.name }}: Project Hub{% endblock %}

{% block main_body %}

{# PROJECT DETAILS #}
<div id="project-details" class="ddm-admin-section">
  <div class="ddm-admin-section-header">
    Project Details <span class="inline-edit"><a href="{% url 'ddm_projects:edit' object.url_id %}"><i class="bi bi-pencil-square"></i> Edit</a></span>
  </div>
  <div class="ddm-admin-section-body">
    <table class="table table-borderless table-sm">
      <tr>
        <td>Name:</td>
        <td>{{ object.name }}</td>
      </tr>
      <tr>
        <td>Slug:</td>
        <td>{{ object.slug }}</td>
      </tr>
      <tr>
        <td>Project ID:</td>
        <td>{{ object.url_id }}</td>
      </tr>
      <tr>
        <td>Public Access:</td>
        <td>
          <a href="{% url 'ddm_participation:briefing' object.slug %}" target="_blank">{{ request.scheme }}://{{ request.get_host }}{% url 'ddm_participation:briefing' object.slug %}</a><br>
          <span class="helptext">To test the project yourself from the participants' perspective, open this link in a new private window.</span>
        </td>
      </tr>
      <tr>
        <td>Status:</td>
        <td>{% if object.active %}Project is <b>active</b> and participation is possible{% else %}Project is <b>inactive</b> and participation is not possible{% endif %}</td>
      </tr>
      <tr>
        <td>Project Type:</td>
        <td>{% if object.super_secret %}Super Secret Project{% else %}Regular Project{% endif %}</td>
      </tr>
    </table>
  </div>
</div>


{# PROJECT CONFIGURATION #}
<div id="project-configuration" class="ddm-admin-section">
  <div class="ddm-admin-section-header">Project Configuration</div>
  <div class="ddm-admin-section-body">
    <div class="container">
      <div class="row d-flex align-items-stretch">

        <div class="project-setup-card text-center">
          <a class="card-link" href="{% url 'ddm_projects:briefing_edit' object.url_id %}">
            <div><i class="bi bi-chat-right-text-fill ddm-if-icon"></i></div>
            <div><h5>Briefing</h5></div>
          </a>
          <div><p>Define how you will greet and brief your participants.</p></div>
        </div>

        <div class="project-setup-filler">
          <i class="bi bi-chevron-compact-right fs-2"></i>
        </div>

        <div class="project-setup-card text-center">
          <a class="card-link" href="{% url 'ddm_datadonation:overview' object.url_id %}">
            <div><i class="bi bi-box-fill ddm-if-icon"></i></div>
            <div><h5>Data Donation</h5></div>
          </a>
          <div><p>Configure the data donation and the donation instructions.</p></div>
        </div>

        <div class="project-setup-filler">
          <i class="bi bi-chevron-compact-right fs-2"></i>
        </div>


        <div class="project-setup-card text-center">
          <a  class="card-link" href="{% url 'ddm_questionnaire:overview' object.url_id %}">
            <div><i class="bi bi-pencil-fill ddm-if-icon"></i></div>
            <div><h5>Questionnaire</h5></div>
          </a>
          <div><p>Configure a questionnaire that is displayed after the data donation.</p></div>
        </div>

        <div class="project-setup-filler">
          <i class="bi bi-chevron-compact-right fs-2"></i>
        </div>

        <div class="project-setup-card text-center">
          <a class="card-link" href="{% url 'ddm_projects:debriefing_edit' object.url_id %}">
            <div><i class="bi bi-chat-left-text-fill ddm-if-icon"></i></div>
            <div><h5>Debriefing</h5></div>
          </a>
          <div><p>Define how you will debrief your participants.</p></div>
        </div>

      </div>
    </div>
  </div>
</div>


{# DATA CENTER #}
<div id="data-center" class="ddm-admin-section">
  <div class="ddm-admin-section-header">Data Center</div>
  <div class="ddm-admin-section-body">

    <div id="data-download-section" class="d-flex flex-row align-items-center data-center-row border-bottom">
      <div class="w-15"><h5>Data Download</h5></div>

      <div id="download-participation-overview" class="me-5">
        <p class="mb-0">
          <b>Participation Overview:</b>
          <br>
          <a id="download-data-button"
             class="a-no-link ddm-btn ddm-btn-green"
             data-download-url='{% url 'ddm_apis:download_project_details' object.url_id %}'
             data-filename='ddm_{{ object.url_id }}_participation-overview_{% now "Y-m-d-H-i" %}'
             data-n-started={{ object.get_statistics.n_started }}>
            <i class="bi bi-download pe-1"></i>
            Download CSV
          </a>
        </p>
      </div>

      <div id="download-questionnaire-responses" class="me-5">
        <p class="mb-0">
          <b>Questionnaire Responses:</b>
          <br>
          <a id="download-responses-button"
             class="a-no-link ddm-btn ddm-btn-green"
             data-download-url="{% url 'ddm_apis:responses' object.url_id %}">
            <i class="bi bi-download pe-1"></i> Download CSV
          </a>
        </p>
      </div>

      <div>
        <p class="mb-0"><b>Remote Download:</b><br><a href="{% url 'ddm_auth:project_token' object.url_id %}">Manage Access Token</a></p>
      </div>
    </div>

    {% with stats=object.get_statistics %}
    <div id="project-log-section" class="d-flex flex-row align-items-center data-center-row border-bottom">
      <div class="w-15"><h5>Project Log</h5></div>
      <div><a href="{% url 'ddm_logging:project_logs' object.url_id %}">Show Project Log</a></div>
      <div class="col ps-4">
        <p class="mb-0">(Registered Exceptions: {{ stats.n_errors }})</p>
      </div>
    </div>

    <div id="participation-statistics-section" class="d-flex flex-row align-items-center data-center-row">
      <div class="w-15"><h5>Participation Statistics</h5></div>
      <div class="row col fw-bold text-center project-statistics-container">
          <div class="col">
            <p class="mb-0">Donated Files</p>
            <p class="fs-3 mb-0">{{ stats.n_donations }}</p>
          </div>
          <div class="col">
            <p class="mb-0">Started</p>
            <p class="fs-3 mb-0">{{ stats.n_started }}</p>
          </div>
          <div class="col">
            <p class="mb-0">Completed</p>
            <p class="fs-3 mb-0">{{ stats.n_completed }}</p>
          </div>
          <div class="col">
            <p class="mb-0">Completion Rate</p>
            <p class="fs-3 mb-0">{{ stats.completion_rate|floatformat:2 }}</p>
          </div>
          <div class="col">
            <p class="mb-0">Avrg. to complete</p>
            <p class="fs-3 mb-0">{{ stats.average_time }}<span class="fs-6 mb-0 pb-1">(H:m:s)</span></p>
          </div>
      </div>
    </div>
    {% endwith %}
  </div>
</div>

{# Modal for download error #}
{% include "ddm_core/components/info_modal.html" with modal_id="modal-download-error" body="<p><i class='bi bi-x-octagon-fill text-danger pe-2'></i><b>Download Failed</b></p>The download failed due to the following issue: <span id='download-error-message'></span>" %}

{# DANGER ZONE #}
<div id="danger-zone" class="ddm-admin-section">
  <div class="ddm-admin-section-header">Danger Zone</div>
  <div class="ddm-admin-section-body">
    <div>
      <p>
        <button
            class="ddm-btn ddm-btn-red"
            data-bs-toggle="modal"
            data-bs-target="#delete-data-confirm">
          Reset Project Data
        </button>
      </p>
    </div>
    <div>
      <p><button
          class="ddm-btn ddm-btn-red"
          data-bs-toggle="modal"
          data-bs-target="#delete-participant">
        Delete Participant
      </button>
      </p>
    </div>
    <div>
      <p>
        <a
            class="ddm-btn ddm-btn-red text-center d-inline-block"
            href="{% url 'ddm_projects:delete' object.url_id %}">
          Delete Project
        </a>
      </p>
    </div>
  </div>
</div>

{# Modal for delete confirm #}
<div class="modal" id="delete-data-confirm" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <h4>Careful!</h4>
        <p>You are about to delete all collected data related to your project.</p>
        This includes:
        <ul>
          <li>All data donations</li>
          <li>All questionnaire responses</li>
          <li>All participation statistics</li>
        </ul>
        <p>We strongly recommend downloading and storing a copy of your data before you continue with this procedure.</p>
        <p>Are you sure you want to delete all data related to this project?</p>
      </div>
      <div class="modal-footer">
        <button
            type="button"
            class="ddm-btn"
            data-bs-dismiss="modal">
          Cancel
        </button>
        <button
            id="delete-data-button"
            type="button"
            class="ddm-btn ddm-btn-red"
            data-bs-dismiss="modal"
            data-endpoint-url="{% url 'ddm_apis:project_data_delete' object.url_id %}"
            data-csrf-token="{{csrf_token}}">
          Yes, delete all data
        </button>
      </div>
    </div>
  </div>
</div>

{# Modal for participant deletion #}
<div class="modal" id="delete-participant" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <h4>Delete Participant</h4>
        <p>You can delete a specific participant by providing their external id in the field below:</p>
        <p>
          <input id="participant-id-input" class="w-100 mt-2" name="participant-id">
        </p>

      </div>
      <div class="modal-footer">
        <button
            type="button"
            class="ddm-btn"
            data-bs-dismiss="modal">
          Cancel
        </button>
        <button
            id="delete-participant-button"
            type="button"
            class="ddm-btn ddm-btn-red"
            data-bs-dismiss="modal"
            data-endpoint-url="{% url 'ddm_apis:participant_delete' object.url_id 'placeholder' %}"
            data-csrf-token="{{csrf_token}}">
          Delete Participant
        </button>
      </div>
    </div>
  </div>
</div>

{# Modal for participant delete success #}
{% include "ddm_core/components/info_modal.html" with modal_id="modal-participant-delete-success" body="<p><i class='bi bi-check-circle-fill text-success pe-2'></i><b>Participant Deleted</b></p>Participant was successfully deleted. This page will be reloaded in a few seconds." %}

{# Modal for delete success #}
{% include "ddm_core/components/info_modal.html" with modal_id="modal-delete-success" body="<p><i class='bi bi-check-circle-fill text-success pe-2'></i><b>All data were successfully deleted. This page will be reloaded in a few seconds.</b></p>" %}

{# Modal for delete error #}
{% include "ddm_core/components/info_modal.html" with modal_id="modal-delete-error" body="<p><i class='bi bi-x-octagon-fill text-danger pe-2'></i><b>An error occurred</b></p>Something went wrong during the data deletion: <span id='delete-error-message'></span>" %}

<div class="mt-3">
  <a href="{% url 'ddm_projects:list' %}">&#129040; Back</a>
</div>

<div id="download-overlay" class="ddm-overlay">
  <div class="overlay-content d-flex justify-content-center align-items-center h-100 white">
    <div class="load-spinner"></div>
    <div class="fs-2 ps-3 text-white">
      <div>Your data is being prepared. This may take a few moments.</div>
      <div id="progress-bar-container" class="progress-bar-container">
        <div id="ddm-progress-bar" class="ddm-progress-bar">
          <div id="progress-bar-dot" class="progress-bar-dot"></div>
        </div>
      </div>
      <div id="download-progress" class="fs-2 ps-3 text-white w-100 text-center">0 %</div>
    </div>
  </div>
</div>

<div id="download-overlay-no-bar" class="ddm-overlay">
  <div class="overlay-content d-flex justify-content-center align-items-center h-100 white">
    <div class="load-spinner"></div>
    <div class="fs-2 ps-3 text-white">
      <div>Your data is being prepared. This may take a few moments.</div>
    </div>
  </div>
</div>
{% endblock %}


{% block breadcrumbs %}
<a href="{% url 'ddm_projects:list' %}">Projects</a> /
"{{ object.name|truncatechars:15 }}" Project
{% endblock %}

{% block scripts %}
{{ block.super }}
<script src="{% static 'ddm_projects/js/download-data.js' %}"></script>
<script src="{% static 'ddm_projects/js/delete-data.js' %}"></script>
{% endblock %}
