.-.-.-.-.-

{% extends 'shop/_private/layouts' %}
{#
Outputs a form for collecting an order’s shipping and billing address.

@var cart \craft\commerce\elements\Order
#}

{# @var addresses \craft\commerce\models\Address[] #}
{% set addresses = currentUser ? currentUser.getAddresses() : [] %}

{% block main %}
  
  <div class="md:flex md:-mx-8">
    <div class="md:w-2/3 md:px-8">
      <h1 class="text-xl font-bold">
        {{- 'Where should we send your order?'|t -}}
      </h1>

<div class="mt-6">
        <form method="post" action="">
          {{ csrfInput() }}
          {{ actionInput('commerce/cart/update-cart') }}
          {{ successMessageInput('Addresses selected.') }}
          {{ redirectInput('shop/checkout/shipping') }}

{% if not cart.email %}
            <div class="mb-6">
              <label for="email">{{ 'Email'|t }}</label>
              {{ input('email', 'email', cart.email, {
                id: 'email',
                placeholder: 'email@site.com',
                class: ['w-full', 'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded']
              }) }}
              <span class="flash">{{ cart.getErrors('email')|join }}</span>
            </div>
          {% endif %}

{{ include('shop/_private/address/fieldset', {
            title: 'Shipping Address'|t,
            classes: 'ShippingAddress',
            name: 'shippingAddress',
            primaryIdName: 'primaryShippingAddressId',
            sourceIdName: 'sourceShippingAddressId',
          }) }}

<div class="mt-3">
            <label>
              {{ input('checkbox', 'billingAddressSameAsShipping', 1, {
                id: 'billingAddressSameAsShipping',
                checked: true
              }) }}
              {{ 'Use same address for billing'|t }}
            </label>
          </div>

{% if currentUser %}
          <div class="mt-3">
            <label>
              {{ input('checkbox', 'makePrimaryShippingAddress', 1, {
                id: 'makePrimaryShippingAddress',
              }) }}
              {{ 'Make this my default shipping address'|t }}
            </label>
          </div>
          {% endif %}

<div class="mt-8">
            {{ include('shop/_private/address/fieldset', {
              title: 'Billing Address'|t,
              classes: 'BillingAddress hidden',
              name: 'billingAddress',
              primaryIdName: 'primaryBillingAddressId',
              sourceIdName: 'sourceBillingAddressId',
            }) }}
          </div>

{% if currentUser %}
          <div class="mt-3">
            <label>
              {{ input('checkbox', 'makePrimaryBillingAddress', 1, {
                id: 'makePrimaryBillingAddress',
              }) }}
              {{ 'Make this my default billing address'|t }}
            </label>
          </div>
          {% endif %}

<div class="mt-3 flex justify-end">
            {{ 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: 'Confirm addresses'|t
            }) }}
          </div>
        </form>
      </div>
    </div>

<div class="mt-8 pr-0 md:w-1/3 md:mt-0  md:pr-8">
      {% include "shop/checkout/_includes/order-summary" %}
    </div>
  </div>

{% js %}
  var $fieldsets = document.querySelectorAll('.js-address-fieldset');

if ($fieldsets && $fieldsets.length) {
    $fieldsets.forEach(function(el) {
      var $addressSelects = el.querySelectorAll('.js-address-select');

if ($addressSelects && $addressSelects.length) {
        $addressSelects.forEach(function(el) {
          var $radio = el.querySelector('.js-radio input');
          var $body = el.querySelector('.js-body');

if ($radio) {
            if ($body) {
              // Creating new address
              $radio.addEventListener('change', function(ev) {
                if (ev.target.checked) {
                  $body.classList.remove('hidden');
                } else {
                  $body.classList.add('hidden');
                }
              });

if ($radio.checked) {
                $body.classList.remove('hidden');
              }
            } else {
              // Selecting existing address
              $radio.addEventListener('change', function(ev) {
                if (ev.target.checked) {
                  var $newBox = document.querySelector('.js-address-select[data-model-name="' + ev.target.dataset.modelName + '"]');
                  if ($newBox) {
                    $newBox.querySelector('.js-body').classList.add('hidden');
                  }
                }
              });
            }
          }
        });
      }
    });
  }

var $billingSameAs = document.querySelector('#billingAddressSameAsShipping');
  if ($billingSameAs) {
    $billingSameAs.addEventListener('change', function(ev) {
      var $billingFieldSet = document.querySelector('.js-address-fieldset.BillingAddress');
      $billingFieldSet.classList.toggle('hidden');

for (let input of document.querySelector('.js-address-box.BillingAddress').querySelectorAll('input')) {
        if ($billingSameAs.checked === true) {
          input.setAttribute('disabled', '');
        } else if (input.hasAttribute('disabled')) {
          input.removeAttribute('disabled');
        }
      }
    });
  }
  {% endjs %}

{% js %}
    {% if not cart.hasMatchingAddresses() or (cart.billingAddress and cart.billingAddress.hasErrors() and not cart.hasMatchingAddresses()) %}
      $billingSameAs.click();
    {% endif %}
  {% endjs %}

{% endblock %}

/srv/users/craft4/apps/craft4-newsite-space/public/../templates/shop/checkout/addresses.twig