{%  extends "WebFrontBundle::layout.html.twig" %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/offers_styles.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/offers_responsive.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/select2.min.css")}}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/about_styles.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/about_responsive.css") }}">


    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/bookpayment_styles.css") }}">

  <!-- intl-tel-input CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css">

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

  <!-- intl-tel-input JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>


{% endblock %}

{% block body %}



    <!-- Home -->

    <div class="home">
        <div id="overlay"></div>
        <div class="home_background parallax-window" data-parallax="scroll" data-image-src="{{ asset("assets/uploads/Fast Track Maroc Booking.jpg")}}" style="background-image:url({{ asset("assets/uploads/Fast Track Maroc Booking.jpg")}})"></div>
        <div class="home_content">
            <div class="home_title">{% trans %}Order payment{% endtrans %} : {{order.ref}}</div>
        </div>

    </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
    <!-- payment - tva : c maroc-->
<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loadingModalLabel"
    aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="loading-spinner">
                    <!-- Add your loading spinner HTML here -->
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

  <!-- Modal -->
  <div class="modal fade" id="phoneNumberModal" tabindex="-1" role="dialog" aria-labelledby="phoneNumberModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="phoneNumberModalLabel">Please Enter Your Phone Number</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form action="{{ path('payme', {'id':order.getId()} ) }}" method="post" id="PaymentForm">
                <div class="form-group">
                    <input type="hidden" id="command" name="command" value="{{ order.getId() }}"/>
                    <input type="hidden" id="paymentType" name="PaymentType" value="paypal"/>
                    <input type="hidden" id="cardType" name="DIMCRITERIA5" value="INT">
                    <label for="phoneNumber">Phone Number</label>
                    <input type="tel" name="tel" class="form-control" id="phoneNumber" placeholder="Enter phone number" required>
                    <input type="hidden" id="phone" name="phone">
                    <button type="submit" id="valider" class="btn btn-primary">Pay</button>
            </div>
          </form>
              <!-- ... (existing form content) ... -->
            <div class="loading-spinner d-none">
                <!-- Add your loading spinner HTML here -->
                <div class="spinner-border" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
        <div class="modal-footer">
          <center>Merci pour votre confiance!</center>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JavaScript -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <style>
        .loading-spinner {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px; /* Adjust the height as per your design */
        }
    </style>

<script>

{% if bookings|length == 0  %}
 
    $(document).ready(function () {
        // Initialize intl-tel-input
        //$('#phoneNumberModal').modal('show');
        var input = document.querySelector("#phoneNumber");
        var iti = window.intlTelInput(input, {
        preferredCountries: ['ma', 'fr', 'gb'],
        separateDialCode: true
        });

        // Retrieve selected country code
        $("#country").change(function() {
        var selectedCountryCode = $(this).val();
        iti.setCountry(selectedCountryCode);
        });

        // Form submission example
        $("#valider").click(function() {
        var phoneNumber = iti.getNumber();
        if (phoneNumber) {
            // Valid phone number, perform further actions
             $("#phone").val(phoneNumber);
            console.log("Phone number:", phoneNumber);
        } else {
            // Invalid phone number
            console.log("Invalid phone number");
        }
        });




    });


  {% endif %}

