@extends('layout.app')

@section('page-title', $title)

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <a href="{{ url('new-design/review_order.php') }}" class="text">Review order</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">Credit card payment</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="credit-card-wrapper">
        <div class="container">
            <form id="credit-card-form">
                @if($is_admin && $cc_transaction_only)
                    <div class="row">
                        <div class="col-sm-2">&nbsp;</div>
                        <div class="col-sm8" style="background-color: #AC5252; color: white; padding: 20px;">
                            A link to this page can be given to the customer in one of the following cases:
                            <ul>
                                <li>For some reason the customer is not able to reach the credit card page</li>
                                <li>Credit card is declined at time of purchase and next day he comes with the problem
                                    supposedly fixed and you want to give him a quick way to pay.
                                </li>
                            </ul>
                            Please, give the link to this page <b style="color: blue">ONLY</b> if you see customer is reluctant to give his
                            CC info over the phone.
                            <br><br>
                            This page only processes a CC transaction. If customer can do that successfully, you'll still need
                            to revive the order, if it isn't processed already.
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                @endif

                @if($show_cc_form)
                    <div class="row">
                        <div id="dropin-container" class="col-sm-12 col-md-6 col-xl-3 m-auto"></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-6 col-xl-3 m-auto">
                            <div class="row cc-total">
                                <div class="col-sm-6">Order Total</div>
                                <div class="col-sm-6 text-end">${{ $order->totals['grand_total'] }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-3">&nbsp;</div>
                        <div class="col-sm-12 col-xl-6 form-errors text-center"></div>
                        <div class="col-xl-3">&nbsp;</div>
                    </div>

                    <div class="row">
                    </div>

                    <div class="row">
                        <div class="col-sm-12 col-md-6 col-xl-3 m-auto">
                            <div class="row">
                                <div class="col-xl-12 m-auto text-center">
                                    <button type="button" class="btn btn-success" id="submit-button">
                                        Submit Payment
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="row">
                        <div class="col-sm-12 col-md-6 col-xl-3 m-auto">
                            <br>
                            We're experiencing difficulties with credit card processing.
                            Please, contact <a href='<br />
<b>Warning</b>:  Use of undefined constant WEB_PATH - assumed 'WEB_PATH' (this will throw an Error in a future version of PHP) in <b>/home/staging/wt-git/wt/new-design/views/credit_card.blade.php</b> on line <b>97</b><br />
WEB_PATHnew-design/contact_us.php'>customer service</a> for assistance.
                            We're really sorry for the inconvenience!
                        </div>
                    </div>
                @endif

                <input type="hidden" name="amount" value="{{ $order->totals['grand_total'] }}">
                <input type='hidden' name='customer_id' value='{{ $order->order->customer_id }}'>
                <input type='hidden' name='order_id' value='{{ $order->order->order_id }}'>
                <input type='hidden' name='billAddress' value='{{ $order->order->billAddress }}'>
                <input type='hidden' name='billCity' value='{{ $order->order->billCity }}'>
                <input type='hidden' name='billState' value='{{ $order->order->billState }}'>
                <input type='hidden' name='billZip' value='{{ $order->order->billZip }}'>
                <input type='hidden' name='billCountry' value='{{ $order->order->billCountry }}'>
                <input type='hidden' name='email' value='{{ $order->order->email }}'>
                <input type='hidden' name='billFName' value='{{ $order->order->billFName }}'>
                <input type='hidden' name='billLName' value='{{ $order->order->billLName }}'>
                <input type='hidden' name='billPhone' value='{{ $order->order->billPhone }}'>
                <input type="hidden" name="cc_transaction_only" value="{{ $cc_transaction_only }}">
            </form>

            @if($show_cc_form)
                <div class="row mt-4">
                    <div id="cc-disclaimer" class="col-md-6 m-auto">
                        Important: Upon completing your order, a pending authorization is processed for the total order amount. The funds are still in your account, but the amount of the authorization hold is restricted from use. This procedure ensures the funds necessary to complete the transaction are available. However, your credit card is only charged once item(s) on your order ship. This may result in partial charges as your order is fulfilled.<br><br>

                        Your credit card information will never be stored on our server. It is processed by our payment processor Braintree (a Paypal company) using a secure connection.<br><br>

                        Orders containing Made-To-Order cushion covers are custom made specifically for you upon ordering. Payment for custom cushions is charged at the time of shipping your cushion foam cores and complimentary cushion covers (based on inventory availability).<br><br>

                        If complimentary cushion covers are not available based on current inventory, payment for the cushions will be processed at the time of shipment, following the completion of your Made-To-Order selection.<br><br>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('after-foot-js')
    <script src="https://js.braintreegateway.com/web/dropin/1.15.0/js/dropin.min.js"></script>
    <script src="https://www.google.com/recaptcha/api.js?render={{ RECAPTCHA_PUBLIC_KEY }}"></script>
    <script>
        const button = document.querySelector('#submit-button');

        const processPayment = function (braintree_token, recaptcha_token, payment_type) {
            const button = jQuery('#submit-button');
            const error_ctrl = jQuery('.form-errors');
            button.original_properties = {};
            button.original_properties.text = button.html();
            button.original_properties.bgcolor = button.css('background-color');

            const disableSubmitButton = function () {
                button.text('Processing...')
                button.css('background-color', 'gray')
                button.prop('disabled', true);
            };

            const enableSubmitButton = function () {
                button.html(button.original_properties.text)
                button.css(
                    'background-color',
                    button.original_properties.bgcolor
                );
                button.prop('disabled', false);
            };

            const clearErrors = function (action) {
                error_ctrl.empty();
                error_ctrl.css("display", "none");
            };

            const showNotification = function (errors) {
                // Show 'server error' in case there is php error on server side
                // and we got an invalid JSON response
                if (errors[0] === 'parsererror') {
                    errors = '{"server_error":"Server error. We are really sorry for the inconvenience. Please, <a href=\'new-design/contact_us.php\' target=\'_blank\'>contact</a> us and we will be happy to help with any problems you might have."}';
                    errors = JSON.parse(errors);
                } else if (errors[0] === 'timeout') {
                    errors = '{"timeout":"Server too busy. Please, wait a few minutes and submit again. We\'re really sorry for the inconvenience."}';
                    errors = JSON.parse(errors);
                }

                clearErrors();

                // Show the new errors
                const error_container = jQuery('<ul id="error-container"></ul>');
                let show_errors = false;

                for (const field in errors) {
                    show_errors = true;
                    error_container.append(jQuery("<li>" + errors[field] + "</li>"));
                }

                if (show_errors) {
                    error_ctrl.append(error_container);
                    error_ctrl.css("display", "block");
                }
            };


            jQuery.ajax({
                url: '{{ WEB_PATH }}' + 'new-design/process_credit_card.php',
                type: 'post',
                data: jQuery('#credit-card-form').serialize() + '&braintree_token=' + braintree_token +
                    '&recaptcha_token=' + recaptcha_token + '&payment_type=' + payment_type + '&action_name=complete_order',
                dataType: 'json',
                timeout: 30000,
                beforeSend: function () {
                    disableSubmitButton();
                },
                success: function(data) {
                    if (!jQuery.isEmptyObject(data.error) && data.error.length !== 0) {
                        showNotification(data.error);
                    } else if (data.redirect_url && data.redirect_url.indexOf('http') !== -1) {
                        window.location = data.redirect_url;
                    }
                },
                error: function (jqXHR, textStatus, errorThrown){
                    showNotification([textStatus]);
                },
                complete: function (jqXHR, textStatus) {
                    // Only enable the button again if there is an error
                    if (typeof jqXHR.responseJSON === 'undefined' ||
                        typeof jqXHR.responseJSON.redirect_url === 'undefined' ) {
                        if (typeof button.original_properties !== 'undefined') {
                            enableSubmitButton();
                        }
                    }
                }
            });
        };

        const processPaymentWithCaptcha = function (braintree_token, payment_type) {
            grecaptcha.ready(function() {
                grecaptcha.execute('6Le5Dl4aAAAAAL1xvYeJEhIeRJUI7xN5sOcjuCrZ', {action: 'cc_submit'}).then(
                    // Recaptcha Success
                    function(recaptcha_token) {
                        processPayment(braintree_token, recaptcha_token, payment_type);
                    },
                    // Recaptcha Failure - this doesn't represent bot detection but
                    // a more serious failure like not being able to get a result at all
                    function () {
                        console.log('Fail');
                    }
                );
            });
        };

        const processPaymentWithoutCaptcha = function (braintree_token, payment_type) {
            const recaptcha_token = 'disabled';
            processPayment(braintree_token, recaptcha_token, payment_type);
        };

        braintree.dropin.create({
            authorization: '{{ $token }}',
            container: '#dropin-container',
            applePay: {
                displayName: 'Westminster Teak',
                paymentRequest: {
                    total: {
                        label: 'Westminster Teak',
                        amount: {{ $order->totals['grand_total'] }}
                    },
                }
            }
        }, function (createErr, instance) {
            button.addEventListener('click', function () {
                instance.requestPaymentMethod(function (err, payload) {
                    if (typeof payload !== 'undefined') {
                        const braintree_token = payload.nonce;
                        const payment_type = payload.type; // 'CreditCard', 'ApplePayCard', etc.

                        if ('{{ $gst->is_captcha_turned_on_text }}' === 'yes') {
                            processPaymentWithCaptcha(braintree_token, payment_type);
                        } else {
                            processPaymentWithoutCaptcha(braintree_token, payment_type);
                        }
                    }
                });
            });
        });
    </script>
@endpush