<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    @include('front/common/header')





    <style>
        .example.example2 {

        }

        .example.example2 * {

        }
        .example.example2 .input::-webkit-input-placeholder {


        }

        .example.example2 .input::-moz-placeholder {

        }

        .example.example2 .input:-ms-input-placeholder {

        }


        .example.example2 input, .example.example2 button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: none;
            border-style: none;
        }

        .example.example2 input:-webkit-autofill {
            font-family: 'GothamBook';
            -webkit-text-fill-color: #e39f48;
            transition: background-color 100000000s;
            -webkit-animation: 1ms void-animation-out;
        }

        .example.example2 .StripeElement--webkit-autofill {
            background: transparent !important;
        }

        .example.example2 input, .example.example2 button {
            -webkit-animation: 1ms void-animation-out;
        }

        .example.example2 button {
            display: block;
            width: calc(100% - 30px);
            height: 40px;
            margin: 40px 15px 0;
            background-color: #24b47e;
            border-radius: 4px;
            color: #fff;
            text-transform: uppercase;
            font-weight: 600;
            cursor: pointer;
        }

        .example.example2 .error svg {
            margin-top: 0 !important;
        }

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

        .example.example2 .error svg .glyph {
            fill: #fff;
        }

        .example.example2 .error .message {
            color: #e25950;
        }

        .example.example2 .success .icon .border {
            stroke: #abe9d2;
        }

        .example.example2 .success .icon .checkmark {
            stroke: #24b47e;
        }

        .example.example2 .success .title {
            color: #32325d;
            font-size: 16px !important;
        }

        .example.example2 .success .message {
            color: #8898aa;
            font-size: 13px !important;
        }

        .example.example2 .success .reset path {
            fill: #24b47e;
        }
  

</style>

    <body>

        <main id="main" role="main">
            <header class="header bg-white py-2">
                <div class="container">
                    <div class="row justify-content-center align-items-center">
                        <div href="{{url("/")}}" class="col-lg-4 text-lg-left text-center mb-lg-0">
                            <a class="logo ml-lg-0 mx-auto" href="http://homefloltd.seo-local.co.uk">
                                <img src="http://homefloltd.seo-local.co.uk/front/images/logo.svg" class="img-fluid" alt="">
                            </a>
                           
                        </div>
                        <div class="col-lg-8 text-md-right text-center py-lg-0 py-3">
                            <ul class="checkout-steps row mr-md-auto">
                                <li class="col-3 top-steps about active">1. About You</li>
                                <li class="col-3 top-steps address">2. Address</li>
                                <li class="col-3 top-steps summary">3. Order Summary</li>
                                <li class="col-3 top-steps payment">4. Payment</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>


            @yield('content')



            <footer class="checkout-footer bg-white">
                <div class="row mx-0 justify-content-center">
                    <div class="col-lg-11">

                        <div class="row">
                            <div class="col-md-6 text-center text-lg-left my-3">
                                @if(isset($footer))
                                {{$footer->content}}
                                @endif 
                            </div>
                            <div class="col-md-6 text-center text-lg-right my-lg-3">
                                <span class="web-author">Crafted With <img src="{{ asset('/front/images/heart-icon.png') }}" width="30" height="30" class="mx-2 entered lazyloaded" alt="Love"> By <a href="https://www.amixconsulting.com/" rel="noopener noreferrer" class="text-primary" target="_blank">Amix</a></span>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </main>
        @include('front/common/js')


        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="https://js.stripe.com/v3/"></script>

        @yield('myscript')

        @yield('packages-script')

        <script>


'use strict';

