{% extends 'base.html' %}

{% block title %}{% if object %}Edit Parent{% else %}Add Parent / Guardian{% endif %} — Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="rb-page-header">
    <div>
        <h1 class="rb-page-title">{% if object %}Edit Parent / Guardian{% else %}Add Parent / Guardian{% endif %}</h1>
        {% if object %}<p class="rb-page-subtitle">{{ object.first_name }} {{ object.last_name }}</p>{% endif %}
    </div>
    <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 class="row">
<div class="col-lg-8">
<form method="post">
{% csrf_token %}

<!-- Student Link -->
<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">
        <div class="mb-0">
            <label class="form-label">Student <span class="text-danger">*</span></label>
            {{ form.student }}
            {% if form.student.errors %}<div class="text-danger" style="font-size:.8rem">{{ form.student.errors }}</div>{% endif %}
        </div>
    </div>
</div>

<!-- 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">
        <div class="row g-3">
            <div class="col-sm-6">
                <label class="form-label">First Name <span class="text-danger">*</span></label>
                {{ form.first_name }}
                {% if form.first_name.errors %}<div class="text-danger" style="font-size:.8rem">{{ form.first_name.errors }}</div>{% endif %}
            </div>
            <div class="col-sm-6">
                <label class="form-label">Last Name <span class="text-danger">*</span></label>
                {{ form.last_name }}
                {% if form.last_name.errors %}<div class="text-danger" style="font-size:.8rem">{{ form.last_name.errors }}</div>{% endif %}
            </div>
            <div class="col-sm-6">
                <label class="form-label">Relationship <span class="text-danger">*</span></label>
                {{ form.relationship }}
            </div>
            <div class="col-sm-6">
                <label class="form-label">Occupation</label>
                {{ form.occupation }}
            </div>
            <div class="col-sm-6">
                <label class="form-label">Employer</label>
                {{ form.employer }}
            </div>
            <div class="col-sm-6">
                <label class="form-label">Education Level</label>
                {{ form.education_level }}
            </div>
            <div class="col-sm-6">
                <label class="form-label">Preferred Language</label>
                {{ form.preferred_language }}
            </div>
        </div>
    </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">
        <div class="row g-3">
            <div class="col-sm-6">
                <label class="form-label">Phone <span class="text-danger">*</span></label>
                {{ form.phone }}
                <div style="font-size:.75rem;color:#aaa;margin-top:.2rem">Format: +237XXXXXXXXX</div>
                {% if form.phone.errors %}<div class="text-danger" style="font-size:.8rem">{{ form.phone.errors }}</div>{% endif %}
            </div>
            <div class="col-sm-6">
                <label class="form-label">Alternate Phone</label>
                {{ form.alternate_phone }}
            </div>
            <div class="col-sm-6">
                <label class="form-label">Email</label>
                {{ form.email }}
            </div>
            <div class="col-sm-6">
                <label class="form-label">Mobile Money Number</label>
                {{ form.mobile_money_number }}
            </div>
            <div class="col-sm-6">
                <label class="form-label">Mobile Money Provider</label>
                {{ form.mobile_money_provider }}
            </div>
            <div class="col-12">
                <label class="form-label">Address</label>
                {{ form.address }}
            </div>
        </div>
    </div>
</div>

<!-- Communication 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 &amp; Permissions</span></div>
    <div class="card-body">
        <div class="row g-2">
            <div class="col-12" style="display:flex;flex-wrap:wrap;gap:1.25rem">
                <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem">
                    {{ form.receive_sms }} Receive SMS notifications
                </label>
                <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem">
                    {{ form.receive_email }} Receive email notifications
                </label>
                <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem">
                    {{ form.receive_whatsapp }} Receive WhatsApp messages
                </label>
                <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem">
                    {{ form.is_primary_contact }} Primary contact
                </label>
                <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem">
                    {{ form.can_pick_up }} Authorised to pick up student
                </label>
            </div>
        </div>
        <div class="mt-3">
            <label class="form-label">Notes</label>
            {{ form.notes }}
        </div>
    </div>
</div>

<div class="d-flex justify-content-end gap-2 mb-4">
    <a href="{% url 'students:parent_list' %}" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-rb-primary px-4">
        <i class="fas fa-save me-2"></i> {% if object %}Save Changes{% else %}Add Parent{% endif %}
    </button>
</div>

</form>
</div>

<!-- Sidebar info -->
<div class="col-lg-4">
    <div class="card">
        <div class="card-header"><span style="font-weight:600;font-size:.875rem">Tips</span></div>
        <div class="card-body" style="font-size:.82rem;color:#666;line-height:1.6">
            <p><i class="fas fa-info-circle" style="color:var(--rb-gold)"></i> Phone numbers should include the country code: <strong>+237</strong> for Cameroon.</p>
            <p><i class="fas fa-info-circle" style="color:var(--rb-gold)"></i> Only one parent per student should be marked as <strong>Primary Contact</strong>.</p>
            <p class="mb-0"><i class="fas fa-info-circle" style="color:var(--rb-gold)"></i> Enable <strong>Receive SMS</strong> to include this parent in class broadcasts.</p>
        </div>
    </div>
</div>
</div>
{% endblock %}
