{% extends 'shop/base.html' %}
{% block title %}Order Success - Nana Tradings{% endblock %}

{% block content %}
<div class="container text-center my-5">
    <!-- 🎉 Success Message -->
    <div class="order-success-card card shadow-lg p-5 rounded-4">
        <div class="success-icon">
            <i class="fas fa-check-circle text-success display-1"></i>
        </div>
        <h1 class="fw-bold text-success mt-3">Thank You for Your Order!</h1>
        <p class="lead text-muted">Your order has been successfully placed. We will contact you soon for delivery.</p>
        
        <!-- ✅ Order Summary (Optional) -->
        {% if order %}
        <div class="order-summary mt-4 p-3">
            <h5 class="fw-bold">Order Details</h5>
            <p><strong>Order ID:</strong> #{{ order.id }}</p>
            <p><strong>Total Amount:</strong> <span class="text-success fw-bold">${{ order.total_price|floatformat:2 }}</span></p>
            <p class="text-muted">Check your email for more details.</p>
        </div>
        {% endif %}

        <!-- 🔘 Action Buttons -->
        <div class="mt-4">
            <a href="{% url 'shop' %}" class="btn btn-success btn-lg me-2">
                <i class="fas fa-shopping-bag"></i> Continue Shopping
            </a>
            <a href="{% url 'my_orders' %}" class="btn btn-outline-primary btn-lg">
                <i class="fas fa-box-open"></i> View My Orders
            </a>
        </div>
    </div>
</div>

<!-- 🎉 Confetti Effect -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.0.0"></script>
<script>
    function launchConfetti() {
        confetti({
            particleCount: 150,
            spread: 70,
            origin: { y: 0.6 }
        });
    }
    setTimeout(launchConfetti, 500);
</script>

<!-- ✅ Custom Styling -->
<style>
/* 🎯 Success Page Styling */
.order-success-card {
    max-width: 600px;
    margin: auto;
    background: #f8f9fa;
    border-left: 5px solid #148818;
    text-align: center;
}

/* ✅ Success Icon */
.success-icon i {
    font-size: 80px;
    animation: pop 0.5s ease-in-out;
}

/* 🎉 Order Summary */
.order-summary {
    background: #eef7ee;
    border-radius: 8px;
    border-left: 5px solid #28a745;
}

/* ✅ Buttons */
.btn-lg {
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 8px;
}

/* 🔥 Animations */
@keyframes pop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .btn-lg {
        width: 100%;
        margin-bottom: 10px;
    }
}
</style>

{% endblock %}