{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-history me-2"></i>Purchase History</h2>
    <div class="d-flex gap-2">
        <input type="text" class="form-control" id="purchaseSearch" placeholder="Search by reseller, product, or key..." onkeyup="searchPurchases()" style="width: 300px;">
        <button class="btn btn-outline-secondary" onclick="exportPurchases()">
            <i class="fas fa-download"></i> Export
        </button>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <i class="fas fa-shopping-cart fa-2x me-3"></i>
                    <div>
                        <h3 class="mb-0">{{ stats[0] or 0 }}</h3>
                        <small>Total Sales</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <i class="fas fa-dollar-sign fa-2x me-3"></i>
                    <div>
                        <h3 class="mb-0">${{ "%.2f"|format(stats[1] or 0) }}</h3>
                        <small>Total Revenue</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <i class="fas fa-users fa-2x me-3"></i>
                    <div>
                        <h3 class="mb-0">{{ stats[2] or 0 }}</h3>
                        <small>Active Buyers</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Recent Purchases</h5>
        <small class="text-muted">Showing last 500 transactions</small>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Date & Time</th>
                        <th>Reseller</th>
                        <th>Product</th>
                        <th>Category</th>
                        <th>Key</th>
                        <th>Price</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="purchaseTableBody">
                    {% for purchase in purchases %}
                    <tr>
                        <td>
                            <div>{{ purchase[2][:16] if purchase[2] else 'N/A' }}</div>
                            <small class="text-muted">{{ purchase[2][16:] if purchase[2] and purchase[2]|length > 16 else '' }}</small>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="fas fa-user fa-sm me-2 text-primary"></i>
                                <span class="fw-bold">{{ purchase[3] }}</span>
                            </div>
                        </td>
                        <td>
                            <div>
                                <strong>{{ purchase[5] }}</strong>
                                <br><small class="text-muted">{{ purchase[7] }}</small>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-secondary">{{ purchase[8] }}</span>
                        </td>
                        <td>
                            <code class="bg-light px-2 py-1 rounded">{{ purchase[1][:20] }}{% if purchase[1]|length > 20 %}...{% endif %}</code>
                        </td>
                        <td>
                            <span class="text-success fw-bold">${{ "%.2f"|format(purchase[6]) }}</span>
                        </td>
                        <td>
                            <a href="{{ url_for('resellers') }}" class="btn btn-sm btn-outline-primary" title="View Reseller">
                                <i class="fas fa-user"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                    {% if not purchases %}
                    <tr>
                        <td colspan="7" class="text-center py-4 text-muted">
                            <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                            No purchases found
                        </td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
function searchPurchases() {
    const input = document.getElementById('purchaseSearch');
    const filter = input.value.toLowerCase();
    const tbody = document.getElementById('purchaseTableBody');
    const rows = tbody.getElementsByTagName('tr');

    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const cells = row.getElementsByTagName('td');
        let found = false;
        
        for (let j = 0; j < cells.length; j++) {
            const cellText = cells[j].textContent || cells[j].innerText;
            if (cellText.toLowerCase().indexOf(filter) > -1) {
                found = true;
                break;
            }
        }
        
        row.style.display = found ? '' : 'none';
    }
}

function exportPurchases() {
    // Simple CSV export
    const table = document.querySelector('.table');
    const rows = table.querySelectorAll('tr');
    let csv = [];
    
    for (let i = 0; i < rows.length - 1; i++) { // -1 to skip empty row if exists
        const row = rows[i];
        const cols = row.querySelectorAll('td, th');
        let csvRow = [];
        
        for (let j = 0; j < cols.length - 1; j++) { // -1 to skip actions column
            csvRow.push('"' + cols[j].textContent.replace(/"/g, '""').trim() + '"');
        }
        csv.push(csvRow.join(','));
    }
    
    const csvContent = csv.join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'purchase_history_' + new Date().toISOString().split('T')[0] + '.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
}
</script>
{% endblock %}