(function () {
    'use strict';

    var stripe = Stripe("<?php echo env("STRIPE_KEY") ?>");


    var elements = stripe.elements({
        // Stripe's examples are localized to specific languages, but if
        // you wish to have Elements automatically detect your user's locale,
        // use `locale: 'auto'` instead.
        locale: window.__exampleLocale
    });

    // Floating labels
    var inputs = document.querySelectorAll('.cell.example.example2 .input');
    Array.prototype.forEach.call(inputs, function (input) {
        input.addEventListener('focus', function () {
            input.classList.add('focused');
        });
        input.addEventListener('blur', function () {
            input.classList.remove('focused');
        });
        input.addEventListener('keyup', function () {
            if (input.value.length === 0) {
                input.classList.add('empty');
            } else {
                input.classList.remove('empty');
            }
        });
    });

    var elementStyles = {
        base: {
            color: '#959595',
            fontFamily: 'inherit',
            fontSize: '18px',
            fontSmoothing: 'antialiased',

            '::placeholder': {
                color: '#CFD7DF',
            },
            ':-webkit-autofill': {
                color: '#e39f48',
            },
        },
        invalid: {
            color: '#E25950',

            '::placeholder': {
                color: '#FFCCA5',
            },
        },
    };

    var elementClasses = {
        focus: 'focused',
        empty: 'empty',
        invalid: 'invalid',
    };

    var cardNumber = elements.create('cardNumber', {
        style: elementStyles,
        classes: elementClasses,
        placeholder: 'Please Enter Your Card Number',
    });
    cardNumber.mount('#card-number');

    var cardExpiry = elements.create('cardExpiry', {
        style: elementStyles,
        classes: elementClasses,
    });
    cardExpiry.mount('#card-expiry');

    var cardCvc = elements.create('cardCvc', {
        style: elementStyles,
        classes: elementClasses,
    });
    cardCvc.mount('#card-cvc');

    registerElements([cardNumber, cardExpiry, cardCvc], 'example2');


    function registerElements(elements, exampleName) {
        var formClass = '.' + exampleName;
        var example = document.querySelector(formClass);

        var form = document.getElementById('checkout-form');
        //var errorMessage = error.querySelector('.message');
        function enableInputs() {            
           $('#btn-credit_card').attr('disabled' , false);          
            Array.prototype.forEach.call(
                    form.querySelectorAll("input[type='text'], input[type='email'], input[type='tel']"),
                    function (input) {
                        input.removeAttribute('disabled');
                    }
            );
        }

        function disableInputs() {
            $('#btn-credit_card').attr('disabled' , true);
            Array.prototype.forEach.call(
                    form.querySelectorAll(
                            "input[type='text'], input[type='email'], input[type='tel']"
                            ),
                    function (input) {
                        input.setAttribute('disabled', 'true');
                    }
            );
        }

        function triggerBrowserValidation() {
            // The only way to trigger HTML5 form validation UI is to fake a user submit
            // event.
            disableInputs();
            var form = document.getElementById('checkout-form');
            console.log(form);
            var submit = document.createElement('input');
            console.log(submit);
            submit.type = 'submit';
            submit.style.display = 'none';
            form.appendChild(submit);
            form.submit();
            //submit.click();
            submit.remove();
        }

        // Listen for errors from each Element, and show error messages in the UI.
        var savedErrors = {};
        elements.forEach( e => e.on('change', e => ! e.error || displayErrorsForStripe(e, "errors") ) );
        // Listen on the form's 'submit' handler...
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var terms = $('#terms').is(":checked") ? 1 : 0;            
            var payment_method = $("#payment_method").val();
            disableInputs();
            //$(':button').prop('disabled', true); // Disable all the buttons
            // Trigger HTML5 validation UI on the form if any of the inputs fail
            // validation.
            var plainInputsValid = true;
            Array.prototype.forEach.call(form.querySelectorAll('input'), function (input) {
                if (input.checkValidity && !input.checkValidity()) {
                    plainInputsValid = false;
                    return;
                }
            });
            if (!plainInputsValid) {
                triggerBrowserValidation();
                return;
            }

            // Show a loading screen...
            example.classList.add('submitting');
            stripe.createPaymentMethod('card',elements[0]).then(function (result) {
                
                if (result.error ) {
                    var errorsHtml = '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
                    $.each(result.error, function (key, value) {
                        if (key == "message") {
                            errorsHtml += '<p class="mb-0" >' + value + '</p>'; //showing only the first error.
                        }
                    });
                    errorsHtml += '<p class="mb-0" >Your card information is not correct. Please try again.</p>';
                    errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"><i class="feather icon-x-circle"></i></span></button></div>';
                    $('#errors').html(errorsHtml).show().focus();                   
                    enableInputs();
                    $("html, body").animate({ scrollTop: 0 }, 100, "linear");
                } else {
                    $("#payment_method_id").val(result.paymentMethod.id);
                    $('.loaderB').show();                 
                    //$(':button').prop('disabled', false);
                    confirmOrder();
                }
            });
        });
    }

    function confirmOrder() {
        var type = "POST";
        var dataType = "json";
        var paymentMethod = $("#payment_method").val();
        var paymentMethodId = $("#payment_method_id").val();
        var terms = "";
        $('#btn-credit_card').attr('disabled' , true);
        if ($('#terms').is(":checked")) {
            terms = "1";
        }

        var data = {payment_method_id: paymentMethodId, payment_method: paymentMethod, terms: terms}

        var callBack = function (response) {
            if (response.error === 1) {
                displayErrors(response, "errors");
            } else
            {
                window.top.location.href = response.redirect_url;
            }
            $('#btn-credit_card').attr('disabled' , false);
        };

        var errorCallBack = function (response) {
            displayErrors(response, "errors");
            $('#btn-credit_card').attr('disabled' , false);
        };
        var url = "finalcheckout"
        ajaxRequest(url, type, dataType, data, callBack, errorCallBack);
    }

})();

        </script>

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/8530493.js"></script>
<!-- End of HubSpot Embed Code -->



    </body>
</html>
