{% extends 'base.html' %}

{% block title %}Message Parent — Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="rb-page-header">
    <div>
        <h1 class="rb-page-title">Send Message to Parent</h1>
        <p class="rb-page-subtitle">{{ parent.first_name }} {{ parent.last_name }} — {{ parent.phone }}</p>
    </div>
    <a href="{% url 'communication:parent_communication' %}" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-arrow-left me-1"></i> Back
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-md-7">
        <div class="card">
            <div class="card-header">
                <span style="font-weight:600;font-size:.9rem">
                    <i class="fas fa-comment-sms me-2" style="color:var(--rb-red)"></i>
                    SMS to {{ parent.first_name }} {{ parent.last_name }}
                </span>
            </div>
            <div class="card-body">
                <!-- Parent info -->
                <div style="background:#fdfaf7;border-radius:8px;padding:.85rem 1rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.75rem">
                    <div style="width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--rb-red-dark),var(--rb-gold));color:#fff;font-weight:700;font-size:.9rem;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;font-size:.875rem">{{ parent.first_name }} {{ parent.last_name }}</div>
                        <div style="font-size:.78rem;color:#888">
                            {{ parent.get_relationship_display }} of
                            {% if parent.student %}{{ parent.student.first_name }} {{ parent.student.last_name }}{% endif %}
                            &middot; <a href="tel:{{ parent.phone }}">{{ parent.phone }}</a>
                        </div>
                    </div>
                </div>

                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="form-label">Message Type</label>
                        <select name="message_type" class="form-select">
                            <option value="general">General</option>
                            <option value="attendance">Attendance</option>
                            <option value="fees">Fees / Payment</option>
                            <option value="academic">Academic</option>
                            <option value="emergency">Emergency</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Message <span class="text-danger">*</span></label>
                        <textarea name="message" class="form-control" rows="5" maxlength="160" placeholder="Type your message here…" required style="resize:vertical"></textarea>
                        <div style="text-align:right;font-size:.75rem;color:#aaa;margin-top:.25rem">
                            <span id="charCount">0</span>/160 characters
                        </div>
                    </div>
                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{% url 'communication:parent_communication' %}" class="btn btn-outline-secondary">Cancel</a>
                        <button type="submit" class="btn btn-rb-primary">
                            <i class="fas fa-paper-plane me-2"></i> Send SMS
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const ta = document.querySelector('textarea[name=message]');
const counter = document.getElementById('charCount');
if (ta && counter) {
    ta.addEventListener('input', () => {
        counter.textContent = ta.value.length;
        counter.style.color = ta.value.length > 140 ? 'var(--rb-red)' : '#aaa';
    });
}
</script>
{% endblock %}