</script>

    <div class="main">
           
           
           
        {% if bookings|length > 0  %}
            <div class="card text-center">
                <div class="card-header">
                        <div class="alert alert-danger" role="alert">
      We apologize for the inconvenience, but we are currently unable to proceed with your payment process. You have a booking schedule for this time slot has already passed. check them in the list below, Please contact our support team for further assistance.
                        </div>                
                </div>
                <div class="card-body">
                        
                    <ul class="list-group">
                        {% for fasttrack in bookings %}
                            <li class="list-group-item list-group-item-danger">
                           
                            
                                    {% set dff = fasttrack.dateFly.date|split('.' ) %}
                                    {% set df = dff[0]|split(' ' ) %}


                                    {% set hff = fasttrack.heureFly.date|split('.' ) %}
                                    {% set hf = hff[0]|split(' ' ) %}

                                    {% if fasttrack.type==0 %}
                                        <div class="col-sm-12" style="padding-left: 26px;">
                                            <h5><strong>{{fasttrack.pack.title}} - {% trans %}Departure from {% endtrans %}{{fasttrack.pack.aeroport.title}}</strong></h5>

                                            {% set chars = fasttrack.passagers|split('||' ) %}
                                            {% trans %}Names{% endtrans %} :
                                            {% for char in chars %}

                                                {% set names = char|split('//' ) %}

                                                {% if names[1] is defined %}
                                                    {{names[0]}} {{names[1]}}
                                                {% endif %}

                                            {% endfor %}

                                            <br />

                                            {% trans %}Adults (12+ Years) :{% endtrans %} {{fasttrack.passagersAdlt}} <br />
                                            {% trans %}Child (0-1.99 Years) :{% endtrans %} {{fasttrack.passagersFree}} <br />
                                            {% trans %}Child (2-12 Years) :{% endtrans %} {{fasttrack.passagersOffre}} <br />

                                            <b>{% trans %}Departure Date :{% endtrans %} {{df[0]}} </b><br />

                                            <b>{% trans %}Departure Time :{% endtrans %} {{hf[1]}} </b><br />

                                            {% trans %}Special request :{% endtrans %} {{fasttrack.demandeParticuliere}} <br />

                                        </div>
                                    {% else %}
                                        <div class="col-sm-12" style="padding-left: 26px;">
                                            <h5><strong>{{fasttrack.pack.title}} - {% trans %}Arrival to {% endtrans %}{{fasttrack.pack.aeroport.title}}</strong></h5>

                                            {% set chars = fasttrack.passagers|split('||' ) %}
                                            {% trans %}Names :{% endtrans %}
                                            {% for char in chars %}

                                                {% set names = char|split('//' ) %}

                                                {% if names[1] is defined %}
                                                    {{names[0]}} {{names[1]}}
                                                {% endif %}

                                            {% endfor %}

                                            <br />

                                            {% trans %}Adults (12+ Years) :{% endtrans %} {{fasttrack.passagersAdlt}} <br />
                                            {% trans %}Child (0-1.99 Years) :{% endtrans %} {{fasttrack.passagersFree}} <br />
                                            {% trans %}Child (2-12 Years) :{% endtrans %} {{fasttrack.passagersOffre}} <br />

                                           <b> {% trans %}Arrival Date :{% endtrans %}  {{df[0]}} </b><br />

                                           <b> {% trans %}Arrival Time :{% endtrans %}  {{hf[1]}} </b> <br />

                                            {% trans %}Special request :{% endtrans %}  {{fasttrack.demandeParticuliere}} <br />

                                        </div>
                                    {% endif %}
                            
                            </li>
                        {% endfor %}
                    </ul>  
                </div>
            </div>
           
        {% else %}

            <div class='payments row justify-content-center text-center'>
                {#
                <div class='blink'> 
                    <span class='notePaypalfr'>Vous pouvez payer avec votre carte bancaire sans avoir un compte paypal</span><br>
                    <span class='notePaypalen'>You can pay by credit card without having a paypal account </span>
                </div>
                #}
                <style>
                    .blink{
                        text-align: center;
                        line-height: 36px;
                    }
                    .notePaypalfr{
                        color: #bb2b2b;
                        animation: blink 4s linear infinite;
                    }
                    .notePaypalen{
                        color: #bb2b2b;
                        animation: blink 4s linear infinite;
                    }    
                    
                    @keyframes blink{
                        0%{opacity: 0;}
                        50%{opacity: .7;}
                        100%{opacity: 1;}
                    }
                </style>

                <div class="col-md-1"></div>
                

    
                <div id="4" class='button active col-sm-12 col-md-6'>
                {#
                    <div class="notepaypal">
                        <div class='notePaypalfr'>Économiser votre argent</div>                
                        <div class='notePaypalfr'>Save your money</div>
                    </div>
                #}
                    <style>
                    .notePaypalfr{
                        color: #bb2b2b;
                        animation: blink 4s linear infinite;
                    }
                    
                    @keyframes notepaypal{
                        0%{opacity: 0;}
                        50%{opacity: .7;}
                        100%{opacity: 1;}
                    }
                </style>
                    <svg class="svg-paypal" viewBox="0 0 512 512">
                        <path class="svg-paypal-border" d="M481.874,102.698c13.854,0,25.126,11.271,25.126,25.126v257.899c0,13.854-11.271,25.126-25.126,25.126 H30.143c-13.854,0-25.126-11.271-25.126-25.126V127.824c0-13.854,11.271-25.126,25.126-25.126H481.874 M481.874,97.698H30.143 c-16.638,0-30.126,13.488-30.126,30.126v257.899c0,16.64,13.488,30.126,30.126,30.126h451.731 c16.64,0,30.126-13.486,30.126-30.126V127.824C512,111.186,498.513,97.698,481.874,97.698L481.874,97.698z" />
                        <path class="svg-paypal-letter1to3" d="M104.955,202.144H62.86l-18.652,85.61h24.705l6.048-28.363h17.642c16.888,0,31.006-10.408,34.785-28.104 C131.671,211.252,117.305,202.144,104.955,202.144z M104.198,231.287c-1.512,6.506-7.813,11.71-14.115,11.71H78.488l5.294-23.418 H95.88C101.932,219.579,105.963,224.783,104.198,231.287z" />
                        <path class="svg-paypal-letter1to3" d="M161.04,219.579c-10.655,0-19.083,2.862-25.277,4.165l-1.981,16.392 c2.973-1.562,13.136-4.422,21.557-4.684c8.427-0.261,13.384,1.559,11.895,8.847c-25.026,0-41.876,5.202-45.346,21.598 c-4.958,28.104,25.521,27.322,37.414,15.092l-1.484,6.767h22.55l9.663-44.757C193.996,224,176.648,219.32,161.04,219.579z M162.772,265.375c-1.238,5.982-6.195,8.589-11.894,8.852c-4.957,0.256-9.168-4.17-5.947-9.371 c2.477-4.422,9.415-5.465,13.381-5.465c1.983,0,3.715,0,5.699,0C163.517,261.473,163.021,263.297,162.772,265.375z" />
                        <polygon class="svg-paypal-letter1to3" points="199.855,220.809 222.402,220.809 226.04,260.68 248.103,220.809 271.371,220.809 217.796,316.229 192.582,316.229 209.064,288.175 199.855,220.809" />
                        <path class="svg-paypal-letter4to6" d="M323.965,202.144h-41.985l-18.605,85.61h24.387l6.287-28.363h17.35c17.093,0,31.174-10.408,34.947-28.104 C350.614,211.252,336.033,202.144,323.965,202.144z M323.215,231.287c-1.513,6.506-8.05,11.71-14.338,11.71h-11.311l5.03-23.418 h12.066C320.952,219.579,324.722,224.783,323.215,231.287z" />
                        <path class="svg-paypal-letter4to6" d="M380.913,219.579c-10.783,0-19.312,2.862-25.833,4.165l-2.01,16.392 c3.263-1.562,13.545-4.422,22.076-4.684c8.528-0.261,13.544,1.559,11.791,8.847c-25.336,0-42.396,5.202-45.907,21.598 c-5.021,28.104,25.841,27.322,38.13,15.092l-1.507,6.767h22.576l9.787-44.757C414.025,224,396.716,219.32,380.913,219.579z M382.418,265.375c-1.254,5.982-6.017,8.589-11.786,8.852c-5.016,0.256-9.535-4.17-6.272-9.371 c2.513-4.422,9.535-5.465,13.799-5.465c1.753,0,3.769,0,5.519,0C383.171,261.473,382.915,263.297,382.418,265.375z" />
                        <polygon class="svg-paypal-letter4to6" points="429.327,201.88 410.649,287.754 433.583,287.754 452.491,201.88 429.327,201.88" />
                    </svg>
                    <svg class="svg-visa" viewBox="0 0 512 512">
                        <path class="svg-visa-border" d="M482.722,103.198c13.854,0,25.126,11.271,25.126,25.126v257.9c0,13.854-11.271,25.126-25.126,25.126H30.99 c-13.854,0-25.126-11.271-25.126-25.126v-257.9c0-13.854,11.271-25.126,25.126-25.126H482.722 M482.722,98.198H30.99 c-16.638,0-30.126,13.488-30.126,30.126v257.9c0,16.639,13.488,30.126,30.126,30.126h451.732 c16.639,0,30.126-13.487,30.126-30.126v-257.9C512.848,111.686,499.36,98.198,482.722,98.198L482.722,98.198z" />
                        <polygon class="svg-visa-letter" points="190.88,321.104 212.529,194.022 247.182,194.022 225.494,321.104 190.88,321.104" />
                        <path class="svg-visa-letter" d="M351.141,197.152c-6.86-2.577-17.617-5.339-31.049-5.339c-34.226,0-58.336,17.234-58.549,41.94 c-0.193,18.256,17.21,28.451,30.351,34.527c13.489,6.231,18.023,10.204,17.966,15.767c-0.097,8.518-10.775,12.403-20.737,12.403 c-13.857,0-21.222-1.918-32.599-6.667l-4.458-2.016l-4.864,28.452c8.082,3.546,23.043,6.618,38.587,6.772 c36.417,0,60.042-17.035,60.313-43.423c0.136-14.447-9.089-25.446-29.071-34.522c-12.113-5.882-19.535-9.802-19.458-15.757 c0-5.281,6.279-10.93,19.846-10.93c11.318-0.179,19.536,2.292,25.912,4.869l3.121,1.468L351.141,197.152L351.141,197.152z" />
                        <path class="svg-visa-letter" d="M439.964,194.144h-26.766c-8.295,0-14.496,2.262-18.14,10.538l-51.438,116.47h36.378 c0,0,5.931-15.66,7.287-19.1c3.974,0,39.305,0.059,44.363,0.059c1.027,4.447,4.206,19.041,4.206,19.041h32.152L439.964,194.144 L439.964,194.144z M397.248,276.062c2.868-7.326,13.8-35.53,13.8-35.53c-0.194,0.339,2.849-7.36,4.593-12.132l2.346,10.959 c0,0,6.628,30.336,8.022,36.703H397.248L397.248,276.062z" />
                        <path class="svg-visa-letter" d="M161.828,194.114l-33.917,86.667l-3.624-17.607c-6.299-20.312-25.971-42.309-47.968-53.317l31.009,111.149 l36.649-0.048l54.538-126.844H161.828L161.828,194.114z" />
                        <path class="svg-visa-corner" d="M96.456,194.037H40.581l-0.426,2.641c43.452,10.523,72.213,35.946,84.133,66.496l-12.133-58.41 C110.062,196.716,103.976,194.318,96.456,194.037L96.456,194.037z" />
                    </svg>

                    <svg class="svg-master" viewBox="0 0 512 512">
                        <path class="svg-master-border" d="M482.722,103.198c13.854,0,25.126,11.271,25.126,25.126v257.9c0,13.854-11.271,25.126-25.126,25.126H30.99 c-13.854,0-25.126-11.271-25.126-25.126v-257.9c0-13.854,11.271-25.126,25.126-25.126H482.722 M482.722,98.198H30.99 c-16.638,0-30.126,13.488-30.126,30.126v257.9c0,16.639,13.488,30.126,30.126,30.126h451.732 c16.639,0,30.126-13.487,30.126-30.126v-257.9C512.848,111.686,499.36,98.198,482.722,98.198L482.722,98.198z" />
                        <path class="svg-master-circle2" d="M257.568,355.172c22.646,20.867,53.061,33.522,86.14,33.522 c71.037,0,128.538-57.941,128.538-129.207c0-71.482-57.501-129.424-128.538-129.424c-33.079,0-63.493,12.653-86.14,33.522 c-25.972,23.752-42.401,57.943-42.401,95.902C215.167,297.45,231.597,331.642,257.568,355.172L257.568,355.172z" />
                        <path class="svg-master-circle1" d="M299.086,245.725c-0.444-4.662-1.331-9.102-2.223-13.764h-78.586 c0.888-4.662,2.217-9.103,3.549-13.543h71.266c-1.558-4.659-3.333-9.323-5.332-13.763h-60.382 c2.22-4.659,4.661-9.323,7.326-13.763h45.51c-2.887-4.662-6.215-9.325-9.769-13.542h-25.975 c3.996-4.883,8.438-9.545,13.097-13.763c-22.863-20.647-53.057-33.522-86.356-33.522c-70.817,0-128.538,57.942-128.538,129.424 c0,71.266,57.721,129.207,128.538,129.207c33.3,0,63.493-12.655,86.356-33.522l0,0l0,0c4.665-4.221,8.882-8.66,12.878-13.544 h-25.975c-3.552-4.439-6.66-8.879-9.767-13.763h45.51c2.885-4.439,5.327-8.879,7.546-13.764h-60.382 c-2.001-4.439-3.996-8.88-5.552-13.544h71.266c1.553-4.439,2.661-9.1,3.771-13.763c0.892-4.439,1.778-9.104,2.223-13.764 c0.443-4.44,0.666-8.879,0.666-13.544C299.752,254.828,299.529,250.165,299.086,245.725L299.086,245.725z" />
                        <path class="svg-master-letter" d="M342.599,229.742l-2.443,14.207 c-4.886-2.441-8.438-3.552-12.434-3.552c-10.433,0-17.76,10.212-17.76,24.644c0,9.987,4.885,15.982,13.098,15.982 c3.33,0,7.326-1.106,11.766-3.332l-2.441,14.876c-5.106,1.332-8.436,2-12.209,2c-15.096,0-24.421-10.88-24.421-28.419 c0-23.309,12.877-39.735,31.302-39.735c2.441,0,4.662,0.222,6.44,0.666l5.549,1.332 C340.822,229.076,341.264,229.298,342.599,229.742L342.599,229.742z" />
                        <path class="svg-master-letter" d="M297.755,239.509c-0.444,0-0.892,0-1.333,0 c-4.665,0-7.327,2.22-11.546,8.66l1.331-8.216h-12.651l-8.658,53.282h13.984c5.106-32.635,6.438-38.187,13.098-38.187 c0.443,0,0.443,0,0.888,0c1.332-6.436,3.108-11.1,5.33-15.318L297.755,239.509L297.755,239.509z" />
                        <path class="svg-master-letter" d="M217.387,292.566c-3.771,1.332-6.878,1.775-9.987,1.775 c-7.105,0-11.102-3.995-11.102-11.762c0-1.332,0.222-3.113,0.444-4.664l0.889-5.328l0.665-4.221l5.997-36.406h13.763l-1.557,7.992 h7.104l-1.775,13.1h-7.104l-3.771,22.198c-0.224,0.889-0.224,1.552-0.224,2.221c0,2.664,1.332,3.776,4.664,3.776 c1.551,0,2.886,0,3.774-0.444L217.387,292.566L217.387,292.566z" />
                        <path class="svg-master-letter" d="M163.887,256.824c0,6.66,3.107,11.323,10.433,14.876 c5.773,2.663,6.661,3.551,6.661,5.771c0,3.332-2.441,4.884-7.992,4.884c-4.218,0-7.992-0.664-12.432-1.995l-2,12.206l0.667,0.225 l2.443,0.444c0.887,0.219,1.998,0.444,3.774,0.444c3.108,0.443,5.771,0.443,7.548,0.443c14.652,0,21.534-5.551,21.534-17.76 c0-7.328-2.886-11.548-9.768-14.875c-5.994-2.663-6.661-3.333-6.661-5.771c0-2.888,2.443-4.221,6.883-4.221 c2.663,0,6.438,0.225,9.989,0.669l1.998-12.212c-3.552-0.666-9.101-1.111-12.209-1.111 C169.214,238.842,163.665,247.056,163.887,256.824L163.887,256.824z" />
                        <path class="svg-master-letter" d="M448.935,293.235h-13.097l0.665-5.109 c-3.773,3.996-7.77,5.772-12.875,5.772c-10.215,0-16.874-8.654-16.874-21.979c0-17.758,10.435-32.854,22.646-32.854 c5.55,0,9.546,2.442,13.319,7.328l3.108-18.652h13.766L448.935,293.235L448.935,293.235z M428.511,280.804 c6.438,0,10.879-7.554,10.879-17.982c0-6.886-2.443-10.437-7.325-10.437c-6.217,0-10.881,7.327-10.881,17.759 C421.184,277.251,423.628,280.804,428.511,280.804L428.511,280.804z" />
                        <path class="svg-master-letter" d="M260.013,292.122c-4.883,1.558-9.322,2.22-14.432,2.22 c-15.538,0-23.53-8.211-23.53-23.974c0-18.203,10.211-31.748,24.2-31.748c11.542,0,18.868,7.548,18.868,19.315 c0,3.996-0.445,7.768-1.776,13.321h-27.529c-0.222,0.662-0.222,1.106-0.222,1.55c0,6.222,4.218,9.329,12.21,9.329 c5.107,0,9.547-0.888,14.432-3.332L260.013,292.122L260.013,292.122z M252.241,260.375c0-1.107,0-1.994,0-2.663 c0-4.44-2.439-6.881-6.66-6.881c-4.439,0-7.547,3.331-8.879,9.544H252.241L252.241,260.375z" />
                        <polygon class="svg-master-letter" points="110.828,293.235 97.065,293.235 105.056,242.839 87.074,293.235 77.527,293.235 76.418,243.282 67.981,293.235 55.106,293.235 65.984,227.741 85.964,227.741 86.63,268.367 99.949,227.741 121.706,227.741 110.828,293.235 " />
                        <path class="svg-master-letter" d="M145.238,269.48c-1.332,0-1.998-0.226-3.107-0.226 c-7.771,0-11.767,2.889-11.767,8.217c0,3.332,1.776,5.328,4.884,5.328C141.021,282.8,145.017,277.472,145.238,269.48 L145.238,269.48z M155.45,293.235h-11.544l0.222-5.554c-3.552,4.44-8.215,6.441-14.652,6.441c-7.547,0-12.653-5.771-12.653-14.433 c0-13.1,8.879-20.646,24.418-20.646c1.554,0,3.554,0.224,5.773,0.443c0.444-1.775,0.444-2.438,0.444-3.327 c0-3.551-2.441-4.883-8.88-4.883c-3.996,0-8.436,0.444-11.543,1.332l-1.998,0.663l-1.332,0.224l1.998-11.988 c6.881-1.999,11.545-2.666,16.65-2.666c11.987,0,18.426,5.329,18.426,15.542c0,2.664-0.222,4.659-1.109,10.655l-3.11,18.872 l-0.444,3.327l-0.222,2.664l-0.221,1.999L155.45,293.235L155.45,293.235z" />
                        <path class="svg-master-letter" d="M365.019,269.48c-1.555,0-2.22-0.226-3.108-0.226 c-7.991,0-11.987,2.889-11.987,8.217c0,3.332,1.998,5.328,5.106,5.328C360.579,282.8,364.797,277.472,365.019,269.48 L365.019,269.48z M375.229,293.235h-11.543l0.222-5.554c-3.551,4.44-8.213,6.441-14.65,6.441c-7.548,0-12.653-5.771-12.653-14.433 c0-13.1,8.879-20.646,24.418-20.646c1.554,0,3.552,0.224,5.551,0.443c0.443-1.775,0.665-2.438,0.665-3.327 c0-3.551-2.441-4.883-8.88-4.883c-3.995,0-8.656,0.444-11.766,1.332l-1.775,0.663l-1.332,0.224l1.998-11.988 c6.882-1.999,11.543-2.666,16.648-2.666c11.988,0,18.206,5.329,18.206,15.542c0,2.664,0,4.659-1.113,10.655l-2.883,18.872 l-0.446,3.327l-0.443,2.664l-0.223,1.999V293.235L375.229,293.235z" />
                        <path class="svg-master-letter" d="M412.526,239.509c-0.444,0-0.889,0-1.332,0 c-4.662,0-7.325,2.22-11.544,8.66l1.331-8.216H388.33l-8.438,53.282h13.765c5.106-32.635,6.438-38.187,13.098-38.187 c0.444,0,0.444,0,0.889,0c1.331-6.436,3.107-11.1,5.327-15.318L412.526,239.509L412.526,239.509z" />
                    </svg>

                    <svg class="svg-amex" viewBox="0 0 512 512">
                        <path class="svg-amex-border" d="M482.722,103.198c13.854,0,25.126,11.271,25.126,25.126v257.9c0,13.854-11.271,25.125-25.126,25.125H30.99 c-13.854,0-25.126-11.271-25.126-25.125v-257.9c0-13.854,11.271-25.126,25.126-25.126H482.722 M482.722,98.198H30.99 c-16.638,0-30.126,13.488-30.126,30.126v257.9c0,16.639,13.488,30.125,30.126,30.125h451.731c16.64,0,30.126-13.486,30.126-30.125 v-257.9C512.848,111.686,499.36,98.198,482.722,98.198L482.722,98.198z" />
                        <path class="svg-amex-letter" d="M263.488,241.026v-10.115c0,0-0.535-7.92-8.802-7.92h-12.852v18.035h-13.193v-51.994 h32.03c0,0,16.718-2.024,16.718,15.218c0,8.975-7.391,12.139-7.391,12.139s6.416,2.997,6.416,11.795v12.841L263.488,241.026 M241.835,210.762h13.643c3.961,0,7.219-2.201,7.219-4.926c0-2.73-3.258-4.93-7.219-4.93h-13.643V210.762L241.835,210.762" />
                        <path class="svg-amex-letter" d="M419.223,241.026l-20.938-34.752v34.752h-11.352h-2.119h-12.394l-4.668-10.908h-24.105 l-4.583,10.908H326.92h-2.196h-6.339c0,0-17.768-2.549-17.768-24.545c0-28.862,20.154-27.716,20.851-27.893l16.278,0.444v11.7 l-13.367,0.172c0,0-8.715,0-9.775,11.355c-0.124,1.303-0.181,2.501-0.172,3.614c0.048,17.577,15.258,12.12,15.754,11.958 l16.364-38.799h18.473l19.792,47.159v-47.159h18.654l20.68,34.227v-34.227h13.29v51.994H419.223 M349.279,216.834h12.84 l-6.329-15.486L349.279,216.834L349.279,216.834" />
                        <path class="svg-amex-letter" d="M159.92,241.026v-35.893l-16.536,35.893h-10.821l-16.631-35.72v35.72h-11.524h-1.762 H89.888l-4.573-10.908H61.208l-4.664,10.908h-14.43l21.906-51.994h18.569l20.058,47.774v-47.774h20.852l14.521,32.289 l14.436-32.289h20.851v51.994H159.92 M66.836,216.834h12.845l-6.42-15.486L66.836,216.834L66.836,216.834" />
                        <polyline class="svg-amex-letter" points="180.6,241.026 180.6,189.033 221.786,189.033 221.786,201.172 193.89,201.172 193.89,209.177 221.08,209.177 221.08,220.968 193.89,220.968 193.89,229.77 221.786,229.77 221.786,241.026 180.6,241.026" />
                        <polyline class="svg-amex-letter" points="282.85,241.203 282.85,189.033 296.13,189.033 296.13,241.203 282.85,241.203" />
                        <path class="svg-amex-letter" d="M314.432,329.189v-10.121c0,0-0.533-7.914-8.802-7.914h-12.842v18.035h-13.204v-51.998 h32.03c0,0,16.718-2.023,16.718,15.223c0,8.975-7.389,12.145-7.389,12.145s6.34,2.988,6.34,11.78v12.851H314.432 M292.788,298.925h13.644c3.952,0,7.208-2.194,7.208-4.926c0-2.729-3.256-4.927-7.208-4.927h-13.644V298.925L292.788,298.925" />
                        <path class="svg-amex-letter" d="M226.445,329.104h-11.533l-13.977-15.4l-14.091,15.4h-8.001h-41.091v-52.086h41.091 h6.951l15.142,16.543l15.219-16.457h10.119v-0.086h32.022c0,0,16.718-1.851,16.718,15.301c0,15.313-5.548,20.067-22.619,20.067 h-12.926v16.718H226.445 M209.909,303.508l16.363,18.12v-36.165L209.909,303.508L209.909,303.508 M151.042,317.85h27.801 l13.023-14.342l-13.023-14.264h-27.801v8.001h27.095v11.801h-27.095V317.85L151.042,317.85 M239.468,298.83h13.633 c3.961,0,7.217-2.196,7.217-4.926c0-2.721-3.256-4.928-7.217-4.928h-13.633V298.83L239.468,298.83" />
                        <path class="svg-amex-letter" d="M404.441,329.018h-23.496v-11.973h20.595c0,0,7.39,0.88,7.39-4.123 c0-4.679-11.17-4.316-11.17-4.316s-18.216,1.586-18.216-15.484c0-16.984,16.449-16.016,16.449-16.016h25.347v12.14h-20.41 c0,0-7.046-1.412-7.046,3.705c0,4.296,9.585,3.685,9.585,3.685s20.153-1.488,20.153,14.168 c0,16.793-12.984,18.282-17.585,18.282C405.044,329.084,404.441,329.018,404.441,329.018" />
                        <polyline class="svg-amex-letter" points="333.794,329.104 333.794,277.191 374.962,277.191 374.962,289.244 347.073,289.244 347.073,297.245 374.264,297.245 374.264,309.046 347.073,309.046 347.073,317.85 374.962,317.85 374.962,329.104 333.794,329.104" />
                        <path class="svg-amex-letter" d="M450.984,329.018h-23.495v-11.973h20.507c0,0,7.477,0.88,7.477-4.123 c0-4.679-11.169-4.316-11.169-4.316s-18.218,1.586-18.218-15.484c0-16.984,16.449-16.016,16.449-16.016h25.262v12.14h-20.334 c0,0-7.038-1.412-7.038,3.705c0,4.296,9.597,3.685,9.597,3.685s20.144-1.488,20.144,14.168 c0,16.793-12.983,18.282-17.584,18.282C451.586,329.084,450.984,329.018,450.984,329.018" />
                    </svg>
                </div>



                <div id="1" class='button col-sm-12 col-md-2'>
                    {% trans %}International Credit Card{% endtrans %}


                    <svg class="svg-visa" viewBox="0 0 512 512">
                        <path class="svg-visa-border" d="M482.722,103.198c13.854,0,25.126,11.271,25.126,25.126v257.9c0,13.854-11.271,25.126-25.126,25.126H30.99 c-13.854,0-25.126-11.271-25.126-25.126v-257.9c0-13.854,11.271-25.126,25.126-25.126H482.722 M482.722,98.198H30.99 c-16.638,0-30.126,13.488-30.126,30.126v257.9c0,16.639,13.488,30.126,30.126,30.126h451.732 c16.639,0,30.126-13.487,30.126-30.126v-257.9C512.848,111.686,499.36,98.198,482.722,98.198L482.722,98.198z" />
                        <polygon class="svg-visa-letter" points="190.88,321.104 212.529,194.022 247.182,194.022 225.494,321.104 190.88,321.104" />
                        <path class="svg-visa-letter" d="M351.141,197.152c-6.86-2.577-17.617-5.339-31.049-5.339c-34.226,0-58.336,17.234-58.549,41.94 c-0.193,18.256,17.21,28.451,30.351,34.527c13.489,6.231,18.023,10.204,17.966,15.767c-0.097,8.518-10.775,12.403-20.737,12.403 c-13.857,0-21.222-1.918-32.599-6.667l-4.458-2.016l-4.864,28.452c8.082,3.546,23.043,6.618,38.587,6.772 c36.417,0,60.042-17.035,60.313-43.423c0.136-14.447-9.089-25.446-29.071-34.522c-12.113-5.882-19.535-9.802-19.458-15.757 c0-5.281,6.279-10.93,19.846-10.93c11.318-0.179,19.536,2.292,25.912,4.869l3.121,1.468L351.141,197.152L351.141,197.152z" />
                        <path class="svg-visa-letter" d="M439.964,194.144h-26.766c-8.295,0-14.496,2.262-18.14,10.538l-51.438,116.47h36.378 c0,0,5.931-15.66,7.287-19.1c3.974,0,39.305,0.059,44.363,0.059c1.027,4.447,4.206,19.041,4.206,19.041h32.152L439.964,194.144 L439.964,194.144z M397.248,276.062c2.868-7.326,13.8-35.53,13.8-35.53c-0.194,0.339,2.849-7.36,4.593-12.132l2.346,10.959 c0,0,6.628,30.336,8.022,36.703H397.248L397.248,276.062z" />
                        <path class="svg-visa-letter" d="M161.828,194.114l-33.917,86.667l-3.624-17.607c-6.299-20.312-25.971-42.309-47.968-53.317l31.009,111.149 l36.649-0.048l54.538-126.844H161.828L161.828,194.114z" />
                        <path class="svg-visa-corner" d="M96.456,194.037H40.581l-0.426,2.641c43.452,10.523,72.213,35.946,84.133,66.496l-12.133-58.41 C110.062,196.716,103.976,194.318,96.456,194.037L96.456,194.037z" />
                    </svg>

                    <svg class="svg-master" viewBox="0 0 512 512">
                        <path class="svg-master-border" d="M482.722,103.198c13.854,0,25.126,11.271,25.126,25.126v257.9c0,13.854-11.271,25.126-25.126,25.126H30.99 c-13.854,0-25.126-11.271-25.126-25.126v-257.9c0-13.854,11.271-25.126,25.126-25.126H482.722 M482.722,98.198H30.99 c-16.638,0-30.126,13.488-30.126,30.126v257.9c0,16.639,13.488,30.126,30.126,30.126h451.732 c16.639,0,30.126-13.487,30.126-30.126v-257.9C512.848,111.686,499.36,98.198,482.722,98.198L482.722,98.198z" />
                        <path class="svg-master-circle2" d="M257.568,355.172c22.646,20.867,53.061,33.522,86.14,33.522 c71.037,0,128.538-57.941,128.538-129.207c0-71.482-57.501-129.424-128.538-129.424c-33.079,0-63.493,12.653-86.14,33.522 c-25.972,23.752-42.401,57.943-42.401,95.902C215.167,297.45,231.597,331.642,257.568,355.172L257.568,355.172z" />
                        <path class="svg-master-circle1" d="M299.086,245.725c-0.444-4.662-1.331-9.102-2.223-13.764h-78.586 c0.888-4.662,2.217-9.103,3.549-13.543h71.266c-1.558-4.659-3.333-9.323-5.332-13.763h-60.382 c2.22-4.659,4.661-9.323,7.326-13.763h45.51c-2.887-4.662-6.215-9.325-9.769-13.542h-25.975 c3.996-4.883,8.438-9.545,13.097-13.763c-22.863-20.647-53.057-33.522-86.356-33.522c-70.817,0-128.538,57.942-128.538,129.424 c0,71.266,57.721,129.207,128.538,129.207c33.3,0,63.493-12.655,86.356-33.522l0,0l0,0c4.665-4.221,8.882-8.66,12.878-13.544 h-25.975c-3.552-4.439-6.66-8.879-9.767-13.763h45.51c2.885-4.439,5.327-8.879,7.546-13.764h-60.382 c-2.001-4.439-3.996-8.88-5.552-13.544h71.266c1.553-4.439,2.661-9.1,3.771-13.763c0.892-4.439,1.778-9.104,2.223-13.764 c0.443-4.44,0.666-8.879,0.666-13.544C299.752,254.828,299.529,250.165,299.086,245.725L299.086,245.725z" />
                        <path class="svg-master-letter" d="M342.599,229.742l-2.443,14.207 c-4.886-2.441-8.438-3.552-12.434-3.552c-10.433,0-17.76,10.212-17.76,24.644c0,9.987,4.885,15.982,13.098,15.982 c3.33,0,7.326-1.106,11.766-3.332l-2.441,14.876c-5.106,1.332-8.436,2-12.209,2c-15.096,0-24.421-10.88-24.421-28.419 c0-23.309,12.877-39.735,31.302-39.735c2.441,0,4.662,0.222,6.44,0.666l5.549,1.332 C340.822,229.076,341.264,229.298,342.599,229.742L342.599,229.742z" />
                        <path class="svg-master-letter" d="M297.755,239.509c-0.444,0-0.892,0-1.333,0 c-4.665,0-7.327,2.22-11.546,8.66l1.331-8.216h-12.651l-8.658,53.282h13.984c5.106-32.635,6.438-38.187,13.098-38.187 c0.443,0,0.443,0,0.888,0c1.332-6.436,3.108-11.1,5.33-15.318L297.755,239.509L297.755,239.509z" />
                        <path class="svg-master-letter" d="M217.387,292.566c-3.771,1.332-6.878,1.775-9.987,1.775 c-7.105,0-11.102-3.995-11.102-11.762c0-1.332,0.222-3.113,0.444-4.664l0.889-5.328l0.665-4.221l5.997-36.406h13.763l-1.557,7.992 h7.104l-1.775,13.1h-7.104l-3.771,22.198c-0.224,0.889-0.224,1.552-0.224,2.221c0,2.664,1.332,3.776,4.664,3.776 c1.551,0,2.886,0,3.774-0.444L217.387,292.566L217.387,292.566z" />
                        <path class="svg-master-letter" d="M163.887,256.824c0,6.66,3.107,11.323,10.433,14.876 c5.773,2.663,6.661,3.551,6.661,5.771c0,3.332-2.441,4.884-7.992,4.884c-4.218,0-7.992-0.664-12.432-1.995l-2,12.206l0.667,0.225 l2.443,0.444c0.887,0.219,1.998,0.444,3.774,0.444c3.108,0.443,5.771,0.443,7.548,0.443c14.652,0,21.534-5.551,21.534-17.76 c0-7.328-2.886-11.548-9.768-14.875c-5.994-2.663-6.661-3.333-6.661-5.771c0-2.888,2.443-4.221,6.883-4.221 c2.663,0,6.438,0.225,9.989,0.669l1.998-12.212c-3.552-0.666-9.101-1.111-12.209-1.111 C169.214,238.842,163.665,247.056,163.887,256.824L163.887,256.824z" />
                        <path class="svg-master-letter" d="M448.935,293.235h-13.097l0.665-5.109 c-3.773,3.996-7.77,5.772-12.875,5.772c-10.215,0-16.874-8.654-16.874-21.979c0-17.758,10.435-32.854,22.646-32.854 c5.55,0,9.546,2.442,13.319,7.328l3.108-18.652h13.766L448.935,293.235L448.935,293.235z M428.511,280.804 c6.438,0,10.879-7.554,10.879-17.982c0-6.886-2.443-10.437-7.325-10.437c-6.217,0-10.881,7.327-10.881,17.759 C421.184,277.251,423.628,280.804,428.511,280.804L428.511,280.804z" />
                        <path class="svg-master-letter" d="M260.013,292.122c-4.883,1.558-9.322,2.22-14.432,2.22 c-15.538,0-23.53-8.211-23.53-23.974c0-18.203,10.211-31.748,24.2-31.748c11.542,0,18.868,7.548,18.868,19.315 c0,3.996-0.445,7.768-1.776,13.321h-27.529c-0.222,0.662-0.222,1.106-0.222,1.55c0,6.222,4.218,9.329,12.21,9.329 c5.107,0,9.547-0.888,14.432-3.332L260.013,292.122L260.013,292.122z M252.241,260.375c0-1.107,0-1.994,0-2.663 c0-4.44-2.439-6.881-6.66-6.881c-4.439,0-7.547,3.331-8.879,9.544H252.241L252.241,260.375z" />
                        <polygon class="svg-master-letter" points="110.828,293.235 97.065,293.235 105.056,242.839 87.074,293.235 77.527,293.235 76.418,243.282 67.981,293.235 55.106,293.235 65.984,227.741 85.964,227.741 86.63,268.367 99.949,227.741 121.706,227.741 110.828,293.235 " />
                        <path class="svg-master-letter" d="M145.238,269.48c-1.332,0-1.998-0.226-3.107-0.226 c-7.771,0-11.767,2.889-11.767,8.217c0,3.332,1.776,5.328,4.884,5.328C141.021,282.8,145.017,277.472,145.238,269.48 L145.238,269.48z M155.45,293.235h-11.544l0.222-5.554c-3.552,4.44-8.215,6.441-14.652,6.441c-7.547,0-12.653-5.771-12.653-14.433 c0-13.1,8.879-20.646,24.418-20.646c1.554,0,3.554,0.224,5.773,0.443c0.444-1.775,0.444-2.438,0.444-3.327 c0-3.551-2.441-4.883-8.88-4.883c-3.996,0-8.436,0.444-11.543,1.332l-1.998,0.663l-1.332,0.224l1.998-11.988 c6.881-1.999,11.545-2.666,16.65-2.666c11.987,0,18.426,5.329,18.426,15.542c0,2.664-0.222,4.659-1.109,10.655l-3.11,18.872 l-0.444,3.327l-0.222,2.664l-0.221,1.999L155.45,293.235L155.45,293.235z" />
                        <path class="svg-master-letter" d="M365.019,269.48c-1.555,0-2.22-0.226-3.108-0.226 c-7.991,0-11.987,2.889-11.987,8.217c0,3.332,1.998,5.328,5.106,5.328C360.579,282.8,364.797,277.472,365.019,269.48 L365.019,269.48z M375.229,293.235h-11.543l0.222-5.554c-3.551,4.44-8.213,6.441-14.65,6.441c-7.548,0-12.653-5.771-12.653-14.433 c0-13.1,8.879-20.646,24.418-20.646c1.554,0,3.552,0.224,5.551,0.443c0.443-1.775,0.665-2.438,0.665-3.327 c0-3.551-2.441-4.883-8.88-4.883c-3.995,0-8.656,0.444-11.766,1.332l-1.775,0.663l-1.332,0.224l1.998-11.988 c6.882-1.999,11.543-2.666,16.648-2.666c11.988,0,18.206,5.329,18.206,15.542c0,2.664,0,4.659-1.113,10.655l-2.883,18.872 l-0.446,3.327l-0.443,2.664l-0.223,1.999V293.235L375.229,293.235z" />
                        <path class="svg-master-letter" d="M412.526,239.509c-0.444,0-0.889,0-1.332,0 c-4.662,0-7.325,2.22-11.544,8.66l1.331-8.216H388.33l-8.438,53.282h13.765c5.106-32.635,6.438-38.187,13.098-38.187 c0.444,0,0.444,0,0.889,0c1.331-6.436,3.107-11.1,5.327-15.318L412.526,239.509L412.526,239.509z" />
                    </svg>

                    <svg class="svg-amex" viewBox="0 0 512 512">
                        <path class="svg-amex-border" d="M482.722,103.198c13.854,0,25.126,11.271,25.126,25.126v257.9c0,13.854-11.271,25.125-25.126,25.125H30.99 c-13.854,0-25.126-11.271-25.126-25.125v-257.9c0-13.854,11.271-25.126,25.126-25.126H482.722 M482.722,98.198H30.99 c-16.638,0-30.126,13.488-30.126,30.126v257.9c0,16.639,13.488,30.125,30.126,30.125h451.731c16.64,0,30.126-13.486,30.126-30.125 v-257.9C512.848,111.686,499.36,98.198,482.722,98.198L482.722,98.198z" />
                        <path class="svg-amex-letter" d="M263.488,241.026v-10.115c0,0-0.535-7.92-8.802-7.92h-12.852v18.035h-13.193v-51.994 h32.03c0,0,16.718-2.024,16.718,15.218c0,8.975-7.391,12.139-7.391,12.139s6.416,2.997,6.416,11.795v12.841L263.488,241.026 M241.835,210.762h13.643c3.961,0,7.219-2.201,7.219-4.926c0-2.73-3.258-4.93-7.219-4.93h-13.643V210.762L241.835,210.762" />
                        <path class="svg-amex-letter" d="M419.223,241.026l-20.938-34.752v34.752h-11.352h-2.119h-12.394l-4.668-10.908h-24.105 l-4.583,10.908H326.92h-2.196h-6.339c0,0-17.768-2.549-17.768-24.545c0-28.862,20.154-27.716,20.851-27.893l16.278,0.444v11.7 l-13.367,0.172c0,0-8.715,0-9.775,11.355c-0.124,1.303-0.181,2.501-0.172,3.614c0.048,17.577,15.258,12.12,15.754,11.958 l16.364-38.799h18.473l19.792,47.159v-47.159h18.654l20.68,34.227v-34.227h13.29v51.994H419.223 M349.279,216.834h12.84 l-6.329-15.486L349.279,216.834L349.279,216.834" />
                        <path class="svg-amex-letter" d="M159.92,241.026v-35.893l-16.536,35.893h-10.821l-16.631-35.72v35.72h-11.524h-1.762 H89.888l-4.573-10.908H61.208l-4.664,10.908h-14.43l21.906-51.994h18.569l20.058,47.774v-47.774h20.852l14.521,32.289 l14.436-32.289h20.851v51.994H159.92 M66.836,216.834h12.845l-6.42-15.486L66.836,216.834L66.836,216.834" />
                        <polyline class="svg-amex-letter" points="180.6,241.026 180.6,189.033 221.786,189.033 221.786,201.172 193.89,201.172 193.89,209.177 221.08,209.177 221.08,220.968 193.89,220.968 193.89,229.77 221.786,229.77 221.786,241.026 180.6,241.026" />
                        <polyline class="svg-amex-letter" points="282.85,241.203 282.85,189.033 296.13,189.033 296.13,241.203 282.85,241.203" />
                        <path class="svg-amex-letter" d="M314.432,329.189v-10.121c0,0-0.533-7.914-8.802-7.914h-12.842v18.035h-13.204v-51.998 h32.03c0,0,16.718-2.023,16.718,15.223c0,8.975-7.389,12.145-7.389,12.145s6.34,2.988,6.34,11.78v12.851H314.432 M292.788,298.925h13.644c3.952,0,7.208-2.194,7.208-4.926c0-2.729-3.256-4.927-7.208-4.927h-13.644V298.925L292.788,298.925" />
                        <path class="svg-amex-letter" d="M226.445,329.104h-11.533l-13.977-15.4l-14.091,15.4h-8.001h-41.091v-52.086h41.091 h6.951l15.142,16.543l15.219-16.457h10.119v-0.086h32.022c0,0,16.718-1.851,16.718,15.301c0,15.313-5.548,20.067-22.619,20.067 h-12.926v16.718H226.445 M209.909,303.508l16.363,18.12v-36.165L209.909,303.508L209.909,303.508 M151.042,317.85h27.801 l13.023-14.342l-13.023-14.264h-27.801v8.001h27.095v11.801h-27.095V317.85L151.042,317.85 M239.468,298.83h13.633 c3.961,0,7.217-2.196,7.217-4.926c0-2.721-3.256-4.928-7.217-4.928h-13.633V298.83L239.468,298.83" />
                        <path class="svg-amex-letter" d="M404.441,329.018h-23.496v-11.973h20.595c0,0,7.39,0.88,7.39-4.123 c0-4.679-11.17-4.316-11.17-4.316s-18.216,1.586-18.216-15.484c0-16.984,16.449-16.016,16.449-16.016h25.347v12.14h-20.41 c0,0-7.046-1.412-7.046,3.705c0,4.296,9.585,3.685,9.585,3.685s20.153-1.488,20.153,14.168 c0,16.793-12.984,18.282-17.585,18.282C405.044,329.084,404.441,329.018,404.441,329.018" />
                        <polyline class="svg-amex-letter" points="333.794,329.104 333.794,277.191 374.962,277.191 374.962,289.244 347.073,289.244 347.073,297.245 374.264,297.245 374.264,309.046 347.073,309.046 347.073,317.85 374.962,317.85 374.962,329.104 333.794,329.104" />
                        <path class="svg-amex-letter" d="M450.984,329.018h-23.495v-11.973h20.507c0,0,7.477,0.88,7.477-4.123 c0-4.679-11.169-4.316-11.169-4.316s-18.218,1.586-18.218-15.484c0-16.984,16.449-16.016,16.449-16.016h25.262v12.14h-20.334 c0,0-7.038-1.412-7.038,3.705c0,4.296,9.597,3.685,9.597,3.685s20.144-1.488,20.144,14.168 c0,16.793-12.983,18.282-17.584,18.282C451.586,329.084,450.984,329.018,450.984,329.018" />
                    </svg>

                </div>
                <div id="2" class='button col-sm-12 col-md-2'>
                    {% trans %}Moroccan Credit Card{% endtrans %}

                    <svg class="svg-debit" viewBox="0 0 32 23">
                        <path class="svg-debit-card" d="M1.993 0h28c1.104 0 2 .895 2 2v18.999c0 1.104-.896 2.001-2 2.001h-28c-1.104 0-2-.896-2-2.001v-18.999c0-1.105.895-2 2-2z" />
                        <path class="svg-debit-data" d="M12.993 15v2h16v-2h-16zm0 5h10v-2h-10v2zm-4-5h-4c-1.104 0-2 .896-2 2v1c0 1.104.896 2 2 2h4c1.104 0 2-.896 2-2v-1c0-1.104-.896-2-2-2z" />
                        <path class="svg-debit-sign" d="M2.993 9h26v3h-26v-3z" />
                        <path class="svg-debit-read" d="M-.007 3h32v3h-32v-3z" />
                    </svg>
                </div>

            
            


                <div class="col-md-1"></div>


            </div>
            
        
            </div>

            <style>
                .card{
                    margin: 1%;
                }
            </style>

            <div class="card text-center">
                <div class="card-header">
                    {% trans %}Payment details{% endtrans %}
                </div>
                <div class="card-body">


                    <h4>
                        <span id="price">{% trans %}Price{% endtrans %} :</span>
                        <strong id="ht">{{  order.getTotalPrice() }} €</strong>
                        <span id="plusinfo">
                            <i style="color: #0000F0" class="fa fa-question-circle" data-toggle="tooltip" title="{% trans %}Amount with commission of interbank electronic money center CMI.{% endtrans %}"></i>
                        </span>
                        <span id="plusinfopaypal">
                            <i style="color: #0000F0" class="fa fa-question-circle" data-toggle="tooltip1" title="{% trans %}Amount with commission of Paypal.{% endtrans %}"></i>
                        </span>
                    </h4>

                    <h4>
                        <span id="fees" data-toggle="tooltip2" title="{% trans %}International credit card fees!{% endtrans %}"></span>
                        <strong id="tva"></strong>
                    </h4>

                    <h3>{% trans %}Total Price: {% endtrans %}<strong id="total">{{  order.getTotalPrice() }} €</strong></h3>

                    <div  id="payform">
                        <div class="form-check">
                            <input class="conditions" type="checkbox" id="conditions" name="conditions" /> {% trans %}Accept{% endtrans %} <a href="#terms" data-toggle="modal" data-target="#terms">{% trans %}terms & conditions{% endtrans %}</a>
                        </div>

                            <button id="validatePay" class="btn btn-primary" data-toggle="modal" data-target="#phoneNumberModal">{% trans %}Valid your payment{% endtrans %}</button>
                     
                    </div>
                </div>

                <div class="card-footer text-muted">
                    {% trans %}The entire FastTrackMaroc team would like to thank you for the confidence you have placed in us.{% endtrans %}
                </div>

            </div>

            </form>

    {% endif %}


{% endblock %}

{% block scripts %}
    <script src="{{ asset("assets/plugins/parallax-js-master/parallax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/Isotope/isotope.pkgd.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/TweenMax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/TimelineMax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/scrollmagic/ScrollMagic.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/animation.gsap.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/ScrollToPlugin.min.js")}}"></script>
    <script src="{{ asset("assets/js/select2.min.js")}}"></script>
    <script src="{{ asset("assets/js/bookoffice_custom.js")}}"></script>



    <script >

        $(document).ready(function() {

            //$("#payform").hide();
            var tva = {{ order.getTotalPrice()  }}*0.05;
            //var tva = 0;
            var total = {{ order.getTotalPrice()  }};
            //$('#tva').html(tva.toFixed(2)+" €");
            $('#ht').html(tva+total+" €");
            $('#total').html(tva+total+" €");
            $('#validatePay').attr('disabled', true);
            $("#plusinfopaypal").show();
            $("#plusinfo").hide();
            //$('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="tooltip1"]').tooltip();
            $('.button').on('click', function() {

            $('.button').removeClass('active');
            $(this).toggleClass('active');

                var id = $('.button.active').attr('id');

                if(id==1){

                    $("#plusinfo").hide();
                    $("#plusinfopaypal").hide();
                    $('[data-toggle="tooltip2"]').tooltip();
                    var price = {{ order.getTotalPrice()  }};

                    var tva = Math.round(price*0.2);

                   // var tva = {{ order.getTotalPrice()  }}*0.05; * apres derniere modifs cci avec TVA
                    var total = {{ order.getTotalPrice()  }};
                  //  $("#payform").hide();
                    $('#ht').html(total+ " €");
                    $('#fees').html("TVA :");
                   // $('#noteb').html("Service will be available soon<br>Service sera disponible prochainement");
                    $('#tva').html(tva.toFixed(2)+" €");
                    $('#total').html(tva+total+" €");
                    $('#paymentType').val("icc");

                }else if(id == 2){
                    $("#plusinfo").hide();
                    $("#plusinfopaypal").hide();
                    $('[data-toggle="tooltip2"]').tooltip();
                    //$("#payform").hide();
                    //var price = 10*({{ order.getTotalPrice()  }}+{{ order.getTotalPrice()  }}*0.05);
                    
                    var price = 10*{{ order.getTotalPrice()  }};
                    var tva = Math.round(price*0.2);
                    var total = price+tva;


                    $('#ht').html(price+" MAD");
                    $('#fees').html("TVA :");
                    $('#cardType').val("LOC");
                    //$('#noteb').html("Service will be available soon<br>Service sera disponible prochainement");
                    $('#tva').html(tva.toFixed(2)+" MAD");
                    $('#total').html(total+" MAD");
                    $('#paymentType').val("mcc");

                }else if(id == 3){
                    $("#plusinfo").hide();
                    $("#payform").show();
                    var price = {{ order.getTotalPrice()  }}*10;
                    var tva = 0;
                    var total = price;
                    $('#fees').html("");
                    $('#noteb').html("");
                    $('#price').html();
                    $('#ht').html(price+" MAD");
                    $('#tva').html("");
                    $('#total').html(tva+total+" MAD");
                    $('#paymentType').val("transfer");

                }else if(id == 4){
                    $("#plusinfo").hide();
                    $("#plusinfopaypal").show();
                    $('[data-toggle="tooltip1"]').tooltip();
                    $("#payform").show();
                    var tva = {{ order.getTotalPrice()  }}*0.05;
                    var total = {{ order.getTotalPrice()  }};
                    $('#fees').html("");
                    $('#noteb').html("");
                    $('#ht').html(tva+total+" €");
                    $('#tva').html("");
                    $('#total').html(tva+total+" €");
                    $('#paymentType').val("paypal");
                }else{
                    $("#plusinfo").hide();
                    $("#payform").show();
                    var price = {{ order.getTotalPrice()  }}*10;
                    var tva = 0;
                    var total = price;
                    $('#fees').html("");
                    $('#noteb').html("");
                    $('#price').html();
                    $('#ht').html(price+" MAD");
                    $('#tva').html("");
                    $('#total').html(tva+total+" MAD");
                    $('#paymentType').val("cash");
                }
            });





            $('#conditions').click(function () {

                //check if checkbox is checked
                if ($(this).is(':checked')) {

                    $('#validatePay').removeAttr('disabled'); //enable input

                 /*   $('#validatePay').click(function () {

                        var paypmnt = $('#paymentType').val();

                            if (paypmnt=="paypal"){
                                $("#paypal_form").submit();
                            }
                        }
                    );
                    */

                } else {
                    $('#validatePay').attr('disabled', true); //disable input
                }
            });



        });


        $(document).ready(function() {

            //$('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="tooltip1"]').tooltip();

        });

        //# sourceURL=pen.js





    </script>

    <div class="modal fade" id="terms" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Terms & Conditions</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                   <ul style="list-style: square;margin-left: 2%;margin-bottom: 0px;">

                       <li>{% trans %}All cancellation done 48 hours before the D day is100% refunded refunded (Less the administrations fees which are 10% of the amount paid).{% endtrans %}
                       </li>
                       <li>{% trans %}The cancellation done between 48 and 24 hours before the Dday is 50% refunded(Less the administrations fees which are 10% of the amount paid).{% endtrans %}
                       </li>
                       <li>{% trans %}The cancellation done in the 24 hours of the date of the confirmation service isn’t refunded at all.{% endtrans %}
                       </li>
                       <li>{% trans %}A 50% mark-up is applied to any request sent on the same day of service.{% endtrans %}
                       </li>
                       <li>{% trans %}Non-attendance of the Customer is considered as “No-show”, no refund would be applicable.{% endtrans %}
                       </li>
                       <li>{% trans %}The Fast track service facilitates customs formalities only by crossing the fast track line{% endtrans %}
                       </li>
                       <li>{% trans %}The customer may not claim any refund if he has failed to comply with the instructions communicated, or if he shows up late.{% endtrans %}
                       </li>
                       <li>{% trans %}The present general terms and conditions of sale govern all relations between the customer and the website www.fasttrackmaroc.com (Property of 1001 EVASIONS company, based in Tangier), they act as contract.{% endtrans %}
                       </li>

                       <li>{% trans %}Any order purchased on this website presumes the unconditional and irreversible acceptance of these conditions by the customer.{% endtrans %}
                       </li>
                       <li>{% trans %}The validation of an order constitutes an electronic signature on behalf of the user by which he undertakes to comply with all the general conditions of sale.{% endtrans %}
                       </li>
                       <li>{% trans %}This contract is a remote agreement that defines the rights and obligations of the parties in connection with the sale of the products offered by the website www.fasttrackmaroc.com .{% endtrans %}
                       </li>
                       <li>{% trans %}The general conditions of use and sale are applied to all the products and services proposed directly by Fast track morocco through its website www.fasttrackmaroc.com or indirectly (via our partners) and for all our customers.{% endtrans %}
                       </li>
                       <li>{% trans %}The « Customer »: Every person or group of persons that use platform www.fasttrackmaroc.com to reserve or purchase one or many services proposed.{% endtrans %}
                       </li>
                       <li>{% trans %}The customer must be aged by 18 years and plus, be able legally to contract and use the website www.fasttrackmaroc.com accordingly to the present conditions of sale and utilization.{% endtrans %}
                       </li>
                       <li>{% trans %}The customer is financially responsible for his payments on the website. He also guarantees the veracity and the accuracy of his/her information provided on www.fasttrackmaroc.com .{% endtrans %}
                       </li>
                       <li>{% trans %}Any Fraudulent use of www.fasttrackmaroc.com that would contravenes these Terms and Conditions, will justify the rejection, at any time, to access the services offered by www.fasttrackmaroc.com . {% endtrans %}
                       </li>
                       <li>{% trans %}While a reservation, the customer guarantees that he accepts the present conditions on his name and/or the name of the persons for whom he did a reservation.{% endtrans %}
                       </li>
                       <li>{% trans %}The customer who makes a reservation for more than one person, guarantees to be responsible individually for all payments due to each of the persons for which he made the reservations.{% endtrans %}
                       </li>
                       <li>{% trans %}It is the responsibility of the customer that all information provided by www.fasttrackmaroc.com or by one of its suppliers is transmitted to all persons.{% endtrans %}
                       </li>
                       <li>{% trans %}All information transmitted to the customer will be considered as transmitted to the set of persons for whom he has made one or multiple reservations.{% endtrans %}
                       </li>
                       <li>{% trans %}The Customer must be conformed to all specificities relative to the security and safety of the airport.{% endtrans %}
                       </li>
                       <li>{% trans %}The Customer must be conformed to all the reasonable instructions issued by the Fasttrack agent or an airport employee.{% endtrans %}
                       </li>
                       <li>{% trans %}The Fasttrack service takes place inside the airport, starts in the exit of the plane and ends at the exit of the terminal for an arrival.{% endtrans %}
                       </li>
                       <li>{% trans %}For a departure, the fast track service starts at meeting point with the agent and ends at the boarding room.{% endtrans %}
                       </li>
                       <li>{% trans %}The customer must call the agent at the number received in the confirmation email and must wait for the Fasttrack agent at the meeting point.{% endtrans %}
                       </li>
                       <li>{% trans %}It is the customer’s responsibility to inform Team Fast track Morocco of any change in the initial reservation information by email and by phone to the following contacts: msoussi@1001evasions.com / info@1001evasions.com. Mobile : +212661 90 29 99 / + 212662 78 59 73.{% endtrans %}
                       </li>
                       <li>{% trans %}Despite our best efforts, we cannot guarantee that change requests will be met. Fees may apply.{% endtrans %}</li>
                       <li>{% trans %}It is the customer’s responsibility to announce in advance all dangerous or rejected items that might be transported. The agent would not be legally responsible for any penalty for loss, damage, costs, claims or expenses resulting from a violation of this requirement.{% endtrans %}
                       </li>
                       <li>{% trans %}The Fast track Agent would not be liable if immigration officers do not accept the customer to go through the Fasttrack lines.{% endtrans %}
                       </li>
                       <li>{% trans %}For security reasons, you should never leave your baggage.{% endtrans %}</li>
                       <li>{% trans %}Even if we post flight information or announce boarding, our agents are not responsible for ensuring your ascension to the plane.{% endtrans %}
                       </li>
                       <li>{% trans %}VIP Lounge: you can arrive to the lounge 4 hours before your flight. For each additional hour, expenses will be applied.{% endtrans %}
                       </li>
                       <li>{% trans %}Children and passenger inferior to 18 years old that accede to the VIP lounge must be accompanied by an adult in all times.{% endtrans %}
                       </li>
                       <li>{% trans %}All cancellation done 48 hours before the hour of the confirmed service is 100% refunded.{% endtrans %}
                       </li>
                       <li>{% trans %}The cancellation done between 48 and 24 hours before the time of the confirmed service is 50% refunded.{% endtrans %}
                       </li>
                       <li>{% trans %}The cancellation done in the 24 hours of the date of the confirmation service isn’t refunded at all.{% endtrans %}
                       </li>
                       <li>{% trans %}Non-attendance of the Customer is considered as “No-show”, no refund would be applicable.{% endtrans %}
                       </li>
                       <li>{% trans %}Upon payment, you will receive a confirmation email with all the instructions to follow when you arrive at the airport and for transfers also with the necessary contacts.{% endtrans %}
                       </li>
                       <li>{% trans %}It is your responsibility to keep this information with you in order to contact either your driver or the fast track agent.{% endtrans %}
                       </li>
                       <li>{% trans %}No liability can be accepted by us or by one of our service providers if the service is not delivered to you because you are not reachable to the various contacts you have communicated to us or because you did not follow the instructions provided to you.{% endtrans %}
                       </li>
                       <li>{% trans %}In the case of a fast track departure reservation, you are required to call the Fast Track agent before your arrival at the airport at the phone number communicated when the service is confirmed.{% endtrans %}
                       </li><!------ last modif------->
                       <li>{% trans %}To adjust the purchase by bank card, the client chooses the means of payments among those proposed by Fasttrack Morocco.{% endtrans %}</li>
                       <li>{% trans %}The client certifies to Fasttrack Morocco his disposition of the eventual authorities to use the mean of payment by card in time of the benefit purchasing.{% endtrans %}</li>
                       <li>{% trans %}Fasttrack Morroco detains the right to demand to the client, before treating its request of reservation, to provide one or several elements of the non-exhaustive list below:{% endtrans %}
                            <ul style="list-style: circle;margin-left: 5%;margin-bottom: 0px;">
                                <li>{% trans %}A completed and signed verification identity formula by the person who purchase the payment by card.{% endtrans %}</li>
                                <li>{% trans %}A simple copy of the identity card of the titular of the bank card.{% endtrans %}</li>
                                <li>{% trans %}A Simple copy of the bank card.{% endtrans %}</li>
                            </ul>
                       </li>
                       <li>{% trans %}If the reception of these documents in 48 hours isn’t achieved according to the request, Fasttrack Morocco has the right to reject your demand.{% endtrans %}</li>
                       <li>{% trans %}In case of a fraudster utilization of the card of the client, he should immediately get attached by his banking establishment and proceed to deposit a complaint with the judicial authorities.{% endtrans %}</li>
                       <li>{% trans %}He should also be sure that the contract with his banking establishment provides an assurance against fraudster utilizations of his card.{% endtrans %}</li>
                       <li>{% trans %}The voucher is sent to the client by e-mail via FasttrackMaroc.com in order to allow the consummation of the paid benefits.{% endtrans %}</li>
                       <li>{% trans %}The voucher and the rights attached to it are neither accessible of changeable.{% endtrans %}</li>
                       <li><b>Fasttrack {% trans %}Morocco{% endtrans %}</b> {% trans %}can’t be engaged for any damage and/or disagreement sustained by the client whether generated by his or other parties’ behavior.{% endtrans %}</li>
                       <li>{% trans %}The client must be sure that neither him or one of the members behave inappropriately, or that could jeopardize, torment, offend or attend other persons or can damage a good belonging to other persons during his passage in the airport.{% endtrans %}</li>
                       <li>{% trans %}These measures can include putting an end to the service, where the engagements of FasttrackMaroc.com and those of his providers of the service towards the client would stop immediately, and the client can’t attend a refund or an indemnity relatively to costs resultant of such rescission.{% endtrans %}</li>
                       <li>{% trans %}In addition, the client should reimburse all the costs relative to such rescission.{% endtrans %}</li>
                       <li>{% trans %}Your personal information: No personal information is collected to your issue. In logic of personal life respect, 1001 evasions is engaged that the collection and treatment of personal information is done conformably to the law n°09-08 of 18 February 2009 relatively to the protection of physical persons regarding to the treatment of personal data.{% endtrans %}</li>
                       <li>{% trans %}No personal information is sold to others.{% endtrans %}</li>
                       <li>{% trans %}According to the dispositions of law n°09-08, 1001 EVASIONS guarantees to the user the right to access, rectification, and opposition on personal data concerning him. The user have the possibility to exert this right by sending an e-mail to the address below: msoussi@1001evasions.com{% endtrans %}</li>
                   </ul>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}