{% 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: 600;
      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-weight: 600;
    }
    .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 %}


<div class="my-3 p-3 bg-white rounded box-shadow">
  <div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">

    



    <div class="col-md">

        <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_paypal_index', {'formule': formule, 'codeParrainage':codeParrainage, 'codeReduction':codeReduction }) }}">
          
                {% if app.request.attributes.get('_route') == "app_paypal_index" %}<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_pay_patronage', {'formule': formule, 'codeParrainage':codeParrainage, 'codeReduction':codeReduction }) }}">
      
              {% if app.request.attributes.get('_route') == "app_pay_patronage" %}<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>

  
     
     <div>
           
        
          
          <div class="card mt-2 mb-2"  {% if codeReduction %}style="display:none;"{% endif %}>
            <div class="card-body">

              <h6>Code parrainage pour bénéficier de <b>-50%</b> :</h6>
              <input class="form-control mb-2" id="codePatronage" placeholder="XXXXXXXX" type="text" name="codeParrainage" value="{{ codeParrainage }}">
              <div id="validError" class="mb-2"></div>   
            </div>
          </div>

         
          
          {% if codeReduction %}
          <div class="card mt-2 mb-2">
            <div class="card-body">
      
              <h6>Code réduction pour bénéficier de <b>-50%</b> :</h6>
        
            <input readonly="readonly" class="form-control mb-2" id="codeReduction" placeholder="XXXXXXXX" type="text" name="codeReduction" value="{{ codeReduction }}">
            <div id="validError" class="mb-2"></div>    
          </div>  
        </div>  
        {% endif %}

      <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="mt-2" id="bouton-paypal"></div>

        </div>

    </div>

  </div>
</div>
</div>


<script>
  var formule = '{{ formule }}';
  var items = [{ 
    patronageID: "{{ codeParrainage }}",
    codeReduction: "{{ codeReduction }}"
  }];
</script>   
{% endblock %}

{% block javascripts %}
<script>
  $('#codePatronage').on('input', function() { 
         // get the current value of the input field.
        console.log($(this).val());
        
        var items = [{ patronageID: $(this).val() }];
        const { verificationNewCode } = fetch("{{ path('app_patronage_verification') }}", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ items }),
        }).then((r) => r.json())
        .then(function(result) 
        {
          console.log(result);
          if (result.isValid) {
            //console.log(document.getElementById("price-id").innerHTML);
            document.querySelector("#codePatronage").classList.remove("is-invalid");
            document.querySelector("#codePatronage").classList.add("is-valid");
            document.getElementById("price-id").innerHTML = (parseFloat(document.getElementById("price-id").innerHTML) / 2).toFixed(2);
            //console.log(document.getElementById("price-id").innerHTML);
            document.getElementById("validError").innerHTML = result.msg;
            document.querySelector("#validError").classList.remove("invalid-feedback");
            document.querySelector("#validError").classList.add("valid-feedback");
          }
          else 
          {
            
            if( document.getElementById('codePatronage').value.length === 0 ) 
            {
              document.querySelector("#codePatronage").classList.remove("is-valid");
              document.querySelector("#codePatronage").classList.remove("is-invalid");
              //document.getElementById("invalidError").innerHTML = result.msg;
            }
            else
            {
              document.querySelector("#codePatronage").classList.remove("is-valid");
              document.querySelector("#codePatronage").classList.add("is-invalid");
              document.querySelector("#validError").classList.remove("valid-feedback");
              document.querySelector("#validError").classList.add("invalid-feedback");
              document.getElementById("validError").innerHTML = result.msg;
              console.log(result.msg);
            }
          }
          return result;
        });
        

    });

    // Initialize verification patronage
    initialize();
    
    // Fetches a payment intent and captures the client secret
    async function initialize() {
        const { verificationCode } = await fetch("{{ path('app_patronage_verification') }}", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ items }),
        }).then((r) => r.json())
        .then(function(result) 
        {
          console.log(result);
          console.log(items[0]);
          if (items[0].codeReduction !== "" && items[0].codeReduction && result.isValid)
          {
            //  document.getElementById("price-id").innerHTML = (parseFloat(document.getElementById("price-id").innerHTML) / 2).toFixed(2);
            console.log("Reduction");
            return result;
          } 
          else if (result.isValid) {
            
            document.querySelector("#codePatronage").classList.remove("is-invalid");
            document.querySelector("#codePatronage").classList.add("is-valid");
            document.getElementById("price-id").innerHTML = (parseFloat(document.getElementById("price-id").innerHTML) / 2).toFixed(2);
            document.getElementById("validError").innerHTML = result.msg;
            document.querySelector("#validError").classList.remove("invalid-feedback");
            document.querySelector("#validError").classList.add("valid-feedback");
          }
          else 
          {
            if( document.getElementById('codePatronage').value.length === 0 ) 
            {
              document.querySelector("#codePatronage").classList.remove("is-valid");
              document.querySelector("#codePatronage").classList.remove("is-invalid");
            }
            else
            {
              document.querySelector("#codePatronage").classList.remove("is-valid");
              document.querySelector("#codePatronage").classList.add("is-invalid");
              document.getElementById("validError").innerHTML = result.msg;
              document.querySelector("#validError").classList.remove("valid-feedback");
              document.querySelector("#validError").classList.add("invalid-feedback");
            }
          }
          return result;
        });
    }
</script>
<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: 'blue', // 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/pay/paypal/'+formule;//'/php/paypal_create_payment.php';
        // On exécute notre requête pour créer le paiement

        return paypal.request({
            method: 'post',
            url: CREATE_URL,
            json: {
                codeParrainage: /*items[0].patronageID*/document.getElementById('codePatronage').value,
                codeReduction: items[0].codeReduction
            }
        }).then(function(data) {
          console.log(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;   
                }
        });

        /*
        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 = '/paypal/webhook';//'/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 %}