@extends(get_view('index'))
@section('title')
    {{ translate('pay') }} -
@endsection
@section('header')
@endsection
@section('content')
    <!-- section-->
    <div class="mt-4">
        <div class="container">
            <!-- row -->
            <div class="row ">
                <!-- col -->
                <div class="col-12">
                    <!-- breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="/">{{ __('Anasayfa') }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('front.cart') }}">{{ __('Sepetim') }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('front.cart.delivery') }}">{{ __('Teslimat') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Ödeme</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    @if ($errors->any())
                        <div class="alert alert-danger mt-5">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>


    <!-- section -->
    <section class="mb-lg-14 mb-8 mt-8">
        @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
    </section>

@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);
        })

        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();
                    // saveSession();
                } else if (type == "paytr" || type == "" || type == null) {
                }
                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();
            }).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