{% 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 payAjaxOrRedirect payRedirect'
                                            id="card-button">
                                        payer {{ donation.amountTotal | format_currency(donation.currency.currencyCode, locale=app.request.locale=='fr' ? 'fr': 'en') }} </button>
                                </div>

                            </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 stylesheets %}
    <link href="https://homologation-payment.payline.com/styles/widget-min.css" rel="stylesheet" />

{% 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 type="text/javascript">
        // Pour charger le widget
        var urlToken = url_query('token');
        if (urlToken) {
            var element = document.getElementById('PaylineWidget');
            element.setAttribute('data-token', urlToken);
        }

        // Parse URL Queries
        function url_query( query ) {
            query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
            var expr = "[\\?&]"+query+"=([^&#]*)";
            var regex = new RegExp( expr );
            var results = regex.exec( window.location.href );
            if ( results !== null ) {
                return results[1];
            } else {
                return false;
            }
        }
    </script>

    <script type="text/javascript">
        // Pour charger le widget
        var urlToken = url_query('token');
        if (urlToken) {
            var element = document.getElementById('PaylineWidget');
            element.setAttribute('data-token', urlToken);
        }

        // Parse URL Queries
        function url_query( query ) {
            query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
            var expr = "[\\?&]"+query+"=([^&#]*)";
            var regex = new RegExp( expr );
            var results = regex.exec( window.location.href );
            if ( results !== null ) {
                return results[1];
            } else {
                return false;
            }
        }
    </script>


    <script>
        $(document).ready(function(){

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

            // // Action for button "Pay with Ajax"
            // $(".payAjaxOrRedirect").click(function() {
            //
            //     // Disable button to prevent double click while waiting
            //     $("#payAjax").attr("disabled", true).val("Please wait...");
            //
            //     runCardRegAjax();
            //
            // });



            // Action for button "Pay with Ajax or Redirect"
            // $(".payAjaxOrRedirect").click(function(){
            //
            //     // Disable button to prevent double click while waiting
            //     $(".payAjaxOrRedirect").attr("disabled", true).val("Please wait...");
            //
            //     if(mangoPay.browser.corsSupport()) {
            //         runCardRegAjax();
            //         return;
            //     }
            //
            //     runCardRegReturnUrl();
            //
            // });

            // Action for button "Pay with Redirect"
            $(".payRedirect").click(function() {

                runCardRegReturnUrl();

            });
        });


        function runCardRegAjax() {
            // Collect sensitive card data from the form
            var cardData = getCardData();

            // Process data
            mangoPay.cardRegistration.registerCard(cardData,
                function(res) {
                console.log(res)
                    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.';
                    $("#divForm").html(message);
                },
                function(res){
                    console.log(res);
                    alert("Error occured while registering the card: " + "ResultCode: " + res.ResultCode + ", ResultMessage: " + res.ResultMessage);
                }
            );
        }

        function runCardRegReturnUrl() {

            var cardData = getCardData();

            // Build the form and append to the document
            var form = document.createElement('form');
            form.setAttribute('action',"{{ cardRegistration.CardRegistrationURL }}");
            form.setAttribute('method', 'post');
            form.setAttribute('style', 'display: none');
            document.getElementsByTagName('body')[0].appendChild(form);

            // Add card registration data to the form
            form.appendChild(getInputElement('data', "{{ cardRegistration.PreregistrationData }}"));
            form.appendChild(getInputElement('accessKeyRef', "{{ cardRegistration.AccessKey }}"));
            form.appendChild(getInputElement('number', cardData.cardNumber));
            form.appendChild(getInputElement('cardExpirationDate', cardData.cardExpirationDate));
            form.appendChild(getInputElement('cvc', cardData.cardCvx));
            form.appendChild(getInputElement('returnURL', "{{ url('donation.checkout', {donation_id: donation.id }) }}"));

            // Submit the form
            form.submit();
        }

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