{% extends "base.html" %}

{% block content %}
  <div class="wizard-step mx-auto">
    <h2 class="my-4">
      Upload Test Reports
    </h2>
    <!-- Step 1: Question -->
    <div id="test-files-question"
         class="{% if patient_data.previous_tests and patient_data.previous_tests|length > 0 %}
                  d-none
                {% else %}
                  d-block
                {% endif %}">
      <p>
        Medical test reports and diagnostic images can provide valuable insights for accurate diagnosis and treatment planning.
      </p>
      <div class="mb-3 d-flex fs-1 justify-content-between">
        <i class="bi bi-file-earmark-pdf"></i>
        <i class="bi bi-file-earmark-image"></i>
        <i class="bi bi-file-earmark-medical"></i>
        <i class="bi bi-clipboard2-pulse"></i>
        <i class="bi bi-hospital"></i>
        <i class="bi bi-heart-pulse"></i>
      </div>
      <div class="text-center">
        <h4 class="mb-4">
          Do you want to upload test reports for this patient?
        </h4>
        <div class="d-flex gap-3 justify-content-center">
          <button id="upload-yes"
                  class="btn btn-primary btn-lg"
                  type="button">
            <i class="bi bi-check-circle me-2"></i>Yes, Upload Reports
          </button>
          <button id="upload-no"
                  class="btn btn-outline-secondary btn-lg"
                  type="button">
            <i class="bi bi-x-circle me-2"></i>No, Skip This Step
          </button>
        </div>
      </div>
    </div>
    <!-- Step 2: Upload Form (hidden initially) -->
    <div id="upload-section"
         class="{% if patient_data.previous_tests and patient_data.previous_tests|length > 0 %}
                  d-block
                {% else %}
                  d-none
                {% endif %}">
      <form id="test-files-form"
            method="post"
            enctype="multipart/form-data">
        <input type="hidden"
               name="patient_id"
               value="{{ patient_id }}" />
        <input type="hidden"
               name="has_reports"
               id="has_reports_hidden"
               value="yes" />
        <input type="hidden"
               name="action"
               id="action_field"
               value="upload" />
        <span class="text-danger">
          {% if error %}
            {{ error }}
          {% endif %}
        </span>
        <div class="mb-3">
          <label class="text-secondary my-1"
                 for="reports"
                 class="form-label">
            Please select PDF files or medical images (JPG, JPEG, PNG) containing test reports
          </label>
          <input id="reports"
                 class="form-control"
                 name="reports"
                 type="file"
                 multiple
                 accept=".pdf,image/png,image/jpeg,image/jpg" />
        </div>
        {% if patient_data.previous_tests and patient_data.previous_tests|length > 0 %}
          <p class="my-3 text-secondary">
            {{ patient_data.previous_tests|length }} report
            {% if patient_data.previous_tests|length != 1 %}
              s
            {% endif %}
            uploaded
          </p>
          <ul class="list-unstyled mb-3">
            {% for report in patient_data.previous_tests %}
              {% if report.filename %}
                <li>
                  <i class="bi bi-file-earmark-arrow-up me-1"></i>
                  {{ report.filename }}
                </li>
              {% else %}
                <li>
                  <i class="bi bi-file-earmark-arrow-up me-1"></i>
                  [Unnamed file]
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        {% endif %}
        <div class="d-flex align-items-center gap-2">
          <!-- Upload more reports -->
          <button type="button"
                  class="btn btn-primary"
                  id="upload-more-btn">
            <i class="bi bi-upload me-2"></i>Upload Report
          </button>
          <!-- Continue to next step -->
          <button type="button"
                  class="btn btn-success"
                  id="continue-btn">
            <i class="bi bi-arrow-right-circle me-2"></i>Continue to Next Step
          </button>
          <!-- Loading spinner -->
          <div id="loading-indicator"
               class="spinner-border text-primary"
               role="status"
               style="display: none">
            <span class="visually-hidden">Processing...</span>
          </div>
        </div>
      </form>
    </div>
    <!-- Skip Form (hidden) -->
    <form id="skip-form"
          method="post"
          action="/tests"
          enctype="application/x-www-form-urlencoded"
          style="display: none">
      <input type="hidden"
             name="patient_id"
             value="{{ patient_id }}" />
      <input type="hidden"
             name="has_reports"
             value="no" />
    </form>
  </div>
{% endblock %}

{% block scripts %}
  <script>
document.addEventListener("DOMContentLoaded", () => {
    const questionSection = document.getElementById('test-files-question');
    const uploadSection = document.getElementById('upload-section');
    const skipForm = document.getElementById('skip-form');
    const uploadYesBtn = document.getElementById('upload-yes');
    const uploadNoBtn = document.getElementById('upload-no');
    const hasReportsHidden = document.getElementById('has_reports_hidden');
    const form = document.getElementById('test-files-form');
    const loading = document.getElementById('loading-indicator');
    const uploadMoreBtn = document.getElementById('upload-more-btn');
    const continueBtn = document.getElementById('continue-btn');
    const actionField = document.getElementById('action_field');
    const reportsInput = document.getElementById('reports');

    // Auto-show upload form if reports exist
    const hasUploadedReports = {{ 'true' if patient_data.previous_tests and patient_data.previous_tests|length > 0 else 'false' }};
    if (hasUploadedReports) {
        questionSection.style.display = 'none';
        uploadSection.style.display = 'block';
        hasReportsHidden.value = 'yes';
    }

    // Handle "Yes" button click
    uploadYesBtn.addEventListener('click', () => {
        questionSection.classList.add('d-none');
        uploadSection.classList.remove('d-none');
        hasReportsHidden.value = 'yes';
    });

    // Handle "No" button click - skip step
    uploadNoBtn.addEventListener('click', () => {
        loading.style.display = 'inline-block';
        skipForm.submit();
    });

    // Handle Upload More Reports button
    uploadMoreBtn.addEventListener('click', () => {
        if (reportsInput.files.length === 0) {
            alert('Please select at least one file to upload.');
            return;
        }

        actionField.value = 'upload';
        loading.style.display = 'inline-block';
        uploadMoreBtn.disabled = true;
        continueBtn.disabled = true;
        form.submit();
    });

    // Handle Continue button (no file validation needed)
    continueBtn.addEventListener('click', () => {
        actionField.value = 'continue';
        loading.style.display = 'inline-block';
        uploadMoreBtn.disabled = true;
        continueBtn.disabled = true;
        form.submit();
    });
});
  </script>
{% endblock %}