{% 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 is defined %}
    {% else %}
        {% set formule = 1 %}
    {% endif %}

     <script>var formule = '{{ formule }}';</script>

          {% 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>
  
  
     
        <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>
        <div class="text-center">
            <br />

            <div id="bouton-paypal"></div>

        </div>

    </div>

  </div>
</div>



	</div>
    
{% endblock %}

{% block javascripts %}
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
	paypal.Button.render({
      env: 'production', // Ou 'production',
      commit: true, // Affiche le bouton  "Payer maintenant"
      locale:'fr_FR',
      style: {
        color: 'gold', // ou 'blue', 'silver', 'black'
        size: 'responsive' // ou 'small', 'medium', 'large'
        // Autres options de style disponibles ici : https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/
      },
      payment: function() {

        console.log("Payment");
        // On crée une variable contenant le chemin vers notre script PHP côté serveur qui se chargera de créer le paiement
        var CREATE_URL = '/setting/paiement/paypal/'+formule;//'/php/paypal_create_payment.php';
        // On exécute notre requête pour créer le paiement
        return paypal.request.post(CREATE_URL).then(
            function(data) 
            { 
                
                // Notre script PHP renvoie un certain nombre d'informations en JSON (vous savez, grâce à notre echo json_encode(...) dans notre script PHP !) qui seront récupérées ici dans la variable "data"
                if (data.success) 
                { // Si success est vrai (<=> 1), on peut renvoyer l'id du paiement généré par PayPal et stocké dans notre data.paypal_reponse (notre script en aura besoin pour poursuivre le processus de paiement)
                    return data.paypal_response.id;   
                } 
                else 
                { // Sinon, il y a eu une erreur quelque part. On affiche donc à l'utilisateur notre message d'erreur généré côté serveur et passé dans le paramètre data.msg, puis on retourne false, ce qui aura pour conséquence de stopper net le processus de paiement.
                    console.log("Payment failed");
                    //console.log(data);
                    return false;   
                }

            }
        );
      },
      onAuthorize: function(data, actions) {

        console.log("Authorize");
        // On indique le chemin vers notre script PHP qui se chargera d'exécuter le paiement (appelé après approbation de l'utilisateur côté client).
        var EXECUTE_URL = '/setting/paiement/execute/paypal/'+formule;//'/php/paypal_execute_payment.php';
        // On met en place les données à envoyer à notre script côté serveur
        // Ici, c'est PayPal qui se charge de remplir le paramètre data avec les informations importantes :
        // - paymentID est l'id du paiement que nous avions précédemment demandé à PayPal de générer (côté serveur) et que nous avions ensuite retourné dans notre fonction "payment"
        // - payerID est l'id PayPal de notre client
        // Ce couple de données nous permettra, une fois envoyé côté serveur, d'exécuter effectivement le paiement (et donc de recevoir le montant du paiement sur notre compte PayPal).
        // Attention : ces données étant fournies par PayPal, leur nom ne peut pas être modifié ("paymentID" et "payerID").
        var data = {
          paymentID: data.paymentID,
          payerID: data.payerID
        };
        // On envoie la requête à notre script côté serveur
        return paypal.request.post(EXECUTE_URL, data).then(function (data) 
        { 
            
            // Notre script renverra une réponse (du JSON), à nouveau stockée dans le paramètre "data"
            if (data.success) 
            { // Si le paiement a bien été validé, on peut par exemple rediriger l'utilisateur vers une nouvelle page, ou encore lui afficher un message indiquant que son paiement a bien été pris en compte, etc.
                window.location.replace("/setting/success/");
                //alert("Paiement approuvé ! Merci !");
            } 
            else 
            {
                // Sinon, si "success" n'est pas vrai, cela signifie que l'exécution du paiement a échoué. On peut donc afficher notre message d'erreur créé côté serveur et stocké dans "data.msg".
                console.log(data);
                window.location.replace("/setting/cancel/");
            }
        });
      },
      onCancel: function(data, actions) {
        console.log("Paiement annulé : vous avez fermé la fenêtre de paiement.");
        console.log(data);
        window.location.replace("/setting/cancel/");
      },
      onError: function(err) {
        console.log("Paiement annulé : une erreur est survenue. Merci de bien vouloir réessayer ultérieurement.");
        window.location.replace("/setting/cancel/");
      }
    }, '#bouton-paypal');
  </script>
</script>
{% endblock %}