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

{% block body %}
    {{ dump(app.request.attributes.get('donation_id')) }}

    <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">
{#                    <?php if (isset($errors) AND !empty($errors)): ?>#}
{#                    <?=$this->Element("_error",["errors"=>$errors]) ?>#}
{#                    <?php endif; ?>#}
                    <div class="content-center">
                        <div class="xs-contact-form-wraper">
                            <form id="payment-form">
                            <div id="card-element">
{#                                                                                  <div class="form-group">#}
{#                                                                                      <div class="form-group">#}
{#                                                                                            <input type="text"  name='number' class="form-control" id="cardNumber" placeholder="le numero de votre carte bancaire"  required autofocus />#}
{#                                                                                        </div>#}
{#                                                                                    </div>#}
{#                                                                                   <div class="form-group">#}
{#                                                                                        <div class="row">#}
{#                                                                                            <div class="col-xs-7 col-md-7">#}
{#                                                                                                <div class="form-group">#}
{#                                                                                                  <div class="row">#}
{#                                                            #}
{#                                                                                                       <div class="col-xs-6 col-lg-6">#}
{#                                                                                                            <input type="text" name='mm' class="form-control card-expiry-month" id="expityMonth" placeholder="MM" required />#}
{#                                                                                                        </div>#}
{#                                                                                                        <div class="col-xs-6 col-lg-6">#}
{#                                                                                                           <input type="text" class="form-control card-expiry-year" name='yy' id="expityYear" placeholder="YY" required />#}
{#                                                                                                        </div>#}
{#                                                                                                   </div>#}
{#                                                                                               </div>#}
{#                                                                                            </div>#}
{#                                                                                            <div class="col-xs-5 col-md-5">#}
{#                                                                                                <div class="form-group">#}
{#                                                                                                    <input type="text" name='cvc' class="form-control card-cvc" id="cvCode" placeholder="CV" required />#}
{#                                                                                                </div>#}
{#                                                                                            </div>#}
{#                                                                                        </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'  id="card-button" data-secret="{{ intent.client_secret  }}">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>

    </section>



{% endblock %}

{% block title %}

{% endblock %}

{% block javascripts %}
    <script src="https://js.stripe.com/v3/"></script>
    <script>

        var stripe = Stripe('pk_test_VFZ5yeL5aprYx7F1DDtFzb2Z');
        var elements = stripe.elements();
        //
        // console.log(stripe);
        // console.log(elements);
        // var style = {
        //     base: {
        //         color: "#32325d",
        //     }
        // };
        //
        // var card = elements.create("card", { style: style });
        // card.mount("#card-element");
        // card.addEventListener('change', function(event) {
        //     var displayError = document.getElementById('card-errors');
        //     if (event.error) {
        //         displayError.textContent = event.error.message;
        //     } else {
        //         displayError.textContent = '';
        //     }
        // });
        //
        // var form = document.getElementById('payment-form');
        //
        // form.addEventListener('submit', function(ev) {
        //     ev.preventDefault();
        //     stripe.confirmCardPayment(clientSecret, {
        //         payment_method: {
        //             card: card,
        //             billing_details: {
        //                 name: 'Jenny Rosen'
        //             }
        //         }
        //     }).then(function(result) {
        //         if (result.error) {
        //             // Show error to your customer (e.g., insufficient funds)
        //             console.log(result.error.message);
        //         } else {
        //             // The payment has been processed!
        //             if (result.paymentIntent.status === 'succeeded') {
        //                 console.log(result);
        //                 // Show a success message to your customer
        //                 // There's a risk of the customer closing the window before callback
        //                 // execution. Set up a webhook or plugin to listen for the
        //                 // payment_intent.succeeded event that handles any business critical
        //                 // post-payment actions.
        //             }
        //         }
        //     });
        // });
        // console.log(card);


        var style = {
            base: {
                color: "#32325d",
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: "antialiased",
                fontSize: "16px",
                "::placeholder": {
                    color: "#aab7c4"
                }
            },
            invalid: {
                color: "#fa755a",
                iconColor: "#fa755a"
            },
        };

        var cardElement = elements.create('card', {
            style: style ,
            value:{
                hidePostalCode: true
            }
        });
        cardElement.mount('#card-element');

        var form = document.getElementById('payment-form');

        form.addEventListener('submit', function(event) {
            var button = document.querySelector("#card-button");
            button.textContent = "Traitement en cours...";
            button.disabled = true;
            // console.log(button);
           // event.preventDefault();

            stripe.createPaymentMethod({
                type: 'card',
                card: cardElement,
                billing_details: {
                    // Include any additional collected billing details.
                    name: "{{ donation.lastname ~ " " ~ donation.name }}",
                   // email: "{{ donation.email }}",
                },
            }).then(stripePaymentMethodHandler);
        });

        {#stripe#}
        {#    .redirectToCheckout({#}
        {#        lineItems: [#}
        {#            // Replace with the ID of your price#}
        {#            {price: {{ donation.amountTotal | number_format  }}, quantity: 1},#}
        {#        ],#}
        {#        mode: 'payment',#}
        {#       successUrl: "{{ url('donation.success') }}",#}
        {#       cancelUrl: "{{ url('donation.cancel') }}",#}
        {#   })#}
        {#   .then(function(result) {#}
        {#       console.log("resultattttt", result);#}

        {#      // If `redirectToCheckout` fails due to a browser or network#}
        {#      // error, display the localized error message to your customer#}
        {#        // using `result.error.message`.#}
        {#   });#}

        function stripePaymentMethodHandler(result) {
            console.log("avant url", result);
            var url = "{{ url('donation.pay',{ id: app.request.attributes.get('donation_id') })}}";
            if (result.error) {
                // Show error in payment form
            } else {
                // Otherwise send paymentMethod.id to your server (see Step 4)
                fetch(url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        payment_method_id: result.paymentMethod.id,
                    })
                }).then(function(result) {
                    console.log('resultat',result);
                    // Handle server response (see Step 4)
                    result.json().then(function(json) {
                        handleServerResponse(json);
                    })
                });
            }
        }

    </script>

{% endblock %}