<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Contact Queries</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>Date</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Subject</th>
                        <th>Message</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each queries}}
                    <tr>
                        <td>{{formatDate this.created_at}}</td>
                        <td>{{this.name}}</td>
                        <td><a href="mailto:{{this.email}}">{{this.email}}</a></td>
                        <td>{{this.subject}}</td>
                        <td><button class="btn btn-sm btn-link" onclick="alert(`{{this.message}}`)">View Message</button></td>
                        <td>
                            {{#if (eq this.status 'resolved')}}
                                <span class="badge bg-success">Resolved</span>
                            {{else}}
                                <span class="badge bg-warning text-dark">Pending</span>
                            {{/if}}
                        </td>
                        <td class="text-end">
                            {{#if (eq this.status 'pending')}}
                            <button class="btn btn-sm btn-outline-success" onclick="resolveQuery({{this.id}})"><i class="bi bi-check-circle"></i> Mark Resolved</button>
                            {{/if}}
                        </td>
                    </tr>
                    {{/each}}
                    {{#if (eq queries.length 0)}}
                    <tr><td colspan="7" class="text-center py-4">No contact queries 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 resolveQuery(id) {
    if (!confirm('Mark this query as resolved?')) return;
    const res = await fetch('/admin/queries/resolve', { 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>
