<div class="crayons-card grid gap-6 p-6 mb-6">
  <h3>Billing Details</h3>

  <% if current_user.stripe_id_code.blank? %>
    <%= form_tag stripe_active_cards_path, id: "credit-card-form", method: :post do %>
      <article>
        <% if flash[:error].present? %>
          <div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger">
            <p><%= flash[:error] %></p>
          </div>
        <% end %>
      </article>

      <button id="add-credit-card-button" class="crayons-btn credit-card-button" type="button">Add Credit Card</button>
    <% end %>
  <% else %>
    <div class="billing-history-header">Your Credit Cards</div>
    <% @customer.sources.each do |source| %>
      <div class="billing-item">
        <p><%= source.brand %> ending in <%= source.last4 %></p>
        <p class="billing-item-detail">Expires <%= source.exp_month %> / <%= source.exp_year %></p>
        <% if source.id == @customer.default_source %>
          <p class="billing-item-detail billing-item-green">primary</p>
          <%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
            <button class="crayons-btn crayons-btn--danger">Remove card</button>
          <% end %>
        <% else %>
          <%= form_tag "/stripe_active_cards/#{source.id}", method: :patch do %>
            <button class="crayons-btn crayons-btn--secondary">Make primary</button>
          <% end %>
          <%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
            <button class="crayons-btn crayons-btn--danger">Remove card</button>
          <% end %>
        <% end %>
      </div>
    <% end %>
    <%= form_tag "/stripe_active_cards", id: "credit-card-form", method: :post do %>
      <br />
      <div class="stripe-button-wrapper">
        <button id="add-credit-card-button" class="crayons-btn credit-card-button">+ Add Another Credit Card</button>
      </div>
    <% end %>
  <% end %>
  <script src="https://checkout.stripe.com/checkout.js"></script>

  <script>
    setTimeout(function () {
      var handler = StripeCheckout.configure({
        key: '<%= Rails.configuration.stripe[:publishable_key] %>',
        image: "https://thepracticaldev.s3.amazonaws.com/i/xoxvppfjorrnxudkzskw.jpg",
        locale: 'auto',
        token: function (token) {
          var form = document.getElementById("credit-card-form")
          addHidden(form, 'stripe_token', token.id);
          form.submit();
        }
      });

      document.getElementById('add-credit-card-button').addEventListener('click', function (e) {
        // Open Checkout with further options:
        handler.open({
          description: 'Add Credit Card',
          amount: 0,
          email: "<%= current_user.email %>",
          panelLabel: "Add Card",
          allowRememberMe: false,
          zipCode: true,
        });
        e.preventDefault();
      });

      // Close Checkout on page navigation:
      window.addEventListener('popstate', function () {
        handler.close();
      });
    }, 220)

    function addHidden(theForm, key, value) {
      // Create a hidden input element, and append it to the form:
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = key; // 'the key/name of the attribute/field that is sent to the server
      input.value = value;
      theForm.appendChild(input);
    }
  </script>
</div>
