@extends('frontend.layouts.app_minimal')

@section('title', app_name() . ' | ' . __('labels.frontend.auth.register_box_title'))

@section('content')

    <div class="row justify-content-center align-items-center">
        <div class="col col-sm-8 align-self-center">
            <div class="card card-body" style="margin-bottom: 10px">
                <div class="g_et_al_header2 text-center" style="padding-bottom:20px">
                    Update payment method
                </div>
                <div class="row">
                    <div class="col">
                        Current payment method details: {{($logged_in_user->defaultPaymentMethod()->card->brand)}}, last
                        4 digits {{($logged_in_user->defaultPaymentMethod()->card->last4)}},
                        expiry {{($logged_in_user->defaultPaymentMethod()->card->exp_month)}}
                        /{{($logged_in_user->defaultPaymentMethod()->card->exp_year)}}
                    </div>
                </div>
                @include('frontend.user.account.form.stripe_component')
                <div class="row mt-2">
                    <div class="col p-0 mr-1">

                        <a href="{{route('frontend.user.account')}}"
                           class="btn btn-outline-warning btn-block"><i class="fas fa-arrow-left">
                            </i>Don't change</a>
                    </div>
                    <div class="col p-0 ml-1">
                        <a href="#" id="card-button" data-secret="{{ $intent->client_secret }}" class="btn btn-outline-success btn-block">
                            Update<i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>

        </div>
    </div>


@endsection

@section('dialogs')

    <div id="disclaimer" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="additemtitle">Terms and conditions</h4>

                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body">
                    @lang('strings.frontend.terms_and_conditions.text')

                </div>
            </div>
        </div>
    </div>

    <div id="confirmation" class="modal fade" data-backdrop="static" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Payment method update <span id="plan_update_status"></span></h4>

                </div>
                <div class="modal-body">
                    <button class="btn btn-primary" onclick="handleConfirmationClose()">OK</button>
                </div>
            </div>
        </div>
    </div>

    <div id="error_alert" class="modal fade" data-backdrop="static" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Oops!</h4>

                </div>
                <div class="modal-body">
                    <p><strong>There was a problem processing your payment:</strong></p>
                    <p id="error_text"></p>

                    <button class="btn btn-primary" onclick="handleConfirmationClose()">OK</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade load-spinner" data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <i class="fas fa-circle-notch fa-spin fa-3x mx-auto"></i>
            </div>
        </div>
    </div>
@endsection

