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

{% block title %}{% trans "Order Successful" %} | Jimma Market{% endblock %}

{% block content %}
<section class="py-5 bg-light min-vh-100 d-flex align-items-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6 text-center">
        <div class="card border-0 shadow-lg p-5 rounded-5">
          <div class="bg-success-subtle rounded-circle d-flex align-items-center justify-content-center mx-auto mb-4" style="width: 120px; height: 120px;">
            <i class="bi bi-check-circle-fill display-1 text-success"></i>
          </div>
          <h1 class="fw-bold mb-3">{% trans "Order Placed Successfully!" %}</h1>
          <p class="lead text-secondary mb-5">
            {% trans "Thank you for shopping with us, " %} <strong>{{ order.full_name }}</strong>! 
            {% trans "Your order" %} <span class="text-primary fw-bold">#{{ order.id }}</span> {% trans "has been received and is being processed." %}
          </p>
          
          <div class="bg-light rounded-4 p-4 text-start mb-5">
            <h6 class="fw-bold mb-3">{% trans "Delivery Details" %}</h6>
            <div class="d-flex align-items-center mb-2">
              <i class="bi bi-geo-alt me-3 text-primary"></i>
              <span>{{ order.address }}, {{ order.get_kebele_display }}</span>
            </div>
            <div class="d-flex align-items-center mb-2">
              <i class="bi bi-clock me-3 text-primary"></i>
              <span>{{ order.get_delivery_time_slot_display }}</span>
            </div>
            <div class="d-flex align-items-center">
              <i class="bi bi-telephone me-3 text-primary"></i>
              <span>{{ order.phone }}</span>
            </div>
          </div>

          <p class="text-secondary small mb-5">
            {% trans "A delivery agent will contact you shortly to confirm your location in Jimma. Please have your phone ready!" %} 📱
          </p>

          <div class="d-grid gap-3">
            <a href="{% url 'home' %}" class="btn btn-primary btn-lg rounded-pill">{% trans "Continue Shopping" %}</a>
            {% if not user.is_authenticated %}
            <a href="{% url 'admin:index' %}" class="btn btn-link text-secondary text-decoration-none small">
              {% trans "Create an account to track your orders" %}
            </a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}