{% extends 'App::base.html.twig' %}

{% block title %}Devenir Premium - Paiement Stripe{% endblock %}


{% block stylesheets %}
  <link rel="stylesheet" href="/assets/stripe/global.css" />
  <!-- <script src="https://js.stripe.com/v3/"></script> -->
  <!-- <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script> -->
  <!-- <script src="/assets/stripe/client.js" defer></script> -->
  <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet"> 
{% endblock %}

{% block body %}
<div class="my-3 p-3 bg-white rounded box-shadow">
<div class="container">
  <div class="row">
          {% if formule == 1 %}
            {% set price = 29 %}
          {% elseif formule == 2 %}
            {% set price = 79 %}
          {% elseif formule == 3 %}
            {% set price = 149 %}
          {% endif %}

    <div class="col-md">
      <div class="text-center">
        <img width="70" src="https://www.rueduprof.com/apple-touch-icon-180x180.png"/>
        <p><span style="color:#95a5a6;">Boostez la visibilité de votre profil</span></p>
        <!-- <div class="h1_style"><span data-feather="zap"></span> Premium <span data-feather="zap"></span></div> -->
    </div>
    <hr />
    <h6>Sélectionnez une formule :</h6>
    <div class="list-group">
        <a  class="list-group-item list-group-item-action flex-column align-items-start" href="{{ path(app.request.attributes.get('_route'), {'formule': 1 }) }}">
            {% if formule == 1 %}<i  style="font-size:32px;color:#2CC990;" class="fa fa-check" aria-hidden="true"></i>{% endif %} <span class="price_style" style="font-size:32px;">29.00<sup>€</sup></span><span style="color:#7f8c8d;"></span>
            <p>Boostez la visibilité de votre profil pendant <b>1 mois</b></p>
        </a>
        <a  class="list-group-item list-group-item-action flex-column align-items-start" href="{{ path(app.request.attributes.get('_route'), {'formule': 2 }) }}">
            {% if formule == 2 %}<i  style="font-size:32px;color:#2CC990;" class="fa fa-check" aria-hidden="true"></i>{% endif %} <span class="price_style" style="font-size:32px;">79.00<sup>€</sup></span><span style="color:#7f8c8d;"></span>
            <p>Boostez la visibilité de votre profil pendant <b>3 mois</b></p>
        </a>
        <a  class="list-group-item list-group-item-action flex-column align-items-start" href="{{ path(app.request.attributes.get('_route'), {'formule': 3 }) }}">
            {% if formule == 3 %}<i  style="font-size:32px;color:#2CC990;" class="fa fa-check" aria-hidden="true"></i>{% endif %} <span class="price_style" style="font-size:32px;">149.00<sup>€</sup></span><span style="color:#7f8c8d;"></span>
            <p>Boostez la visibilité de votre profil pendant <b>6 mois</b></p>
        </a>
    </div>
    </div>

    <div class="col-md">
      <br />
      <h5><img src="/img/icons_payment/antivirus_icon.svg" width="60"/> Page de paiement sécurisé</h5>
      <hr />
      <h6>Sélectionnez un moyen de paiement :</h6>
      <div class="list-group">
          <a  class="list-group-item list-group-item-action flex-column align-items-start" href="{{ path('app_setting_payment_paypal', {'formule': formule }) }}">
        
              {% if app.request.attributes.get('_route') == "app_setting_payment_paypal" %}<i style="color:#2CC990;" class="fa fa-check" aria-hidden="true"></i>{% endif %} 
              <img src="/img/icons_payment/paypal_icon.svg" width="60"/>
         
    
          </a>
          
          <a  class="list-group-item list-group-item-action flex-column align-items-start" href="{{ path('app_setting_payment_stripe', {'formule': formule }) }}">
    
            {% if app.request.attributes.get('_route') == "app_setting_payment_stripe" %}<i style="color:#2CC990;" class="fa fa-check" aria-hidden="true"></i>{% endif %} 
       
              <img src="/img/icons_payment/visa_icon.svg" width="60" style="margin-right:7px;"/>
              <img src="/img/icons_payment/mastercard_icon.svg" width="60"/>
              <img src="/img/icons_payment/american-express_icon.svg" width="74"/>
        
        
          </a>
      </div>
      

      <hr />
      <h6>Renseignez vos coordonnées bancaires :</h6>
      <br />
      
      <div class="text-center">

    {{ form_start(form, {attr: {id: 'payment-form'}}) }}
      <div id="card-element"></div>
      <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Payer <b>{{ price|number_format(2, ',', ' ') }}</b>€</span>
      </button>      


      <p id="card-error" role="alert"></p>

      <p class="alert alert-success result-message hidden">
          <i  style="color:#2CC990;" class="fa fa-check" aria-hidden="true"></i> Paiement réussi, voir le résultat dans votre
          <a href="{{ path('app_setting_index') }}" target="_blank">tableau de bord.</a>
      </p>
      <label for="card-element" style="margin-top:20px;">
        <p class="text-right"> <img src="/img/icons_payment/assurance_icon.svg" width="30"/>Paiement Sécurisé avec<img src="/img/icons_payment/stripe_icon.svg" width="90"/></p>
      </label>

      {{ form_widget(form.token) }}
    {{ form_end(form) }}

    <!--
    <form id="payment-form">
      <div id="card-element"></div>
      <br />
      <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Payer <b>{{ price|number_format(2, ',', ' ') }}</b>€</span>
      </button>
      <p id="card-error" role="alert"></p>
      <p class="alert alert-success result-message hidden">
          <i  style="color:#2CC990;" class="fa fa-check" aria-hidden="true"></i> Paiement réussi, voir le résultat dans votre
          <a href="{{ path('app_setting_index') }}" target="_blank">tableau de bord.</a>
      </p>
      <label for="card-element" style="margin-top:20px;">
        <p class="text-right"> <img src="/img/icons_payment/assurance_icon.svg" width="30"/>Paiement Sécurisé avec<img src="/img/icons_payment/stripe_icon.svg" width="90"/></p>
      </label>
    </form>
    -->


      

      </div>


    </div>

  </div>
