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

{% block body %}


{#    <div id="PaylineWidget" data-token=""></div>#}
{#    <section class="xs-bg xs-content-section-padding fundpress-text-with-image-side-by-side-2">#}
{#        <div class="container">#}
{#            <div class="row">#}
{#                <div class="col-md-12 col-lg-6">#}

{#                    <div class="content-center">#}
{#                        <div class="xs-contact-form-wraper">#}
{#                            <form id="payment-form"  method="post">#}
{#                                <div id="card-element">#}


{#                                    <div class="row">#}
{#                                        <div class="col-md-12">#}
{#                                            <div class="form-group">#}

{#                                                {{ form_row(form.number, {'attr' : { 'value': '4972485830400049', 'placeholder' : 'registration.input.email' | trans  }}) }}#}

{#                                            </div>#}
{#                                        </div>#}

{#                                    </div>#}
{#                                </div>#}

{#                                <div class="row">#}
{#                                    <div class="col-md-4">#}
{#                                        <div class="form-group">#}

{#                                            {{ form_row(form.exp_month, {'attr' : { 'value': '12','placeholder' : 'registration.input.email' | trans  }}) }}#}

{#                                        </div>#}
{#                                    </div>#}
{#                                    <div class="col-md-4">#}
{#                                        <div class="form-group">#}

{#                                            {{ form_row(form.exp_year, {'attr' : { 'value': '25','placeholder' : 'registration.input.email' | trans  }}) }}#}
{#                                            <input type="hidden" name="data" value="{{ cardRegistration.PreregistrationData }}">#}
{#                                            <input type="hidden" name="accessKeyRef" value="{{ cardRegistration.AccessKey }}">#}
{#                                        </div>#}
{#                                    </div>#}
{#                                    <div class="col-md-4">#}
{#                                        <div class="form-group">#}

{#                                            {{ form_row(form.cvc, {'attr' : { 'value': '123', 'placeholder' : 'registration.input.email' | trans  }}) }}#}

{#                                        </div>#}
{#                                    </div>#}


{#                                </div>#}


{#                                <div class="form-group mt-3">#}
{#                                    <button type="submit"#}
{#                                            class='btn btn-lg btn-primary btn-block xs-btn round-btn green-btn'  onclick="registerCardDemo();"#}
{#                                            id="card-button">#}
{#                                        payer {{ donation.amountTotal | format_currency(donation.currency.currencyCode, locale=app.request.locale=='fr' ? 'fr': 'en') }} </button>#}
{#                                </div>#}

{#                                <p>#}
{#                                <div id="result"></div>#}
{#                                </p>#}

{#                            </form>#}

{#                        </div>#}
{#                    </div>#}
{#                    <div id="card-errors" role="alert"></div>#}
{#                </div>#}
{#                <div class="col-md-12 col-lg-6">#}
{#                    <div class="widget widget_categories xs-single-sidebar border xs-content-padding">#}
{#                        <h3 class="widget-title xs-widget-title"><a#}
{#                                    href="{{ path('banlal.show', { id: donation.banlal.id, slug: donation.banlal.slug }) }}">{{ donation.banlal.name }}</a>#}
{#                        </h3>#}
{#                        <div class="xs-inner-title fundpress-inner-title">#}
{#                            <table class="table warning sumary-table">#}
{#                                <tbody class="xs-side-bar-list xs-font-alt">#}
{#                                <tr>#}
{#                                    <th>Nom Beneficiaire</th>#}
{#                                    <td>{{ donation.name }}</td>#}

{#                                </tr>#}
{#                                <tr>#}
{#                                    <th>Prénom Beneficiaire</th>#}
{#                                    <td>{{ donation.lastname }}</td>#}
{#                                </tr>#}

{#                                <tr>#}
{#                                    <th>Somme à Payer</th>#}
{#                                    <td>{{ donation.amountTotal | format_currency(donation.currency.currencyCode, locale=app.request.locale=='fr' ? 'fr': 'en') }}</td>#}

{#                                </tr>#}

{#                                <tr>#}
{#                                    <th>Pourboire</th>#}
{#                                    <td>{{ donation.tipAmount | format_currency(donation.currency.currencyCode, locale=app.request.locale=='fr' ? 'fr': 'en') }}</td>#}
{#                                </tr>#}
{#                                </tbody>#}
{#                            </table>#}

{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </section>#}



{% endblock %}

{% block title %}

{% endblock %}






{% block javascripts %}
{#    <script src="https://rawgit.com/Mangopay/cardregistration-js-kit/master/kit/mangopay-kit.min.js"></script>#}
{#    <script src="https://homologation-payment.payline.com/scripts/widget-min.js"> </script>#}




{#    <script>#}
{#     //   $(document).ready(function() {#}

{#            // Initialize mangoPay.cardRegistration object#}
{#            #}{#mangoPay.cardRegistration.init(#}{#}#}
{#            #}{#    cardRegistrationURL: "{{ cardRegistration.CardRegistrationURL }}",#}
{#            #}{#    preregistrationData: "{{ cardRegistration.PreregistrationData }}",#}
{#            #}{#    accessKey: "{{ cardRegistration.AccessKey }}",#}
{#            #}{#    Id: "{{ cardRegistration.CardId }}"#}
{#            #}{#});#}

{#            function registerCardDemo() {#}


{#                var resultDiv = document.getElementById("result");#}
{#                resultDiv.innerHTML = "Processing...";#}
{#                resultDiv.style.color = "black";#}

{#                // Card register data prepared on the server#}
{#                var cardRegisterData = {#}
{#                    cardRegistrationURL: "{{ cardRegistration.CardRegistrationURL }}",#}
{#                    preregistrationData: "{{ cardRegistration.PreregistrationData }}",#}
{#                    accessKey: "{{ cardRegistration.AccessKey }}",#}
{#                    Id:"{{ cardRegistration.Id }}"#}
{#                };#}

{#                console.log("id");#}
{#                // Card data collected from the user#}
{#                var cardData = {#}
{#                    cardNumber : $("#bank_card_number").val(),#}
{#                    cardExpirationDate : ($("#bank_card_exp_month").val()).concat($("#bank_card_exp_year").val()),#}
{#                    cardCvx : $("#bank_card_cvc").val(),#}
{#                    cardType : "{{ cardRegistration.CardType }}"#}
{#                };#}

{#                // Set MangoPay API base URL and Client ID#}
{#                 mangoPay.cardRegistration.baseURL = "{{ mangoPay.config.BaseUrl }}";#}
{#                 mangoPay.cardRegistration.clientId = "{{ mangoPay.config.ClientId }}";#}

{#                // Initialize the CardRegistration Kit#}
{#                mangoPay.cardRegistration.init(cardRegisterData);#}

{#                // Register card#}
{#                mangoPay.cardRegistration.registerCard(cardData,#}
{#                    function (res) {#}
{#                        $('#payment-form').submit();#}
{#                        var message = 'Card has been succesfully registered under the Card Id ' + res.CardId + '.<br />';#}
{#                        message += 'Card is now ready to use e.g. in a «Direct PayIn» Object.';#}
{#                        resultDiv.innerHTML = message;#}
{#                        resultDiv.style.color = "green";#}
{#                    },#}
{#                    function (res) {#}
{#                        console.log(res);#}
{#                        var message = 'Error occured while registering the card.<br />';#}
{#                        message += 'Code: ' + res.ResultCode + ', message: ' + res.ResultMessage;#}
{#                        resultDiv.innerHTML = message;#}
{#                        resultDiv.style.color = "red";#}
{#                    }#}
{#                );#}
{#            }#}
{#     //   });#}
{#        #}{#function getCardData() #}{#}#}
{#        #}{#    return #}{#}#}
{#        #}{#        cardNumber : $("#bank_card_number").val(),#}
{#        #}{#        cardExpirationDate : ($("#bank_card_exp_month").val()).concat($("#bank_card_exp_year").val()),#}
{#        #}{#        cardCvx : $("#bank_card_cvc").val(),#}
{#        #}{#        cardType : "{{ cardRegistration.CardType }}"#}
{#        #}{#    };#}
{#        #}{#}#}

{#        #}{#function getInputElement(name, value) #}{#}#}
{#        #}{#    var input = document.createElement('input');#}
{#        #}{#    input.setAttribute('type', 'hidden');#}
{#        #}{#    input.setAttribute('name', name);#}
{#        #}{#    input.setAttribute('value', value);#}
{#        #}{#    return input;#}
{#        #}{#}#}

{#    </script>#}

{% endblock %}