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

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


{% block stylesheets %}

  <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet"> 
  <style>
    .h1_style {
      font-family: 'Nunito';
      font-style: normal;
      font-weight: 900;
      font-size: 40px;
      color: #3498db;
    }
    .price_style {
      /*font-family: 'Nunito';*/
      /*font-style: normal;*/
      font-weight: 900;
      font-size: 50px;      
    }
    .h2_style {
      font-family: 'Nunito';
      font-style: normal;
      font-weight: 900;
      font-size: 22px;
      color: #353b48;
    }

    .btn-custom {
      font-family: 'Nunito';
      font-style: normal;
      font-weight: 900;
      font-size: 22px;
      color: white;     
    }

    .pricing-font {
      font-family: 'Nunito';
      font-style: normal;
      font-weight: 900;
    }
    .btn-custom-free {
      font-family: 'Nunito';
      font-style: normal;
      font-weight: 900;
      font-size: 22px;
      color: #2980b9;     
    }
    .front_page_blur{
      display:none;
    }
    .slideAnim {
      display:block;
        animation-name: slide;
        animation-duration: 2s;
    }
  </style>
  
{% endblock %}

{% block body %}
	<!--
	{% if app.user.profile %}
      	<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-green rounded box-shadow">
	      	{% if app.user.profile and app.user.profile.avatar and app.user.profile.avatar.path %}
	        	<img class="mr-3" src="/uploads/avatar/{{ app.user.profile.avatar.path }}" alt="{{ app.user.profile.firstname }} {{ app.user.profile.lastname }}" width="48" height="48">
			{% else %}
	        	<img class="mr-3" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTrxwZhuShcQieycZ7U7thuj9cmUESbEffhVLc_EsxRJCLPDr7NUA" alt="{{ app.user.profile.firstname }} {{ app.user.profile.lastname }}" width="48" height="48">
			{% endif %}

	        <div class="lh-100">
		        {% if app.user.profile %}
			          <h6 class="mb-0 text-white lh-100">{{ app.user.profile.firstname }} {{ app.user.profile.lastname }}</h6>
			          <small>Membre depuis {{ app.user.created|date('Y') }}</small>
		        {% endif %}
	        </div>
      	</div>
    {% endif %}
-->

    <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', {'formule': formule }) }}">
    
            {% if app.request.attributes.get('_route') == "app_setting_payment" %}<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">

      {% if formule %}

          <!--
          <span class="price_style">{{ price|number_format(2, ',', ' ') }}<sup>€</sup></span><span style="color:#7f8c8d;"></span>
        -->


      {% endif %}


      {{ form_start(form, {attr: {id: form.vars.id}}) }}

        <div class="form-group">

          <div id="card-element" class="form-control"></div>
          <div id="card-errors" class="help-block" role="alert"></div>
        </div>

        <small style='font-size:11px;'>La confirmation de la commande implique que vous avez lu et accepté les <a target="_BLANK" href="{{ path('app_cgv') }}">Conditions générales de vente</a></small>
        <br />
          <button type="submit" id="payment-form_submit" name="payment-form[submit]" class="btn btn-block btn-lg btn-success">Payer <b>{{ price|number_format(2, ',', ' ') }}</b>€</button>
        
        {{ form_widget(form.token) }}
      {{ form_end(form) }}

      <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>
        <!--
        <p>Paiements Visa, Mastercard et American Express</p>
        <p style="font-size:45px;color: #535c68;">
          <i class="fa fa-cc-visa"></i>
          <i class="fa fa-cc-mastercard"></i>
          <i class="fa fa-cc-amex"></i>
        </p>
        -->
      </label>
      

      </div>
      <!--
      <div class="text-center pull-right">
        <p style="font-size:15px;color:grey;"><i class="fa fa-cc-stripe"></i> Powered by <b>stripe</b></p>
      </div>
    -->

    </div>

  </div>
</div>



	</div>
    
{% endblock %}

{% block javascripts %}
	<script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">

      var style = {
        base: {
          color: "#32325d",
        }
      };

      var form = document.getElementById('{{ form.vars.id }}');

      var errors = document.getElementById('card-errors');
     
      var stripe = Stripe('{{ stripe_public_key }}');

      var elements = stripe.elements({locale: 'fr'});

      var card = elements.create('card', { style: style });
     
      card.mount('#card-element');


      // Event Listener Change
      card.addEventListener('change', function(event) 
      {
        if (event.error) 
        {
          errors.textContent = event.error.message;
          form.classList.add('has-error');
        } 
        else 
        {
          errors.textContent = '';
          form.classList.remove('has-error');
        }

      });
      /*

      var submitButton = document.getElementById('payment-form_Payer');

      submitButton.addEventListener('click', function(ev) 
      {


        stripe.confirmCardPayment(clientSecret, {

          payment_method: {
            card: card,
            billing_details: {
              name: 'Jenny Rosen'
            }
          }


        }).then(function(result) 
        {
          if (result.error) 
          {
            // Show error to your customer (e.g., insufficient funds)
            console.log(result.error.message);

          } 
          else 
          {
            // The payment has been processed!
            if (result.paymentIntent.status === 'succeeded') 
            {
              // Show a success message to your customer
              // There's a risk of the customer closing the window before callback
              // execution. Set up a webhook or plugin to listen for the
              // payment_intent.succeeded event that handles any business critical
              // post-payment actions.

            }
          }
        });



      });
      */

      // Event Listener Submit
      
      form.addEventListener('submit', function(event) 
      {
        event.preventDefault();
     
        stripe.createToken(card).then(function(result) 
        {

          if (result.error) 
          {
            errors.textContent = result.error.message;
            form.classList.add('has-error');

          } 
          else 
          {
            document.getElementById('{{ form.children.token.vars.id }}').setAttribute('value', result.token.id);
            form.submit();

          }

        });

      });
      


    </script>

{% endblock %}