{% extends 'base.html' %}

{% block title %}Order Confirmed - ShinaStore{% endblock %}

{% block content %}
<div class="container py-5 text-center">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="mb-4">
                <i class="bi bi-check-circle-fill display-1 text-success"></i>
            </div>
            <h1 class="display-4 fw-bold text-slate mb-3" style="font-family: 'Montserrat', sans-serif;">Thank You!</h1>
            <p class="h4 text-muted mb-5">Your order #{{ order.id }} has been placed successfully.</p>
            
            <div class="card border-0 shadow-sm p-4 mb-5" style="border-radius: 20px; text-align: left;">
                <h5 class="fw-bold mb-4">Order Summary</h5>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Order Date:</span>
                    <span>{{ order.order_date|date:"F d, Y H:i" }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Order Total:</span>
                    <span class="fw-bold">${{ order.total_amount }}</span>
                </div>
                <div class="d-flex justify-content-between mb-4">
                    <span class="text-muted">Status:</span>
                    <span class="badge bg-success">{{ order.get_status_display }}</span>
                </div>
                
                <hr>
                
                <h6 class="fw-bold mb-3">Items Ordered:</h6>
                {% for item in order.items.all %}
                <div class="d-flex justify-content-between mb-2 small">
                    <span>{{ item.quantity }} x {{ item.product.title }}</span>
                    <span>${{ item.price }}</span>
                </div>
                {% endfor %}
            </div>
            
            <div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
                <a href="{% url 'index' %}" class="btn btn-dark btn-lg px-4 py-3 fw-bold" style="border-radius: 12px;">
                    Back to Store
                </a>
                <button onclick="window.print()" class="btn btn-outline-dark btn-lg px-4 py-3 fw-bold" style="border-radius: 12px;">
                    Print Receipt
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
