@extends('pay2c2p::layouts.master')

@section('content')
    <div class="container text-center">
        <div class="row">
            <div class="col"></div>
            <div class="col p-3">
                <h3>2C2P Card Payment</h3>
                <form id="2c2p-payment-form" onsubmit="return false;" method="POST">
                    @csrf
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1">Card number</span>
                        <input class="form-control" type="text" data-encrypt="cardnumber" maxlength="16"
                            value="4111111111111111" onkeypress="InputValidateString()" placeholder="Credit Card Number">
                    </div>
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1">Month</span>
                        <input class="form-control" type="text" data-encrypt="month" maxlength="2" value="02"
                            onkeypress="InputValidateString()" placeholder="MM">
                    </div>
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1">Year</span>
                        <input class="form-control" type="text" data-encrypt="year" maxlength="4" value="2028"
                            onkeypress="InputValidateString()" placeholder="YYYY">
                    </div>
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1">CVV / CVC</span>
                        <input class="form-control" type="password" data-encrypt="cvv" maxlength="4" value="123"
                            onkeypress="InputValidateString()" autocomplete="off" placeholder="CVV2/CVC2">
                    </div>
                    <input class="btn btn-success" type="submit" value="Submit">
                </form>
            </div>
            <div class="col"></div>
        </div>
    </div>
    <img class="w-100" src="{{ asset('assets/image/1a8ee57ac5fe9092bbb73e2a6aaa6e1a.webp') }}">
    <script type="text/javascript" src="https://t.2c2p.com/SecurePayment/api/my2c2p.1.7.3.min.js"></script>
    <script type="text/javascript">
        top.My2c2p.onSubmitForm("2c2p-payment-form", function(errCode, errDesc) {
            if (errCode != 0) {
                alert(errDesc + " (" + errCode + ")");
            } else {
                var frm_data = new FormData($('#2c2p-payment-form')[0]);

                $.ajax({
                    url: "{{ route('pay2c2p.test.submit') }}",
                    type: "POST",
                    contentType: false,
                    data: frm_data,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(resp) {
                        if (resp.success) {
                            if (resp.data.respCode == '1000') {
                                top.window.location.replace(resp.data.data)
                            } else if (resp.data.respCode == '1001') {
                                top.window.location.replace(resp.data.data)
                            } else {
                                console.log(resp)
                            }
                        } else {
                            console.log(resp)
                        }
                    },
                });
            }
        });
    </script>
@endsection