@extends('base')

@section('title', 'Shopping Bag')

@section('content')

    @include('common.no_cache')

    @php
        use App\Order;
        use App\Enumerables\Currency;
        use Illuminate\Support\Facades\Auth;
        
        /**
        * @var Order $order
        * @var array $orderItems
        */
        if (isset($order['currency'])) {
            $currency = Currency::CURRENCY_SIGN[$order['currency']] . ' ';
        } else {
            $cookieCurrency = $_COOKIE['currency'];
            
            $currency = Currency::CURRENCY_SIGN[
                array_key_exists($cookieCurrency, Currency::CURRENCY_SIGN)
                    ? $cookieCurrency
                    : Currency::CNY
            ];
        }
        
        $orderItemsCount = count($orderItems);
        $orderTotal = $order['total'] - $order['orderRefund'];
        $discountTotal = $order['eventDiscounts'] + $order['discountTotal'];
        $lang = config('app.locale');
        $user = Auth::user();
    @endphp

    <div class="ui basic segment">
        <div class="ui grid">
            <div class="sixteen wide column">
                <div class="ui breadcrumb payment">
                    <span class="userName">{{__('You are checking out as')}}{{" "}}{{$user->email ?? $user->phone}} {{" "}} {{__('You are checking out as chinese only')}}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="ui grid" id="payment">
        <div class="row">
            <div class="col">
                <div class="payment-main">
                    <div class="tab-header active relativeContainer font-title bold">
                        {{__("Payment")}}
                    </div>

                    <div class="content">
                        <span class="header">{{__('Choose payment type')}}</span>

                        @if($order['currency'] == \App\Enumerables\Currency::GBP)
                            <script src="https://www.paypal.com/sdk/js?locale={{($lang == 'en')?'en_GB':'zh_CN'}}&client-id={{config('app.paypalId')}}&currency=GBP&disable-funding=credit,card{{(config('app.paypalDebug') == 1) ? '&debug=true' : ''}}"></script>
                            <script>
                                function renderButton(container) {
                                    var d = document.getElementsByClassName('paypal-button'),
                                        hide=()=>[0,1].map(e=>d[e].style.display="none"),
                                        show=()=>[0,1].map(e=>d[e].style.display="block"),
                                        canStop=false,
                                        sendPaypalError = function(data, actions){
                                             setTimeout(function(){
                                                 document.getElementById('preloader').className="";
                                                 if(canStop)
                                                     return false;
                                                 canStop=true;
                                                 return fetch('{{route('paypal_error')}}?id={{$order['id']}}&c={{$order['customerID']}}', {
                                                      method: 'post',
                                                 }).then(function(res) {
                                                    document.getElementById('preloader').className="hidden";
                                                 }).then(function(data) {
                                                    document.getElementById('preloader').className="hidden";
                                                 });
                                             }, 3000);
                                             document.getElementById('preloader').className="";
                                             return true;
                                        },
                                        routeToBag = function(){
                                            window.location = '{{route('bag')}}';
                                        };
                                            
                                   
                                    paypal.Buttons({
                                        style: {
                                            layout:  'horizontal',
                                            color:   'white',
                                            shape:   'rect',
                                            label:   'checkout',
                                            size:    'responsive',
                                            tagline: false
                                        },
                                        // Set up the transaction
                                        createOrder: function(data, actions) {
                                            document.getElementById('preloader').className="hidden";
                                            canStop=false;
                                            return fetch('{{route('paypal_createOrder')}}?orderId={{$order['id']}}&c={{$order['customerID']}}', {
                                                credentials: 'include', 
                                                method: 'post',
                                            }).then(function(res) {
                                                return res.json();
                                            }).then(function(data) {
                                                return data.details.reference;
                                            });
                                        },
                                        // Finalize the transaction
                                        onApprove: function(data, actions) {
                                            document.getElementById('preloader').className="";
                                            return fetch('{{route('paypal_captureOrder')}}?reference=' + data.orderID, {
                                                credentials: 'include', 
                                                method: 'post'
                                            }).then(function(res) {
                                                return res.json();
                                            }).then(function(data) {
                                                setTimeout(function(){
                                                     window.location = '{{route('paypal_success')}}?reference='+data.details.referenceId;
                                                }, 1000);
                                                return true;
                                            })
                                        },
                                        onCancel: function (data, actions) {
                                            return sendPaypalError(data, actions); 
                                        },
                                        onError: function (err) {
                                            return sendPaypalError(data, actions); 
                                        }
                                    }).render('#'+container);
                                }

                                renderButton('paypal-button-container');
                                renderButton('paypal-button-container2');
                            </script>
                            <div class="payment-methods">
                                <div class="payment-method" id="card">
                                    <span>{{__('Pay with')}}</span>

                                    <img src="{{config('locations.systemPaymentImage.asset').'pay_icons.png'}}" alt="">

                                    <img class="rotate" src="{{config('locations.systemImage.asset').'chevron_right.png'}}" alt="">
                                </div>
                            </div>

                            <div class="cardPayment">
                                <div class="header">
                                    <div class="ui radio checkbox">
                                        <input type="radio" name="wallet" id="walletPayment" checked>
                                        <label for="walletPayment">
                                            {{__('Pay with a debit or credit card')}}
                                        </label>
                                    </div>

                                    <div class="cards">
                                        <img src="{{config('locations.systemPaymentImage.asset').'pay_icons.png'}}" alt="">
                                    </div>
                                </div>

                                <div class="billingAddr">
                                    <div class="ui form" id="existing-address">
                                        <label class="main-label">{{__('Billing address')}}{{": "}}</label>
                                        <div class="fields" id="billingAddresses">
                                            @if(count($billings) > 0)
                                                @foreach($billings as $billing)
                                                    <div class="field" id="billing_{{$billing->id}}">
                                                        <div class="ui radio checkbox">
                                                            <input type="radio" name="billingAddress" value="{{$billing->id}}" id="billing{{$loop->iteration}}">
                                                            <label for="billing{{$loop->iteration}}">
                                                                <span class="bold">{{$billing->firstName.' '.$billing->lastName}}</span>,
                                                                {{$billing->address1}}, {{$billing->address2.', '}} {{$billing->city}}, {{$billing->postcode}}, {{$billing->country}}
                                                            </label>
                                                        </div>

                                                        <div class="verified">{{__('verified')}}</div>
                                                    </div>
                                                @endforeach

                                                <div class="field no-billing" id="billID">
                                                    {{__('You have no saved billing addresses')}}<br>
                                                    {{__('Please add an address before creating a new payment')}}
                                                </div>
                                            @else
                                                <div class="field no-billing" id="no-billing-id2">
                                                    {{__('You have no saved billing addresses')}}<br>
                                                    {{__('Please add an address before creating a new payment')}}
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="button" onclick="showNewAddressModal()">
                                        {{"+ "}}{{ __('Add a new billing address') }}
                                    </div>

                                    <div class="button" id="removeAddressButton" onclick="removeBillingAddress()">
                                        {{"x "}}{{ __('Remove this Address') }}
                                    </div>

                                    <div class="cardDetails">
                                        <form class="ui form" action="{{route('worldpay')}}"  id="cardForm" method="post" onsubmit="return false;">
                                            {{ csrf_field() }}
                                            <div class="field">
                                                <div class="fields">
                                                    <label for="cardHolder" class="main-label">{{ __('Name On Card')}}{{"*"}}</label>
                                                    <div class="field">
                                                        <input id="cardHolder" name="name" data-worldpay="name" type="text" value="" required>
                                                        <input id="orderNo" name="orderNo" type="hidden" value="{{$order['displayOrderNo']}}" >
                                                        <input id="billingID" name="billingID" type="hidden" value="" >
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="field">
                                                <div class="fields">
                                                    <label for="cardNumber" class="main-label">{{ __('Card Number')}}{{"*"}}</label>
                                                    <div class="field cardNumber">
                                                        <input id="cardNumber" type="text" minlength="12" maxlength="24" value="" onblur="validateCardNumber($(this), $('.cardProvider'))" required>
                                                        <input type="hidden" id="hiddenCardNumber" data-worldpay="number">

                                                        <div class="cardProvider relativeContainer">
                                                            <span class="card"></span>

                                                            <span class="errorImg">
                                                                <img src="{{ config('locations.systemImage.asset').'error.png'  }}" class="validate-image err" alt="">
                                                                <img src="{{ config('locations.systemImage.asset').'correct.png'  }}" class="validate-image corr" alt="">
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="field">
                                                <div class="fields">
                                                    <label class="main-label">{{ __('Expiry Date')}}{{"*"}}</label>
                                                    <div class="field dropdown-field">
                                                        <div class="ui selection dropdown" id="expiryMonth" onchange="validateExpiryDate();">
                                                            <input type="hidden" data-worldpay="exp-month" value="">
                                                            <i class="chevron down icon"></i>
                                                            <div class="default text"></div>
                                                            <div class="menu">
                                                                <div class="item" data-value="01">{{__('January')}}</div>
                                                                <div class="item" data-value="02">{{__('February')}}</div>
                                                                <div class="item" data-value="03">{{__('March')}}</div>
                                                                <div class="item" data-value="04">{{__('April')}}</div>
                                                                <div class="item" data-value="05">{{__('May')}}</div>
                                                                <div class="item" data-value="06">{{__('June')}}</div>
                                                                <div class="item" data-value="07">{{__('July')}}</div>
                                                                <div class="item" data-value="08">{{__('August')}}</div>
                                                                <div class="item" data-value="09">{{__('September')}}</div>
                                                                <div class="item" data-value="10">{{__('October')}}</div>
                                                                <div class="item" data-value="11">{{__('November')}}</div>
                                                                <div class="item" data-value="12">{{__('December')}}</div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="field">
                                                        <div class="ui selection dropdown" id="expiryYear">
                                                            <input type="hidden" data-worldpay="exp-year" value="" onchange="validateExpiryDate();">
                                                            <i class="chevron down icon"></i>
                                                            <div class="default text"></div>
                                                            <div class="menu">
                                                                @for($i = 0, $year = date("Y"); $i <= 20; $i++)
                                                                    <div class="item" data-value="{{$year}}">{{$year++}}</div>
                                                                @endfor
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="field">
                                                <div class="fields">
                                                    <label for="securityCode" class="main-label">{{ __('Security Number')}}{{"*"}}</label>
                                                    <div class="field securityCode">
                                                        <input id="securityCode" data-worldpay="cvc" type="text" minlength="3" maxlength="4" value="" required>
                                                    </div>

                                                    <span class="codeNote" onclick="showCardCodeModal()">
                                                        {{__('what is this?')}}
                                                    </span>
                                                </div>
                                            </div>

                                            <div id="paymentErrors"></div>

                                            <div class="makePaymentBtn relativeContainer">
                                                <input type="submit" id="worldPaySubmitButton" value="{{ __('Pay Now') }}" class="disabled">

                                                <img src="{{config('locations.systemImage.asset').'chevron_right.png'}}" alt="">
                                            </div>
                                        </form>

                                        <span class="short-note">
                                            {{__('By clicking PAY NOW you confirm that you have read')}}<br>
                                            {{__('understood and accepted the')}}
                                            <a href="{{ route('terms') }}" target="_blank">{{__('order T&Cs')}}</a>
                                            {{__('and')}}
                                            <a href="{{ route('privacy') }}" target="_blank">{{__('Privacy Policy')}}</a>
                                            {{"*"}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="payment-methods">
                            @if($order['currency'] == \App\Enumerables\Currency::GBP)
                                <div class="payment-method paypal">
                                    <div class="overlay">
                                        <span>{{__('Pay with')}}</span>

                                        <img src="{{config('locations.systemPaymentImage.asset').'paypal_logo.png'}}" alt="">

                                        <img src="{{config('locations.systemImage.asset').'chevron_right.png'}}" alt="">
                                    </div>

                                    <div class="paypal-button" id="paypal-button-container"></div>
                                    <div class="paypal-button" id="paypal-button-container2"></div>
                                </div>
                            @else
                                <div class="payment-method" id="ali" onclick="confirmAlipay()">
                                    <span>{{__('Pay with')}}</span>

                                    <img src="{{config('locations.systemPaymentImage.asset').'alipay_logo.png'}}" alt="">

                                    <img src="{{config('locations.systemImage.asset').'chevron_right.png'}}" alt="">
                                </div>

                                <div class="payment-method" id="wechat">
                                    <span>{{__('Pay with')}}</span>

                                    @if(\Illuminate\Support\Facades\Config::get('app.locale') == 'en')
                                        <img src="{{config('locations.systemPaymentImage.asset').'wechat_logo-en.png'}}" alt="">
                                    @else
                                        <img src="{{config('locations.systemPaymentImage.asset').'wechat_logo-zh.jpg'}}" alt="">
                                    @endif

                                    <img src="{{config('locations.systemImage.asset').'chevron_right.png'}}" alt="">
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="payment-sidebar">
                    <div class="header">
                        <span class="headline font-title bold">
                            {{__('Order Summary')}}
                        </span>

                        <span class="payment-subtotals">
                            <span class="item">
                                <span class="left">
                                    {{__('payment-total')}}{{": "}}
                                </span>
                                <span class="right">
                                    {{$currency . number_format($orderTotal, 2)}}
                                </span>
                            </span>
                            
                            @if($discountTotal > 0)
                                <span class="item">
                                    <span class="left">
                                        {{__('payment-discount')}}{{": "}}
                                    </span>
                                    <span class="right discounted-price">
                                        -{{$currency . number_format($discountTotal, 2)}}
                                    </span>
                                </span>
                            @endif
                        </span>
                        
                        <span class="payment-main-total">
                            <span class="left">{{__('Total')}}{{": "}}</span>
                            <span class="right">
                                <span id="paidTotal">{{$currency . number_format($orderTotal - $discountTotal, 2)}}</span>
                            </span>
                        </span>
                    </div>

                    <div class="body">
                        <div class="header">
                            <span class="items-counter">{{$orderItemsCount}}
                                @if($orderItemsCount == 1)
                                    {{__('item')}}
                                @else
                                    {{__('items')}}
                                @endif
                            </span>
                        </div>

                        @php
                            use App\OrderItems;

                            /**
                             * @var OrderItems $item
                             */
                        @endphp
                        
                        @foreach($orderItems as $item)
                            @php
                                $product = $item->getProductModel();
                                $itemImage = $product->productImage($lang, $item);
                                $title = $product->title($lang, $item);
                                $subtitle = $product->subtitle($lang, $item);
                                $originalPrice = $currency.number_format($item->toPayWithoutDiscount(), 2, ".", ",");
                                $currentPrice = $currency.number_format($item->toPayTotal(), 2, ".", ",")
                            @endphp

                            <div class="card {{($subtitle == '') ? 'virtualCourse' : ''}}">
                                <div class="uniLogo relativeContainer">
                                    <img src="{{$itemImage}}" alt="">
                                    
                                    @include('order.components.max_discount', [
                                        'item' => $product,
                                        'lang' => $lang,
                                        'discountPercentage' => $discountPercentage
                                    ])
                                </div>

                                <div class="text">
                                    <span class="header">{{$title}}</span>
                                    <span class="subheader">{{$subtitle}}</span>
                                </div>

                                <div class="price">
                                    @if($currentPrice != $originalPrice)
                                        <span class="item-price relativeContainer">
                                            <span class="strike-through"></span>
                                            {{$originalPrice}}
                                        </span>

                                         <span class="item-price">
                                             {{$currentPrice}}
                                         </span>
                                    @else
                                        <span class="item-price">
                                            {{$currentPrice}}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @endforeach

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

    @if($order['currency'] == \App\Enumerables\Currency::GBP)
        @include('order.modals.gbp_modals')
    @endif

    <div class="ui tiny modal" id="goBack">
        <div class="topbar">
            <img class="closeBtn" src="{{config('locations.systemImage.asset').'closeBtn.png'}}" alt="">
        </div>

        <div class="header">
            {{__('Confirm Payment Cancellation')}}
        </div>

        <div class="text">
            {{__('In the event of non-payment, the order will be cancelled after 48 hours')}}
        </div>

        <div class="actions">
            <div class="ui deny button" id="new_address_modal_btn">
                {{__('Cancel Payment')}}
            </div>

            <div class="ui approve button" id="new_address_modal_btn">
                {{__('Continue Checkout')}}
            </div>
        </div>
    </div>

    <div class="ui tiny modal" id="paymentProcessingModal">
        <div class="topbar">
            <img class="closeBtn" src="{{config('locations.systemImage.asset').'closeBtn.png'}}" alt="">
        </div>

        <div class="header">
            {{__('This order is already in payment.')}}
        </div>

        <div class="actions">
            <div class="ui approve button" onclick="window.location='{{route('bag')}}'">
                {{__('Return To Bag')}}
            </div>

            <div class="ui deny button">
                {{__('Cancel')}}
            </div>
        </div>
    </div>


    @if($order['currency'] != \App\Enumerables\Currency::GBP)
        <div class="ui tiny modal" id="wechatPaymentQRModal">
            <div class="topbar">
                <img class="closeBtn" src="{{config('locations.systemImage.asset').'closeBtn.png'}}" onclick="cancelWechatPayment()" alt="">
            </div>

            <div class="header">
                {{__('Scan WeChat Payment QR Code')}}
            </div>

            <div class="image-container">
                <img id="wechatPaymentQrCodeImage" src="" alt="">
            </div>

            <div class="actions">
                <div class="ui deny button" onclick="cancelWechatPayment()">
                    {{__('Cancel')}}
                </div>
            </div>
        </div>
    @endif

    <script>
        let allowed = false;

        $(function () {
            $('#billingAddresses #billID').hide();
            $('#removeAddressButton').hide();

            $('input[type=radio]').change(function () {
                $('#removeAddressButton').show();
            });

            $('.dropdown.icon').removeClass('dropdown').addClass('chevron down');

            $('#goBack').modal({
                closable: false,
                onApprove: function(){
                    $('#goBack').modal('hide');
                }
            }).modal('attach events', '#goBack .closeBtn', 'hide');

            $('#country').on('change', function () {
                if (this.value === 'United Kingdom') {
                   $('#postcode_search').attr('onblur', 'getPostcode()');
                   $('#addresses_from_postcode').removeClass('hidden');
                } else {
                    $('#postcode_search').removeAttr('onblur');
                    $('#addresses_from_postcode').addClass('hidden');
                }
            });

            $('.footer .stackable.grid > div:not(#footer_bottom_row), .footer_thin_shadow').css('display', 'none');

            $('.promoCode .input-container, .cardDetails').hide();
            $('#billingAddresses .checkbox').checkbox('uncheck');

            $('.code-trigger').on('click', function () {
                $('.promoCode .input-container').slideToggle();
            });

            @if($order['currency'] == \App\Enumerables\Currency::GBP)
                $('#expiryMonth, #expiryYear').dropdown({
                    on: 'click'
                }).on('click', function (e) {
                    e.stopImmediatePropagation();
                });

                $('#newBillingAddress').on('submit', function () {
                    saveBillingAddress();
                });

                $('#phoneDropdown').click(function () {
                    $(this).parent('.dropdown').dropdown('toggle');
                });

                $('.billingAddr').on('change', 'input[name="billingAddress"]', function(){
                    document.getElementById('billingID').value = $('#billingAddresses input:checked').val();
                    $('.cardDetails').slideDown();
                });

                $('#cardNumber').on('keydown', function(e){
                    let key = e.which || e.keyCode;

                    if (key === 8) {
                        let start = e.target.selectionStart;

                        if($(e.target).val()[start - 1] === ' ') {
                            e.target.setSelectionRange(start - 1, start - 1);
                            return false;
                        }
                    }
                }).on('input change', function (e) {
                    let cursorStart = e.target.selectionStart;
                    let cursorEnd = e.target.selectionEnd;
                    let originalLength = $(this).val().length;
                    let currentLength;

                    checkCardType($(this), $('.cardProvider'), "{{config('locations.systemPaymentImage.asset').'card'}}");

                    currentLength = $(this).val().length;

                    if (currentLength > originalLength) {
                        cursorStart++;
                        cursorEnd++;
                    }

                    e.target.setSelectionRange(cursorStart, cursorEnd);
                });

                $('#securityCode').on('keypress', function (e) {
                    return checkIfNumber(e);
                });
            @else
                $('#wechatPaymentQRModal').modal({
                    closable: false,
                });

                $('#addresses_from_postcode').hide();
            @endif
        });

        function checkCartStatus(callback) {
            $.ajax({
                url: '{{route('getOrderStatus')}}',
                method: 'GET',
                data: {
                    '_token': "{{ csrf_token() }}",
                    'orderId': '{{$order['id']}}'
                },
                success: function (data) {
                    let status = true;
                    
                    data = data.toString();
                    
                    if (
                        data !== '{{\App\Enumerables\PaymentStatus::CART_PROCESSING}}'
                        && data !== '{{\App\Enumerables\PaymentStatus::CHANGE_COURSE}}'
                    ) {
                        status = false;
                        $('#paymentProcessingModal').modal({
                            closable: false,
                        }).modal('attach events', '#paymentProcessingModal .closeBtn', 'hide')
                            .modal('show');
                    }

                    callback(status);
                },
                fail: function (jqXHR, textStatus) {
                    console.log('failed - ' + textStatus);
                    callback(false);
                }
            });
        }

        @if($order['currency'] == \App\Enumerables\Currency::GBP)
            let $cardNumberInput = $('#cardNumber');
            let $cardExpiryMonthInput = $('#expiryMonth input');
            let $cardExpiryYearInput = $('#expiryYear input');

            function getPostcode() {
                let postcode = $("#postcode_search").val();

                if (postcode.length < 5 || postcode.length > 8) {
                    console.log('incorrect postcode');
                    return;
                }

                let parent = $('#addresses_from_postcode_select_options .menu');

                parent.html(
                    '<div class="item" data-value="first_row">'+'{{__('Select your address')}}'+'</div>'
                );

                $.ajax({
                    url: "{{route( 'getAddressesByPostCode' )}}",
                    method: 'POST',
                    data: {
                        '_token': "{{ csrf_token() }}",
                        'postCode': postcode
                    },
                    success: function (data) {
                        if (
                            !data ||
                            !Array.isArray(data)
                            || data.length < 1
                        ) {
                            return;
                        }
                        
                        data.forEach(function (address) {
                            parent.append(
                                '<div class="item" data-value="' +
                                    address.split(',').join('???') +
                                '">' +
                                    address +
                                '</div>'
                            );
                        });

                        $('#addresses_from_postcode').show();
                    },
                    fail: function(jqXHR, textStatus) {
                        console.log('failed - ' + textStatus);
                    }
                })
            }

            function loadAddress(element) {
                let address = element.val();

                if (address !== 'first_row') {
                    address = address.split('???');
                    
                    if (address.length > 3) {
                        $("#adrline1").val(address[0].trim() + ', ' + address[1].trim());
                        
                        if (address.length > 4) {
                            $("#adrline2").val(address[2].trim() + ', ' + address[3].trim());
                        } else {
                            $("#adrline2").val(address[2].trim());
                        }
                    } else {
                        $("#adrline1").val(address[0].trim());
                        $("#adrline2").val(address[1].trim());
                    }
                    
                    $("#city").val(address[address.length - 1]);
                } else {
                    $("#adrline1").val("");
                    $("#adrline2").val("");
                    $("#city").val("");
                }
            }

            function validateExpiryDate() {
                validateCardExpiryDate($cardExpiryYearInput, $cardExpiryMonthInput);
            }

            function checkForm(e) {
                validateCardNumber($cardNumberInput, $('.cardProvider'));
                validateExpiryDate();

                if (
                    $('#cardForm .errorBorder').length === 0
                    && $('#cardHolder').val() !== ''
                    && $('#securityCode').val() !== ''
                ) {
                    $('#hiddenCardNumber').val(
                        ($cardNumberInput.val()).replace(/\D/g, '')
                    );

                    return true;
                } else {
                    e.preventDefault();
                    e.stopImmediatePropagation();

                    return false;
                }
            }

            function saveBillingAddress() {
                if (checkBillingInputs()) {
                    $.ajax({
                        type: 'POST',
                        url: "{{route( 'billing')}}",
                        data: $('#newBillingAddress').serialize(),
                        success: function (data) {
                            if (data === 'error') {
                                return false;
                            }

                            let name = $('#firstName').val() + " " + $('#lastName').val() + ", ";
                            let address = $('#adrline1').val() + ", " + $('#adrline2').val();
                            if ($('#adrline2').val() != "") {
                                address += ", ";
                            }
                            let city = $('#city').val() + ", ";
                            let postcode = $('#postcode_search').val() + ", ";
                            let country = $('#country').val();

                            $('#billingAddresses').append('<div class="field" id="billing_'+data.status+'"><div class="ui radio checkbox"><input type="radio" name="billingAddress" value="'+data.status+'"><label>'+'<span class="bold">'+name+'</span>'+address+city+postcode.toUpperCase()+country+'</label></div><div class="verified">{{__("verified")}}</div></div>');
                            $('#new_address_modal').modal('hide');
                            $('#no-billing-id2').hide();

                            return false;
                        }
                    });
                }
            }

            function checkBillingInputs() {
                return Array.prototype.every.call(
                    document.querySelectorAll('#newBillingAddress input[required], #newBillingAddress input[data-required="required"]'),
                    function (input) {
                        if (input.required || input.dataset.required === 'required') {
                            if ((input.value.trim()).length > 0) {
                                updateErrorStyle(input, false);
                                return true;
                            } else {
                                updateErrorStyle(input, true);
                                return false;
                            }
                        }

                        return true;
                    }
                );
            }

            function updateErrorStyle(target, addError) {
                let command = addError ? 'add' : 'remove';

                if (target.type === 'hidden') {
                    let parent = target.parentNode;

                    while (!parent.classList.contains('dropdown')) {
                        parent = parent.parentNode;
                    }

                    target = parent;
                }

                target.classList[command]('errorBorder');
            }

            function removeBillingAddress() {
                $.ajax({
                    type: 'GET',
                    url: "{{ route( 'removeAddress') }}",
                    data: {
                        '_token' :"{{ csrf_token() }}",
                        'id': $('input[name="billingAddress"]:checked').val()
                    },
                    success: function (data) {
                        if (!data.infoCode) {
                            $('#billing_' + $('input[name=billingAddress]:checked').val()).remove();

                            if ($('#billingAddresses .field:not(.no-billing)').length === 0) {
                                $('#no-billing-id2').show();
                                $('.cardDetails').slideUp();
                            }

                            if (data.count === 0) {
                                $('#billingAddresses #billID').show();
                            }
                        } else {
                            console.log(data.errmsg);
                        }
                        console.log(data.infoCode === 200);
                    }
                });
            }

            function checkout(order_id) {
                checkCartStatus(function (status) {
                    if (status) {
                        allowed = true;

                        $.ajax({
                            type: 'POST',
                            url: "{{route('prepareExpressCheckout')}}",
                            data: {
                                '_token': "{{ csrf_token() }}",
                                'order_id': order_id
                            },
                            success: function (data) {
                                if (data.infoCode === 200) {
                                    window.location.href = data.href;
                                } else if (data.infoCode === 300) {
                                    window.location.href = '/bag';
                                } else {
                                    console.log(data.errmsg);
                                }
                            }
                        });
                    }
                });
            }

            function showNewAddressModal() {
                $('#new_address_modal').modal('attach events', '#addr_close_btn', 'hide').modal('show');
            }

            function showCardCodeModal() {
                $('#card_modal').modal('attach events', '#card_modal .closeBtn', 'hide').modal('show');
            }
        @endif
    </script>

    @if($order['currency'] == \App\Enumerables\Currency::GBP)
        <script src="{{ asset('js/cardNumberValidation.js' ) }}"></script>
        <script src="https://cdn.worldpay.com/v1/worldpay.js"></script>
        <script src="https://try.access.worldpay.com/access-checkout/v1/checkout.js"></script>

        <script>
            let form = document.getElementById('cardForm');
            let worldPayButton = document.getElementById('worldPaySubmitButton');
            let formSubmitted = false;
            let errorMessage = document.getElementById('paymentErrors');

            worldPayButton.addEventListener('click', function (event) {
                event.stopImmediatePropagation();

                if (formSubmitted) {
                    event.preventDefault();
                } else {
                    checkForm(event);
                }
            }, true);

            form.addEventListener('submit', function (event) {
                if (formSubmitted) {
                    event.preventDefault();
                } else {
                    formSubmitted = true;
                    worldPayButton.classList.add('disabled');
                }
            }, true);

            $(function () {
                $('#cardHolder, #cardNumber, #securityCode, #expiryMonth, #expiryYear').on('input change', function () {
                    errorMessage.textContent = '';

                    if (!formSubmitted) {
                        worldPayButton.classList.remove('disabled');
                    }
                });
            });

            Worldpay.useOwnForm({
                'clientKey': '{{config('app.worldpayClientKey')}}',
                'form': form,
                'reusable': false,
                'callback': function(status, response) {
                    console.log(response);

                    if (response.error) {
                        errorMessage.textContent = response.error.message;
                        formSubmitted = false;
                    } else {
                        checkCartStatus(function (status) {
                            if (status) {
                                Worldpay.formBuilder(form, 'input', 'hidden', 'token', response.token,'token');

                                form.submit();
                            }
                        });
                    }
                }
            });
        </script>
    @endif

    {{--start of wechat paymenent handling--}}
    @if($order['currency'] != \App\Enumerables\Currency::GBP)
        <script>
            $('#wechat').on('click', function () {
                checkCartStatus(function (status) {
                    if (status) {
                        $.ajax({
                            type: 'GET',
                            url: '{{route('validateWeChatBag')}}',
                            data: {
                                '_token': '{{ csrf_token() }}',
                                'orderID': '{{$order['displayOrderNo']}}'
                            },
                            success:function(data){
                                if (data === 'false') {
                                    window.location.href = '{{route('bag')}}';
                                } else {
                                    generateWechatPaymentQRCode();
                                    $('#wechatPaymentQRModal').modal('show');
                                }
                            }
                        });
                    }
                })
            });

            function confirmAlipay() {
                checkCartStatus(function (status) {
                    if (status) {
                        window.location.href = '{{route('aliProcessPayment', $order['id'])}}';
                    }
                });
            }

            function generateWechatPaymentQRCode() {
                $('#wechatPaymentQrCodeImage').attr('src', '{{route('generateWechatPaymentQRCode', ['orderNo' => $order['displayOrderNo']])}}');
                $('#wechatPaymentQRModal').modal('show');

                checkWechatPaymentStatus();
            }

            function checkWechatPaymentStatus() {
                setTimeout(function () {
                    $.ajax({
                        type: 'GET',
                        url: '{{route('queryWechatPayment')}}',
                        data: {
                            '_token': "{{ csrf_token() }}",
                            'orderID': '{{$order['displayOrderNo']}}'
                        },
                        success:function (data) {
                            if (data.wechatPaymentStatus === 'pending') {
                                checkWechatPaymentStatus();
                            } else {
                                window.location.replace(data.wechatPaymentStatus);
                            }
                        },
                        error: function () {
                            checkWechatPaymentStatus();
                        }
                    });
                }, 5000);
            }

            function cancelWechatPayment() {
                $('#wechatPaymentQRModal').modal('hide');
            }
        </script>
    @endif
    {{--end of wechat paymenent handling--}}
@endsection

@section('document_ready_scripts')
    $('.ui.checkbox').checkbox();
@endsection