{% extends 'washerman/dashboard.html.twig' %}

{% block title %}Order Details{% endblock %}

{% block dashboard_content %}
    <div class="container mt-4">
        <h2 class="mb-3">Order Details</h2>

        <div class="card mb-4">
            <div class="card-body">
                <h5>Order #{{ order.id }}</h5>
                <p><strong>Customer:</strong> {{ order.customer.email }}</p>
                <p><strong>Status:</strong>
                    {% if order.status == 'completed' %}
                        <span class="badge bg-success">{{ order.status }}</span>
                    {% elseif order.status == 'pending' %}
                        <span class="badge bg-warning text-dark">{{ order.status }}</span>
                    {% else %}
                        <span class="badge bg-secondary">{{ order.status }}</span>
                    {% endif %}
                </p>
                <p><strong>Total Price:</strong> {{ order.totalPrice }} PKR</p>
                <p><strong>Pickup Address:</strong> {{ order.pickupAddress }}</p>
                <p><strong>Pickup Date:</strong> {{ order.pickupDate|date('Y-m-d H:i') }}</p>
                <p><strong>Created At:</strong> {{ order.createdAt|date('Y-m-d H:i') }}</p>
            </div>
        </div>

        <h4>Order Items</h4>
        {% if orderItems is empty %}
            <p>No items found for this order.</p>
        {% else %}
            <table class="table table-bordered">
                <thead class="table-grey">
                <tr>
                    <th>#</th>
                    <th>Item Name</th>
                    <th>Quantity</th>
                    <th>Unit Price (PKR)</th>
                    <th>Total (PKR)</th>
                </tr>
                </thead>
                <tbody>
                {% for item in orderItems %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ item.itemName }}</td>
                        <td>{{ item.quantity }}</td>
                        <td>{{ item.price }}</td>
                        <td>{{ item.quantity * item.price }}</td>
                        <td>
                            {% if order.status == 'completed' %}
                                <span class="badge bg-success">{{ order.status|capitalize }}</span>
                            {% elseif order.status == 'pending' %}
                                <span class="badge bg-warning text-dark">{{ order.status|capitalize }}</span>
                            {% elseif order.status == 'in_progress' %}
                                <span class="badge bg-primary">{{ order.status|replace({'_':' '})|capitalize }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ order.status|capitalize }}</span>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
{% endblock %}