{% extends "_market/_layouts/main" %}

{% if orderId != null and order is not defined %}
    {% set order = craft.commerce.orders.getOrderById(orderId) %}
{% endif %}

{% if not order %}
    {% exit 404 %}
{% endif %}

{% set title = 'Order #{reference}'|t('market', {reference: order.reference}) %}

{% set breadcrumbs = [
    {
        url: url('market/orders'),
        label: 'Orders'|t('market')
    },
    {
        url: craft.app.request.getUrl,
        label: title
    }
] %}

{% set statusMap = {
    green: 'bg-green-200 text-green-800',
    blue: 'bg-blue-200 text-blue-800',
    pink: 'bg-pink-200 text-pink-800',
    default: 'bg-gray-200 text-gray-800',
} %}

{% set statusOptionMap = {
    green: 'text-green-700 hover:bg-green-100 hover:text-green-900',
    blue: 'text-blue-700 hover:bg-blue-100 hover:text-blue-900',
    pink: 'text-pink-700 hover:bg-pink-100 hover:text-pink-900',
    default: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
} %}

{% block header %}
    <div class="lg:flex lg:items-center lg:justify-between mb-4">
        <div class="flex-1 min-w-0">
            <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                {{ title }}
            </h1>

            {# Meta #}
            <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">

                {# Status #}
                <div class="mt-2 flex items-center text-sm text-gray-500">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ statusMap[order.orderStatus.color] is defined ? statusMap[order.orderStatus.color] : statusMap.default }}">
                          {{ order.orderStatus }}
                    </span>
                </div>

                {# Amount #}
                <div class="mt-2 flex items-center text-sm text-gray-500">
                    {# Heroicon name: credit-card #}
                    <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
                        <path fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clip-rule="evenodd" />
                    </svg>
                    {{ order.storedTotalPrice|currency(order.currency, [], [], true) }}
                </div>

                {# Date #}
                <div class="mt-2 flex items-center text-sm text-gray-500">
                    {# Heroicon name: calendar #}
                    <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
                    </svg>
                    {{ order.dateOrdered|datetime('d M Y, g:i A') }}
                </div>

                {# Stripe payment #}
                {% set transaction = order.getLastTransaction() %}
                {% set stripePaymentId = null %}
                {% set refundChargeId = null %}
                {% set response = transaction.response|json_decode %}

                {% if response.object is defined and response.object == 'refund' %}
                    {% set stripePaymentId = response.payment_intent %}
                    {# TODO XXX #}
                    {% set refundChargeId = response.charge %}
                {% elseif response.json is defined %}
                    {% set stripePaymentId = response.json.charges.data[0].payment_intent %}
                    {% set refundChargeId = response.json.charges.data[0].id %}
                {% elseif response[0] is defined %}
                    {% set stripePaymentId = response[0].id %}
                    {% set refundChargeId = response[0].id %}
                {% endif %}

                {% if stripePaymentId %}
                    <a href="https://dashboard.stripe.com/payments/{{ stripePaymentId }}" target="_blank" class="group mt-2 flex items-center text-sm text-gray-500 hover:text-gray-700">
                        {# Heroicon name: external-link #}
                        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
                            <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
                        </svg>
                        View in Stripe
                    </a>
                {% endif %}

            </div>
        </div>

        {# Actions #}
        <div class="mt-5 flex lg:mt-0 lg:ml-4">
            {# Packing slip #}
            <a href="{{ order.getPdfUrl() }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-brand-500">
                {# Heroicon name: document-download #}
                <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z" clip-rule="evenodd" />
                </svg>
                {{ 'Packing Slip'|t('market') }}
            </a>

            {{ sprig('_market/_components/order-edit-actions', {
                _orderId: order.id,
                _chargeId: refundChargeId ? refundChargeId : null
            }) }}
        </div>
    </div>
{% endblock %}

{% block main %}
    <div class="py-6">

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div class="relative shadow rounded-lg bg-white sm:col-span-full lg:col-auto overflow-hidden">
                <div class="px-4 py-5 sm:px-6 bg-gray-50">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        Order Details
                    </h3>
                </div>
                <div class="w-full border-t border-gray-200 px-4 sm:p-0">
                    <dl class="sm:divide-y sm:divide-gray-200">
                        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm font-medium text-gray-500">
                                {{ 'Reference'|t('market') }}
                            </dt>
                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                #{{ order.reference }}
                            </dd>
                        </div>
                        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm font-medium text-gray-500">
                                {{ 'Date'|t('market') }}
                            </dt>
                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                {{ order.dateOrdered|datetime('d M Y, g:i A') }}
                            </dd>
                        </div>
                        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm font-medium text-gray-500">
                                {{ 'Customer'|t('market') }}
                            </dt>
                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 truncate">
                                <a href="mailto:{{ order.email }}" class="text-action-600 hover:text-action-900">{{ order.email }}</a>
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            <div class="relative shadow rounded-lg bg-white overflow-hidden">
                <div class="px-4 py-5 sm:px-6 bg-gray-50">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        {{ 'Shipping Address'|t('market') }}
                    </h3>
                </div>
                <div class="px-4 py-5 sm:px-6 border-t border-gray-200">
                    {% include '_market/_includes/address' with {
                        address : order.shippingAddress
                    } %}
                </div>
            </div>

            <div class="relative shadow rounded-lg bg-white overflow-hidden">
                <div class="px-4 py-5 sm:px-6 bg-gray-50">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        {{ 'Billing Address'|t('market') }}
                    </h3>
                </div>
                <div class="px-4 py-5 sm:px-6 border-t border-gray-200">
                    {% include '_market/_includes/address' with {
                        address : order.billingAddress
                    } %}
                </div>
            </div>
        </div>
    </div>

    {# Order table #}
    <div class="flex flex-col">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    {{ 'Item'|t('market') }}
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    {{ 'SKU'|t('market') }}
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    {{ 'Price'|t('market') }}
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    {{ 'Qty'|t('market') }}
                                </th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    {{ 'Total'|t('market') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in order.lineItems %}
                                <tr class="{{ loop.index is odd ? 'bg-white' : 'bg-gray-50' }}">
                                    <td class="px-6 py-4 min-w-xs text-sm font-medium text-gray-900">
                                        {% if item.purchasable.product is defined  %}
                                            {% set product = item.purchasable.product %}
                                            <a href="{{ url('market/products/'~product.type.handle~'/'~product.id~'-'~product.slug) }}" class="text-action-600 hover:text-action-900">
                                                {{ product.title }}
                                            </a>
                                        {% else %}
                                            {{ item.description }}
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-500">
                                        {{ item.sku }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ item.salePrice|currency(order.currency, [], [], true) }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ item.qty }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500">
                                        {{ item.subTotal|currency(order.currency, [], [], true) }}
                                    </td>
                                </tr>

                                {% if item.note %}
                                    <tr class="{{ loop.index is odd ? 'bg-white' : 'bg-gray-50' }}">
                                        <td colspan="5" class="px-6 py-4 max-w-xs text-sm text-gray-500">
                                            <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">Customer Note</h3>
                                            {{ item.note|nl2br }}
                                        </td>
                                    </tr>
                                {% endif %}

                            {% endfor %}
                        </tbody>
                        <tfoot class="bg-gray-50">
                            <tr>
                                <th colspan="4" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    {{ 'Sub Total'|t('market') }}
                                </th>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500">
                                    {{ order.itemSubtotal|currency(order.currency, [], [], true) }}
                                </td>
                            </tr>

                            {# Shipping #}
                            {% set shippingAdjusters = order.getAdjustmentsByType('shipping') %}

                            {# Handle old style adjusters #}
                            {% set oldShippingAdjusterName = null %}
                            {% if shippingAdjusters %}
                                {% set sourceSnapshot = shippingAdjusters[0].getSourceSnapshot() %}
                                {% if sourceSnapshot and sourceSnapshot['OldAdjustments'] is defined %}
                                    {% set oldShippingAdjusterName = sourceSnapshot['OldAdjustments'][0].name %}
                                {% endif %}
                            {% endif %}

                            {% if oldShippingAdjusterName %}
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        {{ 'Shipping'|t('market') }}
                                    </th>
                                    <td colspan="3" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ oldShippingAdjusterName }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500">{{ order.storedTotalShippingCost|currency(order.currency, [], [], true) }}</td>
                                </tr>
                            {% else %}
                                {% for adjustment in shippingAdjusters %}
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            {{ 'Shipping'|t('market') }}
                                        </th>
                                        <td colspan="3" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {{ adjustment.name }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500">{{ adjustment.amount|currency(order.currency, [], [], true) }}</td>
                                    </tr>
                                {% endfor %}
                            {% endif %}

                            <tr class="bg-gray-100 border-t border-gray-200">
                                <th colspan="4" class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
                                    {{ 'Total'|t('market') }}
                                </th>
                                <td class="px-6 py-4 whitespace-nowrap font-medium text-right text-sm text-gray-500">
                                    {{ order.storedTotalPrice|currency(order.currency, [], [], true) }}
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {# Next / prev links #}
    {% set allOrderIds = craft.orders
        .isCompleted(true)
        .limit(null)
        .orderBy('dateOrdered desc')
        .relatedTo({
            'targetElement': currentVendor,
            'field': 'vendor'
        })
        .ids()
    %}

    {% if allOrderIds|length > 1 %}
        <nav class="flex items-center justify-between sm:px-0 mt-6">
        {% for id in allOrderIds %}
            {% if id == order.id %}
                {% if not loop.first %}
                    <div class="w-0 flex-1 flex">
                        <a href="{{ url('market/orders/'~allOrderIds[loop.index0-1]) }}" class="pr-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700">
                            {# Heroicon name: solid/arrow-narrow-left #}
                            <svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
                            </svg>
                            Previous
                        </a>
                    </div>
                {% endif %}
                {% if not loop.last %}
                    <div class="w-0 flex-1 flex justify-end">
                        <a href="{{ url('market/orders/'~allOrderIds[loop.index0+1]) }}" class="pl-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700">
                            Next
                            {# Heroicon name: solid/arrow-narrow-right #}
                            <svg class="ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </a>
                    </div>
                {% endif %}
            {% endif %}
        {% endfor %}
        </nav>
    {% endif %}
{% endblock %}