{% extends 'base.html' %}
{% load humanize %}

{% block title %}Purchase Orders{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Purchase Orders</h1>
        <a href="{% url 'purchases:purchase_create' %}" class="btn btn-primary">
            <i class="fas fa-plus"></i> New Purchase Order
        </a>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">All Purchase Orders</h6>
            <div class="dropdown no-arrow">
                <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                    <a class="dropdown-item" href="#">Export to Excel</a>
                    <a class="dropdown-item" href="#">Print List</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>PO Number</th>
                            <th>Supplier</th>
                            <th>Order Date</th>
                            <th>Expected Delivery</th>
                            <th>Status</th>
                            <th>Total Amount</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in object_list %}
                        <tr>
                            <td>{{ order.po_number }}</td>
                            <td>{{ order.supplier.name }}</td>
                            <td>{{ order.order_date|date:"M d, Y" }}</td>
                            <td>{{ order.expected_delivery_date|date:"M d, Y"|default:"-" }}</td>
                            <td>
                                <span class="badge {% if order.status == 'completed' %}badge-success{% elif order.status == 'cancelled' %}badge-danger{% else %}badge-warning{% endif %}">
                                    {{ order.get_status_display }}
                                </span>
                            </td>
                            <td>KSh {{ order.total_amount|default:0|floatformat:2 }}</td>
                            <td>
                                <a href="{% url 'purchases:purchase_detail' order.pk %}" class="btn btn-sm btn-info" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{% url 'purchases:purchase_edit' order.pk %}" class="btn btn-sm btn-primary" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center">No purchase orders found.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            {% if is_paginated %}
            <div class="d-flex justify-content-between align-items-center mt-4">
                <div class="text-muted">
                    Showing page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                </div>
                <nav aria-label="Page navigation">
                    <ul class="pagination mb-0">
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% endif %}
                        
                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                            <li class="page-item active">
                                <a class="page-link" href="#">{{ num }}</a>
                            </li>
                            {% else %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                            </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}