<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ycommerce" uri="http://hybris.com/tld/ycommercetags" %>
<%@ taglib prefix="util" tagdir="/WEB-INF/tags/addons/braintreeaddon/responsive/util" %>
<%@ taglib prefix="importData" tagdir="/WEB-INF/tags/addons/braintreeaddon/responsive/util/pages" %>
<%@ taglib prefix="address" tagdir="/WEB-INF/tags/addons/braintreeaddon/responsive/address" %>
<%@ taglib prefix="formElement" tagdir="/WEB-INF/tags/responsive/formElement" %>

<c:url value="${contextPath}/_ui/addons/braintreeaddon/responsive/common/images/spinner.gif" var="imgSpinnerPath" />

<jsp:include page="../../../messages/braintreeErrorMessages.jsp" />

<div id="globalMessages"></div>
<div id="add-payment-method-page-container"  class="container">
    <div class="account-section-content	 account-section-content-small">
        <div class="account-addressbook">
            <c:if test="${braintreeConfigData.generalConfigurationData.storeInVault}">
                <div class="no-payment-methods-message headline hidden">
                    <spring:theme code="checkout.multi.paymentMethod.noPaymentMethods" />
                </div>
                <div class="account-section-header">
                    <spring:theme code="account.payment.address.addPaymentMethod.title" text="Add Payment Method" />
                </div>
                <br>
                <c:choose>
                    <c:when test="${braintreeConfigData.generalConfigurationData.dropIn}">
                        <ycommerce:testId code="paymentDetailsForm">
                            <form:form id="braintree-payment-form"
                                action="${request.contextPath}/my-account/add-payment-method" method="POST" modelAttribute="addressForm">
                                <div id="dropin-container" class="dropin-container-add-payment-method hidden"></div>
                                <div id="spinner-container">
                                    <div class="wait-spinner"></div>
                                </div>
                                <input type="hidden" name="paypal_email" id="paypalEmail" />
                                <div class="select-billing-address-container hidden">
                                  <label for="billing-address" class="control-label ">
                                    <spring:theme code="braintree.text.cc.billing.address" />
                                  </label>
                                  <br />
                                  <div id="selected-address"> </div>
                                  <div class="form-group">
                                    <div class="control form-group">
                                      <select id="billingAddressSelector" name="selected-address" class="form-control custom-select-form-control">
                                        <option value="noAddress">Select billing address</option>
                                        <c:forEach var="address" items="${deliveryAddresses}">
                                          <c:choose>
                                            <c:when test="${addressForm.addressId eq address.id}">
                                              <option value="${address.id}" selected>
                                                ${address.formattedAddress}</option>
                                            </c:when>
                                            <c:otherwise>
                                              <option value="${address.id}">
                                                ${address.formattedAddress}</option>
                                            </c:otherwise>
                                          </c:choose>
                                        </c:forEach>
                                        <c:choose>
                                          <c:when test="${empty addressForm.addressId && not empty accErrorMsgs}">
                                            <option value="newAddress" selected>Add new address
                                            </option>
                                          </c:when>
                                          <c:otherwise>
                                            <option value="newAddress">Add new address</option>
                                          </c:otherwise>
                                        </c:choose>
                                      </select>
                                    </div>
                                  </div>

                                  <div id="addressFormSelectorContainer" class="form-group">
                                    <div id="countrySelector" class="form-group">
                                      <formElement:formSelectBox idKey="address.country" labelKey="address.country" path="countryIso" mandatory="true"
                                        skipBlank="false" skipBlankMessageKey="address.country" items="${countries}" itemValue="isocode"
                                        selectCSSClass="form-control" />
                                    </div>
                                    <div id="i18nAddressForm" class="i18nAddressForm">
                                      <c:if test="${not empty country}">
                                        <address:addressFormElements regions="${regions}" country="${country}" />
                                      </c:if>
                                    </div>
                                      <div id="saveAddressComponentDropIn" style="display:flex">
                                          <input type="checkbox"
                                                 id="shouldSaveAddressMyAccountDropIn"
                                                 name="shouldSaveAddressMyAccountDropIn"/>
                                          <label for="shouldSaveAddressMyAccountDropIn">
                                              <spring:theme code="account.payment.saveAddress"/>
                                          </label>
                                      </div>
                                  </div>
                                </div>
                                </div>
                                </div>
                            </form:form>
                        </ycommerce:testId>

                        <div id="braintree-payment-form-button-container">
                            <button id="submit-button"
                                class="btn btn-primary btn-block btn--continue-checkout hidden submit-button-add-payment-method"
                                type="submit">
                                <spring:theme code="account.add.paymentMethod.save" text="Save" />
                            </button>
                            <c:url value="/my-account/payment-details" var="accountPaymentMethodUrl" />
                            <a class="btn btn-block btn-default" href="${accountPaymentMethodUrl}">
                                <spring:theme code="account.add.paymentMethod.cancel" text="Cancel" />
                            </a>
                        </div>
                    </c:when>
                    <c:otherwise>

                    <c:if test="${braintreeConfigData.payPalConfigurationData.intent ne 'order'}">
                            <c:choose>
                                <c:when test="${braintreeCheckoutData.payPalPaymentMethod.payPalStandardEnabled}">
                                 <div class="<c:if test="${braintreeCheckoutData.paymentMethodsLimitation.payPalOnLimit}">disabledArea</c:if>">
                                    <div style="overflow: auto;" id="paypal-checkbox">
                                        <input id="paymentMethodPayPal" type="radio" name="paymentMethodSelection"
                                            value="paypal" class="paypalselection" checked="true" />
                                        <div class="paypalimage" id="paypal-container">
                                            <div class="cmsimage">
                                                <img src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-medium.png"
                                                    alt="Buy now with PayPal" class="payment-logo" />
                                            </div>
                                        </div>
                                        <div id="text" class="paypalurl">
                                            <a style="padding-left: 10px;"
                                                href="https://www.paypal.com/webapps/mpp/paypal-popup"
                                                title="How PayPal Works"
                                                onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;">
                                                <spring:theme code="braintree.text.what.is.paypal" />?
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <c:if test="${braintreeCheckoutData.paymentMethodsLimitation.payPalOnLimit}">
                                  <div class="warningText">
                                  <spring:theme code="paymentMethod.text.limitation"/>
                                  </div>
                                </c:if>
                                </c:when>
                                <c:otherwise>
                                    <div style="overflow: auto;"></div>
                                </c:otherwise>
                            </c:choose>
                        </c:if>
                        <br>
                        <c:choose>
                            <c:when test="${braintreeConfigData.googlePayConfigurationData.enabled}">
                             <div class="<c:if test="${braintreeCheckoutData.paymentMethodsLimitation.googlePayOnLimit}">disabledArea</c:if>">
                                <div style="overflow: auto;" id="googlepay" class="hide">
                                    <input id="paymentMethodGooglePay" type="radio" name="paymentMethodSelection"
                                        value="googlePay" class="paypalselection" />
                                    <div id="google-pay-button-container">
                                        <div class="cmsimage">
                                            <img class="google-pay-image"
                                                src="${contextPath}/_ui/addons/braintreeaddon/responsive/common/images/googlePay_mark.png"
                                                alt="Buy with GooglePay" class="payment-logo" />
                                        </div>
                                    </div>
                                </div>
                                <br>
                            </div>
                            <c:if test="${braintreeCheckoutData.paymentMethodsLimitation.googlePayOnLimit}">
                              <div class="warningText">
                              <spring:theme code="paymentMethod.text.limitation"/>
                              </div>
                            </c:if>
                            </c:when>
                            <c:otherwise>
                                <div style="overflow: auto;"></div>
                            </c:otherwise>
                        </c:choose>
                        <c:choose>
                            <c:when test="${braintreeConfigData.hostedFieldsConfigurationData.enabled}">
                              <div class="<c:if test="${braintreeCheckoutData.paymentMethodsLimitation.creditCardOnLimit}">disabledArea</c:if>">
                                <div style="overflow: auto;" id="braintree-container">
                                    <input id="creditCardPaymentMethod" type="radio" name="paymentMethodSelection"
                                        value="bt" class="paypalselection" checked="true" />
                                        <label for="creditCardPaymentMethod">
                                            <spring:theme code="paymentMethod.type.CreditCard" />
                                        </label>
                                    <input type="hidden" value="false" class="text" name="paypal_is_valid"
                                        id="paypal_is_valid">
                                </div>
                            </div>
                            <c:if test="${braintreeCheckoutData.paymentMethodsLimitation.creditCardOnLimit}">
                              <div class="warningText">
                              <spring:theme code="paymentMethod.text.limitation"/>
                              </div>
                            </c:if>
                            </c:when>
                            <c:otherwise>
                                <div style="overflow: auto;"></div>
                            </c:otherwise>
                        </c:choose>
                        <c:choose>
                            <c:when test="${braintreeConfigData.venmoConfigurationData.enabled}">
                                <div class="<c:if test="${braintreeCheckoutData.paymentMethodsLimitation.venmoOnLimit}">disabledArea</c:if>">
                                <div style="overflow: auto;" id="venmo" class="hide">
                                    <input id="paymentMethodVenmo" type="radio" name="paymentMethodSelection"
                                        value="venmo" class="paypalselection" checked="true" />
                                    <div id="venmo-mark-container">
                                        <div class="cmsimage">
                                            <img class="venmo-mark payment-logo"
                                                src="${contextPath}/_ui/addons/braintreeaddon/responsive/common/images/venmo_acceptance_mark.svg"
                                                alt="Venmo" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <c:if test="${braintreeCheckoutData.paymentMethodsLimitation.venmoOnLimit}">
                        <div class="warningText">
                            <spring:theme code="paymentMethod.text.limitation"/>
                        </div>
                        </c:if>
                            </c:when>
                            <c:otherwise>
                                <div style="overflow: auto;"></div>
                            </c:otherwise>
                        </c:choose>
                        <c:choose>
                            <c:when test="${braintreeConfigData.srcConfigurationData.enabled}">
                              <div class="<c:if test="${braintreeCheckoutData.paymentMethodsLimitation.SRCOnLimit}">disabledArea</c:if>">
                                <div style="overflow: auto;" id="src">
                                    <input id="paymentMethodSrc" type="radio" name="paymentMethodSelection" value="src"
                                        class="paypalselection" />
                                    <div id="src-button-container">
                                        <div class="src-radio">
                                            <label>
                                                Buy with Secure Remote Commerce
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <c:if test="${braintreeCheckoutData.paymentMethodsLimitation.SRCOnLimit}">
                              <div class="warningText">
                              <spring:theme code="paymentMethod.text.limitation"/>
                              </div>
                            </c:if>
                            </c:when>
                            <c:otherwise>
                                <div style="overflow: auto;"></div>
                            </c:otherwise>
                        </c:choose>
                        <ycommerce:testId code="paymentDetailsForm">
                            <div class="account-section-content">
                                <form:form id="braintree-payment-form"
                                    action="${request.contextPath}/my-account/add-payment-method" method="POST"
                                    modelAttribute="addressForm">
                                <c:if test="${not braintreeCheckoutData.paymentMethodsLimitation.creditCardOnLimit}">
                                    <div class="hostedFields">
                                        <div class="account-section-header">
                                            <spring:theme
                                                code="checkout.multi.paymentMethod.addPaymentDetails.paymentCard"
                                                text="Card Details" />
                                        </div>
                                        <div class="description">
                                            <spring:theme
                                                code="checkout.multi.paymentMethod.addPaymentDetails.enterYourCardDetails"
                                                text="Please enter your card details for payment" /></br>
                                        </div>
                                        <div class="control-group cardForm" style="dispaly: none;" id="cardForn">
                                            <label for="cardholderName" class="control-label ">
                                                <spring:theme code="braintree.text.cc.cardholder" />
                                            </label>
                                            <div class="controls">
                                                <div id="cardholderName"></div>
                                            </div>
                                            <label for="number" class="control-label ">
                                                <spring:theme code="braintree.text.cc.number" />
                                            </label>
                                            <div id="number" class="controls"></div>
                                            <label for="cvv" class="control-label ">
                                                <spring:theme code="braintree.text.cc.cvv" />
                                            </label>
                                            <div id="cvv" class="controls"></div>
                                            <label for="expiration-date" class="control-label ">
                                                <spring:theme code="braintree.text.cc.expiration.date" />
                                            </label>
                                            <div id="expiration-date" class="controls"></div>
                                            <label for="billing-address" class="control-label ">
                                                <spring:theme code="braintree.text.cc.billing.address" />
                                            </label>
                                            <br/>
                                            <div class="billing-address-container">
                                                <div class="form-group">
                                                    <div class="control form-group">
                                                        <select id="billingAddressSelector" name="selected-address"
                                                            class="form-control custom-select-form-control">
                                                            <option value="noAddress">Select billing address</option>
                                                            <c:forEach var="address" items="${deliveryAddresses}">
                                                                <c:choose>
                                                                    <c:when
                                                                        test="${addressForm.addressId eq address.id}">
                                                                        <option value="${address.id}" selected>
                                                                            ${address.formattedAddress}</option>
                                                                    </c:when>
                                                                    <c:otherwise>
                                                                        <option value="${address.id}">
                                                                            ${address.formattedAddress}</option>
                                                                    </c:otherwise>
                                                                </c:choose>
                                                            </c:forEach>
                                                            <c:choose>
                                                                <c:when
                                                                    test="${empty addressForm.addressId && not empty accErrorMsgs}">
                                                                    <option value="newAddress" selected>Add new address
                                                                    </option>
                                                                </c:when>
                                                                <c:otherwise>
                                                                    <option value="newAddress">Add new address</option>
                                                                </c:otherwise>
                                                            </c:choose>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div id="addressFormSelectorContainer" class="form-group">
                                                    <div id="countrySelector" class="form-group">
                                                        <formElement:formSelectBox idKey="address.country"
                                                            labelKey="address.country" path="countryIso" mandatory="true"
                                                            skipBlank="false" skipBlankMessageKey="address.country"
                                                            items="${countries}" itemValue="isocode"
                                                            selectCSSClass="form-control" />
                                                    </div>
                                                    <div id="i18nAddressForm" class="i18nAddressForm">
                                                        <c:if test="${not empty country}">
                                                            <address:addressFormElements regions="${regions}"
                                                                country="${country}" />
                                                        </c:if>
                                                    </div>
                                                    <div id="saveAddressComponent" style="display:flex">
                                                            <input type="checkbox"
                                                                   id="shouldSaveAddressMyAccount"
                                                                   name="shouldSaveAddressMyAccount"/>
                                                            <label for="shouldSaveAddressMyAccount">
                                                                <spring:theme code="account.payment.saveAddress"/>
                                                            </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br/>
                                </c:if>

                                    <input type="hidden" name="paypal_email" id="paypalEmail" />

                                    <div class="form-additionals" />
                                    <div class="form-actions">
                                        <div class="col-md-2 col-lg-3">
                                          <c:if test="${not braintreeCheckoutData.paymentMethodsLimitation.venmoOnLimit}">
                                            <div id="venmo-button">
                                                <div class="venmo-button-container">
                                                    <img src="${contextPath}/_ui/addons/braintreeaddon/responsive/common/images/venmo_button.svg"
                                                        alt="venmo logo" class="venmo-button-style" />
                                                </div>
                                            </div>
                                          </c:if>
                                            <c:url value="/my-account/payment-details" var="accountPaymentMethodUrl" />
                                            <a class="btn btn-block btn-default" href="${accountPaymentMethodUrl}">
                                                <spring:theme code="account.add.paymentMethod.cancel" text="Cancel" />
                                            </a>
                                        </div>
                                        <div class="col-md-2 col-lg-3">
                                        <c:if test="${not braintreeCheckoutData.paymentMethodsLimitation.creditCardOnLimit}">
                                            <button class="btn btn-primary btn-block" id="submit_silentOrderPostForm"
                                                type="submit">
                                                <spring:theme code="account.add.paymentMethod.save" text="Save" />
                                            </button>
                                        </c:if>
                                            <c:if test="${not braintreeCheckoutData.paymentMethodsLimitation.payPalOnLimit}">
                                            <div id="mark-paypal-button" class="paypal_button_container btn btn-block"></div>
                                            </c:if>
                                            <c:if test="${not braintreeCheckoutData.paymentMethodsLimitation.googlePayOnLimit}">
                                            <div id="google-pay-button"
                                                class="google-pay-button-container google_pay_container"></div>
                                            </c:if>
                                            <c:if test="${not braintreeCheckoutData.paymentMethodsLimitation.SRCOnLimit}">
                                            <div id="src-button" class="src-button-container src_container">
                                                <img src="${braintreeCheckoutData.srcPaymentMethod.srcImgUrl}"
                                                    alt="Visa Checkout" class="v-button" role="button" />
                                            </div>
                                            </c:if>
                                        </div>
                                    </div>
                                    <div id="selected-address"> </div>
                                </form:form>
                            </div>
                        </ycommerce:testId>
                    </c:otherwise>
                </c:choose>
            </c:if>
        </div>
    </div>
