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


        $("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: '/api/payment/paratika/prepare',
            data: form.serialize()
        }).done(function(data) {
            session_token = data.token;
            paratika_action = data.url;
            $(".paratika_form .div_loading").hide();

            if ( $("#payment_type_input").val() == 0 ) {
                $("#paymentForm").attr('action', data.url);
            }

            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');
                    }
                }
            }else{
                $("#paymentForm button[type='submit']").prop('disabled', false);
                $(".paratika_form .div_loading").hide();
            }


            $("#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');

        }).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();
        if ( !session_status && payment_type_input != 1 ) {
            e.preventDefault();   
            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