{% 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_add_payment') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>
                        إضافة دفعة جديدة
                    </a>
                </div>
            </div>

            <!-- Search Box -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <input type="text" id="searchInput" class="form-control search-box" 
                           placeholder="البحث في المدفوعات..." data-table="paymentsTable">
                </div>
            </div>

            <!-- Payments Table -->
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="paymentsTable">
                            <thead>
                                <tr>
                                    <th>رقم الدفعة</th>
                                    <th>اسم الطفل</th>
                                    <th>المبلغ</th>
                                    <th>تاريخ الدفع</th>
                                    <th>ملاحظات</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payment in payments %}
                                <tr>
                                    <td>
                                        <span class="badge bg-primary">#{{ payment.id }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar bg-success text-white rounded-circle me-2 d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;">
                                                {{ payment.child_name[0] }}
                                            </div>
                                            <strong>{{ payment.child_name }}</strong>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="fw-bold text-success">{{ payment.amount_paid }} ريال</span>
                                    </td>
                                    <td>{{ payment.payment_date }}</td>
                                    <td>{{ payment.note or 'لا توجد ملاحظات' }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-sm btn-outline-primary" 
                                                    onclick="viewPayment({{ payment.id }})" title="عرض التفاصيل">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-success" 
                                                    onclick="printReceipt({{ payment.id }})" title="طباعة إيصال">
                                                <i class="fas fa-print"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-danger" 
                                                    onclick="deletePayment({{ payment.id }})" title="حذف">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="6" class="text-center py-4">
                                        <i class="fas fa-money-bill-wave fa-3x text-muted mb-3"></i>
                                        <p class="text-muted">لا توجد مدفوعات مسجلة حالياً</p>
                                        <a href="{{ url_for('admin_add_payment') }}" class="btn btn-primary">
                                            إضافة أول دفعة
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Financial Summary -->
            {% if payments %}
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="fas fa-chart-pie me-2"></i>
                                ملخص مالي
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-3">
                                    <div class="p-3">
                                        <h4 class="text-success">{{ payments|sum(attribute='amount_paid') }} ريال</h4>
                                        <small class="text-muted">إجمالي المدفوعات</small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="p-3">
                                        <h4 class="text-primary">{{ payments|length }}</h4>
                                        <small class="text-muted">عدد الدفعات</small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="p-3">
                                        <h4 class="text-info">{{ (payments|sum(attribute='amount_paid') / payments|length)|round(2) if payments|length > 0 else 0 }} ريال</h4>
                                        <small class="text-muted">متوسط الدفعة</small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="p-3">
                                        <h4 class="text-warning">{{ payments|map(attribute='child_id')|unique|list|length }}</h4>
                                        <small class="text-muted">أطفال دافعين</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Payment Details Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1">
    <div class="modal-dialog">
        <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="paymentModalBody">
                <!-- Content will be loaded here -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function viewPayment(paymentId) {
    document.getElementById('paymentModalBody').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('paymentModal'));
    modal.show();
    
    // Simulate loading payment details
    setTimeout(() => {
        document.getElementById('paymentModalBody').innerHTML = `
            <div class="card border-0">
                <div class="card-body">
                    <div class="text-center mb-4">
                        <i class="fas fa-receipt fa-3x text-success mb-3"></i>
                        <h5 class="fw-bold">إيصال دفع رقم #${paymentId}</h5>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <p><strong>اسم الطفل:</strong> اسم الطفل</p>
                            <p><strong>المبلغ:</strong> 500 ريال</p>
                        </div>
                        <div class="col-6">
                            <p><strong>تاريخ الدفع:</strong> 2024-01-15</p>
                            <p><strong>الملاحظات:</strong> رسوم شهرية</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }, 1000);
}

function printReceipt(paymentId) {
    alert('سيتم طباعة إيصال الدفعة رقم: ' + paymentId);
}

function deletePayment(paymentId) {
    if (confirm('هل أنت متأكد من حذف هذه الدفعة؟')) {
        alert('تم حذف الدفعة رقم: ' + paymentId);
    }
}
</script>
{% endblock %}