{% extends 'academy/admin_base.html' %}
{% block title %}Students Management{% endblock %}

{% block extra_css %}
<style>
  .students-page {
    padding: 2.5rem 4rem;
    max-width: 1280px;
    margin: 0 auto;
  }

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  }

  .panel {
    background: var(--charcoal);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 2rem;
  }

  .panel-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
  }

  /* Filters */
  .filters {
    background: var(--charcoal);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 1.8rem;
    margin-bottom: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: end;
  }

  .filter-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
  }

  .filter-group input,
  .filter-group select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    color: var(--white);
    min-width: 220px;
  }

  /* Table */
  .data-table {
    width: 100%;
    border-collapse: collapse;
  }
  .data-table thead {
    background: rgba(201, 168, 76, 0.08);
  }
  .data-table th {
    text-align: left;
    padding: 1.2rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .data-table td {
    padding: 1.25rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    vertical-align: middle;
  }
  .data-table tr:hover {
    background: rgba(255,255,255,0.03);
  }

  .student-name {
    font-weight: 600;
    color: var(--white);
  }

  .status-badge {
    padding: 0.35rem 0.9rem;
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 600;
  }
  .status-paid { background: rgba(58,143,95,0.2); color: var(--green); }
  .status-pending { background: rgba(201,168,76,0.15); color: var(--gold); }

  .pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
  }

  @media (max-width: 992px) {
    .students-page { padding: 1.8rem 1.5rem; }
    .filters { flex-direction: column; align-items: stretch; }
  }
</style>
{% endblock %}

{% block admin_content %}

<div class="students-page">

  <!-- Header -->
  <div class="page-header">
    <div>
      <p style="color: var(--gold); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase;">Management</p>
      <h1>All Students</h1>
    </div>
    <a href="{% url 'admin_dashboard' %}" class="btn btn-outline">← Back to Dashboard</a>
  </div>

  <!-- Filters -->
  <div class="filters">
    <form method="get" style="display: contents;">
      <div class="filter-group">
        <label>Search Student</label>
        <input type="text" name="q" value="{{ request.GET.q }}" placeholder="Name, email or phone...">
      </div>

      <div class="filter-group">
        <label>Course</label>
        <select name="course">
          <option value="">All Courses</option>
          {% for value, label in COURSE_CHOICES %}
          <option value="{{ value }}" {% if request.GET.course == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-group">
        <label>Payment Status</label>
        <select name="payment">
          <option value="">All Payments</option>
          <option value="paid" {% if request.GET.payment == 'paid' %}selected{% endif %}>Paid</option>
          <option value="pending" {% if request.GET.payment == 'pending' %}selected{% endif %}>Pending</option>
        </select>
      </div>

      <div>
        <button type="submit" class="btn btn-gold" style="padding: 0.75rem 2rem;">Apply Filters</button>
        <a href="{% url 'admin_students' %}" class="btn btn-dark" style="padding: 0.75rem 1.8rem;">Clear</a>
      </div>
    </form>
  </div>

  <div class="panel">
    <div class="panel-title">📋 Student List ({{ students|length }})</div>

    <table class="data-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Course</th>
          <th>Registered</th>
          <th>Payment</th>
          <th style="width: 110px;">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for student in students %}
        <tr>
          <td>
            <div class="student-name">{{ student.full_name }}</div>
            <small style="color: var(--gray-light);">{{ student.email|default:"—" }}</small>
          </td>
          <td>{{ student.get_course_display }}</td>
          <td>{{ student.registered_at|date:"d M Y" }}</td>
          <td>
            <span class="status-badge {% if student.payment_confirmed %}status-paid{% else %}status-pending{% endif %}">
              {{ student.payment_confirmed|yesno:"Paid,Pending" }}
            </span>
          </td>
          <td>
            <a href="{% url 'admin_student_detail' student.id %}" class="btn btn-gold" style="padding: 0.45rem 1rem; font-size: 0.85rem;">
              View
            </a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="5" style="text-align: center; padding: 4rem 0; color: var(--gray);">
            No students found.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% if is_paginated %}
    {% include "academy/admin/pagination.html" with page_obj=students %}
  {% endif %}

</div>

{% endblock %}