<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Vendors Management</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>ID</th>
                        <th>Business Name</th>
                        <th>Category</th>
                        <th>Location</th>
                        <th>Contact</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each vendors}}
                    <tr>
                        <td>{{this.id}}</td>
                        <td>{{this.name}}</td>
                        <td>{{this.category_name}}</td>
                        <td>{{this.city}}, {{this.state}}</td>
                        <td>{{this.contact_number}}</td>
                        <td class="text-end">
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteVendor({{this.id}})"><i class="bi bi-trash"></i></button>
                        </td>
                    </tr>
                    {{/each}}
                    {{#if (eq vendors.length 0)}}
                    <tr><td colspan="6" class="text-center py-4">No vendors 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 deleteVendor(id) {
    if (!confirm('Are you sure you want to delete this vendor?')) return;
    const res = await fetch('/admin/vendors/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>
