@extends(get_view('index'))
@section('title'){{ translate('pay') }} - @endsection
@section('header')
@endsection
@section('content')
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-content">
                <ul>
                    <li><a href="{{ url('/') }}">{{ translate('homepage') }}</a></li>
                    <li><a href="{{ route('front.cart') }}">{{ translate('my_cart') }}</a></li>
                    <li class="active">{{ translate('pay') }}</li>
                </ul>
            </div>
        </div>
    </div>


    @if ( cart()['products']->count() > 0 )
        @if ( Auth::check() )
            @include(get_view('components.cart.payment.payment-form'))
        @else
            @include(get_view('components.cart.payment.payment-quickly-form'))
        @endif

        @include(get_view('components.cart.obf-modal'))
        @include(get_view('components.cart.mss-modal'))
        @include(get_view('components.user.addresses.add-new-address-modal'))
    @endif

@endsection
@section('footer')

<script>
    function cc_format(ccid, ctid) {
        // supports Amex, Master Card, Visa, and Discover
        // parameter 1 ccid= id of credit card number field
        // parameter 2 ctid= id of credit card type field

        var ccNumString = document.getElementById(ccid).value;
        ccNumString = ccNumString.replace(/[^0-9]/g, '');
        // mc, starts with - 51 to 55
        // v, starts with - 4
        // dsc, starts with 6011, 622126-622925, 644-649, 65
        // amex, starts with 34 or 37
        var typeCheck = ccNumString.substring(0, 2);
        var cType = '';
        var block1 = '';
        var block2 = '';
        var block3 = '';
        var block4 = '';
        var formatted = '';

        if (typeCheck.length == 2) {
            typeCheck = parseInt(typeCheck);
            if (typeCheck >= 40 && typeCheck <= 49) {
                cType = 'Visa';
            } else if (typeCheck >= 51 && typeCheck <= 55) {
                cType = 'Master Card';
            } else if ((typeCheck >= 60 && typeCheck <= 62) || (typeCheck == 64) || (typeCheck == 65)) {
                cType = 'Discover';
            } else if (typeCheck == 34 || typeCheck == 37) {
                cType = 'American Express';
            } else {
                cType = 'Invalid';
            }
        }

        // all support card types have a 4 digit firt block
        block1 = ccNumString.substring(0, 4);
        if (block1.length == 4) {
            block1 = block1 + ' ';
        }

        if (cType == 'Visa' || cType == 'Master Card' || cType == 'Discover') {
            // for 4X4 cards
            block2 = ccNumString.substring(4, 8);
            if (block2.length == 4) {
                block2 = block2 + ' ';
            }
            block3 = ccNumString.substring(8, 12);
            if (block3.length == 4) {
                block3 = block3 + ' ';
            }
            block4 = ccNumString.substring(12, 16);
        } else if (cType == 'American Express') {
            // for Amex cards
            block2 = ccNumString.substring(4, 10);
            if (block2.length == 6) {
                block2 = block2 + ' ';
            }
            block3 = ccNumString.substring(10, 15);
            block4 = '';
        } else if (cType == 'Invalid') {
            // for Amex cards
            block1 = typeCheck;
            block2 = '';
            block3 = '';
            block4 = '';
            alert('Invalid Card Number');
        }

        formatted = block1 + block2 + block3 + block4;
        document.getElementById(ccid).value = formatted;
        document.getElementById(ctid).value = cType;
    }
</script>
<script>
    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(event) {
        var payment_type_input = $("#payment_type_input");
        if (event.target.id == "payment-bank-tab") {
            payment_type_input.val(1);
            $("#paymentForm").attr('action', $("#paymentForm").data('original-action'));
        } else {
            payment_type_input.val(0);
        }


        var original_action = $("#paymentForm").data('original-action');
        var payment_type = payment_type_input.val();
        if (payment_type == 0) {
            $("#paymentForm").attr('action', paratika_action)
        } else if (payment_type == 1) {
            $("#paymentForm").attr('action', original_action)
        }
    })
</script>
<script>
    var paratika_action = "";
    var invoice_address_type = 1;
    $(document).ready(function() {
        $("#invoice_address_type").change(function() {
            if ($(this).is(':checked')) {
                $(".invoice_address_area").addClass('d-none');
                $(".btn-collapse-invoice-address-area").addClass('d-none');
                invoice_address_type = 1;
            } else {
                $(".invoice_address_area").removeClass('d-none');
                $(".btn-collapse-invoice-address-area").removeClass('d-none');
                invoice_address_type = 0;
            }
        });
    })
