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

{% block title %}Parents & Guardians — Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="rb-page-header">
    <div>
        <h1 class="rb-page-title">Parents &amp; Guardians</h1>
        <p class="rb-page-subtitle">{{ page_obj.paginator.count|default:parents|length }} contact{{ page_obj.paginator.count|default:parents|length|pluralize }} on record</p>
    </div>
    <a href="{% url 'students:parent_add' %}" class="btn btn-rb-primary btn-sm">
        <i class="fas fa-user-plus me-1"></i> Add Parent
    </a>
</div>

<!-- Search -->
<form method="get" class="mb-3">
    <div style="display:flex;gap:.5rem;max-width:440px">
        <input type="text" name="q" value="{{ request.GET.q }}" class="form-control" placeholder="Search name, phone, student…">
        <button type="submit" class="btn btn-rb-primary"><i class="fas fa-search"></i></button>
        {% if request.GET.q %}
        <a href="{% url 'students:parent_list' %}" class="btn btn-outline-secondary"><i class="fas fa-times"></i></a>
        {% endif %}
    </div>
</form>

<div class="card">
    <div class="table-responsive">
        <table class="table table-hover mb-0" style="font-size:.875rem">
            <thead style="background:#fdfaf7">
                <tr>
                    <th style="font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:#888;font-weight:700">Parent / Guardian</th>
                    <th style="font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:#888;font-weight:700">Relationship</th>
                    <th style="font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:#888;font-weight:700">Phone</th>
                    <th style="font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:#888;font-weight:700">Student</th>
                    <th style="font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:#888;font-weight:700">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for parent in parents %}
                <tr>
                    <td>
                        <div style="display:flex;align-items:center;gap:.65rem">
                            <div style="width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--rb-red-dark),var(--rb-gold));color:#fff;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                                {{ parent.first_name|first }}{{ parent.last_name|first }}
                            </div>
                            <div>
                                <div style="font-weight:600">{{ parent.first_name }} {{ parent.last_name }}</div>
                                {% if parent.email %}<div style="font-size:.75rem;color:#aaa">{{ parent.email }}</div>{% endif %}
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="rb-badge rb-badge-blue">{{ parent.get_relationship_display }}</span>
                    </td>
                    <td>
                        <a href="tel:{{ parent.phone }}" style="color:inherit;text-decoration:none">
                            <i class="fas fa-phone-alt" style="color:var(--rb-gold);font-size:.75rem;margin-right:.3rem"></i>{{ parent.phone }}
                        </a>
                        {% if parent.alternate_phone %}
                        <div style="font-size:.75rem;color:#aaa">{{ parent.alternate_phone }}</div>
                        {% endif %}
                    </td>
                    <td>
                        {% if parent.student %}
                        <a href="{% url 'students:student_detail' parent.student.pk %}" style="font-weight:600;color:var(--rb-red);text-decoration:none">
                            {{ parent.student.first_name }} {{ parent.student.last_name }}
                        </a>
                        <div style="font-size:.75rem;color:#aaa">{{ parent.student.current_class|default:"No class" }}</div>
                        {% else %}
                        <span class="rb-badge rb-badge-gray">No student</span>
                        {% endif %}
                    </td>
                    <td>
                        <div style="display:flex;gap:.35rem">
                            <a href="{% url 'students:parent_detail' parent.pk %}" class="btn btn-sm" style="background:#fef2f2;color:var(--rb-red);border:none;padding:.25rem .6rem;font-size:.78rem" title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{% url 'students:parent_edit' parent.pk %}" class="btn btn-sm btn-outline-secondary" style="padding:.25rem .6rem;font-size:.78rem" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            {% if parent.phone %}
                            <a href="{% url 'communication:sms_compose' %}?phone={{ parent.phone }}" class="btn btn-sm" style="background:#f0fdf4;color:#166534;border:none;padding:.25rem .6rem;font-size:.78rem" title="Send SMS">
                                <i class="fas fa-comment-sms"></i>
                            </a>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="5" class="text-center py-5">
                        <i class="fas fa-users fa-2x text-muted mb-2 d-block"></i>
                        {% if request.GET.q %}
                        <p class="text-muted mb-2">No parents found matching "<strong>{{ request.GET.q }}</strong>"</p>
                        <a href="{% url 'students:parent_list' %}">Clear search</a>
                        {% else %}
                        <p class="text-muted mb-2">No parents or guardians on record yet.</p>
                        <a href="{% url 'students:parent_add' %}" class="btn btn-rb-primary btn-sm">Add First Parent</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
    <div style="padding:.75rem 1rem;border-top:1px solid #f0ebe5;display:flex;justify-content:center;gap:.35rem;flex-wrap:wrap">
        {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-chevron-left"></i>
        </a>
        {% endif %}
        {% for num in page_obj.paginator.page_range %}
        {% if page_obj.number == num %}
        <span class="btn btn-sm btn-rb-primary">{{ num }}</span>
        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
        <a href="?page={{ num }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}" class="btn btn-sm btn-outline-secondary">{{ num }}</a>
        {% endif %}
        {% endfor %}
        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-chevron-right"></i>
        </a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}