{% load rowerfilters %}
<script src="https://js.braintreegateway.com/web/dropin/1.39.1/js/dropin.min.js"></script>
<script>
  var form = document.querySelector('#payment-form');
  var hiddenNonceInput = document.querySelector('#nonce');
  var paymenterrordiv = document.getElementById("paymenterror");
  var paymenterrordiv2 = document.getElementById("paymenterror2");
  var client_token = '{{ client_token }}';
  braintree.dropin.create({
    authorization: client_token,
  container: '#bt-dropin',
  paypal: {
      flow: 'vault'
  },
  threeDSecure: {
    amount: '{{ plan.price|amount }}',
    email: '{{ rower.user.email }}',
    billingAddress: {
      givenName: '{{ user.first_name }}',
      surname: '{{ user.last_name }}',
      streetAddress: '{{ user.rower.street_address }}',
      locality: '{{ user.rower.city }}',
      postalCode: '{{ user.rower.postal_code }}',
      countryCodeAlpha2: '{{ user.rower.country }}'
    },
  }
  }, function (createErr, instance) {
    form.addEventListener('submit', function (event) {
     event.preventDefault();
      instance.requestPaymentMethod(function (err, payload) {
        if (err) {
          console.log('Error', err);
          return;
        }
  if (payload.liabilityShifted || payload.type !== 'CreditCard') {
  document.querySelector('#nonce').value = payload.nonce;
  document.querySelector('#paymenttype').value = payload.type;
  hiddenNonceInput.value = payload.nonce;
        form.submit();
  } else {
        // Decide if you will force the user to enter a different
        // payment method if liablity was not shifted
  instance.clearSelectedPaymentMethod();
  paymenterrordiv.innerHTML = '<p class="message">3D Secure Card Verification Error. Please check your card details.</p>';
  var xhr = new XMLHttpRequest();
  console.log('preparing message');
  xhr.open('GET','/rowers/errormessage/3dsecure/');
  console.log('sending message');
  xhr.send();
  console.log('message sent');
  xhr.onreadystatechange = function() {
  console.log('reloading');
  window.location.reload();
  };
      }
  });

      });
    });
</script>
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script>
$('#payment-form').submit(function() {  
$(this).find("button[type='submit']").prop('disabled',true);
console.log("disabled");
});
</script>