{% extends "base.html" %}

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

{% block content %}
<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-user-shield me-2"></i>
                لوحة الإدارة
            </h5>
            <nav class="nav flex-column">
                <a class="nav-link" href="{{ url_for('admin_dashboard') }}">
                    <i class="fas fa-tachometer-alt me-2"></i>الرئيسية
                </a>
                <a class="nav-link" href="{{ url_for('admin_children') }}">
                    <i class="fas fa-users me-2"></i>إدارة الأطفال
                </a>
                <a class="nav-link" href="{{ url_for('admin_attendance') }}">
                    <i class="fas fa-calendar-check me-2"></i>الحضور والغياب
                </a>
                <a class="nav-link active" href="{{ url_for('admin_payments') }}">
                    <i class="fas fa-money-bill-wave me-2"></i>المدفوعات
                </a>
                <a class="nav-link" href="{{ url_for('admin_programs') }}">
                    <i class="fas fa-clipboard-list me-2"></i>الأنشطة والبرامج
                </a>
                <a class="nav-link" href="{{ url_for('admin_users') }}">
                    <i class="fas fa-user-cog 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('admin_payments') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-right me-2"></i>
                        العودة للقائمة
                    </a>
                </div>
            </div>

            <!-- Add Payment Form -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-money-bill-wave me-2"></i>
                        بيانات الدفعة
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="row">
                            <!-- Child Selection -->
                            <div class="col-md-6 mb-3">
                                <label for="child_id" class="form-label fw-bold">
                                    <i class="fas fa-user me-2"></i>اسم الطفل
                                </label>
                                <select class="form-select" id="child_id" name="child_id" required>
                                    <option value="">اختر الطفل</option>
                                    {% for child in children %}
                                    <option value="{{ child.id }}">{{ child.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- Amount -->
                            <div class="col-md-6 mb-3">
                                <label for="amount" class="form-label fw-bold">
                                    <i class="fas fa-coins me-2"></i>المبلغ (ريال)
                                </label>
                                <input type="number" class="form-control" id="amount" name="amount" 
                                       step="0.01" min="0" required>
                            </div>

                            <!-- Payment Date -->
                            <div class="col-md-6 mb-3">
                                <label for="payment_date" class="form-label fw-bold">
                                    <i class="fas fa-calendar me-2"></i>تاريخ الدفع
                                </label>
                                <input type="date" class="form-control" id="payment_date" name="payment_date" required>
                            </div>

                            <!-- Payment Type (Quick Select) -->
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">
                                    <i class="fas fa-tags me-2"></i>نوع الدفعة
                                </label>
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="payment_type" id="monthly" value="شهرية">
                                    <label class="btn btn-outline-primary" for="monthly">شهرية</label>

                                    <input type="radio" class="btn-check" name="payment_type" id="registration" value="تسجيل">
                                    <label class="btn btn-outline-success" for="registration">تسجيل</label>

                                    <input type="radio" class="btn-check" name="payment_type" id="activities" value="أنشطة">
                                    <label class="btn btn-outline-info" for="activities">أنشطة</label>

                                    <input type="radio" class="btn-check" name="payment_type" id="other" value="أخرى">
                                    <label class="btn btn-outline-warning" for="other">أخرى</label>
                                </div>
                            </div>

                            <!-- Notes -->
                            <div class="col-12 mb-3">
                                <label for="note" class="form-label fw-bold">
                                    <i class="fas fa-sticky-note me-2"></i>ملاحظات
                                </label>
                                <textarea class="form-control" id="note" name="note" rows="3" 
                                          placeholder="أدخل أي ملاحظات حول هذه الدفعة..."></textarea>
                            </div>
                        </div>

                        <!-- Quick Amount Buttons -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label class="form-label fw-bold">مبالغ سريعة:</label>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setAmount(200)">200 ريال</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setAmount(300)">300 ريال</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setAmount(500)">500 ريال</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setAmount(1000)">1000 ريال</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-save 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('admin_payments') }}" class="btn btn-outline-danger">
                                        <i class="fas fa-times me-2"></i>
                                        إلغاء
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Payment Summary Preview -->
            <div class="card mt-4" id="paymentPreview" style="display: none;">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0">
                        <i class="fas fa-receipt me-2"></i>
                        معاينة الإيصال
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>اسم الطفل:</strong> <span id="previewChild">-</span></p>
                            <p><strong>المبلغ:</strong> <span id="previewAmount">-</span> ريال</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>تاريخ الدفع:</strong> <span id="previewDate">-</span></p>
                            <p><strong>نوع الدفعة:</strong> <span id="previewType">-</span></p>
                        </div>
                        <div class="col-12">
                            <p><strong>الملاحظات:</strong> <span id="previewNote">-</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Set today's date as default
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('payment_date').value = today;
    
    // Add event listeners for live preview
    const form = document.querySelector('form');
    const inputs = form.querySelectorAll('input, select, textarea');
    
    inputs.forEach(input => {
        input.addEventListener('change', updatePreview);
        input.addEventListener('input', updatePreview);
    });
    
    // Payment type radio buttons
    const paymentTypeRadios = document.querySelectorAll('input[name="payment_type"]');
    paymentTypeRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                document.getElementById('note').value = 'رسوم ' + this.value;
                updatePreview();
            }
        });
    });
});

function setAmount(amount) {
    document.getElementById('amount').value = amount;
    updatePreview();
}

function updatePreview() {
    const childSelect = document.getElementById('child_id');
    const amount = document.getElementById('amount').value;
    const date = document.getElementById('payment_date').value;
    const note = document.getElementById('note').value;
    const paymentType = document.querySelector('input[name="payment_type"]:checked');
    
    if (childSelect.value && amount && date) {
        document.getElementById('previewChild').textContent = childSelect.options[childSelect.selectedIndex].text;
        document.getElementById('previewAmount').textContent = amount;
        document.getElementById('previewDate').textContent = date;
        document.getElementById('previewType').textContent = paymentType ? paymentType.value : 'غير محدد';
        document.getElementById('previewNote').textContent = note || 'لا توجد ملاحظات';
        
        document.getElementById('paymentPreview').style.display = 'block';
    } else {
        document.getElementById('paymentPreview').style.display = 'none';
    }
}

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const childId = document.getElementById('child_id').value;
    const amount = document.getElementById('amount').value;
    const date = document.getElementById('payment_date').value;
    
    if (!childId) {
        e.preventDefault();
        alert('يرجى اختيار الطفل');
        document.getElementById('child_id').focus();
        return;
    }
    
    if (!amount || amount <= 0) {
        e.preventDefault();
        alert('يرجى إدخال مبلغ صحيح');
        document.getElementById('amount').focus();
        return;
    }
    
    if (!date) {
        e.preventDefault();
        alert('يرجى اختيار تاريخ الدفع');
        document.getElementById('payment_date').focus();
        return;
    }
});
</script>
{% endblock %}