{% extends 'master.html' %}
{% block content %}

<div class="container d-flex flex-column align-items-center justify-content-center" >
    <!-- Order Confirmation Card -->
    <div class="card shadow-lg p-5 border-0 text-center" >
        <div class="card-body">
            <!-- Checkmark Icon -->
            <div class="checkmark-icon mb-3">
                <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
            </div>

            <!-- Confirmation Message -->
            <h2 class="text-dark fw-bold">Order Placed Successfully!</h2>
            <p class="mt-3 text-muted lead">
                Your order <strong class="text-dark">#{{ order.id }}</strong> has been confirmed. <br>
                Thank you for choosing us!
            </p>

            <!-- Continue Shopping Button -->
            <a href="{% url 'indexview' %}" class="btn btn-secondary px-4 py-2 fw-semibold rounded-pill mt-4 shadow-sm">
                <i class="bi bi-arrow-left-circle"></i> Continue Shopping
            </a>
        </div>
    </div>

    
</div>

<style>
/* Center content */
.container {
    min-height: 100vh;
}

/* Order confirmation card */
.card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    padding: 25px;
}

/* Checkmark icon */
.checkmark-icon i {
    color: #28a745;
    animation: popIn 0.5s ease-in-out;
}

/* Button styling */
.btn-primary, .btn-secondary {
    border: none;
    transition: all 0.3s ease-in-out;
    font-size: 1rem;
}

.btn-primary:hover {
    background-color: #004085;
    transform: scale(1.05);
    box-shadow: 0px 5px 15px rgba(0, 64, 133, 0.2);
}

.btn-secondary:hover {
    background-color: #5a6268;
    transform: scale(1.05);
    box-shadow: 0px 5px 15px rgba(90, 98, 104, 0.2);
}

/* Input Styling */
textarea.form-control {
    border-radius: 12px;
    border: 1px solid #ced4da;
    font-size: 1rem;
}

/* Animations */
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    80% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}
</style>

{% endblock %}