{% extends "base.html" %}

{% block content %}
  <div class="wizard-step mx-auto">
    <h2 class="my-4">
      Wearable Data
    </h2>
    <!-- Step 1: Question -->
    <div id="wearable-question">
      <p>
        Patient's wearable device data can provide valuable insights for both current and future analysis, helping us gain a deeper understanding of the patient's condition.
      </p>
      <div class="mb-3 d-flex fs-1 justify-content-between">
        <i class="bi bi-smartwatch"></i>
        <i class="bi bi-lightning-fill"></i>
        <i class="bi bi-person-walking"></i>
        <i class="bi bi-heart-pulse"></i>
        <i class="bi bi-bicycle"></i>
        <i class="bi bi-person-arms-up"></i>
      </div>
      <div class="text-center">
        <h4 class="mb-4">
          Do you want to upload wearable data for this patient?
        </h4>
        <div class="d-flex gap-3 justify-content-center">
          <button id="upload-yes"
                  class="btn btn-primary btn-lg">
            <i class="bi bi-check-circle me-2"></i>Yes, Upload Data
          </button>
          <button id="upload-no"
                  class="btn btn-outline-secondary btn-lg">
            <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"
         style="display: none">
      <form id="wearable-form"
            method="post"
            enctype="multipart/form-data">
        <input type="hidden"
               name="patient_id"
               value="{{ patient_id }}" />
        <span class="text-danger">
          {% if error %}
            {{ error }}
          {% endif %}
        </span>
        <div class="mb-3">
          <label class="text-secondary my-1"
                 for="file"
                 class="form-label">
            Please select a CSV or JSON file containing the patient's wearable device data
          </label>
          <input id="file"
                 class="form-control"
                 name="file"
                 type="file"
                 accept=".json,.csv" />
        </div>
        {% if wearable_data %}
          <p class="my-3 text-secondary">
            {{ wearable_data | length }} observation
            {% if wearable_data | length != 1 %}
              s
            {% endif %}
            loaded
          </p>
        {% endif %}
        <div class="d-flex gap-2">
          <button type="submit"
                  class="btn btn-primary">
            <i class="bi bi-upload me-2"></i>Upload & Continue
          </button>
          <button type="button"
                  id="back-to-question"
                  class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>Back
          </button>
        </div>
      </form>
    </div>
    <!-- Skip Form (hidden) -->
    <form id="skip-form"
          method="post"
          style="display: none">
      <input type="hidden"
             name="patient_id"
             value="{{ patient_id }}" />
      <input type="hidden"
             name="skip"
             value="true" />
    </form>
  </div>
{% endblock %}

{% block scripts %}
  <script>
document.addEventListener("DOMContentLoaded", () => {
    const questionSection = document.getElementById('wearable-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 backBtn = document.getElementById('back-to-question');

    // Handle "Yes" button click
    uploadYesBtn.addEventListener('click', () => {
        questionSection.style.display = 'none';
        uploadSection.style.display = 'block';
    });

    // Handle "No" button click - directly skip
    uploadNoBtn.addEventListener('click', () => {
        skipForm.submit();
    });

    // Handle "Back" button click
    backBtn.addEventListener('click', () => {
        uploadSection.style.display = 'none';
        questionSection.style.display = 'block';
    });

    // Initialize validation only for the upload form
    const validator = new JustValidate('#wearable-form', {
        validateBeforeSubmitting: true,
    });

    validator.addField('#file', [
        {
            rule: 'required',
            value: true, // File is required when upload form is shown
            errorMessage: 'Please select a file to upload.',
        },
        {
            rule: 'maxFilesCount',
            value: 1,
            errorMessage: 'Only one file can be uploaded. Please select only one file.',
        },
        {
            rule: 'files',
            value: {
                files: {
                    extensions: ['csv', 'json'],
                }
            },
            errorMessage: 'Invalid file type, please select a .csv or .json file.',
        }
    ]);

    validator.onSuccess((event) => {
        console.debug("File validation success!");
        event.target.submit();
    });

    validator.onFail((fields) => {
        console.debug('Validation failed:', fields);
    });
});
  </script>
{% endblock %}