haikal/templates/plans/order_detail.html

{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans 'Order Details' %}{% endblock %}
{% block head %}
    <script>
        $(function () {
            $('a.invoice-link').on('click', function (event) {
                event.preventDefault();
                window.open($(this).attr('href'), 'invoice_' + $(this).data('invoice-id'), 'width=860,resizable=1,location=0,status=0,titlebar=1');
            });
        });
    </script>
{% endblock %}
{% block body %}
    <div class="max-w-4xl mx-auto">
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-3xl font-bold text-gray-800">
                {% blocktrans with object.id as order_id %}Order #{{ order_id }}{% endblocktrans %}
            </h1>
            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
                         {% if object.status == object.STATUS.COMPLETED %}bg-green-100 text-green-800{% elif object.status == object.STATUS.PENDING %}bg-yellow-100 text-yellow-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                <i class="fas {% if object.status == object.STATUS.COMPLETED %}fa-check-circle{% elif object.status == object.STATUS.PENDING %}fa-clock{% else %}fa-info-circle{% endif %} mr-2"></i>
                {{ object.get_status_display }}
            </span>
        </div>

    {# Order Summary Section #}
        <div class="rounded-xl shadow-sm overflow-hidden mb-6">
            <div class="px-6 py-4">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">{% trans "Order Summary" %}</h2>
                {% with object as order %}
                    {% include "plans/order_detail_table.html" %}
                {% endwith %}
            </div>
        </div>

    {# Printable Documents Section #}
        {% if object.get_all_invoices.count %}
            <div class="rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="px-6 py-4">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">
                        <i class="fas fa-file-pdf text-gray-400 mr-2"></i> {% trans "Printable documents" %}
                    </h2>
                    <ul class="space-y-2">
                        {% for invoice in object.get_all_invoices %}
                            <li>
                                <a href="{{ invoice.get_absolute_url }}" data-invoice-id="{{ invoice.id }}" class="invoice-link text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200">
                                    {{ invoice.get_type_display }} {{ invoice }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}

    {# Payment Section #}
        <div class="rounded-xl  overflow-hidden mb-6">
            <div class="px-6 py-4">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">
                    <i class="fas fa-credit-card text-gray-400 mr-2"></i> {% trans "Payment" %}
                </h2>

                {% if object.completed %}
                    <div class="bg-green-50 text-green-700 px-4 py-3 rounded-lg flex items-center">
                        <i class="fas fa-check-circle mr-3 text-lg"></i>
                        <p class="text-sm font-medium">
                            {% trans "Payment completed on : "%}{{object.completed}}
                        </p>
                    </div>

                {% else %}
                    {% if object.is_ready_for_payment %}
                        <p class="text-gray-600 mb-4">
                            You can use a fake payment below to simulate paying for this order.
                        </p>
                        <a class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200"
                           role="button"
                           href="{% url "fake_payments" pk=object.id %}">
                            <i class="fas fa-money-bill-wave mr-2"></i>
                            Pay using FakePayments&trade;
                        </a>
                    {% else %}
                        <div class="bg-yellow-50 text-yellow-700 px-4 py-3 rounded-lg flex items-center">
                            <i class="fas fa-exclamation-triangle mr-3 text-lg"></i>
                            <p class="text-sm font-medium">
                                {% blocktrans %}
                                    This order is expired. New payments cannot be initialized. Please make a new order if necessary.
                                {% endblocktrans %}
                            </p>
                        </div>
                    {% endif %}
                {% endif %}

                {% if object.status == object.STATUS.NOT_VALID %}
                    <div class="bg-red-50 text-red-700 px-4 py-3 rounded-lg mt-4 flex items-center">
                        <i class="fas fa-times-circle mr-3 text-lg"></i>
                        <p class="text-sm font-medium">
                            {% blocktrans %}
                                This order could not be processed as it is not valid. Please contact customer service.
                            {% endblocktrans %}
                        </p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}