{% extends "base.html" %}

{% block title %}Supplier List{% endblock %}

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

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

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

    <!-- Supplier 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 supplier in page_obj %}
            <tr>
                <td>{{ supplier.name }}</td>
                <td>{{ supplier.company_name }}</td>
                <td>{{ supplier.phone }}</td>
                <td>{{ supplier.email }}</td>
                <td>
                    <a href="{% url 'edit_supplier' supplier.id %}" class="btn btn-primary btn-sm">View / Edit</a>
                    <a href="{% url 'delete_supplier' supplier.id %}" class="btn btn-danger btn-sm">Delete</a>
                    <a href="{% url 'supplier_ledger' supplier.id %}" class="btn btn-secondary btn-sm">Ledger</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="4" class="text-center">No suppliers 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 %}