.-.-.-.-.-

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

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

{# @var paymentSources \craft\commerce\models\PaymentSource[] #}
{% set paymentSources = craft.commerce.paymentSources.getAllPaymentSourcesByCustomerId(currentUser.id) %}

{# @var gateways \craft\commerce\base\GatewayInterface[] #}
{% set gateways = craft.commerce.gateways.allCustomerEnabledGateways %}

{% block main %}
  
  <h1 class="text-3xl block sm:inline">
    {{- 'Manage Stored Cards'|t -}}
  </h1>
  {% if paymentSources|length %}
    <div class="mt-3 flex flex-wrap -mx-2">
      {% for paymentSource in paymentSources %}
        <div class="w-full mt-3 md:w-1/2 lg:w-1/3 px-2">
          <div class="card flex justify-between bg-gray-100 border-blue-300 border-b-2 p-6">
            <div>
              <strong>{{ paymentSource.description }}</strong>
              {% if paymentSource.gateway %}
                <div class="text-grey-dark">{{ paymentSource.gateway.name }}</div>
              {% endif %}
            </div>

<div>
              <form method="post" action="">
                {{ csrfInput() }}
                {{ redirectInput('/shop/customer/cards') }}
                {{ actionInput('commerce/payment-sources/delete') }}
                {{ hiddenInput('id', paymentSource.id) }}
                {{ tag('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',
                  text: 'Delete card'|t
                }) }}
              </form>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}

<div class="max-w-md">
    <div>
      <div class="field">
        <label for="gatewayId" class="block">
          {{- 'Payment Gateway'|t -}}
        </label>
        {% tag 'select' with {
          id: 'gatewayId',
          class: ['w-full', 'h-9', 'max-w-full', 'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded']
        } %}
          {{ tag('option', {
            value: '',
            disabled: true,
            selected: not cart.estimatedShippingAddress,
            text: 'Select gateway'|t ~ '...'
          }) }}
          {% for gateway in gateways %}
            {% if gateway.supportsPaymentSources() %}
              {{ tag('option', {
                value: gateway.id,
                text: gateway.name
              }) }}
            {% endif %}
          {% endfor %}
        {% endtag %}
      </div>
    </div>
    <div class="mt-3">
      {% for gateway in gateways %}
        {% if gateway.supportsPaymentSources() %}
        <div id="fields-{{ gateway.id }}"
             class="js-gateway-fields hidden pt-3 mt-3 border-t border-gray-300 border-dashed"
        >
          <form id="gateway-{{ gateway.id }}"
                method="post"
                action=""
                class="form-horizontal max-w-md"
          >
            {{ csrfInput() }}
            {{ actionInput('commerce/payment-sources/add') }}
            {{ hiddenInput('gatewayId', gateway.id) }}
            {{ hiddenInput('successMessage', 'Added payment source.'|hash) }}
            {{ hiddenInput('cancelUrl', '/shop/customer/cards'|hash) }}
            {{ redirectInput('/shop/customer/cards') }}

<div class="gateway-payment-form max-w-3/4">
              {{ gateway.getPaymentFormHtml({})|raw }}
            </div>

{# Force in some basic styling for the gateway-provided form markup (better to build your own form markup!) #}
            <style>
            .gateway-payment-form input { padding: 0.5rem 1rem; width: 100%; margin-bottom: 1rem; line-height: 1.25; border: 1px solid rgba(209,213,219); border-radius: 0.25rem; }
            .gateway-payment-form input:hover { border: 1px solid rgba(107,114,128); }
            {# Column containers #}
            .gateway-payment-form .grid,
            .gateway-payment-form .card-data div div:nth-child(2) { display: flex; margin-right: -0.75rem; margin-left: -0.75rem; }
            {# Columns #}
            .gateway-payment-form .grid .item,
            .gateway-payment-form input.card-expiry,
            .gateway-payment-form input.card-cvc { width: 50%; margin-right: 0.75rem; margin-left: 0.75rem; }
            </style>

{{ input('text', 'description', '', {
              maxlength: 70,
              autocomplete: 'off',
              placeholder: 'Card description'|t,
              class: ['w-full', 'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded']
            }) }}

<div class="mt-4 text-right">
              {{ tag('button', {
                type: 'submit',
                class: 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white',
                text: 'Add card'|t
              }) }}
            </div>
          </form>
        </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>

{% js %}
    var gatewaySelect = document.querySelector('#gatewayId');
    var gatewayFields = document.querySelectorAll('.js-gateway-fields');

if (gatewaySelect && gatewayFields.length) {
      gatewaySelect.addEventListener('change', function(ev) {
        gatewayFields.forEach(function(el) {
          el.classList.add('hidden');
        });

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