.-.-.-.-.-

{% extends "shop/_private/layouts" %}
{#
Outputs cart.

@var cart \craft\commerce\elements\Order
#}
{% set requirePrescription = false %}
{% block main %}
  
  <h1 class="text-3xl block sm:inline">
    {{- 'Cart'|t -}}
  </h1>

{% if cart.lineItems|length %}
    <form method="post" action="">
      {{ csrfInput() }}
      {{ actionInput('commerce/cart/update-cart') }}
      {{ successMessageInput('Cart updated.'|t) }}
      <div class="lg:flex">
        <div class="lg:w-2/3">
          <table class="w-full">
            <tbody>
            {% for item in cart.lineItems %}
              {% if item.purchasable.product.requirePrescription %}
                yes
              {% endif %}
              <tr class="align-top">
                <td class="py-5 {{ not loop.first ? 'border-t border-gray-300 border-dashed' : '' }} overflow-hidden"
                    rowspan="2"
                >
                  <div class="w-full overflow-hidden max-w-md">
                    <div class="truncate">
                      <strong class="text-lg{% if item.hasErrors() %} text-red-500{% endif %}">
                        {{- item.description -}}
                      </strong>
                    </div>
                  </div>
                  <span class="text-gray-500 tracking-widest font-mono text-xs">{{ item.sku }}</span>
                  {% if item.options|length %}
                    <div class="mt-2 relative">
                      <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>
                      <span class="absolute top-0 left-0 pt-2 pl-2 text-xs text-gray-500 uppercase tracking-wider">
                        {{ 'Options'|t }}
                      </span>
                    </div>
                  {% endif %}
                  <div class="mt-6">
                    <label>
                      {{ input('checkbox', 'lineItems[' ~ item.id ~ '][remove]', 1) }}
                      <span>{{ 'Remove'|t }}</span>
                    </label>
                  </div>
                </td>
                <td class="pt-3 pb-6 {{ not loop.first ? 'border-t border-gray-300 border-dashed' : '' }}">
                  {# Quantity and note fields #}
                  {% set hasDonationAmount = item.options.donationAmount is defined %}
                  <div class="lg:flex">
                    {% if hasDonationAmount %}
                      <div class="lg:mr-3">
                          <label for="lineitem-donationAmount-{{ item.id }}">
                            <span class="text-gray-500 text-xs block">
                              {{- 'Donation Amount'|t -}}
                            </span>
                          </label>
                          {{ input('text', 'lineItems[' ~ item.id ~ '][options][donationAmount]', item.options.donationAmount, {
                            id: 'lineitem-donationAmount-' ~ item.id,
                            class: 'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded w-32',
                            placeholder: 'Donation'|t
                          }) }}
                      </div>
                    {% endif %}
                    <div class="lg:mr-3{{ hasDonationAmount ? ' hidden' : '' }}">
                      <span class="text-gray-500 text-xs block">
                        {{- 'Qty'|t -}}
                      </span>
                      {{ input(hasDonationAmount ? 'hidden' : 'number', 'lineItems[' ~ item.id ~ '][qty]', item.qty, {
                        min: 0,
                        class: [
                          'w-32',
                          item.getFirstError('qty') ? 'border-red-500 border',
                          'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded'
                        ]
                      }) }}
                    </div>
                    <div class="lg:w-1/2">
                      <label for="lineitem-note-{{ item.id }}">
                      <span class="text-gray-500 text-xs block">
                        {{- 'Item Note'|t -}}
                      </span>
                      </label>
                      {{ input('text', 'lineItems[' ~ item.id ~ '][note]', item.note, {
                        id: 'lineitem-note-' ~ item.id,
                        class: 'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded',
                        size: 20,
                        placeholder: 'My Note'|t
                      }) }}
                    </div>
                  </div>
                  {% if item.options.giftWrapped is defined %}
                    {% tag 'select' with {
                      name: 'lineItems[' ~ item.id ~ '][options][giftWrapped]',
                      class: ['mt-3', 'w-32', 'h-9', 'max-w-full', 'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded']
                    } %}
                      {{ tag('option', {
                        value: 'no',
                        selected: item.options.giftWrapped == 'no',
                        text: 'No gift wrap'|t
                      }) }}
                      {{ tag('option', {
                        value: 'yes',
                        selected: item.options.giftWrapped == 'yes',
                        text: 'Gift wrapped'|t
                      }) }}
                    {% endtag %}
                  {% endif %}
                </td>

<td class="py-5 text-gray-500 {{ not loop.first ? 'border-t border-gray-300 border-dashed' : '' }} text-right">
                  {% if not cart.hasErrors() %}
                    <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>

{% set itemSales = item.snapshot.sales ?? [] %}
                      {% if itemSales|length %}
                        <div class="flex w-full justify-end">
                          <div class="text-xs pr-2">{{ 'Sales Applied'|t }}:</div>
                          <div class="text-xs">
                            {% for sale in itemSales %}
                              {{ sale.name }}<br>
                            {% endfor %}
                          </div>
                        </div>
                      {% endif %}
                    {% 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>
                  {% endif %}
                </td>
              </tr>
              <tr>
                <td class="pb-4 text-right" colspan="3">
                  {% if not cart.hasErrors() and 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 mt-2 text-sm">
                          <div class="text-left">
                            <strong class="text-gray-400 text-xs uppercase">{{ adjustment.type }}</strong><br>
                            {{ adjustment.name }}
                            {% if adjustment.isEstimated %}<i class="text-grey-dark">{{ 'Estimated'|t }}</i>{% endif %}<br>
                            <span class="text-gray-600 text-xs">{{ adjustment.description }}</span>
                          </div>
                          <div class="ml-auto">
                            <span class="text-gray-500 tabular-nums" title="{{ adjustment.amount }}">
                              {{ ' ' ~ adjustment.amountAsCurrency }}
                            </span>
                          </div>
                        </div>
                      {% endfor %}
                    </div>
                  {% endif %}

{% if not cart.hasErrors() %}
                    <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>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}

{% if not cart.hasErrors() %}
              <tr>
                <td colspan="3" class="text-right pb-4">
                  <div class="flex items-center w-full justify-end border-t border-gray-300 border-dotted pt-4"
                       title="{{ cart.itemSubTotal }}"
                  >
                    <div class="text-sm text-gray-600 pr-2">{{ 'Items Total'|t }}:</div>
                    <div class="font-bold tabular-nums">{{ cart.itemTotalAsCurrency }}</div>
                  </div>
                </td>
              </tr>
            {% endif %}

{% if not cart.hasErrors() and cart.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 cart.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' }}</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="3" class="text-right align-text-top border-t-2 border-gray-300 pt-3">
                {% set valueClasses = 'text-xs text-gray-500 tabular-nums' %}
                {% set labelClasses = valueClasses ~ ' pr-2' %}
                {% if not cart.hasErrors() %}
                  <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="{{ cart.getTotalShippingCost() }}">
                    <div class="{{ labelClasses }}">{{ 'Total Shipping'|t }}:</div>
                    <div class="{{ valueClasses }}">{{ cart.getTotalShippingCost()|commerceCurrency(cart.currency) }}</div>
                  </div>
                  <div class="flex items-center w-full justify-end" title="{{ cart.getTotalTax() }}">
                    <div class="{{ labelClasses }}">{{ 'Total Tax'|t }}:</div>
                    <div class="{{ valueClasses }}">{{ cart.getTotalTax()|commerceCurrency(cart.currency) }}</div>
                  </div>
                  <div class="flex items-center w-full justify-end" title="{{ cart.getTotalTaxIncluded() }}">
                    <div class="{{ labelClasses }}">{{ 'Total Tax (inc)'|t }}:</div>
                    <div class="{{ valueClasses }}">{{ cart.getTotalTaxIncluded()|commerceCurrency(cart.currency) }}</div>
                  </div>
                  {% if cart.getTotalDiscount() != 0 %}
                    <div class="flex items-center w-full justify-end" title="{{ cart.getTotalDiscount() }}">
                      <div class="{{ labelClasses }}">{{ 'Total Discount'|t }}:</div>
                      <div class="{{ valueClasses }}">{{ cart.getTotalDiscount()|commerceCurrency(cart.currency) }}</div>
                    </div>
                  {% endif %}

<div class="flex items-center w-full justify-end mt-3" title="{{ cart.totalPrice }}">
                    <div class="text-gray-600 pr-2">{{ 'Total Price'|t }}:</div>
                    <div class="text-xl font-bold tabular-nums">{{ cart.totalPriceAsCurrency }}</div>
                  </div>
                {% endif %}
              </td>
            </tr>
            <tr>
              <td class="pt-3 text-right" colspan="3">
                <div class="flex w-full justify-end">
                </div>
                <div class="pt-3">
                  <div class="flex w-full justify-end">
                    <div class="pr-2">
                      {{ redirectInput('shop/cart') }}
                      <button type="submit" class="cursor-pointer rounded px-4 py-2 inline-block bg-gray-500 hover:bg-gray-600 text-white hover:text-white">
                        {{- 'Update Cart'|t -}}
                      </button>
                    </div>
                    <div>
                      {% if not cart.hasErrors() %}
                        <a href="{{ url('shop/checkout') }}"
                           class="cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white"
                        >
                          {{- 'Checkout'|t -}}
                        </a>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            </tbody>
          </table>

</div>
        <div class="lg:w-1/3 lg:pl-8">
          <div class="pt-3">
            {{ include('shop/cart/_includes/shipping-estimator') }}
          </div>
          <div class="mt-3 text-left w-full {{ cart.getFirstError('couponCode') ? 'bg-red-100 border-red-500 border-b-2 p-6' : 'bg-gray-100 border-blue-300 border-b-2 p-6' }}">
            <div class="flex justify-between items-center">
              <h5 class="font-bold">
                {{- 'Coupon Code'|t -}}
              </h5>
              {{ input('text', 'couponCode', cart.couponCode, {
                width: 11,
                class: [
                  'w-48',
                  'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded',
                  cart.getFirstError('couponCode') ? 'text-red-500',
                ],
              }) }}
            </div>
            {% if cart.getFirstError('couponCode') %}
              <div class="text-red-500">{{ cart.getFirstError('couponCode') }}</div>
            {% endif %}
          </div>
        </div>
      </div>
    </form>
    <form method="post" enctype="multipart/form-data">
      {{ csrfInput() }}
      {{ hiddenInput('action', 'commerce/cart/update-cart') }}
      {#{ hiddenInput('action','my-module/cart/upload') }}
      {{ redirectInput('shop/cart') }#}

{{ input('file', 'fields[orderfile][]', options={
        multiple: false,
      }) }}
      <input type="text" name="test">

<button type="submit">Upload File</button>
    </form>

<a href="javascript: appendHelcimPayIframe('14e9f5f4ee658fae724445')">
      Pay Now
    </a>
  {% else %}
    <p>{{ 'Empty cart. Add items on the {link} page.'|t({
      link: tag('a', { href: url('/shop/products'), text: 'products', class: 'underline' })
    })|raw }}</p>
  {% endif %}
  <script async defer type="text/javascript" src="https://secure.helcim.app/helcim-pay/services/start.js"></script>
  {% js %}

window.addEventListener('message', (event) => {

const helcimPayJsIdentifierKey = 'helcim-pay-js-2ee055287267d37a3f6129';

if(event.data.eventName === helcimPayJsIdentifierKey){

if(event.data.eventStatus === 'ABORTED'){
    console.error('Transaction failed!', event.data.eventMessage);
    }

if(event.data.eventStatus === 'SUCCESS'){
    console.log('Transaction success!', event.data.eventMessage);
    }

}

});

{% endjs %}
{% endblock %}

/srv/users/craft4/apps/craft4-newsite-space/templates/shop/cart/./index.twig