<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Vendor Call Reports</h2>
</div>

<div class="card mb-4">
    <div class="card-body">
        <form method="GET" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label">Vendor</label>
                <select name="vendor_id" class="form-select">
                    <option value="">All Vendors</option>
                    {{#each vendorsList}}
                    <option value="{{this.id}}" {{#if (eq ../filters.vendor_id (toString this.id))}}selected{{/if}}>{{this.name}}</option>
                    {{/each}}
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">From Date</label>
                <input type="date" name="from" class="form-control" value="{{filters.from}}">
            </div>
            <div class="col-md-3">
                <label class="form-label">To Date</label>
                <input type="date" name="to" class="form-control" value="{{filters.to}}">
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-primary w-100">Filter</button>
            </div>
        </form>
    </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 / Time</th>
                        <th>Vendor Name</th>
                        <th>User Mobile</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each calls}}
                    <tr>
                        <td>{{formatDate this.created_at}}</td>
                        <td>{{this.vendor_name}}</td>
                        <td>{{this.user_mobile}}</td>
                    </tr>
                    {{/each}}
                    {{#if (eq calls.length 0)}}
                    <tr><td colspan="3" class="text-center py-4">No calls found for selected filters.</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}}&vendor_id={{filters.vendor_id}}&from={{filters.from}}&to={{filters.to}}">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}}&vendor_id={{filters.vendor_id}}&from={{filters.from}}&to={{filters.to}}">Next</a>
        </li>
    </ul>
</nav>
{{/if}}