@push('after-scripts')

    <script src="https://js.stripe.com/v3/"></script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        //@TODO use config for this
        const stripe = Stripe('pk_test_cw9zacXfqpELQeZnMGife6ox007zpVJJf6');

        const elements = stripe.elements();
        const cardElement = elements.create('card', {
            iconStyle: 'solid',
            hidePostalCode: true,
            style: {
                base: {
                    iconColor: '#c4f0ff',
                    color: '#000',
                    fontWeight: 500,
                    fontFamily: 'Inter UI, Open Sans, Segoe UI, sans-serif',
                    fontSize: '16px',
                    fontSmoothing: 'antialiased',

                    ':-webkit-autofill': {
                        color: '#fce883',
                    },
                    '::placeholder': {
                        color: '#87BBFD',
                    },
                },
                invalid: {
                    iconColor: '#FFC7EE',
                    color: '#FFC7EE',
                },
            },
        });

        cardElement.mount('#card-element');
        const cardHolderName = document.getElementById('card-holder-name');
        const cardButton = document.getElementById('card-button');
        const clientSecret = cardButton.dataset.secret;

        $(document).ready(function () {
            cardButton.addEventListener('click', async (e) => {
                const {setupIntent, error} = await stripe.confirmCardSetup(
                    clientSecret, {
                        payment_method: {
                            card: cardElement,
                            billing_details: {name: cardHolderName.value}
                        }
                    }
                );

                if (error) {
                    alert(error.message)
                } else {
                    update(setupIntent);
                }
            });


        });


        function update(setupIntent) {
            wait(true);
            // get the form and variables
            var form = document.getElementById('payment-form');
            $(form).attr('action', "{{route('frontend.user.changepaymentmethod')}}");
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripePaymentMethod');
            hiddenInput.setAttribute('value', setupIntent.payment_method);
            form.appendChild(hiddenInput);
            form.submit();
            {{--var vars = $(form).serializeArray();--}}
            {{--loading = true;--}}
            {{--$.ajax(--}}
            {{--    {--}}
            {{--        url: '{{route('frontend.user.changepaymentmethod')}}',--}}
            {{--        data: vars,--}}
            {{--        type: "post",--}}
            {{--    }).done(function (data) {--}}
            {{--    wait(false);--}}
            {{--    if (data.status == '0') {--}}
            {{--        $("#plan_update_status").html('success');--}}
            {{--        success_status = true;--}}
            {{--        window.location.replace('{{route('frontend.user.account')}}');--}}
            {{--    } else {--}}
            {{--        $("#plan_update_status").html('failed');--}}
            {{--    }--}}
            {{--    // //@TODO remove the loading indicator, indicate success--}}
            {{--    // $("#plan_update_status").html('success');--}}
            {{--    // success_status = true;--}}
            {{--    // $("#confirmation").modal('show');--}}
            {{--    // loading = false;--}}
            {{--}).fail(function (jqXHR, ajaxOptions, thrownError) {--}}
            {{--    wait(false);--}}
            {{--    console.log('no data');--}}
            {{--    $("#plan_update_status").html('failed');--}}
            {{--    success_status = false;--}}
            {{--    loading = false;--}}
            {{--});--}}

        }

        function handleConfirmationClose() {
            if (success_status) {
                window.location.replace('{{route('frontend.user.account')}}');
            } else {
                window.location.reload();
            }
        }

        function wait(on) {
            console.log(on)
            if (on) {
                $('.load-spinner').modal('show');
            } else {
                setTimeout(function () {
                    $('.load-spinner').modal('hide');
                }, 500)

            }
        }

    </script>

@endpush

@push('after-styles')
    <style>


        #payment-form {
            font-family: Inter UI, Open Sans, Segoe UI, sans-serif;
            font-size: 16px;
            font-weight: 500;
        }

        /*form {*/

        /*    padding: 15px;*/
        /*}*/


        fieldset {
            border: 1px solid black;
            padding: 5px;

            background: rgba(18, 91, 152, 0.05);
            border-radius: 3px;
        }

        fieldset legend {
            float: left;
            width: 100%;
            text-align: center;
            font-size: 13px;
            color: #8898aa;
            padding: 3px 10px 7px;
        }

        .card-only {
            display: block;
        }

        .payment-request-available {
            display: none;
        }

        fieldset legend + * {
            clear: both;
        }

        input, button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: none;
            border-style: none;
            color: #fff;
        }

        input:-webkit-autofill {
            transition: background-color 100000000s;
            -webkit-animation: 1ms void-animation-out;
        }


        input {
            -webkit-animation: 1ms void-animation-out;
        }

        input::-webkit-input-placeholder {
            color: #9bacc8;
        }

        input::-moz-placeholder {
            color: #9bacc8;
        }

        input:-ms-input-placeholder {
            color: #9bacc8;
        }

        button {
            display: block;
            width: 100%;
            height: 37px;
            background-color: #d782d9;
            border-radius: 2px;
            color: #fff;
            cursor: pointer;
        }

        button:active {
            background-color: #b76ac4;
        }

        .error svg .base {
            fill: #e25950;
        }

        .error svg .glyph {
            fill: #f6f9fc;
        }

        .error .message {
            color: #e25950;
        }

        .success .icon .border {
            stroke: #ffc7ee;
        }

        .success .icon .checkmark {
            stroke: #d782d9;
        }

        .success .title {
            color: #32325d;
        }

        .success .message {
            color: #8898aa;
        }

        .success .reset path {
            fill: #d782d9;
        }


    </style>
@endpush