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

{% block title %}{{ parent.first_name }} {{ parent.last_name }} — Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="rb-page-header">
    <div>
        <h1 class="rb-page-title">{{ parent.first_name }} {{ parent.last_name }}</h1>
        <p class="rb-page-subtitle">
            {{ parent.get_relationship_display }}
            {% if parent.student %}
            of <a href="{% url 'students:student_detail' parent.student.pk %}" style="color:var(--rb-red)">
                {{ parent.student.first_name }} {{ parent.student.last_name }}
            </a>
            {% endif %}
        </p>
    </div>
    <div style="display:flex;gap:.5rem">
        <a href="{% url 'students:parent_edit' parent.pk %}" class="btn btn-warning btn-sm">
            <i class="fas fa-edit me-1"></i> Edit
        </a>
        <a href="{% url 'students:parent_list' %}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i> Back to Parents
        </a>
    </div>
</div>

<div class="row">

    <!-- Left: Personal & Contact -->
    <div class="col-lg-5">

        <!-- Personal Information -->
        <div class="card mb-3">
            <div class="card-header">
                <span style="font-weight:600;font-size:.875rem">
                    <i class="fas fa-user me-2" style="color:var(--rb-red)"></i>Personal Information
                </span>
            </div>
            <div class="card-body" style="font-size:.875rem">
                <table class="table table-borderless mb-0">
                    <tr>
                        <td style="color:#888;width:45%">Full Name</td>
                        <td><strong>{{ parent.first_name }} {{ parent.last_name }}</strong></td>
                    </tr>
                    <tr>
                        <td style="color:#888">Relationship</td>
                        <td>{{ parent.get_relationship_display }}</td>
                    </tr>
                    {% if parent.occupation %}
                    <tr>
                        <td style="color:#888">Occupation</td>
                        <td>{{ parent.occupation }}</td>
                    </tr>
                    {% endif %}
                    {% if parent.employer %}
                    <tr>
                        <td style="color:#888">Employer</td>
                        <td>{{ parent.employer }}</td>
                    </tr>
                    {% endif %}
                    {% if parent.education_level %}
                    <tr>
                        <td style="color:#888">Education</td>
                        <td>{{ parent.get_education_level_display }}</td>
                    </tr>
                    {% endif %}
                    {% if parent.preferred_language %}
                    <tr>
                        <td style="color:#888">Language</td>
                        <td>{{ parent.get_preferred_language_display }}</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="card mb-3">
            <div class="card-header">
                <span style="font-weight:600;font-size:.875rem">
                    <i class="fas fa-phone me-2" style="color:var(--rb-red)"></i>Contact Information
                </span>
            </div>
            <div class="card-body" style="font-size:.875rem">
                <table class="table table-borderless mb-0">
                    <tr>
                        <td style="color:#888;width:45%">Phone</td>
                        <td>
                            <a href="tel:{{ parent.phone }}" style="color:inherit;text-decoration:none">
                                <i class="fas fa-phone-alt" style="color:var(--rb-gold);margin-right:.3rem"></i>
                                {{ parent.phone }}
                            </a>
                        </td>
                    </tr>
                    {% if parent.alternate_phone %}
                    <tr>
                        <td style="color:#888">Alt Phone</td>
                        <td>
                            <a href="tel:{{ parent.alternate_phone }}" style="color:inherit;text-decoration:none">
                                {{ parent.alternate_phone }}
                            </a>
                        </td>
                    </tr>
                    {% endif %}
                    {% if parent.email %}
                    <tr>
                        <td style="color:#888">Email</td>
                        <td>
                            <a href="mailto:{{ parent.email }}" style="color:var(--rb-red)">
                                {{ parent.email }}
                            </a>
                        </td>
                    </tr>
                    {% endif %}
                    {% if parent.address %}
                    <tr>
                        <td style="color:#888">Address</td>
                        <td>{{ parent.address }}</td>
                    </tr>
                    {% endif %}
                    {% if parent.mobile_money_number %}
                    <tr>
                        <td style="color:#888">MoMo</td>
                        <td>{{ parent.mobile_money_number }}
                            {% if parent.mobile_money_provider %}
                            <span class="rb-badge rb-badge-blue">{{ parent.mobile_money_provider }}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>

        <!-- Notification Preferences -->
        <div class="card mb-3">
            <div class="card-header">
                <span style="font-weight:600;font-size:.875rem">
                    <i class="fas fa-bell me-2" style="color:var(--rb-red)"></i>Notifications
                </span>
            </div>
            <div class="card-body" style="font-size:.875rem">
                <div style="display:flex;flex-wrap:wrap;gap:.75rem">
                    <span style="color:{% if parent.receive_sms %}#166534{% else %}#aaa{% endif %}">
                        <i class="fas fa-{% if parent.receive_sms %}check-circle{% else %}times-circle{% endif %} me-1"></i>SMS
                    </span>
                    <span style="color:{% if parent.receive_email %}#166534{% else %}#aaa{% endif %}">
                        <i class="fas fa-{% if parent.receive_email %}check-circle{% else %}times-circle{% endif %} me-1"></i>Email
                    </span>
                    <span style="color:{% if parent.receive_whatsapp %}#166534{% else %}#aaa{% endif %}">
                        <i class="fas fa-{% if parent.receive_whatsapp %}check-circle{% else %}times-circle{% endif %} me-1"></i>WhatsApp
                    </span>
                    <span style="color:{% if parent.is_primary_contact %}#166534{% else %}#aaa{% endif %}">
                        <i class="fas fa-{% if parent.is_primary_contact %}check-circle{% else %}times-circle{% endif %} me-1"></i>Primary Contact
                    </span>
                    <span style="color:{% if parent.can_pick_up %}#166534{% else %}#aaa{% endif %}">
                        <i class="fas fa-{% if parent.can_pick_up %}check-circle{% else %}times-circle{% endif %} me-1"></i>Authorised Pick-up
                    </span>
                </div>
            </div>
        </div>

    </div>

    <!-- Right: Linked Student -->
    <div class="col-lg-7">
        <div class="card mb-3">
            <div class="card-header">
                <span style="font-weight:600;font-size:.875rem">
                    <i class="fas fa-user-graduate me-2" style="color:var(--rb-red)"></i>Linked Student
                </span>
            </div>
            <div class="card-body">
                {% if parent.student %}
                <div style="display:flex;align-items:center;gap:1rem;padding:.5rem 0">
                    <!-- Avatar -->
                    <div style="width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--rb-red-dark),var(--rb-gold));color:#fff;font-weight:700;font-size:1.1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        {{ parent.student.first_name|first }}{{ parent.student.last_name|first }}
                    </div>
                    <div>
                        <div style="font-weight:700;font-size:1rem">
                            {{ parent.student.first_name }} {{ parent.student.last_name }}
                        </div>
                        <div style="font-size:.8rem;color:#888">
                            ID: {{ parent.student.student_id }} &nbsp;•&nbsp;
                            Class: {{ parent.student.current_class|default:"Not assigned" }}
                        </div>
                        <div style="margin-top:.4rem">
                            <a href="{% url 'students:student_detail' parent.student.pk %}"
                               class="btn btn-sm btn-rb-primary" style="font-size:.78rem">
                                <i class="fas fa-eye me-1"></i> View Student Profile
                            </a>
                        </div>
                    </div>
                </div>
                {% else %}
                <p class="text-muted text-center py-3">No student linked.</p>
                {% endif %}
            </div>
        </div>

        {% if parent.notes %}
        <div class="card">
            <div class="card-header">
                <span style="font-weight:600;font-size:.875rem">
                    <i class="fas fa-sticky-note me-2" style="color:var(--rb-red)"></i>Notes
                </span>
            </div>
            <div class="card-body" style="font-size:.875rem;color:#555">
                {{ parent.notes|linebreaks }}
            </div>
        </div>
        {% endif %}

        <!-- Quick Actions -->
        <div class="card mt-3">
            <div class="card-header">
                <span style="font-weight:600;font-size:.875rem">
                    <i class="fas fa-bolt me-2" style="color:var(--rb-gold)"></i>Quick Actions
                </span>
            </div>
            <div class="card-body" style="display:flex;flex-wrap:wrap;gap:.5rem">
                {% if parent.phone %}
                <a href="tel:{{ parent.phone }}" class="btn btn-sm btn-outline-success">
                    <i class="fas fa-phone me-1"></i> Call
                </a>
                <a href="{% url 'communication:sms_compose' %}?phone={{ parent.phone }}"
                   class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-comment-sms me-1"></i> Send SMS
                </a>
                {% endif %}
                {% if parent.email %}
                <a href="mailto:{{ parent.email }}" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-envelope me-1"></i> Email
                </a>
                {% endif %}
                <a href="{% url 'students:parent_edit' parent.pk %}" class="btn btn-sm btn-warning">
                    <i class="fas fa-edit me-1"></i> Edit
                </a>
            </div>
        </div>

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