{% load static %}

<div class="head">
    <div class="negative">
        <div class="addlink">
            <span class="buttoninsta back paymentMethodUnmount">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12pt"
                     height="12.000001pt" viewBox="0 0 30 30.000001" version="1.2" style="padding-top: 7px;">
                    <defs>
                        <clipPath id="clip1">
                            <path d="M 6 0.738281 L 23.964844 0.738281 L 23.964844 28.316406 L 6 28.316406 Z M 6 0.738281 "></path>
                        </clipPath>
                    </defs>
                    <g id="surface1">
                        <g clip-path="url(#clip1)" clip-rule="nonzero">
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(59.999084%,59.999084%,59.999084%);fill-opacity:1;"
                                  d="M 13.15625 14.640625 L 23.445312 4.222656 L 20.070312 0.800781 L 6.402344 14.640625 L 20.070312 28.480469 L 23.445312 25.058594 Z M 13.15625 14.640625 "></path>
                        </g>
                    </g>
                </svg>
            &nbsp;Back</span>
        </div>
    </div>

    <div class="middle">
        <span id="checkout-title">Choose a payment method</span>
    </div>

    <div class="positive">
        {% comment %}
        <span class="buttoninsta submit">Next</span>

{% endcomment %}

        <button class="toggledByPaymentMethod" type="submit">Review order</button>
    </div>
</div>

