var stripe = Stripe('pk_test_wxFt0GhsUK2YsprkLXa2iFrQ00nfjAeucu');
var elements = stripe.elements();
var cardElement = elements.create('card', {
  style: {
    base: {
      //iconColor: '#c4f0ff',
      iconColor: '#64a0af',
      color: '#000000',
      fontWeight: 500,
      fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
      fontSize: '18px',
      fontSmoothing: 'antialiased',
      ':-webkit-autofill': {
        color: '#fce883',
      },
      '::placeholder': {
  //      color: '#87BBFD',
        color: '#87BBFD',
      },
    },
    invalid: {
      iconColor: '#8f577e',
      color: '#8F577E',
    },
  },
});
cardElement.mount('#card-element');


var cardholderName = document.getElementById('cardholder-name');
var cardButton = document.getElementById('card-button');

///*y este el codigo de validación de la tarjeta*/
cardButton.addEventListener('click', function(ev) {
  document.getElementById('cover').hidden = false;
  document.getElementById("cover").style.opacity = "0.8";
  stripe.createPaymentMethod('card', cardElement, {
    billing_details: {name: cardholderName.value}
  })
  .then(function(result) {
    // Show error in payment form 
    if (result.error) {
      document.getElementById("cover").style.opacity = "0";
      setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
      console.log("network error");
    }
    // Otherwise send paymentMethod.id to your server (see Step 2)
    else { 
      fetch('/xpay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_method_id: result.paymentMethod.id, req:"precheck"})
      })
      .then(function(result) {
        // Handle server response (see Step 3)
        result.json().then(function(json) { handleInstallmentPlans(json); })
      });
    }
  });
});

///*presenta los planes de pago */
const selectPlanForm = document.getElementById('installment-plan-form');
let availablePlans = [];

const handleInstallmentPlans = async (response) => {
  if (response.error) { // Show error from server on payment form
    console.log("preauth response error");
  } 
  else {
    // Store the payment intent ID.
    document.getElementById('payment-intent-id').value = response.intent_id;
    availablePlans = response.available_plans;
    // Show available installment options
    availablePlans.forEach((plan, idx) => {
      const newInput = document.getElementById('immediate-plan').cloneNode();
      newInput.setAttribute('value', idx);
      newInput.setAttribute('id', '');
      const label = document.createElement('label');
      label.appendChild(newInput);
      label.appendChild(
        document.createTextNode(`${plan.count} meses`),
      );
      selectPlanForm.appendChild(label);
    });
    document.getElementById('cinfo').hidden = true;
    document.getElementById('cplan').hidden = false;
  }
  document.getElementById("cover").style.opacity = "0";
  setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
};

// termina la transacción
const confirmButton = document.getElementById('confirm-button');
confirmButton.addEventListener('click', async (ev) => {
  document.getElementById('cover').hidden = false;
  document.getElementById("cover").style.opacity = "0.8";
  const selectedPlanIdx = selectPlanForm.installment_plan.value;
  const selectedPlan = availablePlans[selectedPlanIdx];
  const intentId = document.getElementById('payment-intent-id').value;
  const response = await fetch('/xpay', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      payment_intent_id: intentId,
      selected_plan: selectedPlan,
      req:"check"
    }),
  });
  const responseJson = await response.json();
  // Show success / error response.
  document.getElementById("cover").style.opacity = "0";
  setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
  document.getElementById('cmsg').hidden = false;
  document.getElementById('cplan').hidden = true;
  var message;
  if (responseJson.status === "succeeded" && selectedPlan !== undefined) {
    message = `¡Tu compra a ${
      selectedPlan.count
    } meses sin intereses se ha realizado con éxito! `;
  } else if (responseJson.status === "succeeded") {
    message = "¡Tu compra se ha realizado con éxito!";
  } else {
    message = `Tenemos un problema para verificar tus datos. 
      Por favor intenta de nuevo o comunícate con nosotros`;
  }

  document.getElementById("status-message").innerText = message;
});