{% extends 'common/base.html' %}
{% load static %}
{% block title %} Sales Order List {% endblock %}

{% block content %}
<div class="container-fluid" id="container-wrapper">
    <div class="d-sm-flex align-items-center justify-content-between mb-2">
        <h1 class="h3 mb-0 text-gray-800 mt-2">Sales Order List</h1>
        <a href="{% url 'sales_order_create' %}" class="btn btn-primary">+ Create New Order</a>
    </div>

    <!-- Filter / Search -->
    <div class="card mb-4">
        <div class="card-body">
            <form class="row g-3" method="get">
                <div class="col-md-3">
                    <input type="text" name="customer" value="{{ request.GET.customer }}" class="form-control"
                        placeholder="Customer Name">
                </div>
                <div class="col-md-2">
                    <input type="text" name="order_id" value="{{ request.GET.order_id }}" class="form-control"
                        placeholder="Order ID">
                </div>
                <div class="col-md-3">
                    <input type="date" name="date" value="{{ request.GET.date }}" class="form-control">
                </div>
                <div class="col-md-2">
                    <select name="status" class="form-control">
                        <option value="">All Status</option>
                        <option value="paid" {% if request.GET.status == "paid" %}selected{% endif %}>Paid</option>
                        <option value="pending" {% if request.GET.status == "pending" %}selected{% endif %}>Pending
                        </option>
                        <option value="refund" {% if request.GET.status == "refund" %}selected{% endif %}>Refund</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">Search</button>
                </div>
            </form>

        </div>
    </div>

    <!-- Orders Table -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="salesOrderTable">
                    <thead class="thead-dark">
                        <tr> 
                            <th>Order ID</th>
                            <th>Customer</th>
                            <th>Order Amount</th> 
                            <th>Shipping Cost</th> 
                            <th>Payment Info</th>
                            <th>Order Status</th>
                            <th style="width:150px">Order Date</th>
                            <th style="width:150px">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in orders %}
                        <tr> 
                            <td class="text-center">{{ order.order_number }}</td>
                            <td>
                                <strong>Name: </strong> {{ order.shipping_person_name }} <br>
                               <small> <strong>Mobile: </strong>{{ order.shipping_mobile }}</small> <br>
                                <small><strong>Email: </strong>{{ order.shipping_email }}</small>

                            </td>
                            <td class="text-center">৳ {{ order.grand_total }}</td> 
                            <td class="text-center">৳ {{ order.shipping_charge }}</td> 
                            <td>
                                Payment Status: 
                                {% if order.payment_status == "paid" %}
                                <span class="badge bg-success">Paid</span>
                                {% elif order.payment_status == "pending" %}
                                <span class="badge bg-warning text-dark">Pending</span>
                                {% elif order.payment_status == "refund" %}
                                <span class="badge bg-danger">Refund</span>
                                {% else %}
                                <span class="badge bg-secondary">{{ order.payment_status }}</span>
                                {% endif %}
                                <br>
                                Payment Method: <strong>{{order.get_payment_method_display}}</strong>

                            </td>
                            <td class="text-center">
                                {% if order.order_status == "1" %}
                                <span class="badge bg-danger text-white">Pending</span>
                                {% elif order.order_status == "2" %}
                                    <span class="badge bg-info text-white">Confirmed</span>
                                {% else %}
                                    <span class="badge bg-success text-white">Delivered</span>
                                {% endif %}
                            </td>
                            <td class="text-center">{{ order.order_date|date:"Y-m-d" }}</td>
                            <td class="text-center">
                                <a href="{% url 'sales_order_invoice' order.id %}" target="_blank" class="btn btn-sm btn-success"> View </a>
                                <a href=" " class="btn btn-primary btn-sm">Edit</a>
                                 
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="10" class="text-center">No orders found.</td>
                        </tr>
                        {% endfor %}
                    </tbody>

                </table>
            </div>
        </div>
    </div>
</div>

<!-- Optional JS for filter functionality -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("#filterBtn").click(function () {
            // Fetch filter values
            let customer = $("#searchCustomer").val().toLowerCase();
            let orderID = $("#searchOrderID").val().toLowerCase();
            let date = $("#searchDate").val();
            let status = $("#searchStatus").val();

            $("#salesOrderTable tbody tr").each(function () {
                let rowCustomer = $(this).find("td:nth-child(3)").text().toLowerCase();
                let rowOrderID = $(this).find("td:nth-child(2)").text().toLowerCase();
                let rowDate = $(this).find("td:nth-child(9)").text();
                let rowStatus = $(this).find("td:nth-child(7) span").text().toLowerCase();

                if (
                    (customer === "" || rowCustomer.includes(customer)) &&
                    (orderID === "" || rowOrderID.includes(orderID)) &&
                    (date === "" || rowDate === date) &&
                    (status === "" || rowStatus.includes(status))
                ) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    });
</script>
{% endblock %}