{% extends 'base.html' %}
{% load humanize %}
{% block title %}{{ group.name }} - Simamia{% endblock %}

{% block content %}
<style>
    .group-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: var(--white);
        padding: 2rem 1rem;
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .group-header h1 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .group-header .m-koba {
        background: rgba(255,255,255,0.2);
        display: inline-block;
        padding: 0.3rem 0.8rem;
        border-radius: 2rem;
        font-size: 0.8rem;
        margin-top: 0.5rem;
    }
    
    .stats-grid {
        max-width: 1200px;
        margin: -1.5rem auto 2rem;
        padding: 0 1rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 1rem;
    }
    
    .stat-card {
        background: var(--white);
        padding: 1rem;
        border-radius: 1rem;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .stat-card i {
        font-size: 1.5rem;
        color: var(--primary);
    }
    
    .stat-card .value {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--secondary);
    }
    
    .stat-card .label {
        font-size: 0.65rem;
        color: var(--gray);
    }
    
    .action-buttons {
        max-width: 1200px;
        margin: 0 auto 2rem;
        padding: 0 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
        justify-content: center;
    }
    
    .action-btn {
        background: var(--white);
        border: 2px solid var(--primary);
        color: var(--primary);
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .action-btn:hover {
        background: var(--primary);
        color: var(--white);
        transform: translateY(-2px);
    }
    
    .section-title {
        max-width: 1200px;
        margin: 2rem auto 1rem;
        padding: 0 1rem;
        font-size: 1.1rem;
        color: var(--secondary);
        border-left: 4px solid var(--primary);
        padding-left: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .section-title a {
        font-size: 0.75rem;
        background: var(--primary);
        color: var(--white);
        padding: 0.3rem 0.8rem;
        border-radius: 2rem;
        text-decoration: none;
    }
    
    /* Search box */
    .search-box {
        max-width: 1200px;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        display: flex;
        justify-content: flex-end;
    }
    
    .search-input {
        padding: 0.5rem 1rem;
        border: 2px solid var(--light-gray);
        border-radius: 2rem;
        font-size: 0.8rem;
        width: 250px;
        font-family: 'Poppins', sans-serif;
    }
    
    .search-input:focus {
        outline: none;
        border-color: var(--primary);
    }
    
    .table-container {
        max-width: 1200px;
        margin: 0 auto 2rem;
        padding: 0 1rem;
        overflow-x: auto;
    }
    
    table {
        width: 100%;
        background: var(--white);
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    th {
        background: var(--primary);
        color: var(--white);
        padding: 0.7rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.8rem;
    }
    
    td {
        padding: 0.5rem 0.7rem;
        border-bottom: 1px solid var(--light-gray);
        font-size: 0.8rem;
    }
    
    .action-icons {
        display: flex;
        gap: 0.5rem;
        white-space: nowrap;
    }
    
    .action-icons a {
        color: var(--gray);
        text-decoration: none;
        transition: color 0.2s;
    }
    
    .action-icons a:hover {
        color: var(--primary);
    }
    
    .action-icons .delete {
        color: var(--danger);
    }
    
    .action-icons .delete:hover {
        color: #c82333;
    }
    
    .leaders-list {
        max-width: 1200px;
        margin: 0 auto 2rem;
        padding: 0 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
    }
    
    .leader-badge {
        background: var(--white);
        padding: 0.4rem 0.8rem;
        border-radius: 2rem;
        border-left: 3px solid var(--primary);
        font-size: 0.8rem;
    }
    
    .no-results {
        text-align: center;
        padding: 2rem;
        background: var(--white);
        border-radius: 1rem;
        color: var(--gray);
    }
    
    /* Pagination styles */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }
    
    .pagination button {
        background: var(--white);
        border: 2px solid var(--primary);
        color: var(--primary);
        padding: 0.4rem 0.8rem;
        border-radius: 0.5rem;
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .pagination button:hover:not(:disabled) {
        background: var(--primary);
        color: var(--white);
        transform: translateY(-2px);
    }
    
    .pagination button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .pagination .active-page {
        background: var(--primary);
        color: var(--white);
    }
    
    .page-numbers {
        display: flex;
        gap: 0.3rem;
        flex-wrap: wrap;
    }
    
    .page-btn {
        min-width: 35px;
    }
    
    .loading {
        text-align: center;
        padding: 1rem;
        color: var(--primary);
        font-size: 0.8rem;
    }
    
    @media (max-width: 768px) {
        th, td {
            font-size: 0.7rem;
            padding: 0.4rem;
        }
        
        .action-btn {
            padding: 0.4rem 0.8rem;
            font-size: 0.7rem;
        }
        
        .section-title {
            font-size: 1rem;
        }
        
        .search-input {
            width: 100%;
        }
        
        .search-box {
            justify-content: stretch;
        }
        
        .pagination button {
            padding: 0.3rem 0.6rem;
            font-size: 0.7rem;
        }
    }
</style>

<div class="group-header">
    <h1><i class="fas fa-users"></i> {{ group.name }}</h1>
    {% if group.m_koba_number %}
    <div class="m-koba"><i class="fas fa-mobile-alt"></i> M-Koba: {{ group.m_koba_number }}</div>
    {% endif %}
    <p><i class="fas fa-user-tie"></i> Wewe ni: {{ group_leader.position.name }}</p>
</div>

<div class="stats-grid">
    <div class="stat-card">
        <i class="fas fa-users"></i>
        <div class="value">{{ total_members }}</div>
        <div class="label">Wanachama</div>
    </div>
    <div class="stat-card">
        <i class="fas fa-money-bill-wave"></i>
        <div class="value">Tsh {{ total_contributions|intcomma|default:"0" }}</div>
        <div class="label">Michango Yote</div>
    </div>
    <div class="stat-card">
        <i class="fas fa-hand-holding-heart"></i>
        <div class="value">Tsh {{ total_disbursements|intcomma|default:"0" }}</div>
        <div class="label">Misaada Iliyotolewa</div>
    </div>
    <div class="stat-card">
        <i class="fas fa-coins"></i>
        <div class="value">Tsh {{ current_balance|intcomma|default:"0" }}</div>
        <div class="label">Salio la Sasa</div>
    </div>
</div>

<div class="action-buttons">
    <a href="{% url 'add_member' group.id %}" class="action-btn"><i class="fas fa-user-plus"></i> Mwanachama</a>
    <a href="{% url 'record_contribution' group.id %}" class="action-btn"><i class="fas fa-receipt"></i> Rekodi Mchango</a>
    <a href="{% url 'add_disbursement' group.id %}" class="action-btn"><i class="fas fa-gift"></i> Toa Msaada</a>
    {% if group_leader.position.can_add_leaders %}
    <a href="{% url 'add_leader' group.id %}" class="action-btn"><i class="fas fa-user-tie"></i> Ongeza Kiongozi</a>
    {% endif %}
    <a href="{% url 'group_reports' group.id %}" class="action-btn"><i class="fas fa-chart-bar"></i> Ripoti</a>
</div>

<div class="section-title">
    <span><i class="fas fa-users"></i> Viongozi wa Kikundi</span>
</div>
<div class="leaders-list">
    {% for gl in group_leaders %}
    <div class="leader-badge">
        <i class="fas fa-user-check"></i> {{ gl.leader.get_full_name|default:gl.leader.phone_number }}
        <small>({{ gl.position.name }})</small>
        {% if group_leader.position.can_reset_passwords and gl.leader != user %}
        <a href="{% url 'reset_leader_password' group.id gl.leader.id %}" style="color: var(--primary); margin-left: 0.3rem;" onclick="return confirm('Badilisha password ya kiongozi huyu?')">
            <i class="fas fa-key"></i>
        </a>
        {% endif %}
    </div>
    {% endfor %}
</div>

<!-- ==================== MICHANGO TABLE NA SEARCH ==================== -->
<div class="section-title">
    <span><i class="fas fa-history"></i> Michango ya Hivi Karibuni</span>
    <a href="{% url 'record_contribution' group.id %}"><i class="fas fa-plus"></i> Rekodi</a>
</div>
<div class="search-box">
    <input type="text" id="searchContribution" class="search-input" placeholder="🔍 Tafuta kwa jina au reference...">
</div>
<div class="table-container">
    <div id="contributionsContainer">
        <div style="overflow-x: auto;">
            <table id="contributionsTable">
                <thead>
                    <tr>
                        <th>Tarehe</th>
                        <th>Mwanachama</th>
                        <th>Kiasi</th>
                        <th>Reference</th>
                        <th>Kitendo</th>
                    </tr>
                </thead>
                <tbody id="contributionsTableBody">
                    <!-- Contributions will be loaded here via AJAX -->
                </tbody>
            </table>
        </div>
        <div id="contributionsPagination"></div>
    </div>
</div>

<!-- ==================== WANACHAMA TABLE NA SEARCH ==================== -->
<div class="section-title">
    <span><i class="fas fa-list"></i> Wanachama</span>
    <a href="{% url 'add_member' group.id %}"><i class="fas fa-plus"></i> Ongeza</a>
</div>
<div class="search-box">
    <input type="text" id="searchMember" class="search-input" placeholder="🔍 Tafuta kwa jina au namba...">
</div>
<div class="table-container">
    <div id="membersContainer">
        <div style="overflow-x: auto;">
            <table id="membersTable">
                <thead>
                    <tr>
                        <th>Jina</th>
                        <th>Namba</th>
                        <th>PIN</th>
                        <th>Alijiunga</th>
                        <th>Tuma Link</th>
                        <th>Kitendo</th>
                    </tr>
                </thead>
                <tbody id="membersTableBody">
                    <!-- Members will be loaded here via AJAX -->
                </tbody>
            </table>
        </div>
        <div id="membersPagination"></div>
    </div>
</div>

<script>
    // Global variables
    let currentContributionsPage = 1;
    let currentMembersPage = 1;
    let contributionsSearchTerm = '';
    let membersSearchTerm = '';
    
    // Load contributions on page load
    function loadContributions(page = 1, searchTerm = '') {
        currentContributionsPage = page;
        contributionsSearchTerm = searchTerm;
        
        fetch(`/groups/{{ group.id }}/contributions-ajax/?page=${page}&per_page=20&search=${encodeURIComponent(searchTerm)}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            updateContributionsTable(data.data);
            updateContributionsPagination(data.pagination);
        })
        .catch(error => console.error('Error loading contributions:', error));
    }
    
    function updateContributionsTable(contributions) {
    const tbody = document.getElementById('contributionsTableBody');
    if (!tbody) return;
    
    if (!contributions || contributions.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="5" class="no-results">
                    <i class="fas fa-receipt" style="font-size: 2rem; color: var(--gray);"></i>
                    <p>Hakuna michango inayolingana na utafutaji wako.</p>
                </td>
            </tr>
        `;
        return;
    }
    
    tbody.innerHTML = contributions.map(c => `
        <tr class="contribution-row">
            <td>${new Date(c.payment_date).toLocaleDateString('en-GB')}</td>
            <td class="contrib-member">${escapeHtml(c.member_name)}</td>
            <td>
                <strong>Tsh ${parseInt(c.amount).toLocaleString()}</strong>
                ${c.period_text ? `<br><small style="color: var(--primary);">${escapeHtml(c.period_text)}</small>` : ''}
            </td>
            <td class="contrib-ref"><code>${escapeHtml(c.reference_number)}</code></td>
            <td class="action-icons">
                <a href="/group/{{ group.id }}/contribution/${c.id}/edit/" title="Hariri">
                    <i class="fas fa-edit"></i>
                </a>
                <a href="/group/{{ group.id }}/contribution/${c.id}/delete/" class="delete" title="Futa" onclick="return confirm('Je, una uhakika unafuta mchango huu?')">
                    <i class="fas fa-trash-alt"></i>
                </a>
            </td>
        </table>
    `).join('');
}

// Add escapeHtml function at the end of your script
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
    
    function updateContributionsPagination(pagination) {
        const container = document.getElementById('contributionsPagination');
        if (!container) return;
        
        if (pagination.total_pages <= 1) {
            container.innerHTML = '';
            return;
        }
        
        let paginationHtml = '<div class="pagination">';
        
        // Previous button
        paginationHtml += `
            <button onclick="loadContributions(${pagination.current_page - 1}, '${contributionsSearchTerm}')" 
                    ${pagination.has_previous ? '' : 'disabled'}>
                <i class="fas fa-chevron-left"></i> Awali
            </button>
        `;
        
        // Page numbers
        paginationHtml += '<div class="page-numbers">';
        const startPage = Math.max(1, pagination.current_page - 2);
        const endPage = Math.min(pagination.total_pages, pagination.current_page + 2);
        
        if (startPage > 1) {
            paginationHtml += `<button class="page-btn" onclick="loadContributions(1, '${contributionsSearchTerm}')">1</button>`;
            if (startPage > 2) paginationHtml += `<span style="padding: 0 0.3rem;">...</span>`;
        }
        
        for (let i = startPage; i <= endPage; i++) {
            paginationHtml += `
                <button class="page-btn ${i === pagination.current_page ? 'active-page' : ''}" 
                        onclick="loadContributions(${i}, '${contributionsSearchTerm}')">
                    ${i}
                </button>
            `;
        }
        
        if (endPage < pagination.total_pages) {
            if (endPage < pagination.total_pages - 1) paginationHtml += `<span style="padding: 0 0.3rem;">...</span>`;
            paginationHtml += `<button class="page-btn" onclick="loadContributions(${pagination.total_pages}, '${contributionsSearchTerm}')">${pagination.total_pages}</button>`;
        }
        
        paginationHtml += '</div>';
        
        // Next button
        paginationHtml += `
            <button onclick="loadContributions(${pagination.current_page + 1}, '${contributionsSearchTerm}')" 
                    ${pagination.has_next ? '' : 'disabled'}>
                Inayofuata <i class="fas fa-chevron-right"></i>
            </button>
        `;
        
        paginationHtml += '</div>';
        container.innerHTML = paginationHtml;
    }
    
    // Load members on page load
    function loadMembers(page = 1, searchTerm = '') {
        currentMembersPage = page;
        membersSearchTerm = searchTerm;
        
        fetch(`/groups/{{ group.id }}/members-ajax/?page=${page}&per_page=15&search=${encodeURIComponent(searchTerm)}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            updateMembersTable(data.data);
            updateMembersPagination(data.pagination);
        })
        .catch(error => console.error('Error loading members:', error));
    }
    
    function updateMembersTable(members) {
    const tbody = document.getElementById('membersTableBody');
    if (!tbody) return;
    
    if (members.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="6" class="no-results">
                    <i class="fas fa-user-friends" style="font-size: 2rem; color: var(--gray);"></i>
                    <p>Hakuna wanachama wanaolingana na utafutaji wako.</p>
                </td>
            </tr>
        `;
        return;
    }
    
    tbody.innerHTML = members.map(m => {
        // Create WhatsApp share link for profile
        const shareText = `*TAARIFA KWA MWANACHAMA WA {{ group.name }}*\n\nHabari ${m.full_name},\n\nTafadhali bonyeza link hii kujaza profaili yako ili wanachama wenzako wakufahamu vizuri:\n\n${m.profile_link}\n\nAsante!`;
        const whatsappLink = `https://wa.me/${m.phone_number}?text=${encodeURIComponent(shareText)}`;
        
        return `
            <tr class="member-row">
                <td class="member-name">${escapeHtml(m.full_name)}</td>
                <td class="member-phone">${escapeHtml(m.phone_number)}</td>
                <td><code>${escapeHtml(m.secret_pin)}</code></td>
                <td>${new Date(m.joined_at).toLocaleDateString('en-GB')}</td>
                <td>
                    <a href="${whatsappLink}" target="_blank" class="whatsapp-share-btn" style="background: #25D366; color: white; padding: 0.3rem 0.6rem; border-radius: 2rem; text-decoration: none; font-size: 0.7rem; display: inline-flex; align-items: center; gap: 0.3rem;">
                        <i class="fab fa-whatsapp"></i> Tuma Link
                    </a>
                </td>
                <td class="action-icons">
                    <a href="/group/{{ group.id }}/member/${m.id}/edit/" title="Hariri">
                        <i class="fas fa-edit"></i>
                    </a>
                    <a href="/group/{{ group.id }}/member/${m.id}/report/" title="Ripoti">
                        <i class="fas fa-file-alt"></i>
                    </a>
                    <a href="/group/{{ group.id }}/member/${m.id}/delete/" class="delete" title="Futa" onclick="return confirm('Je, una uhakika unamwondoa ${escapeHtml(m.full_name)}?')">
                        <i class="fas fa-trash-alt"></i>
                    </a>
                </td>
            </tr>
        `;
    }).join('');
}
    
    function updateMembersPagination(pagination) {
        const container = document.getElementById('membersPagination');
        if (!container) return;
        
        if (pagination.total_pages <= 1) {
            container.innerHTML = '';
            return;
        }
        
        let paginationHtml = '<div class="pagination">';
        
        // Previous button
        paginationHtml += `
            <button onclick="loadMembers(${pagination.current_page - 1}, '${membersSearchTerm}')" 
                    ${pagination.has_previous ? '' : 'disabled'}>
                <i class="fas fa-chevron-left"></i> Awali
            </button>
        `;
        
        // Page numbers
        paginationHtml += '<div class="page-numbers">';
        const startPage = Math.max(1, pagination.current_page - 2);
        const endPage = Math.min(pagination.total_pages, pagination.current_page + 2);
        
        if (startPage > 1) {
            paginationHtml += `<button class="page-btn" onclick="loadMembers(1, '${membersSearchTerm}')">1</button>`;
            if (startPage > 2) paginationHtml += `<span style="padding: 0 0.3rem;">...</span>`;
        }
        
        for (let i = startPage; i <= endPage; i++) {
            paginationHtml += `
                <button class="page-btn ${i === pagination.current_page ? 'active-page' : ''}" 
                        onclick="loadMembers(${i}, '${membersSearchTerm}')">
                    ${i}
                </button>
            `;
        }
        
        if (endPage < pagination.total_pages) {
            if (endPage < pagination.total_pages - 1) paginationHtml += `<span style="padding: 0 0.3rem;">...</span>`;
            paginationHtml += `<button class="page-btn" onclick="loadMembers(${pagination.total_pages}, '${membersSearchTerm}')">${pagination.total_pages}</button>`;
        }
        
        paginationHtml += '</div>';
        
        // Next button
        paginationHtml += `
            <button onclick="loadMembers(${pagination.current_page + 1}, '${membersSearchTerm}')" 
                    ${pagination.has_next ? '' : 'disabled'}>
                Inayofuata <i class="fas fa-chevron-right"></i>
            </button>
        `;
        
        paginationHtml += '</div>';
        container.innerHTML = paginationHtml;
    }
    
    // Search functionality
    document.getElementById('searchContribution')?.addEventListener('keyup', function(e) {
        loadContributions(1, this.value);
    });
    
    document.getElementById('searchMember')?.addEventListener('keyup', function(e) {
        loadMembers(1, this.value);
    });
    
    // Load initial data
    loadContributions(1, '');
    loadMembers(1, '');
</script>
{% endblock %}