{% extends "base.html" %}

{% block title %}Compliance Overview | RCCG Region 29 Scholarship Portal{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-10">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-success text-white">
          <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
            <div>
              <h2 class="h4 mb-1">Compliance Overview</h2>
              <p class="mb-0 opacity-75">Track your scholarship readiness, application progress, and assessment completion in one place.</p>
            </div>
            <a href="{% url 'core:profile' %}" class="btn btn-light text-success">Back to Profile</a>
          </div>
        </div>
        <div class="card-body p-4">
          <div class="row g-4 mb-4">
            <div class="col-md-4">
              <div class="card border-0 bg-light h-100">
                <div class="card-body">
                  <div class="text-success mb-2"><i class="bi bi-person-check fs-3"></i></div>
                  <h5 class="fw-semibold">Account Status</h5>
                  <p class="text-muted mb-0">{{ user.get_full_name|default:user.username }} is registered and ready for portal access.</p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card border-0 bg-light h-100">
                <div class="card-body">
                  <div class="text-primary mb-2"><i class="bi bi-clipboard2-check fs-3"></i></div>
                  <h5 class="fw-semibold">Application Status</h5>
                  <p class="text-muted mb-0">{{ latest_application.get_status_display|default:"No application submitted yet" }}</p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card border-0 bg-light h-100">
                <div class="card-body">
                  <div class="text-warning mb-2"><i class="bi bi-journal-text fs-3"></i></div>
                  <h5 class="fw-semibold">Assessment Progress</h5>
                  <p class="text-muted mb-0">{{ completed_assessments }} completed assessment{{ completed_assessments|pluralize }} so far.</p>
                </div>
              </div>
            </div>
          </div>

          <h4 class="fw-semibold mb-3">Checklist</h4>
          <div class="list-group">
            {% for item in checklist %}
            <div class="list-group-item d-flex justify-content-between align-items-start gap-3">
              <div>
                <div class="fw-semibold">
                  {% if item.done %}
                    <i class="bi bi-check-circle-fill text-success me-2"></i>
                  {% else %}
                    <i class="bi bi-circle text-muted me-2"></i>
                  {% endif %}
                  {{ item.label }}
                </div>
                <div class="small text-muted mt-1">{{ item.detail }}</div>
              </div>
              <span class="badge {% if item.done %}bg-success{% else %}bg-light text-muted{% endif %}">
                {% if item.done %}Complete{% else %}Pending{% endif %}
              </span>
            </div>
            {% endfor %}
          </div>

          <div class="row g-4 mt-2">
            <div class="col-lg-6">
              <div class="card border-0 bg-white shadow-sm">
                <div class="card-body">
                  <h5 class="fw-semibold">Required documents</h5>
                  <ul class="mb-0 text-muted">
                    <li>Valid identification or student ID</li>
                    <li>Admission letter or school proof</li>
                    <li>Recent passport photograph</li>
                    <li>Payment or fee confirmation where applicable</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="card border-0 bg-white shadow-sm">
                <div class="card-body">
                  <h5 class="fw-semibold">Next recommended actions</h5>
                  <ul class="mb-0 text-muted">
                    <li>Complete your scholarship application form</li>
                    <li>Finish any pending assessment attempts</li>
                    <li>Review your profile information for accuracy</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}