{% extends 'base.html' %}
{% block content %}

<div class="row g-3 mb-4">
    <div class="col-md-4 col-lg-3">
        <div class="card border-0 shadow-sm p-3 h-100">
            <div class="d-flex align-items-center">
                <div class="bg-light rounded-circle p-3 me-3 text-primary">
                    <i class="fas {{ page_icon }} fa-lg"></i>
                </div>
                <div>
                    <h6 class="text-muted small fw-bold mb-0 text-uppercase">{{ page_title }}</h6>
                    <h4 class="fw-bold mb-0">{{ total_count }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="card border-0 shadow-sm p-3 h-100">
            <div class="d-flex align-items-center">
                <div class="bg-light rounded-circle p-3 me-3 text-success">
                    <i class="fas fa-coins fa-lg"></i>
                </div>
                <div>
                    <h6 class="text-muted small fw-bold mb-0 text-uppercase">Total Value</h6>
                    <h4 class="fw-bold mb-0">Rs. {{ total_value }}</h4>
                </div>
            </div>
        </div>
    </div>
    {% if is_active_page %}
    <div class="col-md-4 col-lg-3">
        <div class="card border-0 shadow-sm p-3 h-100 border-start border-4 border-warning">
            <div class="d-flex align-items-center">
                <div class="bg-warning bg-opacity-10 rounded-circle p-3 me-3 text-warning">
                    <i class="fas fa-truck-loading fa-lg"></i>
                </div>
                <div>
                    <h6 class="text-muted small fw-bold mb-0 text-uppercase">To Be Delivered</h6>
                    <h4 class="fw-bold mb-0">{{ pending_count }} <span class="fs-6 text-muted fw-normal">(Rs. {{ pending_value }})</span></h4>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-3">
        <form class="row g-2 align-items-center">
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0"><i class="fas fa-search text-muted"></i></span>
                    <input type="text" name="search" class="form-control border-start-0" placeholder="Search Party Name or ID..." value="{{ search_query }}">
                </div>
            </div>
            <div class="col-md-3">
                <input type="date" name="start_date" class="form-control" value="{{ request.GET.start_date }}">
            </div>
            <div class="col-md-3">
                <input type="date" name="end_date" class="form-control" value="{{ request.GET.end_date }}">
            </div>
            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn btn-primary fw-bold flex-grow-1">Filter</button>
                {% if is_active_page %}
                    <a href="?status=pending" class="btn btn-warning text-dark fw-bold" title="Show Pending Only"><i class="fas fa-truck-loading"></i></a>
                {% endif %}
                {% if search_query or request.GET.start_date or request.GET.status %}
                    <a href="{{ request.path }}" class="btn btn-outline-secondary" title="Reset"><i class="fas fa-times"></i></a>
                {% endif %}
            </div>
        </form>
    </div>
</div>

<div class="card border-0 shadow-sm mb-5">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 text-nowrap">
            <thead class="bg-light text-uppercase small text-muted">
                <tr>
                    <th class="ps-4 py-3">Invoice #</th>
                    <th class="py-3">Date</th>
                    <th class="py-3">Party Name</th>
                    <th class="py-3">Total</th>
                    <th class="py-3">Status</th>
                    {% if is_active_page %}<th class="py-3">Edit</th>{% endif %}
                    <th class="text-end pe-4 py-3">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for order in orders %}
                <tr>
                    <td class="ps-4 fw-bold text-muted">#{{ order.id }}</td>
                    <td>
                        <div class="fw-bold text-dark">{{ order.created_at|date:"M d, Y" }}</div>
                        <div class="small text-muted">{{ order.created_at|date:"h:i A" }}</div>
                    </td>
                    <td class="fw-bold text-primary">{{ order.party_name|title }}</td>
                    <td class="fw-bold text-success">Rs. {{ order.total_amount }}</td>
                    <td>
                        {% if order.is_return %}
                            <span class="badge bg-warning text-dark px-2 py-1 rounded-pill">Returned</span>
                        {% elif order.is_cancelled %}
                            <span class="badge bg-danger px-2 py-1 rounded-pill">Cancelled</span>
                        {% elif order.is_delivered %}
                            {% if is_active_page %}
                                <button type="button" class="badge bg-success border-0 px-2 py-1 rounded-pill" data-bs-toggle="modal" data-bs-target="#statusModal" data-url="{% url 'toggle_delivery' order.id %}" data-status="Pending">Delivered</button>
                            {% else %}<span class="badge bg-success px-2 py-1 rounded-pill">Delivered</span>{% endif %}
                        {% else %}
                            {% if is_active_page %}
                                <button type="button" class="badge bg-warning text-dark border-0 px-2 py-1 rounded-pill" data-bs-toggle="modal" data-bs-target="#statusModal" data-url="{% url 'toggle_delivery' order.id %}" data-status="Delivered">Pending</button>
                            {% else %}<span class="badge bg-warning text-dark px-2 py-1 rounded-pill">Pending</span>{% endif %}
                        {% endif %}
                    </td>
                    {% if is_active_page %}
                    <td><a href="{% url 'edit_order' order.id %}" class="btn btn-sm btn-light text-dark border"><i class="fas fa-edit"></i></a></td>
                    {% endif %}
                    <td class="text-end pe-4">
                        <a href="{% url 'invoice' order.id %}" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-bold">View</a>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="7" class="text-center py-5 text-muted">No orders found.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if orders.has_other_pages %}
    <div class="card-footer bg-white py-3">
        <nav>
            <ul class="pagination justify-content-center mb-0">
                {% if orders.has_previous %}
                    <li class="page-item"><a class="page-link border-0 text-dark" href="?page={{ orders.previous_page_number }}&search={{ search_query }}"><i class="fas fa-chevron-left me-1"></i> Prev</a></li>
                {% else %}
                    <li class="page-item disabled"><span class="page-link border-0 text-muted">Prev</span></li>
                {% endif %}
                <li class="page-item disabled"><span class="page-link border-0 fw-bold text-dark">Page {{ orders.number }} of {{ orders.paginator.num_pages }}</span></li>
                {% if orders.has_next %}
                    <li class="page-item"><a class="page-link border-0 text-dark" href="?page={{ orders.next_page_number }}&search={{ search_query }}">Next <i class="fas fa-chevron-right ms-1"></i></a></li>
                {% else %}
                    <li class="page-item disabled"><span class="page-link border-0 text-muted">Next</span></li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>

{% if is_active_page %}
<div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-body text-center py-4">
                <h5 class="fw-bold mb-2">Update Status?</h5>
                <p class="text-muted">Change to <span id="newStatusText" class="badge bg-dark"></span>?</p>
                <div class="mt-4"><button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">No</button> <a href="#" id="confirmBtn" class="btn btn-primary px-4 fw-bold">Yes</a></div>
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var statusModal = document.getElementById('statusModal');
    statusModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var url = button.getAttribute('data-url');
        var newStatus = button.getAttribute('data-status');
        var modalText = statusModal.querySelector('#newStatusText');
        var confirmBtn = statusModal.querySelector('#confirmBtn');
        modalText.textContent = newStatus;
        confirmBtn.setAttribute('href', url);
        if(newStatus === 'Delivered') { modalText.className = "badge bg-success"; confirmBtn.className = "btn btn-success px-4 fw-bold"; } 
        else { modalText.className = "badge bg-warning text-dark"; confirmBtn.className = "btn btn-dark px-4 fw-bold"; }
    });
});
</script>
{% endif %}
{% endblock %}