{% extends 'base.html' %}

{% block title %}Help Center{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-10">
      <div class="card shadow-lg border-0 rounded-4 overflow-hidden">
        <div class="card-header bg-primary text-white py-4">
          <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
              <p class="mb-1 text-uppercase small fw-semibold text-white-50">Support</p>
              <h1 class="h3 mb-0">Help & User Guide</h1>
            </div>
            <span class="badge bg-white text-primary rounded-pill px-3 py-2">
              <i class="bi bi-info-circle me-1"></i> Quick Help
            </span>
          </div>
        </div>

        <div class="card-body p-4 p-lg-5">
          <div class="row g-4">
            <div class="col-lg-4">
              <div class="list-group shadow-sm rounded-4 overflow-hidden">
                <a class="list-group-item list-group-item-action active" href="#getting-started">Getting Started</a>
                <a class="list-group-item list-group-item-action" href="#for-candidates">For Candidates</a>
                <a class="list-group-item list-group-item-action" href="#for-staff">For Staff</a>
                <a class="list-group-item list-group-item-action" href="#uploads">Question Uploads</a>
                <a class="list-group-item list-group-item-action" href="#troubleshooting">Troubleshooting</a>
              </div>
            </div>

            <div class="col-lg-8">
              <section id="getting-started" class="mb-5">
                <h2 class="h4 text-primary mb-3">Getting Started</h2>
                <p class="text-muted">
                  This platform helps candidates apply for scholarship opportunities and complete CBT-based assessments. Staff can manage assessments, upload question banks, and review candidates' performance.
                </p>
                <div class="row g-3">
                  <div class="col-md-6">
                    <div class="border rounded-4 p-3 h-100 bg-light">
                      <h3 class="h6 fw-bold">Candidates</h3>
                      <p class="mb-0 text-muted">Log in, open your assessment, answer questions, and submit before the timer ends.</p>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="border rounded-4 p-3 h-100 bg-light">
                      <h3 class="h6 fw-bold">Staff</h3>
                      <p class="mb-0 text-muted">Create assessments, organize subjects, upload questions, and review submitted attempts.</p>
                    </div>
                  </div>
                </div>
              </section>

              <section id="for-candidates" class="mb-5">
                <h2 class="h4 text-primary mb-3">For Candidates</h2>
                <ol class="ps-3 mb-0">
                  <li>Sign in to your account.</li>
                  <li>Open the dashboard and select an active assessment.</li>
                  <li>Read the instructions before starting.</li>
                  <li>Answer all questions in the exam window.</li>
                  <li>Submit the assessment before time runs out.</li>
                  <li>Review your result after submission.</li>
                </ol>

                <div class="alert alert-info mt-3 mb-0 rounded-4">
                  <strong>Exam rules:</strong> Do not leave the exam window unnecessarily. Suspicious activity may be logged for review.
                </div>
              </section>

              <section id="for-staff" class="mb-5">
                <h2 class="h4 text-primary mb-3">For Staff</h2>
                <ul class="mb-0 ps-3">
                  <li>Create and publish assessments.</li>
                  <li>Create and manage subjects and subject types.</li>
                  <li>Upload question banks in CSV or Excel format.</li>
                  <li>Review responses, scores, and proctor reports.</li>
                  <li>Activate or deactivate subjects and assessments as needed.</li>
                </ul>
              </section>

              <section id="uploads" class="mb-5">
                <h2 class="h4 text-primary mb-3">Question Upload Format</h2>
                <p class="text-muted">Use a CSV or Excel file with columns such as:</p>

                <div class="table-responsive">
                  <table class="table table-bordered table-striped align-middle rounded-4 overflow-hidden">
                    <thead class="table-light">
                      <tr>
                        <th>Field</th>
                        <th>Example</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr><td>assessment_ID</td><td>1</td></tr>
                      <tr><td>subject</td><td>Mathematics</td></tr>
                      <tr><td>prompt</td><td>What is 2 + 2?</td></tr>
                      <tr><td>question_type</td><td>mcq</td></tr>
                      <tr><td>marks</td><td>2</td></tr>
                      <tr><td>order</td><td>1</td></tr>
                      <tr><td>option_A</td><td>3</td></tr>
                      <tr><td>option_B</td><td>4</td></tr>
                      <tr><td>option_C</td><td>5</td></tr>
                      <tr><td>option_D</td><td>6</td></tr>
                      <tr><td>option_is_correct</td><td>B</td></tr>
                    </tbody>
                  </table>
                </div>

                <div class="alert alert-warning mt-3 rounded-4 mb-0">
                  <strong>Correct answer rule:</strong> use only A, B, C, or D in the <code>option_is_correct</code> column. For example, if the correct answer is option B, enter <code>B</code>.
                </div>
              </section>

              <section id="troubleshooting" class="mb-3">
                <h2 class="h4 text-primary mb-3">Troubleshooting</h2>
                <div class="accordion" id="helpAccordion">
                  <div class="accordion-item">
                    <h3 class="accordion-header" id="headingOne">
                      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Assessment does not appear
                      </button>
                    </h3>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#helpAccordion">
                      <div class="accordion-body">
                        Confirm that the assessment is active, published, and available for your registration year.
                      </div>
                    </div>
                  </div>

                  <div class="accordion-item">
                    <h3 class="accordion-header" id="headingTwo">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Question shows a text box instead of options
                      </button>
                    </h3>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#helpAccordion">
                      <div class="accordion-body">
                        Make sure the question type is saved as <code>mcq</code> and the option columns <code>option_A</code> to <code>option_D</code> contain values.
                      </div>
                    </div>
                  </div>

                  <div class="accordion-item">
                    <h3 class="accordion-header" id="headingThree">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Upload failed or data was ignored
                      </button>
                    </h3>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#helpAccordion">
                      <div class="accordion-body">
                        Check that the file is a valid CSV or XLSX, the headings match the template, and there are no blank or malformed rows.
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}