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

{% block content %}
<style>
    .reports-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: var(--white);
        padding: 2rem 1rem;
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .reports-header h1 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .tab-buttons {
        max-width: 1200px;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .tab-btn {
        background: var(--white);
        border: 2px solid var(--primary);
        color: var(--primary);
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.85rem;
        transition: all 0.3s ease;
    }
    
    .tab-btn.active {
        background: var(--primary);
        color: var(--white);
    }
    
    .tab-btn:hover {
        background: var(--primary);
        color: var(--white);
    }
    
    .tab-content {
        display: none;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    .tab-content.active {
        display: block;
        animation: fadeInUp 0.3s ease;
    }
    
    .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 {
        overflow-x: auto;
        background: var(--white);
        border-radius: 1rem;
        padding: 0.5rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        margin-bottom: 2rem;
    }
    
    table {
        width: 100%;
        font-size: 0.8rem;
    }
    
    th {
        background: var(--primary);
        color: var(--white);
        padding: 0.7rem;
        text-align: left;
        font-weight: 600;
    }
    
    td {
        padding: 0.5rem 0.7rem;
        border-bottom: 1px solid var(--light-gray);
    }
    
    .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;
    }
    
    .no-results {
        text-align: center;
        padding: 2rem;
        background: var(--white);
        border-radius: 1rem;
        color: var(--gray);
    }
    
    .total-row {
        background: #FAFAFA;
        font-weight: 700;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @media (max-width: 768px) {
        th, td {
            font-size: 0.7rem;
            padding: 0.4rem;
        }
        
        .tab-btn {
            padding: 0.4rem 0.8rem;
            font-size: 0.75rem;
        }
        
        .search-input {
            width: 100%;
        }
        
        .search-box {
            justify-content: stretch;
        }
    }
</style>

<div class="reports-header">
    <h1><i class="fas fa-chart-bar"></i> Ripoti za {{ group.name }}</h1>
    <p>Muhtasari kamili wa michango na misaada</p>
</div>

<div class="tab-buttons">
    <button class="tab-btn active" onclick="showTab('contributions')"><i class="fas fa-receipt"></i> Michango</button>
    <button class="tab-btn" onclick="showTab('disbursements')"><i class="fas fa-gift"></i> Misaada</button>
    <button class="tab-btn" onclick="showTab('members')"><i class="fas fa-users"></i> Wanachama</button>
</div>

<!-- ==================== TAB 1: MICHANGO YOTE ==================== -->
<div id="tab-contributions" class="tab-content active">
    <div class="search-box">
        <input type="text" id="searchContributionReport" class="search-input" placeholder="🔍 Tafuta kwa jina au reference...">
    </div>
    <div class="table-container">
        {% if contributions %}
        <div style="overflow-x: auto;">
            <table id="contributionsReportTable">
                <thead>
                    <tr>
                        <th>Tarehe</th>
                        <th>Mwanachama</th>
                        <th>Kiasi (Tsh)</th>
                        <th>Reference</th>
                        <th>Aliyerekodi</th>
                        <th>Kitendo</th>
                    </tr>
                </thead>
                <tbody>
                    {% for c in contributions %}
                    <tr class="contribution-report-row">
                        <td>{{ c.payment_date|date:"d/m/Y" }}</td>
                        <td class="contrib-name">{{ c.member.full_name }}</td>
                        <td><strong>Tsh {{ c.amount|intcomma }}</strong></td>
                        <td class="contrib-ref">{{ c.reference_number }}</td>
                        <td>{{ c.recorded_by.get_full_name|default:c.recorded_by.phone_number }}</td>
                        <td class="action-icons">
                            <a href="{% url 'edit_contribution' group.id c.id %}" title="Hariri">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{% url 'delete_contribution' group.id c.id %}" class="delete" title="Futa" onclick="return confirm('Je, una uhakika unafuta mchango huu?')">
                                <i class="fas fa-trash-alt"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="no-results">
            <i class="fas fa-receipt" style="font-size: 2rem; color: var(--gray);"></i>
            <p>Hakuna michango bado.</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- ==================== TAB 2: MISAADA YOTE ==================== -->
<div id="tab-disbursements" class="tab-content">
    <div class="search-box">
        <input type="text" id="searchDisbursementReport" class="search-input" placeholder="🔍 Tafuta kwa jina la mpokeaji...">
    </div>
    <div class="table-container">
        {% if disbursements %}
        <div style="overflow-x: auto;">
            <table id="disbursementsReportTable">
                <thead>
                    <tr>
                        <th>Tarehe</th>
                        <th>Mpokeaji</th>
                        <th>Namba</th>
                        <th>Kiasi (Tsh)</th>
                        <th>Sababu</th>
                        <th>Aliyetoza</th>
                        <th>Kitendo</th>
                    </tr>
                </thead>
                <tbody>
                    {% for d in disbursements %}
                    <tr class="disbursement-report-row">
                        <td>{{ d.disbursement_date|date:"d/m/Y" }}</td>
                        <td class="disburse-name">{{ d.recipient_name }}</td>
                        <td>{{ d.recipient_phone|default:"-" }}</td>
                        <td><strong>Tsh {{ d.amount|intcomma }}</strong></td>
                        <td>{{ d.get_reason_display }}</td>
                        <td>{{ d.initiated_by.get_full_name|default:d.initiated_by.phone_number }}</td>
                        <td class="action-icons">
                            <a href="{% url 'edit_disbursement' group.id d.id %}" title="Hariri">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{% url 'delete_disbursement' group.id d.id %}" class="delete" title="Futa" onclick="return confirm('Je, una uhakika unafuta msaada huu?')">
                                <i class="fas fa-trash-alt"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="no-results">
            <i class="fas fa-gift" style="font-size: 2rem; color: var(--gray);"></i>
            <p>Hakuna misaada bado.</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- ==================== TAB 3: WANACHAMA NA MUHTASARI ==================== -->
<div id="tab-members" class="tab-content">
    <div class="search-box">
        <input type="text" id="searchMemberReport" class="search-input" placeholder="🔍 Tafuta kwa jina au namba...">
    </div>
    <div class="table-container">
        {% if members_summary %}
        <div style="overflow-x: auto;">
            <table id="membersReportTable">
                <thead>
                    <tr>
                        <th>Mwanachama</th>
                        <th>Namba</th>
                        <th>Jumla ya Michango</th>
                        <th>Misaada Aliyopokea</th>
                        <th>Kitendo</th>
                    </tr>
                </thead>
                <tbody>
                    {% for s in members_summary %}
                    <tr class="member-report-row">
                        <td class="member-name">{{ s.member.full_name }}</td>
                        <td class="member-phone">{{ s.member.phone_number }}</td>
                        <td>Tsh {{ s.total_contributed|intcomma|default:"0" }}</td>
                        <td>Tsh {{ s.total_received|intcomma|default:"0" }}</td>
                        <td class="action-icons">
                            <a href="{% url 'member_report' group.id s.member.id %}" title="Ripoti Kamili">
                                <i class="fas fa-file-alt"></i>
                            </a>
                            <a href="{% url 'edit_member' group.id s.member.id %}" title="Hariri">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{% url 'delete_member' group.id s.member.id %}" class="delete" title="Futa" onclick="return confirm('Je, una uhakika unamwondoa {{ s.member.full_name }}?')">
                                <i class="fas fa-trash-alt"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="no-results">
            <i class="fas fa-users" style="font-size: 2rem; color: var(--gray);"></i>
            <p>Hakuna wanachama bado.</p>
        </div>
        {% endif %}
    </div>
</div>

<script>
    // Tab switching function
    function showTab(tabName) {
        // Hide all tabs
        document.querySelectorAll('.tab-content').forEach(tab => {
            tab.classList.remove('active');
        });
        
        // Remove active class from all buttons
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        
        // Show selected tab
        document.getElementById(`tab-${tabName}`).classList.add('active');
        
        // Add active class to clicked button
        event.target.classList.add('active');
    }
    
    // SEARCH for Contributions Tab
    const searchContrib = document.getElementById('searchContributionReport');
    if (searchContrib) {
        searchContrib.addEventListener('keyup', function() {
            const filter = this.value.toLowerCase();
            const rows = document.querySelectorAll('#contributionsReportTable .contribution-report-row');
            
            rows.forEach(row => {
                const name = row.querySelector('.contrib-name')?.innerText.toLowerCase() || '';
                const ref = row.querySelector('.contrib-ref')?.innerText.toLowerCase() || '';
                
                if (name.includes(filter) || ref.includes(filter)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    }
    
    // SEARCH for Disbursements Tab
    const searchDisburse = document.getElementById('searchDisbursementReport');
    if (searchDisburse) {
        searchDisburse.addEventListener('keyup', function() {
            const filter = this.value.toLowerCase();
            const rows = document.querySelectorAll('#disbursementsReportTable .disbursement-report-row');
            
            rows.forEach(row => {
                const name = row.querySelector('.disburse-name')?.innerText.toLowerCase() || '';
                
                if (name.includes(filter)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    }
    
    // SEARCH for Members Tab
    const searchMember = document.getElementById('searchMemberReport');
    if (searchMember) {
        searchMember.addEventListener('keyup', function() {
            const filter = this.value.toLowerCase();
            const rows = document.querySelectorAll('#membersReportTable .member-report-row');
            
            rows.forEach(row => {
                const name = row.querySelector('.member-name')?.innerText.toLowerCase() || '';
                const phone = row.querySelector('.member-phone')?.innerText.toLowerCase() || '';
                
                if (name.includes(filter) || phone.includes(filter)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    }
</script>
{% endblock %}