{% extends "base.html" %}

{% block title %}الرسائل - نظام إدارة روضة الأطفال{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        <div class="col-lg-3 col-md-4">
            <div class="sidebar p-3">
                <h5 class="text-white mb-4">
                    <i class="fas fa-heart me-2"></i>
                    لوحة ولي الأمر
                </h5>
                <nav class="nav flex-column">
                    <a class="nav-link" href="{{ url_for('parent_dashboard') }}">
                        <i class="fas fa-tachometer-alt me-2"></i>الرئيسية
                    </a>
                    <a class="nav-link active" href="{{ url_for('parent_messages') }}">
                        <i class="fas fa-envelope me-2"></i>الرسائل
                    </a>
                    <a class="nav-link" href="{{ url_for('parent_send_message') }}">
                        <i class="fas fa-paper-plane me-2"></i>إرسال رسالة
                    </a>
                </nav>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-lg-9 col-md-8">
            <div class="p-4">
                <!-- Header -->
                <div class="row mb-4">
                    <div class="col-md-8">
                        <h2 class="fw-bold mb-2">الرسائل</h2>
                        <p class="text-muted">رسائلك مع إدارة الروضة</p>
                    </div>
                    <div class="col-md-4 text-end">
                        <a href="{{ url_for('parent_send_message') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>
                            رسالة جديدة
                        </a>
                    </div>
                </div>

                <!-- Messages List -->
                <div class="card">
                    <div class="card-body">
                        {% if messages %}
                        <div class="list-group list-group-flush">
                            {% for message in messages %}
                            <div class="list-group-item border-0 border-bottom">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div class="d-flex align-items-start">
                                        <div class="avatar bg-primary text-white rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">
                                            {{ message.sender_name[0] }}
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <h6 class="fw-bold mb-0">{{ message.sender_name }}</h6>
                                                <small class="text-muted">{{ message.sent_date[:16] }}</small>
                                            </div>
                                            <h6 class="text-primary mb-2">{{ message.subject }}</h6>
                                            <p class="text-muted mb-2">{{ message.content[:100] }}{% if message.content|length > 100 %}...{% endif %}</p>
                                            <div class="d-flex align-items-center">
                                                {% if not message.is_read %}
                                                    <span class="badge bg-primary me-2">جديد</span>
                                                {% endif %}
                                                <button class="btn btn-sm btn-outline-primary" onclick="viewMessage({{ message.id }})">
                                                    <i class="fas fa-eye me-1"></i>
                                                    قراءة
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="text-center py-5">
                            <i class="fas fa-envelope fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">لا توجد رسائل</h5>
                            <p class="text-muted">لم تتلق أي رسائل من الإدارة بعد</p>
                            <a href="{{ url_for('parent_send_message') }}" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-2"></i>
                                إرسال أول رسالة
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Message Categories -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">
                                    <i class="fas fa-tags me-2"></i>
                                    أنواع الرسائل الشائعة
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="text-center p-3">
                                            <i class="fas fa-question-circle fa-2x text-info mb-2"></i>
                                            <h6 class="fw-bold">استفسارات عامة</h6>
                                            <small class="text-muted">أسئلة حول الأنشطة والبرامج</small>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center p-3">
                                            <i class="fas fa-calendar-alt fa-2x text-warning mb-2"></i>
                                            <h6 class="fw-bold">طلبات الإجازة</h6>
                                            <small class="text-muted">إجازات مرضية أو طارئة</small>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center p-3">
                                            <i class="fas fa-exclamation-triangle fa-2x text-danger mb-2"></i>
                                            <h6 class="fw-bold">شكاوى ومقترحات</h6>
                                            <small class="text-muted">ملاحظات لتحسين الخدمة</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Message Details Modal -->
<div class="modal fade" id="messageModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">تفاصيل الرسالة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="messageModalBody">
                <!-- Content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                <button type="button" class="btn btn-primary" onclick="replyToMessage()">
                    <i class="fas fa-reply me-2"></i>
                    رد على الرسالة
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function viewMessage(messageId) {
    document.getElementById('messageModalBody').innerHTML = `
        <div class="text-center">
            <i class="fas fa-spinner fa-spin fa-2x"></i>
            <p class="mt-2">جاري تحميل الرسالة...</p>
        </div>
    `;
    
    const modal = new bootstrap.Modal(document.getElementById('messageModal'));
    modal.show();
    
    // Simulate loading message details
    setTimeout(() => {
        document.getElementById('messageModalBody').innerHTML = `
            <div class="card border-0">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-4">
                        <div class="avatar bg-primary text-white rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                            إ
                        </div>
                        <div>
                            <h6 class="fw-bold mb-0">إدارة الروضة</h6>
                            <small class="text-muted">2024-01-20 10:30 ص</small>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <h5 class="fw-bold text-primary mb-3">إشعار بالأنشطة القادمة</h5>
                        <div class="bg-light p-3 rounded">
                            <p class="mb-3">السلام عليكم ورحمة الله وبركاته،</p>
                            <p class="mb-3">نود إعلامكم بأنه سيتم تنظيم مجموعة من الأنشطة التعليمية والترفيهية الممتعة لأطفالنا الأعزاء خلال الأسبوع القادم.</p>
                            <p class="mb-3">الأنشطة تشمل:</p>
                            <ul class="mb-3">
                                <li>نشاط الرسم والتلوين</li>
                                <li>قراءة القصص التفاعلية</li>
                                <li>الألعاب الحركية</li>
                                <li>تعلم الحروف والأرقام</li>
                            </ul>
                            <p class="mb-3">نرجو منكم التأكد من حضور أطفالكم في الوقت المحدد للاستفادة من هذه الأنشطة المفيدة.</p>
                            <p class="mb-0">مع أطيب التحيات،<br>إدارة الروضة</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }, 1000);
}

function replyToMessage() {
    // Close the modal and redirect to send message page
    bootstrap.Modal.getInstance(document.getElementById('messageModal')).hide();
    window.location.href = "{{ url_for('parent_send_message') }}";
}
</script>
{% endblock %}