{% extends "base.html" %}
{% load widget_tweaks %}

{% block title %}Report Issues | RCCG Region 29 Scholarship Portal{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-10">
      
      <!-- Header -->
      <div class="mb-5">
        <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap">
          <div>
            <h1 class="h3 fw-bold mb-1">
              <i class="bi bi-exclamation-circle me-2"></i>Report an Issue
            </h1>
            <p class="text-muted">Help us improve by reporting concerns with your application, assessments, or portal access.</p>
          </div>
          <a href="{% url 'core:profile' %}" class="btn btn-outline-secondary">
            Back to Profile
          </a>
        </div>
      </div>

      <!-- Submission Form -->
      <div class="card shadow-sm border-0 mb-5">
        <div class="card-header bg-danger text-white">
          <h5 class="mb-0">
            <i class="bi bi-pencil-square me-2"></i>Submit New Report
          </h5>
        </div>
        <div class="card-body p-4">
          {% if messages %}
            {% for message in messages %}
              <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-2"></i>{{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
              </div>
            {% endfor %}
          {% endif %}

          <form method="post" novalidate>
            {% csrf_token %}
            
            {% if form.non_field_errors %}
              <div class="alert alert-danger">
                <i class="bi bi-exclamation-triangle me-2"></i>
                {{ form.non_field_errors }}
              </div>
            {% endif %}

            <div class="row g-3">
              <div class="col-md-6">
                <label for="{{ form.full_name.id_for_label }}" class="form-label fw-semibold">Full Name</label>
                {{ form.full_name|add_class:"form-control" }}
                {% if form.full_name.errors %}
                  <div class="text-danger small mt-1">{{ form.full_name.errors|join:", " }}</div>
                {% endif %}
              </div>

              <div class="col-md-6">
                <label for="{{ form.email.id_for_label }}" class="form-label fw-semibold">Email Address</label>
                {{ form.email|add_class:"form-control" }}
                {% if form.email.errors %}
                  <div class="text-danger small mt-1">{{ form.email.errors|join:", " }}</div>
                {% endif %}
              </div>

              <div class="col-md-6">
                <label for="{{ form.phone.id_for_label }}" class="form-label fw-semibold">Phone Number</label>
                {{ form.phone|add_class:"form-control" }}
                {% if form.phone.errors %}
                  <div class="text-danger small mt-1">{{ form.phone.errors|join:", " }}</div>
                {% endif %}
              </div>

              <div class="col-md-6">
                <label for="{{ form.category.id_for_label }}" class="form-label fw-semibold">Category</label>
                {{ form.category|add_class:"form-select" }}
                {% if form.category.errors %}
                  <div class="text-danger small mt-1">{{ form.category.errors|join:", " }}</div>
                {% endif %}
              </div>

              <div class="col-md-6">
                <label for="{{ form.subject.id_for_label }}" class="form-label fw-semibold">Subject</label>
                {{ form.subject|add_class:"form-control" }}
                {% if form.subject.errors %}
                  <div class="text-danger small mt-1">{{ form.subject.errors|join:", " }}</div>
                {% endif %}
              </div>

              <div class="col-md-6">
                <label for="{{ form.preferred_contact_method.id_for_label }}" class="form-label fw-semibold">Preferred Contact Method</label>
                {{ form.preferred_contact_method|add_class:"form-select" }}
                {% if form.preferred_contact_method.errors %}
                  <div class="text-danger small mt-1">{{ form.preferred_contact_method.errors|join:", " }}</div>
                {% endif %}
              </div>

              <div class="col-12">
                <label for="{{ form.message.id_for_label }}" class="form-label fw-semibold">Describe Your Issue</label>
                {{ form.message|add_class:"form-control"|attr:"rows:6" }}
                {% if form.message.errors %}
                  <div class="text-danger small mt-1">{{ form.message.errors|join:", " }}</div>
                {% endif %}
              </div>
            </div>

            <div class="d-flex gap-2 mt-4">
              <button type="submit" class="btn btn-danger px-4">
                <i class="bi bi-send me-2"></i>Submit Report
              </button>
              <a href="{% url 'core:profile' %}" class="btn btn-outline-secondary px-4">
                Cancel
              </a>
            </div>
          </form>
        </div>
      </div>

      <!-- Issue History -->
      <div class="card shadow-sm border-0">
        <div class="card-header bg-info text-white">
          <h5 class="mb-0">
            <i class="bi bi-clock-history me-2"></i>Your Reports
          </h5>
        </div>
        <div class="card-body p-4">
          {% if user_complaints %}
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th>Date</th>
                    <th>Subject</th>
                    <th>Category</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  {% for complaint in user_complaints %}
                  <tr>
                    <td>
                      <small class="text-muted">{{ complaint.submitted_at|date:"d M Y, H:i" }}</small>
                    </td>
                    <td class="fw-semibold">{{ complaint.subject|truncatechars:50 }}</td>
                    <td>
                      <span class="badge bg-secondary">{{ complaint.get_category_display }}</span>
                    </td>
                    <td>
                      {% if complaint.status == 'new' %}
                        <span class="badge bg-warning text-dark">
                          <i class="bi bi-hourglass-split me-1"></i>New
                        </span>
                      {% elif complaint.status == 'reviewed' %}
                        <span class="badge bg-info text-white">
                          <i class="bi bi-eye me-1"></i>Reviewed
                        </span>
                      {% elif complaint.status == 'resolved' %}
                        <span class="badge bg-success">
                          <i class="bi bi-check-circle me-1"></i>Resolved
                        </span>
                      {% endif %}
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% else %}
            <div class="text-center py-5">
              <i class="bi bi-inbox display-6 text-muted mb-3"></i>
              <p class="text-muted mb-0">You haven't submitted any reports yet.</p>
            </div>
          {% endif %}
        </div>
      </div>

      <!-- Help Section -->
      <div class="alert alert-light border mt-4">
        <h6 class="fw-semibold mb-2">
          <i class="bi bi-question-circle me-2"></i>Need Help?
        </h6>
        <p class="mb-2 small text-muted">
          Common issues and how to report them:
        </p>
        <ul class="mb-0 small text-muted">
          <li><strong>Technical Issue:</strong> Portal errors, login problems, assessment glitches</li>
          <li><strong>Assessment Concern:</strong> Questions about assessment content, scoring, time limits</li>
          <li><strong>Support Request:</strong> Documentation questions, application status, deadline extensions</li>
          <li><strong>Other:</strong> Any other concerns or feedback</li>
        </ul>
      </div>

    </div>
  </div>
</div>
{% endblock %}