{{ header }}

<main id="account-address" class="franklin-account-page franklin-address-page">
  <div class="container">

    <nav class="franklin-breadcrumb account-breadcrumb" aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
            {% if loop.last %}
              {{ breadcrumb.text }}
            {% else %}
              <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ol>
    </nav>

    {% if success %}
      <div class="alert alert-success alert-dismissible fade show address-alert" role="alert">
        <i class="bi bi-check-circle-fill"></i>
        <span>{{ success }}</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endif %}

    {{ content_top }}

    <section class="address-hero">
      <div class="address-hero-content">
        <span class="address-eyebrow">
          <i class="bi bi-geo-alt-fill"></i>
          Delivery Preferences
        </span>

        <h1>{{ text_address_book }}</h1>

        <p>
          Manage your billing and delivery addresses to make checkout faster and more convenient.
        </p>
      </div>

      <a href="{{ add }}" class="btn address-add-button">
        <i class="bi bi-plus-circle"></i>
        {{ button_new_address }}
      </a>
    </section>

    <div class="address-page-grid">

      <aside class="address-info-card">
        <span class="address-info-icon">
          <i class="bi bi-house-check"></i>
        </span>

        <h2>Address Book</h2>

        <p>
          Keep your delivery details accurate so your herbal products reach the correct destination without delay.
        </p>

        <div class="address-info-list">
          <div>
            <i class="bi bi-check2-circle"></i>
            <span>
              <strong>Faster Checkout</strong>
              <small>Select a saved address instantly.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-truck"></i>
            <span>
              <strong>Accurate Delivery</strong>
              <small>Reduce delays caused by incomplete details.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-shield-check"></i>
            <span>
              <strong>Secure Information</strong>
              <small>Your account details remain protected.</small>
            </span>
          </div>
        </div>

        <a href="{{ back }}" class="btn address-back-button">
          <i class="bi bi-arrow-left"></i>
          {{ button_back }}
        </a>
      </aside>

      <section class="address-list-card">
        <div class="address-list-heading">
          <div>
            <span class="address-list-heading-icon">
              <i class="bi bi-journal-bookmark-fill"></i>
            </span>
          </div>

          <div>
            <h2>Your Saved Addresses</h2>
            <p>Edit, remove, or add a new billing and delivery address.</p>
          </div>
        </div>

        <div id="address" class="address-list-container" aria-live="polite">
          {{ list }}
        </div>
      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('#address').on('click', '.btn-danger', function(e) {
    e.preventDefault();

    var element = this;
    var deleteUrl = $(element).attr('href');

    if (!deleteUrl) {
        return;
    }

    $.ajax({
        url: deleteUrl,
        dataType: 'json',

        beforeSend: function() {
            $(element)
                .prop('disabled', true)
                .addClass('disabled')
                .attr('aria-disabled', 'true');
        },

        complete: function() {
            $(element)
                .prop('disabled', false)
                .removeClass('disabled')
                .removeAttr('aria-disabled');
        },

        success: function(json) {
            $('.address-alert').remove();

            if (json['error']) {
                $('#address').before(
                    '<div class="alert alert-danger alert-dismissible fade show address-alert" role="alert">' +
                        '<i class="bi bi-exclamation-circle-fill"></i>' +
                        '<span>' + json['error'] + '</span>' +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                    '</div>'
                );
            }

            if (json['success']) {
                $('#address').before(
                    '<div class="alert alert-success alert-dismissible fade show address-alert" role="alert">' +
                        '<i class="bi bi-check-circle-fill"></i>' +
                        '<span>' + json['success'] + '</span>' +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                    '</div>'
                );

                $('#address').load(
                    'index.php?route=account/address.list&language={{ language }}&customer_token={{ customer_token }}'
                );
            }
        },

        error: function(xhr, ajaxOptions, thrownError) {
            console.error(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

            $('.address-alert').remove();

            $('#address').before(
                '<div class="alert alert-danger alert-dismissible fade show address-alert" role="alert">' +
                    '<i class="bi bi-exclamation-circle-fill"></i>' +
                    '<span>Unable to update the address book. Please try again.</span>' +
                    '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                '</div>'
            );
        }
    });
});
//--></script>

{{ footer }}