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

{% block title %}Pay{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/stripe.css">
{% 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">

        <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>   
      
      <!-- Display a payment form -->
      <form action="{{ path('app_pay_index', {'formule': formule, 'codeParrainage':codeParrainage, 'codeReduction':codeReduction }) }}">

        {% if codeReduction == false %}
        <div class="card mt-2 mb-2">
              <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> 
          {% endif %}
        {% 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 %}


      <!--
          <ul class="list-group mb-2">
              <li  class="list-group-item list-group-item-action flex-column align-items-start" >
                  <span class="price_style" style="font-size:18px;">{{ currentPrice.price|number_format(2, ',', ' ') }}<sup>€</sup></span><span style="color:#7f8c8d;"></span>
                  <br />Boostez la visibilité de votre profil pendant <b>{{ currentPrice.name }}</b>
              </li>      
          </ul>
          -->
              <div class="card mt-2 mb-2">
              <div class="card-body text-center">

              <button class="btn btn-lg btn-primary" id="button-text">Payer <b id="price-id">{{ currentPrice.price|number_format(2, ',', ' ') }}</b>€</button>
              
              <br />
              <label for="card-element" style="margin-top:5px;">
                  <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>

          </div>
          

        </div>
      </div>

  </form>
  <!-- end form -->


  </div>
</div>

</div>

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

{% endblock body %}

{% 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.getElementById("validError").innerHTML = result.msg;
              document.querySelector("#validError").classList.remove("valid-feedback");
              document.querySelector("#validError").classList.add("invalid-feedback");
              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);

          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>
{% endblock %}