<div class="body">
    <div class="bodycontent">

        <div class="row">
            <div class="col-12">
                <p id="checkout-info">Select a payment method and authorize Tapped.to to place an order. You will then
                    receive an order summary.</p>
            </div>
        </div>

        <div class="bodycontent zahlungsarten">
            <div class="row">
                <div class="col-6 item" id="creditcard">
                    <img src="{% static "img/credit-card.png" %}" />
                </div>
                <div class="col-6 item" id="sepa">
                    <img src="{% static "img/sepa-512.png" %}" />
                </div>
                <div class="col-6 item" id="paypalbutton">
                    <img src="{% static "img/paypal.png" %}" />
                </div>
            </div>
        </div>

        <div class="row">
            <div id="stripecreditcard" class="col-12">
                <!-- placeholder for Elements -->
                <div id="card-element"></div>
                <div class="row actions">
                    <div class="col-12">
                        <button type="submit" name="cc-submit">Review order</button>
                    </div>
                </div>
            </div>
            <div id="paypalarea" class="col-12">
                <div id="paypal-buttons-container"></div>
            </div>
            <div id="stripeiban" class="col-12">
                <label for="iban-element">
                    IBAN
                </label>
                <div id="iban-element"></div>
                <div id="bank-name"></div>
                <div class="row actions">
                    <div class="col-12">
                        <button type="submit" name="iban-submit">Review order</button>
                    </div>
                </div>
            </div>
            <div id="stripeapplepay" class="col-12">
                <div id="payment-request-button">
                    <!-- A Stripe Element will be inserted here. -->
                </div>

                {% comment %}
                <div class="row actions">
                    <div class="col-12">
                        <button type="submit" name="iban-submit">Review order</button>
                    </div>
                </div>
                {% endcomment%}
            </div>
        </div>
    </div>

    <script>
        //hide all paymentmethods if you go back to delivery date
        $(".paymentMethodUnmount").on('click', function () {

            $('#stripecreditcard, #stripeiban').hide();

            /*
            iban.unmount('#iban-element');
            prButton.unmount('#payment-request-button');
            cardElement.unmount('#card-element');
            debugger;
            */
        });

        $("#creditcard, #sepa, #applepay, #paypalbutton").on('click', function () {

            //$(".zahlungsarten").fadeOut(500);
            $(".zahlungsarten").hide();

            if ( $(this).attr('id') == 'creditcard' ) {
                $("#stripecreditcard").fadeIn(500);
                $("#checkout-title").text('Pay with Credit card');
                $("#checkout-info").text('Enter your credit card credentials. Your card will not be charged yet.');
                $('button.toggledByPaymentMethod').addClass('active');

            } else {
                $("#stripecreditcard").remove();
            }

            if ( $(this).attr('id') == 'sepa' ) {

                $("#stripeiban").fadeIn(500);
                $("#checkout-title").text('Pay with SEPA');
                $("#checkout-info").text('Authorize Tapped.to to execute an order, in the next step you will receive an order summary which you have to confirm.');
                $('button.toggledByPaymentMethod').addClass('active');

            } else {
                $("#stripeiban").remove();
            }

            if ( $(this).attr('id') == 'applepay' ) {
                $("#stripeapplepay").fadeIn(500);
                $("#checkout-title").text('Pay with Apple Pay');
                $("#checkout-info").text('Authorize Tapped.to to execute an order, in the next step you will receive an order summary which you have to confirm.');


            } else {
                $("#stripeapplepay").remove();
            }

            if ( $(this).attr('id') == 'paypalbutton' ) {
                $("#paypalarea").fadeIn(500);
                $("#checkout-title").text('Pay with PayPal');
                $("#checkout-info").text('Authorize Tapped.to to execute an order, in the next step you will receive an order summary which you have to confirm.');
                $(".positive button").remove();
                paypal.Buttons({
                    style: {
                        layout: 'vertical',
                        color: 'silver',
                        shape: 'rect',
                        label: 'paypal'
                    },
                    createOrder: function (data, actions) {
                        // Set up the transaction
                        return actions.order.create({
                            purchase_units: [{
                                amount: {
                                    value: '{{ totalprice }}'
                                }
                            }]
                        });
                    },
                    onApprove: function (data, actions) {
                        $('html').addClass('loading');


                        // Authorize the transaction
                        actions.order.authorize().then(function (authorization) {
                            // Get the authorization id
                            var authorizationID = authorization.purchase_units[0].payments.authorizations[0].id;
                            var orderid = data.orderID;
                            // Show success message
                            payment_intent_client_secret = authorizationID;
                            //valid
                            lastSlide = currentSlide;
                            showCheckout(payment_intent_client_secret);
                            $('html').removeClass('loading');
                            $.ajax({
                                type: "POST",
                                url: '/shop/payment/paypal/',
                                headers: {
                                    "X-CSRFToken": csrftoken
                                },
                                data: {
                                    authorizationid: authorizationID,
                                    orderid: orderid
                                }
                            });
                        });
                    }
                }).render('#paypal-buttons-container');
            } else {
                $("#paypalarea").remove();
            }
        });


        /*
        $("#creditcard").click(function () {

            $("#stripecreditcard").fadeIn(500);
            $("#stripeiban").remove();
            $("#paypalarea").remove();
            $("#stripeapplepay").remove();
            $("#checkout-title").text('Pay with Credit card');
            $("#checkout-info").text('Enter your credit card credentials. Your card will not be charged yet.');
        });
        $("#sepa").click(function () {

            $("#stripeiban").fadeIn(500);
            $("#stripecreditcard").remove();
            $("#paypalarea").remove();
            $("#stripeapplepay").remove();
            $("#checkout-title").text('Pay with SEPA');
            $("#checkout-info").text('Authorize Tapped.to to execute an order, in the next step you will receive an order summary which you have to confirm.');
        });
        $("#applepay").click(function () {

            $("#stripeapplepay").fadeIn(500);
            $("#stripecreditcard").remove();
            $("#stripeiban").remove();
            $("#paypalarea").remove();
            $("#checkout-title").text('Pay with Apple Pay');
            $("#checkout-info").text('Authorize Tapped.to to execute an order, in the next step you will receive an order summary which you have to confirm.');
        });
        $("#paypalbutton").click(function () {

            $("#paypalarea").fadeIn(500);
            $("#stripecreditcard").remove();
            $("#stripeiban").remove();
            $("#stripeapplepay").remove();
            $("#checkout-title").text('Pay with PayPal');
            $("#checkout-info").text('Authorize Tapped.to to execute an order, in the next step you will receive an order summary which you have to confirm.');
            $(".positive button").remove();
            paypal.Buttons({
                style: {
                    layout: 'vertical',
                    color: 'silver',
                    shape: 'rect',
                    label: 'paypal'
                },
                createOrder: function (data, actions) {
                    // Set up the transaction
                    return actions.order.create({
                        purchase_units: [{
                            amount: {
                                value: '{{ totalprice }}'
                            }
                        }]
                    });
                },
                onApprove: function (data, actions) {
                    // Authorize the transaction
                    actions.order.authorize().then(function (authorization) {
                        // Get the authorization id
                        var authorizationID = authorization.purchase_units[0].payments.authorizations[0].id;
                        var orderid = data.orderID;
                        // Show success message
                        payment_intent_client_secret = authorizationID;
                        //valid
                        lastSlide = currentSlide;
                        showCheckout(payment_intent_client_secret);
                        $.ajax({
                            type: "POST",
                            url: '/shop/payment/paypal/',
                            headers: {
                                "X-CSRFToken": csrftoken
                            },
                            data: {
                                authorizationid: authorizationID,
                                orderid: orderid
                            }
                        });
                    });
                }
            }).render('#paypal-buttons-container');
        });
*/
    </script>
    <script>
        //1. register stripe elements
        var stripe = Stripe('pk_live_51GxYLECVHGjQM7c3cWiR97GicWz5Qnzf8PqBOVXEdfFjQ3ueSbMMR9bQC7HjzEozZtpDEzp57DJfC5zpgzLsKdv2004gaXPMlY');

        var elements = stripe.elements();

        // Set up Stripe.js and Elements to use in checkout form
        var style = {
            base: {
                color: "#32325d",
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: "antialiased",
                fontSize: "16px",
                "::placeholder": {
                    color: "#aab7c4"
                }
            },
            invalid: {
                color: "#fa755a",
                iconColor: "#fa755a"
            }
        };

        var iban = elements.create('iban', {
            style: style,
            supportedCountries: ['SEPA']
        });
        iban.mount('#iban-element');

        iban.on('change', function (event) {
            // Handle real-time validation errors from the iban Element.
            /* if (event.error) {
                 errorMessage.textContent = event.error.message;
                 errorMessage.classList.add('visible');
             } else {
                 errorMessage.classList.remove('visible');
             }

             // Display bank name corresponding to IBAN, if available.
             if (event.bankName) {
                 bankName.textContent = event.bankName;
                 bankName.classList.add('visible');
             } else {
                 bankName.classList.remove('visible');
             }*/
        });

        var paymentRequest = stripe.paymentRequest({
            country: 'DE',
            currency: 'eur',
            total: {
                label: 'Demo total',
                amount: {{ stripeprice }}
            },
            requestPayerName: true,
            requestPayerEmail: true
        });

        var prButton = elements.create('paymentRequestButton', {
            paymentRequest: paymentRequest
        });

        paymentRequest.canMakePayment().then(function (result) {
            if (result) {
                prButton.mount('#payment-request-button');
                document.getElementById('applepay').style.display = 'block';
            } else {
                document.getElementById('payment-request-button').style.display = 'none';
            }
        });


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

        $('.adsa').on('click', function () {
            $(this).remove();
        });



        //2. collect data from forms (billing address as well..)
        var $form = $('#stripecreditcard').parents('form.slide');
        $form.on('submit', function (event) {
            // We don't want to let default form submission happen here,
            // which would refresh the page.
            event.preventDefault();
            $('html').addClass('loading');

            if ($('#stripecreditcard').is(':visible')) {
                console.log("Creditcard charge");
                stripe.createPaymentMethod({
                    type: 'card',
                    card: cardElement,

                    //TODO: see docs https://stripe.com/docs/api/payment_methods/create#create_payment_method-billing_details
                    //maybe take all data from session instead
                    billing_details: {
                        "address": {
                            "city": $addressSlide.find('#id_delivery_city').val(),
                            "country": $addressSlide.find('#id_delivery_country').val(),
                            "line1": $addressSlide.find('#id_delivery_company').val(),
                            "postal_code": $addressSlide.find('#id_delivery_zip').val()
                        },

                        // Include any additional collected billing details.
                        //TODO add all credencials from session or frontend (delivery.html $addressSlide )
                        name: $addressSlide.find('#id_delivery_name').val(),
                    },
                }).then(stripePaymentMethodHandler);
            } else if ($('#stripeiban').is(':visible')) {
                console.log("sepa charge");
                var sourceData = {
                    type: 'sepa_debit',
                    currency: 'eur',
                    owner: {
                        name: $addressSlide.find('#id_delivery_name').val(),
                    }
                };

                // Call `stripe.createSource` with the iban Element and additional options.
                stripe.createSource(iban, sourceData).then(function (result) {
                    if (result.error) {
                        // Inform the customer that there was an error.
                        alert(result.error.message);
                        $('html').removeClass('loading');
                    } else {
                        stripeSourceHandler(result.source)
                    }
                });
            }

        });


        //3. send payment method (pre auth) to server

        function stripeSourceHandler(source) {

            articleamount = $("#articleamount").val();
            articleid = $("#articleid").val();

            fetch('/shop/paymentsapi/', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    paymentmethod: 'iban',
                    sourceid: source.id,
                    articleamount: articleamount,
                    articleid: articleid,
                })
            }).then(function (result) {
                // Handle server response (see Step 4)
                result.json().then(function (json) {
                    handleServerResponse(json);
                })
            });
        }



        function stripePaymentMethodHandler(result) {
            if (result.error) {
                // Show error in payment form
                alert(result.error.message);
                $('html').removeClass('loading');

            } else {

                // Otherwise send paymentMethod.id to your server (see Step 4)
                articleamount = $("#articleamount").val();
                articleid = $("#articleid").val();

                var stripeCardPaymentMethod = '';

                if ($('#stripecreditcard').is(':visible')) {
                    stripeCardPaymentMethod = 'creditcard';
                } else if ($('#stripeapplepay > * > .__PrivateStripeElement').is(':visible')) {
                    stripeCardPaymentMethod = 'applepay';
                } else {
                    stripeCardPaymentMethod = '';
                    alert('none');
                }
                
                console.log("===========");
                console.log(stripeCardPaymentMethod);
                console.log(result.paymentMethod.id);
                console.log(articleamount);
                console.log(articleid);
                console.log("===========");

                fetch('/shop/paymentsapi/', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        paymentmethod: stripeCardPaymentMethod,
                        payment_method_id: result.paymentMethod.id,
                        articleamount: articleamount,
                        articleid: articleid,
                    })
                }).then(function (result) {
                    // Handle server response (see Step 4)
                    result.json().then(function (json) {
                        handleServerResponse(json);
                    })
                });
            }
        }

        var payment_intent_client_secret = '';

        function handleServerResponse(response) {

            console.log('MESSAGE...');
            console.log(response);

            if (response.error) {
                // Show error from server on payment form
                backToPayments(response.error.message);

            } else if (response.requires_action) {
                // Use Stripe.js to handle required card action
                stripe.handleCardAction(
                    response.payment_intent_client_secret
                ).then(handleStripeJsResult);
            } else {
                console.log('GO');

                // Show success message
                payment_intent_client_secret = response.payment_intent_client_secret;

                //valid
                $('html').removeClass('loading');
                lastSlide = currentSlide;
                showCheckout(payment_intent_client_secret);
            }
        }

        var csrfToken = getCookie('CSRF-TOKEN');

        function handleStripeJsResult(result) {

            if (result.error) {
                // Show error in payment form
                //back to card payment, remove all other slides after the card payment
                backToPayments(result.error.message);

            } else {

                // The card action has been handled
                // The PaymentIntent can be confirmed again on the server
                fetch('/shop/checkoutapi/', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json', 'X-CSRFToken': csrftoken},
                    body: JSON.stringify({payment_intent_id: result.paymentIntent.id})
                }).then(function (confirmResult) {

                    $('html').removeClass('loading');

                    //check for errors
                    console.log('CHECK FOR ERRORS OR NOT');
                    console.log(confirmResult);


                    lastSlide = currentSlide;
                    showSuccess();

                    return confirmResult.json();
                }).then(handleServerResponse);
            }
        }

        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = cookies[i].trim();
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        var csrftoken = getCookie('csrftoken');
    </script>


    {% csrf_token %}
</div>
</div>