{% extends "base.html" %}
{% load i18n static %}

{% block title %}{% trans "Order Successful" %}{% endblock %}

{% block content %}
<div class="container py-5 text-center">
  <div class="mb-4">
    <i class="bi bi-check-circle-fill text-success" style="font-size: 5rem;"></i>
  </div>
  <h1 class="fw-bold mb-3">{% trans "Thank you for your order!" %}</h1>
  <p class="lead mb-4">{% trans "Your order ID is" %} #{{ order.id }}. {% trans "We have received your request and will contact you shortly for delivery." %}</p>
  
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card border-0 shadow-sm p-4 text-start">
        <h5 class="fw-bold mb-3">{% trans "Order Details" %}</h5>
        <p class="mb-1"><strong>{% trans "Name" %}:</strong> {{ order.full_name }}</p>
        <p class="mb-1"><strong>{% trans "Phone" %}:</strong> {{ order.phone }}</p>
        <p class="mb-1"><strong>{% trans "Address" %}:</strong> {{ order.address }}</p>
        <p class="mb-1"><strong>{% trans "Total" %}:</strong> {{ order.total_price }} ETB</p>
        <p class="mb-0"><strong>{% trans "Payment" %}:</strong> {{ order.get_payment_method_display }}</p>
      </div>
    </div>
  </div>

  <div class="mt-5">
    <a href="{% url 'index' %}" class="btn btn-primary px-4">{% trans "Return to Shop" %}</a>
  </div>
</div>
{% endblock %}
