{% extends "base.html" %}

{% block title %}Customer List{% endblock %}

{% block content %}
<div class="container">
    <h2 class="my-4">Customer List</h2>

    <!-- Search Form -->
    <form method="GET" action="" class="mb-3">
        <div class="input-group">
            <input type="text" name="q" class="form-control" placeholder="Search customers..." value="{{ query }}">
            <button type="submit" class="btn btn-primary">Search</button>
        </div>
    </form>

    <a href="{% url 'add_customer' %}" class="btn btn-success mb-3">Add New Customer</a>

    <!-- Customer Table -->
    <table class="table table-striped table-bordered">
        <thead class="table-dark">
            <tr>
                <th>Name</th>
                <th>Company</th>
                <th>Contact</th>
                <th>Email</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for customer in page_obj %}
            <tr>
                <td>{{ customer.name }}</td>
                <td>{{ customer.company_name }}</td>
                <td>{{ customer.phone }}</td>
                <td>{{ customer.email }}</td>
                <td>
                    <a href="{% url 'edit_customer' customer.id %}" class="btn btn-primary btn-sm">View / Edit</a>
                    <a href="{% url 'delete_customer' customer.id %}" class="btn btn-danger btn-sm">Delete</a>
                    <a href="{% url 'customer_ledger' customer.id %}" class="btn btn-secondary btn-sm">Ledger</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="4" class="text-center">No customers found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Pagination Controls -->
    <nav>
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?q={{ query }}&page=1">First</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?q={{ query }}&page={{ page_obj.previous_page_number }}">Previous</a>
                </li>
            {% endif %}

            <li class="page-item active">
                <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            </li>

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?q={{ query }}&page={{ page_obj.next_page_number }}">Next</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?q={{ query }}&page={{ page_obj.paginator.num_pages }}">Last</a>
                </li>
            {% endif %}
        </ul>
    </nav>
</div>
{% endblock %}