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

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

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{% if object %}Edit{% else %}Add{% endif %} Parent/Guardian</h1>
            <p class="text-muted">{% if object %}Update contact information{% else %}Register a new parent or guardian{% endif %}</p>
        </div>
        <a href="{% url 'students:parent_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-9">
            <div class="card shadow">
                <div class="card-header py-3 bg-primary text-white">
                    <h6 class="m-0 font-weight-bold"><i class="fas fa-user-friends me-2"></i>Parent/Guardian Information</h6>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        {% if form.errors %}
                        <div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>Please correct the errors below.</div>
                        {% endif %}

                        <h6 class="text-primary border-bottom pb-2 mb-3">Basic Information</h6>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Student <span class="text-danger">*</span></label>
                                {{ form.student }}
                                {% if form.student.errors %}<div class="text-danger small">{{ form.student.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">First Name <span class="text-danger">*</span></label>
                                {{ form.first_name }}
                                {% if form.first_name.errors %}<div class="text-danger small">{{ form.first_name.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Last Name <span class="text-danger">*</span></label>
                                {{ form.last_name }}
                                {% if form.last_name.errors %}<div class="text-danger small">{{ form.last_name.errors }}</div>{% endif %}
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Relationship <span class="text-danger">*</span></label>
                                {{ form.relationship }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Occupation</label>
                                {{ form.occupation }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Employer</label>
                                {{ form.employer }}
                            </div>
                        </div>

                        <h6 class="text-primary border-bottom pb-2 mb-3 mt-4">Contact Information</h6>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Phone <span class="text-danger">*</span></label>
                                {{ form.phone }}
                                {% if form.phone.errors %}<div class="text-danger small">{{ form.phone.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Alternate Phone</label>
                                {{ form.alternate_phone }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Email</label>
                                {{ form.email }}
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Address</label>
                            {{ form.address }}
                        </div>

                        <h6 class="text-primary border-bottom pb-2 mb-3 mt-4">Mobile Money & Preferences</h6>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Mobile Money Provider</label>
                                {{ form.mobile_money_provider }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Mobile Money Number</label>
                                {{ form.mobile_money_number }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Preferred Language</label>
                                {{ form.preferred_language }}
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <div class="form-check mt-2">
                                    {{ form.is_primary_contact }}
                                    <label class="form-check-label" for="{{ form.is_primary_contact.id_for_label }}">Primary Contact</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check mt-2">
                                    {{ form.receive_sms }}
                                    <label class="form-check-label">Receive SMS</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check mt-2">
                                    {{ form.receive_email }}
                                    <label class="form-check-label">Receive Email</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check mt-2">
                                    {{ form.receive_whatsapp }}
                                    <label class="form-check-label">Receive WhatsApp</label>
                                </div>
                            </div>
                        </div>

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

{% block extra_js %}
<script>
document.querySelectorAll('input, select, textarea').forEach(el => {
    if (!el.classList.contains('form-check-input')) {
        el.classList.add('form-control');
    }
});
</script>
{% endblock %}
{% endblock %}