{% 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" href="{{ url_for('parent_messages') }}">
                        <i class="fas fa-envelope me-2"></i>الرسائل
                    </a>
                    <a class="nav-link active" 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_messages') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-right me-2"></i>
                            العودة للرسائل
                        </a>
                    </div>
                </div>

                <!-- Send Message Form -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-paper-plane me-2"></i>
                            رسالة جديدة
                        </h5>
                    </div>
                    <div class="card-body">
                        <form method="POST">
                            <div class="row">
                                <!-- Message Type -->
                                <div class="col-12 mb-4">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-tags me-2"></i>نوع الرسالة
                                    </label>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="card border-2" id="inquiryCard">
                                                <div class="card-body text-center p-3">
                                                    <input type="radio" class="btn-check" name="message_type" id="inquiry" value="استفسار">
                                                    <label class="w-100" for="inquiry">
                                                        <i class="fas fa-question-circle fa-2x text-info mb-2"></i>
                                                        <h6 class="fw-bold">استفسار</h6>
                                                        <small class="text-muted">سؤال أو استفسار عام</small>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card border-2" id="leaveCard">
                                                <div class="card-body text-center p-3">
                                                    <input type="radio" class="btn-check" name="message_type" id="leave" value="طلب إجازة">
                                                    <label class="w-100" for="leave">
                                                        <i class="fas fa-calendar-alt fa-2x text-warning mb-2"></i>
                                                        <h6 class="fw-bold">طلب إجازة</h6>
                                                        <small class="text-muted">إجازة مرضية أو طارئة</small>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card border-2" id="complaintCard">
                                                <div class="card-body text-center p-3">
                                                    <input type="radio" class="btn-check" name="message_type" id="complaint" value="شكوى أو مقترح">
                                                    <label class="w-100" for="complaint">
                                                        <i class="fas fa-exclamation-triangle fa-2x text-danger mb-2"></i>
                                                        <h6 class="fw-bold">شكوى أو مقترح</h6>
                                                        <small class="text-muted">ملاحظة أو اقتراح</small>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Subject -->
                                <div class="col-12 mb-3">
                                    <label for="subject" class="form-label fw-bold">
                                        <i class="fas fa-heading me-2"></i>موضوع الرسالة
                                    </label>
                                    <input type="text" class="form-control" id="subject" name="subject" required>
                                </div>

                                <!-- Message Content -->
                                <div class="col-12 mb-3">
                                    <label for="content" class="form-label fw-bold">
                                        <i class="fas fa-align-left me-2"></i>محتوى الرسالة
                                    </label>
                                    <textarea class="form-control" id="content" name="content" rows="8" 
                                              placeholder="اكتب رسالتك هنا..." required></textarea>
                                    <div class="form-text">يرجى كتابة رسالتك بوضوح وتفصيل</div>
                                </div>
                            </div>

                            <!-- Quick Templates -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <label class="form-label fw-bold">قوالب سريعة:</label>
                                    <div class="btn-group flex-wrap" role="group">
                                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('absence')">طلب إجازة مرضية</button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('pickup')">تغيير موعد الاستلام</button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('activity')">استفسار عن الأنشطة</button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('health')">معلومات صحية</button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('feedback')">تقييم الخدمة</button>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit Buttons -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="d-flex gap-2">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-paper-plane me-2"></i>
                                            إرسال الرسالة
                                        </button>
                                        <button type="reset" class="btn btn-outline-secondary">
                                            <i class="fas fa-redo me-2"></i>
                                            إعادة تعيين
                                        </button>
                                        <a href="{{ url_for('parent_messages') }}" class="btn btn-outline-danger">
                                            <i class="fas fa-times me-2"></i>
                                            إلغاء
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Communication Guidelines -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            إرشادات التواصل
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="fw-bold text-success">نصائح لرسالة فعالة</h6>
                                <ul class="list-unstyled">
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        اكتب موضوعاً واضحاً ومحدداً
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        استخدم لغة مهذبة ومحترمة
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        اذكر اسم طفلك إذا كانت الرسالة تخصه
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6 class="fw-bold text-info">أوقات الرد</h6>
                                <ul class="list-unstyled">
                                    <li class="mb-2">
                                        <i class="fas fa-clock text-info me-2"></i>
                                        الاستفسارات العامة: خلال 24 ساعة
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-clock text-info me-2"></i>
                                        الطلبات العاجلة: خلال 4 ساعات
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-clock text-info me-2"></i>
                                        أيام العمل: الأحد - الخميس
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Message type selection handling
document.addEventListener('DOMContentLoaded', function() {
    const inquiryRadio = document.getElementById('inquiry');
    const leaveRadio = document.getElementById('leave');
    const complaintRadio = document.getElementById('complaint');
    
    const inquiryCard = document.getElementById('inquiryCard');
    const leaveCard = document.getElementById('leaveCard');
    const complaintCard = document.getElementById('complaintCard');
    
    inquiryRadio.addEventListener('change', function() {
        if (this.checked) {
            inquiryCard.classList.add('border-info');
            leaveCard.classList.remove('border-warning');
            complaintCard.classList.remove('border-danger');
        }
    });
    
    leaveRadio.addEventListener('change', function() {
        if (this.checked) {
            leaveCard.classList.add('border-warning');
            inquiryCard.classList.remove('border-info');
            complaintCard.classList.remove('border-danger');
        }
    });
    
    complaintRadio.addEventListener('change', function() {
        if (this.checked) {
            complaintCard.classList.add('border-danger');
            inquiryCard.classList.remove('border-info');
            leaveCard.classList.remove('border-warning');
        }
    });
});

// Message templates
const templates = {
    absence: {
        subject: 'طلب إجازة مرضية',
        content: 'السلام عليكم ورحمة الله وبركاته،\n\nأرجو الموافقة على إجازة مرضية لطفلي/طفلتي _______ لمدة _______ أيام بدءاً من تاريخ _______.\n\nالسبب: _______\n\nمع الشكر والتقدير'
    },
    pickup: {
        subject: 'تغيير موعد استلام الطفل',
        content: 'السلام عليكم ورحمة الله وبركاته،\n\nأرجو إعلامكم بأنه سيتم استلام طفلي/طفلتي _______ في وقت مختلف عن المعتاد.\n\nالموعد الجديد: _______\nالسبب: _______\n\nشكراً لتفهمكم'
    },
    activity: {
        subject: 'استفسار عن الأنشطة التعليمية',
        content: 'السلام عليكم ورحمة الله وبركاته،\n\nأود الاستفسار عن الأنشطة التعليمية المقررة لهذا الأسبوع/الشهر.\n\nكما أرغب في معرفة كيفية مساعدة طفلي/طفلتي في المنزل لتعزيز ما يتعلمه في الروضة.\n\nشكراً لكم'
    },
    health: {
        subject: 'معلومات صحية مهمة',
        content: 'السلام عليكم ورحمة الله وبركاته،\n\nأود إعلامكم بمعلومات صحية مهمة عن طفلي/طفلتي _______:\n\n_______\n\nأرجو أخذ هذه المعلومات بعين الاعتبار عند التعامل مع طفلي.\n\nشكراً لكم'
    },
    feedback: {
        subject: 'تقييم وملاحظات',
        content: 'السلام عليكم ورحمة الله وبركاته،\n\nأود أن أشارككم بعض الملاحظات والتقييم حول الخدمات المقدمة:\n\n_______\n\nأتطلع لمزيد من التطوير والتحسين.\n\nمع التقدير'
    }
};

function useTemplate(templateKey) {
    const template = templates[templateKey];
    if (template) {
        document.getElementById('subject').value = template.subject;
        document.getElementById('content').value = template.content;
        
        // Select appropriate message type
        if (templateKey === 'absence' || templateKey === 'pickup') {
            document.getElementById('leave').checked = true;
            document.getElementById('leaveCard').classList.add('border-warning');
        } else if (templateKey === 'feedback') {
            document.getElementById('complaint').checked = true;
            document.getElementById('complaintCard').classList.add('border-danger');
        } else {
            document.getElementById('inquiry').checked = true;
            document.getElementById('inquiryCard').classList.add('border-info');
        }
    }
}

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const subject = document.getElementById('subject').value.trim();
    const content = document.getElementById('content').value.trim();
    const messageType = document.querySelector('input[name="message_type"]:checked');
    
    if (!messageType) {
        e.preventDefault();
        alert('يرجى اختيار نوع الرسالة');
        return;
    }
    
    if (!subject) {
        e.preventDefault();
        alert('يرجى إدخال موضوع الرسالة');
        document.getElementById('subject').focus();
        return;
    }
    
    if (!content) {
        e.preventDefault();
        alert('يرجى كتابة محتوى الرسالة');
        document.getElementById('content').focus();
        return;
    }
    
    if (content.length < 10) {
        e.preventDefault();
        alert('يرجى كتابة رسالة أكثر تفصيلاً (10 أحرف على الأقل)');
        document.getElementById('content').focus();
        return;
    }
});
</script>
{% endblock %}