{% extends "website/home/base.html" %}
{% block title %} Order Success {% endblock %}
{% block content %}

<div class="container my-5">
    <div class="row">
        <div class="col-md-10 offset-md-1">
            <div class="card shadow-lg">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center p-3">
                    <h3 class="mb-0">Order Placed Successfully</h3>

                  
                </div>
 
                <div class="card-body success-order">
                    <!-- Shipping Info -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <!-- Order Info -->
                            <h5>Order Number: <span class="text-primary">{{ order.order_number }}</span></h5>
                            <p><strong>Date:</strong> {{ order.order_date|date:"d M Y, h:i A" }}</p>
                            <p><strong>Status:</strong> {{ order.get_order_status_display }}</p>

                            <p><strong>Payment Method:</strong> {{ order.get_payment_method_display }}</p>
                            <p><strong>Payment Status:</strong> {{ order.get_payment_status_display }}</p>
                        </div>
                        <div class="col-md-6">
                            <h5>Shipping Information</h5>
                            <p><strong>Name:</strong> {{ order.shipping_person_name }}</p>
                            <p><strong>Phone:</strong> {{ order.shipping_mobile }}</p>
                            <p><strong>Email:</strong> {{ order.shipping_email }}</p>
                            <p><strong>Address:</strong> {{ order.shipping_address }}</p>
                        </div>
                    </div>

                    <!-- Order Items -->
                    <h5 class="mb-3">Order Items</h5>
                    <table class="table table-bordered text-center">
                        <thead class="table-light">
                            <tr>
                                <th class="text-align-left">Product Info</th> 
                                <th>Unit Price</th>
                                <th>Qty</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in order_items %}
                            <tr>
                                <td class="text-align-left">
                                    <div style="display: flex; align-items: center; gap: 10px;">
                                        <!-- Image -->
                                        <img src="{{ item.product.product_image.url }}" style="width: 60px; height: auto; border-radius: 5px;">

                                        <!-- Info -->
                                        <div>
                                            {{ item.product.name_english }} <br>
                                            <small>SKU: {{ item.product.sku_code }}</small> <br>
                                            {% if item.size %}
                                                <small>Size: {{ item.size }}</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>
                                <td>৳ {{ item.unit_price|floatformat:2 }}</td>
                                <td>{{ item.quantity }}</td>
                                <td>৳ {{ item.total_price|floatformat:2 }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>

                    <!-- Summary -->
                    <div class="row mt-4">
                        <div class="col-md-6"></div>
                        <div class="col-md-6">
                            <ul class="list-group">
                                <li class="list-group-item d-flex justify-content-between">
                                    <span><strong>Subtotal</strong></span>
                                    <strong>৳ {{ order.total_amount|floatformat:2 }}</strong>
                                </li>
                                <li class="list-group-item d-flex justify-content-between">
                                    <span><strong>Shipping</strong></span>
                                    <strong>৳ {{ order.shipping_charge|floatformat:2 }}</strong>
                                </li>
                                {% if order.discount_amount > 0 %}
                                <li class="list-group-item d-flex justify-content-between text-danger">
                                    <span><strong>Discount</strong></span>
                                    <strong>- ৳ {{ order.discount_amount|floatformat:2 }}</strong>
                                </li>
                                {% endif %}
                                <li class="list-group-item d-flex justify-content-between fs-5">
                                    <span><strong>Grand Total</strong></span>
                                    <strong class="text-dark">৳ {{ order.grand_total|floatformat:2 }}</strong>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="text-center mt-4 mb-4">
                        <a href="/" class="btn btn-primary">Continue Shopping</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}