</div>

<util:importBtSDK sdkVersion="3.85.3"
    enablePayPal="${braintreeCheckoutData.payPalPaymentMethod.payPalStandardEnabled}"
    enableHostedFields="${braintreeConfigData.hostedFieldsConfigurationData.enabled}"
    enableGooglePay="${braintreeConfigData.googlePayConfigurationData.enabled}"
    enableVenmo="${braintreeConfigData.venmoConfigurationData.enabled}"
    enableLocalPayment="${braintreeConfigData.localPaymentsConfigurationData.enabled}"
    enableApplePay="${braintreeConfigData.applePayConfigurationData.enabled}"
    enableSrc="${braintreeConfigData.srcConfigurationData.enabled}"
    enableDropIn="${braintreeConfigData.generalConfigurationData.dropIn}"
    threeDSecureFlow="${braintreeConfigData.generalConfigurationData.threeDSecureFlow}"/>

<importData:importAccountCheckoutData braintreeCheckoutData="${braintreeCheckoutData}" braintreeConfigData="${braintreeConfigData}"
    accountPage="accountAddPaymentMethodPage" />

<script>
    var isShowHostedFields = "${braintreeConfigData.hostedFieldsConfigurationData.enabled}";
    var contextPath = "${request.contextPath}";
    var isCreditCardSelect = "${is_credit_card_select}";
    var payPalButtonConfig = ${not empty payPalButtonConfig ? payPalButtonConfig : '{}'};
    var googlePayButtonConfig = ${not empty googlePayButtonConfig ? googlePayButtonConfig : '{}'};
    var isSingleUseSelect = "${is_single_use_select}";
    var amount = "0";
    var isPayPalOnLimit = "${braintreeCheckoutData.paymentMethodsLimitation.payPalOnLimit}";
    var isCardOnLimit = "${braintreeCheckoutData.paymentMethodsLimitation.creditCardOnLimit}";
    var isVenmoOnLimit = "${braintreeCheckoutData.paymentMethodsLimitation.venmoOnLimit}";
    var isGooglePayOnLimit = "${braintreeCheckoutData.paymentMethodsLimitation.googlePayOnLimit}";
    var isSRCOnLimit = "${braintreeCheckoutData.paymentMethodsLimitation.SRCOnLimit}";
    var addressFormDiv = document.getElementById('addressFormSelectorContainer');
    if (addressFormDiv) {
        document.querySelector('#addressFormSelectorContainer').style.display = 'none';
    }

</script>
