{% extends "superadmin/base_superadmin.html" %}

{% block page_title %}Groups Management{% endblock %}
{% block page_description %}Manage organizations and groups{% endblock %}

{% block superadmin_content %}
<!-- Header with Add Button -->
<div class="flex justify-between items-center mb-8">
    <div>
        <h1 class="text-3xl font-bold text-gray-900">Groups Management</h1>
        <p class="text-gray-600 mt-1">Create and manage organizations with complete control</p>
    </div>
    <button onclick="openAddGroupModal()" 
            class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-3 px-6 rounded-xl flex items-center transition-all duration-200 shadow-lg hover:shadow-xl">
        <i class="fas fa-plus mr-2"></i>
        Add New Group
    </button>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-building text-emerald-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Total Groups</p>
                <p class="text-2xl font-bold text-gray-900">{{ groups|length }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-users text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Total Members</p>
                <p class="text-2xl font-bold text-gray-900">{{ total_members }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-check-circle text-green-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Active Groups</p>
                <p class="text-2xl font-bold text-gray-900">{{ groups|selectattr('is_active')|list|length }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-money-bill-wave text-purple-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Total Contributions</p>
                <p class="text-2xl font-bold text-gray-900">৳{{ "%.0f"|format(total_contributions) }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Groups Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">All Groups</h3>
        <p class="text-sm text-gray-500">Manage your organizations and their settings</p>
    </div>
    
    {% if groups %}
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Group Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Group Code</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Members</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Currency</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for group in groups %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-gradient-to-r from-emerald-500 to-blue-600 rounded-xl flex items-center justify-center">
                                <i class="fas fa-building text-white text-sm"></i>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-semibold text-gray-900">{{ group.name }}</div>
                                {% if group.description %}
                                <div class="text-xs text-gray-500">{{ group.description[:50] }}{% if group.description|length > 50 %}...{% endif %}</div>
                                {% else %}
                                <div class="text-xs text-gray-400">No description</div>
                                {% endif %}
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                            {{ group.group_code }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <span class="text-sm font-medium text-gray-900">{{ group.members|length }}</span>
                            <span class="text-xs text-gray-500 ml-1">members</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-800">
                            <i class="fas fa-coins mr-1"></i>
                            {{ group.currency_ref.code if group.currency_ref else 'BDT' }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if group.is_active %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                <i class="fas fa-check-circle mr-1"></i>
                                Active
                            </span>
                        {% else %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                <i class="fas fa-times-circle mr-1"></i>
                                Inactive
                            </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center space-x-2">
                            <a href="{{ url_for('group_admin_dashboard', group_code=group.group_code) }}" 
                               class="text-blue-600 hover:text-blue-900 px-2 py-1 rounded-md text-xs border border-blue-200 hover:bg-blue-50 transition-colors duration-200">
                                <i class="fas fa-eye mr-1"></i>View
                            </a>
                            <button onclick="openEditGroupModal({{ group.id }}, '{{ group.name }}', '{{ group.description or '' }}', '{{ group.group_code }}', {{ group.is_active|lower }})" 
                                    class="text-emerald-600 hover:text-emerald-900 px-2 py-1 rounded-md text-xs border border-emerald-200 hover:bg-emerald-50 transition-colors duration-200">
                                <i class="fas fa-edit mr-1"></i>Edit
                            </button>
                            <button onclick="toggleGroupStatus({{ group.id }}, '{{ group.name }}', {{ group.is_active|lower }})" 
                                    class="{% if group.is_active %}text-red-600 hover:text-red-900 border-red-200 hover:bg-red-50{% else %}text-green-600 hover:text-green-900 border-green-200 hover:bg-green-50{% endif %} px-2 py-1 rounded-md text-xs border transition-colors duration-200">
                                {% if group.is_active %}
                                    <i class="fas fa-pause mr-1"></i>Deactivate
                                {% else %}
                                    <i class="fas fa-play mr-1"></i>Activate
                                {% endif %}
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="px-6 py-16 text-center">
        <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <i class="fas fa-building text-gray-400 text-3xl"></i>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2">No groups found</h3>
        <p class="text-gray-500 mb-8 max-w-md mx-auto">Get started by creating your first organization. You can manage members, contributions, and more.</p>
        <button onclick="openAddGroupModal()" 
                class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-3 px-6 rounded-xl inline-flex items-center transition-all duration-200">
            <i class="fas fa-plus mr-2"></i>
            Create First Group
        </button>
    </div>
    {% endif %}
</div>

<!-- Add Group Modal -->
<div id="addGroupModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-xl bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-semibold text-gray-900">Add New Group</h3>
                <button onclick="closeAddGroupModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form method="POST" action="{{ url_for('superadmin_add_group') }}">
                <div class="mb-4">
                    <label for="group_name" class="block text-sm font-medium text-gray-700 mb-2">
                        Group Name
                    </label>
                    <input type="text" id="group_name" name="group_name" required 
                           class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                           placeholder="Enter group name">
                </div>
                
                <div class="mb-4">
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                        Description
                    </label>
                    <textarea id="description" name="description" rows="3" 
                              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                              placeholder="Enter group description"></textarea>
                </div>
                
                <div class="mb-6">
                    <label for="admin_username" class="block text-sm font-medium text-gray-700 mb-2">
                        Group Admin Username
                    </label>
                    <input type="text" id="admin_username" name="admin_username" required 
                           class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                           placeholder="Enter admin username">
                </div>
                
                <div class="flex items-center space-x-3">
                    <button type="submit" 
                            class="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200">
                        <i class="fas fa-plus mr-2"></i>
                        Create Group
                    </button>
                    <button type="button" onclick="closeAddGroupModal()" 
                            class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium py-2 px-4 rounded-md transition-colors duration-200">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Group Modal -->
<div id="editGroupModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-xl bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-semibold text-gray-900">Edit Group</h3>
                <button onclick="closeEditGroupModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="editGroupForm" method="POST" action="">
                <div class="mb-4">
                    <label for="edit_group_name" class="block text-sm font-medium text-gray-700 mb-2">
                        Group Name
                    </label>
                    <input type="text" id="edit_group_name" name="group_name" required 
                           class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
                </div>
                
                <div class="mb-4">
                    <label for="edit_description" class="block text-sm font-medium text-gray-700 mb-2">
                        Description
                    </label>
                    <textarea id="edit_description" name="description" rows="3" 
                              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"></textarea>
                </div>
                
                <div class="mb-6">
                    <label class="flex items-center">
                        <input type="checkbox" id="edit_is_active" name="is_active" class="mr-2">
                        <span class="text-sm font-medium text-gray-700">Group is active</span>
                    </label>
                </div>
                
                <div class="flex items-center space-x-3">
                    <button type="submit" 
                            class="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200">
                        <i class="fas fa-save mr-2"></i>
                        Update Group
                    </button>
                    <button type="button" onclick="closeEditGroupModal()" 
                            class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium py-2 px-4 rounded-md transition-colors duration-200">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Add Group Modal Functions
function openAddGroupModal() {
    document.getElementById('addGroupModal').classList.remove('hidden');
}

function closeAddGroupModal() {
    document.getElementById('addGroupModal').classList.add('hidden');
}

// Edit Group Modal Functions
function openEditGroupModal(groupId, name, description, groupCode, isActive) {
    document.getElementById('editGroupForm').action = `/superadmin/groups/edit/${groupId}`;
    document.getElementById('edit_group_name').value = name;
    document.getElementById('edit_description').value = description;
    document.getElementById('edit_is_active').checked = isActive;
    document.getElementById('editGroupModal').classList.remove('hidden');
}

function closeEditGroupModal() {
    document.getElementById('editGroupModal').classList.add('hidden');
}

// Toggle Group Status
function toggleGroupStatus(groupId, groupName, isActive) {
    const action = isActive ? 'deactivate' : 'activate';
    const confirmMessage = `Are you sure you want to ${action} the group "${groupName}"?`;
    
    if (confirm(confirmMessage)) {
        window.location.href = `/superadmin/groups/toggle-status/${groupId}`;
    }
}

// Close modals when clicking outside
document.getElementById('addGroupModal').addEventListener('click', function(event) {
    if (event.target === this) {
        closeAddGroupModal();
    }
});

document.getElementById('editGroupModal').addEventListener('click', function(event) {
    if (event.target === this) {
        closeEditGroupModal();
    }
});
</script>
{% endblock %}