{% 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">
                        {% blocktrans with object.completed as completed %}
                        Payment completed on: {{ completed|date:"F j, Y" }}
                        {% endblocktrans %}
                    </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 %}