</script>
<script>
    var submitButton = $("#paymentForm button[type='submit']")
    var submitButtonText = submitButton.html();
    var session_token = null;

    var address_id = 0;
    $(document).ready(function() {
        address_id = $("input[name='delivery_address']:checked").val();
        get_paratika(address_id);


        $("input[name='delivery_address']").change(function() {
            address_id = $(this).val();
            get_paratika(address_id);
        });
        $("input[name='invoice_address']").change(function() {
            address_id = $(this).val();
            get_paratika(address_id);
        });


        $("#paymentForm input, #paymentForm select").change(function() {
            get_paratika();
        })
    })

    function get_paratika(address_id = 0) {

        toastr.clear();
        $("#email").removeClass('is-invalid');
        $("#phone").removeClass('is-invalid');
        $("#fullname").removeClass('is-invalid');
        $(".paratika_form .div_loading").show();

        var user_id = "{{ Auth::user()->id ?? 0 }}";
        if (invoice_address_type == 1) {
            address_id = $("input[name='delivery_address']:checked").val();
        } else {
            address_id = $("input[name='invoice_address']:checked").val();
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var form = $("#paymentForm")

        $.ajax({
            type: "POST",
            url: "{{ route('front.payment.default.prepare.post') }}",
            data: form.serialize()
        }).done(function(data) {
            console.log({
                data
            });
            paratika_action = data.url;
            $(".paratika_form .div_loading").hide();


            if (typeof data.errorCode != "undefined") {
                if (data.errorCode != "00") {
                    toastr.error(data.errorMsg + ": " + data.violatorParam);
                    $("#paymentForm button[type='submit']").prop('disabled', true);
                    $(".paratika_form .div_loading").show();
                } else {
                    $("#paymentForm button[type='submit']").prop('disabled', false);
                    $(".paratika_form .div_loading").hide();
                }

                if (typeof data.violatorParam != "undefined") {
                    if (data.violatorParam == "CUSTOMERNAME") {
                        $("#fullname").addClass('is-invalid');
                    }
                    if (data.violatorParam == "CUSTOMEREMAIL") {
                        $("#email").addClass('is-invalid');
                    }
                    if (data.violatorParam == "CUSTOMERPHONE") {
                        $("#phone").addClass('is-invalid');
                    }
                }
                return false;
            } else {
                $("#paymentForm button[type='submit']").prop('disabled', false);
                $(".paratika_form .div_loading").hide();
            }

            let excluded = [];
            if (data.type == "paratika") {
                session_token = data.token;
                $("#paratikaScript1").attr('src',
                    'https://h.online-metrix.net/fp/tags.js?org_id=6bmm5c3v&amp&session_id=' +
                    session_token + '&pageid=1');
                $("#paratikaIframe1").attr('src',
                    'https://h.online-metrix.net/fp/tags.js?org_id=6bmm5c3v&amp&session_id=' +
                    session_token + '&pageid=1');
            } else if (data.type == "paytr") {
                // custom payt code
            }

            // get all input data from ajax response and create/update inputs in form
            const {form_fields} = data;
            if (!form_fields) {
                return;
            }
            Object.keys(form_fields).forEach(key => {
                if (!excluded.includes(key)) {
                    const value = form_fields[key];
                    const target_element = $("#paymentForm input[name='" + key + "']");
                    if (target_element.length > 0) {
                        target_element.val(value);
                    } else {
                        $("#paymentForm").append('<input type="hidden" name="' + key + '" value="' +
                            value + '">');
                    }
                }
            });

        }).fail(function(data) {
            $(".paratika_form .div_loading").hide();
            toastr.error('Bir hata oluştu, sayfayı yenilemeyi deneyebilirsiniz.')
        });
    }


    var session_status = false;
    $("#paymentForm").submit(function(e) {
        var payment_type_input = $("#payment_type_input").val();
        const type = $("input[name='type']").val();
        console.log({
            type
        });
        if (!session_status && payment_type_input != 1) {
            if (type == "paratika") {
                e.preventDefault();
            } else if (type == "paytr") {
               
            }
                saveSession();
            submitButton.html(submitButtonText);
        }

        submitButton.html("<span class='spinner-border spinner-border-sm text-white'></span>");
    });

    function saveSession() {
        $("#paymentForm input, #paymentForm select").removeClass('is-invalid');
        $(".address_validation_count").hide();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var form = $("#paymentForm")

        $.ajax({
            type: "POST",
            url: '/cart/save/session',
            data: form.serialize()
        }).done(function(data) {
            $(".paratika_form .div_loading").hide();
            $("#paymentForm").attr('action', data.url);
            session_status = true;
            $("#paymentForm").submit();
        }).error(function(data) {
            if (typeof data.responseJSON != "undefined") {
                if (typeof data.responseJSON.message != "undefined") {
                    toastr.clear();

                    if (typeof data.responseJSON.errors != "undefined") {
                        Object.keys(data.responseJSON.errors).forEach(element => {
                            data.responseJSON.errors[element].forEach(el => {
                                toastr.error(el)
                            });
                        });

                        var error_input_names = Object.keys(data.responseJSON.errors);
                        for (let i = 0; i < error_input_names.length; i++) {
                            $("#paymentForm input[name='" + error_input_names[i] + "']").addClass('is-invalid');
                            $("#paymentForm select[name='" + error_input_names[i] + "']").addClass(
                                'is-invalid');
                            $(".address_validation_count").show();
                        }
                    }
                    submitButton.html(submitButtonText);
                }
            }
        }).fail(function(data) {
            if (typeof data.message != "undefined") {
                toastr.error(data.message)
            }
            $(".paratika_form .div_loading").hide();
            submitButton.html(submitButtonText);
        });
    }
</script>
<!-- TMX Profiling -->
<script type="text/javascript" src="https://h.online-metrix.net/fp/tags.js?org_id=6bmm5c3v&amp&session_id={SESSIONTOKEN}&pageid=1" id="paratikaScript1"></script>
<noscript>
    <iframe style="width: 100px; height: 100px; border: 0; position: absolute; top: -5000px;" id="paratikaIframe1" src="https://h.online-metrix.net/fp/tags.js?org_id=6bmm5c3v&amp&session_id={SESSIONTOKEN}&pageid=1 "></iframe>
</noscript>
@endsection