@extends('OmniPayViews::layouts.redirection-layout')

@section('title')<title>Paymnent</title>
<style>
    body,html{ padding:0; margin:0; overflow: hidden;}
    body{  background: rgb(224,224,224);
        background: linear-gradient(0deg, rgba(224,224,224,1) 0%, rgba(240,240,240,1) 100%); }
    *{ box-sizing: border-box; }
    input{ width: 100%; padding: 0 10px; height: 35px; border:1px solid #666; border-radius: 3px; }
    select{ width: calc(50% - 2px); border:1px solid #666; float:left; height: 35px; border-radius: 3px; }
    select:last-of-type{ float:right; }
    button{ width: 100%; background-color: #000; color:#fff; height: 50px; border:0; border-radius: 3px; }
    label{ font-weight: 700; }
    h1{ margin:0; }
    .box{ position: absolute;  padding:40px; width:100%; max-width: 500px; background-color: #fff; box-shadow: 0 0 30px rgba(0,0,0,0.1);  top: 50%; left:0; right:0; transform: translateY(-50%); margin:auto; }
    .notification{ background-color:rgba(255,0,0,0.8);  color:#fff; padding: 20px; margin:-40px -40px 20px -40px; width: calc(100% + 80px); }
    .error{ padding: 20px; color:green; }
</style>@endsection

@section('content')

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.simplify.com/commerce/v1/simplify.js"></script>

    <div class="box">
        <form id="simplify-payment-form" action="" method="POST" onsubmit="return false;">
            @if(request()->input('notification'))<div class="notification">{{ request()->input('notification') }}</div>@endif
            <table width="100%" cellspacing="0" cellpadding="5">
                <tr><td colspan="2" align="right">you are about to pay</td></tr>
                <tr><td colspan="2" align="right"><h1>{{ $amount }} {{ $currency }}</h1></td></tr>
                <tr><td colspan="2">&nbsp;</td></tr>
{{--                <tr><td><label>Card Number </label></td><td><input id="cc-number" type="text" maxlength="20" autocomplete="off" autofocus value="" /></td></tr>--}}
{{--                <tr><td><label>CVC </label></td><td><input id="cc-cvc" type="text" maxlength="4" autocomplete="off" value=""/></td></tr>--}}
{{--                <tr><td><label>Expiry Date </label></td><td>--}}
{{--                        <select id="cc-exp-month">--}}
{{--                            <option disabled selected>Month</option>--}}
{{--                            <option value="01">Jan</option>--}}
{{--                            <option value="02">Feb</option>--}}
{{--                            <option value="03">Mar</option>--}}
{{--                            <option value="04">Apr</option>--}}
{{--                            <option value="05">May</option>--}}
{{--                            <option value="06">Jun</option>--}}
{{--                            <option value="07">Jul</option>--}}
{{--                            <option value="08">Aug</option>--}}
{{--                            <option value="09">Sep</option>--}}
{{--                            <option value="10">Oct</option>--}}
{{--                            <option value="11">Nov</option>--}}
{{--                            <option value="12">Dec</option>--}}
{{--                        </select>--}}
{{--                        <select id="cc-exp-year">--}}
{{--                            <option disabled selected>Year</option>--}}
{{--                            --}}
{{--                            <option value="25">{{ $i }}</option>--}}
{{--                            --}}
{{--                            <option value="26">{{ $i }}</option>--}}
{{--                            --}}
{{--                            <option value="27">{{ $i }}</option>--}}
{{--                            --}}
{{--                            <option value="28">{{ $i }}</option>--}}
{{--                            --}}
{{--                            <option value="29">{{ $i }}</option>--}}
{{--                            --}}
{{--                            <option value="30">{{ $i }}</option>--}}
{{--                            --}}
{{--                            <option value="31">{{ $i }}</option>--}}
{{--                            --}}
{{--                            <option value="32">{{ $i }}</option>--}}
{{--                            --}}
{{--                            <option value="33">{{ $i }}</option>--}}
{{--                            --}}
{{--                            <option value="34">{{ $i }}</option>--}}
{{--                            --}}
{{--                            <option value="35">{{ $i }}</option>--}}
{{--                            --}}
{{--                        </select>--}}
{{--                    </td></tr>--}}
                <tr><td colspan="2">

                        <script type="text/javascript"
                                src="https://www.simplify.com/commerce/simplify.pay.js"></script>

                        <script>
                            SimplifyCommerce.hostedPayments(
                                function(response) {
                                    console.log(response.data);
                                    $.post('/omnipay/simplify/update/{{ $id }}/'+response.data.id,{},function(data){
                                        window.location = "{{ env("APP_URL") }}/omnipay/response/unknown/{{ $id }}";
                                    })
                                },
                                {
                                    scKey: "{{ $public_key }}",
                                    color: "#12B830"
                                }
                            );
                        </script>

                        <button data-sc-key="{{ $public_key }}"
                                data-currency="{{ $currency }}"
                                data-description="Your purchase from {{ env('APP_URL') }} "
                                data-reference="{{ $id }}"
                                data-amount="{{ $amount * $multiplier }}"
                                data-color="#12B830"
                        >
                            Buy Now
                        </button></td> </tr>
                <tr><td colspan="2">&nbsp;</td></tr>
{{--                <tr><td colspan="2"><button id="process-payment-btn" type="submit">Pay Now</button></td> </tr>--}}

            </table>
        </form>
    </div>

    <script>
        $(document).ready(function() {
            $("#simplify-payment-form").on("submit", function() {
                // Disable the submit button
                $("#process-payment-btn").attr("disabled", "disabled");
                // Generate a card token & handle the response
                SimplifyCommerce.generateToken({
                    key: "{{ $public_key }}",
                    card: {
                        number: $("#cc-number").val(),
                        cvc: $("#cc-cvc").val(),
                        expMonth: $("#cc-exp-month").val(),
                        expYear: $("#cc-exp-year").val()
                    }
                }, simplifyResponseHandler);
                // Prevent the form from submitting
                return false;
            });
        });

        function simplifyResponseHandler(data) {
            console.log(data);
            var $paymentForm = $("#simplify-payment-form");
            // Remove all previous errors
            $(".error").remove();
            // Check for errors
            if (data.error) {
                // Show any validation errors
                if (data.error.code == "validation") {
                    var fieldErrors = data.error.fieldErrors,
                        fieldErrorsLength = fieldErrors.length,
                        errorList = "";
                    for (var i = 0; i < fieldErrorsLength; i++) {
                        // errorList += "<div class='error'>Field: '" + fieldErrors[i].field +
                        //     "' is invalid - " + fieldErrors[i].message + "</div>";

                        errorList += "<div class='error'>" + fieldErrors[i].message + "</div>";
                    }
                    // Display the errors
                    $paymentForm.after(errorList);
                }
                // Re-enable the submit button
                $("#process-payment-btn").removeAttr("disabled");
            } else {
                // The token contains id, last4, and card type
                var token = data["id"];
                // Insert the token into the form so it gets submitted to the server
                $paymentForm.append("<input type='hidden' name='simplifyToken' value='" + token + "' />");
                // Submit the form to the server
                $paymentForm.get(0).submit();
            }
        }

        $(document).ready(function () {
            $('input').keyup(function(e)
            {
                if (/\D/g.test(this.value))
                {
                    // Filter non-digits from input value.
                    this.value = this.value.replace(/\D/g, '');
                }
            });
        });
    </script>
@endsection

@section('scripts')

@endsection