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

{% block title %}Contact Us | RCCG Region 29 Scholarship Portal{% endblock %}

{% block content %}
<section class="py-5 bg-light">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="text-center mb-5">
          <h1 class="h3 fw-bold text-success">Contact Us</h1>
          <p class="text-muted">We are here to assist with scholarship applications, assessments, and support enquiries.</p>
        </div>

        <div class="row g-4">
          <!-- Contact Cards -->
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 text-center">
              <div class="card-body p-4">
                <div class="mb-3">
                  <i class="bi bi-envelope-fill text-success display-6"></i>
                </div>
                <h2 class="h6 fw-bold">Email</h2>
                <p class="text-muted small mb-2">For general and application enquiries</p>
                <a href="mailto:scholarship@rccgregion29.org" class="text-success fw-semibold text-decoration-none">
                  scholarship@rccgregion29.org
                </a>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 text-center">
              <div class="card-body p-4">
                <div class="mb-3">
                  <i class="bi bi-telephone-fill text-success display-6"></i>
                </div>
                <h2 class="h6 fw-bold">Phone</h2>
                <p class="text-muted small mb-2">Monday – Friday, 9:00 AM – 4:00 PM</p>
                <a href="tel:+2348030000000" class="text-success fw-semibold text-decoration-none">
                  +234 803 000 0000
                </a>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 text-center">
              <div class="card-body p-4">
                <div class="mb-3">
                  <i class="bi bi-whatsapp text-success display-6"></i>
                </div>
                <h2 class="h6 fw-bold">WhatsApp</h2>
                <p class="text-muted small mb-2">Quick support for applicants</p>
                <a href="https://wa.me/2348030000000" target="_blank" rel="noopener"
                   class="text-success fw-semibold text-decoration-none">
                  Chat on WhatsApp
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- Office / Location + Support Note -->
        <div class="row g-4 mt-2">
          <div class="col-lg-6">
            <div class="card border-0 shadow-sm rounded-4 h-100">
              <div class="card-body p-4">
                <h2 class="h6 fw-bold mb-3">
                  <i class="bi bi-geo-alt-fill text-success me-2"></i>Office Location
                </h2>
                <p class="text-muted mb-2">
                  RCCG Region 29 Secretariat<br>
                  Cross River State, Nigeria
                </p>
                <p class="small text-muted mb-0">
                  Visits are by appointment only. Please contact us in advance.
                </p>
              </div>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="card border-0 shadow-sm rounded-4 h-100 bg-success text-white">
              <div class="card-body p-4">
                <h2 class="h6 fw-bold mb-3">Need Financial Support?</h2>
                <p class="mb-3 opacity-90">
                  You can apply for bursary or general support, or contribute to the scholarship fund.
                </p>
                <a href="{% url 'core:donation_form' %}" class="btn btn-light text-success fw-semibold">
                  Apply for Support / Donate
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mt-4">
          <div class="card-body p-4">
            <div class="d-flex align-items-center mb-3">
              <i class="bi bi-exclamation-circle-fill text-warning me-2"></i>
              <h2 class="h6 fw-bold mb-0">Submit a complaint or concern</h2>
            </div>
            <p class="text-muted small mb-4">
              Share any issue with your application, assessment, or portal access. We will review it and follow up through your preferred contact method.
            </p>

            {% if messages %}
              {% for message in messages %}
                <div class="alert alert-success" role="alert">{{ message }}</div>
              {% endfor %}
            {% endif %}

            <form method="post" novalidate>
              {% csrf_token %}
              {% if form.non_field_errors %}
                <div class="alert alert-danger">{{ form.non_field_errors }}</div>
              {% endif %}
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label">Full name</label>
                  {{ form.full_name }}
                  {% 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 class="form-label">Email address</label>
                  {{ form.email }}
                  {% if form.email.errors %}<div class="text-danger small mt-1">{{ form.email.errors|join:", " }}</div>{% endif %}
                </div>
                <div class="col-md-6">
                  <label class="form-label">Phone number</label>
                  {{ form.phone }}
                  {% if form.phone.errors %}<div class="text-danger small mt-1">{{ form.phone.errors|join:", " }}</div>{% endif %}
                </div>
                <div class="col-md-6">
                  <label class="form-label">Preferred contact method</label>
                  {{ form.preferred_contact_method }}
                  {% 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-md-6">
                  <label class="form-label">Subject</label>
                  {{ form.subject }}
                  {% if form.subject.errors %}<div class="text-danger small mt-1">{{ form.subject.errors|join:", " }}</div>{% endif %}
                </div>
                <div class="col-md-6">
                  <label class="form-label">Category</label>
                  {{ form.category }}
                  {% if form.category.errors %}<div class="text-danger small mt-1">{{ form.category.errors|join:", " }}</div>{% endif %}
                </div>
                <div class="col-12">
                  <label class="form-label">Describe your complaint</label>
                  {{ form.message }}
                  {% if form.message.errors %}<div class="text-danger small mt-1">{{ form.message.errors|join:", " }}</div>{% endif %}
                </div>
              </div>
              <button type="submit" class="btn btn-success mt-4">Send Complaint</button>
              {% if user.is_authenticated %}
                <a href="{% url 'core:report_issue' %}" class="btn btn-outline-success mt-4 ms-2">View My Reports</a>
              {% endif %}
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}