.-.-.-.-.-

{% extends 'shop/_private/layouts' %}

{% set number = craft.app.request.getRequiredParam('number') %}

{# @var order \craft\commerce\elements\Order #}
{% set order = craft.orders()
  .number(number)
  .one() %}

{% set extraHead %}
  <meta name="robots" content="noindex">
{% endset %}

{% if not order or order.isCompleted == false %}
  {% redirect 'shop/customer' %}
{% endif %}

{% block main %}
  
  {% if currentUser %}
    <div class="mt-3">
      <p><a href="{{ url('/shop/customer') }}" class="text-blue-500 hover:text-blue-600">&larr; {{ 'View My Orders'|t }}</a></p>
    </div>
  {% endif %}

<div class="lg:flex mt-5">
    <div class="lg:w-1/2">
      <h1 class="text-2xl font-semibold">
        {{- 'Order {ref}'|t({ ref: order.reference }) -}}
        <small class="block text-sm text-gray-600 font-normal">{{ order.dateOrdered|date }}</small>
      </h1>
    </div>
    <div class="lg:w-1/2 lg:text-right">
      {# Display a link to download a PDF if the order has a PDF URL and a PDF has been configured #}
      {% if order.pdfUrl and craft.commerce.pdfs.hasEnabledPdf %}
        <a href="{{ order.getPdfUrl('receipt') }}" download target="_blank" class="text-blue-500 hover:text-blue-600">
          {{ 'Download PDF'|t }}
        </a>
      {% endif %}
    </div>
  </div>

<div class="lg:flex lg:-mx-6 my-6">
    <div class="lg:w-1/3 lg:mx-6">
      {# High-level details #}
      <div class="flex items-center w-full">
        <div class="text-sm text-gray-600 pr-2">{{ 'Customer'|t }}:</div>
        <div class="font-bold">{{ order.email }}</div>
      </div>
      <div class="flex items-center w-full">
        <div class="text-sm text-gray-600 pr-2">{{ 'Total'|t }}:</div>
        <div class="font-bold">{{ order.totalPriceAsCurrency }}</div>
      </div>
      <div class="flex items-center w-full">
        <div class="text-sm text-gray-600 pr-2">{{ 'Payment Status'|t }}:</div>
        <div class="font-bold">{{ order.paidStatushtml|raw }}</div>
      </div>
      <div class="flex items-center w-full">
        <div class="text-sm text-gray-600 pr-2">{{ 'Amount Paid'|t }}:</div>
        <div class="font-bold">{{ order.totalPaidAsCurrency }}</div>
      </div>
      {% if order.shippingMethodName %}
        <div class="flex items-center w-full">
          <div class="text-sm text-gray-600 pr-2">{{ 'Shipping Method'|t }}:</div>
          <div class="font-bold">{{ order.shippingMethodName }}</div>
        </div>
      {% endif %}

{# Address information #}
        <div class="mt-6">
          <h2 class="font-semibold">
            {{- 'Shipping Address'|t -}}
          </h2>
          {% if order.shippingAddress %}
            {{ craft.app.addresses.formatAddress(order.shippingAddress)|raw }}
          {% else %}
            <p>{{ 'Not submitted.'|t }}</p>
          {% endif %}
        </div>
        <div class="mt-6">
          <h2 class="font-semibold">
            {{- 'Billing Address'|t -}}
          </h2>
          {% if order.billingAddress %}
            {{ craft.app.addresses.formatAddress(order.billingAddress)|raw }}
          {% else %}
            <p>{{ 'Not submitted.'|t }}</p>
          {% endif %}
        </div>
    </div>
    <div class="mt-10 lg:w-2/3 lg:mx-6 lg:mt-0">
      {# Order item and adjustment detail #}
      <table class="w-full lg:-mt-2">
        <tbody>
        {% for item in order.lineItems %}
          <tr class="align-top">
            <td class="pb-3 {{ not loop.first ? 'border-t border-gray-300 border-dashed' : '' }}" rowspan="2">
              <h3 class="text-lg pt-2">
                {{ item.description }}
                {% if item.qty > 1 %}
                  <small>× {{ item.qty }}</small>
                {% endif %}
              </h3>
              <span class="text-gray-500 tracking-widest font-mono text-xs">
                  {{ item.sku }}
                </span>
              {% if item.options|length %}
                <div class="mt-2 relative">
                  <span class="absolute top-0 left-0 pt-2 pl-2 text-xs text-gray-500 uppercase tracking-wider">
                    {{ 'Options'|t }}
                  </span>
                  <code class="text-xs p-3 pt-8 bg-gray-100 inline-block tracking-wider font-mono text-gray-600">
                    {{- item.options|json_encode -}}
                  </code>
                </div>
              {% endif %}
            </td>
            <td class="py-3 {{ not loop.first ? 'border-t border-gray-300 border-dashed' : '' }}">
              {% if item.note %}
                <div>
                  <div class="text-xs block text-gray-500">{{ 'Note'|t }}:</div>
                  <div>{{ item.note }}</div>
                </div>
              {% endif %}
              {% if item.options.giftWrapped is defined %}
                <div>
                  <div class="text-xs block text-gray-500">{{ 'Gift Wrapped?'|t }}</div>
                  <div>{{ item.options.giftWrapped|title }}</div>
                </div>
              {% endif %}
            </td>

<td class="py-3 text-gray-500 {{ not loop.first ? 'border-t border-gray-300 border-dashed' : '' }} text-right">
              <div class="flex items-center w-full justify-end" title="{{ item.price }}">
                <div class="text-xs pr-2">{{ 'Price'|t }}:</div>
                <div class="text-sm tabular-nums">{% if item.onSale %}
                  <del>{% endif %}{{ item.priceAsCurrency }}{% if item.onSale %}</del>{% endif %}
                </div>
              </div>
              {% if item.onSale %}
                <div class="flex items-center w-full justify-end" title="{{ item.salePrice }}">
                  <div class="text-xs pr-2">{{ 'Sale Price'|t }}:</div>
                  <div class="text-sm tabular-nums">{{ item.salePriceAsCurrency }}</div>
                </div>
                <div class="flex items-center w-full justify-end" title="{{ item.saleAmount }}">
                  <div class="text-xs pr-2">{{ 'Sale Amount'|t }}:</div>
                  <div class="text-sm tabular-nums">{{ item.saleAmountAsCurrency }}</div>
                </div>
              {% endif %}
              <div class="flex items-center w-full justify-end" title="{{ item.subtotal }}">
                <div class="text-xs pr-2">{{ 'Subtotal'|t }}:</div>
                <div class="text-sm tabular-nums">{{ item.subtotalAsCurrency }}</div>
              </div>
            </td>
          </tr>
          <tr class="">
            <td class="pb-3 text-right" colspan="2">
              {% if item.adjustments|length %}
                <div class="text-left text-2xs uppercase tracking-wider text-gray-600">{{ 'Adjustments'|t }}</div>
                <div class="border-t border-gray-300 border-dotted mt-1">
                  {% for adjustment in item.adjustments %}
                    <div class="flex w-full items-center mt-2 text-sm">
                      <div class="pr-2">
                        <strong class="text-gray-400 text-xs uppercase">{{ adjustment.type }}</strong>
                      </div>
                      <div>
                        {{ adjustment.name }}
                        {% if adjustment.isEstimated %}<i
                                class="text-grey-dark">{{ 'Estimated'|t }}</i>{% endif %}<br>
                        {{ adjustment.description }}
                      </div>
                      <div class="ml-auto">
                          <span class="text-gray-500 tabular-nums" title="{{ adjustment.amount }}">
                            {{ ' ' ~ adjustment.amountAsCurrency }}
                          </span>
                      </div>
                    </div>
                  {% endfor %}
                </div>
              {% endif %}

<div class="flex items-center w-full justify-end mt-3" title="{{ item.total }}">
                <div class="text-sm text-gray-600 pr-2">{{ 'Total'|t }}:</div>
                <div class="font-bold tabular-nums">{{ item.totalAsCurrency }}</div>
              </div>
            </td>
          </tr>
        {% endfor %}

<tr>
          <td colspan="3" class="text-right pb-3">
            <div class="flex items-center w-full justify-end border-t border-gray-300 border-dotted pt-3"
                 title="{{ order.itemSubTotal }}">
              <div class="text-sm text-gray-600 pr-2">{{ 'Item Subtotal'|t }}:</div>
              <div class="font-bold tabular-nums">{{ order.itemSubtotalAsCurrency }}</div>
            </div>
          </td>
        </tr>

{% if order.orderAdjustments|length %}
          <tr class="border-t-2 border-gray-300">
            <td class="py-3"></td>
            <td colspan="2" class="py-3 pr-3">
              <div class="text-left text-2xs uppercase tracking-wider text-gray-600">{{ 'Order Adjustments'|t }}</div>
              <div class="border-t border-gray-300 border-dotted mt-1">
                {% for adjustment in order.orderAdjustments %}
                  <div class="flex w-full items-center mt-2 text-sm">
                    <div class="pr-2">
                      <strong class="text-gray-400 text-xs uppercase">{{ adjustment.type }}</strong>
                    </div>
                    <div>
                      {{ adjustment.name }}
                      {% if adjustment.isEstimated %}<i class="text-grey-dark">{{ 'Estimated'|t }}</i>{% endif %}<br>
                      {{ adjustment.description }}
                    </div>
                    <div class="ml-auto">
                        <span class="text-gray-500 tabular-nums" title="{{ adjustment.amount }}">
                          {{ ' ' ~ adjustment.amountAsCurrency }}
                        </span>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </td>
          </tr>
        {% endif %}
        <tr>
          <td colspan="2" class="border-t-2 border-gray-300"></td>
          <td class="text-right align-text-top border-t-2 border-gray-300 pt-3">
            <div class="mt-3">
              <strong class="text-sm text-gray-600">{{ 'Adjustment Totals'|t }}</strong>
            </div>

<div class="flex items-center w-full justify-end" title="{{ order.totalShippingCost }}">
              <div class="text-xs text-gray-500 pr-2">{{ 'Total Shipping'|t }}:</div>
              <div class="text-sm text-gray-500 tabular-nums">{{ order.totalShippingCostAsCurrency }}</div>
            </div>
            <div class="flex items-center w-full justify-end" title="{{ order.totalTax }}">
              <div class="text-xs text-gray-500 pr-2">{{ 'Total Tax'|t }}:</div>
              <div class="text-sm text-gray-500 tabular-nums">{{ order.totalTaxAsCurrency }}</div>
            </div>
            <div class="flex items-center w-full justify-end" title="{{ order.totalTaxIncluded }}">
              <div class="text-xs text-gray-500 pr-2">{{ 'Total Tax (inc)'|t }}:</div>
              <div class="text-sm text-gray-500 tabular-nums">{{ order.totalTaxIncludedAsCurrency }}</div>
            </div>
            {% if order.totalDiscount %}
              <div class="flex items-center w-full justify-end" title="{{ order.totalDiscount }}">
                <div class="text-xs text-gray-500 pr-2">{{ 'Total Discount'|t }}:</div>
                <div class="text-sm text-gray-500 tabular-nums">{{ order.totalDiscountAsCurrency }}</div>
              </div>
            {% endif %}
            <div class="flex items-center w-full justify-end mt-3" title="{{ order.totalPrice }}">
              <div class="text-gray-600 pr-2">{{ 'Total Price'|t }}:</div>
              <div class="text-xl font-bold tabular-nums">{{ order.totalPriceAsCurrency }}</div>
            </div>

<div class="flex items-center w-full justify-end mt-3" title="{{ order.totalPaid }}">
              <div class="text-gray-600 pr-2">{{ 'Total Paid'|t }}:</div>
              <div class="text-xl font-bold tabular-nums">{{ order.totalPaidAsCurrency }}</div>
            </div>

<div class="flex items-center w-full justify-end mt-3" title="{{ order.outstandingBalance }}">
              <div class="text-gray-600 pr-2">{{ 'Outstanding Balance'|t }}:</div>
              <div class="text-xl font-bold tabular-nums">{{ order.outstandingBalanceAsCurrency }}</div>
            </div>

{% if order.getOutstandingBalance() - order.getTotalAuthorized() > 0 %}
              <a href="{{ siteUrl(
                'shop/checkout/pay-static',
                { number: order.number, email: order.email
                }) }}" class="cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white"
              >
                {{- 'Make payment'|t -}}
              </a>
            {% endif %}
          </td>
        </tr>
        </tbody>
      </table>

{# Transactions #}
      <div class="mt-6">
        <h3 class="font-semibold">
          {{- 'Transactions'|t -}}
        </h3>
        <table class="w-full">
          <tbody>
          {% for transaction in order.transactions %}
            <tr>
              <td>
                <span class="mr-1 uppercase text-xs border rounded-sm px-2 py-1 tracking-wide{{ transaction.status == 'success' ? ' text-green-500 border-green-500' : '' }}">
                  {{- transaction.status -}}
                </span>
              </td>
              <td class="text-left align-text-top pt-3 pr-3 {% if transaction.getParent() %}pl-5{% endif %}">
                <span>
                  {{- transaction.amountAsCurrency }} {{ transaction.currency }} {{ transaction.type -}}
                </span>
                <br>
                <span class="text-gray-600 text-sm">
                  ({{ transaction.paymentAmountAsCurrency }} {{ transaction.paymentCurrency }} {{ 'paid'|t }})
                </span>
              </td>
              <td class="text-left align-text-top pt-3 pr-3 text-right">
                {{ transaction.dateCreated|datetime }}
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
{% endblock %}

/srv/users/craft4/apps/craft4-newsite-space/templates/shop/././customer/order.twig