<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Subscription Reports</h2>
    
    <div class="btn-group">
        <a href="?filter=all" class="btn btn-outline-primary {{#if (eq filter 'all')}}active{{/if}}">All</a>
        <a href="?filter=active" class="btn btn-outline-success {{#if (eq filter 'active')}}active{{/if}}">Active</a>
        <a href="?filter=expiring_soon" class="btn btn-outline-warning {{#if (eq filter 'expiring_soon')}}active{{/if}}">Expiring Soon</a>
    </div>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Date</th>
                        <th>User Mobile</th>
                        <th>Name</th>
                        <th>Amount</th>
                        <th>Payment ID</th>
                        <th>Valid Until</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each subscriptions}}
                    <tr>
                        <td>{{formatDate this.created_at}}</td>
                        <td>{{this.user_mobile}}</td>
                        <td>{{#if this.first_name}}{{this.first_name}} {{this.last_name}}{{else}}-{{/if}}</td>
                        <td>₹{{this.amount}}</td>
                        <td>{{this.payment_id}}</td>
                        <td>{{formatDate this.premium_valid_until}}</td>
                        <td>
                            {{#if (eq this.status 'paid')}}
                                <span class="badge bg-success">Paid</span>
                            {{else}}
                                <span class="badge bg-secondary">{{this.status}}</span>
                            {{/if}}
                        </td>
                    </tr>
                    {{/each}}
                    {{#if (eq subscriptions.length 0)}}
                    <tr><td colspan="7" class="text-center py-4">No subscriptions found.</td></tr>
                    {{/if}}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Pagination -->
{{#if (gt totalPages 1)}}
<nav class="mt-4">
    <ul class="pagination justify-content-center">
        <li class="page-item {{#unless hasPrev}}disabled{{/unless}}">
            <a class="page-link" href="?page={{prevPage}}&filter={{filter}}">Previous</a>
        </li>
        <li class="page-item disabled"><a class="page-link">Page {{page}} of {{totalPages}}</a></li>
        <li class="page-item {{#unless hasNext}}disabled{{/unless}}">
            <a class="page-link" href="?page={{nextPage}}&filter={{filter}}">Next</a>
        </li>
    </ul>
</nav>
{{/if}}
