<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Matrimony Profiles</h2>
</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>User ID</th>
                        <th>Profile ID</th>
                        <th>Name</th>
                        <th>Mobile</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each users}}
                    <tr>
                        <td>{{this.id}}</td>
                        <td>{{this.profile_id}}</td>
                        <td>{{#if this.first_name}}{{this.first_name}} {{this.last_name}}{{else}}<i class="text-muted">Incomplete</i>{{/if}}</td>
                        <td>{{this.mobile}}</td>
                        <td>
                            {{#if this.is_blocked}}
                                <span class="badge bg-danger">Blocked</span>
                            {{else}}
                                <span class="badge bg-success">Active</span>
                            {{/if}}
                        </td>
                        <td class="text-end">
                            <a href="/admin/users/{{this.id}}" class="btn btn-sm btn-outline-primary">View</a>
                            {{#if this.is_blocked}}
                                <button class="btn btn-sm btn-outline-success" onclick="toggleBlock({{this.id}}, false)">Unblock</button>
                            {{else}}
                                <button class="btn btn-sm btn-outline-warning" onclick="toggleBlock({{this.id}}, true)">Block</button>
                            {{/if}}
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteUser({{this.id}})"><i class="bi bi-trash"></i></button>
                        </td>
                    </tr>
                    {{/each}}
                    {{#if (eq users.length 0)}}
                    <tr><td colspan="6" class="text-center py-4">No users 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}}">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}}">Next</a>
        </li>
    </ul>
</nav>
{{/if}}

<script>
async function toggleBlock(id, block) {
    if (!confirm(`Are you sure you want to ${block ? 'block' : 'unblock'} this user?`)) return;
    const res = await fetch('/admin/users/block', { 
        method: 'POST', 
        headers: { 'Content-Type': 'application/json' }, 
        body: JSON.stringify({ id, is_blocked: block }) 
    });
    const json = await res.json();
    if (json.success) window.location.reload();
    else alert(json.message);
}

async function deleteUser(id) {
    if (!confirm('Are you absolutely sure you want to delete this user completely? This cannot be undone.')) return;
    const res = await fetch('/admin/users/delete', { 
        method: 'POST', 
        headers: { 'Content-Type': 'application/json' }, 
        body: JSON.stringify({ id }) 
    });
    const json = await res.json();
    if (json.success) window.location.reload();
    else alert(json.message);
}
</script>
