{% extends "base.html" %}

{% block content %}
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold text-gray-900">Pending Approvals</h1>
        <div class="text-right">
            <span class="badge badge-primary">{{ pending_count }} Pending</span>
        </div>
    </div>

    <!-- Approval Requests -->
    <div class="bg-white p-6 rounded-lg shadow-lg">
        {% if not approval_requests %}
            <div class="text-center text-gray-500 py-8">
                No pending approval requests
            </div>
        {% else %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Created At</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Assign Teacher</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for request in approval_requests %}
                        <tr id="request-{{ request.id }}">
                            <td class="px-6 py-4">{{ request.username }}</td>
                            <td class="px-6 py-4">{{ request.email }}</td>
                            <td class="px-6 py-4">{{ request.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                            <td class="px-6 py-4">
                                {% if teachers %}
                                    <select class="select select-bordered w-full max-w-xs" 
                                            id="teacher-{{ request.id }}"
                                            onchange="updateTeacher('{{ request.id }}')">
                                        <option value="">Select Teacher</option>
                                        {% for teacher in teachers %}
                                        <option value="{{ teacher.id }}">{{ teacher.username }}</option>
                                        {% endfor %}
                                    </select>
                                {% else %}
                                    <div class="text-red-500">No teachers available</div>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4">
                                <button onclick="approveRequest('{{ request.id }}')" 
                                        class="text-green-600 hover:text-green-900">Approve</button>
                                <button onclick="rejectRequest('{{ request.id }}')" 
                                        class="ml-4 text-red-600 hover:text-red-900">Reject</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
</div>

{% block extra_js %}
<script>
    async function updateTeacher(requestId) {
        const teacherSelect = document.getElementById(`teacher-${requestId}`);
        const teacherId = teacherSelect.value;
        
        if (!teacherId) {
            alert('Please select a teacher first');
            return;
        }

        try {
            const response = await fetch(`/admin/assign_teacher/${requestId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCsrfToken()
                },
                body: JSON.stringify({ teacher_id: teacherId })
            });

            if (!response.ok) {
                throw new Error('Failed to update teacher assignment');
            }

            alert('Teacher assigned successfully');
        } catch (error) {
            console.error('Error:', error);
            alert(error.message);
        }
    }

    async function approveRequest(requestId) {
        const teacherSelect = document.getElementById(`teacher-${requestId}`);
        if (!teacherSelect.value) {
            alert('Please assign a teacher before approving the request');
            return;
        }

        try {
            const response = await fetch(`/admin/approve/${requestId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCsrfToken()
                }
            });

            if (!response.ok) {
                throw new Error('Failed to approve request');
            }

            // Remove the row from the table
            document.getElementById(`request-${requestId}`).remove();
            alert('Request approved successfully');
        } catch (error) {
            console.error('Error:', error);
            alert(error.message);
        }
    }

    async function rejectRequest(requestId) {
        try {
            const response = await fetch(`/admin/reject/${requestId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCsrfToken()
                }
            });

            if (!response.ok) {
                throw new Error('Failed to reject request');
            }

            // Remove the row from the table
            document.getElementById(`request-${requestId}`).remove();
            alert('Request rejected successfully');
        } catch (error) {
            console.error('Error:', error);
            alert(error.message);
        }
    }
</script>
{% endblock %}
{% endblock %}