{% extends 'layouts/base.html' %}

{% load i18n %}
{% load static %}
{% load pyaa %}
{% load pyaa_format %}
{% load pyaa_system %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    {% if checkout.checkout_step == "checkout" %}

    <h1 class="text-2xl font-bold text-center mb-6">
        {{ checkout.title }}
    </h1>

    <div class="max-w-xl mx-auto">
        {% if checkout.non_field_errors %}
        <div class="alert alert-error mb-4">
            <i class="fa-solid fa-circle-xmark"></i>
            <ul class="list-disc list-inside">
                {% for error in checkout.non_field_errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <form method="POST" novalidate data-prevent-double-submit>
            {% csrf_token %}

            <!-- Name and Image -->
            <div class="text-center mb-6">
                <h2 class="text-lg font-semibold mb-3">
                    {{ checkout.description }}
                </h2>

                {% if checkout.photo_url %}
                <img src="{{ checkout.photo_url }}" class="max-h-36 mx-auto rounded" alt="">
                {% endif %}
            </div>

            <!-- Details -->
            <div class="mb-6">
                <h3 class="font-semibold mb-3">
                    {% trans 'subtitle.checkout-details' %}
                </h3>

                <div class="bg-base-200 rounded-lg divide-y divide-base-300">
                    {% if checkout.show_price_data %}
                    <div class="flex justify-between p-3">
                        <span>{% trans 'checkout.price' %}:</span>
                        <strong>{% format_currency checkout.price checkout.currency false %}</strong>
                    </div>
                    {% endif %}

                    {% if checkout.show_discount_data %}
                    <div class="flex justify-between p-3">
                        <span>{% trans 'checkout.discount' %}:</span>
                        <strong>{% format_currency checkout.discount checkout.currency false %}</strong>
                    </div>
                    {% endif %}

                    {% if checkout.show_shipping_data %}
                    <div class="flex justify-between p-3">
                        <span>{% trans 'checkout.shipping' %}:</span>
                        <strong>{% format_currency checkout.shipping_price checkout.currency false %}</strong>
                    </div>
                    {% endif %}

                    {% if checkout.show_delivery_data %}
                    <div class="flex justify-between p-3">
                        <span>{% trans 'checkout.delivery' %}:</span>
                        <strong>{{ checkout.delivery_description }}</strong>
                    </div>
                    {% endif %}

                    <div class="flex justify-between p-3 font-bold">
                        <span>{% trans 'checkout.total-price' %}:</span>
                        <span class="text-primary">{% format_currency checkout.total_price checkout.currency false %}</span>
                    </div>
                </div>
            </div>

            <!-- Shipping Address -->
            {% if checkout.show_address_data %}
            <div class="mb-6">
                <h3 class="font-semibold mb-3">
                    {% trans 'subtitle.shipping-address' %}
                </h3>
                <p class="text-base-content/70">{{ checkout.shipping_address_description }}</p>
            </div>
            {% endif %}

            <!-- Options -->
            {% if checkout.options and checkout.options|length > 0 %}
            <div class="mb-6 {% if checkout.options|length <= 1 %}hidden{% endif %}">
                <h3 class="font-semibold mb-3">
                    {% trans 'subtitle.options' %}
                </h3>

                {% element single_field field=checkout.options %}
                {% endelement %}
            </div>
            {% endif %}

            <!-- Pay Button -->
            <button type="submit" class="btn btn-primary w-full">
                <i class="fa-solid fa-credit-card mr-2"></i>
                {% trans 'button.pay' %}
            </button>
        </form>
    </div>

    {% elif checkout.checkout_step == "payment" %}

    {% include 'partials/empty_data.html' %}

    {% endif %}
</div>
{% endblock content %}