{% extends "store/base.html" %}
{% load static %}
{% load render_table from django_tables2 %}
{% load querystring from django_tables2 %}
{% block title %}Deliveries{% endblock title %}
{% block content %}
<div class="container p-5">
    <style>
        input[type="text"], select {
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 6px 20px;
            margin: 8px 0;
        }
        button[type="submit"] {
            padding: 6px 20px;
            margin: 8px 0;
        }
        .table th, .table td {
            text-align: center;
        }
    </style>

    <div class="d-flex justify-content-between mb-3">
        <a class="btn btn-success btn-sm" href="{% url 'delivery-create' %}">
            Add Delivery
        </a>
        <a class="btn btn-success btn-sm" href="{% querystring '_export'='xlsx' %}">
            <i class="fa-solid fa-download"></i> Export to Excel
        </a>
    </div>

    <div class="mb-4">
        <table class="table table-bordered table-striped table-hover table-sm">
            <thead class="thead-light">
                <tr>
                    <th scope="col"><a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">ID <i class="fa-solid fa-sort"></i></a></th>
                    <th scope="col">Name <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Customer Name <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Contact <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Address <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Delivery Date <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Delivery Status <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Action <i class="fa-solid fa-sort"></i></th>
                </tr>
            </thead>
            <tbody>
                {% for delivery in deliveries %}
                <tr>
                    <th scope="row">{{ delivery.id }}</th>
                    <td>{{ delivery.item.name }}</td>
                    <td>{{ delivery.customer_name }}</td>
                    <td>{{ delivery.phone_number }}</td>
                    <td>{{ delivery.location }}</td>
                    <td>{{ delivery.date }}</td>
                    <td>
                        {% if delivery.is_delivered %}
                        <span class="badge bg-success text-white">Delivered</span>
                        {% else %}
                        <span class="badge bg-danger text-white">Pending</span>
                        {% endif %}
                    </td>
                    <td>
                        <a class="btn btn-outline-info btn-sm" href="{% url 'delivery-update' delivery.pk %}">
                            <i class="fa-solid fa-pen"></i> Edit
                        </a>
                        <a class="btn btn-outline-danger btn-sm float-end" href="{% url 'delivery-delete' delivery.pk %}">
                            <i class="fa-solid fa-trash"></i> Delete
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if is_paginated %}
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {% 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>
            {% else %}
            <li class="page-item disabled">
                <span class="page-link" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </span>
            </li>
            {% endif %}
            {% for i in paginator.page_range %}
            {% if page_obj.number == i %}
            <li class="page-item active" aria-current="page">
                <span class="page-link">{{ i }} <span class="visually-hidden">(current)</span></span>
            </li>
            {% else %}
            <li class="page-item">
                <a class="page-link" href="?page={{ i }}">{{ i }}</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>
            {% else %}
            <li class="page-item disabled">
                <span class="page-link" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </span>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock content %}