</div>



	</div>

{% endblock %}

{% block javascripts %}

<script src="https://js.stripe.com/v3/"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>

<script>
// A reference to Stripe.js initialized with a fake API key.
// Sign in to see examples pre-filled with your key.
var stripe = Stripe("{{ stripe_public_key }}");

// The items the customer wants to buy
var purchase = {
  items: [{ id: "Formule {{ formule }}" }]
};

// Disable the button until we have Stripe set up on the page
document.querySelector("button").disabled = true;

  fetch("{{ path('app_setting_payment_stripe_create', {'formule':formule}) }}", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(purchase)
  })
  .then(function(result) 
  {
    return result.json();
  })
  .then(function(data) 
  {
    var elements = stripe.elements();

    var style = {
      base: {
        color: "#32325d",
        fontFamily: 'Arial, sans-serif',
        fontSmoothing: "antialiased",
        fontSize: "16px",
        "::placeholder": {
          color: "#32325d"
        }
      },
      invalid: {
        fontFamily: 'Arial, sans-serif',
        color: "#fa755a",
        iconColor: "#fa755a"
      }
    };

    var card = elements.create("card", { style: style });
    // Stripe injects an iframe into the DOM
    card.mount("#card-element");

    card.on("change", function (event) 
    {
      // Disable the Pay button if there are no card details in the Element
      document.querySelector("button").disabled = event.empty;
      document.querySelector("#card-error").textContent = event.error ? event.error.message : "";
    });

    var form = document.getElementById("payment-form");
    form.addEventListener("submit", function(event) 
    {
      event.preventDefault();
      // Complete payment when the submit button is clicked
      payWithCard(stripe, card, data.clientSecret);
    });
    
  });

// Calls stripe.confirmCardPayment
// If the card requires authentication Stripe shows a pop-up modal to
// prompt the user to enter authentication details without leaving your page.
var payWithCard = function(stripe, card, clientSecret) 
{
  loading(true);
  stripe.confirmCardPayment(clientSecret, 
  {
      payment_method: {
        card: card
      }
  })
  .then(function(result) 
  {
      if (result.error) 
      {
        // Show error to your customer
        showError(result.error.message);
      } 
      else 
      {
        // The payment succeeded!
        console.log(result.paymentIntent);
        orderComplete(result.paymentIntent.id);
      }
  });
};

/* ------- UI helpers ------- */

// Shows a success message when the payment is complete
var orderComplete = function(paymentIntentId) {
  loading(false);
  /*
  document
    .querySelector(".result-message a")
    .setAttribute(
      "href",
      "https://dashboard.stripe.com/test/payments/" + paymentIntentId
    );
    */
  document.querySelector(".result-message").classList.remove("hidden");
  document.querySelector("button").disabled = true;
};

// Show the customer the error from Stripe if their card fails to charge
var showError = function(errorMsgText) {
  loading(false);
  var errorMsg = document.querySelector("#card-error");
  errorMsg.textContent = errorMsgText;
  setTimeout(function() {
    errorMsg.textContent = "";
  }, 4000);
};

// Show a spinner on payment submission
var loading = function(isLoading) {
  if (isLoading) {
    // Disable the button and show a spinner
    document.querySelector("button").disabled = true;
    document.querySelector("#spinner").classList.remove("hidden");
    document.querySelector("#button-text").classList.add("hidden");
  } else {
    document.querySelector("button").disabled = false;
    document.querySelector("#spinner").classList.add("hidden");
    document.querySelector("#button-text").classList.remove("hidden");
  }
};
</script>
{% endblock %}